渲染页面

静态结构

  1. <template>
  2. <view class="cart">
  3.   <!-- 1 列表 -->
  4.   <view class="cart-list">
  5.     <view class="cart-item">
  6.       <!-- 1 复选框 -->
  7.       <view class="goods-chk">
  8.         <u-checkbox value="" shape="circle" active-color="red"></u-checkbox>
  9.   </view>
  10.       <!-- 2 图片 -->
  11.       <view class="goods-img">
  12.         <u-image width="191rpx" height="191rpx"></u-image>
  13.   </view>
  14.       <!-- 3 信息 -->
  15.       <view class="goods-info">
  16.         <!-- 名称 -->
  17.         <view class="goods-name u-line-2"></view>
  18.         <!-- 价格和数量 -->
  19.         <view class="goods-price-num">
  20.           <view class="goods-price">￥xxx</view>
  21.           <view class="goods-num-tool">
  22.             <view class="num-btn">-</view>
  23.             <view class="goods-num">xxx</view>
  24.             <view class="num-btn">+</view>
  25.   </view>
  26.   </view>
  27.   </view>
  28.   </view>
  29.   </view>
  30.   <!-- 2 统计 -->
  31.   <view class="statistics">
  32.     <view class="all-chk">
  33.       <u-checkbox shape="circle" active-color="red">全选</u-checkbox>
  34.   </view>
  35.     <view class="all-price"> 合计: <text>￥xxx</text> </view>
  36.     <view class="all-count">
  37.       <u-button type="error" shape="circle">去结算(xxx)</u-button>
  38.   </view>
  39.   </view>
  40.   </view>
  41. </template>
  43. <script>
  44.   export default {};
  45. </script>
  47. <style lang="scss">
  48.   .cart {
  49.     padding-bottom: 111rpx;
  50.     .cart-list {
  51.       .cart-item {
  52.         display: flex;
  53.         padding: 10rpx;
  54.         border-bottom: 1rpx solid #ccc;
  55.         .goods-chk {
  56.           flex: 1;
  57.           display: flex;
  58.           align-items: center;
  59.           justify-content: center;
  60.         }
  62.         .goods-img {
  63.           flex: 2;
  65.           display: flex;
  66.           align-items: center;
  67.           justify-content: center;
  68.         }
  70.         .goods-info {
  71.           color: #666;
  72.           flex: 3;
  73.           display: flex;
  74.           flex-direction: column;
  75.           justify-content: space-around;
  76.           .goods-name {
  77.           }
  79.           .goods-price-num {
  80.             display: flex;
  81.             justify-content: space-between;
  82.             .goods-price {
  83.               color: #eb4450;
  84.             }
  86.             .goods-num-tool {
  87.               width: 140rpx;
  88.               height: 40rpx;
  90.               display: flex;
  91.               justify-content: space-between;
  92.               .num-btn {
  93.                 border: 1rpx solid #ccc;
  94.                 border-radius: 50%;
  95.                 width: 40rpx;
  96.                 height: 40rpx;
  97.                 text-align: center;
  98.                 line-height: 40rpx;
  99.               }
  100.             }
  101.           }
  102.         }
  103.       }
  104.     }
  105.     .statistics {
  106.       position: fixed;
  107.       background-color: #fff;
  108.       bottom: 0;
  109.       left: 0;
  110.       width: 100%;
  111.       z-index: 100;
  112.       border-top: 1rpx solid #ccc;
  113.       display: flex;
  114.       align-items: center;
  115.       padding: 15rpx;
  116.       .all-chk {
  117.       }
  119.       .all-price {
  120.         flex: 1;
  121.         color: #666;
  122.         text {
  123.         }
  124.       }
  126.       .all-count {
  127.       }
  128.     }
  129.   }
  130. </style>

渲染数据

使用mapState辅助函数来获取商品数据

复选框这里不能直接v-modle，会双向绑定，造成数据修改
vuex 规定 修改state入口只能是mutations

u-checkbox组件可以使用value绑定选中

  1. <template>
  2.   <view class="cart">
  3.     <!-- 1 列表 -->
  4.     <view class="cart-list" v-for="item in goodsArr" :key="item.goods_id">
  5.       <view class="cart-item">
  6.         <!-- 1 复选框 -->
  7.         <view class="goods-chk" >
  8.           <u-checkbox 
  9.             :value="item.checked" 
  10.             shape="circle" 
  11.             active-color="red"
  12.           ></u-checkbox>
  13.         </view>
  14.         <!-- 2 图片 -->
  15.         <view class="goods-img">
  16.           <u-image :src="item.goods_small_logo" width="191rpx" height="191rpx"></u-image>
  17.         </view>
  18.         <!-- 3 信息 -->
  19.         <view class="goods-info">
  20.           <!-- 名称 -->
  21.           <view class="goods-name u-line-2">{{item.goods_name}}</view>
  22.           <!-- 价格和数量 -->
  23.           <view class="goods-price-num">
  24.             <view class="goods-price">￥{{item.goods_price}}</view>
  25.             <view class="goods-num-tool">
  26.               <view class="num-btn">-</view>
  27.               <view class="goods-num">{{item.count}}</view>
  28.               <view class="num-btn">+</view>
  29.             </view>
  30.           </view>
  31.         </view>
  32.       </view>
  33.     </view>
  34.     <!-- 2 统计 -->
  35.     <view class="statistics">
  36.       <view class="all-chk">
  37.         <u-checkbox shape="circle" active-color="red">全选</u-checkbox>
  38.       </view>
  39.       <view class="all-price"> 合计: <text>￥xxx</text> </view>
  40.       <view class="all-count">
  41.         <u-button type="error" shape="circle">去结算(xxx)</u-button>
  42.       </view>
  43.     </view>
  44.   </view>
  45. </template>
  47. <script>
  48. import {mapState} from 'vuex'
  49. export default {
  50.   computed: {
  51.     ...mapState('cart',['goodsArr'])
  52.   },
  53. };
  54. </script>

