小程序端页面调整

xlcs-user/pages/cart/cart.vue

@@ -14,36 +14,22 @@
           <view v-for="(cartInfoListItem, index) in getCartInfoList" :key="index">
             <u-card :border="false" :padding="10" :show-head="showMultiCheckbox(index)">
               <view slot="head" class="u-m-10">
-                <u-checkbox
-                    :name="getMultiCheckedIds(index)"
-                    :value="getMultiCheckCart(index)"
-                    active-color="red"
-                    shape="circle"
-                    @change="changeMultiChecked"
-                ></u-checkbox>
+                <u-checkbox :name="getMultiCheckedIds(index)" :value="getMultiCheckCart(index)"
+                            active-color="red" shape="circle" @change="changeMultiChecked"></u-checkbox>
                 <text>{{ cartInfoListItem.activityRule.ruleDesc }}</text>
               </view>
               <view slot="body">
                 <view v-for="(cartInfoItem, idx) in cartInfoListItem.cartInfoList" :key="idx">
                   <!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
-                  <view :class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
-                        class="u-body-item u-flex u-col-between u-p-10">
-                    <u-checkbox
-                        v-model="cartInfoItem.isChecked"
-                        :name="cartInfoItem.skuId"
-                        active-color="red"
-                        shape="circle"
-                        @change="changeChecked"
-                    ></u-checkbox>
-                    <ListImgItem
-                        :lazyLoad="false"
-                        :showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
-                        :showLeft="cartInfoItem.skuType === 1"
-                        :showRight="false"
-                        :src="cartInfoItem.imgUrl"
-                        height="200rpx"
-                        width="200rpx"
-                    ></ListImgItem>
+                  <view
+                      :class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
+                      class="u-body-item u-flex u-col-between u-p-10">
+                    <u-checkbox v-model="cartInfoItem.isChecked" :name="cartInfoItem.skuId"
+                                active-color="red" shape="circle" @change="changeChecked"></u-checkbox>
+                    <ListImgItem :lazyLoad="false"
+                                 :showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
+                                 :showLeft="cartInfoItem.skuType === 1" :showRight="false"
+                                 :src="cartInfoItem.imgUrl" height="200rpx" width="200rpx"></ListImgItem>
                     <view class="u-p-b-20 u-m-l-20" style="flex:1">
                       <view class="u-font-lg">{{ cartInfoItem.skuName }}</view>
                       <view class="u-flex u-row-between">
@@ -51,7 +37,8 @@
                           <text>￥</text>
                           <text>{{ cartInfoItem.cartPrice }}</text>
                         </view>
-                        <AddToCart :shopDetail="cartInfoItem" :skuId="cartInfoItem.skuId"></AddToCart>
+                        <AddToCart :shopDetail="cartInfoItem" :skuId="cartInfoItem.skuId">
+                        </AddToCart>
                       </view>
                     </view>
                   </view>
@@ -79,7 +66,9 @@
                 <view class="u-font-xs u-type-info">
                   优惠券优惠:￥{{ getCartPriceInfo.couponReduceAmount }}
                   <text class="u-font-xs u-m-l-20 u-type-info">原价:</text>
-                  <text class="u-font-xs u-type-info">￥{{ getCartPriceInfo.originalTotalAmount }}</text>
+                  <text
+                      class="u-font-xs u-type-info">￥{{ getCartPriceInfo.originalTotalAmount }}
+                  </text>
                 </view>
               </view>
             </view>
@@ -95,8 +84,8 @@
       </view>
     </view>
 
-    <CouponInfoList :couponInfoList="getCartCouponInfoList"
-                    :showCouponInfoList.sync="showCouponInfoList"></CouponInfoList>
+    <CouponInfoList :couponInfoList="getCartCouponInfoList" :showCouponInfoList.sync="showCouponInfoList">
+    </CouponInfoList>
   </view>
 </template>
 
@@ -122,7 +111,9 @@ export default {
     ])
   },
   methods: {
-    ...mapActions('cartModule', ['getActivityCartListAction', 'changeCheckCartAction', 'changeMultiCheckedCartAction', 'changeAllCheckCartAction']),
+    ...mapActions('cartModule', ['getActivityCartListAction', 'changeCheckCartAction',
+      'changeMultiCheckedCartAction', 'changeAllCheckCartAction'
+    ]),
     ...mapActions('cartModule', ['getCartListAction']),
     // 到分类页购买商品
     gotoCategory() {
@@ -133,20 +124,31 @@ export default {
     // 修改单个商品选中状态
     changeChecked(detail) {
       let isChecked = 1;
-      const {name: skuId, value} = detail;
+      const {
+        name: skuId,
+        value
+      } = detail;
       if (!value) isChecked = 0;
-      this.changeCheckCartAction({skuId, isChecked});
+      this.changeCheckCartAction({
+        skuId,
+        isChecked
+      });
     },
     // 修改多个商品的选中状态
     changeMultiChecked(detail) {
       let skuIdList = [];
       skuIdList = detail.name.split(',');
       const isChecked = detail.value === true ? 1 : 0;
-      this.changeMultiCheckedCartAction({skuIdList, isChecked});
+      this.changeMultiCheckedCartAction({
+        skuIdList,
+        isChecked
+      });
     },
     // 全部选中/返选
     changeAllSelected(detail) {
-      this.changeAllCheckCartAction({isChecked: detail.value === true ? 1 : 0});
+      this.changeAllCheckCartAction({
+        isChecked: detail.value === true ? 1 : 0
+      });
     },
     // 跳转至确认订单
     gotoConfirmOrder() {
@@ -156,7 +158,9 @@ export default {
   // 思考：为什么需要将请求放置于onShow钩子函数中，
   // 主要考虑tabs切换后需要进行实时数据的获取
   onShow() {
-    this.getActivityCartListAction({showLoading: true});
+    this.getActivityCartListAction({
+      showLoading: true
+    });
   },
   mounted() {
     // 需要获取购物车数据列表，将最新获取的数据渲染到页面