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="openAddressPicker">
        <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>

      <!-- 配送方式选择 -->
      <view class="section" v-if="deliveryMethod > 1">
        <text class="section-title">{{ deliveryMethodLabel(deliveryMethod) }}</text>
        <!-- 自提/线上服务区域 -->
        <view v-if="deliveryMethod === 2 || deliveryMethod === 3">
          <view class="delivery-sub-label">自取地点</view>
          <view class="picker-row" @click="showPickupLocationPicker">
            <text class="picker-value" v-if="selectedPickupLocation">{{ selectedPickupLocation.name }}</text>
            <text class="picker-placeholder" v-else>请选择自取地点</text>
            <text class="picker-arrow">›</text>
          </view>
          <view v-if="selectedPickupLocation && selectedPickupLocation.timeSlots && selectedPickupLocation.timeSlots.length > 0" class="picker-row" @click="showTimeSlotPicker">
            <text class="picker-value" v-if="selectedTimeSlot">{{ selectedTimeSlot.startTime }} - {{ selectedTimeSlot.endTime }}</text>
            <text class="picker-placeholder" v-else>请选择取货时间</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>

        <view v-if="deliveryMethod === 4">
          <view class="picker-row" @click="showServicePersonPicker">
            <text class="picker-value" v-if="selectedServicePerson">{{ selectedServicePerson.name }}（{{ selectedServicePerson.title || '服务者' }}）</text>
            <text class="picker-placeholder" v-else>请选择服务者</text>
            <text class="picker-arrow">›</text>
          </view>
          <view v-if="selectedServicePerson" class="picker-row" @click="showOnlineSlotPicker">
            <text class="picker-value" v-if="selectedTimeSlot">{{ formatOnlineTime(selectedTimeSlot.startTime) }} - {{ formatOnlineTime(selectedTimeSlot.endTime) }}</text>
            <text class="picker-placeholder" v-else>请选择服务时间</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>

        <view v-if="deliveryMethod === 5">
          <view class="picker-row" @click="showOnlineSlotPicker">
            <text class="picker-value" v-if="selectedTimeSlot">{{ formatOnlineTime(selectedTimeSlot.startTime) }} - {{ formatOnlineTime(selectedTimeSlot.endTime) }}</text>
            <text class="picker-placeholder" v-else>请选择预约时段</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 配送方式选择 -->
      <view class="section" v-if="deliveryMethod > 1">
        <text class="section-title">{{ deliveryMethodLabel(deliveryMethod) }}</text>
        <!-- 自提/线上服务区域 -->
        <view v-if="deliveryMethod === 2 || deliveryMethod === 3">
          <view class="delivery-sub-label">自取地点</view>
          <view class="picker-row" @click="showPickupLocationPicker">
            <text class="picker-value" v-if="selectedPickupLocation">{{ selectedPickupLocation.name }}</text>
            <text class="picker-placeholder" v-else>请选择自取地点</text>
            <text class="picker-arrow">›</text>
          </view>
          <view v-if="selectedPickupLocation && selectedPickupLocation.timeSlots && selectedPickupLocation.timeSlots.length > 0" class="picker-row" @click="showTimeSlotPicker">
            <text class="picker-value" v-if="selectedTimeSlot">{{ selectedTimeSlot.startTime }} - {{ selectedTimeSlot.endTime }}</text>
            <text class="picker-placeholder" v-else>请选择取货时间</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>

        <view v-if="deliveryMethod === 4">
          <view class="picker-row" @click="showServicePersonPicker">
            <text class="picker-value" v-if="selectedServicePerson">{{ selectedServicePerson.name }}（{{ selectedServicePerson.title || '服务者' }}）</text>
            <text class="picker-placeholder" v-else>请选择服务者</text>
            <text class="picker-arrow">›</text>
          </view>
          <view v-if="selectedServicePerson" class="picker-row" @click="showOnlineSlotPicker">
            <text class="picker-value" v-if="selectedTimeSlot">{{ formatOnlineTime(selectedTimeSlot.startTime) }} - {{ formatOnlineTime(selectedTimeSlot.endTime) }}</text>
            <text class="picker-placeholder" v-else>请选择服务时间</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>

        <view v-if="deliveryMethod === 5">
          <view class="picker-row" @click="showOnlineSlotPicker">
            <text class="picker-value" v-if="selectedTimeSlot">{{ formatOnlineTime(selectedTimeSlot.startTime) }} - {{ formatOnlineTime(selectedTimeSlot.endTime) }}</text>
            <text class="picker-placeholder" v-else>请选择预约时段</text>
            <text class="picker-arrow">›</text>
          </view>
        </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="getImageUrl(item.coverImage) || '/static/default-product.png'"
            mode="aspectFill"
          />
          <view class="item-info">
            <text class="item-name">{{ item.productName }}</text>
            <text v-if="item.specDesc" class="item-spec-desc">{{ item.specDesc }}</text>
            <text v-if="item.supplierName" class="item-supplier-name">供应商: {{ item.supplierName }}</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>

      <!-- Member Upgrade Hint -->
      <view v-if="!isMember" class="section member-upgrade-section" @click="goUpgrade">
        <view class="member-upgrade-row">
          <text class="member-upgrade-icon">👑</text>
          <text class="member-upgrade-text">开通会员享全场商品专享价</text>
          <text class="member-upgrade-arrow">›</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>
      <view v-if="!isMember" class="section member-coupon-hint">
        <view class="member-coupon-hint-content">
          <text class="hint-icon">👑</text>
          <text class="hint-text">加入会员可使用优惠券享更多优惠</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>
    </scroll-view>

    <!-- 优惠券选择器必须与 scroll-view 平级，否则 iOS 上 position: fixed 在 scroll-view 内不生效（优惠券弹窗不显示） -->
    <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>

    <!-- 自取地点选择器 -->
    <view class="modal-mask" v-if="showPickupLocationModal" @click="showPickupLocationModal=false">
      <view class="picker-modal" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择自取地点</text>
          <text class="picker-close" @click="showPickupLocationModal=false">关闭</text>
        </view>
        <scroll-view scroll-y class="picker-list">
          <view
            v-for="(loc, idx) in pickupLocations"
            :key="loc.id"
            class="picker-item"
            :class="selectedPickupLocation && selectedPickupLocation.id === loc.id ? 'picker-item-active' : ''"
            @click="selectPickupLocation(loc)"
          >
            <view class="picker-item-left">
              <text class="picker-item-name">{{ loc.name }}</text>
              <text class="picker-item-addr">{{ loc.address }}</text>
            </view>
            <view class="picker-item-check" v-if="selectedPickupLocation && selectedPickupLocation.id === loc.id">
              <text class="check-icon">✓</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 时间段选择器 -->
    <view class="modal-mask" v-if="showTimeSlotModal" @click="showTimeSlotModal=false">
      <view class="picker-modal" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择取货时间</text>
          <text class="picker-close" @click="showTimeSlotModal=false">关闭</text>
        </view>
        <scroll-view scroll-y class="picker-list">
          <view
            v-for="(slot, idx) in (selectedPickupLocation && selectedPickupLocation.timeSlots) || []"
            :key="slot.id"
            class="picker-item"
            :class="selectedTimeSlot && selectedTimeSlot.id === slot.id ? 'picker-item-active' : ''"
            @click="selectTimeSlot(slot)"
          >
            <view class="picker-item-left">
              <text class="picker-item-name">{{ slot.startTime }} - {{ slot.endTime }}</text>
            </view>
            <view class="picker-item-check" v-if="selectedTimeSlot && selectedTimeSlot.id === slot.id">
              <text class="check-icon">✓</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 服务者选择器 -->
    <view class="modal-mask" v-if="showServicePersonModal" @click="showServicePersonModal=false">
      <view class="picker-modal" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择服务者</text>
          <text class="picker-close" @click="showServicePersonModal=false">关闭</text>
        </view>
        <scroll-view scroll-y class="picker-list">
          <view
            v-for="(person, idx) in servicePersons"
            :key="person.id"
            class="picker-item"
            :class="selectedServicePerson && selectedServicePerson.id === person.id ? 'picker-item-active' : ''"
            @click="selectServicePerson(person)"
          >
            <view class="picker-item-left">
              <text class="picker-item-name">{{ person.name }}</text>
              <text class="picker-item-desc">{{ person.title || '' }}</text>
              <text class="picker-item-price">{{ formatPriceWithSymbol(person.price) }}</text>
            </view>
            <view class="picker-item-check" v-if="selectedServicePerson && selectedServicePerson.id === person.id">
              <text class="check-icon">✓</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 线上时间段选择器 -->
    <view class="modal-mask" v-if="showOnlineSlotModal" @click="showOnlineSlotModal=false">
      <view class="picker-modal" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择服务时间</text>
          <text class="picker-close" @click="showOnlineSlotModal=false">关闭</text>
        </view>
        <scroll-view scroll-y class="picker-list">
          <view
            v-for="slot in onlineTimeSlots"
            :key="slot.id"
            class="picker-item"
            :class="selectedTimeSlot && selectedTimeSlot.id === slot.id ? 'picker-item-active' : ''"
            @click="selectOnlineSlot(slot)"
          >
            <view class="picker-item-left">
              <text class="picker-item-name">{{ formatOnlineTime(slot.startTime) }} - {{ formatOnlineTime(slot.endTime) }}</text>
            </view>
            <view class="picker-item-check" v-if="selectedTimeSlot && selectedTimeSlot.id === slot.id">
              <text class="check-icon">✓</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </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, addressList, getProductRequiredFields, getMyMembership, productDetail } from '../../../utils/api.js'
