feat: 补齐预约下单售后链路，并接入礼品卡结算

立即购买先选时段再结算，免物流地址，售后按数量退款；同步接入礼品卡入口。

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/order/afterSales/afterSalesDetail.vue

@@ -31,7 +31,7 @@
             <view class="goods-info">
               <view class="goods-title">{{ getGoodsName(item) }}</view>
               <view class="goods-price">
-                <text>￥{{ unitPrice(applyInfo.applyRefundPrice) }}</text>
+                <text>￥{{ unitPrice(displayRefundPrice) }}</text>
                 <text class="num">购买数量: {{ item.num }}</text>
               </view>
             </view>
@@ -164,11 +164,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, getCurrentInstance, watch } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useStore } from '@/store'
 import { unitPrice, parseGoodsImageUrl } from '@/utils/filters.js'
 import { getAfterSaleReason, applyReturn, getAfterSaleInfo } from '@/api/after-sale'
+import { isAppointmentOrder } from '@/utils/goodsType.js'
+import { computePartialRefundPrice } from '@/utils/appointmentGoods.js'
 import { handleUploadAfterRead } from '@/utils/uploadHelper.js'
 import storage from '@/utils/storage.js'
 
@@ -185,6 +187,23 @@ const reasonSelectShow = ref(false)
 const reasonList = ref<any[]>([])
 const applyInfo = ref<any>({})
 const uToast = ref<any>(null)
+const isAppointmentAfterSale = ref(false)
+
+const displayRefundPrice = computed(() => {
+  if (!isAppointmentAfterSale.value) return applyInfo.value?.applyRefundPrice
+  return computePartialRefundPrice(applyInfo.value, form.num)
+})
+
+watch(
+  () => form.num,
+  () => {
+    if (!isAppointmentAfterSale.value) return
+    applyInfo.value = {
+      ...applyInfo.value,
+      displayRefundPrice: displayRefundPrice.value,
+    }
+  }
+)
 
 const form = reactive({
   orderItemSn: '',
@@ -221,6 +240,7 @@ onLoad((options) => {
   uni.setNavigationBarTitle({ title: navTitle })
   sn.value = options?.sn || ''
   sku.value = storage.getAfterSaleData()
+  isAppointmentAfterSale.value = isAppointmentOrder(sku.value?.orderType)
   form.orderItemSn = options?.sn || ''
   form.skuId = sku.value.skuId
   form.num = sku.value.num
@@ -271,8 +291,12 @@ function init(orderItemSn: string) {
         icon: 'none',
       })
     } else {
-      applyInfo.value = response.data.result
-      form.accountType = response.data.result.accountType
+      const result = response.data.result
+      applyInfo.value = {
+        ...result,
+        totalNum: result.orderItemNum || sku.value?.num,
+      }
+      form.accountType = result.accountType
     }
   })
 }
