store-shop-uniapp/pages/tabbar/cart/index.vue

<template>
  <view class="content">
    <!-- 骨架屏 -->
    <u-skeleton
        el-color="#efefef"
        bg-color="#fff"
        :loading="loading && isFirstComeIn"
        :animation="true"
    ></u-skeleton>
    <global-loading />
    <!-- 购物车 -->
    <view class="u-skeleton">
      <view v-if="!isEmpty">
        <u-sticky bg-color="#fff">
          <view class="cart-bg  u-skeleton-fillet">
            <view class="cart-num-box">
              <image
                  class="  u-skeleton-fillet"
                  src="https://ceres.zkthink.com/static/images/logoTop.png"
              ></image>
              <text
                  class="btn-box "
                  @click="showManage = !showManage"
                  v-if="!showManage"
              >管理
              </text>
              <text
                  class="btn-box"
                  @click="showManage = !showManage"
                  v-if="showManage"
              >完成
              </text>
            </view>
            <view>
              <text class="num-box u-skeleton-fillet">共
                <text class="num">{{ settleAccountsObj.allNum }}</text>
                件宝贝
              </text>
            </view>
          </view>
        </u-sticky>
        <view class="cart-list-box">
          <view
              class="itemBox"
              v-for="(item, index) in dataList"
              :key="item.shopId"
          >
            <view
                class="item"
                v-if="item.skus.length >0"
            >
              <view class="shop-box">
                <image
                    mode="aspectFill  u-skeleton-fillet"
                    v-if="item.selected === 1"
                    src="https://ceres.zkthink.com/static/images/selectActive.png"
                    class="cart-select-img"
                    @click.stop="handleSelectShop(index,0)"
                ></image>
                <image
                    mode="aspectFill  u-skeleton-fillet"
                    v-else
                    src="https://ceres.zkthink.com/static/images/selectEmpty.png"
                    class="cart-select-img"
                    @click.stop="handleSelectShop(index,1)"
                ></image>
                <view
                    class="shop-name-box  u-skeleton-fillet"
                    @click="$jump(`${jumpObj.store}?storeId=${item.shopId}`)"
                >
                  <image
                      src="https://ceres.zkthink.com/static/images/orderStoreIcon.png"
                      class="shop-img"
                  ></image>
                  <text class="shop-name">{{ item.shopName }}</text>
                  <image
                      src="https://ceres.zkthink.com/static/images/arrowRight.png"
                      class="arrow-right-img"
                  ></image>
                </view>
              </view>
              <view
                  class="rulesBox flex-items"
                  v-if="item.currentRules && item.currentRules.number"
              >
                <image
                    class="mar-right-20"
                    src="https://ceres.zkthink.com/static/images/zuheIcon.png"
                ></image>
                <view class="fs24 font-color-C83732">
                  已满足【{{ item.currentRules.price }}元任选{{ item.currentRules.number }}件】！
                </view>
              </view>
              <view
                  v-for="(skuItem, cIndex) in dataList[index].skus"
                  class="product-list-box "
              >
                <view
                    class="pro-item"
                    @click="$jump(`${jumpObj.detail}?shopId=${item.shopId}&productId=${skuItem.productId}&skuId=${skuItem.skuId}`)"
                >
                  <image
                      mode="aspectFill  u-skeleton-fillet"
                      v-if="skuItem.selected == 1"
                      src="https://ceres.zkthink.com/static/images/selectActive.png"
                      @click.stop="handleSelectSku(index,cIndex,0)"
                      class="cart-select-img"
                  ></image>
                  <image
                      mode="aspectFill  u-skeleton-fillet"
                      v-else
                      src="https://ceres.zkthink.com/static/images/selectEmpty.png"
                      @click.stop="handleSelectSku(index,cIndex,1)"
                      class="cart-select-img"
                  ></image>
                  <view class="pro-r">
                    <image
                        :src="skuItem.image"
                        class="pro-img default-img  u-skeleton-fillet"
                    ></image>
                    <view class="pro-r-r  u-skeleton-fillet">
                      <view class="pro-name">{{ skuItem.productName }}</view>
                      <view class="sku-box">
                        <text v-if="skuItem.value">{{ skuItem.value }}</text>
                        <text v-else>默认规格</text>
                        <!-- <text></text> -->
                      </view>
                      <view class="pro-price-num-box">
                        <view class="pro-price-box">
                          <text class="fuhao">￥</text>
                          <text>{{ skuItem.price }}</text>
                        </view>
                        <view class="pro-num-box">
                          <text
                              class="num-btn r"
                              @click.stop="handleSubSkuNumber(index,cIndex)"
                          >-
                          </text>
                          <text class="num">{{ skuItem.number }}</text>
                          <text
                              class="num-btn l"
                              @click.stop="handleAddSkuNumber(index,cIndex)"
                          >+
                          </text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- #ifdef H5 -->
        <view class="cart-bottom-box-h5">
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <view class="cart-bottom-box-app">
            <!-- #endif -->
            <view class="cart-bottom">
              <view class="left">
                <image
                    mode="aspectFill"
                    v-if="settleAccountsObj.isAllCheck"
                    src="https://ceres.zkthink.com/static/images/selectActive.png"
                    class="cart-select-img"
                    @click="handleSelectAll(0)"
                ></image>
                <image
                    mode="aspectFill"
                    v-else
                    src="https://ceres.zkthink.com/static/images/selectEmpty.png"
                    class="cart-select-img"
                    @click="handleSelectAll(1)"
                ></image>
                <text>全选</text>
              </view>
              <view
                  class="right"
                  v-if="!showManage"
              >
                <view class="price-box">
                  <text>合计：</text>
                  <text class="price">¥{{ settleAccountsObj.checkMoney }}</text>
                </view>
                <view
                    class="btn-confirm"
                    @click="settlementTap"
                >结算（{{ settleAccountsObj.checkNum }}）
                </view>
              </view>
              <view
                  class="right"
                  v-if="showManage"
              >
                <view
                    class="btn-delete"
                    @click="handleOpenDelete"
                >删除
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 购物车为空 -->
      <view
          v-if="isEmpty"
          class="emptyCart-box flex-items-plus flex-column"
      >
        <image
            class="emptyCart-img"
            src="https://ceres.zkthink.com/static/images/cartEmpty.png"
        ></image>
        <label class="font-color-999 fs26 mar-top-30">你的购物车还没有宝贝哦</label>
        <label class="font-color-999 fs26 mar-top-10">快去首页选一个吧～</label>
        <view
            class="goToShopping"
            @click="$jumpToTabbar(jumpObj.shopping)"
        >去购物
        </view>
      </view>

      <!-- 热门推荐 -->
      <HotTemplate v-if="!loading" />

      <view style="width: 100%;height: 120rpx;background-color:#fff;"></view>

      <!-- 删除确认弹窗 -->
      <DeleteModal
          v-model="showDeleteModal"
          @confirm="handleDoDelete"
      ></DeleteModal>
    </view>
  </view>
