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

<template>
  <view class="container">
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>
    <scroll-view v-else scroll-y class="content">
      <!-- Consignee Section -->
      <view class="section address-section" @click="openConsigneePicker">
        <view v-if="selectedConsignee" class="address-content">
          <view class="address-top">
            <text class="receiver-name">{{ selectedConsignee.name }}</text>
            <text class="receiver-phone">{{ formatPhone(selectedConsignee.phone) }}</text>
            <text v-if="selectedConsignee.isDefault === 1" class="default-badge">默认</text>
          </view>
          <text v-if="selectedConsignee.idCard" class="address-detail">身份证: {{ maskField(selectedConsignee.idCard) }}</text>
          <text v-if="selectedConsignee.ethnicity" class="address-detail">民族: {{ selectedConsignee.ethnicity }}</text>
          <text v-if="selectedConsignee.bloodType" class="address-detail">血型: {{ selectedConsignee.bloodType }}</text>
          <text class="address-arrow">›</text>
        </view>
        <view v-else class="address-empty" @click.stop="goAddConsignee">
          <text class="address-empty-icon">📍</text>
          <text class="address-empty-text">请选择收货人</text>
          <text class="address-arrow">›</text>
        </view>
      </view>

      <!-- Purchase Info Section (when product requires it) -->
      <view class="section" v-if="requiredFields.length > 0">
        <text class="section-title">购买信息</text>
        <view
          v-for="field in requiredFields"
          :key="field.fieldKey"
          class="purchase-field-row"
        >
          <text class="purchase-field-label">
            {{ field.fieldName }}
            <text v-if="field.isRequired" class="required-mark">*</text>
          </text>
          <input
            v-model="purchaseForm[field.fieldKey]"
            class="purchase-field-input"
            :placeholder="'请输入' + field.fieldName + (field.isRequired ? '' : '（选填）')"
            :disabled="!!field.prefillValue"
            placeholder-style="color: #ccc; font-size: 26rpx;"
          />
          <text v-if="field.prefillValue" class="purchase-field-prefill">已填写</text>
        </view>
      </view>

      <!-- Order Items Section -->
      <view class="section">
        <text class="section-title">商品信息</text>
        <view
          v-for="item in items"
          :key="item.productId"
          class="order-item"
        >
          <image
            class="item-image"
            :src="item.coverImage || '/static/default-product.png'"
            mode="aspectFill"
          />
          <view class="item-info">
            <text class="item-name">{{ item.productName }}</text>
            <text class="item-qty">x{{ item.quantity }}</text>
          </view>
          <text class="item-price">{{ formatPriceWithSymbol(item.unitPrice) }}</text>
        </view>
      </view>

      <!-- Freight Section -->
      <view class="section">
        <view class="info-row">
          <text class="info-label">运费</text>
          <text class="info-value">{{ formatPriceWithSymbol(freight) }}</text>
        </view>
      </view>

      <!-- Coupon Section -->
      <view class="section coupon-section" @click="openCouponPicker">
        <view class="info-row">
          <text class="info-label">优惠券</text>
          <view class="coupon-selected" v-if="selectedCoupon">
            <text class="coupon-discount">-{{ formatPriceWithSymbol(selectedCoupon.value) }}</text>
            <text class="coupon-name-tag">{{ selectedCoupon.name }}</text>
          </view>
          <view class="coupon-placeholder" v-else>
            <text class="placeholder-text">选择优惠券</text>
          </view>
          <text class="address-arrow">›</text>
        </view>
      </view>

      <!-- Points Deduction Section -->
      <view class="section" v-if="userTotalPoints > 0">
        <view class="info-row">
          <text class="info-label">积分抵扣</text>
          <text class="points-balance">可用 {{ userTotalPoints }} 积分</text>
        </view>
        <view class="points-input-row">
          <input
            class="points-input"
            type="number"
            :value="pointsUsed"
            @input="onPointsInput"
            placeholder="输入使用积分"
            placeholder-style="color: #ccc; font-size: 26rpx;"
          />
          <text class="points-hint">≈ ¥{{ pointsYuanEquivalent }}</text>
        </view>
        <view class="points-tip">
          <text class="points-tip-text">1积分 = ¥0.01，最多使用 {{ maxPoints }} 积分</text>
        </view>
      </view>

      <!-- Remark Section -->
      <view class="section">
        <view class="info-row">
          <text class="info-label">备注</text>
          <input
            class="remark-input"
            v-model="remark"
            placeholder="选填，给商家留言"
            placeholder-style="color: #ccc; font-size: 26rpx;"
          />
        </view>
      </view>

      <view class="bottom-spacer"></view>

      <!-- Coupon Picker Bottom Sheet -->
      <view class="modal-mask" v-if="showCouponPicker" @click="closeCouponPicker">
        <view class="coupon-picker" @click.stop>
          <view class="picker-header">
            <text class="picker-title">选择优惠券</text>
            <text class="picker-close" @click="closeCouponPicker">关闭</text>
          </view>
          <scroll-view scroll-y class="picker-list">
            <view
              v-for="coupon in availableCoupons"
              :key="coupon.id"
              class="picker-item"
              :class="selectedCoupon && selectedCoupon.id === coupon.id ? 'picker-item-active' : ''"
              @click="selectCoupon(coupon)"
            >
              <view class="picker-item-left">
                <text class="picker-item-value">{{ formatPriceWithSymbol(coupon.value) }}</text>
              </view>
              <view class="picker-item-right">
                <text class="picker-item-name">{{ coupon.name }}</text>
                <text class="picker-item-condition">{{ getConditionText(coupon.minSpend) }}</text>
              </view>
              <view class="picker-item-check" v-if="selectedCoupon && selectedCoupon.id === coupon.id">
                <text class="check-icon">✓</text>
              </view>
            </view>
            <view class="picker-empty" v-if="availableCoupons.length === 0">
              <text>暂无可用优惠券</text>
            </view>
          </scroll-view>
          <view class="picker-footer" v-if="selectedCoupon">
            <button class="picker-btn-remove" @click="removeCoupon">不使用优惠券</button>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="bottom-bar">
      <view class="bottom-left">
        <text class="total-label">合计: </text>
        <text class="total-amount">{{ formatPriceWithSymbol(finalAmount) }}</text>
        <text v-if="selectedCoupon" class="total-original">{{ formatPriceWithSymbol(actualAmount + freight) }}</text>
      </view>
      <button
        :class="['submit-btn', submitting ? 'disabled' : '']"
        :disabled="submitting"
        @click="onSubmit"
      >提交订单</button>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getCouponList, consigneeList, getProductRequiredFields } from '../../../utils/api.js'

