mtsd/sqxp-wx/pages/client/order/create/create.vue

<template>
  <view class="page client-theme client-subpage">
    <view v-if="pageLoading" class="page-loading-wrap">
      <ClientSkeleton variant="detail" :rows="3" />
    </view>
    <template v-else>
    <view class="client-subpage-hero create-hero">
      <text class="client-subpage-hero__title">确认订单</text>
      <text class="client-subpage-hero__sub">核对商品、地址与支付方式</text>
    </view>
    <view class="create-body">
    <view class="address-card">
      <view class="addr-left">
        <image class="addr-icon" :src="ICON_COORDINATE" mode="aspectFit" />
      </view>
      <view class="addr-main">
        <view class="addr-top">
          <text class="addr-title">收货地址</text>
          <text class="addr-edit" @click.stop="goSelectAddress">修改 ›</text>
        </view>
        <view v-if="selectedAddress" class="addr-content">
          <view class="addr-person-row">
            <text class="addr-person-name">{{ selectedAddress.contactPerson }}</text>
            <text class="addr-phone">{{ selectedAddress.contactPhone }}</text>
          </view>
          <text class="addr-detail">{{ fullAddress(selectedAddress) }}</text>
        </view>
        <view v-else class="addr-empty">
          <text class="addr-empty-text">请先添加收货地址</text>
        </view>
      </view>
    </view>
    <view class="address-card">
      <view class="addr-main">
        <view class="addr-top">
          <text class="addr-title">支付方式</text>
        </view>
        <radio-group class="pay-group" @change="onPaymentMethodChange">
          <label class="pay-row">
            <text class="pay-text">线上支付({{ autoCancelMinutesText }}分钟未支付，自动取消)</text>
            <radio value="online" :checked="paymentMethod === 'online'" color="#07c160" />
          </label>
          <label class="pay-row">
            <text class="pay-text">线下支付</text>
            <radio value="offline" :checked="paymentMethod === 'offline'" color="#07c160" />
          </label>
        </radio-group>
      </view>
    </view>

    <view class="section">
      <view class="section-title"><text>商品明细</text></view>

      <view v-if="cartItemsForOrder.length === 0" class="empty-box">
        <text>购物车为空</text>
      </view>

      <view v-else>
        <view v-for="item in cartItemsForOrder" :key="item.id" class="cart-item order-line">
          <view class="item-image sq-product-thumb sq-product-thumb--sm" @click="goProductView(item.productId)">
            <ClientImageLoader :src="item.imageUrl || IMG_DEFAULT_PRODUCT" mode="aspectFill" radius="20rpx" />
          </view>

          <view class="item-info" @click="goProductView(item.productId)">
            <text class="item-name">{{ item.productName }}</text>
            <text class="item-unit">{{ formatMeasureText(item.measureValue, item.unitName) }}</text>

            <view class="item-bottom">
              <text class="item-price">¥{{ formatPrice(item.price) }}</text>
              <view class="quantity-control">
                <view class="qty-btn" @click.stop="updateQuantity(item.id, -1)">
                  <text>-</text>
                </view>
                <text class="qty-num">{{ item.quantity }}</text>
                <view class="qty-btn" @click.stop="updateQuantity(item.id, 1)">
                  <text>+</text>
                </view>
              </view>
            </view>
          </view>

          <view class="item-delete" @click.stop="removeItem(item.id)">
            <image class="item-delete-icon" :src="ICON_DELETE" mode="aspectFit" />
          </view>
        </view>

        <view class="total-row">
          <text>合计(元)</text>
          <text class="total">¥{{ totalText }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title"><text>备注</text></view>
      <textarea
        v-model="remark"
        class="remark"
        placeholder="选填：配送说明等"
        maxlength="200"
      />
    </view>
      </view>

    <view class="footer">
      <view class="footer-sum">
        <text class="label">应付(元)</text>
        <text class="price">¥{{ totalText }}</text>
      </view>
      <button
        class="submit-btn"
        :class="{ 'is-disabled': !canSubmit }"
        @click="submitOrder"
      >
        {{ submitting ? '提交中...' : '提交订单' }}
      </button>
    </view>

    <ProductDetailOverlay
      :show="showProductOverlay"
      :product-id="overlayProductId"
      bottom-mode="cart"
      @close="closeProductOverlay"
    />
    </template>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import { request, parseResponseJson } from '@/utils/request'
import { formatYuan } from '@/utils/format'
import ProductDetailOverlay from '@/components/client/product-detail-overlay.vue'
import ClientSkeleton from '@/components/client/client-skeleton.vue'
import ClientImageLoader from '@/components/client/client-image-loader.vue'
import { IMG_DEFAULT_PRODUCT, staticAssetUrl } from '@/utils/staticAsset'
import { on as busOn, off as busOff } from '@/utils/bus'
import { ensurePriceRealtimeConnected, checkActivePriceVersionOnce } from '@/utils/price-realtime'
import { PRODUCT_DETAIL_ENTRY_ENABLED } from '@/utils/product-detail-entry.js'

const userStore = useUserStore()
const cartStore = useCartStore()

const addresses = ref([])
const selectedAddressId = ref('')
const SELECTED_DELIVERY_ADDRESS_ID_KEY = 'sq_selected_delivery_address_id'
const selectedAddress = computed(() => {
  const byId = addresses.value.find((a) => a.id === selectedAddressId.value)
  if (byId) return byId
  return addresses.value.find((a) => a.isDefault) || addresses.value[0] || null
})
const remark = ref('')
const paymentMethod = ref('offline')
const submitting = ref(false)
const pageLoading = ref(true)
const autoCancelMinutes = ref(30)

const selectedCartIds = ref([])
const hasSelectedCartIdsParam = ref(false)
// 确认订单页“删除”仅影响本页展示，不影响购物车
const excludedCartIds = ref(new Set())
const cartItemsForOrder = computed(() => {
  const excluded = excludedCartIds.value
  if (!hasSelectedCartIdsParam.value) return cartStore.items.filter((i) => !excluded.has(i.id))
  const set = new Set(selectedCartIds.value)
  return cartStore.items.filter((i) => set.has(i.id) && !excluded.has(i.id))
})
const totalText = computed(() => formatYuan(cartItemsForOrder.value.reduce((sum, i) => sum + i.amount, 0)))
const autoCancelMinutesText = computed(() => String(autoCancelMinutes.value || 30))
const canSubmit = computed(() => !!selectedAddressId.value && cartItemsForOrder.value.length > 0 && !submitting.value)
const ICON_COORDINATE = staticAssetUrl('coordinate.svg')
const ICON_DELETE = staticAssetUrl('delete.svg')

function onPaymentMethodChange(e) {
  const value = (e && e.detail && e.detail.value ? String(e.detail.value) : '').toString()
  if (value === 'online' || value === 'offline') paymentMethod.value = value
}

function formatPrice(price) {
  return formatYuan(price)
}

function formatMeasureText(measureValue, unitName) {
  const unitText = (unitName || '').trim()
  if (measureValue == null || measureValue === '') {
    return unitText ? `- ${unitText}` : '-'
  }
  const num = Number(measureValue)
  if (!Number.isNaN(num)) {
    const measureText = String(num).replace(/\.?0+$/, '')
    return unitText ? `${measureText} ${unitText}` : measureText
  }
  const measureText = String(measureValue).trim()
  return unitText ? `${measureText} ${unitText}` : measureText || '-'
}

function fullAddress(addr) {
  return `${addr.province || ''}${addr.city || ''}${addr.district || ''}${addr.detailAddress || ''}`
}

async function loadAddresses() {
  try {
    const res = await request({
      url: '/mini/client/addresses',
      method: 'GET',
      data: { page: 1, pageSize: 100 }
    })
    const body = parseResponseJson(res)
    if (body.code !== 200) return
    const payload = body.data
    const list = Array.isArray(payload)
      ? payload
      : Array.isArray(payload && payload.list)
        ? payload.list
        : []
    addresses.value = list
    const storedId = uni.getStorageSync(SELECTED_DELIVERY_ADDRESS_ID_KEY) || ''
    const storedAddr = storedId ? list.find((a) => a.id === storedId) : null
    const def = list.find((a) => a.isDefault) || list[0] || null
    selectedAddressId.value = (storedAddr && storedAddr.id) || (def && def.id) || ''
    if (selectedAddressId.value) {
      uni.setStorageSync(SELECTED_DELIVERY_ADDRESS_ID_KEY, selectedAddressId.value)
    }
  } catch {
    uni.showToast({ title: '加载地址失败', icon: 'none' })
  }
}

async function loadAutoCancelMinutes() {
  try {
    const res = await request({
      url: '/web/admin/system-config/get/auto_cancel_minutes',
      method: 'GET'
    })
    const body = parseResponseJson(res)
    const raw = body && body.code === 200 && body.data ? body.data.value : null
    const minutes = Number(raw)
    if (Number.isFinite(minutes) && minutes > 0) {
      autoCancelMinutes.value = Math.floor(minutes)
    } else {
      autoCancelMinutes.value = 30
    }
  } catch {
    autoCancelMinutes.value = 30
  }
}

function goSelectAddress() {
  uni.navigateTo({ url: '/pages/client/address/select' })
}

async function submitOrder() {
  if (submitting.value) return
  if (cartItemsForOrder.value.length === 0) {
    uni.showToast({ title: '购物车为空', icon: 'none' })
    return
  }
  if (!selectedAddressId.value) {
    uni.showToast({ title: '请选择收货地址', icon: 'none' })
    return
  }
  submitting.value = true
  // 以“当前确认页剩余商品”为准（支持确认页临时删除）
  const orderedCartIds = cartItemsForOrder.value.map(i => i.id)
  try {
    let res
    if (hasSelectedCartIdsParam.value) {
      const plRes = await request({ url: '/mini/client/price-list/current', method: 'GET' })
      const plBody = parseResponseJson(plRes)
      const priceListId = plBody.code === 200 ? (plBody.data && plBody.data.id ? plBody.data.id : '') : ''
      if (!priceListId) {
        uni.showToast({ title: '当前区域无生效价格清单', icon: 'none' })
        return
      }
      res = await request({
        url: '/mini/client/orders',
        method: 'POST',
        data: {
          priceListId,
          addressId: selectedAddressId.value,
          paymentMethod: paymentMethod.value,
          remark: remark.value || undefined,
          items: cartItemsForOrder.value.map((i) => ({
            productId: i.productId,
            quantity: i.quantity
          }))
        }
      })
    } else {
      res = await request({
        url: '/mini/client/orders/from-cart',
        method: 'POST',
        data: {
          addressId: selectedAddressId.value,
          paymentMethod: paymentMethod.value,
          remark: remark.value || undefined
        }
      })
    }
    const body = parseResponseJson(res)
    if (body.code === 200 && body.data && body.data.orderId) {
      if (hasSelectedCartIdsParam.value) {
        await cartStore.batchRemove(orderedCartIds)
      } else {
        await cartStore.fetchCart()
      }
      uni.redirectTo({
        url: `/pages/client/order/pay/pay?id=${encodeURIComponent(body.data.orderId)}&from=create`
      })
    } else {
      uni.showToast({ title: body.message || '下单失败', icon: 'none' })
    }
  } catch {
    uni.showToast({ title: '网络异常', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

function goAddAddress() {
  uni.navigateTo({ url: '/pages/client/address/address' })
}

async function updateQuantity(cartId, delta) {
  const item = cartStore.items.find((i) => i.id === cartId)
  if (!item) return

  const newQuantity = item.quantity + delta
  if (newQuantity <= 0) {
    const next = new Set(excludedCartIds.value)
    next.add(cartId)
    excludedCartIds.value = next
    return
  }

  await cartStore.updateQuantity(cartId, newQuantity)
}

async function removeItem(cartId) {
  uni.showModal({
    title: '提示',
    content: '确定删除该商品？',
    success: async (res) => {
      if (!res.confirm) return
      const next = new Set(excludedCartIds.value)
      next.add(cartId)
      excludedCartIds.value = next
    }
  })
}

// 商品详情弹窗
const showProductOverlay = ref(false)
const overlayProductId = ref('')
function goProductView(productId) {
  if (!PRODUCT_DETAIL_ENTRY_ENABLED) return
  if (!productId) return
  overlayProductId.value = productId
  showProductOverlay.value = true
}
function closeProductOverlay() {
  showProductOverlay.value = false
}

onMounted(async () => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: '/pages/login/login' })
    return
  }
  if (!userStore.isClient) {
    uni.showToast({ title: '仅客户可访问', icon: 'none' })
    setTimeout(() => userStore.navigateToHome(), 1200)
    return
  }
  try {
    await cartStore.fetchCart()
    if (cartStore.isEmpty) {
      uni.showToast({ title: '请先加购商品', icon: 'none' })
      setTimeout(() => uni.switchTab({ url: '/pages/client/home/home' }), 800)
      return
    }
    await Promise.all([loadAddresses(), loadAutoCancelMinutes()])
  } finally {
    pageLoading.value = false
  }
})

onShow(() => {
  userStore.checkLoginStatus()
  // 返回收货地址选择页后，刷新当前选中地址显示
  if (!userStore.isLoggedIn) return
  if (!userStore.isClient) return
  void ensurePriceRealtimeConnected()
  void checkActivePriceVersionOnce()
  void cartStore.fetchCart()
  void loadAddresses()
})

onLoad((options) => {
  const raw = options?.cartIds
  if (typeof raw === 'string') {
    let decoded = raw.trim()
    for (let i = 0; i < 2; i += 1) {
      try {
        const next = decodeURIComponent(decoded)
        if (next === decoded) break
        decoded = next
      } catch {
        break
      }
    }
    hasSelectedCartIdsParam.value = true
    selectedCartIds.value = decoded
      .split(',')
      .map(s => s.trim())
      .filter(Boolean)
  } else {
    hasSelectedCartIdsParam.value = false
    selectedCartIds.value = []
  }
  excludedCartIds.value = new Set()
})

const onPriceListUpdated = () => {
  // 与首页/购物车一致：价格清单更新后，确认订单明细与金额应立即重算
  void cartStore.fetchCart()
}

onMounted(() => {
  busOn('price_list_updated', onPriceListUpdated)
  uni.$on && uni.$on('price_list_updated', onPriceListUpdated)
})

onUnmounted(() => {
  busOff('price_list_updated', onPriceListUpdated)
  uni.$off && uni.$off('price_list_updated', onPriceListUpdated)
})
</script>



<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--c-bg);
  padding-bottom: 0;
  box-sizing: border-box;
}

