更新：增加订单详情功能

pages/user/feedback/index.vue

@@ -89,6 +89,8 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
 import { useUserStore } from '@/stores/user'
 import { submitFeedback } from '@/api/modules/user'
 import type { IFeedbackForm } from '@/types/user'
@@ -97,6 +99,14 @@ import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 const userStore = useUserStore()
 
+onLoad((options: any) => {
+  const orderSn = options.orderSn
+  if (orderSn) {
+    form.value.relation = orderSn
+    form.value.type = '3'
+  }
+})
+
 // 问题类型选项
 const issueTypeOptions = computed(() => [
   { label: t('user.issueTypeAccount'), value: '1' },

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>

pages/user/order/index.vue

@@ -3,14 +3,14 @@
     <template #top>
       <!-- 自定义导航栏 -->
       <nav-bar :title="$t('user.myOrders')"></nav-bar>
-      <wd-tabs v-model="orderStatus" @change="handleOrderStatusTabChange">
+      <!-- <wd-tabs v-model="orderStatus" @change="handleOrderStatusTabChange">
         <wd-tab v-for="item in ordersTabs" :key="item.value" :title="item.name" :name="item.value"></wd-tab>
-      </wd-tabs>
+      </wd-tabs> -->
     </template>
 
     <!-- 订单列表 -->
     <view class="order-list">
-      <wd-card v-for="order in orderList" :key="order.id" type="rectangle" custom-class="order-item">
+      <wd-card v-for="order in orderList" :key="order.id" type="rectangle" custom-class="order-item" @click="toDetails(order)">
         <template #title>
           <view class="order-item-title">
             <view class="order-item-sn">
@@ -23,8 +23,7 @@
         </template>
         
         <!-- 三种订单类型商品信息 -->
-        <ProductInfo v-if="order.orderType === 'order'" :data="order.productList" :type="order.orderType" />
-        <ProductInfo v-if="order.orderType === 'abroadBook'" :data="order.bookEntity" :type="order.orderType" />
+        <ProductInfo v-if="order.orderType === 'order'" :data="order.productList[0].product" :type="order.orderType" />
         <ProductInfo v-if="order.orderType === 'vip'" :data="order.vipBuyConfigEntity" :type="order.orderType" />
         <ProductInfo v-if="order.orderType === 'abroadVip'" :data="order.ebookvipBuyConfig" :type="order.orderType" />
         <!-- 三种订单类型商品信息 end -->
@@ -48,12 +47,16 @@ import type { IOrder } from '@/types/order'
 import { useI18n } from 'vue-i18n'
 import { copyToClipboard } from '@/utils/index'
 import ProductInfo from '@/components/order/ProductInfo.vue'
+import { useSysStore } from '@/stores/sys'
 
 const { t } = useI18n()
 const paging = ref<any>(null)
 
+// 订单状态映射
+const orderStatusMap = useSysStore().orderStatusMap
+
 // 订单状态
-const orderStatus = ref<string>('-1')
+const orderStatus = ref<string>('3')
 const ordersTabs = [
   {
     name: "全部",
@@ -72,12 +75,6 @@ const ordersTabs = [
   },
 ]
 
-// 订单状态映射
-const orderStatusMap = {
-  '0': '待付款',
-  '3': '已完成',
-}
-
 /**
  * 处理订单状态切换
  */
@@ -122,22 +119,17 @@ const getOrderImage = (order: IOrder) => {
   }
 }
 
-const getOrderTitle = (order: IOrder) => {
-  switch (order.orderType) {
-    case 'order':
-      return order.productList[0]?.product?.productName || ''
-    case 'abroadBook':
-      return order.bookEntity?.name || ''
-    case 'vip':
-      return order.vipBuyConfigEntity?.title || ''
-    case 'point':
-      return ''
-    default:
-      return ''
-  }
+/**
+ * 跳转订单详情
+ */
+const toDetails = (order: IOrder) => {
+  uni.navigateTo({
+    url: '/pages/user/order/details?orderId=' + order.orderId
+  })
 }
 
 
+
 </script>
 
 <style lang="scss" scoped>