style(client): 优化购物车界面

src/PageMine/address/editAddress.vue

@@ -120,6 +120,7 @@ export default {
     width: 90%;
     position: fixed;
     bottom: 10%;
+    z-index: 999;
   }
 }
 </style>

src/PageMine/address/index.vue

@@ -1,7 +1,12 @@
 <template>
   <view class="address">
     <page-navbar bgColor="#fff" title="地址"></page-navbar>
-    <base-card padding="24rpx" marginBottom="24rpx" v-for="(item, index) in 5" :key="index">
+    <base-card
+      padding="24rpx"
+      marginBottom="24rpx"
+      v-for="(item, index) in 5"
+      :key="index"
+    >
       <view class="fl-flex u-m-b-16">
         <view class="f-s-28 text-primary u-m-r-16">王忠青</view>
         <view class="f-s-28 text-primary">18286672345</view>
@@ -24,7 +29,11 @@
       </view>
     </base-card>
     <view class="address-bottom">
-      <base-button text="新增地址" :buttonStyle="customStyle" @click="handleAddress"></base-button>
+      <base-button
+        text="新增地址"
+        :buttonStyle="customStyle"
+        @click="handleAddress"
+      ></base-button>
     </view>
   </view>
 </template>
@@ -62,6 +71,7 @@ export default {
     width: 90%;
     position: fixed;
     bottom: 10%;
+    z-index: 999;
   }
 }
 </style>

src/PageMine/feedback/index.vue

