技术标签: uni-app 小程序项目 uni-app
<!-- 购物车商品列表的标题区域 -->
<view class="cart-title">
<!-- 左侧的图标 -->
<uni-icons type="shop" size="18"></uni-icons>
<!-- 描述文本 -->
<text class="cart-title-text">购物车</text>
</view>
.cart-title {
height: 40px;
display: flex;
align-items: center;
font-size: 14px;
padding-left: 5px;
border-bottom: 1px solid #efefef;
.cart-title-text {
margin-left: 10px;
}
}
mapState
辅助函数,将 Store 中的 cart 数组映射到当前页面中使用:import badgeMix from '@/mixins/tabbar-badge.js'
// 按需导入 mapState 这个辅助函数
import {
mapState } from 'vuex'
export default {
mixins: [badgeMix],
computed: {
// 将 m_cart 模块中的 cart 数组映射到当前页面中使用
...mapState('m_cart', ['cart']),
},
data() {
return {
}
},
}
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<my-goods :goods="goods"></my-goods>
</block>
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
<radio checked color="#C00000"></radio>
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
.goods-item-left {
margin-right: 5px;
display: flex;
justify-content: space-between;
align-items: center;
.goods-pic {
width: 100px;
height: 100px;
display: block;
}
}
export default {
// 定义 props 属性,用来接收外界传递到当前组件的数据
props: {
// 商品的信息对象
goods: {
type: Object,
default: {
},
},
// 是否展示图片左侧的 radio
showRadio: {
type: Boolean,
// 如果外界没有指定 show-radio 属性的值,则默认不展示 radio 组件
default: false,
},
},
}
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
<!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 -->
<radio checked color="#C00000" v-if="showRadio"></radio>
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<my-goods :goods="goods" :show-radio="true"></my-goods>
</block>
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
<!-- 存储在购物车中的商品,包含 goods_state 属性,表示商品的勾选状态 -->
<radio :checked="goods.goods_state" color="#C00000" v-if="showRadio"></radio>
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<!-- 在 radioChangeHandler 事件处理函数中,通过事件对象 e,得到商品的 goods_id 和 goods_state -->
<my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler"></my-goods>
</block>
methods: {
// 商品的勾选状态发生了变化
radioChangeHandler(e) {
console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false}
}
}
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
<radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
methods: {
// radio 组件的点击事件处理函数
radioClickHandler() {
// 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件,
// 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
this.$emit('radio-change', {
// 商品的 Id
goods_id: this.goods.goods_id,
// 商品最新的勾选状态
goods_state: !this.goods.goods_state
})
}
}
// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {
// 根据 goods_id 查询购物车中对应商品的信息对象
const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
// 有对应的商品信息对象
if (findResult) {
// 更新对应商品的勾选状态
findResult.goods_state = goods.goods_state
// 持久化存储到本地
this.commit('m_cart/saveToStorage')
}
}
import badgeMix from '@/mixins/tabbar-badge.js'
import {
mapState, mapMutations } from 'vuex'
export default {
mixins: [badgeMix],
computed: {
...mapState('m_cart', ['cart']),
},
data() {
return {
}
},
methods: {
...mapMutations('m_cart', ['updateGoodsState']),
// 商品的勾选状态发生了变化
radioChangeHandler(e) {
this.updateGoodsState(e)
},
},
}
注意:NumberBox 组件是 uni-ui 提供的
<view class="goods-info-box">
<!-- 商品价格 -->
<view class="goods-price">¥{
{
goods.goods_price | tofixed}}</view>
<!-- 商品数量 -->
<uni-number-box :min="1"></uni-number-box>
</view>
.goods-item-right {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 13px;
}
.goods-info-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.goods-price
文章浏览阅读121次。### tianmao# 价格//*[@id="J_ItemList"]/div/div/p[1]/em/text()//*[@id="J_ItemList"]/div/div/p[3]/span[1]/em//*[@id="J_ItemList"]/div/@data-id//*[@id="J_ItemList"]/div/div/p[2]/a/@hr..._xpath 天猫
文章浏览阅读860次,点赞28次,收藏22次。现如今大学社团各式各样的都有,学校对社团的管理手段处于落后阶段,以致于对社团的未来发展以及社团的活动开展都有一定的影响,导致大学校内社团不能健康的发展,所以有必要建设一个大学社团管理系统来帮助学校管理校内社团,给学校提供一个管理社团更有效的一个手段,通过这样的系统,可以做到对信息的规范管理、科学统计和快速查询,从而减少了管理方面的工作量。在中国对于校园社团的网站其实是很缺少的,校园社团信息管理系统为学校提供一个监管大学社团的平台,为社团提供一个在线收纳社员的平台,为学生提供一个在线选择社团的平台。
文章浏览阅读164次。MySql164.数据库的三范式是什么?第一范式:强调的是列的原子性,即数据库表的每一列都是不可分割的原子数据项。第二范式:要求实体的属性完全依赖于主关键字。所谓完全依赖是指不能存在仅依赖主关键字一部分的属性。第三范式:任何非主属性不依赖于其它非主属性。165. 一张自增表里面总共有 7 条数据,删除了最后 2 条数据,重启 mysql 数据库,又插入了一条数据,此时 id 是几?表类型如果是 MyISAM ,那 id 就是 8。表类型如果是 InnoDB,那 id 就是 6。Inno_explain select * from table where type=1。
文章浏览阅读2.5w次。另一方面,随着对数字化转型和敏捷性的更加关注,项目需要比以前更快地交付,但仍需要与更大的核心系统相互连接,这些系统的变化速度比其数字系统要慢得多。在这种情况下,一个人会有重复的功能(使用上述三种模式中的任何一种),但不是将功能流量定向到特定系统,而是将特定流量或条件流量定向到一个系统,并将剩余流量定向到另一个系统.微服务由不同的团队构建,并依赖于它们之间的交互。因此,这意味着团队之间需要非常密切的合作,以确保规范的设计和构建是正确的,不仅是在设计期间,而且在以后进行更改时也是如此,以避免互操作性问题。_decoupled architecture:
文章浏览阅读233次。(以安装DBI和DBD::mysql为例)方法一:cpan(这个是最简单的方法,首次使用时请按照方法二安装CPAN(v2.05)这个模块)>cpan>installDBI#使用该命令,DBI安装成功,但是DBD-mysql没有安装成功,报错如下methods to determineprerequisitesFailed during this command:CAPTTOFU/DBD..._[dbd-mysql-4.023] 错误 1
文章浏览阅读516次。在Oracle中的树形操作在Oracle中的树形操作1.取子节点及路径(正树):select t.id ,t.code, t.name ,t.pid,SYS_CONNECT_BY_PATH(t.id,'.')||'.' as IdPathfrom tas_catalog t--where id!=110start with id=110connect by pid = prior idorder..._oracle树轴
文章浏览阅读1w次。 不知道是不是tabbar有这种情况,在tabbar里定义类似不会被触发。检查了一圈发现, 好像只有在onload里引用过的同名方法,才会在onshow里被触发到。 不知道具体原因是不是这个, 反正我这么做了之后onshow里是可以调用到的了。。..._苹果 tabs onshow 事件未触发
文章浏览阅读168次。补码的乘法运算
文章浏览阅读911次。安装以上包版本必须对应,不然会报错本人python 3.8,cpu通过参考各方大神,最后成功安装1)torch1.4,对应的torchvision版本是0.5.0对应版本参考:https://blog.csdn.net/AugustMe/article/details/109028989torchvision下载链接:https://pypi.org/project/torchvision/0.5.0/#filestorch1.4下载链接:https://download.pytorch.._torch_scatter下载
文章浏览阅读1.1k次。转自:http://blog.csdn.net/dapeng0802/article/details/50526365[Python标准库]decimal——定点数和浮点数的数学运算 作用:使用定点数和浮点数的小数运算。 Python 版本:2.4 及以后版本 decimal 模块实现了定点和浮点算术运算符,使用的是大多数人所熟悉的模型,而不是程序员熟悉的...
文章浏览阅读1.3k次,点赞28次,收藏29次。免费的 PDF 查看器很容易找到。除了 Adobe Acrobat Reader 之外,许多程序都可以显示 PDF 文件,但找到一个好的免费 PDF 编辑器(允许您编辑和保存现有 PDF 的程序)是一个更具挑战性的提议。问题在于,几乎所有能够编辑 PDF 文件的程序都试图向您推销附加功能,无论是按月订阅还是免费提供基本功能但对高级功能收费的“免费增值”模式。_奇客pdf
文章浏览阅读3.7k次,点赞3次,收藏2次。PostgreSQL时区SQL 标准通过"+"或者"-"是否存在来区分timestamp without time zone和timestamp with time zone文本。因此,TIMESTAMP '2021-03-06 18:02:00'是一个timestamp without time zone,而TIMESTAMP '2021-03-06 18:02:00 +08'是一个timestamp with time zone。+08:表示 时区与全球统一时间 ..._postgreql to_char 时区