@@ -294,6 +318,12 @@ function reasonSelectConfirm(val: any) {
 
 function valChange(e: { value: number }) {
   form.num = e.value
+  if (isAppointmentAfterSale.value) {
+    applyInfo.value = {
+      ...applyInfo.value,
+      applyRefundPrice: computePartialRefundPrice(applyInfo.value, form.num),
+    }
+  }
 }
 
 function onUploadAfterRead(event: any) {
@@ -320,7 +350,9 @@ function onSubmit() {
   uni.showLoading({ title: '加载中' })
   form.accountType = applyInfo.value.accountType
   form.refundWay = applyInfo.value.refundWay
-  form.applyRefundPrice = applyInfo.value.applyRefundPrice
+  form.applyRefundPrice = isAppointmentAfterSale.value
+    ? computePartialRefundPrice(applyInfo.value, form.num)
+    : applyInfo.value.applyRefundPrice
 
   applyReturn(sn.value, form).then((resp) => {
     hideLoadingIfNeeded()

pages/order/appointment/appointmentCheckout.vue

@@ -0,0 +1,563 @@
+<template>
+  <view class="page">
+    <view class="section">
+      <view class="section-title">预约日期</view>
+      <picker mode="date" :value="slotDate" :start="minDate" :end="maxDate" @change="onDateChange">
+        <view class="picker-row">
+          <text>{{ slotDate || '请选择日期' }}</text>
+          <u-icon name="arrow-right" color="#ccc" size="16" />
+        </view>
+      </picker>
+    </view>
+
+    <view class="section">
+      <view class="section-title">预约时段</view>
+      <view v-if="loadingSlots" class="tip">加载时段中...</view>
+      <view v-else-if="!slots.length" class="tip">该日期暂无可预约时段</view>
+      <view v-else class="slot-list">
+        <view
+          v-for="slot in slots"
+          :key="slot.id"
+          class="slot-item"
+          :class="{ active: selectedSlot && selectedSlot.id === slot.id }"
+          @click="selectSlot(slot)"
+        >
+          {{ slot.slotStartTime }}-{{ slot.slotEndTime }}
+          <text v-if="slot.showRemainingQty && slot.availableQty != null" class="slot-qty">
+            余{{ slot.availableQty }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <view class="section" v-if="serviceModes.length > 1">
+      <view class="section-title">服务方式</view>
+      <view class="mode-list">
+        <view
+          v-for="mode in serviceModes"
+          :key="mode"
+          class="mode-item"
+          :class="{ active: serviceMode === mode }"
+          @click="serviceMode = mode"
+        >
+          {{ SERVICE_MODE_LABEL[mode] || mode }}
+        </view>
+      </view>
+    </view>
+
+    <view class="section">
+      <view class="section-title">联系人</view>
+      <u-input v-model="contactName" placeholder="请输入联系人姓名" border="surround" />
+      <view class="input-gap" />
+      <u-input v-model="contactPhone" placeholder="请输入联系电话" type="number" border="surround" />
+    </view>
+
+    <view class="section" v-if="serviceMode === SERVICE_MODE.ON_SITE">
+      <view class="section-title">服务地址</view>
+      <u-input
+        v-model="serviceAddress"
+        type="textarea"
+        placeholder="请输入上门服务地址"
+        border="surround"
+        height="100"
+      />
+    </view>
+
+    <view class="section" v-for="(group, gi) in formAnswers" :key="gi" v-show="formFields.length">
+      <view class="section-title">
+        {{ formAnswers.length > 1 ? `补充信息（${gi + 1}/${formAnswers.length}）` : '补充信息' }}
+      </view>
+      <view v-for="field in formFields" :key="field.fieldKey" class="form-field">
+        <view v-if="field.richText" class="rich-text" v-html="field.richTextContent" />
+        <template v-else>
+          <view class="field-label">
+            {{ field.fieldLabel }}
+            <text v-if="field.required" class="required">*</text>
+          </view>
+          <view v-if="field.fieldType === 'CHECKBOX'" class="opt-list">
+            <view
+              v-for="opt in field.options"
+              :key="opt.value"
+              class="opt-item"
+              @click="toggleCheckbox(gi, field, opt.value)"
+            >
+              <text class="opt-mark">{{ isChecked(group[field.fieldKey], opt.value) ? '☑' : '☐' }}</text>
+              {{ opt.label }}
+            </view>
+          </view>
+          <view v-else-if="field.fieldType === 'RADIO'" class="opt-list">
+            <view
+              v-for="opt in field.options"
+              :key="opt.value"
+              class="opt-item"
+              @click="setFormAnswer(gi, field.fieldKey, opt.value)"
+            >
+              <text class="opt-mark">{{ group[field.fieldKey] === opt.value ? '●' : '○' }}</text>
+              {{ opt.label }}
+            </view>
+          </view>
+          <picker
+            v-else-if="field.fieldType === 'SELECT'"
+            :range="field.optionLabels"
+            @change="(e) => onSelectChange(gi, field, e)"
+          >
+            <view class="picker-row">
+              <text>{{ optionLabel(field, group[field.fieldKey]) || field.hint }}</text>
+              <text class="arrow">›</text>
+            </view>
+          </picker>
+          <picker
+            v-else-if="field.fieldType === 'DATE'"
+            mode="date"
+            :value="group[field.fieldKey]"
+            @change="(e) => setFormAnswer(gi, field.fieldKey, e.detail.value)"
+          >
+            <view class="picker-row">
+              <text>{{ group[field.fieldKey] || field.hint }}</text>
+              <text class="arrow">›</text>
+            </view>
+          </picker>
+          <view v-else-if="field.fieldType === 'DATE_RANGE'" class="range-row">
+            <picker mode="date" :value="rangePart(group[field.fieldKey], 0)" @change="(e) => setRangePart(gi, field.fieldKey, 0, e.detail.value)">
+              <view class="picker-row"><text>{{ rangePart(group[field.fieldKey], 0) || '开始日期' }}</text></view>
+            </picker>
+            <text class="range-sep">至</text>
+            <picker mode="date" :value="rangePart(group[field.fieldKey], 1)" @change="(e) => setRangePart(gi, field.fieldKey, 1, e.detail.value)">
+              <view class="picker-row"><text>{{ rangePart(group[field.fieldKey], 1) || '结束日期' }}</text></view>
+            </picker>
+          </view>
+          <picker
+            v-else-if="field.fieldType === 'TIME'"
+            mode="time"
+            :value="group[field.fieldKey]"
+            @change="(e) => setFormAnswer(gi, field.fieldKey, e.detail.value)"
+          >
+            <view class="picker-row">
+              <text>{{ group[field.fieldKey] || field.hint }}</text>
+              <text class="arrow">›</text>
+            </view>
+          </picker>
+          <view v-else-if="field.fieldType === 'TIME_RANGE'" class="range-row">
+            <picker mode="time" :value="rangePart(group[field.fieldKey], 0)" @change="(e) => setRangePart(gi, field.fieldKey, 0, e.detail.value)">
+              <view class="picker-row"><text>{{ rangePart(group[field.fieldKey], 0) || '开始时间' }}</text></view>
+            </picker>
+            <text class="range-sep">至</text>
+            <picker mode="time" :value="rangePart(group[field.fieldKey], 1)" @change="(e) => setRangePart(gi, field.fieldKey, 1, e.detail.value)">
+              <view class="picker-row"><text>{{ rangePart(group[field.fieldKey], 1) || '结束时间' }}</text></view>
+            </picker>
+          </view>
+          <picker
+            v-else-if="field.fieldType === 'CITY'"
+            mode="region"
+            @change="(e) => onCityChange(gi, field, e)"
+          >
+            <view class="picker-row">
+              <text>{{ group[field.fieldKey] || field.hint }}</text>
+              <text class="arrow">›</text>
+            </view>
+          </picker>
+          <view v-else-if="field.fieldType === 'IMAGE'" class="image-row">
+            <view
+              v-for="(url, ui) in group[field.fieldKey] || []"
+              :key="ui"
+              class="image-thumb"
+              @click="previewImage(group[field.fieldKey], ui)"
+            >
+              <image :src="url" mode="aspectFill" />
+            </view>
+            <view
+              v-if="(group[field.fieldKey] || []).length < field.maxUploadCount"
+              class="image-add"
+              @click="chooseImages(gi, field)"
+            >+</view>
+          </view>
+          <u-input
+            v-else
+            :model-value="group[field.fieldKey]"
+            :placeholder="field.hint"
+            border="surround"
+            :type="field.contentType === 'NUMBER' ? 'number' : 'text'"
+            @update:model-value="(val) => setFormAnswer(gi, field.fieldKey, val)"
+          />
+        </template>
+      </view>
+    </view>
+
+    <view class="section notice">
+      <view class="section-title">预约须知</view>
+      <text class="notice-text">{{ cancelNotice }}</text>
+    </view>
+
+    <view class="footer">
+      <u-button type="primary" shape="circle" :loading="submitting" @click="submit">
+        确认并去支付
+      </u-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { listSlots, bindCheckout, getGoodsExt } from '@/api/appointment.js'
+import {
+  SERVICE_MODE,
+  SERVICE_MODE_LABEL,
+  parseServiceModes,
+  buildBookableDates,
+  buildCancelNotice,
+  formatDate,
+  parseFormFields,
+  buildFormGroups,
+  isBlankFormValue,
+  validateTextContent,
+} from '@/utils/appointmentGoods.js'
+
+const skuId = ref('')
+const goodsId = ref('')
+const num = ref(1)
+const goodsExt = ref<any>(null)
+const slotDate = ref('')
+const slots = ref<any[]>([])
+const selectedSlot = ref<any>(null)
+const serviceModes = ref<string[]>([SERVICE_MODE.IN_STORE])
+const serviceMode = ref(SERVICE_MODE.IN_STORE)
+const contactName = ref('')
+const contactPhone = ref('')
+const serviceAddress = ref('')
+const loadingSlots = ref(false)
+const submitting = ref(false)
+const bookableDates = ref<string[]>([])
+const formFields = ref<any[]>([])
+const formAnswers = ref<Record<string, any>[]>([])
+
+const cancelNotice = computed(() => buildCancelNotice(goodsExt.value))
+const minDate = computed(() => bookableDates.value[0] || formatDate(new Date()))
+const maxDate = computed(() => {
+  const list = bookableDates.value
+  return list.length ? list[list.length - 1] : minDate.value
+})
+
+onLoad((options) => {
+  skuId.value = options?.skuId || ''
+  goodsId.value = options?.goodsId || ''
+  num.value = Number(options?.num) || 1
+})
+
+onMounted(async () => {
+  if (!goodsId.value) return
+  try {
+    const res = await getGoodsExt(goodsId.value)
+    goodsExt.value = res.data?.result || null
+    serviceModes.value = parseServiceModes(goodsExt.value)
+    serviceMode.value = serviceModes.value[0] || SERVICE_MODE.IN_STORE
+    bookableDates.value = buildBookableDates(goodsExt.value)
+    slotDate.value = bookableDates.value[0] || formatDate(new Date())
+    formFields.value = parseFormFields(goodsExt.value?.systemFormSnapshot)
+    formAnswers.value = buildFormGroups(goodsExt.value, num.value)
+    await loadSlots()
+  } catch {
+    bookableDates.value = buildBookableDates(null)
+    slotDate.value = bookableDates.value[0] || formatDate(new Date())
+  }
+})
+
+watch(slotDate, () => {
+  selectedSlot.value = null
+  loadSlots()
+})
+
+async function loadSlots() {
+  if (!skuId.value || !slotDate.value) return
+  loadingSlots.value = true
+  try {
+    const res = await listSlots(skuId.value, slotDate.value)
+    slots.value = res.data?.result || []
+  } catch {
+    slots.value = []
+  } finally {
+    loadingSlots.value = false
+  }
+}
+
+function onDateChange(e: any) {
+  slotDate.value = e.detail?.value || ''
+}
+
+function selectSlot(slot: any) {
+  if (!slot?.availableQty || slot.availableQty <= 0) {
+    uni.showToast({ title: '该时段已满', icon: 'none' })
+    return
+  }
+  selectedSlot.value = slot
+}
+
+function setFormAnswer(groupIndex: number, fieldKey: string, value: any) {
+  const next = [...formAnswers.value]
+  next[groupIndex] = { ...next[groupIndex], [fieldKey]: value }
+  formAnswers.value = next
+}
+
+function isChecked(value: any, opt: string) {
+  return Array.isArray(value) && value.includes(opt)
+}
+
+function toggleCheckbox(groupIndex: number, field: any, opt: string) {
+  const current = formAnswers.value[groupIndex]?.[field.fieldKey]
+  const list = Array.isArray(current) ? [...current] : []
+  const idx = list.indexOf(opt)
+  if (idx >= 0) list.splice(idx, 1)
+  else list.push(opt)
+  setFormAnswer(groupIndex, field.fieldKey, list)
+}
+
+function optionLabel(field: any, value: string) {
+  return field.options?.find((item: any) => item.value === value)?.label || value
+}
+
+function onSelectChange(groupIndex: number, field: any, e: any) {
+  const idx = Number(e.detail?.value)
+  const opt = field.options?.[idx]
+  setFormAnswer(groupIndex, field.fieldKey, opt?.value || '')
+}
+
+function rangePart(value: string, index: number) {
+  return String(value || '').split('~')[index] || ''
+}
+
+function setRangePart(groupIndex: number, fieldKey: string, index: number, part: string) {
+  const current = String(formAnswers.value[groupIndex]?.[fieldKey] || '').split('~')
+  current[index] = part
+  if (!current[0]) current[0] = ''
+  if (!current[1]) current[1] = ''
+  setFormAnswer(groupIndex, fieldKey, `${current[0]}~${current[1]}`)
+}
+
+function onCityChange(groupIndex: number, field: any, e: any) {
+  const parts = e.detail?.value || []
+  let depth = 3
+  if (field.cityLevel === 'PROVINCE_CITY') depth = 2
+  setFormAnswer(groupIndex, field.fieldKey, parts.slice(0, depth).join(' '))
+}
+
+function previewImage(list: string[], index: number) {
+  uni.previewImage({ urls: list, current: list[index] })
+}
+
+function chooseImages(groupIndex: number, field: any) {
+  const current = Array.isArray(formAnswers.value[groupIndex]?.[field.fieldKey])
+    ? [...formAnswers.value[groupIndex][field.fieldKey]]
+    : []
+  const remain = Math.max((field.maxUploadCount || 1) - current.length, 0)
+  if (!remain) return
+  uni.chooseImage({
+    count: remain,
+    success: (res) => {
+      setFormAnswer(groupIndex, field.fieldKey, current.concat(res.tempFilePaths || []))
+    },
+  })
+}
+
+function validate() {
+  if (!selectedSlot.value) {
+    uni.showToast({ title: '请选择预约时段', icon: 'none' })
+    return false
+  }
+  if (!contactName.value.trim()) {
+    uni.showToast({ title: '请填写联系人', icon: 'none' })
+    return false
+  }
+  if (!contactPhone.value.trim()) {
+    uni.showToast({ title: '请填写联系电话', icon: 'none' })
+    return false
+  }
+  if (serviceMode.value === SERVICE_MODE.ON_SITE && !serviceAddress.value.trim()) {
+    uni.showToast({ title: '请填写服务地址', icon: 'none' })
+    return false
+  }
+  for (const field of formFields.value) {
+    if (field.richText) continue
+    for (const group of formAnswers.value) {
+      const val = group?.[field.fieldKey]
+      if (field.required && isBlankFormValue(val)) {
+        uni.showToast({ title: `请填写${field.fieldLabel}`, icon: 'none' })
+        return false
+      }
+      if (field.fieldType === 'TEXT' && !validateTextContent(field, val)) {
+        uni.showToast({ title: `请填写正确的${field.fieldLabel}`, icon: 'none' })
+        return false
+      }
+    }
+  }
+  return true
+}
+
+async function submit() {
+  if (!validate()) return
+  submitting.value = true
+  try {
+    const slot = selectedSlot.value
+    const checkoutPayload = {
+      skuId: skuId.value,
+      slotStockId: slot.id,
+      serviceMode: serviceMode.value,
+      slotDate: slotDate.value,
+      slotStartTime: slot.slotStartTime,
+      slotEndTime: slot.slotEndTime,
+      contactName: contactName.value.trim(),
+      contactPhone: contactPhone.value.trim(),
+      serviceAddressSnapshot:
+        serviceMode.value === SERVICE_MODE.ON_SITE ? serviceAddress.value.trim() : '',
+      formAnswerJson: formAnswers.value.length
+        ? JSON.stringify({ answers: formAnswers.value })
+        : '',
+    }
+    await bindCheckout(checkoutPayload)
+    uni.setStorageSync('appointment_checkout_context', checkoutPayload)
+    uni.navigateTo({ url: '/pages/order/fillorder?way=BUY_NOW' })
+  } catch (e: any) {
+    uni.showToast({
+      title: e?.data?.message || e?.message || '预约信息提交失败',
+      icon: 'none',
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 24rpx 24rpx 160rpx;
+}
+.section {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+}
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+}
+.picker-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 28rpx;
+  color: #333;
+}
+.tip {
+  color: #999;
+  font-size: 26rpx;
+}
+.slot-list,
+.mode-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.slot-item,
+.mode-item {
+  padding: 16rpx 28rpx;
+  background: #f2f2f2;
+  border-radius: 30rpx;
+  font-size: 24rpx;
+  color: #333;
+  border: 2rpx solid transparent;
+}
+.slot-item.active,
+.mode-item.active {
+  background: #fff5f5;
+  border-color: #f2270c;
+  color: #f2270c;
+}
+.slot-qty {
+  margin-left: 8rpx;
+  color: #999;
+}
+.input-gap {
+  height: 16rpx;
+}
+.arrow {
+  color: #ccc;
+  font-size: 32rpx;
+}
+.opt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+.opt-item {
+  font-size: 26rpx;
+  color: #333;
+}
+.opt-mark {
+  margin-right: 8rpx;
+}
+.range-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+.range-sep {
+  color: #999;
+  font-size: 24rpx;
+}
+.image-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+}
+.image-thumb,
+.image-add {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+.image-thumb image {
+  width: 100%;
+  height: 100%;
+}
+.image-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 48rpx;
+  border: 1rpx dashed #ddd;
+}
+.field-label {
+  font-size: 26rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+.required {
+  color: #f2270c;
+  margin-left: 4rpx;
+}
+.rich-text {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.6;
+}
+.notice-text {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.6;
+}
+.footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+}
+</style>

pages/order/appointment/appointmentReschedule.vue

@@ -0,0 +1,234 @@
+<template>
+  <view class="page">
+    <view class="section current">
+      <view class="section-title">当前预约</view>
+      <text class="current-text">{{ currentSlotText }}</text>
+    </view>
+
+    <view class="section">
+      <view class="section-title">新预约日期</view>
+      <picker mode="date" :value="slotDate" :start="minDate" :end="maxDate" @change="onDateChange">
+        <view class="picker-row">
+          <text>{{ slotDate || '请选择日期' }}</text>
+          <u-icon name="arrow-right" color="#ccc" size="16" />
+        </view>
+      </picker>
+    </view>
+
+    <view class="section">
+      <view class="section-title">新预约时段</view>
+      <view v-if="loadingSlots" class="tip">加载时段中...</view>
+      <view v-else-if="!slots.length" class="tip">该日期暂无可预约时段</view>
+      <view v-else class="slot-list">
+        <view
+          v-for="slot in slots"
+          :key="slot.id"
+          class="slot-item"
+          :class="{ active: selectedSlot && selectedSlot.id === slot.id }"
+          @click="selectSlot(slot)"
+        >
+          {{ slot.slotStartTime }}-{{ slot.slotEndTime }}
+          <text v-if="slot.showRemainingQty && slot.availableQty != null" class="slot-qty">
+            余{{ slot.availableQty }}
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <view class="section">
+      <view class="section-title">改期说明（选填）</view>
+      <u-input v-model="remark" type="textarea" placeholder="如有需要请填写改期原因" border="surround" height="100" />
+    </view>
+
+    <view class="footer">
+      <u-button type="primary" shape="circle" :loading="submitting" @click="submit">提交改期</u-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { listSlots, getAppointmentOrderDetail, requestReschedule, getGoodsExt } from '@/api/appointment.js'
+import { buildBookableDates, formatDate } from '@/utils/appointmentGoods.js'
+
+const orderSn = ref('')
+const skuId = ref('')
+const goodsId = ref('')
+const quantity = ref(1)
+const currentDetail = ref<any>({})
+const goodsExt = ref<any>(null)
+const slotDate = ref('')
+const slots = ref<any[]>([])
+const selectedSlot = ref<any>(null)
+const remark = ref('')
+const loadingSlots = ref(false)
+const submitting = ref(false)
+const bookableDates = ref<string[]>([])
+
+const minDate = computed(() => bookableDates.value[0] || formatDate(new Date()))
+const maxDate = computed(() => {
+  const list = bookableDates.value
+  return list.length ? list[list.length - 1] : minDate.value
+})
+const currentSlotText = computed(() => {
+  const d = currentDetail.value
+  if (!d?.slotDate) return '加载中...'
+  return `${d.slotDate} ${d.slotStartTime || ''}-${d.slotEndTime || ''}`
+})
+
+onLoad((options) => {
+  orderSn.value = options?.orderSn || ''
+})
+
+onMounted(async () => {
+  if (!orderSn.value) return
+  try {
+    const res = await getAppointmentOrderDetail(orderSn.value)
+    currentDetail.value = res.data?.result || {}
+    skuId.value = currentDetail.value.skuId || ''
+    goodsId.value = currentDetail.value.goodsId || ''
+    quantity.value = currentDetail.value.quantity || 1
+    if (goodsId.value) {
+      const extRes = await getGoodsExt(goodsId.value)
+      goodsExt.value = extRes.data?.result || null
+      bookableDates.value = buildBookableDates(goodsExt.value)
+    } else {
+      bookableDates.value = buildBookableDates(null)
+    }
+    slotDate.value = bookableDates.value[0] || formatDate(new Date())
+    await loadSlots()
+  } catch {
+    uni.showToast({ title: '加载预约信息失败', icon: 'none' })
+  }
+})
+
+watch(slotDate, () => {
+  selectedSlot.value = null
+  loadSlots()
+})
+
+async function loadSlots() {
+  if (!skuId.value || !slotDate.value) return
+  loadingSlots.value = true
+  try {
+    const res = await listSlots(skuId.value, slotDate.value)
+    slots.value = res.data?.result || []
+  } catch {
+    slots.value = []
+  } finally {
+    loadingSlots.value = false
+  }
+}
+
+function onDateChange(e: any) {
+  slotDate.value = e.detail?.value || ''
+}
+
+function selectSlot(slot: any) {
+  const need = quantity.value || 1
+  if (slot?.availableQty != null && slot.availableQty < need) {
+    uni.showToast({ title: '该时段可约数量不足', icon: 'none' })
+    return
+  }
+  selectedSlot.value = slot
+}
+
+async function submit() {
+  if (!selectedSlot.value) {
+    uni.showToast({ title: '请选择新时段', icon: 'none' })
+    return
+  }
+  submitting.value = true
+  try {
+    const slot = selectedSlot.value
+    const res = await requestReschedule(orderSn.value, {
+      slotStockId: slot.id,
+      slotDate: slotDate.value,
+      slotStartTime: slot.slotStartTime,
+      slotEndTime: slot.slotEndTime,
+      remark: remark.value.trim(),
+    })
+    const action = res.data?.result?.action
+    uni.showToast({
+      title: action === 'APPLY' ? '改期申请已提交，等待审核' : '改期成功',
+      icon: 'none',
+    })
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1200)
+  } catch (e: any) {
+    uni.showToast({
+      title: e?.data?.message || e?.message || '改期失败',
+      icon: 'none',
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 24rpx 24rpx 160rpx;
+}
+.section {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+}
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+}
+.current-text {
+  font-size: 28rpx;
+  color: #333;
+}
+.picker-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 28rpx;
+  color: #333;
+}
+.tip {
+  color: #999;
+  font-size: 26rpx;
+}
+.slot-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.slot-item {
+  padding: 16rpx 28rpx;
+  background: #f2f2f2;
+  border-radius: 30rpx;
+  font-size: 24rpx;
+  color: #333;
+  border: 2rpx solid transparent;
+}
+.slot-item.active {
+  background: #fff5f5;
+  border-color: #f2270c;
+  color: #f2270c;
+}
+.slot-qty {
+  margin-left: 8rpx;
+  color: #999;
+}
+.footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+}
+</style>

pages/order/fillorder.vue

@@ -68,6 +68,11 @@
       </div>
     </div>
 
+    <view class="address-box appointment-summary" v-if="isAppointmentCheckout && appointmentCheckoutSummary">
+      <view class="appointment-summary__title">预约信息</view>
+      <view class="appointment-summary__text">{{ appointmentCheckoutSummary }}</view>
+    </view>
+
     <!-- 开团信息 -->
     <view class="group-box" v-if="isAssemble">
       <view class="group-title">
@@ -336,19 +341,23 @@
           </u-col>
         </u-row>
       </div>
-      <div v-if="giftCardList.length || giftCardDeductAmount > 0">
+      <div class="gift-card-module">
         <u-row>
-          <u-col :span="6">礼品卡</u-col>
+          <u-col :span="6">
+            <view class="gift-card-title-row">
+              <text>使用礼品卡</text>
+              <text class="gift-card-help" @click.stop="showGiftCardNotice">使用说明</text>
+            </view>
+          </u-col>
           <u-col :span="6" class="tr tipsColor" textAlign="right">
             <span v-if="giftCardDeductAmount > 0" class="main-color"
-              >-￥{{ unitPrice(giftCardDeductAmount) }}</span
-            >
-            <span v-else @click="giftCardExpanded = !giftCardExpanded"
-              >{{ giftCardList.length }} 张可用</span
+              >已抵扣 -￥{{ unitPrice(giftCardDeductAmount) }}</span
             >
+            <span v-else>{{ giftCardList.length }} 张可用</span>
           </u-col>
         </u-row>
-        <view v-if="giftCardExpanded && giftCardList.length" class="gift-card-list">
+        <view v-if="!giftCardList.length" class="gift-card-empty">暂无可用礼品卡</view>
+        <view v-else class="gift-card-list">
           <view
             class="gift-card-item"
             :class="{ 'gift-card-item--selected': isGiftCardSelected(item) }"
@@ -356,11 +365,27 @@
             :key="item.id"
             @click="toggleGiftCard(item)"
           >
-            <view class="gift-card-item__name">{{ item.giftCardName || '礼品卡' }}</view>
-            <view class="gift-card-item__meta">
-              <text>余额 ￥{{ unitPrice(item.balance) }}</text>
-              <text class="gift-card-item__no">{{ item.cardNo }}</text>
+            <view class="gift-card-item__header">
+              <view class="gift-card-item__pattern" />
+              <view class="gift-card-item__inner">
+                <view>
+                  <view class="gift-card-item__name">{{ item.giftCardName || '礼品卡' }}</view>
+                  <view class="gift-card-item__face">面值{{ item.faceText }}元</view>
+                </view>
+                <view class="gift-card-item__right">
+                  <view class="gift-card-item__type">现金卡</view>
+                  <view class="gift-card-item__expire">{{ item.expireText }}</view>
+                </view>
+              </view>
             </view>
+            <view class="gift-card-item__body">
+              <view class="gift-card-item__balance">
+                <text class="gift-card-item__amt">¥{{ unitPrice(item.balance) }}</text>
+                <text>余额</text>
+              </view>
+              <view class="gift-card-item__no">{{ item.cardNo }}</view>
+            </view>
+            <view v-if="isGiftCardSelected(item)" class="gift-card-item__check">已选</view>
           </view>
         </view>
       </div>
@@ -428,7 +453,10 @@ import {
   secrecyMobile,
   isLogin,
 } from '@/utils/filters.js'
-import { hasECouponInCheckout } from '@/utils/goodsType.js'
+import { hasECouponInCheckout, hasAppointmentInCheckout } from '@/utils/goodsType.js'
+import { SERVICE_MODE_LABEL, formatDate } from '@/utils/appointmentGoods.js'
+import { bindCheckout } from '@/api/appointment.js'
+import { decorateGiftCard, GIFT_CARD_PAY_NOTICE } from '@/utils/giftCard.js'
 
 const store = useStore()
 const { proxy } = getCurrentInstance()!
@@ -474,12 +502,32 @@ const originOrderData = ref<any>('')
 
 // E_COUPON 结算：免地址/免配送（hidePhysicalCheckout）；优惠券/活动/礼品卡可用（M-02）
 const isECouponCheckout = computed(() => hasECouponInCheckout(orderMessage.value))
+const isAppointmentCheckout = computed(() => hasAppointmentInCheckout(orderMessage.value))
 const isVirtualCheckout = computed(() => orderMessage.value?.cartTypeEnum === 'VIRTUAL')
 const hidePhysicalCheckout = computed(
-  () => isVirtualCheckout.value || isECouponCheckout.value
+  () => isVirtualCheckout.value || isECouponCheckout.value || isAppointmentCheckout.value
 )
+const appointmentCheckoutContext = ref<any>(null)
 
-const giftCardList = computed(() => orderMessage.value?.canUseGiftCards || [])
+const appointmentCheckoutSummary = computed(() => {
+  const ctx =
+    appointmentCheckoutContext.value ||
+    orderMessage.value?.appointmentCheckout ||
+    orderMessage.value?.appointmentContext
+  if (!ctx) return ''
+  const date = formatDate(ctx.slotDate)
+  const mode = SERVICE_MODE_LABEL[ctx.serviceMode] || ctx.serviceMode || ''
+  const slot = ctx.slotStartTime && ctx.slotEndTime ? `${ctx.slotStartTime}-${ctx.slotEndTime}` : ''
+  const contact = ctx.contactName ? `${ctx.contactName} ${ctx.contactPhone || ''}` : ''
+  return [date, slot, mode, contact].filter(Boolean).join(' · ')
+})
+
+const selectedGiftCardIds = computed(() => orderMessage.value?.selectedGiftCardIds || [])
+const giftCardList = computed(() =>
+  (orderMessage.value?.canUseGiftCards || []).map((item: any) =>
+    decorateGiftCard(item, selectedGiftCardIds.value)
+  )
+)
 const giftCardDeductAmount = computed(() => {
   const dto = orderMessage.value?.priceDetailDTO
   if (!dto) return 0
@@ -488,8 +536,6 @@ const giftCardDeductAmount = computed(() => {
   }
   return Number(dto.giftCardPrice) || 0
 })
-const selectedGiftCardIds = computed(() => orderMessage.value?.selectedGiftCardIds || [])
-const giftCardExpanded = ref(false)
 
 watch(
   remarkVal,
@@ -527,9 +573,10 @@ onShow(async () => {
     mask: true,
   })
   try {
+    appointmentCheckoutContext.value = uni.getStorageSync('appointment_checkout_context') || null
     await getOrderList()
-    // E_COUPON 不需要配送方式
-    if (!isECouponCheckout.value) {
+    // E_COUPON / 预约商品不需要配送方式
+    if (!isECouponCheckout.value && !isAppointmentCheckout.value) {
       await getDistribution()
     }
     if (routerVal.value.way == 'PINTUAN') {
@@ -605,6 +652,15 @@ function invoice() {
   invoiceFlag.value = true
 }
 
+function showGiftCardNotice() {
+  uni.showModal({
+    title: '礼品卡使用说明',
+    content: GIFT_CARD_PAY_NOTICE,
+    showCancel: false,
+    confirmText: '我知道了',
+  })
+}
+
 function isGiftCardSelected(item: any) {
   if (!item?.id) return false
   return (selectedGiftCardIds.value || []).map(String).includes(String(item.id))
@@ -717,36 +773,62 @@ function createTradeFun() {
       delete submit.parentOrderSn
     }
 
-    API_Trade.createTrade(submit).then((res) => {
-      if (res.data.success) {
-        uni.showToast({
-          title: '创建订单成功!',
-          duration: 2000,
-          icon: 'none',
-        })
-        if (orderMessage.value.priceDetailDTO.billPrice == 0) {
-          uni.navigateTo({
-            url: '/pages/order/myOrder?status=0',
+    const runCreate = () =>
+      API_Trade.createTrade(submit).then((res) => {
+        if (res.data.success) {
+          uni.removeStorageSync('appointment_checkout_context')
+          uni.showToast({
+            title: '创建订单成功!',
+            duration: 2000,
+            icon: 'none',
           })
-        } else {
-          // #ifdef MP-WEIXIN
-          pay(res.data.result.sn)
-          // #endif
+          if (orderMessage.value.priceDetailDTO.billPrice == 0) {
+            uni.navigateTo({
+              url: '/pages/order/myOrder?status=0',
+            })
+          } else {
+            // #ifdef MP-WEIXIN
+            pay(res.data.result.sn)
+            // #endif
 
-          // #ifndef MP-WEIXIN
-          navigateTo(
-            `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
-          )
-          // #endif
+            // #ifndef MP-WEIXIN
+            navigateTo(
+              `/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
+            )
+            // #endif
+          }
+        } else {
+          uni.showToast({
+            title: res.data.message,
+            duration: 2000,
+            icon: 'none',
+          })
         }
-      } else {
+      })
+
+    if (isAppointmentCheckout.value) {
+      const ctx =
+        appointmentCheckoutContext.value ||
+        uni.getStorageSync('appointment_checkout_context')
+      if (!ctx) {
         uni.showToast({
-          title: res.data.message,
-          duration: 2000,
+          title: '预约信息不完整，请返回重选时段',
           icon: 'none',
         })
+        return
       }
-    })
+      bindCheckout(ctx)
+        .then(runCreate)
+        .catch((e: any) => {
+          uni.showToast({
+            title: e?.data?.message || e?.message || '预约信息提交失败',
+            icon: 'none',
+          })
+        })
+      return
+    }
+
+    runCreate()
   }, 3000)
 }
 
@@ -861,8 +943,8 @@ function getOrderList() {
     ;(store.state as any).canUseCoupons = res.data.result.canUseCoupons
     ;(store.state as any).cantUseCoupons = res.data.result.cantUseCoupons
 
-    // E_COUPON 免地址，不自动回填 memberAddress
-    if (!hasECouponInCheckout(res.data.result)) {
+    // E_COUPON / 预约商品免地址，不自动回填 memberAddress
+    if (!hasECouponInCheckout(res.data.result) && !hasAppointmentInCheckout(res.data.result)) {
       if (!res.data.result.memberAddress) {
         getUserAddress()
       } else {
@@ -894,6 +976,22 @@ page {
 }
 </style>
 <style scoped lang="scss">
+.appointment-summary {
+  padding: 24rpx 32rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+.appointment-summary__title {
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 12rpx;
+}
+.appointment-summary__text {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.5;
+}
+
 .flex-8 {
   flex: 8;
 }
@@ -1250,39 +1348,129 @@ page {
   margin: 20rpx 0;
 }
 
+.gift-card-module {
+  margin-top: 8rpx;
+}
+
+.gift-card-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.gift-card-help {
+  font-size: 22rpx;
+  color: #909399;
+}
+
+.gift-card-empty {
+  margin-top: 16rpx;
+  padding: 24rpx;
+  font-size: 24rpx;
+  color: #999;
+  text-align: center;
+  background: #fafafa;
+  border-radius: 12rpx;
+}
+
 .gift-card-list {
   margin-top: 16rpx;
-  padding: 0 8rpx 8rpx;
 }
 
 .gift-card-item {
-  border: 1rpx solid #eceef2;
+  position: relative;
   border-radius: 16rpx;
-  padding: 20rpx 24rpx;
+  overflow: hidden;
   margin-bottom: 16rpx;
+  border: 2rpx solid transparent;
   background: #fff;
 
   &--selected {
     border-color: $main-color;
-    background: rgba($main-color, 0.04);
   }
 }
 
+.gift-card-item__header {
+  position: relative;
+  background: linear-gradient(125deg, #ff9a4a 0%, #ff7729 42%, #ff8f3d 100%);
+}
+
+.gift-card-item__pattern {
+  position: absolute;
+  inset: 0;
+  opacity: 0.22;
+  pointer-events: none;
+  background-image: repeating-linear-gradient(
+    -36deg,
+    transparent,
+    transparent 10rpx,
+    rgba(255, 255, 255, 0.45) 10rpx,
+    rgba(255, 255, 255, 0.45) 12rpx
+  );
+}
+
+.gift-card-item__inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx 24rpx 16rpx;
+  color: #fff;
+}
+
 .gift-card-item__name {
   font-size: 28rpx;
-  font-weight: 600;
-  color: #333;
+  font-weight: 700;
 }
 
-.gift-card-item__meta {
-  display: flex;
-  justify-content: space-between;
+.gift-card-item__face,
+.gift-card-item__expire {
   margin-top: 8rpx;
-  font-size: 24rpx;
-  color: #666;
+  font-size: 22rpx;
+  opacity: 0.92;
+}
+
+.gift-card-item__right {
+  text-align: right;
+}
+
+.gift-card-item__type {
+  font-size: 28rpx;
+  font-weight: 700;
+}
+
+.gift-card-item__body {
+  padding: 16rpx 24rpx 20rpx;
+}
+
+.gift-card-item__balance {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+  font-size: 22rpx;
+  color: #999;
+}
+
+.gift-card-item__amt {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #ff6b22;
 }
 
 .gift-card-item__no {
+  margin-top: 8rpx;
+  font-size: 22rpx;
   color: #999;
 }
+
+.gift-card-item__check {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4rpx 14rpx;
+  font-size: 20rpx;
+  color: #fff;
+  background: $main-color;
+  border-top-left-radius: 12rpx;
+}
 </style>

pages/order/myOrder.vue

@@ -62,7 +62,7 @@
 										v-if="order.allowOperationVO.pay" @click="waitPay(order)">立即付款</view>
 									<!-- 取消订单 -->
 									<view ripple class="cancel-btn" shape="circle" size="mini"
-										v-if="order.allowOperationVO.cancel" @click="onCancel(order.sn)">
+										v-if="showOrderCancel(order)" @click="onCancel(order.sn)">
 										取消订单
 									</view>
 									<!-- 等待收货 -->
@@ -71,7 +71,7 @@
 										确认收货
 									</view>
 									<view ripple shape="circle" class="cancel-btn" size="mini"
-										v-if="!isECouponOrder(order.orderType) && order.groupAfterSaleStatus && ( order.groupAfterSaleStatus.includes('NOT_APPLIED') || order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
+										v-if="showOrderAfterSale(order)"
 										@click="applyService(order)">
 										退款/售后
 									</view> 
@@ -123,7 +123,8 @@ import {
 	orderStatusList,
 } from '@/utils/filters.js'
 // E_COUPON 订单不展示确认收货、退款/售后（FR-B-04）
-import { isECouponOrder } from '@/utils/goodsType.js'
+import { isECouponOrder, isAppointmentOrder } from '@/utils/goodsType.js'
+import { getAppointmentAllowOperation } from '@/utils/appointmentGoods.js'
 
 const store = useStore()
 const { proxy } = getCurrentInstance()!
@@ -371,6 +372,23 @@ function orderStateExp(state: number) {
 	return { stateTip, stateTipColor }
 }
 
+function showOrderCancel(order: any) {
+	if (isAppointmentOrder(order?.orderType)) {
+		return !!getAppointmentAllowOperation(order)?.cancel
+	}
+	return !!order?.allowOperationVO?.cancel
+}
+
+function showOrderAfterSale(order: any) {
+	if (isECouponOrder(order?.orderType)) return false
+	if (isAppointmentOrder(order?.orderType)) {
+		const allow = getAppointmentAllowOperation(order)
+		if (!allow?.afterSale) return false
+	}
+	const status = order?.groupAfterSaleStatus
+	return status && (status.includes('NOT_APPLIED') || status.includes('PART_AFTER_SALE'))
+}
+
 function navigateToOrderDetail(sn: string) {
 	uni.navigateTo({
 		url: './orderDetail?sn=' + sn,

pages/order/orderDetail.vue

@@ -11,7 +11,55 @@
     <!-- 物流/配送信息 / 卡密入口 -->
     <view class="info-view logistics-view" v-if="showDeliveryInfoBlock">
       <view class="logistics-List">
-        <view v-if="isECouponOrder" class="card-key-entry">
+        <view v-if="isAppointmentOrderFlag" class="appointment-entry">
+          <view class="appointment-entry__row">
+            <text class="label">预约时间</text>
+            <text>{{ appointmentSlotText }}</text>
+          </view>
+          <view class="appointment-entry__row" v-if="appointmentDetail.serviceMode">
+            <text class="label">服务方式</text>
+            <text>{{ serviceModeLabel }}</text>
+          </view>
+          <view class="appointment-entry__row" v-if="appointmentDetail.contactName">
+            <text class="label">联系人</text>
+            <text>{{ appointmentDetail.contactName }} {{ appointmentDetail.contactPhone }}</text>
+          </view>
+          <view class="appointment-entry__row" v-if="appointmentDetail.serviceAddressSnapshot">
+            <text class="label">服务地址</text>
+            <text>{{ appointmentDetail.serviceAddressSnapshot }}</text>
+          </view>
+          <view
+            v-for="(rows, gi) in appointmentFormGroups"
+            :key="gi"
+            class="appointment-entry__row appointment-form-block"
+          >
+            <text class="label">{{ appointmentFormGroups.length > 1 ? `补充信息${gi + 1}` : '补充信息' }}</text>
+            <view class="form-answers">
+              <view v-for="row in rows" :key="row.fieldKey" class="form-answer-row">
+                {{ row.fieldLabel }}：{{ row.value }}
+              </view>
+            </view>
+          </view>
+          <view v-if="appointmentCodes.length" class="appointment-codes">
+            <view class="appointment-codes__title">核销码（{{ appointmentCodes.length }}）</view>
+            <view
+              v-for="code in appointmentCodes"
+              :key="code.id || code.code"
+              class="verificationCode appointment-code-item"
+            >
+              {{ code.seqNo ? '#' + code.seqNo + ' ' : '' }}{{ code.code }}
+              <text class="code-status">（{{ verificationStatusText(code.status) }}）</text>
+            </view>
+          </view>
+          <view
+            v-if="appointmentAllow.reschedule"
+            class="card-key-entry__btn reschedule-stub"
+            @click="onRescheduleStub"
+          >
+            申请改期
+          </view>
+        </view>
+        <view v-else-if="isECouponOrder" class="card-key-entry">
           <view v-if="ecouponCardKeyDelivered" class="card-key-entry__btn" @click="goCardKeyDetail">
             查看卡密
           </view>
@@ -92,7 +140,7 @@
                 <view class="goods-price">
                   ￥{{unitPrice(sku.goodsPrice) }}
                   <!-- <span v-if="sku.point">+{{ sku.point }}积分</span> -->
-				  <span style="font-size: 24rpx;margin-left: 14rpx;color: #ff9900;" v-if="!isECouponOrder && sku.isRefund && sku.isRefund !== 'NO_REFUND'">
+				  <span style="font-size: 24rpx;margin-left: 14rpx;color: #ff9900;" v-if="!isECouponOrder && !isAppointmentOrderFlag && sku.isRefund && sku.isRefund !== 'NO_REFUND'">
 				  {{refundPriceList(sku.isRefund)}} ({{unitPrice(sku.refundPrice, "￥") }})
 				   </span>
                 </view>
@@ -112,7 +160,7 @@
           <view class="title">商品总价：</view>
           <view class="value">￥{{unitPrice(order.goodsPrice) }}</view>
         </view>
-        <view class="order-info-view" v-if="order.freightPrice && !isECouponOrder">
+        <view class="order-info-view" v-if="order.freightPrice && !isECouponOrder && !isAppointmentOrderFlag">
           <view class="title">运费：</view>
           <view class="value">￥{{unitPrice(order.freightPrice) }}</view>
         </view>
@@ -142,7 +190,7 @@
         </view>
         <view class="customer-list">
           <view class="customer-service"
-            v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.cancel == true"
+            v-if="showCancelBtn"
             @click="onCancel(order.sn)">取消订单</view>
           <view class="customer-service" v-if="allowOperation.showLogistics" @click="handleClickDeliver()">查看物流</view>
           <view class="customer-service" v-if="order.orderStatus != 'UNPAID' && order.orderPromotionType == 'PINTUAN'"
@@ -282,12 +330,21 @@ import {
 } from '@/utils/orderDelivery.js'
 import {
 	isECouponOrder as checkECouponOrder,
+	isAppointmentOrder as checkAppointmentOrder,
 	isNonPhysicalOrder as checkNonPhysicalOrder,
 	orderHasCardKeyContent,
 	collectCardKeyFulfillLines,
 	resolveCardKeyFulfillMessage,
 	CARD_KEY_FULFILL_STATUS,
 } from '@/utils/goodsType.js'
+import { getAppointmentOrderDetail } from '@/api/appointment.js'
+import {
+	SERVICE_MODE_LABEL,
+	VERIFICATION_CODE_STATUS_TEXT,
+	getAppointmentAllowOperation,
+	formatDate,
+	parseFormAnswerGroups,
+} from '@/utils/appointmentGoods.js'
 
 const store = useStore()
 const lightColor = computed(() => store.getters.lightColor)
@@ -319,7 +376,30 @@ const orderPackage = ref<any[]>([])
 const legacyTraces = ref<any>(null)
 
 const isECouponOrder = computed(() => checkECouponOrder(order.value?.orderType))
+const isAppointmentOrderFlag = computed(() => checkAppointmentOrder(order.value?.orderType))
 const isNonPhysicalOrder = computed(() => checkNonPhysicalOrder(order.value?.orderType))
+const appointmentDetail = ref<Record<string, any>>({})
+const appointmentAllow = computed(() =>
+	getAppointmentAllowOperation(order.value) || { cancel: false, afterSale: false, reschedule: false }
+)
+const showCancelBtn = computed(() => {
+	if (isAppointmentOrderFlag.value) return appointmentAllow.value.cancel
+	return orderDetail.value.allowOperationVO?.cancel === true
+})
+const appointmentCodes = computed(() => appointmentDetail.value?.codes || [])
+const serviceModeLabel = computed(
+	() => SERVICE_MODE_LABEL[appointmentDetail.value?.serviceMode] || appointmentDetail.value?.serviceMode || ''
+)
+const appointmentSlotText = computed(() => {
+	const d = appointmentDetail.value
+	if (!d?.slotDate) return '—'
+	const date = formatDate(d.slotDate)
+	const slot = d.slotStartTime && d.slotEndTime ? `${d.slotStartTime}-${d.slotEndTime}` : ''
+	return [date, slot].filter(Boolean).join(' ')
+})
+const appointmentFormGroups = computed(() =>
+	parseFormAnswerGroups(appointmentDetail.value?.formAnswerJson)
+)
 const ecouponCardKeyDelivered = computed(() =>
 	orderHasCardKeyContent(orderGoodsList.value)
 )
@@ -335,6 +415,7 @@ const allowOperation = computed(() =>
 )
 
 const showDeliveryInfoBlock = computed(() => {
+	if (isAppointmentOrderFlag.value) return true
 	if (isECouponOrder.value) return true
 	if (order.value.orderType === 'VIRTUAL') return false
 	if (order.value.deliveryMethod === 'SELF_PICK_UP') return false
@@ -444,6 +525,29 @@ function ByUserMessage(orderItem: any) {
 	})
 }
 
+function verificationStatusText(status: string) {
+	return VERIFICATION_CODE_STATUS_TEXT[status] || status || '—'
+}
+
+async function loadAppointmentDetail(orderSnParam: string) {
+	if (!checkAppointmentOrder(order.value?.orderType)) {
+		appointmentDetail.value = {}
+		return
+	}
+	try {
+		const res = await getAppointmentOrderDetail(orderSnParam)
+		appointmentDetail.value = res.data?.result || {}
+	} catch {
+		appointmentDetail.value = {}
+	}
+}
+
+function onRescheduleStub() {
+	uni.navigateTo({
+		url: `/pages/order/appointment/appointmentReschedule?orderSn=${order.value.sn}`,
+	})
+}
+
 function loadData(orderSnParam: string) {
 	uni.showLoading({ title: '加载中' })
 	getOrderDetail(orderSnParam).then(async (res) => {
@@ -454,6 +558,7 @@ function loadData(orderSnParam: string) {
 		if (!order.value.allowOperationVO && result.allowOperationVO) {
 			order.value.allowOperationVO = result.allowOperationVO
 		}
+		await loadAppointmentDetail(orderSnParam)
 		await loadDelivery(order.value)
 		hideLoadingIfNeeded()
 	})
@@ -774,6 +879,39 @@ page,
   }
 }
 
+.appointment-entry__row {
+  display: flex;
+  font-size: 26rpx;
+  margin-bottom: 12rpx;
+  line-height: 1.5;
+}
+.appointment-entry__row .label {
+  color: #999;
+  width: 140rpx;
+  flex-shrink: 0;
+}
+.form-answers {
+  flex: 1;
+}
+.form-answer-row {
+  margin-bottom: 4rpx;
+}
+.appointment-codes__title {
+  font-size: 26rpx;
+  font-weight: 600;
+  margin: 16rpx 0 8rpx;
+}
+.appointment-code-item {
+  margin-bottom: 8rpx;
+}
+.code-status {
+  color: #999;
+  font-size: 22rpx;
+}
+.reschedule-stub {
+  margin-top: 16rpx;
+}
+
 .verificationCode {
   font-weight: bold;
   letter-spacing: 2rpx;