cfc/cfc-frontend/pages/shop/cart/cart.vue

<template>
  <view class="container">
    <scroll-view
      scroll-y
      class="cart-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view v-if="loading && items.length === 0" class="loading-wrap">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="items.length === 0" class="empty-wrap">
        <text class="empty-icon">🛒</text>
        <text class="empty-text">购物车是空的</text>
      </view>
      <view v-else>
        <view class="select-all-row">
          <view class="checkbox-wrap" @click="toggleSelectAll">
            <text :class="['checkbox', selectAll ? 'checked' : '']">
              <text v-if="selectAll" class="checkmark">✓</text>
            </text>
            <text class="select-all-text">全选</text>
          </view>
        </view>
        <view
          v-for="item in items"
          :key="item.productId"
          class="cart-item-card"
        >
          <view class="item-left">
            <image
              class="item-image"
              :src="getImageUrl(item.coverImage) || '/static/default-product.png'"
              mode="aspectFill"
            />
          </view>
          <view class="item-right">
            <view class="item-header">
              <view class="checkbox-wrap" @click="toggleItem(item.productId)">
                <text :class="['checkbox', item.checked ? 'checked' : '']">
                  <text v-if="item.checked" class="checkmark">✓</text>
                </text>
              </view>
              <text class="item-name">{{ item.productName }}</text>
              <text v-if="item.specDesc" class="item-spec">{{ item.specDesc }}</text>
              <text v-if="item.supplierName" class="item-supplier">供应商: {{ item.supplierName }}</text>
              <text class="item-delete" @click="onRemove(item.productId)">🗑</text>
            </view>
            <view class="item-bottom">
              <text class="item-price">{{ formatPriceWithSymbol(item.unitPrice) }}</text>
              <view class="stepper">
                <text class="stepper-btn" @click="decreaseQty(item)">−</text>
                <text class="stepper-value">{{ item.quantity }}</text>
                <text class="stepper-btn" @click="increaseQty(item)">+</text>
              </view>
            </view>
            <text class="item-subtotal">小计: {{ formatPriceWithSymbol(item.subtotal) }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Member Upgrade Hint -->
    <view v-if="!isMember && items.length > 0" class="member-hint" @click="goUpgrade">
      <text class="member-hint-icon">👑</text>
      <text class="member-hint-text">开通会员享全场商品折扣</text>
      <text class="member-hint-action">去开通 ›</text>
    </view>

    <view class="bottom-bar" v-if="items.length > 0">
      <view class="bottom-left">
        <text class="selected-count">已选 {{ selectedCount }} 件</text>
        <text class="total-amount-label">合计: </text>
        <text class="total-amount">{{ formatPriceWithSymbol(totalAmount) }}</text>
      </view>
      <button
        :class="['checkout-btn', selectedCount === 0 ? 'disabled' : '']"
        :disabled="selectedCount === 0"
        @click="goCheckout"
      >去结算</button>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getMyMembership } from '@/utils/api.js'

