Переглянути джерело

feat:对接积分商品订单详情(新格式)

xyh 4 місяців тому
батько
коміт
cb63529723

+ 1 - 2
src/points/components/product-list/product-list.vue

@@ -50,7 +50,7 @@
     <view class="product-grid" v-else-if="products.length > 0">
       <view class="product-item" v-for="(product, index) in products" :key="index">
         <view class="product-image">
-          <view v-if="!imageErrorMap[product.id]">
+          <view v-if="!imageErrorMap[product.id]" class="product-image">
             <ImageItem 
               :src="getImageUrl(product.productMainImage)"
               @image-error="handleImageError(product.id)"
@@ -60,7 +60,6 @@
             <uni-icons type="image" size="64rpx" color="#999" @click="resetImageError(product.id)"></uni-icons>
             <text style="font-size: 24rpx; color: #999; margin-top: 16rpx;">加载失败</text>
           </view>
-
         </view>
         <view class="product-info">
           <u--text class="product-name" :lines="1" :text="product.name"></u--text>

+ 57 - 33
src/points/order/orderDetails.vue

@@ -1,33 +1,16 @@
 <script>
 import {getPointOrderInfo} from '@/api/pointOrder'
+import ImageItem from "@/components/swiper/components/image.vue";
 export default {
   name: "orderDetails",
+  components: {ImageItem},
   data() {
     return {
-      orderInfo: {
-        status: 'refund',
-        statusText: '同意退货',
-        product: {
-          name: '广誉源会员定制玻璃杯',
-          spec: '大号,白色',
-          price: 10,
-          points: 1000,
-          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
-        },
-        orderTime: '2025-09-14 17:21:55',
-        shipTime: '2026-1-26 10:00:00',
-        orderNo: '2026147852369',
-        logisticsNo: 'SF852147896',
-        recipient: {
-          name: '张*',
-          phone: '150****3265',
-          address: '山西省太原市小店区*******************'
-        },
-        refund: {
-          reason: '不想要了',
-          applyTime: '2026-1-26 10:00:00'
-        }
-      },
+      orderInfo: {},
+      afterSaleInfo:{},
+      productInfo:{},
+      // 图片加载状态
+      imageErrorMap: {},
       // 设备信息
       deviceInfo: uni.getSystemInfoSync(),
       show:false,
@@ -58,13 +41,45 @@ export default {
     }
   },
   methods: {
+    getImageUrl(imagePath) {
+      if (!imagePath) return '';
+      const publicUrl = this.$globalData?.publicUrl || '';
+      return publicUrl + imagePath;
+    },
+    // 处理图片加载失败
+    handleImageError(productId) {
+      this.$set(this.imageErrorMap, productId, true);
+    },
+    // 重置图片加载状态
+    resetImageError(productId) {
+      this.$set(this.imageErrorMap, productId, false);
+    },
     //获取订单详情
     async getOrderInfo() {
       const res = await getPointOrderInfo({
         orderNo: this.orderNo,
         openId: uni.getStorageSync('wx_copenid')
       })
-      this.orderInfo = res.data.data;
+      let {afterSaleInfo,orderInfo,productInfo} = res.data.data;
+
+      let skuspecStr = '';
+      try {
+        const skuspec = productInfo?.skuSpec;
+        if (skuspec && skuspec !== 'undefined' && skuspec !== 'null') {
+          const parsedSpec = JSON.parse(skuspec);
+          if (Array.isArray(parsedSpec)) {
+            skuspecStr = parsedSpec.map(t=>t?.specValue).filter(Boolean).toString();
+          }
+        }
+      } catch (error) {
+        console.error('解析 skuspec 失败:', error);
+      }
+      this.productInfo = {
+        ...productInfo,
+        skuSpec: skuspecStr
+      };
+      this.afterSaleInfo = afterSaleInfo;
+      this.orderInfo = orderInfo;
     },
     orderTitle(info){
       return info.orderStatusName || '--'
@@ -137,15 +152,24 @@ export default {
     </view>
     <!-- 商品信息 -->
     <view class="product-info">
-<!--      <view class="product-image">-->
-<!--        <image :src="orderInfo.image" mode="aspectFill"></image>-->
-<!--      </view>-->
+      <view class="product-image">
+        <view v-if="!imageErrorMap[productInfo.productId]" class="product-image">
+          <ImageItem
+              :src="getImageUrl(productInfo.skuImage)"
+              @image-error="handleImageError(productInfo.productId)"
+          />
+        </view>
+        <view v-else style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 120rpx; background-color: #f5f5f5; border-radius: 8rpx;">
+          <uni-icons type="image" size="54rpx" color="#999" @click="resetImageError(productInfo.productId)"></uni-icons>
+          <text style="font-size: 20rpx; color: #999; margin-top: 13rpx;">加载失败</text>
+        </view>
+      </view>
       <view class="product-details">
-        <text class="product-name">{{ orderInfo.name }}</text>
-        <text class="product-spec">已选 {{ orderInfo.spec }}</text>
-        <text class="product-price" v-if="orderInfo.paymentType == 1">{{ orderInfo.pointsUsed }}积分</text>
-        <text class="product-price" v-if="orderInfo.paymentType == 2">¥{{ orderInfo.totalAmount }}</text>
-        <text class="product-price" v-if="orderInfo.paymentType == 3">¥{{ orderInfo.totalAmount }}+{{ orderInfo.pointsUsed }}积分</text>
+        <text class="product-name">{{ productInfo.productName }}</text>
+        <text class="product-spec">已选 {{ productInfo.skuSpec }}</text>
+        <text class="product-price" v-if="productInfo.paymentType == 1">{{ orderInfo.pointsUsed }}积分</text>
+        <text class="product-price" v-if="productInfo.paymentType == 2">¥{{ orderInfo.totalAmount }}</text>
+        <text class="product-price" v-if="productInfo.paymentType == 3">¥{{ orderInfo.totalAmount }}+{{ orderInfo.pointsUsed }}积分</text>
       </view>
     </view>