new-88live/pages/cart/index.vue

<!-- 购物车页面 -->
<template>
  <view class="cart-page">
    <!-- 導航欄 -->
    <view class="cu-custom" :style="{ height: sys.height + 'px' }">
      <view class="cu-bar fixed bg-bgcolor" :style="{ height: sys.height + 'px', paddingTop: sys.top + 'px' }">
        <view class="action" @tap="goBack">
          <text class="wlIcon-fanhui1"></text>
        </view>
        <view class="content" :style="{ top: sys.top + 'px' }">
          {{ $t('cart.title') }}
          <text class="text-sm">({{ cart.cartnum }} {{ $t('cart.itemUnit') }})</text>
        </view>
        <view class="action" @tap="handleOperate">
          <text v-if="cart.operate">{{ $t('cart.complete') }}</text>
          <text v-else>{{ $t('cart.manage') }}</text>
        </view>
      </view>
    </view>

    <!-- 購物車列表 -->
    <block v-if="cart.list.length > 0">
      <view class="wanl-cart-shop radius-bock margin-bj padding-bj" v-for="(item, index) in cart.list" :key="index">
        <!-- 店鋪頭部 -->
        <view class="shop margin-bottom" @tap="onShop(item.shop_id)">
          <view class="text-xxl margin-right-sm" @tap.stop="handleShopChoose(item)">
            <text v-if="item.check" class="wlIcon-xuanze-danxuan wanl-orange"></text>
            <text v-else class="wlIcon-xuanze wanl-gray-light"></text>
          </view>
          <view class="shopname">
            <text class="wlIcon-dianpu1 margin-right-xs"></text>
            <text class="text-30">{{ item.shop_name }}</text>
          </view>
          <view class="info"><text class="wlIcon-fanhui2 margin-left-xs"></text></view>
        </view>
        <!-- 商品列表 -->
        <view class="wanl-cart-goods" v-for="(goods, keys) in item.products" :key="keys">
          <!--  -->
          <view class="text-xxl margin-right-sm" @tap="handleChoose({ index: index, keys: keys })">
            <text v-if="goods.checked" class="wlIcon-xuanze-danxuan wanl-orange"></text>
            <text v-else class="wlIcon-xuanze wanl-gray-light"></text>
          </view>
          <!-- 商品圖片 -->
          <view class="picture" @tap="onGoods(goods.goods_id)">
            <image :src="$appKit.oss(goods.image, 100, 100, 1)" mode="aspectFill"></image>
          </view>
          <!-- 商品信息 -->
          <view class="content">
            <!-- 商品名稱 -->
            <view class="text-cut-2 wanl-gray-dark" @tap="onGoods(goods.goods_id)">
              {{ goods.title }}
            </view>
            <!-- 商品規格 -->
            <view class="cu-tag wanl-gray opt">
              {{ $t('cart.spec') }}:{{ goods.sku.difference ? goods.sku.difference.join(' ') : '' }}
            </view>
            <!-- 商品價格和數量選擇 -->
            <view class="flex justify-between align-center">
              <!-- 商品價格 -->
              <view class="text-price wanl-orange text-lg">
                {{ goods.sku.price }}
              </view>
              <!-- 商品數量選擇 -->
              <view class="wanl-numberBox solid">
                <!-- 商品數量減少按钮 -->
                <view @tap="handleBcsub(goods)">
                  <text class="wlIcon-jian round text-gray"></text>
                </view>
                <!-- 商品數量 -->
                <view>{{ goods.number }}</view>
                <!-- 商品數量增加按钮 -->
                <view @tap="handleBcadd(goods)">
                  <text class="wlIcon-tianjia round"></text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <!-- 空購物車 -->
    <block v-else>
      <empty src="cart_default3x" :text="$t('cart.empty')" />
      <mall-product v-if="likeData.length > 0" :dataList="likeData" dataStyle="col-2-20" />
    </block>

    <view style="height: 120rpx;"></view>
    <view class="safeAreaBottom"></view>

    <!-- 管理模式底部欄 -->
    <view class="wanl-cart-foot fixedView solid-top edit" v-if="cart.operate">
      <view class="flex align-center" @tap="toCartchoose">
        <view class="text-xxl">
          <text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
          <text v-else class="wlIcon-xuanze wanl-gray-light"></text>
        </view>
        <view class="margin-left-sm">
          <text>{{ cart.status ? $t('cart.cancel') : $t('cart.selectAll') }}</text>
        </view>
      </view>
      <view class="flex">
        <button v-if="cart.allnum == 0" class="cu-btn round line-gray">{{ $t('cart.moveToFavorite') }}</button>
        <button v-else class="cu-btn round line-orange" @tap="handleMove">{{ $t('cart.moveToFavorite') }}</button>
        <button class="cu-btn round line-orange" @tap="toEmpty">{{ $t('cart.clear') }}</button>
        <button v-if="cart.allnum == 0" class="cu-btn round line-gray">{{ $t('cart.delete') }}</button>
        <button v-else class="cu-btn round bg-gradual-orange" @tap="handleDel">{{ $t('cart.delete') }}</button>
      </view>
    </view>

    <!-- 普通模式底部欄 -->
    <view class="wanl-cart-foot fixedView solid-top account" v-else>
      <view class="flex align-center" @tap="toCartchoose">
        <view class="text-xxl">
          <text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
          <text v-else class="wlIcon-xuanze wanl-gray-light"></text>
        </view>
        <view class="margin-left-sm">
          <text>{{ cart.status ? $t('cart.cancel') : $t('cart.selectAll') }}</text>
        </view>
      </view>
      <view class="flex">
        <view class="text-sm text-right">
          <view>
            {{ $t('cart.total') }}：
            <text class="text-price wanl-orange text-lg">{{ cart.allsum }}</text>
          </view>
          <view>{{ $t('cart.noShipping') }}</view>
        </view>
        <button v-if="cart.allnum == 0" class="cu-btn round line-gray">去結算</button>
        <button v-else class="cu-btn round bg-gradual-orange" @tap="handleSettlement">
          {{ $t('cart.checkout') }} ({{ cart.allnum }})
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { pullMallProductPage } from '@/features/mall/mall-gateway'
import MallProduct from '@/components/mall/mall-product.vue'

