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>

      <!-- 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>
    </scroll-view>

    <view class="bottom-bar">
      <view class="bottom-left">
        <text class="total-label">合计: </text>
        <text class="total-amount">{{ 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'

export default {
  data() {
    return {
      items: [],
      selectedAddress: null,
      freight: 0,
      remark: '',
      loading: false,
      submitting: false,
      actualAmount: 0
    }
  },
  onLoad() {
    var stored = uni.getStorageSync('checkoutItems')
    if (stored) {
      this.items = stored
      this.calcAmount()
    }
    this.loadDefaultAddress()
  },
  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
    },
    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++) {
        orderItems.push({
          productId: this.items[i].productId,
          quantity: this.items[i].quantity
        })
      }
      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;
}
.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>