更新：我的订单兼容多种商品订单（电子书、课程、vip）显示

components/order/GoodsSelector.vue

@@ -9,7 +9,7 @@
         <image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
         <view class="info">
           <text class="name">{{ goods[selectedIndex].productName }}</text>
-          <text v-if="selectedGoodsPrice" class="price">NZ$ {{ selectedGoodsPrice }}</text>
+          <text v-if="selectedGoodsPrice" class="price">{{ selectedGoodsPrice }} 天医币</text>
         </view>
       </view>
       
@@ -30,21 +30,21 @@
             
             <!-- VIP优惠价 -->
             <view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
-              <text class="vip-price">NZ$ {{ parseFloat(item.vipPrice).toFixed(2) }}</text>
+              <text class="vip-price">{{ parseFloat(item.vipPrice).toFixed(2) }} 天医币</text>
               <text class="vip-label">VIP到手价</text>
-              <text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
+              <text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
             </view>
             
             <!-- 活动价 -->
             <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
-              <text class="activity-price">NZ$ {{ parseFloat(item.activityPrice).toFixed(2) }}</text>
+              <text class="activity-price">{{ parseFloat(item.activityPrice).toFixed(2) }} 天医币</text>
               <text class="activity-label">活动价</text>
-              <text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
+              <text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
             </view>
             
             <!-- 普通价格 -->
             <view v-else class="price-info">
-              <text class="normal-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
+              <text class="normal-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
             </view>
           </view>
         </view>

components/order/ProductInfo.vue

@@ -0,0 +1,110 @@
+<template>
+  <view class="order-item-content">
+    <view class="order-item-product-info">
+      <image
+        :src="productImg"
+        mode="aspectFit"
+        class="order-item-product-cover"
+      />
+      <view class="order-item-product-name" v-html="title"></view>
+    </view>
+    <view class="order-item-product-price">
+      <view class="price">{{ price }} 天医币</view>
+      <view class="count">x {{ 1 }}</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+interface Props {
+  data: any
+  type: string
+}
+const props = defineProps<Props>()
+
+const productImg = computed(() => {
+  
+  switch (props.type) {
+    case 'order':
+      return props.data[0]?.product?.productImages || ''
+    case 'abroadBook':
+      return props.data?.images || ''
+    case 'vip':
+      return '/static/vip.png'
+    case 'point':
+      return '/static/jifen.png'
+    default:
+      return ''
+  }
+})
+const title = computed(() => {
+  switch (props.type) {
+    case 'order':
+      return props.data[0]?.product?.productName || ''
+    case 'abroadBook':
+      return props.data?.name || ''
+    case 'vip':
+      return props.data?.title + '<text style="color: #ff4703; font-weight: bold;">(' + props.data?.year + '年)</text>' || ''
+    case 'point':
+      return ''
+    default:
+      return ''
+  }
+})
+const price = computed(() => {
+  switch (props.type) {
+    case 'order':
+      return props.data[0]?.product?.price || 0
+    case 'abroadBook':
+      return props.data?.abroadPrice || 0
+    case 'vip':
+      return props.data?.fee || 0
+    case 'point':
+      return ''
+    default:
+      return ''
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.order-item-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+
+  .order-item-product-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    .order-item-product-cover {
+      margin-right: 12px;
+      width: 40px;
+      height: 40px;
+      border-radius: 4px;
+      background-color: #f5f5f5;
+    }
+
+    .order-item-product-name {
+      color: #333;
+    }
+  }
+  .order-item-product-price {
+    font-weight: bold;
+    color: #333;
+    text-align: right;
+    font-size: 12px;
+
+    .count {
+      font-weight: normal;
+      color: #999;
+    }
+  }
+}
+</style>

pages/book/detail.vue

@@ -238,7 +238,7 @@ async function loadBookInfo() {
         productId: bookId.value,
         productName: bookInfo.value.name,
         productImages: bookInfo.value.images,
-        price: bookInfo.value.priceData?.dictValue || 0,
+        price: bookInfo.value.abroadPrice || 0,
         vipPrice: null,
         activityPrice: null,
         isVipPrice: 0,

pages/book/index.vue

@@ -162,9 +162,7 @@
           >
             <image :src="item.images" />
             <text class="book-text">{{ item.name }}</text>
-            <text v-if="formatPrice(item)" class="book-price">{{
+            <text class="book-price">{{ item.abroadPrice }} 天医币</text>
-              formatPrice(item)
-            }}</text>
             <text v-if="formatStats(item)" class="book-flag">{{
               formatStats(item)
             }}</text>

pages/user/order/index.vue

@@ -10,34 +10,32 @@
 
     <!-- 订单列表 -->
     <view class="order-list">
-      <view 
+      <wd-card v-for="order in orderList" :key="order.id" type="rectangle" custom-class="order-item">
-        v-for="order in orderList" 
+        <template #title>
-        :key="order.id" 
+          <view class="order-item-title">
-        class="order-item"
+            <view class="order-item-sn">
-      >
-        <view class="order-header">
-          <text class="book-name">{{ order.bookEntity.name }}</text>
-          <view class="price-info">
-            <image 
-              v-if="order.paymentMethod === '4'" 
-              src="/static/icon/coin.png" 
-              class="payment-icon"
-            />
-            <image 
-              v-else 
-              src="/static/icon/currency.png" 
-              class="payment-icon"
-            />
-            <text class="price">{{ order.orderMoney }}</text>
-            <text class="currency">NZD</text>
-          </view>
-        </view>
-        <text class="order-sn">
-          {{ $t('user.orderSn') }}
               {{ order.orderSn }}
-        </text>
+              <wd-icon name="file-copy" size="14px" color="#65A1FA" class="ml-1!" @click="copyToClipboard(order.orderSn)"></wd-icon>
-        <text class="create-time">{{ order.createTime }}</text>
+              <!-- <wd-button type="icon" icon="file-copy" size="small"></wd-button> -->
             </view>
+            <view class="order-item-status">{{ orderStatusMap[order.orderStatus] }}</view>
+          </view>
+        </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 === 'vip'" :data="order.vipBuyConfigEntity" :type="order.orderType" />
+        <!-- 三种订单类型商品信息 end -->
+        <view class="order-item-total-price">实付款：{{ order.orderMoney }} 天医币</view>
+
+        <template #footer>
+          <view>
+            <!-- <wd-button size="small" plain>申请售后</wd-button> -->
+            <wd-button v-if="order.orderStatus === 0" size="small" plain class="ml-2.5!">继续付款</wd-button>
+          </view>
+        </template>
+      </wd-card>
     </view>
   </z-paging>
 </template>
@@ -45,8 +43,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { getOrderList } from '@/api/modules/user'
-import type { IOrder } from '@/types/user'
+import type { IOrder } from '@/types/order'
 import { useI18n } from 'vue-i18n'
+import { copyToClipboard } from '@/utils/index'
+import ProductInfo from '@/components/order/ProductInfo.vue'
 
 const { t } = useI18n()
 const paging = ref<any>(null)
@@ -71,6 +71,12 @@ const ordersTabs = [
   },
 ]
 
+// 订单状态映射
+const orderStatusMap = {
+  '0': '待付款',
+  '3': '已完成',
+}
+
 /**
  * 处理订单状态切换
  */
@@ -96,135 +102,127 @@ const getData = async (page: number, pageSize: number) => {
     console.error('获取订单列表失败:', error)
   }
 }