export default {
  components: { MallProduct },
  data() {
    return {
      sys: { height: 0, top: 0 },
      likeData: [],
      likePage: 1,
      likeLastPage: 1
    }
  },
  computed: {
    ...mapState(['cart'])
  },
  onLoad() {
    const sysInfo = uni.getSystemInfoSync()
    const statusBarHeight = sysInfo.statusBarHeight || 0
    this.sys = {
      top: statusBarHeight,
      height: statusBarHeight + uni.upx2px(90)
    }
    this.loadLikeData()
  },
  onShow() {
    this.$store.dispatch('cart/sync')
  },
  onReachBottom() {
    if (this.likePage >= this.likeLastPage) return
    this.likePage++
    this.loadLikeData(true)
  },
  methods: {
    ...mapActions({
      handleOperate: 'cart/operate',
      handleChoose: 'cart/choose',
      handleShopChoose: 'cart/shopchoose',
      handleBcadd: 'cart/bcadd',
      handleBcsub: 'cart/bcsub',
      handleMove: 'cart/move',
      handleDel: 'cart/del',
      handleSettlement: 'cart/settlement'
    }),
    // 返回上一頁
    goBack() {
      uni.navigateBack({ delta: 1 })
    },
    // 空購物車禁止全選，彈窗提示去逛逛（照搬88live）
    toCartchoose() {
      if (this.cart.list.length == 0) {
        uni.showModal({
          content: this.$t('cart.emptyHint'),
          success: res => {
            if (res.confirm) {
              uni.switchTab({ url: '/pages/index' })
            }
          }
        })
      } else {
        this.$store.dispatch('cart/cartchoose')
      }
    },
    // 清空購物車需確認（照搬88live）
    toEmpty() {
      uni.showModal({
        content: this.$t('cart.clearConfirm'),
        success: res => {
          if (res.confirm) {
            this.$store.dispatch('cart/empty')
          }
        }
      })
    },
    async loadLikeData(append = false) {
      try {
        const res = await pullMallProductPage({ type: 'goods', page: this.likePage })
        this.likeData = append ? this.likeData.concat(res.rows) : res.rows
        this.likeLastPage = res.lastPage
      } catch (e) {
        console.warn('[cart] loadLikeData', e)
      }
    },
    onShop(shop_id) {
      uni.navigateTo({ url: `/pages/shop/index?id=${shop_id}` })
    },
    onGoods(goods_id) {
      uni.navigateTo({ url: `/pages/product/goods?id=${goods_id}` })
    }
  }
}
</script>

<style>
.cart-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.wanl-gray-light {
  color: #eee;
}

.wanl-cart-shop {
  background-color: #ffffff;
}

.wanl-cart-shop .shop {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wanl-cart-shop .shop .shopname {
  position: absolute;
  display: flex;
  align-items: center;
  left: 60rpx;
}

.wanl-cart-goods {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.wanl-cart-goods:last-child {
  margin-bottom: 18rpx;
}

.wanl-cart-goods .picture {
  width: 180rpx;
  height: 180rpx;
}

.wanl-cart-goods .picture image {
  width: 180rpx;
  height: 180rpx;
  overflow: hidden;
  border-radius: 20rpx;
}

.wanl-cart-goods .content {
  padding-left: 25rpx;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.wanl-cart-goods .content .opt {
  font-size: 24rpx;
  padding: 0;
  color: #000000;
  height: 32rpx;
  background-color: #f6f6f6;
  font-weight: 300;
  margin-top: 10rpx;
  margin-bottom: 25rpx;
  border-radius: 4rpx;
}

.wanl-numberBox {
  display: flex;
  align-items: center;
  width: 200rpx;
  height: 50rpx;
  border-radius: 10rpx;
  padding: 6rpx;
  overflow: hidden;
  flex-shrink: 0;
}

.wanl-numberBox>view {
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
}

.wanl-numberBox text {
  background-color: #f2f2f2;
  padding: 8rpx;
  font-size: 30rpx;
}

.wanl-cart-foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 997;
  min-height: 52px;
  background-color: #ffffff;
  padding: 0 25rpx;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  bottom: 0;
  left: 0;
}

.wanl-cart-foot.account button {
  margin-left: 25rpx;
}

.wanl-cart-foot.edit button {
  margin-left: 20rpx;
}

.wanl-cart-foot.account .cu-btn {
  padding: 0 25rpx;
  font-size: 32rpx;
  height: 72rpx;
  margin-top: 6rpx;
}

.wanl-cart-foot.edit .cu-btn {
  padding: 0 30rpx;
  font-size: 24rpx;
  height: 56rpx;
}

.safeAreaBottom {
  height: env(safe-area-inset-bottom);
}
</style>