|
|
@@ -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>
|
|
|
|