订单详情状态渲染与再次购买

src/pagesOrder/create/create.vue

@@ -90,7 +90,12 @@
 import { computed, ref } from 'vue'
 import type { OrderPreResult } from '@/types/order'
 import { onLoad } from '@dcloudio/uni-app'
-import { getMemberOrderPreAPI, getMemberOrderPreNowAPI, postMemberOrderAPI } from '@/services/order'
+import {
+  getMemberOrderPreAPI,
+  getMemberOrderPreNowAPI,
+  getMemberOrderRepurchaseByIdAPI,
+  postMemberOrderAPI,
+} from '@/services/order'
 import { useAddressStore } from '@/stores/modules/address'
 
 // 获取屏幕边界到安全区域距离
@@ -116,6 +121,7 @@ const onChangeDelivery: UniHelper.SelectorPickerOnChange = (ev) => {
 const query = defineProps<{
   skuId?: string
   count?: string
+  orderId?: string
 }>()
 
 // 获取订单信息
@@ -129,6 +135,10 @@ const getMemberOrderPreData = async () => {
       skuId: query.skuId,
     })
     orderPre.value = res.result
+  } else if (query.orderId) {
+    // 再次购买
+    const res = await getMemberOrderRepurchaseByIdAPI(query.orderId)
+    orderPre.value = res.result
   } else {
     // 调用预付订单 API
     const res = await getMemberOrderPreAPI()

src/pagesOrder/detail/detail.vue

@@ -19,11 +19,11 @@
     id="scroller"
     @scrolltolower="onScrolltolower"
   >
-    <template v-if="true">
+    <template v-if="order">
       <!-- 订单状态 -->
       <view class="overview" :style="{ paddingTop: safeAreaInsets!.top + 20 + 'px' }">
         <!-- 待付款状态:展示去支付按钮和倒计时 -->
-        <template v-if="true">
+        <template v-if="order.orderState === OrderState.DaiFuKuan">
           <view class="status icon-clock">等待付款</view>
           <view class="tips">
             <text class="money">应付金额: ¥ 99.00</text>
@@ -35,7 +35,7 @@
         <!-- 其他订单状态:展示再次购买按钮 -->
         <template v-else>
           <!-- 订单状态文字 -->
-          <view class="status"> 待付款 </view>
+          <view class="status"> {{ orderStateList[order.orderState].text }} </view>
           <view class="button-group">
             <navigator
               class="button"
@@ -179,9 +179,12 @@
 </template>
 
 <script setup lang="ts">
-import { onReady } from '@dcloudio/uni-app'
+import type { OrderResult } from '@/types/order'
+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'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -245,6 +248,17 @@ onReady(() => {
     endScrollOffset: 50,
   })
 })
+
+// 获取订单详情
+const order = ref<OrderResult>()
+const getMemberOrderByIdData = async () => {
+  const res = await getMemberOrderByIdAPI(query.id)
+  order.value = res.result
+}
+
+onLoad(() => {
+  getMemberOrderByIdData()
+})
 </script>
 
 <style lang="scss">

src/services/constants.ts

@@ -0,0 +1,26 @@
+/** 订单状态枚举 */
+export enum OrderState {
+  /** 待付款 */
+  DaiFuKuan = 1,
+  /** 待发货 */
+  DaiFaHuo = 2,
+  /** 待收货 */
+  DaiShouHuo = 3,
+  /** 待评价 */
+  DaiPingJia = 4,
+  /** 已完成 */
+  YiWanCheng = 5,
+  /** 已取消 */
+  YiQuXiao = 6,
+}
+
+/** 订单状态列表 */
+export const orderStateList = [
+  { id: 0, text: '' },
+  { id: 1, text: '待付款' },
+  { id: 2, text: '待发货' },
+  { id: 3, text: '待收货' },
+  { id: 4, text: '待评价' },
+  { id: 5, text: '已完成' },
+  { id: 6, text: '已取消' },
+]

src/services/order.ts

@@ -1,4 +1,4 @@
-import type { OrderCreateParams, OrderPreResult } from '@/types/order'
+import type { OrderCreateParams, OrderPreResult, OrderResult } from '@/types/order'
 import { http } from '@/utils/http'
 
 /**
@@ -37,3 +37,25 @@ export const postMemberOrderAPI = (data: OrderCreateParams) => {
     data,
   })
 }
+
+/**
+ * 获取订单详情
+ * @param id 订单id
+ */
+export const getMemberOrderByIdAPI = (id: string) => {
+  return http<OrderResult>({
+    method: 'GET',
+    url: `/member/order/${id}`,
+  })
+}
+
+/**
+ * 填写订单-再次购买
+ * @param id 订单id
+ */
+export const getMemberOrderRepurchaseByIdAPI = (id: string) => {
+  return http<OrderPreResult>({
+    method: 'GET',
+    url: `/member/order/repurchase/${id}`,
+  })
+}

src/types/order.d.ts

@@ -1,4 +1,5 @@
 import type { AddressItem } from './address'
+import type { OrderState } from '@/services/constants'
 
 /** 获取预付订单 返回信息 */
 export type OrderPreResult = {
@@ -67,3 +68,47 @@ export type OrderCreateResult = {
   /** 订单Id */
   id: string
 }
+
+/** 订单详情 返回信息 */
+export type OrderResult = {
+  /** 订单编号 */
+  id: string
+  /** 订单状态，1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消 */
+  orderState: OrderState
+  /** 倒计时--剩余的秒数 -1 表示已经超时，正数表示倒计时未结束 */
+  countdown: number
+  /** 商品集合 [ 商品信息 ] */
+  skus: OrderSkuItem[]
+  /** 收货人 */
+  receiverContact: string
+  /** 收货人手机 */
+  receiverMobile: string
+  /** 收货人完整地址 */
+  receiverAddress: string
+  /** 下单时间 */
+  createTime: string
+  /** 商品总价 */
+  totalMoney: number
+  /** 运费 */
+  postFee: number
+  /** 应付金额 */
+  payMoney: number
+}
+
+/** 商品信息 */
+export type OrderSkuItem = {
+  /** sku id */
+  id: string
+  /** 商品 id */
+  spuId: string
+  /** 商品名称 */
+  name: string
+  /** 商品属性文字 */
+  attrsText: string
+  /** 数量 */
+  quantity: number
+  /** 购买时单价 */
+  curPrice: number
+  /** 图片地址 */
+  image: string
+}