绿满眶商城微信小程序-uniapp
peng
2025-07-02 d3d0b4dbb4f1f8c4784c834e0a39feba8aa5afa5
pages/tabbar/cart/cartList.vue
@@ -1,12 +1,12 @@
<template>
  <div class="wrapper">
  <view class="wrapper">
    <u-navbar :is-back="false" title="购物车">
      <div slot="right">
        <div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
      </div>
    </u-navbar> 
    <!-- 空白页-->
    <view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty">
    <view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty"  :style="{height: windowHeight - marginBottom - 50 + 'px'}">
      <image src="/static/emptyCart.png" mode="aspectFit"></image>
      <view class="empty-tips">
        空空如也
@@ -14,7 +14,7 @@
      </view>
    </view>
    <!-- 店铺商品信息 -->
    <div class="content">
    <div class="content" :style="{height: windowHeight - marginBottom - 50 + 'px'}">
      <div class="box box2" :class="{ invalid: isInvalid(item) }" v-for="(item, index) in cartDetail.cartList"
        :key="index">
        <view class="tab">
@@ -68,7 +68,12 @@
                </u-checkbox-group>
                <span class="invalid" v-else style="font-size: 24rpx">失效</span>
              </view>
              <u-image border-radius="10" :fade="true" @click="navigateToGoods(skuItem)" width="160rpx" height="160rpx"
<!--            <video border-radius="10" :fade="true" @click="navigateToGoods(skuItem)"
           v-if="skuItem.goodsSku.goodsVideo" :src="skuItem.goodsSku.goodsVideo"
            style="width: 160rpx;height: 160rpx;"
           :initial-time="0"
              :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false"/> -->
              <u-image  border-radius="10" :fade="true" @click="navigateToGoods(skuItem)" width="160rpx" height="160rpx"
                :src="skuItem.goodsSku.thumbnail" />
            </view>
            <view class="goods-content">
@@ -121,7 +126,7 @@
    <u-modal v-model="deleteShow" :confirm-style="{'color':lightColor}" @confirm="deleteConfirm" show-cancel-button
      :content="deleteContent" :async-close="true"></u-modal>
    <!-- 结账 -->
    <div class="box box6">
    <div class="box box6" :style="{bottom: marginBottom + 50 + 'px'}">
      <view class="navL">
        <u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选
        </u-checkbox>
@@ -175,14 +180,16 @@
      </view>
    </div>
    <u-toast ref="uToast" />
  </div>
   <custom-tabbar bgColor="#ffffff" selected="buyCar"></custom-tabbar>
  </view>
</template>
<script>
import '@/components/uview-components/uview-ui';
import * as API_Trade from "@/api/trade";
import { debounce } from "@/utils/tools.js";
import uniNumberBox from '@/components/uni-number-box'
// import uniNumberBox from '@/components/uni-number-box'
export default {
  components:{uniNumberBox}, // 数量加减组件
  data() {
    return {
      loading:false,
@@ -212,10 +219,14 @@
      isEdit: false, // 是否是编辑
      checkout: false, //全选按钮
      WEIXIN_num: "", //购物车兼容微信步进器
     marginBottom: 0 ,// 底部安全区域
     windowHeight: 0 // 可使用屏幕高度
    };
  },
  mounted() {
     this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
     this.windowHeight = uni.getSystemInfoSync().windowHeight
    // #ifdef MP-WEIXIN
    // 小程序默认分享
    uni.showShareMenu({ withShareTicket: true });
@@ -623,7 +634,7 @@
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: calc(100vh - 50px);
  z-index: 99;
  padding-bottom: var(--window-bottom);
  display: flex;
@@ -688,7 +699,7 @@
}
.wrapper {
  height: 100%;
  height: calc(100% - 50px);;
}
/deep/ .u-col {
@@ -774,7 +785,7 @@
  justify-content: space-between;
  position: fixed;
  // #ifdef APP-PLUS || MP-WEIXIN
  bottom: 0;
  bottom: 50px;
  // #endif
  // #ifdef H5
  bottom: var(--window-bottom);