+
+/**
+ * 获取订单图片
+ */
+const getOrderImage = (order: IOrder) => {
+  switch (order.orderType) {
+    case 'order':
+      return order.productList[0]?.product?.productImages || ''
+    case 'abroadBook':
+      return order.bookEntity?.images || ''
+    case 'vip':
+      return '/static/vip.png'
+    case 'point':
+      return '/static/jifen.png'
+    default:
+      return ''
+  }
+}
+
+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 ''
+  }
+}
+
+
 </script>
 
 <style lang="scss" scoped>
-$theme-color: #54a966;
-
 .order-page {
   min-height: 100vh;
   background-color: #f7faf9;
 }
 
-.custom-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  background-color: #fff;
-  border-bottom: 1rpx solid #e5e5e5;
-
-  .navbar-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 44px;
-    position: relative;
-
-    .navbar-left {
-      position: absolute;
-      left: 10px;
-      display: flex;
-      align-items: center;
-      padding: 10rpx;
-    }
-
-    .navbar-title {
-      font-size: 16px;
-      font-weight: 700;
-      color: #333;
-    }
-  }
-}
-
-.order-scroll {
-  height: 100vh;
-}
-
 .order-list {
-  padding: 0 20rpx 10rpx;
+  padding: 10px;
+  padding-bottom: 0;
 }
 
 .order-item {
-  background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
-  border-radius: 15rpx;
+  border-radius: 8px !important;
-  padding: 30rpx;
-  margin-top: 20rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 
-  .order-header {
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  :deep() {
+    .wd-card__title-content {
+      padding: 0 !important;
+    }
+    .wd-card__content{
+      padding: 10px 0 !important;
+    }
+  }
+
+  .order-item-title {
+    font-size: 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 20rpx;
+  }
 
-    .book-name {
+  .order-item-sn {
-      flex: 1;
+    display: flex;
-      font-size: 34rpx;
+    align-items: center;
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .order-item-status {
+    font-size: 12px;
+    color: #e55f18;
+  }
+
+  .order-item-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+
+    .order-item-product-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+
+      .order-item-product-name {
         color: #333;
+      }
+    }
+    .order-item-product-price {
       font-weight: bold;
-      max-width: 85%;
+      color: #333;
-      overflow: hidden;
+      text-align: right;
-      text-overflow: ellipsis;
+      font-size: 12px;
-      white-space: nowrap;
-    }
 
-    .price-info {
+      .count {
-      display: flex;
+        font-weight: normal;
-      align-items: center;
-
-      .payment-icon {
-        width: 38rpx;
-        height: 38rpx;
-        margin-right: 5rpx;
-      }
-
-      .price {
-        font-size: 36rpx;
-        color: $theme-color;
-        font-weight: bold;
-      }
-
-      .currency {
-        font-size: 32rpx;
-        color: $theme-color;
-        font-weight: bold;
-        margin-left: 5rpx;
-      }
-    }
-  }
-
-  .order-sn {
-    display: block;
-    font-size: 30rpx;
-    color: #666;
-    line-height: 38rpx;
-    margin-bottom: 10rpx;
-  }
-
-  .create-time {
-    display: block;
-    font-size: 28rpx;
-    color: #aaa;
-  }
-}
-
-.load-tips {
-  padding: 40rpx 0 20rpx;
-  text-align: center;
-}
-
-.empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  padding-top: 100rpx;
-
-  .empty-text {
-    font-size: 30rpx;
         color: #999;
       }
+    }
+  }
+
+  .order-item-total-price {
+    font-weight: bold;
+    font-size: 14px;
+    color: #333;
+    margin-top: 10px;
+    text-align: right;
+    line-height: 1;
+  }
 }
 </style>