.page-loading-wrap {
  flex: 1;
  min-height: 0;
}

.create-scroll {
  flex: 1;
  min-height: 0;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

.create-body {
  padding: 24rpx 32rpx;
  padding-bottom: calc(220rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(220rpx + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.section {
  background: var(--c-card);
  border-radius: var(--c-radius-card);
  border: 1rpx solid var(--c-border);
  padding: 24rpx;
  margin-bottom: 24rpx;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  .link {
    font-size: 26rpx;
    color: var(--c-brand-green);
  }
}

.address-card {
  display: flex;
  background: var(--c-card);
  border-radius: var(--c-radius-card);
  border: 1rpx solid var(--c-border);
  padding: 22rpx 20rpx;
  margin-bottom: 18rpx;
  box-shadow: none;
  box-sizing: border-box;

  .addr-left {
    width: 56rpx;
    display: flex;
    justify-content: center;
    padding-top: 4rpx;

    .addr-icon {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .addr-main {
    flex: 1;
    min-width: 0;
  }

  .addr-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;

    .addr-title {
      font-size: 28rpx;
      color: var(--c-text);
      font-weight: 700;
    }

    .addr-edit {
      font-size: 24rpx;
      color: var(--c-brand-green);
    }
  }

  .addr-content {
    .addr-person-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12rpx;
      margin-bottom: 6rpx;
    }

    .addr-person-name {
      font-size: 26rpx;
      color: var(--c-text);
    }

    .addr-phone {
      font-size: 26rpx;
      color: var(--c-text);
    }

    .addr-detail {
      display: block;
      font-size: 24rpx;
      color: var(--c-muted);
      line-height: 1.4;
      word-break: break-all;
    }
  }

  .addr-empty {
    padding: 12rpx 0 6rpx;

    .addr-empty-text {
      font-size: 26rpx;
      color: var(--c-muted);
    }
  }
}

.cart-item {
  display: flex;
  padding: 20rpx 0;
  position: relative;
  border-bottom: 1rpx solid rgba(220, 235, 228, 0.65);

  &:last-child {
    border-bottom: none;
  }
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: linear-gradient(145deg, #f4fbf8, #e4f6ef);
  flex-shrink: 0;

  image {
    width: 100%;
    height: 100%;
  }
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
  min-width: 0;
  padding-right: 20rpx;
}

.item-name {
  display: block;
  font-size: 28rpx;
  color: var(--c-text);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
  padding-right: 52rpx;
}

.item-unit {
  font-size: 24rpx;
  color: var(--c-muted);
  margin-top: 8rpx;
  padding-right: 52rpx;
}

.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.item-price {
  font-size: 32rpx;
  color: var(--c-danger);
  font-weight: bold;
}

.quantity-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;

  .qty-btn {
    width: 48rpx;
    height: 48rpx;
    border: 2rpx solid #b9decf;
    border-radius: 999rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: var(--c-brand-green);
    background: #ffffff;

    &:active {
      background: rgba(220, 235, 228, 0.45);
    }
  }

  .qty-num {
    min-width: 60rpx;
    text-align: center;
    font-size: 28rpx;
    color: var(--c-text);
  }
}

.item-delete {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  padding: 10rpx;
}

.item-delete-icon {
  width: 36rpx;
  height: 36rpx;
}
.empty-box {
  padding: 40rpx 0;
  text-align: center;
  color: var(--c-muted);
  font-size: 26rpx;
}
.mini-btn {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: var(--c-brand-green);
  background: var(--c-brand-green-soft);
}
.addr-row {
  display: flex;
  align-items: flex-start;
  padding: 16rpx 0;
  border-bottom: 1rpx solid rgba(220, 235, 228, 0.65);
}
.addr-info {
  flex: 1;
  margin-left: 12rpx;
}
.addr-line {
  font-size: 28rpx;
  color: var(--c-text);
  display: block;
}
.addr-detail {
  font-size: 24rpx;
  color: #909399;
  margin-top: 8rpx;
  display: block;
}
.line-item {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid rgba(220, 235, 228, 0.65);
}
.line-main .name {
  font-size: 28rpx;
  color: var(--c-text);
  display: block;
}
.line-main .sub {
  font-size: 24rpx;
  color: #909399;
  margin-top: 6rpx;
  display: block;
}
.amt {
  font-size: 28rpx;
  color: var(--c-text);
}
.total-row {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  font-size: 28rpx;
}
.total {
  color: var(--c-danger);
  font-weight: bold;
  font-size: 32rpx;
}
.remark {
  width: 100%;
  min-height: 120rpx;
  font-size: 26rpx;
  padding: 16rpx;
  background: #f8fcfa;
  border: 1rpx solid rgba(220, 235, 228, 0.65);
  border-radius: 20rpx;
  box-sizing: border-box;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1rpx solid var(--c-border);
  box-shadow: none;
  z-index: 20;
}
.footer-sum {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  min-width: 0;
}
.footer-sum .label {
  font-size: 26rpx;
  color: var(--c-muted);
}
.footer-sum .price {
  font-size: 36rpx;
  color: var(--c-danger);
  font-weight: bold;
}
.submit-btn {
  font-size: 28rpx;
  padding: 0 48rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  margin-left: auto;
  width: auto;
  flex: 0 0 auto;
  border: none;
  box-shadow: none;
  color: #ffffff;
  background: linear-gradient(145deg, var(--c-barley-yellow), #e4b458);
}

.submit-btn::after {
  border: none;
}

:deep(.submit-btn.van-button--primary) {
  background: linear-gradient(145deg, var(--c-barley-yellow), #e4b458) !important;
  color: #ffffff !important;
  border-color: #d6a343 !important;
}

:deep(.submit-btn.van-button--primary.van-button--disabled) {
  background: linear-gradient(145deg, var(--c-barley-yellow), #e4b458) !important;
  color: #ffffff !important;
  border-color: #d6a343 !important;
  opacity: 0.6;
}
.pay-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.submit-btn.is-disabled,
.submit-btn[disabled] {
  opacity: 0.6;
}

.pay-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10rpx 0;
  box-sizing: border-box;

  &:last-child {
    padding-bottom: 0;
  }

  &:first-child {
    padding-top: 0;
  }
}

.pay-text {
  flex: 1;
  min-width: 0;
  padding-right: 24rpx;
  font-size: 28rpx;
  color: #303133;
  line-height: 1.45;
}
</style>