export default {
  data() {
    return {
      items: [],
      loading: false,
      refreshing: false,
      userId: null,
      isMember: false
    }
  },
  computed: {
    selectAll() {
      return this.items.length > 0 && this.items.every(function(item) {
        return item.checked
      })
    },
    selectedCount() {
      var count = 0
      for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].checked) {
          count = count + this.items[i].quantity
        }
      }
      return count
    },
    totalAmount() {
      var total = 0
      for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].checked) {
          total = total + (this.items[i].subtotal || this.items[i].unitPrice * this.items[i].quantity)
        }
      }
      return total
    }
  },
  onLoad() {
    this.userId = uni.getStorageSync('userId')
    this.checkMemberStatus()
    this.loadCart()
  },
  onShow() {
    if (this.items.length > 0) {
      this.loadCart()
    }
  },
  methods: {
    checkMemberStatus() {
      var that = this
      getMyMembership().then(function(res) {
        if (res.data && res.data.memberLevel) {
          that.isMember = res.data.memberLevel !== 'FREE'
        }
      }).catch(function() {})
    },
    goUpgrade() {
      uni.navigateTo({ url: '/pages/membership/upgrade' })
    },
    loadCart() {
      if (this.loading) return
      this.loading = true
      var that = this
      uni.request({
        url: config.api('/api/cart/list'),
        method: 'POST',
        data: {},
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.loading = false
          that.refreshing = false
          if (res.data && res.data.code === 200) {
            var list = res.data.data || []
            for (var i = 0; i < list.length; i++) {
              list[i].checked = true
              list[i].subtotal = list[i].unitPrice * list[i].quantity
            }
            that.items = list
          }
        },
        fail: function() {
          that.loading = false
          that.refreshing = false
          uni.showToast({ title: '加载购物车失败', icon: 'none' })
        }
      })
    },
    onRefresh() {
      this.refreshing = true
      this.loadCart()
    },
    toggleSelectAll() {
      var newState = !this.selectAll
      for (var i = 0; i < this.items.length; i++) {
        this.items[i].checked = newState
      }
    },
    toggleItem(productId) {
      for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].productId === productId) {
          this.items[i].checked = !this.items[i].checked
          break
        }
      }
    },
    increaseQty(item) {
      item.quantity = item.quantity + 1
      item.subtotal = item.unitPrice * item.quantity
      this.syncQty(item)
    },
    decreaseQty(item) {
      if (item.quantity <= 1) return
      item.quantity = item.quantity - 1
      item.subtotal = item.unitPrice * item.quantity
      this.syncQty(item)
    },
    syncQty(item) {
      uni.request({
        url: config.api('/api/cart/update'),
        method: 'POST',
        data: { productId: item.productId, quantity: item.quantity },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        }
      })
    },
    onRemove(productId) {
      var that = this
      uni.showModal({
        title: '确认删除',
        content: '确定从购物车移除该商品吗？',
        success: function(confirm) {
          if (confirm.confirm) {
            uni.request({
              url: config.api('/api/cart/remove'),
              method: 'POST',
              data: { productId: productId },
              header: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + uni.getStorageSync('token')
              },
              success: function(res) {
                if (res.data && res.data.code === 200) {
                  uni.showToast({ title: '已移除', icon: 'success' })
                  that.loadCart()
                }
              }
            })
          }
        }
      })
    },
    goCheckout() {
      if (this.selectedCount === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' })
        return
      }
      var selected = []
      for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].checked) {
          var item = {
            productId: this.items[i].productId,
            productName: this.items[i].productName,
            coverImage: this.items[i].coverImage,
            unitPrice: this.items[i].unitPrice,
            quantity: this.items[i].quantity
          }
          if (this.items[i].skuId) {
            item.skuId = this.items[i].skuId
          }
          if (this.items[i].specDesc) {
            item.specDesc = this.items[i].specDesc
          }
          selected.push(item)
        }
      }
      uni.setStorageSync('checkoutItems', selected)
      uni.navigateTo({ url: '/pages/shop/checkout/checkout' })
    },
    formatPriceWithSymbol(price) {
      if (price === null || price === undefined) return '0.00'
      return (Number(price) / 100).toFixed(2)
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}
.cart-list {
  flex: 1;
  height: calc(100vh - 120rpx);
}
.loading-wrap,
.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.loading-text {
  font-size: 26rpx;
  color: #999;
}
.empty-icon {
  font-size: 100rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.select-all-row {
  background: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.checkbox-wrap {
  display: flex;
  align-items: center;
}
.checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  font-size: 24rpx;
  color: #fff;
}
.checkbox.checked {
  background: #F97316;
  border-color: #F97316;
}
.checkmark {
  color: #fff;
  font-weight: bold;
}
.select-all-text {
  font-size: 26rpx;
  color: #333;
}
.cart-item-card {
  display: flex;
  background: #fff;
  margin: 16rpx 20rpx;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.item-left {
  margin-right: 16rpx;
}
.item-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background: #f0f0f0;
}
.item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.item-header {
  display: flex;
  align-items: center;
}
.item-name {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 4rpx;
}
.item-spec {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
  flex-basis: 100%;
}
.item-supplier {
  font-size: 20rpx;
  color: #0EA5E9;
  display: block;
  margin-top: 2rpx;
  flex-basis: 100%;
}
.item-delete {
  font-size: 32rpx;
  padding: 4rpx 8rpx;
  color: #ccc;
}
.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
}
.item-price {
  font-size: 28rpx;
  color: #F97316;
  font-weight: bold;
}
.stepper {
  display: flex;
  align-items: center;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  overflow: hidden;
}
.stepper-btn {
  width: 56rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  font-size: 28rpx;
  color: #666;
  background: #fafafa;
}
.stepper-value {
  width: 64rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  font-size: 26rpx;
  color: #333;
  border-left: 1rpx solid #e0e0e0;
  border-right: 1rpx solid #e0e0e0;
}
.item-subtotal {
  font-size: 22rpx;
  color: #999;
  text-align: right;
  margin-top: 8rpx;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 100;
}
.bottom-left {
  display: flex;
  align-items: baseline;
}
.selected-count {
  font-size: 24rpx;
  color: #666;
  margin-right: 12rpx;
}
.total-amount-label {
  font-size: 24rpx;
  color: #666;
}
.total-amount {
  font-size: 36rpx;
  color: #F97316;
  font-weight: bold;
}
.checkout-btn {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 50rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 36rpx;
  border: none;
}
.checkout-btn::after {
  border: none;
}
.checkout-btn.disabled {
  background: #ddd;
  color: #999;
}

/* Member Upgrade Hint */
.member-hint {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border-top: 2rpx solid #FED7AA;
  border-bottom: 2rpx solid #FED7AA;
}
.member-hint-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.member-hint-text {
  flex: 1;
  font-size: 26rpx;
  color: #C2410C;
}
.member-hint-action {
  font-size: 26rpx;
  color: #F97316;
  font-weight: 500;
}
</style>