style/tailwind.css

@@ -8,6 +8,8 @@
     --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;
     --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);
@@ -203,6 +205,30 @@
       max-width: 96rem;
     }
   }
+  .\!ml-2 {
+    margin-left: calc(var(--spacing) * 2) !important;
+  }
+  .\!ml-12 {
+    margin-left: calc(var(--spacing) * 12) !important;
+  }
+  .\!ml-\[10px\] {
+    margin-left: 10px !important;
+  }
+  .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;
+  }
+  .ml-12 {
+    margin-left: calc(var(--spacing) * 12);
+  }
   .block {
     display: block;
   }
@@ -236,6 +262,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,);
   }
@@ -249,6 +278,9 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .bg-\[\#e55f18\] {
+    background-color: #e55f18;
+  }
   .bg-\[blue\] {
     background-color: blue;
   }
@@ -258,6 +290,9 @@
   .bg-\[transparent\] {
     background-color: transparent;
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .pt-\[40px\] {
     padding-top: 40px;
   }
@@ -273,6 +308,9 @@
   .text-\[red\] {
     color: red;
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -283,6 +321,9 @@
     --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;
+  }
   .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);

tailwind.config.js

@@ -15,8 +15,8 @@ module.exports = {
 
 // 指定要处理的文件  
     content: [  
-        './pages/**/*.{vue,js}',  
+        './pages/**/*.{vue,js,ts}',
-        './components/**/*.{vue,js}',
+        './components/**/*.{vue,js,ts}',
         './main.js',
         './App.vue',
         './index.html'  

types/order.d.ts

@@ -13,6 +13,18 @@ export interface IGoods {
   delFlag?: number                 // 删除标记 -1-已下架
 }
 
+/**
+ * 订单接口
+ */
+export interface IOrder {
+  id: number
+  orderSn: string
+  orderMoney: number
+  paymentMethod: string  // '4'-虚拟货币, '5'-真实货币
+  createTime: string
+  [key: string]: any
+}
+
 /**
  * 订单创建参数接口
  */

types/user.ts

@@ -68,23 +68,6 @@ export interface IVipInfo {
   [key: string]: any
 }
 
-/**
- * 订单接口
- */
-export interface IOrder {
-  id: number
-  orderSn: string
-  bookEntity: {
-    id: number
-    name: string
-    images: string
-  }
-  orderMoney: number
-  paymentMethod: string  // '4'-虚拟货币, '5'-真实货币
-  createTime: string
-  [key: string]: any
-}
-
 /**
  * VIP套餐接口
  */

utils/index.ts

@@ -43,7 +43,7 @@ export const makePhoneCall = (phoneNumber: string, title: string) => {
 /**
  * 复制到剪贴板
  */
-export const copyToClipboard = (content: string, title: string, t: Function) => {
+export const copyToClipboard = (content: string, title: string = '') => {
   uni.setClipboardData({
     data: content,
     success: () => {
@@ -52,7 +52,7 @@ export const copyToClipboard = (content: string, title: string, t: Function) =>
         icon: 'none'
       })
     },
-    fail: (error) => {
+    fail: (error: any) => {
       console.error('复制失败:', error)
     }
   })