订单详情物流信息与删除订单

src/pagesOrder/detail/detail.vue

@@ -26,7 +26,7 @@
         <template v-if="order.orderState === OrderState.DaiFuKuan">
           <view class="status icon-clock">等待付款</view>
           <view class="tips">
-            <text class="money">应付金额: ¥ 99.00</text>
+            <text class="money">应付金额: ¥ {{ order.payMoney }}</text>
             <text class="time">支付剩余</text>
             <!-- 倒计时组件 -->
             <uni-countdown
@@ -60,22 +60,30 @@
             >
               模拟发货
             </view>
+            <!-- 待收货状态: 展示确认收货按钮 -->
+            <view
+              v-if="order.orderState === OrderState.DaiShouHuo"
+              @tap="onOrderConfirm"
+              class="button"
+            >
+              确认收货
+            </view>
           </view>
         </template>
       </view>
       <!-- 配送状态 -->
       <view class="shipment">
         <!-- 订单物流信息 -->
-        <view v-for="item in 1" :key="item" class="item">
+        <view v-for="item in logisticList" :key="item.id" class="item">
           <view class="message">
-            您已在广州市天河区黑马程序员完成取件，感谢使用菜鸟驿站，期待再次为您服务。
+            {{ item.text }}
           </view>
-          <view class="date"> 2023-04-14 13:14:20 </view>
+          <view class="date"> {{ item.time }} </view>
         </view>
         <!-- 用户收货地址 -->
         <view class="locate">
-          <view class="user"> 张三 13333333333 </view>
-          <view class="address"> 广东省 广州市 天河区 黑马程序员 </view>
+          <view class="user"> {{ order.receiverContact }} {{ order.receiverMobile }} </view>
+          <view class="address"> {{ order.receiverAddress }} </view>
         </view>
       </view>
 
@@ -84,29 +92,26 @@
         <view class="item">
           <navigator
             class="navigator"
-            v-for="item in 2"
-            :key="item"
-            :url="`/pages/goods/goods?id=${item}`"
+            v-for="item in order.skus"
+            :key="item.id"
+            :url="`/pages/goods/goods?id=${item.spuId}`"
             hover-class="none"
           >
-            <image
-              class="cover"
-              src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"
-            ></image>
+            <image class="cover" :src="item.image"></image>
             <view class="meta">
-              <view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm</view>
-              <view class="type">藏青小花， 130</view>
+              <view class="name ellipsis">{{ item.name }}</view>
+              <view class="type">{{ item.attrsText }}</view>
               <view class="price">
                 <view class="actual">
                   <text class="symbol">¥</text>
-                  <text>99.00</text>
+                  <text>{{ item.curPrice }}</text>
                 </view>
               </view>
-              <view class="quantity">x1</view>
+              <view class="quantity">x{{ item.quantity }}</view>
             </view>
           </navigator>
           <!-- 待评价状态:展示按钮 -->
-          <view class="action" v-if="true">
+          <view class="action" v-if="order.orderState === OrderState.DaiPingJia">
             <view class="button primary">申请售后</view>
             <navigator url="" class="button"> 去评价 </navigator>
           </view>
@@ -115,15 +120,15 @@
         <view class="total">
           <view class="row">
             <view class="text">商品总价: </view>
-            <view class="symbol">99.00</view>
+            <view class="symbol">{{ order.totalMoney }}</view>
           </view>
           <view class="row">
             <view class="text">运费: </view>
-            <view class="symbol">10.00</view>
+            <view class="symbol">{{ order.postFee }}</view>
           </view>
           <view class="row">
             <view class="text">应付金额: </view>
-            <view class="symbol primary">109.00</view>
+            <view class="symbol primary">{{ order.payMoney }}</view>
           </view>
         </view>
       </view>
@@ -135,7 +140,7 @@
           <view class="item">
             订单编号: {{ query.id }} <text class="copy" @tap="onCopy(query.id)">复制</text>
           </view>
-          <view class="item">下单时间: 2023-04-14 13:14:20</view>
+          <view class="item">下单时间: {{ order.createTime }}</view>
         </view>
       </view>
 
@@ -146,7 +151,7 @@
       <view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
       <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
         <!-- 待付款状态:展示支付按钮 -->
-        <template v-if="true">
+        <template v-if="order.orderState === OrderState.DaiFuKuan">
           <view class="button primary" @tap="onOrderPay"> 去支付 </view>
           <view class="button" @tap="popup?.open?.()"> 取消订单 </view>
         </template>
@@ -164,13 +169,18 @@
             v-if="order.orderState === OrderState.DaiShouHuo"
             @tap="onOrderConfirm"
             class="button primary"
+            >确认收货</view
           >
