更新：增加订单详情功能

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>