更新：增加订单详情功能

api/config.ts

@@ -7,8 +7,8 @@ export const ENV = process.env.NODE_ENV || 'development';
  */
 const BASE_URL_MAP = {
   development: {
-		// MAIN: 'http://192.168.110.100:9300/pb/', // 张川川
+		MAIN: 'http://192.168.110.100:9300/pb/', // 张川川
-		MAIN: 'https://global.nuttyreading.com/', // 线上
+		// MAIN: 'https://global.nuttyreading.com/', // 线上
 		// PAYMENT: 'https://dev-pay.example.com', // 暂时用不到
 		// CDN: 'https://cdn-dev.example.com', // 暂时用不到
   },

api/modules/order.ts

@@ -9,7 +9,8 @@ import type {
   ICoupon,
   ICourseOrderCreateParams,
   IOrderInitData,
-  IGoodsDiscountParams
+  IGoodsDiscountParams,
+  IOrderDetail
 } from '@/types/order'
 import type { IUserInfo } from '@/types/user'
 
@@ -30,19 +31,6 @@ export const orderApi = {
     return res
   },
 
-  /**
-   * 验证 Google Pay 支付
-   * @param params 支付验证参数
-   */
-  async verifyGooglePay(params: IGooglePayVerifyParams) {
-    const res = await mainClient.request<IApiResponse>({
-      url: 'pay/googlepay/googleVerify',
-      method: 'POST',
-      data: params
-    })
-    return res
-  },
-
   /**
    * 获取用户信息（包含虚拟币余额）
    */
@@ -106,7 +94,7 @@ export const orderApi = {
   },
 
   /**
-   * 获取地区优惠金额
+   * 获取活动优惠金额
    * @param productList 商品列表
    */
   async getDistrictAmount(productList: IGoodsDiscountParams[]) {
@@ -155,5 +143,18 @@ export const orderApi = {
       data
     })
     return res
-  }
+  },
+
+  /**
+   * 获取订单详情
+   * @param orderId 订单ID
+   */
+  async getOrderDetail(orderId: string) {
+    const res = await mainClient.request<IApiResponse<{ buyOrder: IOrderDetail, productInfo: IOrderGoods[] }>>({
+      url: 'common/buyOrder/commonOrderDetail',
+      method: 'POST',
+      data: { orderId }
+    })
+    return res
+  },
 }

components/order/ProductInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="order-item-content">
+  <view class="order-item-content" :class="size === 'large' ? 'size-large' : ''">
     <view class="order-item-product-info">
       <image
         :src="productImg"