</template>

<script>
import HotTemplate from '../../../components/hoteRecommed/index.vue'
import DeleteModal from "./components/DeleteModal";
import api from "../../../components/canvasShow/config/api";
import { defaultCartList, getCartNumberBySelect, getPriceBySelect } from "./cartUtils";
import lodash from 'lodash'
let cacheKey = ''
const NET = require('../../../utils/request')
const API = require('../../../config/api')
export default {
  components: {
    HotTemplate,
    DeleteModal
  },
  data() {
    return {
      isFirstComeIn:true, // 是否是首次进入
      loading: true, // 是否在加载
      showManage: false, // 是否开启管理
      dataList: [
        {skus: []}
      ], // 购物车数据
      showDeleteModal: false, // 是否展示删除
      isEmpty: false, // 购物车是否为空
      userInfo: {}, // 用户信息
      // 跳转对象
      jumpObj: {
        store: '/pages_category_page1/store/index',
        detail: '/pages_category_page1/goodsModule/goodsDetails',
        shopping: '/pages/tabbar/index/index'
      },
      // 底部结算条对象
      settleAccountsObj: {
        allNum: 0,// 所有sku数量（头部）
        checkNum: 0, // 选中sku的数量
        checkMoney: 0, // 选中sku的总价
        isAllCheck: false, // 是否宣布选中
      }
    }
  },
  onShow() {
    this.isFirstComeIn = true
    this.loading = true
    this.userInfo = uni.getStorageSync('storage_key')
    cacheKey = this.userInfo.buyerUserId + "cart_info"
    this.dataList = defaultCartList
    this.isEmpty = false
    this.getDataList()
  },
  methods: {
    /**
     * 获取购物车列表
     */
    getDataList:lodash.debounce(async function () {
      this.isEmpty = false
      this.loading = true
      try {
        const res = await NET.request(API.ShoppingCart, {}, 'GET')
        this.dataList = res.data
        this.settleAccountsObj.allNum = this.dataList.length
        console.log(this.dataList)
        if (this.dataList.length === 0) {
          this.isEmpty = true
          uni.setStorageSync('allCartNum', 0)
          uni.removeTabBarBadge({
            index: 2
          })
        }
        this.dataList.forEach((shopObj, shopIndex) => {
          shopObj['currentIds'] = []
          shopObj['priceNumber'] = 0
          shopObj['rules'] = []
          shopObj['currentRules'] = {}
          shopObj['ids'] = 0
          // 处理下架商品
          for (let i = shopObj.skus.length - 1; i >= 0; i--) {
            // shelveState是否上架
            if (shopObj.skus[i].shelveState === 0) {
              // 删掉下架商品
              shopObj.skus.splice(i, 1)
              continue
            }
            if (shopObj.skus[i].activityType === 6 && shopObj.skus[i].selected === 1) {
              shopObj.currentIds.push(shopObj.skus[i].priceId)
              shopObj.priceNumber += shopObj.skus[i].number
            }
          }
          console.log(shopObj.skus.length)
          this.isEmpty = shopObj.skus.length !== 0? false :true
          for (let i = 0; i < shopObj.skus.length; i++) {
            if (shopObj.skus[i].activityType === 6) {
              shopObj.ids = shopObj.skus[i].priceId
              break
            }
          }
          // 根据店铺索引获取规则
          this.getData(shopObj).then(res => {
            shopObj.rules = res.data ? res.data[0].rules : {}
            this.handleSetGroupGood(shopIndex)
          })
        })
        this.handleRenderCart()
        // 数据回来就直接关闭骨架屏
        this.loading = false
        this.isFirstComeIn = false
        await this.handleUpdateMoneyAndNum()
      } finally {
        uni.hideLoading()
      }
    },500),

    /**
     * 获取组合定价
     * @param item
     * @return {Promise<unknown>}
     */
    getData(item) {
      return new Promise(((resolve, reject) => {
        if (item.ids) {
          NET.request(api.getPrices, {
            shopId: item.shopId,
            ids: item.ids,
            page: 1,
            pageSize: 10
          }, 'GET').then(res => {
            resolve(res)
          }).catch(e => {
            reject(e)
          })
        } else {
          resolve([])
        }
      }))
    },

    /**
     * 单个SKU数量减
     * @param shopIndex 店铺索引
     * @param skuIndex index店铺下sku商品索引
     */
    async handleSubSkuNumber(shopIndex, skuIndex) {
      const selectSku = this.dataList[shopIndex].skus[skuIndex]
      if (selectSku.number <= 1) {
        return uni.showToast({
          title: '亲！至少一件哦！',
          icon: "none"
        })
      }
      --selectSku.number
      await this.handleUpdateCart(selectSku.skuId, selectSku.number)
      setTimeout(async ()=>{
        await this.getDataList()
      },500)
    },

    /**
     * 单个SKU数量加
     * @param shopIndex 店铺索引
     * @param skuIndex index店铺下sku商品索引
     */
    async handleAddSkuNumber(shopIndex, skuIndex) {
      const selectSku = this.dataList[shopIndex].skus[skuIndex]
      if (selectSku.number >= selectSku.stockNumber) {
        selectSku.number = selectSku.stockNumber
        return uni.showToast({
          title: '库存不足！',
          icon: 'none'
        })
      }

      if (selectSku.number < selectSku.stockNumber) {
        ++selectSku.number
        await this.handleUpdateCart(selectSku.skuId, selectSku.number)
        setTimeout(async ()=>{
          await this.getDataList()
        },500)
      }
    },

    /**
     * 更新总价和总数（底部结算栏，头部总数）
     * @return {Promise<void>}
     */
    async handleUpdateMoneyAndNum() {
      const {allNumber, checkNumber, isAllCheck} = await getCartNumberBySelect(this.dataList)
      const {money} = await getPriceBySelect(this.dataList)
      this.settleAccountsObj.checkMoney = money
      this.settleAccountsObj.isAllCheck = isAllCheck
      this.settleAccountsObj.allNum = allNumber
      this.settleAccountsObj.checkNum = checkNumber
    },

    /**
     * 请求服务端更新购物车数量
     * @param skuId :需要更新的skuId
     * @param number: 数量
     */
    handleUpdateCart:lodash.debounce(async function(skuId, number) {
      // 重新算钱和数量
      await NET.request(API.UpdateNumberCart, {
        skuId: skuId,
        number: number
      }, 'POST')
    },500),


    /**
     * 选中店铺
     * @param shopIndex 店铺索引
     * @param type 0否1是
     */
    handleSelectShop(shopIndex, type) {
      const shopObj = this.dataList[shopIndex]
      const shopCarts = [{
        shopId: shopObj.shopId,
        skus: []
      }]
      shopObj.selected = type
      // 设置当前店铺下的所有sku
      shopObj.skus.forEach(skuObj => {
        skuObj.selected = type
        shopCarts[0].skus.push({
          skuId: skuObj.skuId,
          selected: skuObj.selected
        })
      })
      this.handleSetGroupGood(shopIndex)
      this.handleUpdateSelected(shopCarts)
    }
    ,

    /**
     * 商品单选
     * @param shopIndex 店铺索引dataList
     * @param skuIndex sku索引dataList[index].skus
     * @param type 是否选中 0否1是
     */
    handleSelectSku(shopIndex, skuIndex, type) {
      const shopObj = this.dataList[shopIndex]
      const skuObj = this.dataList[shopIndex].skus[skuIndex]
      skuObj.selected = type
      let shopCarts = [{
        shopId: shopObj.shopId,
        skus: [{
          skuId: skuObj.skuId,
          selected: skuObj.selected,
        }]
      }]
      if (type === 1) {
        // 过滤店铺内未选择的sku
        const noSelectSkuList = shopObj.skus.filter(sku => sku.selected === 0);
        if (noSelectSkuList.length >= 0) {
          shopObj.selected = 0
        } else {
          shopObj.selected = 1
        }
      } else {
        shopObj.selected = type
      }
      // 渲染组合商品
      this.handleSetGroupGood(shopIndex)
      this.handleUpdateSelected(shopCarts)
    }
    ,


    /**
     * 全选
     * @param type 是否选中 0否1是
     */
    handleSelectAll(type) {
      this.dataList.forEach((shopObj, shopIndex) => {
        // 组合支付商品数量
        const goodsOfJointNumber = shopObj.skus.reduce((prev, skuObj) => {
          skuObj.selected = type
          // 如果是组合支付
          if (skuObj.selected === 1 && skuObj.activityType === 6) {
            return prev + skuObj.number
          }
        }, 0)
        shopObj.selected = type
        shopObj.priceNumber = goodsOfJointNumber
        shopObj.currentRules = {}
        // 处理选中的组合商品
        if (type === 1) {
          this.handleSetGroupGood(shopIndex)
        }
      })
      this.handleUpdateSelected([])
    }
    ,


    /**
     * 处理组合商品(设置currentRules渲染横幅)
     * @param shopIndex
     */
    handleSetGroupGood(shopIndex) {
      const shopObj = this.dataList[shopIndex]
      shopObj.currentRules = {}
      shopObj.priceNumber = 0
      shopObj.skus.forEach((skuObj) => {
        if (skuObj.activityType === 6 && skuObj.selected === 1) {
          shopObj.priceNumber += skuObj.number
        }
      })
      const shopRules = this.dataList[shopIndex].rules
      for (let i = 0; i < shopRules.length; i++) {
        if (shopRules[i].number === shopObj.priceNumber) {
          shopObj.currentRules = shopRules[i]
          break
        } else if (shopRules[shopRules.length - 1].number < shopObj.priceNumber) {
          shopObj.currentRules = shopRules[shopRules.length - 1]
          break
        }
      }
    }
    ,

    /**
     * 更新缓存sku勾选和价格、数量显示
     * @param shopCarts:{shopId:number,skus:{skuId:number,select:number}}[] 只有一个对象（店铺）全选传空数组
     */
    handleUpdateSelected(shopCarts) {
      this.handleSetCache(shopCarts)
      this.handleUpdateMoneyAndNum()
    }
    ,

    /**
     * 设置购物车本地缓存（先存入本地缓存，再调用handleRenderCart根据本地缓存渲染）
     * @param shopCarts:{shopId:number,skus:{skuId:number,select:number}}[] 只有一个对象（店铺）全选传空数组
     */
    handleSetCache(shopCarts) {
      let cartInfo = uni.getStorageSync(cacheKey);
      if (cartInfo === '') {
        // 全选
        if (shopCarts.length <= 0) {
          // 全选直接缓存整个列表
          uni.setStorageSync(cacheKey, JSON.stringify(this.dataList))
          // 渲染视图
          this.handleRenderCart()
          return
        }
        // 无购物车信息
        cartInfo = shopCarts
        uni.setStorageSync(cacheKey, JSON.stringify(cartInfo))
      } else {
        cartInfo = JSON.parse(cartInfo)
        // 全选
        if (shopCarts.length <= 0) {
          // 全选直接缓存整个列表
          uni.setStorageSync(cacheKey, JSON.stringify(this.dataList))
          // 渲染视图
          this.handleRenderCart()
          return
        }
        // 看了代码逻辑结构，一次只会传一个商铺过来，大胆取0
        const shopItem = shopCarts[0]
        const cacheHaveInfo = cartInfo.findIndex(item => item.shopId === shopItem.shopId)
        if (cacheHaveInfo < 0) {
          // 如果缓存中不存在当前商店信息，写入缓存
          cartInfo.push(shopItem)
        } else {
          // 获取到缓存项
          const cacheShopItem = cartInfo[cacheHaveInfo]
          // 判断传入的sku大小，sku length为1就是点单项，sku length>1就是点击了整个店铺
          if (shopItem.skus.length > 1) {
            // 点击整个店铺，直接赋值
            cartInfo[cacheHaveInfo] = shopItem
          } else {
            // 点击单项sku，获取到sku // 数据结构只会传入一项
            const shopItemSkuItem = shopItem.skus[0];
            // 在缓存中寻找
            const cacheShopItemSkuItemIndex = cacheShopItem.skus.findIndex(item => item.skuId === shopItemSkuItem.skuId);
            cacheShopItemSkuItemIndex >= 0 ? cacheShopItem.skus[cacheShopItemSkuItemIndex] = shopItemSkuItem : cacheShopItem.skus.push(shopItemSkuItem)
          }
        }
        // 逻辑处理完毕更新缓存
        uni.setStorageSync(cacheKey, JSON.stringify(cartInfo))
        // 渲染视图
        this.handleRenderCart()
      }
    }
    ,

    /**
     * 根据本地缓存渲染购物车勾选
     * @constructor
     */
    handleRenderCart() {
      // 取消所有勾选
      this.dataList.forEach(shop => {
        shop.selected = 0
        shop.skus.forEach(sku => {
          sku.selected = 0
        })
      })
      // 校验缓存中的数据是否存在于购物车中
      this.handleCheckCacheAndUpdate()
      // 缓存内购物车信息
      let cartInfo = uni.getStorageSync(cacheKey);
      if (cartInfo === '') return
      cartInfo = JSON.parse(cartInfo)

      // 遍历购物车信息，寻找缓存比对
      this.dataList.forEach(nowCartShopItem => {
        let shopSelect = 1
        const cacheCartShopItem = cartInfo.find(item => item.shopId === nowCartShopItem.shopId);
        if (cacheCartShopItem) {
          // 如果缓存中有当前店铺，遍历当前购物车sku
          nowCartShopItem.skus.forEach(nowCartSkuItem => {
            const cacheCartSkuItem = cacheCartShopItem.skus.find(item => item.skuId === nowCartSkuItem.skuId);
            if (cacheCartSkuItem) {
              // 如果有一个未选中当前店铺就不能全选
              !cacheCartSkuItem.selected ? shopSelect = 0 : ''
              nowCartSkuItem.selected = cacheCartSkuItem.selected
            } else {
              shopSelect = 0
            }
          })
        } else {
          shopSelect = 0
        }
        nowCartShopItem.selected = shopSelect
      })
    }
    ,

    /**
     * 比较缓存内数据和后端数据是否一致,并且更新缓存
     * @constructor
     */
    handleCheckCacheAndUpdate() {
      // 缓存内购物车信息
      let cartInfo = uni.getStorageSync(cacheKey);
      if (cartInfo === '') return
      cartInfo = JSON.parse(cartInfo)
      // 校验缓存中的数据是否存在于购物车中
      cartInfo.forEach((cacheCartShopItem, cacheCartShopIndex) => {
        const nowCartShopItem = this.dataList.find(item => item.shopId === cacheCartShopItem.shopId);
        if (!nowCartShopItem) {
          cartInfo.splice(cacheCartShopIndex, 1)
        } else {
          // 存在就校验缓存中的sku在不在后端返回的列表内
          cacheCartShopItem.skus.forEach((cacheCartSkuItem, cacheCartSkuIndex) => {
            const nowCartSkuItem = nowCartShopItem.skus.find(item => item.skuId === cacheCartSkuItem.skuId)
            if (!nowCartSkuItem) {
              cacheCartShopItem.skus.splice(cacheCartSkuIndex, 1)
            }
          })
        }
      })
      uni.setStorageSync(cacheKey, JSON.stringify(cartInfo))
    }
    ,

    /**
     * 打开删除弹窗
     */
    handleOpenDelete() {
      if (!this.settleAccountsObj.checkNum) return uni.showToast({
        title: '请先选择对应商品',
        icon: 'none'
      })
      this.showDeleteModal = true
    }
    ,

    /**
     * 执行删除
     * @return {Promise<void>}
     */
    async handleDoDelete() {
      let ids = []
      for (const shopObj of this.dataList) {
        ids = [...ids, ...shopObj.skus.filter(sku => (sku.selected === 1 || sku.selected === true)).map(sku => sku.skuId)]
      }
      await NET.request(API.DeleteCart, {ids}, 'POST')
      this.showDeleteModal = false
      await this.getDataList()
    }
    ,

    /**
     * 结算购物车
     * @return {Promise<void>}
     */
    async settlementTap() {
      const {shopList} = await getPriceBySelect(this.dataList)
      uni.setStorageSync('skuItemDTOList', shopList)
      this.$jump('/pages_category_page1/orderModule/orderConfirm?type=2')
    }
  }
}
</script>

