first commit

src/pages-store/pages/order/index.vue

@@ -0,0 +1,688 @@
+<script setup lang="ts">
+import {
+  appMerchantOrderDetailPost,
+  appCollectCollectPost,
+  type MerchantOrderVo,
+  appUserCardSelectDefaultPost, appMerchantOrderPayOrderPost, appMerchantOrderCancelOrderPost
+} from "@/service";
+import { debounce } from 'throttle-debounce'
+const { t } = useI18n();
+import OrderProgress from './components/order-progress.vue'
+import OrderDetailSkeleton from './components/order-detail-skeleton.vue'
+import Collection from "@/components/collection/index.vue";
+import PriceDetail from "@/pages-store/pages/order/components/price-detail.vue";
+import CancelOrder from "@/pages-store/pages/order/components/cancel-order.vue";
+import {useConfigStore} from "@/store";
+import {CollectionType, OrderStatus, EventEnum, OrderCancelStatus} from "@/constant/enums";
+import {formatTimestampWithMonthName, formatTimestampShort, navGoogleMap, callPhone} from "@/utils/utils";
+import useEventEmit from "@/hooks/useEventEmit";
+const configStore = useConfigStore();
+
+// 价格明细
+const priceDetailRef = ref<InstanceType<typeof PriceDetail>>();
+// 打开价格明细
+const openPriceDetail = () => {
+  priceDetailRef.value?.onOpen({
+    tip: orderDetail.value.tip,
+    tax: orderDetail.value.tax,
+    deliveryFee: orderDetail.value.deliveryFee,
+  }, 0);
+};
+
+// 取消订单
+const cancelOrderRef = ref<InstanceType<typeof CancelOrder>>();
+// 打开取消订单
+const openCancelOrder = () => {
+  cancelOrderRef.value?.onOpen();
+};
+function confirmCancel(reason: string) {
+  console.log('取消订单', reason)
+  appMerchantOrderCancelOrderPost({
+    body: {
+      orderId: orderDetail.value.id,
+      cancelReason: reason,
+    }
+  }).then(res=> {
+    uni.showToast({
+      title: '取消订单成功',
+      icon: 'none',
+    })
+    setTimeout(() => {
+      appMerchantOrderDetail()
+    }, 500)
+  })
+}
+
+// 订单步骤数据(配送订单)
+const orderSteps = ref([
+  { label: t('pages-store.order.orderStatus.ordered'), value: OrderStatus.PENDING_PAYMENT }, // 代付款
+  { label: t('pages-store.order.orderStatus.paid'), value: OrderStatus.HAS_PENDING_PAYMENT }, // 已付款
+  { label: t('pages-store.order.orderStatus.received'), value: OrderStatus.MERCHANT_ACCEPTED },// 商家已接单
+  { label: t('pages-store.order.orderStatus.delivering'), value: OrderStatus.DELIVERING }, // 配送中
+  { label: t('pages-store.order.orderStatus.delivered'), value: OrderStatus.COMPLETED }// 已送达
+])
+
+// 订单步骤数据(自取订单)
+const orderStepsCancel = ref([
+  { label: t('pages-store.order.orderStatus.ordered'), value: OrderStatus.PENDING_PAYMENT }, // 代付款
+  { label: t('pages-store.order.orderStatus.ready'), value: OrderStatus.MERCHANT_ACCEPTED }, // 商家接单
+  { label: t('pages-store.order.orderStatus.completed'), value: OrderStatus.COMPLETED },// 已核销
+])
+
+// 页面加载状态
+const loading = ref(true);
+const orderId = ref('')
+onLoad((options: any)=> {
+  if(options.id) {
+    orderId.value = options.id;
+    // appMerchantOrderDetail()
+    // 查询用户默认信用卡
+    appUserCardSelectDefault()
+  }
+})
+
+onShow(()=> {
+  nextTick(()=> {
+    appMerchantOrderDetail()
+  })
+})
+
+const orderDetail = ref<MerchantOrderVo>()
+function appMerchantOrderDetail() {
+  loading.value = true;
+  appMerchantOrderDetailPost({
+    params: {
+      orderId: orderId.value,
+    }
+  }).then((res: any)=> {
+    console.log('订单详情', res)
+    orderDetail.value = res.data
+    // 是自取订单还是配送订单 1-派送 2-自取
+    if(orderDetail.value) {
+      if(+orderDetail.value.receiveMethod === 2) {
+        orderSteps.value = orderStepsCancel.value
+      }
+    }
+  }).finally(() => {
+    loading.value = false;
+  })
+}
+// 订单状态
+const orderStatus = computed(() => {
+  if(orderDetail.value) {
+    return orderDetail.value.orderStatus
+  }
+  return ''
+})
+
+// 复制订单号
+const copyOrderNumber = (text: string) => {
+  if(!text) return
+  uni.setClipboardData({
+    data: text,
+    success: () => {
+      uni.showToast({
+        title: t('toast.orderNumberCopied'),
+        icon: 'none'
+      })
+    }
+  })
+}
+// 拨打电话
+const callPhoneFn = (phone: string) => {
+  callPhone(phone)
+}
+
+// 收藏店铺
+function handleCollectionClick() {
+  debouncedEmit(orderDetail.value?.merchantVo?.id, CollectionType.STORE, ()=> {
+    if (orderDetail.value?.merchantVo) {
+      orderDetail.value.merchantVo.isCollect = !orderDetail.value.merchantVo.isCollect
+    }
+  })
+}
+// 防抖处理函数
+const debouncedEmit = debounce(1300, (id: any, type: CollectionType, callback: ()=> void) => {
+  // 收藏接口
+  appCollectCollectPost({
+    body: {
+      targetId: id,
+      targetType: type
+    }
+  }).then(res=> {
+    callback()
+  })
+}, {
+  atBegin: true, // 立即触发
+})
+
+// 支付参数
+const payMethodOptions = ref({
+  orderId: '',
+  cardId: '',
+  payMethod: 1, // 支付方式 1信用卡 2余额
+  payPassword: '',
+})
+useEventEmit(EventEnum.CHOOSE_PAYMENT_METHOD, (data) => {
+  if(data) {
+    if(data.payMethod === 1) {
+      payMethodOptions.value.cardId = data.cardId
+      payMethodOptions.value.cardNumber = data.cardNumber
+      payMethodOptions.value.payMethod = 1
+    } else {
+      payMethodOptions.value.payMethod = 2
+    }
+  }
+})
+function appUserCardSelectDefault() {
+  appUserCardSelectDefaultPost({}).then(res=> {
+    console.log('查询用户默认信用卡', res)
+    payMethodOptions.value.cardId = res.data?.cardId || ''
+    payMethodOptions.value.cardNumber = res.data?.cardNumber || ''
+  })
+}
+// 立即支付订单
+function goPay() {
+  // 如果是余额支付,弹出支付密码弹窗
+  if(payMethodOptions.value.payMethod === 2) {
+    passwordInputRef.value?.showPasswordInput()
+  } else {
+    appMerchantOrderPayOrder()
+  }
+}
+function payPawSuccess(password: string) {
+  payMethodOptions.value.payPassword = password
+  appMerchantOrderPayOrder()
+}
+function appMerchantOrderPayOrder() {
+  appMerchantOrderPayOrderPost({
+    body: {
+      ...payMethodOptions.value,
+      orderId: orderDetail.value.id,
+    }
+  }).then(res=> {
+    console.log('支付结果', res)
+    uni.showToast({
+      title: '支付成功',
+      icon: 'none'
+    })
+
+    setTimeout(()=> {
+      appMerchantOrderDetail()
+    }, 500)
+  })
+}
+
+function navGoogleMapFn() {
+  navGoogleMap(orderDetail.value?.merchantVo?.latitude + ',' + orderDetail.value?.merchantVo?.longitude)
+}
+
+const useCodeRef = ref()
+function openQrCode() {
+  useCodeRef.value?.init(orderDetail.value?.orderNo || '')
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
+</script>
+
+<template>
+  <navbar />
+  <view
+      class="animate-in fade-in animate-ease-out animate-duration-300"
+      v-show="loading"
+  >
+    <!-- 骨架屏 -->
+    <OrderDetailSkeleton />
+  </view>
+  <view
+      class="animate-in fade-in animate-ease-in animate-duration-300"
+      v-if="!loading"
+  >
+    <!-- 已取消-成功取消 -->
+    <template v-if="orderStatus === OrderStatus.CANCELLED">
+      <view class="px-30rpx pt-20rpx pb-50rpx">
+        <view class="text-40rpx lh-36rpx text-#333 font-500">{{ t('pages-store.order.cancelled') }}</view>
+        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">
+          {{ t('pages-store.order.cancellationTime') }}: {{ formatTimestampShort(orderDetail?.cancelTime) }}
+        </view>
+      </view>
+    </template>
+    <!-- 已取消-等待商家同意 -->
+    <template v-else-if="orderDetail?.refundStatus === OrderCancelStatus.APPLIED">
+      <view class="px-30rpx pt-20rpx pb-50rpx">
+        <view class="text-40rpx lh-36rpx text-#333 font-500">{{ t('pages-store.order.cancellationTitle') }}</view>
+        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">
+          {{ t('pages-store.order.cancellationReasonDesc') }}
+        </view>
+        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">{{ t('pages-store.order.cancellationReason') }}：{{ orderDetail?.cancelReason }}</view>
+      </view>
+    </template>
+    <!-- 商家拒绝订单 -->
+    <template v-if="orderStatus === OrderStatus.MERCHANT_REJECTED">
+      <view class="px-30rpx pt-20rpx pb-50rpx">
+        <view class="text-40rpx lh-36rpx text-#333 font-500">{{ t('pages-store.order.orderStatus.merchantRejected') }}</view>
+        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">{{ t('pages-store.order.orderStatus.merchantRejectedDesc') }}</view>
+      </view>
+    </template>
+    <template v-else>
+      <view class="px-30rpx pt-20rpx pb-50rpx">
+        <view class="text-40rpx lh-36rpx text-#333 font-500">
+          <template v-if="orderDetail?.receiveMethod === 1">
+            {{ t('pages-store.order.estimatedDeliveryTime') }}
+          </template>
+          <template v-else>{{ t('pages-store.order.upTime') }}</template>
+          :
+<!--          订单预计送达时间-->
+          {{ formatTimestampShort(orderDetail?.endScheduledTime) }}
+        </view>
+        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx">
+          <view>{{ t('pages-store.order.orderTime') }}: {{ formatTimestampShort(orderDetail?.createTime) }}</view>
+          <!-- 订单30分钟自动取消--待支付 -->
+          <view v-if="orderStatus === OrderStatus.PENDING_PAYMENT">{{ t('pages-store.order.autoCancellation') }}</view>
+        </view>
+        <view class="text-28rpx lh-28rpx text-#7D7D7D mt-26rpx" v-if="orderDetail?.refundStatus === OrderCancelStatus.REJECTED">
+          {{ t('pages-store.order.rejectReason') }}：{{ orderDetail?.rejectReason }}
+        </view>
+      </view>
+      <!-- 订单进度 -->
+      <view v-if="orderDetail?.refundStatus !== OrderCancelStatus.APPLIED || orderDetail?.refundStatus !== OrderCancelStatus.APPROVED" class="mb-52rpx px-30rpx">
+        <OrderProgress
+            :steps="orderSteps"
+            :current-status="orderStatus"
+        />
+      </view>
+
+<!--      自取订单展示核销码按钮-->
+      <view class="px-30rpx pb-52rpx" v-if="orderDetail?.receiveMethod === 2 && orderStatus === OrderStatus.MERCHANT_ACCEPTED">
+        <wd-button block
+                   custom-class="w-full !h-98rpx !text-30rpx !lh-42rpx !font-bold !rounded-20rpx !bg-#14181B"
+                   @click="openQrCode">
+          {{ t('pages-store.order.writeOff') }}
+        </wd-button>
+      </view>
+<!--      自取订单展示核销码按钮-->
+
+<!--      <OrderProgress-->
+<!--          :steps="orderSteps"-->
+<!--          :current-status="1"-->
+<!--      />-->
+    </template>
+    <!-- 分隔线 -->
+    <view class="w-full h-16rpx bg-#F6F6F6"></view>
+
+    <!-- 配送员信息 -->
+    <view v-if="
+    orderDetail?.receiveMethod === 1 && (
+          orderStatus === OrderStatus.DELIVERING ||
+           orderStatus === OrderStatus.COMPLETED)
+      " class="pt-36rpx">
+      <view class="text-36rpx lh-36rpx text-#333 font-500 pl-30rpx">{{ t('pages-store.view-reviews.deliveryDriver') }}</view>
+      <view @click="callPhoneFn(orderDetail?.deliveryPhone)" class="flex-center-sb py-36rpx px-30rpx">
+        <view class="flex items-center">
+          <image
+              :src="orderDetail?.deliveryAvatar"
+              mode="aspectFill"
+              class="w-80rpx h-80rpx rounded-full shrink-0"
+          />
+          <view class="ml-24rpx">
+            <text class="text-30rpx lh-30rpx font-500 text-#333 block mb-6rpx">
+              {{ orderDetail?.deliveryFirstName }} {{ orderDetail?.deliverySurname }}
+            </text>
+            <text class="text-24rpx lh-24rpx text-#7D7D7D">{{ t('pages-store.order.acceptanceTime') }}: {{ formatTimestampWithMonthName(orderDetail?.startDeliveryTime) }}
+            </text>
+          </view>
+        </view>
+        <image
+            src="@img/chef/153.png"
+            mode="aspectFill"
+            class="w-66rpx h-66rpx shrink-0"
+        />
+      </view>
+      <!-- 送达信息-已送达 -->
+      <view v-if="orderStatus === OrderStatus.COMPLETED" class="px-30rpx pb-36rpx">
+        <view class="text-30rpx lh-30rpx text-#333">
+          <text class="mr-30rpx">{{ t('pages-store.order.deliveryTime') }}</text>
+          <text>{{ formatTimestampWithMonthName(orderDetail?.deliveryTime) }}</text>
+        </view>
+        <view class="text-30rpx lh-30rpx text-#333 mb-24rpx mt-36rpx">{{ t('pages-store.order.deliveryPhotos') }}</view>
+        <view class="flex items-center gap-20rpx">
+          <template v-for="item in orderDetail?.deliveryPhotos?.split(',')">
+            <wd-img width="158rpx" height="158rpx" radius="16rpx" mode="aspectFill" :src="item" :enable-preview="true" />
+          </template>
+        </view>
+      </view>
+      <view class="w-full h-16rpx bg-#F6F6F6"></view>
+    </view>
+
+    <!-- 商品列表 -->
+    <view class="px-30rpx py-36rpx">
+      <!-- 商家信息 -->
+      <view @click="navigateTo('/pages-store/pages/store/index?id=' + orderDetail?.merchantVo?.id)" class="flex-center-sb h-80rpx mb-36rpx">
+        <view class="flex items-center">
+          <image
+              :src="orderDetail?.merchantVo?.logo"
+              mode="aspectFill"
+              class="w-80rpx h-80rpx rounded-full bg-#F2F2F2 mr-24rpx shrink-0"
+          />
+          <text class="text-30rpx lh-30rpx text-#333 font-500">{{ orderDetail?.merchantVo?.merchantName }}</text>
+          <image
+              src="@img/chef/142.png"
+              class="w-32rpx h-32rpx shrink-0 ml-10rpx"
+          ></image>
+        </view>
+        <collection :is-collected="orderDetail?.merchantVo?.isCollect" @collectionChange="handleCollectionClick" />
+      </view>
+
+      <view
+          v-for="item in orderDetail?.merchantOrderDishVoList"
+          :key="item.id"
+          class="flex items-start mb-32rpx last:mb-0"
+      >
+        <!-- 商品图片 -->
+        <view class="w-136rpx h-136rpx rounded-16rpx overflow-hidden mr-20rpx shrink-0">
+          <image
+              :src="item.merchantDishVo?.dishImage?.split(',')[0]"
+              mode="aspectFill"
+              class="w-full h-full bg-#F2F2F2"
+          />
+        </view>
+
+        <!-- 商品信息 -->
+        <view class="flex-1">
+          <text class="text-30rpx lh-30rpx text-#333 font-500 block mb-20rpx">{{ item.merchantDishVo?.dishName }}</text>
+          <view class="flex-center-sb text-24rpx lh-24rpx text-#7D7D7D mb-24rpx">
+            <text class="line-clamp-1">{{ item.merchantSideDishVo?.sideDishName }} {{ item.merchantSideDishItemVo?.name }}</text>
+            <!-- 数量 -->
+            <view class="shrink-0 text-28rpx lh-28rpx text-#333 text-right font-500">
+              X {{ item.count }}
+            </view>
+          </view>
+          <text class="text-30rpx lh-30rpx text-#333 font-500">{{ `$${item.merchantDishVo?.discountPrice}` }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 分隔线 -->
+    <view class="w-full h-16rpx bg-#F6F6F6"></view>
+
+    <view v-if="orderDetail?.receiveMethod === 1" class="pt-36rpx">
+      <view class="text-36rpx lh-36rpx text-#333 font-500 pl-30rpx mb-4rpx">{{ t('pages-store.order.deliveryAddress') }}</view>
+
+      <!-- 收货地址 -->
+      <view class="flex items-center border-bottom py-36rpx px-30rpx">
+        <image
+            src="@img/chef/145.png"
+            mode="aspectFill"
+            class="w-44rpx h-44rpx relative z-1 shrink-0"
+        />
+        <!-- 地址信息 -->
+        <view class="ml-28rpx">
+          <text
+              class="text-32rpx lh-32rpx text-#333 block mb-8rpx line-clamp-1"
+          >{{ orderDetail?.merchantOrderUserAddressVo?.formattedAddress }}</text
+          >
+          <text class="text-28rpx lh-28rpx text-#6D6D6D">{{ orderDetail?.merchantOrderUserAddressVo?.displayName }}</text>
+        </view>
+      </view>
+      <!-- 配送偏好 -->
+      <view
+          class="flex items-center border-bottom py-36rpx px-30rpx"
+      >
+        <image
+            src="@img/chef/1333.png"
+            mode="aspectFill"
+            class="w-44rpx h-44rpx relative z-1"
+        />
+        <view class="ml-28rpx text-32rpx lh-32rpx text-#333">
+          {{ orderDetail?.deliveryMethod }}
+        </view>
+      </view>
+      <!-- 联系电话 -->
+      <view
+          class="flex items-center py-36rpx px-30rpx"
+      >
+        <image
+            src="@img/chef/1334.png"
+            mode="aspectFill"
+            class="w-44rpx h-44rpx relative z-1"
+        />
+        <view class="ml-28rpx text-32rpx lh-32rpx text-#333">
+          {{ orderDetail?.areaCode }} {{ orderDetail?.phone }}
+        </view>
+      </view>
+    </view>
+    <!-- 分隔线 -->
+
+    <view v-else class="px-30rpx pt-36rpx">
+      <view class="text-36rpx lh-36rpx text-#333 font-bold">{{ t('pickupAddress') }}</view>
+      <view class="flex-center-sb py-40rpx">
+        <view class="flex items-center">
+          <image
+              src="@img/chef/145.png"
+              mode="aspectFill"
+              class="w-44rpx h-44rpx shrink-0 mr-28rpx"
+          />
+          <view>
+            <view class="text-30rpx lh-30rpx text-#333 mb-18rpx line-clamp-1">{{ orderDetail?.merchantVo?.merchantAddress }}</view>
+            <view class="text-28rpx lh-28rpx text-#6D6D6D">{{ orderDetail?.merchantVo?.merchantName }}</view>
+          </view>
+        </view>
+
+        <view @click="navGoogleMapFn" class="w-66rpx h-66rpx ml-20rpx center shrink-0 rounded-50% border-#333 border-solid border-1px">
+          <image
+              src="@img/chef/127.png"
+              mode="aspectFill"
+              class="w-62rpx h-62rpx"
+          />
+        </view>
+      </view>
+    </view>
+
+
+
+    <view class="w-full h-16rpx bg-#F6F6F6"></view>
+
+    <view class="border-bottom px-30rpx py-36rpx text-36rpx lh-36rpx text-#333 ">
+      <view class="font-500 text-36rpx lh-36rpx mb-40rpx">{{ t('pages-store.order.orderInfo') }}</view>
+      <!-- 订单编号 -->
+      <view @click="copyOrderNumber(orderDetail?.orderNo)" class="flex-center-sb text-30rpx lh-30rpx mb-40rpx">
+        <text>{{ t('pages-store.order.orderNumber') }}</text>
+        <view class="flex items-center">
+          {{ orderDetail?.orderNo }}
+          <image
+              src="@img/chef/1340.png"
+              mode="aspectFill"
+              class="w-20rpx h-20rpx shrink-0 ml-10rpx"
+          />
+        </view>
+      </view>
+      <!-- 下单时间 mb-40rpx根据支付状态显示 -->
+      <view class="flex-center-sb text-30rpx lh-30rpx" :class="[orderStatus !== OrderStatus.PENDING_PAYMENT ? 'mb-40rpx' : '']">
+        <text>{{ t('pages-store.order.orderTime') }}</text>
+        <text>{{ formatTimestampWithMonthName(orderDetail?.createTime) }}</text>
+      </view>
+      <!-- 待支付 -->
+      <template v-if="orderStatus !== OrderStatus.PENDING_PAYMENT">
+        <!-- 支付方式 -->
+        <view class="flex-center-sb text-30rpx lh-30rpx mb-40rpx">
+          <text>{{ t('pages-user.member.paymentMethod') }}</text>
+          <view class="flex items-center">
+            <image
+                src="@img/chef/138.png"
+                mode="aspectFill"
+                class="w-44rpx h-44rpx shrink-0 mr-10rpx"
+            />
+            <text>{{ orderDetail?.payMethod === 1 ? t('pages-user.choosePaymethod.creditCard') : t('pages-user.choosePaymethod.wallet') }}</text>
+          </view>
+        </view>
+        <!-- 支付时间 -->
+        <view class="flex-center-sb text-30rpx lh-30rpx">
+          <text>{{ t('pages-user.member.payTime') }}</text>
+          <text>{{ formatTimestampWithMonthName(orderDetail?.payTime) }}</text>
+        </view>
+      </template>
+    </view>
+
+    <!-- 费用明细 -->
+    <view
+        :class="[ orderStatus === OrderStatus.PENDING_PAYMENT ? '' : 'pb-68rpx' ]"
+        class="px-30rpx pt-32rpx text-32rpx lh-32rpx text-#333">
+      <view class="flex-center-sb mb-40rpx">
+        <text>{{ t('pages-store.order.subtotal') }}</text>
+        <text>${{ orderDetail?.actualPrice }}</text>
+      </view>
+      <view class="flex-center-sb mb-40rpx">
+        <view @click="openPriceDetail" class="flex items-center">
+          <text>{{ t('pages-store.order.taxesAndOtherFees') }}</text>
+          <image
+              src="@img/chef/1336.png"
+              class="w-28rpx h-28rpx shrink-0 ml-10rpx mt-4rpx"
+              mode="aspectFit"
+          />
+        </view>
+        <view>
+          <text>${{ (Number(orderDetail?.tax) + Number(orderDetail?.tip) + Number(orderDetail?.deliveryFee)).toFixed(2) }}</text>
+        </view>
+      </view>
+      <view class="flex-center-sb">
+        <text>{{ t('pages-store.order.total') }}</text>
+        <text>${{ orderDetail.paidAmount }}</text>
+      </view>
+    </view>
+
+    <!-- 订单支付 -->
+    <view
+        v-if="orderStatus === OrderStatus.PENDING_PAYMENT"
+        @click="navigateTo('/pages-user/pages/choose-paymethod/index')"
+        class="flex-center-sb text-32rpx lh-32rpx font-500 text-#333 py-36rpx px-30rpx pb-68rpx"
+    >
+      <view class="flex items-center">
+        <image
+            src="@img/chef/138.png"
+            class="w-44rpx h-44rpx mr-28rpx shrink-0"
+            mode="aspectFit"
+        />
+        <text class="">
+          <template v-if="payMethodOptions.payMethod === 1">{{ t('pages-user.choosePaymethod.creditCard') }}</template>
+          <template v-else>{{ t('pages-user.choosePaymethod.wallet') }}</template>
+        </text>
+      </view>
+      <view class="flex items-center">
+        <view class="mr-12px">
+          <template v-if="payMethodOptions.payMethod === 1">
+            <!--判断用户是否有信用卡-->
+            <text v-if="!payMethodOptions.cardId">{{ t("pages-user.member.creditCard") }}</text>
+            <text v-else>{{ payMethodOptions.cardNumber }}</text>
+          </template>
+          <template v-else-if="payMethodOptions.payMethod === 2">
+            <text>{{ t('pages-user.choosePaymethod.wallet') }}</text>
+          </template>
+        </view>
+        <image
+            src="@img/chef/142.png"
+            class="w-32rpx h-32rpx shrink-0"
+            mode="aspectFit"
+        />
+      </view>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="px-30rpx pb-30rpx">
+    <!--申请取消订单中.已同意取消订单-->
+      <template v-if="+orderDetail.refundStatus === OrderCancelStatus.APPLIED || +orderDetail.refundStatus === OrderCancelStatus.APPROVED">
+        <template v-if="+orderDetail.refundStatus === OrderCancelStatus.APPLIED">
+          <wd-button custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
+            {{ t('pages-store.order.orderStatus.pending') }}
+          </wd-button>
+        </template>
+        <template v-if="+orderDetail.refundStatus === OrderCancelStatus.APPROVED">
+          <wd-button custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
+            {{ t('pages-store.order.orderStatus.agree') }}
+          </wd-button>
+        </template>
+      </template>
+      <template v-else>
+        <!-- 待支付 -->
+        <template v-if="orderStatus === OrderStatus.PENDING_PAYMENT">
+          <wd-button @click="goPay" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
+            {{ t('common.goPay') }}
+          </wd-button>
+          <view @click="openCancelOrder" class="text-center  mt-52rpx text-36rpx lh-36rpx text-#333 font-500">
+            {{ t('common.cancel') }}
+          </view>
+        </template>
+
+
+        <!--   配送订单     -->
+        <template v-if="orderDetail?.receiveMethod === 1">
+          <!-- 待接单/已接单/配送中 -->
+          <template v-if="
+          orderStatus === OrderStatus.HAS_PENDING_PAYMENT ||
+           orderStatus === OrderStatus.MERCHANT_ACCEPTED ||
+           orderStatus === OrderStatus.DELIVERING
+      ">
+            <!-- 已经被拒绝过不能在申请了 -->
+            <wd-button v-if="orderDetail?.refundStatus !== OrderCancelStatus.REJECTED" @click="openCancelOrder" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
+              {{ t('common.cancel') }}
+            </wd-button>
+          </template>
+
+          <!--已完成，评价-->
+          <template v-else-if="orderStatus === OrderStatus.COMPLETED">
+            <template v-if="orderDetail?.dishReviewVoList.length > 0">
+              <wd-button @click="navigateTo('/pages-store/pages/order/view-reviews?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
+                {{ t('pages-store.view-reviews.viewTitle') }}
+              </wd-button>
+            </template>
+            <template v-else>
+              <wd-button @click="navigateTo('/pages-store/pages/order/evaluate?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
+                {{ t('common.evaluate') }}
+              </wd-button>
+            </template>
+          </template>
+        </template>
+        <template v-else>
+          <template v-if="
+          orderStatus === OrderStatus.HAS_PENDING_PAYMENT || orderStatus === OrderStatus.MERCHANT_ACCEPTED
+      ">
+            <!-- 已经被拒绝过不能在申请了 -->
+            <wd-button v-if="orderDetail?.refundStatus !== OrderCancelStatus.REJECTED" @click="openCancelOrder" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
+              {{ t('common.cancel') }}
+            </wd-button>
+          </template>
+          <template v-if="orderStatus === OrderStatus.COMPLETED">
+            <template v-if="orderDetail?.dishReviewVoList.length > 0">
+              <wd-button @click="navigateTo('/pages-store/pages/order/view-reviews?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-transparent !text-36rpx !font-500 !lh-108rpx !text-#333 !rounded-16rpx !border-#666666 !border-solid !border-1rpx" block>
+                {{ t('pages-store.view-reviews.viewTitle') }}
+              </wd-button>
+            </template>
+            <template v-else>
+              <wd-button @click="navigateTo('/pages-store/pages/order/evaluate?id=' + orderDetail.id)" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
+                {{ t('common.evaluate') }}
+              </wd-button>
+            </template>
+          </template>
+        </template>
+      </template>
+    <!--申请取消订单中-->
+      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
+    </view>
+    <!-- 价格明细 -->
+    <price-detail ref="priceDetailRef" />
+    <!-- 取消订单 -->
+    <cancel-order @confirm="confirmCancel" ref="cancelOrderRef" />
+    <!-- 支付订单 -->
+    <password-container @success="payPawSuccess" ref="passwordInputRef" />
+    <!-- 核销订单 -->
+    <use-code ref="useCodeRef" />
+  </view>
+</template>
+<style>
+page {
+  background-color: #fff;
+}
+</style>
+<style scoped>
+</style>