-            确认收货
-          </view>
           <!-- 待评价状态: 展示去评价 -->
-          <view class="button"> 去评价 </view>
+          <view v-if="order.orderState === OrderState.DaiPingJia" class="button"> 去评价 </view>
           <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
-          <view class="button delete"> 删除订单 </view>
+          <view
+            v-if="order.orderState >= OrderState.DaiPingJia"
+            @tap="onOrderDelete"
+            class="button delete"
+          >
+            删除订单
+          </view>
         </template>
       </view>
     </template>
@@ -199,14 +209,16 @@
 </template>
 
 <script setup lang="ts">
-import type { OrderResult } from '@/types/order'
+import type { OrderResult, LogisticItem } 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 {
+  deleteMemberOrderAPI,
   getMemberOrderByIdAPI,
   getMemberOrderConsignmentByIdAPI,
+  getMemberOrderLogisticsByIdAPI,
   putMemberOrderReceiptByIdAPI,
 } from '@/services/order'
 import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay'
@@ -279,6 +291,13 @@ const order = ref<OrderResult>()
 const getMemberOrderByIdData = async () => {
   const res = await getMemberOrderByIdAPI(query.id)
   order.value = res.result
+  if (
+    [OrderState.DaiShouHuo, OrderState.DaiPingJia, OrderState.YiWanCheng].includes(
+      order.value.orderState,
+    )
+  ) {
+    getMemberOrderLogisticsByIdData()
+  }
 }
 
 onLoad(() => {
@@ -332,6 +351,28 @@ const onOrderConfirm = () => {
     },
   })
 }
+
+// 获取物流信息
+const logisticList = ref<LogisticItem[]>([])
+const getMemberOrderLogisticsByIdData = async () => {
+  const res = await getMemberOrderLogisticsByIdAPI(query.id)
+  logisticList.value = res.result.list
+}
+
+// 删除订单
+const onOrderDelete = () => {
+  // 二次确认
+  uni.showModal({
+    content: '是否删除订单',
+    confirmColor: '#27BA9B',
+    success: async (success) => {
+      if (success.confirm) {
+        await deleteMemberOrderAPI({ ids: [query.id] })
+        uni.redirectTo({ url: '/pagesOrder/list/list' })
+      }
+    },
+  })
+}
 </script>
 
 <style lang="scss">

src/services/order.ts

@@ -1,4 +1,9 @@
-import type { OrderCreateParams, OrderPreResult, OrderResult } from '@/types/order'
+import type {
+  OrderCreateParams,
+  OrderLogisticResult,
+  OrderPreResult,
+  OrderResult,
+} from '@/types/order'
 import { http } from '@/utils/http'
 
 /**
@@ -83,3 +88,28 @@ export const putMemberOrderReceiptByIdAPI = (id: string) => {
     url: `/member/order/${id}/receipt`,
   })
 }
+
+/**
+ * 获取订单物流
+ * @description 仅在订单状态为待收货，待评价，已完成时，可获取物流信息。
+ * @param id 订单id
+ */
+export const getMemberOrderLogisticsByIdAPI = (id: string) => {
+  return http<OrderLogisticResult>({
+    method: 'GET',
+    url: `/member/order/${id}/logistics`,
+  })
+}
+
+/**
+ * 删除订单
+ * @description 仅在订单状态为待评价，已完成，已取消时，可删除订单。
+ * @param data ids 订单集合
+ */
+export const deleteMemberOrderAPI = (data: { ids: string[] }) => {
+  return http({
+    method: 'DELETE',
+    url: `/member/order`,
+    data,
+  })
+}

src/types/order.d.ts

@@ -112,3 +112,42 @@ export type OrderSkuItem = {
   /** 图片地址 */
   image: string
 }
+
+/**
+ * 获取订单物流
+ * @description 仅在订单状态为待收货，待评价，已完成时，可获取物流信息。
+ * @param id 订单id
+ */
+export const getMemberOrderLogisticsByIdAPI = (id: string) => {
+  return http<OrderLogisticResult>({
+    method: 'GET',
+    url: `/member/order/${id}/logistics`,
+  })
+}
+
+/** 物流信息 返回值类型 */
+export type OrderLogisticResult = {
+  /** 快递公司 */
+  company: {
+    /** 公司名称 */
+    name: string
+    /** 快递编号 */
+    number: string
+    /** 联系电话 */
+    tel: string
+  }
+  /** 商品件数 */
+  count: number
+  /** 物流日志 */
+  list: LogisticItem[]
+}
+
+/** 物流日志 */
+export type LogisticItem = {
+  /** 信息ID */
+  id: string
+  /** 信息文字 */
+  text: string
+  /** 时间 */
+  time: string
+}