更新：增加订单详情功能

2025-11-28 18:03:13 +08:00
parent 0e7952ac4e
commit bdf1b41098
13 changed files with 392 additions and 55 deletions
--- a/pages/user/order/details.vue
+++ b/pages/user/order/details.vue
@@ -0,0 +1,153 @@
+<template>
+  <view class="page-wrapper">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('order.orderDetails')"></nav-bar>
+
+    <!-- 订单信息 -->
+    <view class="order-info">
+      <view class="order-status">{{ sysStore.orderStatusMap[order.orderStatus] }}</view>
+      <!-- 三种订单类型商品信息 -->
+      <ProductInfo v-if="order.orderType === 'order'" size="large" :data="productList[0]" :type="order.orderType" />
+      <ProductInfo v-if="order.orderType === 'vip'" size="large" :data="order.vipBuyConfigEntity" :type="order.orderType" />
+      <ProductInfo v-if="order.orderType === 'abroadVip'" size="large" :data="order.ebookvipBuyConfig" :type="order.orderType" />
+      <!-- 三种订单类型商品信息 end -->
+      
+      <wd-divider class="p-0!" />
+
+      <!-- 付款信息 -->
+      <wd-cell-group>
+        <wd-cell title="商品总价" :value="`${order.orderMoney} ${$t('global.coin')}`" />
+        <wd-cell v-if="order.districtMoney > 0" title="活动优惠" :value="`- ${order.districtMoney} ${$t('global.coin')}`" />  
+        <wd-cell v-if="order.vipDiscountAmount > 0" title="VIP专享立减" :value="`- ${order.vipDiscountAmount} ${$t('global.coin')}`" />
+        <wd-cell v-if="order.jfDeduction > 0" title="积分抵扣">
+          <text class="text-red-500 text-lg font-bold">{{ `- ${order.jfDeduction}` }}</text>
+        </wd-cell>
+        <wd-cell title="实付金额">
+          <text class="text-red-500 text-lg font-bold">{{ `${order.realMoney}` }}</text> {{ $t('global.coin') }}
+        </wd-cell>
+      </wd-cell-group>
+
+      <wd-divider class="p-0!" />
+
+      <!-- 下单信息 -->
+      <wd-cell-group>
+        <wd-cell title="订单编号" title-width="4em">
+          <text class="text-xs">{{ order.orderSn }}</text>
+          <wd-icon name="file-copy" size="14px" color="#65A1FA" class="ml-1!" @click="copyToClipboard(order.orderSn)"></wd-icon>
+        </wd-cell>
+        <wd-cell title="创建时间" :value="order.createTime" />
+        <wd-cell title="付款时间" :value="order.paymentDate" />
+      </wd-cell-group>
+    </view>
+
+    <view class="text-center">
+      <text @click="toWorkOrder" class="text-[cadetblue] text-sm">订单有问题？去申诉</text>
+    </view>
+    
+    <view class="contact-customer" @click="makePhoneCall(sysStore.customerServicePhone)">
+      <wd-icon name="service" size="30px"></wd-icon>
+      <view class="text-sm">联系客服</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useSysStore } from '@/stores/sys'
+import { orderApi } from '@/api/modules/order'
+import type { IOrderDetail, IOrderGoods } from '@/types/order'
+import ProductInfo from '@/components/order/ProductInfo.vue'
+import { copyToClipboard, makePhoneCall } from '@/utils/index'
+
+const sysStore = useSysStore()
+// 订单详情
+const order = ref<IOrderDetail>({
+  orderMoney: 0,
+  districtMoney: 0,
+  vipDiscountAmount: 0,
+  jfDeduction: 0,
+  realMoney: 0,
+})
+const productList = ref<IOrderGoods[]>([])
+
+onLoad(async (options: { orderId: string }) => {
+  const orderId = options.orderId
+  if (orderId) {
+    const res = await orderApi.getOrderDetail(orderId)
+    const orderDetails = res.data.buyOrder
+    order.value = orderDetails
+    switch (orderDetails.orderType) {
+      case 'order':
+        productList.value = res.data.productInfo
+        break
+      case 'vip':
+        productList.value = orderDetails.vipBuyConfigEntity
+        break
+      case 'abroadVip':
+        productList.value = orderDetails
+        break
+      default:
+        break
+    }
+  }
+})
+
+const toWorkOrder = () => {
+  uni.navigateTo({
+    url: '/pages/user/feedback/index?orderSn=' + order.value.orderSn
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+body {
+  background-color: #F8F9FA;
+}
+.page-wrapper {
+  padding: 20rpx;
+}
+
+.order-info {
+  padding: 30rpx;
+  background-color: #fff;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  .order-status {
+    margin-bottom: 20rpx;
+    padding: 10rpx 0;
+    width: 6em;
+    background-color: #34D19D;
+    color: #fff;
+    border-radius: 0 10px 10px 0;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+
+
+:deep(.wd-cell-group) {
+  padding: 0 !important;
+
+  .wd-cell__wrapper {
+    padding: 0 !important;
+  }
+}
+
+.contact-customer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  margin: 40rpx auto 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  line-height: 1;
+}
+</style>