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">
      <!-- Address Section -->
      <view class="section address-section" @click="goSelectAddress">
        <view v-if="selectedAddress" class="address-content">
          <view class="address-top">
            <text class="receiver-name">{{ selectedAddress.receiverName }}</text>
            <text class="receiver-phone">{{ formatPhone(selectedAddress.phone) }}</text>
            <text v-if="selectedAddress.isDefault === 1" class="default-badge">默认</text>
          </view>
          <text class="address-detail">
            {{ selectedAddress.province }}{{ selectedAddress.city }}{{ selectedAddress.district }}{{ selectedAddress.street }}
          </text>
          <text class="address-arrow">›</text>
        </view>
        <view v-else class="address-empty" @click.stop="goAddAddress">
          <text class="address-empty-icon">📍</text>
          <text class="address-empty-text">请添加收货地址</text>
          <text class="address-arrow">›</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>

      <!-- 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 } from '../../../utils/api.js'

export default {
  data() {
    return {
      items: [],
      selectedAddress: null,
      freight: 0,
      remark: '',
      loading: false,
      submitting: false,
      actualAmount: 0,
      coupons: [],
      selectedCoupon: null,
      showCouponPicker: false
    }
  },
  computed: {
    finalAmount() {
      var total = (this.actualAmount || 0) + (this.freight || 0)
      if (this.selectedCoupon) {
        total = total - this.selectedCoupon.value
        if (total < 0) total = 0
      }
      return total
    },
    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.loadDefaultAddress()
    this.loadCoupons()
  },
  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
    },
    getConditionText(minSpend) {
      if (!minSpend || minSpend <= 0) return '无门槛'
      return '满' + (minSpend / 100).toFixed(2) + '元可用'
    },
    loadDefaultAddress() {
      this.loading = true
      var that = this
      uni.request({
        url: config.api('/api/user/address/list'),
        method: 'POST',
        data: {},
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.loading = false
          if (res.data && res.data.code === 200) {
            var list = res.data.data || []
            for (var i = 0; i < list.length; i++) {
              if (list[i].isDefault === 1) {
                that.selectedAddress = list[i]
                break
              }
            }
            if (!that.selectedAddress && list.length > 0) {
              that.selectedAddress = list[0]
            }
          }
        },
        fail: function() {
          that.loading = false
        }
      })
    },
    goSelectAddress() {
      var self = this
      uni.navigateTo({
        url: '/pages/shop/address/address?selectMode=1',
        events: {
          onAddressSelect: function(data) {
            self.selectedAddress = data
          }
        },
        success: function(res) {
          res.eventChannel.on('onAddressSelect', function(data) {
            self.selectedAddress = data
          })
        }
      })
    },
    goAddAddress() {
      uni.navigateTo({ url: '/pages/shop/address-edit/address-edit' })
    },
    onSubmit() {
      if (!this.selectedAddress) {
        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 addressSnapshot = JSON.stringify({
        receiverName: this.selectedAddress.receiverName,
        phone: this.selectedAddress.phone,
        province: this.selectedAddress.province,
        city: this.selectedAddress.city,
        district: this.selectedAddress.district,
        street: this.selectedAddress.street
      })
      var that = this
      uni.request({
        url: config.api('/api/product/order/create'),
        method: 'POST',
        data: {
          items: orderItems,
          remark: this.remark,
          addressSnapshot: addressSnapshot
        },
        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')
            setTimeout(function() {
              uni.navigateTo({
                url: '/pages/shop/payment/payment?orderNo=' + order.orderNo + '&amount=' + order.totalAmount
              })
            }, 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
    }
  }
}
</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;
}
</style>