import { parseDate } from '@/utils/format.js'

export default {
  data() {
    return {
      items: [],
      selectedAddress: null,
      requiredFields: [],       // 需要的购买信息字段
      purchaseForm: {},         // 用户填写的购买信息
      addressList: [],
      freight: 0,
      remark: '',
      loading: false,
      submitting: false,
      actualAmount: 0,
      coupons: [],
      selectedCoupon: null,
      showCouponPicker: false,
      pointsUsed: 0,
      userTotalPoints: 0,
      pointsLoading: false,
      isMember: false,
      // 配送配置
      deliveryMethod: 1,
      productDeliveryConfig: null,
      pickupLocations: [],
      selectedPickupLocation: null,
      selectedTimeSlot: null,
      servicePersons: [],
      selectedServicePerson: null,
      onlineSlots: [],
      // 弹窗控制
      showPickupLocationModal: false,
      showTimeSlotModal: false,
      showServicePersonModal: false,
      showOnlineSlotModal: 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
      })
    },
    onlineTimeSlots() {
      if (this.deliveryMethod === 4 && this.selectedServicePerson) {
        return this.selectedServicePerson.slots || []
      }
      if (this.deliveryMethod === 5) {
        return this.onlineSlots
      }
      return []
    }
  },
  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.checkMemberStatus()
    this.loadDefaultAddress()
    this.loadRequiredFields()
    this.loadCoupons()
    this.loadUserPoints()
    this.loadDeliveryConfig()
  },
  onShow() {
    // 从地址选择/编辑页返回后重新加载地址列表
    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
    },
    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 loadDefaultAddress() {
      this.loading = true
      try {
        var res = await addressList()
        if (res.code === 200) {
          var list = res.data || []
          this.addressList = list
          // 如果当前已有选中地址，保持选中状态
          if (this.selectedAddress) {
            var stillExists = false
            for (var k = 0; k < list.length; k++) {
              if (list[k].id === this.selectedAddress.id) {
                stillExists = true
                break
              }
            }
            if (!stillExists) {
              this.selectedAddress = null
            }
          }
          if (!this.selectedAddress) {
            for (var i = 0; i < list.length; i++) {
              if (list[i].isDefault === 1) {
                this.selectedAddress = list[i]
                break
              }
            }
            if (!this.selectedAddress && list.length > 0) {
              this.selectedAddress = list[0]
            }
          }
        }
      } 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.selectedAddress || 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
    },
    openAddressPicker() {
      if (this.addressList.length === 0) {
        uni.showToast({ title: '暂无地址，请先添加', icon: 'none' })
        return
      }
      uni.navigateTo({ url: '/pages/shop/address/address?selectMode=1' })
    },
    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' })
    },
    goAddAddress() {
      uni.navigateTo({ url: '/pages/shop/address-edit/address-edit' })
    },
    // ========== 配送方式相关 ==========
    loadDeliveryConfig() {
      if (this.items.length === 0) return
      var productId = this.items[0].productId
      if (!productId) return
      var stored = uni.getStorageSync('checkoutItems')
      var storageData = stored && stored.length > 0 ? stored[0] : {}
      var deliveryMethod = storageData.deliveryMethod
      if (!deliveryMethod || deliveryMethod <= 1) return
      this.deliveryMethod = deliveryMethod
      this.productDeliveryConfig = storageData.deliveryConfig || null
      // 如果来自产品详情，可能已有选中值
      if (storageData.pickupLocationId) {
        this.selectedPickupLocation = { id: storageData.pickupLocationId }
      }
      if (storageData.timeSlotId) {
        this.selectedTimeSlot = { id: storageData.timeSlotId }
      }
      if (storageData.servicePersonId) {
        this.selectedServicePerson = { id: storageData.servicePersonId }
      }
      // 加载完整配置
      var that = this
      productDetail({ id: productId }).then(function(res) {
        if (res.code === 200 && res.data && res.data.deliveryConfig) {
          that.productDeliveryConfig = res.data.deliveryConfig
          that.deliveryMethod = res.data.deliveryMethod || that.deliveryMethod
          that.pickupLocations = res.data.deliveryConfig.pickupLocations || []
          that.servicePersons = res.data.deliveryConfig.servicePersons || []
          that.onlineSlots = res.data.deliveryConfig.onlineSlots || []
        }
      }).catch(function() {})
    },
    onDeliveryMethodChange: function(e) {
      this.deliveryMethod = parseInt(e.detail.value)
      this.selectedPickupLocation = null
      this.selectedTimeSlot = null
      this.selectedServicePerson = null
    },
    onPickupLocationChange: function(e) {
      var idx = parseInt(e.detail.value)
      if (this.pickupLocations[idx]) {
        this.selectedPickupLocation = this.pickupLocations[idx]
        this.selectedTimeSlot = null
      }
    },
    onTimeSlotChange: function(e) {
      var idx = parseInt(e.detail.value)
      if (this.selectedPickupLocation && this.selectedPickupLocation.timeSlots && this.selectedPickupLocation.timeSlots[idx]) {
        this.selectedTimeSlot = this.selectedPickupLocation.timeSlots[idx]
      }
    },
    onServicePersonChange: function(e) {
      var idx = parseInt(e.detail.value)
      if (this.servicePersons[idx]) {
        this.selectedServicePerson = this.servicePersons[idx]
        this.selectedTimeSlot = null
      }
    },
    onOnlineSlotChange: function(e) {
      var idx = parseInt(e.detail.value)
      if (this.onlineSlots[idx]) {
        this.selectedTimeSlot = this.onlineSlots[idx]
      }
    },
    deliveryMethodLabel: function(method) {
      var map = { 1: '快递配送', 2: '到店自提', 3: '快递/自提', 4: '线上服务', 5: '线上预约' }
      return map[method] || '快递配送'
    },
    deliveryMethodHint: function(method) {
      var map = { 1: '', 2: '请选择自取地点和时间段', 3: '请选择配送方式', 4: '请选择服务者和时间', 5: '请选择预约时段' }
      return map[method] || ''
    },
    selectPickupLocation(loc) {
      this.selectedPickupLocation = loc
      this.selectedTimeSlot = null
      this.showPickupLocationModal = false
    },
    selectTimeSlot(slot) {
      this.selectedTimeSlot = slot
      this.showTimeSlotModal = false
    },
    selectServicePerson(person) {
      this.selectedServicePerson = person
      this.selectedTimeSlot = null
      this.showServicePersonModal = false
    },
    selectOnlineSlot(slot) {
      this.selectedTimeSlot = slot
      this.showOnlineSlotModal = false
    },
    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.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 that = this
      uni.request({
        url: config.api('/api/product/order/create'),
        method: 'POST',
        data: {
          items: orderItems,
          remark: this.remark,
          addressId: that.selectedAddress.id,
          purchaseInfo: that.purchaseForm,
          pointsUsed: that.pointsUsed,
          deliveryMethod: that.deliveryMethod,
          pickupLocationId: that.selectedPickupLocation ? that.selectedPickupLocation.id : null,
          timeSlotId: that.selectedTimeSlot ? that.selectedTimeSlot.id : null,
          servicePersonId: that.selectedServicePerson ? that.selectedServicePerson.id : null
        },
        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 + '&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
    },
    selectServicePerson(person) {
      this.selectedServicePerson = person
      this.selectedTimeSlot = null
      this.showServicePersonModal = false
    },
    selectOnlineSlot(slot) {
      this.selectedTimeSlot = slot
      this.showOnlineSlotModal = false
    },
    formatOnlineTime: function(timeStr) {
      if (!timeStr) return ''
      try {
        var d = parseDate(timeStr)
        if (!d) return timeStr
        return (d.getMonth() + 1) + '月' + d.getDate() + '日 ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
      } catch (e) {
        return timeStr
      }
    },
    showPickupLocationPicker: function() {
      this.showPickupLocationModal = true
    },
    showTimeSlotPicker: function() {
      if (!this.selectedPickupLocation) return
      this.showTimeSlotModal = true
    },
    showServicePersonPicker: function() {
      this.showServicePersonModal = true
    },
    showOnlineSlotPicker: function() {
      this.showOnlineSlotModal = true
    },
    selectPickupLocation(loc) {
      this.selectedPickupLocation = loc
      this.selectedTimeSlot = null
      this.showPickupLocationModal = false
    },
    selectTimeSlot(slot) {
      this.selectedTimeSlot = slot
      this.showTimeSlotModal = false
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</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-spec-desc {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 2rpx;
}
.item-supplier-name {
  font-size: 20rpx;
  color: #0EA5E9;
  display: block;
  margin-top: 2rpx;
}
.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;
}

/* ===== Member Upgrade Hint ===== */
.member-upgrade-section {
  position: relative;
}
.member-upgrade-row {
  display: flex;
  align-items: center;
}
.member-upgrade-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.member-upgrade-text {
  flex: 1;
  font-size: 26rpx;
  color: #F97316;
  font-weight: 500;
}
.member-upgrade-arrow {
  font-size: 32rpx;
  color: #F97316;
}

/* ===== Member Coupon Hint ===== */
.member-coupon-hint {
  margin-top: -10rpx;
  margin-bottom: 20rpx;
}
.member-coupon-hint-content {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border-radius: 16rpx;
  border: 1rpx solid #FED7AA;
}
.hint-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.hint-text {
  font-size: 24rpx;
  color: #C2410C;
  font-weight: 500;
}

/* ===== 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;
}

/* 配送方式选择 */
.delivery-sub-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
  margin-top: 16rpx;
}
.picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.picker-row:last-child {
  border-bottom: none;
}
.picker-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}
.picker-placeholder {
  font-size: 28rpx;
  color: #999;
  flex: 1;
}
.picker-arrow {
  font-size: 32rpx;
  color: #ccc;
  margin-left: 10rpx;
}
.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;
}
.picker-modal {
  width: 100%;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.picker-modal .picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}
.picker-modal .picker-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.picker-modal .picker-close {
  font-size: 28rpx;
  color: #999;
}
.picker-modal .picker-list {
  flex: 1;
  max-height: 50vh;
  padding: 20rpx 30rpx;
}
.picker-modal .picker-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.picker-modal .picker-item:last-child {
  border-bottom: none;
}
.picker-modal .picker-item-active {
  background: #fff7e6;
  border-radius: 12rpx;
  padding: 24rpx 16rpx;
}
.picker-modal .picker-item-left {
  flex: 1;
  min-width: 0;
}
.picker-modal .picker-item-name {
  font-size: 28rpx;
  color: #333;
  display: block;
}
.picker-modal .picker-item-addr {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
  display: block;
}
.picker-modal .picker-item-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}
.picker-modal .picker-item-price {
  font-size: 26rpx;
  color: #F97316;
  font-weight: bold;
  margin-top: 4rpx;
  display: block;
}
.picker-modal .picker-item-check {
  margin-left: 16rpx;
  color: #F97316;
  font-size: 32rpx;
}
</style>