<style
    lang="scss"
    scoped
>
.content {
  //overflow: hidden;
  //opacity: 0;

  .cart-bg {
    width: 100%;
    height: 180rpx;
    background-color: #fff;

    .cart-num-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      image {
        width: 286rpx;
        height: 72rpx;
      }

      .btn-box {
        font-size: 30rpx;
        color: #333333;
        padding: 30rpx;
        box-sizing: border-box;
        display: inline-block;
      }
    }

    .num-box {
      padding: 30rpx 0 30rpx 30rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      color: #C5CACF;
    }
  }

  .cart-list-box {
    box-sizing: border-box;

    .itemBox {
      .item {
        background: #fff;
        border-bottom: 16rpx solid #F8F9FA;

        .shop-box {
          margin-top: 5rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-bottom: 1px solid #eee;
          position: relative;

          .cart-select-img {
            width: 40rpx;
            height: 40rpx;
            margin: 30rpx;
            box-sizing: border-box;
          }

          .shop-name-box {
            display: flex;
            flex-direction: row;
            align-items: center;

            .shop-img {
              width: 36rpx;
              height: 36rpx;
              margin-right: 10rpx;
            }

            .shop-name {
              font-size: 30rpx;
              color: #333;
              font-weight: bold;
              display: inline-block;
              margin-left: 10rpx;
            }

            .arrow-right-img {
              width: 30rpx;
              height: 30rpx;
              box-sizing: border-box;
              margin-left: 30rpx;
              position: absolute;
              right: 30rpx;
            }
          }
        }

        .rulesBox {
          height: 86rpx;
          background: #F9F6F1;
          padding: 0 20rpx;

          image {
            width: 126rpx;
            height: 46rpx;
          }
        }

        .product-list-box {
          margin: 8rpx 0;

          .pro-item {
            display: flex;
            flex-direction: row;
            align-items: center;

            .cart-select-img {
              width: 40rpx;
              height: 40rpx;
              margin: 30rpx;
              box-sizing: border-box;
            }

            .pro-r {
              flex: 1;
              border-bottom: 1px solid #eee;
              display: flex;
              flex-direction: row;
              padding: 30rpx 30rpx 30rpx 0;
              box-sizing: border-box;
              overflow: hidden;

              .pro-img {
                width: 180rpx;
                height: 180rpx;
                border-radius: 10rpx;
                margin-right: 30rpx;
              }

              .pro-r-r {
                flex: 1;
                font-size: 26rpx;
                color: #333;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .pro-name {
                  height: 66rpx;
                  line-height: 33rpx;
                  display: -webkit-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: break-all;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                }

                .sku-box {
                  width: auto;
                  display: inline;
                  height: 40rpx;
                  border-radius: 4rpx;
                  padding: 0 0 0 10rpx;
                  box-sizing: border-box;
                  font-size: 24rpx;
                  color: #999;

                  text {
                    border: 2rpx solid #E4E5E6;
                    padding: 2rpx 10rpx;
                  }
                }

                .pro-price-num-box {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: space-between;

                  .pro-price-box {
                    font-size: 36rpx;
                    color: #333333;
                    font-weight: 400;

                    .fuhao {
                      font-size: 24rpx;
                    }
                  }

                  .pro-num-box {
                    width: 140rpx;
                    height: 40rpx;
                    border: 1px solid #ddd;
                    border-radius: 4rpx;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    overflow: hidden;

                    .num-btn {
                      font-size: 34rpx;
                      color: #999999;
                      display: inline-block;
                      width: 40rpx;
                      text-align: center;
                      line-height: 32rpx;
                      height: 40rpx;
                    }

                    .num-btn.r {
                      border-right: 1px solid #ddd;
                    }

                    .num-btn.l {
                      border-left: 1px solid #ddd;
                    }

                    .num {
                      font-size: 26rpx;
                      color: #333;
                    }
                  }
                }
              }
            }
          }

          .pro-item:last-of-type .pro-r {
            border-bottom: none;
          }
        }
      }
    }

    .itemBox:first-child {
      .shop-box {
        border-top: 2rpx solid #eee;
      }
    }

    .itemBox:last-child {
      .item {
        border-bottom: none;
      }
    }
  }

  .emptyCart-box {
    margin: 100rpx 0;

    .emptyCart-img {
      width: 216rpx;
      height: 156rpx;
    }

    .goToShopping {
      width: 282rpx;
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      background: #333333;
      margin-top: 40rpx;
      color: #FFEBC4;
      font-size: 28rpx;
    }
  }

  .cart-bottom-box-h5 {
    position: fixed;
    bottom: 80rpx;
    width: 100%;
    z-index: 99;
  }

  .cart-bottom-box-app {
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    z-index: 99;
  }

  .cart-bottom {
    height: 120rpx;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid #eee;
  }

  .left {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 28rpx;
    color: #666;

    .cart-select-img {
      width: 40rpx;
      height: 40rpx;
      margin: 30rpx;
      box-sizing: border-box;
    }
  }

  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;

    .price-box {
      font-size: 30rpx;
      color: #333;

      .price {
        font-size: 40rpx;
        color: #C83732;
        font-weight: bold;
      }
    }

    .btn-confirm {
      width: 232rpx;
      height: 120rpx;
      background: #333333;
      margin-left: 18rpx;
      text-align: center;
      line-height: 120rpx;
      font-size: 28rpx;
      color: #FFEBC4;
    }

    .btn-delete {
      width: 232rpx;
      height: 120rpx;
      line-height: 120rpx;
      text-align: center;
      font-size: 28rpx;
      color: #FFFFFF;
      background: #C83732;
    }
  }
}
</style>