功能

商品选择按钮

用户点击后，传递商品id给回调函数，提交mutations利用id来查找商品元素

  1. <!-- 1 复选框 -->
  2.         <view class="goods-chk" >
  3.           <u-checkbox 
  4.             :value="item.checked" 
  5.             shape="circle" 
  6.             active-color="red"
  7.             @change="handleItemChecked(item.goods_id)"
  8.           ></u-checkbox>
  9.         </view>
  12. <script>
  13. import {mapState,mapMutations} from 'vuex'
  14. export default {
  15.   methods: {
  16.     ...mapMutations('cart',['cartGoodsCheckMutations']),
  17.     handleItemChecked(goods_id) {
  18.       // console.log(goods_id);
  19.       this.cartGoodsCheckMutations({goods_id})
  20.     }
  21.   },
  22.   computed: {
  23.     ...mapState('cart',['goodsArr'])
  24.   },
  25. };
  26. </script>
  1. // 单选
  2. cartGoodsCheckMutations(state,payload) {
  3.   const goods = state.goodsArr.find(item => item.goods_id === payload.goods_id)
  4.   // console.log('当前商品项',goods);
  5.   // 取反
  6.   goods.checked = !goods.checked
  7.   // 修改数据之后都需要存储
  8.   uni.setStorageSync('cart',state.goodsArr)
  9. }

加减功能

绑定同一个事件，但是传递的参数不一样 加传递1 减传递-1

  2. <!-- 价格和数量 -->
  3. <view class="goods-price-num">
  4.   <view class="goods-price">￥{{item.goods_price}}</view>
  5.     <view class="goods-num-tool">
  6.     <view class="num-btn" @click="handleGoodsItemCount(item.goods_id,-1)">-</view>
  7.     <view class="goods-num">{{item.count}}</view>
  8.     <view class="num-btn" @click="handleGoodsItemCount(item.goods_id,1)">+</view>
  9.   </view>
  10. </view>
  12. <script>
  13. import {mapState,mapMutations} from 'vuex'
  14. export default {
  15.   methods: {
  16.     ...mapMutations('cart',['cartGoodsCheckMutations','cartGoodsCountMutations']),
  17.     // 数量加减
  18.     handleGoodsItemCount(goods_id,unit) {
  19.       this.cartGoodsCountMutations({goods_id,unit})
  20.     }
  21.   }
  22. };
  23. </script>
  1. // 商品数量加减
  2.     cartGoodsCountMutations (state,payload) {
  3.        // 获取当前商品项
  4.        const goods = state.goodsArr.find(item => item.goods_id === payload.goods_id)
  5.        // unit值 1 或者 -1
  6.        goods.count += payload.unit
  7.        // 修改数据之后都需要存储
  8.       uni.setStorageSync('cart',state.goodsArr)
  9.       }

删除功能

当商品数量为0 的时候 弹窗询问 是否删除 是删除该商品 否关闭弹窗

uni.showModal({})返回值中confirm的值为true表示点击确定，以此来作为用户点击的判断

  1. <view
  2.   class="num-btn"
  3.   @click="handleGoodsItemCount(item.goods_id, -1, item.count)"
  4.   >-</view>
  5. <view class="goods-num">{{ item.count }}</view>
  6. <view
  7.   class="num-btn"
  8.   @click="handleGoodsItemCount(item.goods_id, 1, item.count)"
  9.   >+</view>
  11. // 数量加减
  12. async handleGoodsItemCount (goods_id, unit, count) {
  13.   // 判断 是否点击的是 - 且 商品数量为1
  14.   if (unit === -1 && count === 1) {
  15.     const [err, { confirm }] = await uni.showModal({
  16.       title: '提示',
  17.       content: '是否删除该商品',
  18.       showCancel: true,
  19.       cancelText: "取消",
  20.       cancelColor: "#000000",
  21.       confirmText: "确定",
  22.       confirmColor: "#3CC51F",
  23.     })
  24.     if (confirm) {
  25.       // 用户点击确认后
  26.       this.cartGoodsDelete({ goods_id })
  27.     } else {
  28.       // 用户点击取消后
  29.       return
  30.     }
  31.   } else {
  32.     // 正常做数量编辑
  33.     this.cartGoodsCountMutations({ goods_id, unit })
  34.   }
  35.     },
  1. // 商品删除
  2. cartGoodsDelete (state, payload) {
  3.   const index = state.goodsArr.findIndex(item => item.goods_id === payload.goods_id)
  4.   state.goodsArr.splice(index, 1)
  5.   // 修改数据之后都需要存储
  6.   uni.setStorageSync('cart', state.goodsArr)
  7. }