export default {
  data() {
    return {
      items: [],
      selectedConsignee: null,
      requiredFields: [],       // 需要的购买信息字段
      purchaseForm: {},         // 用户填写的购买信息
      consigneeList: [],
      showConsigneePicker: false,
      freight: 0,
      remark: '',
      loading: false,
      submitting: false,
      actualAmount: 0,
      coupons: [],
      selectedCoupon: null,
      showCouponPicker: false,
      pointsUsed: 0,
      userTotalPoints: 0,
      pointsLoading: false
    }
  },
  computed: {
    finalAmount() {
      var total = (this.actualAmount || 0) + (this.freight || 0)
      if (this.selectedCoupon) {
        total = total - this.selectedCoupon.value
      }
      total = total - (this.pointsUsed || 0)
      if (total < 0) total = 0
      return total
    },
    maxPoints() {
      var total = (this.actualAmount || 0) + (this.freight || 0)
      if (this.selectedCoupon) {
        total = total - this.selectedCoupon.value
      }
      if (total < 0) total = 0
      if (this.userTotalPoints < total) {
        return this.userTotalPoints
      }
      return total
    },
    pointsYuanEquivalent() {
      return (this.pointsUsed / 100).toFixed(2)
    },
    availableCoupons() {
      var self = this
      return this.coupons.filter(function(c) {
        if (c.status && c.status !== 'AVAILABLE') return false
        if (c.applicableTo && c.applicableTo !== 'ALL') return false
        if (c.minSpend && c.minSpend > self.actualAmount) return false
        return true
      })
    }
  },
  onLoad(options) {
    var that = this
    var stored = uni.getStorageSync('checkoutItems')
    if (stored && stored.length > 0) {
      this.items = stored
      this.calcAmount()
    } else if (options.productId) {
      // Load product directly from detail page
      var productData = {
        productId: parseInt(options.productId),
        productName: options.productName || '商品',
        coverImage: options.coverImage || '',
        unitPrice: parseInt(options.price) || 0,
        quantity: parseInt(options.quantity) || 1
      }
      if (options.skuId) {
        productData.skuId = parseInt(options.skuId)
      }
      this.items = [productData]
      this.calcAmount()
    }
    this.loadDefaultConsignee()
    this.loadRequiredFields()
    this.loadCoupons()
    this.loadUserPoints()
  },
  methods: {
    calcAmount() {
      var total = 0
      for (var i = 0; i < this.items.length; i++) {
        total = total + (this.items[i].unitPrice * this.items[i].quantity)
      }
      this.actualAmount = total
    },
    async loadCoupons() {
      try {
        var res = await getCouponList()
        this.coupons = res.data || []
      } catch (e) {
        this.coupons = []
      }
    },
    openCouponPicker() {
      if (this.availableCoupons.length === 0 && !this.selectedCoupon) {
        uni.showToast({ title: '暂无可用优惠券', icon: 'none' })
        return
      }
      this.showCouponPicker = true
    },
    closeCouponPicker() {
      this.showCouponPicker = false
    },
    selectCoupon(coupon) {
      this.selectedCoupon = coupon
      this.showCouponPicker = false
    },
    removeCoupon() {
      this.selectedCoupon = null
      this.showCouponPicker = false
    },
    onPointsInput(e) {
      var val = parseInt(e.detail.value) || 0
      if (val < 0) val = 0
      var maxP = this.maxPoints
      if (val > maxP) {
        val = maxP
        uni.showToast({ title: '最多使用 ' + maxP + ' 积分', icon: 'none' })
      }
      this.pointsUsed = val
    },
    getConditionText(minSpend) {
      if (!minSpend || minSpend <= 0) return '无门槛'
      return '满' + (minSpend / 100).toFixed(2) + '元可用'
    },
    async loadDefaultConsignee() {
      this.loading = true
      try {
        var res = await consigneeList()
        if (res.code === 200) {
          var list = res.data || []
          this.consigneeList = list
          for (var i = 0; i < list.length; i++) {
            if (list[i].isDefault === 1) {
              this.selectedConsignee = list[i]
              this.autoFillPurchaseForm()
              break
            }
          }
          if (!this.selectedConsignee && list.length > 0) {
            this.selectedConsignee = list[0]
            this.autoFillPurchaseForm()
          }
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    async loadRequiredFields() {
      if (this.items.length === 0) return
      var productId = this.items[0].productId
      try {
        var res = await getProductRequiredFields(productId)
        if (res.code === 200) {
          this.requiredFields = res.data || []
          this.autoFillPurchaseForm()
        }
      } catch (e) {
        console.error(e)
      }
    },
    autoFillPurchaseForm() {
      if (!this.selectedConsignee || this.requiredFields.length === 0) return
      var form = {}
      for (var i = 0; i < this.requiredFields.length; i++) {
        var field = this.requiredFields[i]
        if (field.prefillValue) {
          form[field.fieldKey] = field.prefillValue
        } else {
          form[field.fieldKey] = ''
        }
      }
      this.purchaseForm = form
    },
    openConsigneePicker() {
      var that = this
      if (this.consigneeList.length === 0) {
        uni.showToast({ title: '暂无收货人，请先添加', icon: 'none' })
        return
      }
      var items = this.consigneeList.map(function(c) {
        return (c.name || '') + ' ' + (c.phone || '')
      })
      uni.showActionSheet({
        itemList: items,
        success: function(res) {
          that.selectedConsignee = that.consigneeList[res.tapIndex]
          that.autoFillPurchaseForm()
        }
      })
    },
    goAddConsignee() {
      uni.navigateTo({ url: '/pages/shop/consignee-edit/consignee-edit' })
    },
    loadUserPoints() {
      var that = this
      uni.request({
        url: config.api('/api/user/info'),
        method: 'POST',
        data: {},
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            that.userTotalPoints = res.data.data.totalPoints || 0
          }
        }
      })
    },
    onSubmit() {
      if (!this.selectedConsignee) {
        uni.showToast({ title: '请选择收货人', icon: 'none' })
        return
      }
      if (this.items.length === 0) {
        uni.showToast({ title: '请选择商品', icon: 'none' })
        return
      }
      this.submitting = true
      var orderItems = []
      for (var i = 0; i < this.items.length; i++) {
        var itemData = {
          productId: this.items[i].productId,
          quantity: this.items[i].quantity
        }
        if (this.items[i].skuId) {
          itemData.skuId = this.items[i].skuId
        }
        orderItems.push(itemData)
      }
      var that = this
      uni.request({
        url: config.api('/api/product/order/create'),
        method: 'POST',
        data: {
          items: orderItems,
          remark: this.remark,
          consigneeId: that.selectedConsignee.id,
          purchaseInfo: that.purchaseForm,
          pointsUsed: that.pointsUsed
        },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.submitting = false
          if (res.data && res.data.code === 200) {
            var order = res.data.data
            uni.showToast({ title: '下单成功', icon: 'success' })
            uni.removeStorageSync('checkoutItems')
            var moneyAmount = order.moneyAmount != null ? order.moneyAmount : order.totalAmount
            var pointsUsed = order.pointsUsed || 0
            setTimeout(function() {
              uni.navigateTo({
                url: '/pages/shop/payment/payment?orderNo=' + order.orderNo + '&amount=' + (moneyAmount / 100).toFixed(2) + '&pointsUsed=' + pointsUsed
              })
            }, 1000)
          } else {
            uni.showToast({ title: res.data.message || '下单失败', icon: 'none' })
          }
        },
        fail: function() {
          that.submitting = false
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    },
    formatPrice(price) {
      if (price === null || price === undefined) return '0.00'
      return (Number(price) / 100).toFixed(2)
    },
    formatPhone(phone) {
      if (!phone) return ''
      if (phone.length === 11) {
        return phone.substr(0, 3) + '****' + phone.substr(7)
      }
      return phone
    },
    maskField(val) {
      if (!val) return ''
      if (val.length >= 8) {
        return val.substr(0, 4) + '****' + val.substr(val.length - 4)
      }
      return val
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
.loading-wrap {
  display: flex;
  justify-content: center;
  padding-top: 200rpx;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.content {
  height: calc(100vh - 120rpx);
}
.section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 24rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.address-section {
  position: relative;
}
.address-content {
  position: relative;
}
.address-top {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.receiver-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}
.receiver-phone {
  font-size: 26rpx;
  color: #666;
}
.default-badge {
  font-size: 20rpx;
  color: #F97316;
  background: #fff7e6;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}
.address-detail {
  font-size: 26rpx;
  color: #999;
  line-height: 1.5;
}
.address-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  font-size: 40rpx;
  color: #ccc;
  transform: translateY(-50%);
}
.address-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  position: relative;
}
.address-empty-icon {
  font-size: 40rpx;
  margin-right: 12rpx;
}
.address-empty-text {
  font-size: 28rpx;
  color: #999;
}
.order-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.order-item:last-child {
  border-bottom: none;
}
.item-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  background: #f0f0f0;
  margin-right: 16rpx;
}
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.item-name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 6rpx;
}
.item-qty {
  font-size: 22rpx;
  color: #999;
}
.item-price {
  font-size: 26rpx;
  color: #F97316;
  font-weight: bold;
  margin-left: 16rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #333;
}
.remark-input {
  flex: 1;
  text-align: right;
  font-size: 26rpx;
  color: #333;
}

/* ===== Coupon Section ===== */
.coupon-section {
  position: relative;
}

.coupon-section:active {
  background: #fafafa;
}

.coupon-selected {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  margin-right: 30rpx;
}

.coupon-discount {
  font-size: 26rpx;
  color: #F97316;
  font-weight: 600;
  margin-right: 12rpx;
}

.coupon-name-tag {
  font-size: 22rpx;
  color: #fff;
  background: #F97316;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
  max-width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-placeholder {
  flex: 1;
  text-align: right;
  margin-right: 30rpx;
}

.placeholder-text {
  font-size: 26rpx;
  color: #ccc;
}

.total-original {
  font-size: 22rpx;
  color: #bbb;
  text-decoration: line-through;
  margin-left: 8rpx;
}

/* ===== Coupon Picker Modal ===== */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
}

.coupon-picker {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.picker-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.picker-close {
  font-size: 26rpx;
  color: #999;
}

.picker-list {
  max-height: 50vh;
  padding: 0 20rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  padding: 24rpx 16rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-item:active {
  background: #fafafa;
}

.picker-item-active {
  background: #FFF7ED;
}

.picker-item-left {
  width: 120rpx;
  text-align: center;
  flex-shrink: 0;
}

.picker-item-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
}

.picker-item-right {
  flex: 1;
  margin: 0 16rpx;
}

.picker-item-name {
  font-size: 26rpx;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.picker-item-condition {
  font-size: 22rpx;
  color: #999;
}

.picker-item-check {
  width: 40rpx;
  height: 40rpx;
  background: #F97316;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

.picker-empty {
  text-align: center;
  padding: 60rpx 0;
  font-size: 26rpx;
  color: #999;
}

.picker-footer {
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}

.picker-btn-remove {
  background: #f5f5f5;
  color: #666;
  font-size: 26rpx;
  border-radius: 12rpx;
  border: none;
}

.picker-btn-remove::after {
  border: none;
}
.bottom-spacer {
  height: 140rpx;
}
.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;
}
.total-label {
  font-size: 26rpx;
  color: #666;
}
.total-amount {
  font-size: 36rpx;
  color: #F97316;
  font-weight: bold;
}
.submit-btn {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 60rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 36rpx;
  border: none;
}
.submit-btn::after {
  border: none;
}
.submit-btn.disabled {
  background: #ddd;
  color: #999;
}
.points-balance {
  font-size: 24rpx;
  color: #F97316;
}
.points-input-row {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  padding: 12rpx 0;
  border-top: 1rpx solid #f5f5f5;
}
.points-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
  background: #f9f9f9;
  border-radius: 8rpx;
  padding: 0 16rpx;
}
.points-hint {
  font-size: 24rpx;
  color: #999;
  margin-left: 12rpx;
  min-width: 100rpx;
  text-align: right;
}
.points-tip {
  margin-top: 8rpx;
}
.points-tip-text {
  font-size: 22rpx;
  color: #bbb;
}
.total-original {
  font-size: 24rpx;
  color: #bbb;
  text-decoration: line-through;
  margin-left: 8rpx;
}

/* ===== Purchase Info Fields ===== */
.purchase-field-row {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.purchase-field-row:last-child {
  border-bottom: none;
}
.purchase-field-label {
  font-size: 26rpx;
  color: #333;
  width: 160rpx;
  flex-shrink: 0;
}
.required-mark {
  color: #f56c6c;
}
.purchase-field-input {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  text-align: right;
  padding: 8rpx 0;
}
.purchase-field-input[disabled] {
  background: transparent;
  color: #999;
}
.purchase-field-prefill {
  font-size: 22rpx;
  color: #67c23a;
  margin-left: 8rpx;
}
</style>