@@ -18,17 +18,19 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { t } from '@/utils/i18n'
+import type { IGoods } from '@/types/order'
 interface Props {
-  data: any
+  data: IGoods
   type: string
+  size?: 'small' | 'large'
 }
 const props = defineProps<Props>()
 
 const productImg = computed(() => {
-  
+  console.log(props.data)
   switch (props.type) {
     case 'order':
-      return props.data[0]?.product?.productImages || ''
+      return props.data?.productImages || ''
     case 'abroadBook':
       return props.data?.images || ''
     case 'vip':
@@ -44,9 +46,9 @@ const productImg = computed(() => {
 const title = computed(() => {
   switch (props.type) {
     case 'order':
-      return props.data[0]?.product?.productName || ''
+      return (props.data?.goodsType == '02' ? '(电子书)' : '') + props.data?.productName || ''
     case 'abroadBook':
-      return props.data?.name || ''
+      return '(电子书)' + props.data?.name || ''
     case 'vip':
       return props.data?.title + '<text style="color: #ff4703; font-weight: bold;">(' + props.data?.year + '年)</text>' || ''
     case 'abroadVip':
@@ -60,7 +62,7 @@ const title = computed(() => {
 const price = computed(() => {
   switch (props.type) {
     case 'order':
-      return props.data[0]?.product?.price || 0
+      return props.data?.price || 0
     case 'abroadBook':
       return props.data?.abroadPrice || 0
     case 'vip':
@@ -107,6 +109,7 @@ const price = computed(() => {
     color: #333;
     text-align: right;
     font-size: 12px;
+    white-space: nowrap;
 
     .count {
       font-weight: normal;
@@ -114,4 +117,17 @@ const price = computed(() => {
     }
   }
 }
+
+.order-item-content.size-large {
+  .order-item-product-cover {
+    width: 70px;
+    height: 70px;
+  }
+  .order-item-product-name {
+    font-size: 16px;
+  }
+  .order-item-product-price {
+    font-size: 14px;
+  }
+}
 </style>

locale/en.json

@@ -19,7 +19,8 @@
     "requestException": "Request exception",
     "coin": "Coin",
     "days": "Days",
-    "and": "and"
+    "and": "and",
+    "call": "Call"
   },
   "tabar.course": "COURSE",
   "tabar.book": "EBOOK",
@@ -479,7 +480,8 @@
 		"rechargeAmount": "Recharge amount",
 		"valueAddedServices": "Value-added services",
 		"readAgree": "I have read and agreed",
-		"readAgreeServices": "Please read and agree to the value-added services first"
+		"readAgreeServices": "Please read and agree to the value-added services first",
+    "orderDetails": "Order Details"
   },
   "vip": {
     "courseVip": "Course VIP",

locale/zh-Hans.json

@@ -19,7 +19,8 @@
     "requestException": "请求异常",
     "coin": "天医币",
     "days": "天",
-    "and": "和"
+    "and": "和",
+    "call": "拨打电话"
   },
   "tabar.course": "课程",
   "tabar.book": "图书",
@@ -480,7 +481,8 @@
 		"rechargeAmount": "充值金额",
 		"valueAddedServices": "增值服务",
 		"readAgree": "我已阅读并同意",
-		"readAgreeServices": "请先阅读并同意增值服务"
+		"readAgreeServices": "请先阅读并同意增值服务",
+    "orderDetails": "订单详情"
   },
   "vip": {
     "courseVip": "课程VIP",

pages.json

@@ -187,6 +187,12 @@
 				"navigationStyle": "custom",
 				"navigationBarTitleText": "%order.bookVip%"
 			}
+		}, {
+			"path": "pages/user/order/details",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%order.orderDetails%"
+			}
 		}, {
 			"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
 			"style": {

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 === 'order'" :data="order.productList[0].product" :type="order.orderType" />
-        <ProductInfo v-if="order.orderType === 'abroadBook'" :data="order.bookEntity" :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 || ''
+const toDetails = (order: IOrder) => {
-    case 'abroadBook':
+  uni.navigateTo({
-      return order.bookEntity?.name || ''
+    url: '/pages/user/order/details?orderId=' + order.orderId
-    case 'vip':
+  })
-      return order.vipBuyConfigEntity?.title || ''
-    case 'point':
-      return ''
-    default:
-      return ''
-  }
 }
 
 
+
 </script>
 
 <style lang="scss" scoped>

stores/sys.ts

@@ -15,6 +15,11 @@ export const useSysStore = defineStore('sys', {
       7: '国学VIP',
       8: '心理学VIP',
       9: '中西汇通学VIP',
+    },
+    customerServicePhone: '021-08371305',
+    orderStatusMap: {
+      '0': '待付款',
+      '3': '已完成',
     }
   }),
 

style/tailwind.css

@@ -8,7 +8,15 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-white: #fff;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --font-weight-bold: 700;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -204,9 +212,18 @@
       max-width: 96rem;
     }
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-1\! {
     margin-left: calc(var(--spacing) * 1) !important;
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-2\.5\! {
     margin-left: calc(var(--spacing) * 2.5) !important;
   }
@@ -234,6 +251,24 @@
   .table {
     display: table;
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
+  .h-\[80px\] {
+    height: 80px;
+  }
+  .h-\[80rpx\] {
+    height: 80rpx;
+  }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-\[80px\] {
+    width: 80px;
+  }
+  .w-\[80rpx\] {
+    width: 80rpx;
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -243,6 +278,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -252,16 +290,49 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .bg-\[blue\] {
+    background-color: blue;
+  }
+  .bg-\[red\] {
+    background-color: red;
+  }
+  .bg-\[transparent\] {
+    background-color: transparent;
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-0\! {
+    padding: calc(var(--spacing) * 0) !important;
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
+  .pt-\[40px\] {
+    padding-top: 40px;
+  }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -271,12 +342,53 @@
   .text-right {
     text-align: right;
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-\[26rpx\] {
+    --tw-font-weight: 26rpx;
+    font-weight: 26rpx;
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .text-\[\#000\] {
+    color: #000;
+  }
   .text-\[\#7dc1f0\] {
     color: #7dc1f0;
   }
+  .text-\[\#fff\] {
+    color: #fff;
+  }
+  .text-\[\'10px\'\] {
+    color: '10px';
+  }
+  .text-\[\'12px\'\] {
+    color: '12px';
+  }
+  .text-\[26rpx\] {
+    color: 26rpx;
+  }
+  .text-\[cadetblue\] {
+    color: cadetblue;
+  }
   .text-\[red\] {
     color: red;
   }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -287,6 +399,17 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.1\)\] {
+    --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0,0,0,0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.05\)\] {
+    --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0,0,0,0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -356,6 +479,10 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-ordinal {
   syntax: "*";
   inherits: false;
@@ -548,6 +675,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-font-weight: initial;
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;
       --tw-numeric-figure: initial;

types/order.d.ts

@@ -11,6 +11,7 @@ export interface IGoods {
   isVipPrice?: number               // 是否有VIP优惠 0-否 1-是
   productAmount?: number            // 购买数量
   delFlag?: number                 // 删除标记 -1-已下架
+  goodsType?: string           // 商品类型 "05"： 课程 "02"： 电子书
 }
 
 /**
@@ -138,3 +139,24 @@ export interface IPaymentOption {
   value: '4' | '5'
   name: string
 }
+
+/**
+ * 订单详情
+ */
+export interface IOrderDetail {
+  id: number
+  orderSn: string
+  orderMoney: number
+  realMoney: number
+  paymentDate: string
+  createTime: string
+  orderType: string
+  districtMoney?: number
+  vipDiscountAmount?: number
+  couponId?: number
+  couponName?: string
+  couponAmount?: number
+  jfDeduction?: number
+  remark?: string
+  [key: string]: any
+}

utils/index.ts

@@ -21,7 +21,7 @@ export const onPageBack = () => {
  * @param {string} phoneNumber - 要拨打的电话号码
  * @param {string} title - 拨打电话提示的标题，默认值为空字符串
  */
-export const makePhoneCall = (phoneNumber: string, title: string = '') => {
+export const makePhoneCall = (phoneNumber: string, title: string = t('global.call')) => {
   uni.showModal({
     title: title,
     content: phoneNumber,