订单详情支付与模拟发货

src/pagesOrder/detail/detail.vue

@@ -53,7 +53,13 @@
               再次购买
             </navigator>
             <!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 -->
-            <view v-if="false" class="button"> 模拟发货 </view>
+            <view
+              v-if="isDev && order.orderState == OrderState.DaiFaHuo"
+              @tap="onOrderSend"
+              class="button"
+            >
+              模拟发货
+            </view>
           </view>
         </template>
       </view>
@@ -141,7 +147,7 @@
       <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
         <!-- 待付款状态:展示支付按钮 -->
         <template v-if="true">
-          <view class="button primary"> 去支付 </view>
+          <view class="button primary" @tap="onOrderPay"> 去支付 </view>
           <view class="button" @tap="popup?.open?.()"> 取消订单 </view>
         </template>
         <!-- 其他订单状态:按需展示按钮 -->
@@ -192,7 +198,8 @@ import { onLoad, onReady } from '@dcloudio/uni-app'
 import { useGuessList } from '@/composables'
 import { ref } from 'vue'
 import { OrderState, orderStateList } from '@/services/constants'
-import { getMemberOrderByIdAPI } from '@/services/order'
+import { getMemberOrderByIdAPI, getMemberOrderConsignmentByIdAPI } from '@/services/order'
+import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -273,6 +280,33 @@ const onTimeup = () => {
   // 修改订单状态为已取消
   order.value!.orderState = OrderState.YiQuXiao
 }
+
+// 订单支付
+const onOrderPay = async () => {
+  // 通过环境变量区分开发环境
+  if (import.meta.env.DEV) {
+    // 开发环境：模拟支付，修改订单状态为已支付
+    await getPayMockAPI({ orderId: query.id })
+  } else {
+    // 生产环境：获取支付参数 + 发起微信支付
+    const res = await getPayWxPayMiniPayAPI({ orderId: query.id })
+    await wx.requestPayment(res.result)
+  }
+  // 关闭当前页，再跳转支付结果页
+  uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
+}
+
+// 是否为开发环境
+const isDev = import.meta.env.DEV
+// 模拟发货
+const onOrderSend = async () => {
+  if (isDev) {
+    await getMemberOrderConsignmentByIdAPI(query.id)
+    uni.showToast({ icon: 'success', title: '模拟发货完成' })
+    // 主动更新订单状态
+    order.value!.orderState = OrderState.DaiShouHuo
+  }
+}
 </script>
 
 <style lang="scss">

src/pagesOrder/payment/payment.vue

@@ -0,0 +1,95 @@
+<template>
+  <scroll-view class="viewport" scroll-y @scrolltolower="onScrolltolower">
+    <!-- 订单状态 -->
+    <view class="overview">
+      <view class="status icon-checked">支付成功</view>
+      <view class="buttons">
+        <navigator
+          hover-class="none"
+          class="button navigator"
+          url="/pages/index/index"
+          open-type="switchTab"
+        >
+          返回首页
+        </navigator>
+        <navigator
+          hover-class="none"
+          class="button navigator"
+          :url="`/pagesOrder/detail/detail?id=${query.id}`"
+          open-type="redirect"
+        >
+          查看订单
+        </navigator>
+      </view>
+    </view>
+
+    <!-- 猜你喜欢 -->
+    <XtxGuess ref="guessRef" />
+  </scroll-view>
+</template>
+
+<script setup lang="ts">
+import { useGuessList } from '@/composables'
+
+// 获取页面参数
+const query = defineProps<{
+  id: string
+}>()
+
+// 猜你喜欢
+const { guessRef, onScrolltolower } = useGuessList()
+</script>
+
+<style lang="scss">
+page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.viewport {
+  background-color: #f7f7f8;
+}
+
+.overview {
+  line-height: 1;
+  padding: 50rpx 0;
+  color: #fff;
+  background-color: #27ba9b;
+
+  .status {
+    font-size: 36rpx;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .status::before {
+    display: block;
+    font-size: 110rpx;
+    margin-bottom: 20rpx;
+  }
+
+  .buttons {
+    height: 60rpx;
+    line-height: 60rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 60rpx;
+  }
+
+  .button {
+    text-align: center;
+    margin: 0 10rpx;
+    font-size: 28rpx;
+    color: #fff;
+
+    &:first-child {
+      width: 200rpx;
+      border-radius: 64rpx;
+      border: 1rpx solid #fff;
+    }
+  }
+}
+</style>

src/services/order.ts

@@ -59,3 +59,15 @@ export const getMemberOrderRepurchaseByIdAPI = (id: string) => {
     url: `/member/order/repurchase/${id}`,
   })
 }
+
+/**
+ * 模拟发货-内测版
+ * @description 在DEV环境下使用，仅在订单状态为待发货时，可模拟发货，调用后订单状态修改为待收货，包含模拟物流。
+ * @param id 订单id
+ */
+export const getMemberOrderConsignmentByIdAPI = (id: string) => {
+  return http({
+    method: 'GET',
+    url: `/member/order/consignment/${id}`,
+  })
+}

src/services/pay.ts

@@ -0,0 +1,25 @@
+import { http } from '@/utils/http'
+
+/**
+ * 获取微信支付参数
+ * @param data orderId 订单id
+ */
+export const getPayWxPayMiniPayAPI = (data: { orderId: string }) => {
+  return http<WechatMiniprogram.RequestPaymentOption>({
+    method: 'GET',
+    url: '/pay/wxPay/miniPay',
+    data,
+  })
+}
+
+/**
+ * 模拟支付-内测版
+ * @param data orderId 订单id
+ */
+export const getPayMockAPI = (data: { orderId: string }) => {
+  return http({
+    method: 'GET',
+    url: '/pay/mock',
+    data,
+  })
+}