@@ -105,6 +105,7 @@ export default {
   height: 180rpx;
   bottom: 0;
   position: fixed;
+  z-index: 999;
   padding: 33rpx 32rpx 0 32rpx;
   background-color: #fff;
   box-sizing: border-box;

src/PageMine/gotoEvaluate/index.vue

@@ -84,6 +84,7 @@ export default {
   padding: 33rpx 32rpx 0 32rpx;
   background-color: #fff;
   box-sizing: border-box;
+  z-index: 999;
 }
 ::v-deep .u-textarea {
   background-color: #f9f9f9 !important;

src/PageMine/personInfo/index.vue

@@ -159,6 +159,7 @@ export default {
     width: 90%;
     position: fixed;
     bottom: 10%;
+    z-index: 999;
   }
 
   ::v-deep .u-cell__body {

src/PageMine/serviceCenter/index.vue

@@ -193,7 +193,7 @@ export default {
     width: 100%;
     bottom: 0;
     position: fixed;
-
+    z-index: 999;
     .service-bottom-item {
       background: #fff;
       padding: 28rpx 104rpx 68rpx 104rpx;

src/PageMine/shopCar/index copy.vue

@@ -0,0 +1,372 @@
+<template>
+  <view class="cart">
+    <page-navbar bgColor="#fff" title="购物车"></page-navbar>
+    <view class="manage">
+      <view @click="handlerManage">管理</view>
+      <!-- <view>退出管理</view> -->
+    </view>
+    <!-- 列表1 -->
+    <!-- <CartList :init_list.sync='init_list' :isAllSecect.sync='isAllSecect' @handlerIsSelectAll='handlerIsSelectAll'></CartList> -->
+    <view>
+      <u-checkbox-group shape="circle" placement="column" v-model="goodsCheckbox">
+        <view class="item-box" v-for="(item, index) of init_list" :key="index">
+          <view class="item-top" @click="handlerSkipShopDetail(item)">
+            <view class="top-title"> {{ item.name }} </view>
+            <u-icon name="arrow-right"></u-icon>
+          </view>
+          <view
+            class="item"
+            v-for="(itm, idx) of item.cartItems"
+            :key="idx"
+            @click="handlerSkipGoodsDetail(item, idx)"
+          >
+            <view class="item-l">
+              <view class="l-l">
+                <u-checkbox :name="itm.id"></u-checkbox>
+              </view>
+              <view class="l-r">
+                <image class="r-img" :src="itm.goodsPic" mode="aspectFill"></image>
+                <view class="r-box">
+                  <view class="r-name">{{ itm.goodsName }}</view>
+                  <view class="r-discript">{{ itm.goodsName }}</view>
+                  <view class="r-price">￥{{ (itm.price * itm.quantity).toFixed(2) }}</view>
+                </view>
+              </view>
+            </view>
+            <view class="item-r">
+              <u-number-box v-model="itm.quantity" @change="valChange(itm, $event)"></u-number-box>
+            </view>
+          </view>
+        </view>
+      </u-checkbox-group>
+    </view>
+
+    <!-- 底部1 -->
+    <view class="bottom fl-flex-item">
+      <!-- <u-checkbox-group shape="circle" v-model="isAllSecect" @change="isAllChange">
+        <u-checkbox label="全部" name="0"> </u-checkbox>
+      </u-checkbox-group> -->
+      <view class=""> </view>
+      <view class="bottom-price" v-show="!manageShow">
+        <view>
+          <text style="font-size: 22rpx; color: #333">合计：</text>
+          <text style="font-size: 22rpx">￥</text>
+          <text style="font-size: 34rpx; font-weight: 800">{{ allPrice.sum }}</text>
+        </view>
+        <view class="favorable fl-flex">
+          <text style="margin-right: 10rpx">
+            已优惠
+            <text style="font-weight: 800">￥255</text>
+          </text>
+          <!-- <view class="fl-flex" @click="instructionShow = true"> -->
+          <view class="fl-flex">
+            <text style="margin-right: 5rpx">优惠明细</text>
+            <u-icon name="arrow-up" color="#fe7b21" size="12" />
+          </view>
+        </view>
+      </view>
+      <view class="settleAccount" @click="handlerSettleBill">
+        {{ !manageShow ? `结算( ${allPrice.goodsNumber} )` : `删除( ${allPrice.goodsNumber} ) ` }}
+      </view>
+    </view>
+
+    <!-- <u-popup :show="instructionShow" mode="bottom" @close="instructionShow = false" round="20">
+      <view class="pop-box">
+        <text>出淤泥而不染，濯清涟而不妖</text>
+      </view>
+    </u-popup> -->
+  </view>
+</template>
+
+<script>
+import {
+  getShoppingCart,
+  deleteCartItem,
+  editGoodsNumb,
+  generateConfirmOrder,
+} from '@/api/client/business.js';
+export default {
+  data() {
+    return {
+      init_list: [],
+      isAllSecect: [], //checkbox是否全选
+      goodsCheckbox: [], //checkbox选择商品
+      sumPrice: 0,
+      instructionShow: false, // 底部优惠明细
+
+      manageShow: false,
+      queryParams: {
+        paging: '1,10',
+      },
+      AllGoods: [],
+    };
+  },
+  onShow() {
+    this.handlerInitList();
+  },
+  watch: {
+    goodsCheckbox(newValue) {
+      if (
+        newValue.length == this.AllGoods.length &&
+        (newValue.length != 0 || this.AllGoods.length != 0)
+      ) {
+        this.isAllSecect.push('0');
+      } else {
+        this.isAllSecect = [];
+      }
+    },
+  },
+  computed: {
+    allPrice() {
+      let sum = 0;
+      let goodsNumber = 0;
+      this.goodsCheckbox.map(rs => {
+        this.AllGoods.map(rc => {
+          if (rs == rc.id) {
+            rc.allPrice = Number((rc.price * rc.quantity).toFixed(2));
+            sum += rc.allPrice;
+            goodsNumber += rc.quantity;
+          }
+        });
+      });
+      return {
+        sum,
+        goodsNumber,
+      };
+    },
+  },
+  methods: {
+    // 初始化购物车列表
+    handlerInitList() {
+      getShoppingCart(this.queryParams).then(res => {
+        this.init_list = res.data.records;
+        this.init_list.map(rs => {
+          rs.cartItems.map(rc => {
+            this.AllGoods.push(rc);
+          });
+        });
+      });
+    },
+    // 结算按钮
+    handlerSettleBill() {
+      if (this.manageShow) {
+        deleteCartItem(this.goodsCheckbox.join(',')).then(res => {
+          if (res.code === 'OK') {
+            uni.showToast({
+              title: '删除成功',
+              icon: 'none',
+            });
+            this.handlerInitList();
+            this.AllGoods = [];
+            this.isAllSecect = [];
+            this.goodsCheckbox = [];
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      } else {
+        let sumbutArray = [];
+        this.init_list.map(rs => {
+          rs.cartItems.map(rc => {
+            this.goodsCheckbox.map(rd => {
+              if (rc.id == rd) {
+                sumbutArray.push(rs.id);
+              }
+            });
+          });
+        });
+        let a = Array.from(new Set(sumbutArray));
+        if (a.length > 1) {
+          uni.showToast({
+            title: '不能同时下单多个商家',
+            icon: 'none',
+          });
+          return;
+        } else {
+          generateConfirmOrder({
+            cartIds: this.goodsCheckbox,
+            payType: 2,
+          }).then(res => {
+            if (res.code === 'OK') {
+              uni.navigateTo({
+                url: `/pagesHome/settleOrder/index?ids=${a[0]}`,
+              });
+            }
+          });
+        }
+      }
+    },
+    // 修改商品数量
+    valChange(item, e) {
+      editGoodsNumb(item.id, {
+        quantity: e.value,
+      }).then(res => {
+        console.log('@@@2res', res);
+      });
+    },
+
+    // 是否多选
+    isAllChange(e) {
+      if (e.length) {
+        this.goodsCheckbox = [];
+        this.AllGoods.map(rs => {
+          this.goodsCheckbox.push(rs.id);
+        });
+      } else {
+        this.goodsCheckbox = [];
+      }
+    },
+    // 管理按钮
+    handlerManage() {
+      this.manageShow = !this.manageShow;
+      this.goodsCheckbox = [];
+    },
+    // 跳转到商家详情
+    handlerSkipShopDetail(item) {
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/storeDetail?id=${item.id}`,
+      });
+    },
+    // 跳转到商品详情
+    handlerSkipGoodsDetail(item, idx) {
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/serviceDetail/index?id=${item.cartItems[idx].goodsId}&shopId=${item.id}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.cart {
+  min-height: 100vh;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  background-color: $uni-bg-color-page;
+
+  .manage {
+    display: flex;
+    justify-content: flex-end;
+    padding: 20rpx 0;
+    color: #333;
+    padding-right: 20rpx;
+  }
+
+  .bottom {
+    height: 100rpx;
+    padding: 10rpx 20rpx 40rpx 20rpx;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    text-align: end;
+    border-top: 2rpx solid #eee;
+
+    .bottom-price {
+      margin-right: 20rpx;
+      font-size: 24rpx;
+      color: #fe621a;
+    }
+
+    .settleAccount {
+      width: 160rpx;
+      height: 60rpx;
+      color: #fff;
+      display: flex;
+      background-color: #fe641c;
+      justify-content: center;
+      align-items: center;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+    }
+  }
+}
+
+.item-box {
+  background-color: #ffffff;
+  padding: 4rpx 20rpx;
+  border-radius: 10rpx;
+  margin-bottom: 20rpx;
+
+  .item-top {
+    padding: 20rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .top-title {
+      font-weight: bold;
+      font-size: 32rpx;
+    }
+  }
+}
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+
+  .item-l {
+    width: 70%;
+    display: flex;
+    align-items: center;
+
+    .l-r {
+      display: flex;
+
+      .r-img {
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 10rpx;
+        margin-right: 10rpx;
+      }
+
+      .r-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        width: 50%;
+
+        .r-name {
+          font-size: 34rpx;
+          font-weight: bold;
+        }
+
+        .r-discript {
+          max-width: 200rpx;
+          background-color: #f7f8fa;
+          padding: 5rpx 10rpx;
+          border-radius: 10rpx;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .r-price {
+          color: #ff4d60;
+          font-weight: bold;
+          font-size: 28rpx;
+        }
+      }
+    }
+  }
+
+  .item-r {
+    width: 30%;
+  }
+}
+
+.pop-box {
+  min-height: 400rpx;
+  padding: 20rpx;
+}
+</style>

src/PageMine/shopCar/index.vue

@@ -1,80 +1,77 @@
 <template>
-  <view class="cart">
+  <view class="client-cart">
     <page-navbar bgColor="#fff" title="购物车"></page-navbar>
-    <view class="manage">
-      <view @click="handlerManage">管理</view>
-      <!-- <view>退出管理</view> -->
-    </view>
-    <!-- 列表1 -->
-    <!-- <CartList :init_list.sync='init_list' :isAllSecect.sync='isAllSecect' @handlerIsSelectAll='handlerIsSelectAll'></CartList> -->
-    <view>
+    <base-card
+      padding="24rpx 32rpx"
+      marginBottom="24rpx"
+      v-for="(item, index) of init_list"
+      :key="index"
+    >
+      <view class="fl-flex-item u-m-b-32">
+        <view class="fl-flex fl-align-center">
+          <u--image
+            src="/static/pagesHome/detail_shop.png"
+            width="38rpx"
+            height="38rpx"
+          />
+          <view class="f-s-32 text-333 text-bold"> {{ item.name }} </view>
+        </view>
+        <view @click="handlerSkipShopDetail(item)">
+          <u-icon name="arrow-right" color="#333" size="16"></u-icon>
+        </view>
+      </view>
+
       <u-checkbox-group shape="circle" placement="column" v-model="goodsCheckbox">
-        <view class="item-box" v-for="(item, index) of init_list" :key="index">
-          <view class="item-top" @click="handlerSkipShopDetail(item)">
-            <view class="top-title"> {{ item.name }} </view>
-            <u-icon name="arrow-right"></u-icon>
-          </view>
-          <view
-            class="item"
-            v-for="(itm, idx) of item.cartItems"
-            :key="idx"
-            @click="handlerSkipGoodsDetail(item, idx)"
-          >
-            <view class="item-l">
-              <view class="l-l">
-                <u-checkbox :name="itm.id"></u-checkbox>
-              </view>
-              <view class="l-r">
-                <image class="r-img" :src="itm.goodsPic" mode="aspectFill"></image>
-                <view class="r-box">
-                  <view class="r-name">{{ itm.goodsName }}</view>
-                  <view class="r-discript">{{ itm.goodsName }}</view>
-                  <view class="r-price">￥{{ (itm.price * itm.quantity).toFixed(2) }}</view>
-                </view>
-              </view>
+        <view
+          class="fl-flex u-m-b-24"
+          v-for="(itm, idx) of item.cartItems"
+          :key="idx"
+          @click="handlerSkipGoodsDetail(item, idx)"
+        >
+          <u-checkbox :name="itm.id"></u-checkbox>
+          <base-img
+            :src="itm.goodsPic"
+            width="160rpx"
+            height="160rpx"
+            borderRadius="16rpx"
+          />
+          <view class="u-m-l-24" style="flex: 1">
+            <view class="f-s-28 text-333 u-m-b-14">{{ itm.goodsName }}</view>
+
+            <view class="settle-account u-m-b-40">
+              <base-text :text="itm.goodsName" width="130rpx"></base-text>
             </view>
-            <view class="item-r">
-              <u-number-box v-model="itm.quantity" @change="valChange(itm, $event)"></u-number-box>
+            <view class="fl-flex-item">
+              <view class="">￥{{ (itm.price * itm.quantity).toFixed(2) }}</view>
+              <u-number-box
+                v-model="itm.quantity"
+                @change="valChange(itm, $event)"
+              ></u-number-box>
             </view>
           </view>
         </view>
       </u-checkbox-group>
-    </view>
-
-    <!-- 底部1 -->
-    <view class="bottom fl-flex-item">
-      <!-- <u-checkbox-group shape="circle" v-model="isAllSecect" @change="isAllChange">
-        <u-checkbox label="全部" name="0"> </u-checkbox>
-      </u-checkbox-group> -->
-      <view class=""> </view>
-      <view class="bottom-price" v-show="!manageShow">
-        <view>
-          <text style="font-size: 22rpx; color: #333">合计：</text>
-          <text style="font-size: 22rpx">￥</text>
-          <text style="font-size: 34rpx; font-weight: 800">{{ allPrice.sum }}</text>
-        </view>
-        <view class="favorable fl-flex">
-          <text style="margin-right: 10rpx">
-            已优惠
-            <text style="font-weight: 800">￥255</text>
-          </text>
-          <!-- <view class="fl-flex" @click="instructionShow = true"> -->
-          <view class="fl-flex">
-            <text style="margin-right: 5rpx">优惠明细</text>
-            <u-icon name="arrow-up" color="#fe7b21" size="12" />
+    </base-card>
+
+    <view class="cart-bottom">
+      <view class="cart-bottom-main fl-flex-item">
+        <view class="fl-flex">
+          <u-checkbox-group shape="circle" v-model="isAllSecect" @change="isAllChange">
+            <u-checkbox label="全部" name="0"> </u-checkbox>
+          </u-checkbox-group>
+          <view class="f-s-36 text-primary u-m-l-32">
+            <text class="f-s-24">￥</text>
+            40.00
           </view>
         </view>
-      </view>
-      <view class="settleAccount" @click="handlerSettleBill">
-        {{ !manageShow ? `结算( ${allPrice.goodsNumber} )` : `删除( ${allPrice.goodsNumber} ) ` }}
+        <base-button
+          text="结算(2)"
+          minWidth="216rpx"
+          height="72rpx"
+          fontSize="28rpx"
+        ></base-button>
       </view>
     </view>
-
-    <!-- <u-popup :show="instructionShow" mode="bottom" @close="instructionShow = false" round="20">
-      <view class="pop-box">
-        <text>出淤泥而不染，濯清涟而不妖</text>
-      </view>
-    </u-popup> -->
   </view>
 </template>
 
@@ -93,7 +90,6 @@ export default {
       goodsCheckbox: [], //checkbox选择商品
       sumPrice: 0,
       instructionShow: false, // 底部优惠明细
-
       manageShow: false,
       queryParams: {
         paging: '1,10',
@@ -242,131 +238,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.cart {
+.client-cart {
   min-height: 100vh;
-  padding: 0 20rpx;
-  box-sizing: border-box;
-  background-color: $uni-bg-color-page;
-
-  .manage {
-    display: flex;
-    justify-content: flex-end;
-    padding: 20rpx 0;
-    color: #333;
-    padding-right: 20rpx;
-  }
-
-  .bottom {
-    height: 100rpx;
-    padding: 10rpx 20rpx 40rpx 20rpx;
+  padding: 24rpx 0 200rpx;
+  .cart-bottom {
+    width: 100%;
     position: fixed;
-    left: 0;
+    z-index: 999;
     bottom: 0;
-    right: 0;
-    background-color: #fff;
-    text-align: end;
-    border-top: 2rpx solid #eee;
-
-    .bottom-price {
-      margin-right: 20rpx;
-      font-size: 24rpx;
-      color: #fe621a;
-    }
-
-    .settleAccount {
-      width: 160rpx;
-      height: 60rpx;
-      color: #fff;
-      display: flex;
-      background-color: #fe641c;
-      justify-content: center;
-      align-items: center;
-      font-size: 26rpx;
-      border-radius: 30rpx;
+    .cart-bottom-main {
+      background: #fff;
+      padding: 8rpx 24rpx 68rpx 24rpx;
     }
   }
 }
-
-.item-box {
-  background-color: #ffffff;
-  padding: 4rpx 20rpx;
-  border-radius: 10rpx;
-  margin-bottom: 20rpx;
-
-  .item-top {
-    padding: 20rpx;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .top-title {
-      font-weight: bold;
-      font-size: 32rpx;
-    }
-  }
-}
-
-.item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20rpx;
-
-  .item-l {
-    width: 70%;
-    display: flex;
-    align-items: center;
-
-    .l-r {
-      display: flex;
-
-      .r-img {
-        width: 200rpx;
-        height: 200rpx;
-        border-radius: 10rpx;
-        margin-right: 10rpx;
-      }
-
-      .r-box {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        width: 50%;
-
-        .r-name {
-          font-size: 34rpx;
-          font-weight: bold;
-        }
-
-        .r-discript {
-          max-width: 200rpx;
-          background-color: #f7f8fa;
-          padding: 5rpx 10rpx;
-          border-radius: 10rpx;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .r-price {
-          color: #ff4d60;
-          font-weight: bold;
-          font-size: 28rpx;
-        }
-      }
-    }
-  }
-
-  .item-r {
-    width: 30%;
-  }
-}
-
-.pop-box {
-  min-height: 400rpx;
-  padding: 20rpx;
-}
 </style>

src/components/base-button/base-button.vue

@@ -45,14 +45,19 @@ export default {
       type: String,
       default: '',
     },
+    minWidth: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     customStyleOut() {
-      let { height, borderRadius, fontSize } = this;
+      let { height, borderRadius, fontSize, minWidth } = this;
       return {
         height,
         borderRadius,
         fontSize,
+        minWidth,
         ...this.buttonStyle,
       };
     },

src/components/publish-review/publish-review.vue

@@ -48,6 +48,7 @@ export default {
     position: fixed;
     bottom: 0;
     width: 100%;
+    z-index: 999;
     background-color: #fff;
   }
 }

src/pages/community/index copy.vue

@@ -339,6 +339,7 @@ export default {
     padding: 10rpx;
     box-sizing: border-box;
     text-align: center;
+    z-index: 999;
 
     .flex {
       color: #fff;

src/pages/community/index.vue

@@ -342,6 +342,7 @@ export default {
     padding: 10rpx;
     box-sizing: border-box;
     text-align: center;
+    z-index: 999;
 
     .flex {
       color: #fff;

src/pagesHome/evaluateDetail/index.vue

@@ -81,5 +81,6 @@ export default {
   bottom: 0;
   width: 100%;
   background-color: #fff;
+  z-index: 999;
 }
 </style>

src/pagesHome/marketer/index copy.vue

@@ -762,5 +762,6 @@ export default {
   width: 100%;
   position: fixed;
   bottom: 5%;
+  z-index: 999;
 }
 </style>

src/pagesHome/marketer/index.vue

@@ -369,6 +369,7 @@ export default {
     width: 100%;
     position: fixed;
     bottom: 5%;
+    z-index: 999;
   }
 
   .swiper-bg {

src/pagesHome/productDetail/index copy.vue

@@ -562,6 +562,7 @@ export default {
   bottom: 0;
   width: 100%;
   display: flex;
+  z-index: 999;
   background-color: #fff;
   .footer-left {
     display: flex;

src/pagesHome/productDetail/index.vue

@@ -330,6 +330,7 @@ export default {
     bottom: 0;
     width: 100%;
     background-color: #fff;
+    z-index: 999;
   }
 
   .dynamic-more {

src/pagesHome/productDetail/productDetail - 副本.vue

@@ -402,6 +402,7 @@ export default {
   background-color: #fff;
   border-top: 1px solid #eb8b8b;
   box-sizing: border-box;
+  z-index: 999;
 
   .u-icon {
     justify-content: center !important;

src/pagesHome/settleOrder/index copy.vue

@@ -589,6 +589,7 @@ export default {
   width: 100%;
   position: fixed;
   bottom: 5%;
+  z-index: 999;
 
   .btn {
     width: calc(100% - 60rpx);