You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1600 lines
36 KiB
1600 lines
36 KiB
<template>
|
|
<view class="order-detail-container">
|
|
<!-- 订单状态头部 -->
|
|
<view class="status-header">
|
|
<view class="status-badge" :class="[getStatusClass(orderDetail.status)]">
|
|
{{ getStatusText(orderDetail.status) }}
|
|
</view>
|
|
<view class="order-title">订单详情</view>
|
|
</view>
|
|
<!-- 商品标题 -->
|
|
<view class="product-title">
|
|
{{ orderDetail.orderName || "--" }}
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view class="goods-section">
|
|
<view
|
|
class="goods-item"
|
|
v-for="goods in orderDetail.orderChildVos"
|
|
:key="goods.id"
|
|
>
|
|
<view class="goods-checkbox">
|
|
<view class="checkbox-icon">
|
|
<image
|
|
mode="aspectFill"
|
|
:src="showImgJdsz(goods.goodsImg.split(',')[0])"
|
|
></image>
|
|
<!-- 当商品类型为2时显示状态标签 -->
|
|
<view
|
|
v-if="goods.type === 2"
|
|
class="goods-status-badge"
|
|
:class="[getGoodsStatusClass(goods.status)]"
|
|
>
|
|
{{ getGoodsStatusText(goods.status) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-content">
|
|
<view class="goods-info">
|
|
<view class="goods-name">{{ goods.goodsTitle || "-" }}</view>
|
|
<view class="goods-name" v-if="goods.skuName">{{
|
|
goods.skuName || "-"
|
|
}}</view>
|
|
<view class="goods-desc">{{ getGoodsTypeName(goods.type) }}</view>
|
|
<view class="goods-quantity">数量：{{ goods.num || 1 }}</view>
|
|
<view
|
|
class="goods-specs"
|
|
v-if="
|
|
goods.orderExchangeVo &&
|
|
goods.orderExchangeVo.orderExchangeDetailVos
|
|
"
|
|
>
|
|
<view
|
|
class="spec-tag"
|
|
v-for="(item, index) in goods.orderExchangeVo
|
|
.orderExchangeDetailVos"
|
|
:key="index"
|
|
>
|
|
{{ item.specValueOne }} / {{ item.specValueTwo }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-actions">
|
|
<button
|
|
v-if="goods.status == 1"
|
|
class="action-btn"
|
|
@click="handleGoodsAction(goods)"
|
|
>
|
|
{{ getGoodsActionText(goods.type) }}
|
|
</button>
|
|
<template v-else>
|
|
<template v-if="goods.type == 2">
|
|
<button
|
|
v-if="goods.type == 2 && goods.status == 3"
|
|
class="action-btn confirm-btn"
|
|
@click="confirmReceipt(goods)"
|
|
>
|
|
确认收货
|
|
</button>
|
|
<button
|
|
v-if="goods.type == 2 && goods.status != 1"
|
|
class="action-btn"
|
|
@click="showLogisticsInfo(goods)"
|
|
>
|
|
查看物流
|
|
</button>
|
|
</template>
|
|
<button
|
|
v-else
|
|
class="action-btn"
|
|
@click="handleGoodsAction(goods)"
|
|
>
|
|
{{ getGoodsActionTexted(goods.type) }}
|
|
</button>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 金额汇总 -->
|
|
<view class="amount-summary">
|
|
<view class="summary-row">
|
|
<text class="summary-label">订单金额</text>
|
|
<text class="summary-value"
|
|
>¥{{ orderDetail.payMoney || "0.00" }}</text
|
|
>
|
|
</view>
|
|
<view class="summary-row">
|
|
<text class="summary-label">运费</text>
|
|
<text class="summary-value"
|
|
>¥{{ orderDetail.postMoney || "0.00" }}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息 -->
|
|
<view class="order-info-section">
|
|
<view class="section-title">订单信息</view>
|
|
<view class="info-row">
|
|
<text class="info-label">订单编号：</text>
|
|
<text class="info-value">{{ orderDetail.orderId }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">权益码：</text>
|
|
<text class="info-value" style="font-family: Courier New">{{
|
|
orderDetail.activeCode
|
|
}}</text>
|
|
</view>
|
|
<!-- <view class="info-row">
|
|
<text class="info-label">商品合计</text>
|
|
<text class="info-value">{{ orderDetail.goodsAmount }}</text>
|
|
</view> -->
|
|
<view class="info-row">
|
|
<text class="info-label">物流运费</text>
|
|
<text class="info-value">{{ orderDetail.postMoney || "0.00" }}</text>
|
|
</view>
|
|
<!-- <view class="info-row">
|
|
<text class="info-label">优惠券</text>
|
|
<text class="info-value">{{
|
|
orderDetail.discountAmount > 0 ? "无" : "无"
|
|
}}</text>
|
|
</view> -->
|
|
<view class="info-row total">
|
|
<text class="info-label">合计实付</text>
|
|
<text class="info-value total-amount">{{ orderDetail.payMoney }}</text>
|
|
</view>
|
|
<!-- <view class="info-row">
|
|
<text class="info-label">积分</text>
|
|
<text class="info-value">{{ orderDetail.points || "已获得1分" }}</text>
|
|
</view> -->
|
|
<!-- <view class="info-row">
|
|
<text class="info-label">支付方式</text>
|
|
<text class="info-value">{{
|
|
orderDetail.payMethod || "线上支付"
|
|
}}</text>
|
|
</view> -->
|
|
<view class="info-row">
|
|
<text class="info-label">支付时间</text>
|
|
<text class="info-value">{{ orderDetail.payTime }}</text>
|
|
</view>
|
|
<!-- <view class="info-row">
|
|
<text class="info-label">实际发货时间</text>
|
|
<text class="info-value">{{
|
|
formatTime(orderDetail.shippingTime) ||
|
|
formatTime(orderDetail.createTime)
|
|
}}</text>
|
|
</view> -->
|
|
<view class="info-row">
|
|
<text class="info-label">备注</text>
|
|
<text class="info-value">{{ orderDetail.remark || "XXXX" }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮占位div -->
|
|
<view class="bottom-placeholder"></view>
|
|
|
|
<!-- 底部操作 -->
|
|
<view class="bottom-actions">
|
|
<!-- <button class="action-btn-bottom primary" @click="handleMainAction">
|
|
{{ getMainActionText() }}
|
|
</button> -->
|
|
<!-- 售后按钮 -->
|
|
<button
|
|
class="action-btn-bottom after-sale-btn"
|
|
@click="handleShowAfterSalePopup"
|
|
v-if="orderDetail.status !== 0"
|
|
>
|
|
售后
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 权益码弹窗 -->
|
|
<view
|
|
class="equity-popup-mask"
|
|
v-if="showEquityPopup"
|
|
@click="closeEquityPopup"
|
|
>
|
|
<view class="equity-popup" @click.stop>
|
|
<view class="popup-header">
|
|
<text class="popup-title">权益码</text>
|
|
<text class="popup-close" @click="closeEquityPopup">×</text>
|
|
</view>
|
|
<view class="popup-content">
|
|
<!-- 二维码 -->
|
|
<view class="qrcode-container">
|
|
<image
|
|
class="qrcode-image"
|
|
:src="orderDetail.qrcode"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
<!-- 编号串码 -->
|
|
<view class="code-container">
|
|
<text class="code-label">权益码：</text>
|
|
<text class="code-value" @longpress="copyEquityCode">{{
|
|
orderDetail.equityCode
|
|
}}</text>
|
|
</view>
|
|
<text class="code-tip">长按编号可复制</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 物流信息弹窗 -->
|
|
<view
|
|
class="logistics-popup-mask"
|
|
v-if="showLogisticsPopup"
|
|
@click="closeLogisticsPopup"
|
|
>
|
|
<view class="logistics-popup" @click.stop>
|
|
<view class="popup-header">
|
|
<text class="popup-title">物流信息</text>
|
|
<text class="popup-close" @click="closeLogisticsPopup">×</text>
|
|
</view>
|
|
<view class="popup-content">
|
|
<!-- 商品状态 -->
|
|
<view class="logistics-section" v-if="currentGoodsInfo">
|
|
<view class="section-title">商品状态</view>
|
|
<view class="status-info">
|
|
<view
|
|
class="status-badge-popup"
|
|
:class="[getGoodsStatusClass(currentGoodsInfo.status)]"
|
|
>
|
|
{{ getGoodsStatusText(currentGoodsInfo.status) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收货地址 -->
|
|
<view class="logistics-section">
|
|
<view class="section-title">收货地址</view>
|
|
<view class="address-info" v-if="currentLogisticsInfo">
|
|
<view class="address-detail">
|
|
<text class="address-text">
|
|
{{ currentLogisticsInfo.province
|
|
}}{{ currentLogisticsInfo.city }}{{ currentLogisticsInfo.area
|
|
}}{{ currentLogisticsInfo.address }}
|
|
</text>
|
|
</view>
|
|
<view class="contact-info">
|
|
<text class="contact-name">{{
|
|
currentLogisticsInfo.linkName
|
|
}}</text>
|
|
<text class="contact-phone">{{
|
|
currentLogisticsInfo.phone
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="logistics-section">
|
|
<view class="section-title">备注</view>
|
|
<view class="info-item">
|
|
<text class="info-value">{{
|
|
currentLogisticsInfo.remark || "--"
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 预约发货时间 -->
|
|
<view class="logistics-section">
|
|
<view class="section-title">预约发货时间</view>
|
|
<view class="info-item">
|
|
<text class="info-value">{{
|
|
currentLogisticsInfo.bookDeliveryTime || "--"
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快递信息 -->
|
|
<view class="logistics-section">
|
|
<view class="section-title">快递信息</view>
|
|
<view class="info-item">
|
|
<text class="info-label">快递公司：</text>
|
|
<text class="info-value">{{
|
|
currentGoodsInfo.expressCompany || "--"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">快递单号：</text>
|
|
<text class="info-value">{{
|
|
currentGoodsInfo.expressCode || "--"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">实际发货时间：</text>
|
|
<text class="info-value">{{
|
|
currentGoodsInfo.expressTime || "--"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">发货人：</text>
|
|
<text class="info-value">{{
|
|
currentGoodsInfo.deliveryUserName || "--"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">收货时间：</text>
|
|
<text class="info-value">{{
|
|
currentGoodsInfo.completeTime || "--"
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 售后商品选择弹窗 -->
|
|
<view
|
|
class="after-sale-popup-mask"
|
|
v-if="showAfterSalePopup"
|
|
@click="closeAfterSalePopup"
|
|
>
|
|
<view class="after-sale-popup" @click.stop>
|
|
<view class="popup-header">
|
|
<text class="popup-title">选择售后商品</text>
|
|
<text class="popup-close" @click="closeAfterSalePopup">×</text>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="goods-list">
|
|
<view
|
|
class="goods-select-item"
|
|
v-for="goods in orderDetail.orderChildVos"
|
|
:key="goods.id"
|
|
@click="selectGoodsForAfterSale(goods)"
|
|
>
|
|
<view class="goods-select-info">
|
|
<image
|
|
class="goods-select-image"
|
|
:src="showImgJdsz(goods.goodsImg.split(',')[0])"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="goods-select-details">
|
|
<text class="goods-select-name">{{
|
|
goods.goodsTitle || "-"
|
|
}}</text>
|
|
|
|
<!-- 规格信息 - 当type为2时显示 -->
|
|
<view
|
|
class="goods-select-specs"
|
|
v-if="
|
|
goods.type === 2 &&
|
|
goods.orderExchangeVo &&
|
|
goods.orderExchangeVo.orderExchangeDetailVos
|
|
"
|
|
>
|
|
<view
|
|
class="spec-tag"
|
|
v-for="(item, index) in goods.orderExchangeVo
|
|
.orderExchangeDetailVos"
|
|
:key="index"
|
|
>
|
|
{{ item.specValueOne }} / {{ item.specValueTwo }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 类型和数量信息 -->
|
|
<view class="goods-select-info-row">
|
|
<text class="goods-select-type">{{
|
|
getGoodsTypeName(goods.type)
|
|
}}</text>
|
|
<text class="goods-select-quantity"
|
|
>数量：{{ goods.num || 1 }}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-select-arrow">
|
|
<uni-icons type="right" size="16" color="#999" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId: "",
|
|
showEquityPopup: false,
|
|
showLogisticsPopup: false, // 物流信息弹窗
|
|
currentLogisticsInfo: null, // 当前物流信息
|
|
currentGoodsInfo: null, // 当前商品信息
|
|
orderDetail: {
|
|
orderChildVos: [],
|
|
},
|
|
showAfterSalePopup: false, // 新增：售后商品选择弹窗
|
|
};
|
|
},
|
|
computed: {
|
|
// 是否有实体商品需要收货
|
|
hasPhysicalGoods() {
|
|
return (
|
|
this.orderDetail &&
|
|
this.orderDetail.orderChildVos.some((goods) => goods.type === 2)
|
|
);
|
|
},
|
|
// 是否显示底部操作按钮
|
|
showBottomActions() {
|
|
return [0, 3].includes(this.orderDetail.status);
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
this.loadOrderDetail();
|
|
} else {
|
|
// 如果没有传入订单ID，使用假数据进行渲染
|
|
this.loadMockData();
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载订单详情
|
|
async loadOrderDetail() {
|
|
try {
|
|
this.Post({}, `/framework/order/${this.orderId}`, "DES").then((res) => {
|
|
if (res.code == 200) {
|
|
this.orderDetail = res.data;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error("加载订单详情失败:", error);
|
|
uni.showToast({
|
|
title: "加载失败",
|
|
icon: "none",
|
|
});
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
|
|
// 加载假数据
|
|
|
|
// 获取状态图标
|
|
getStatusIcon(status) {
|
|
const iconMap = {
|
|
0: "/static/icon/status-pending.png",
|
|
1: "/static/icon/status-waiting.png",
|
|
2: "/static/icon/status-shipping.png",
|
|
3: "static/icon/status-completed.png",
|
|
4: "/static/icon/status-refund.png",
|
|
};
|
|
return iconMap[status] || "/static/icon/status-default.png";
|
|
},
|
|
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
0: "待激活",
|
|
1: "待使用",
|
|
2: "待收货",
|
|
3: "已完成",
|
|
4: "售后/退款",
|
|
"-1": "取消",
|
|
};
|
|
return statusMap[status] || "未知";
|
|
},
|
|
|
|
// 获取状态样式类
|
|
getStatusClass(status) {
|
|
const classMap = {
|
|
0: "status-pending",
|
|
1: "status-waiting",
|
|
2: "status-shipping",
|
|
3: "status-completed",
|
|
4: "status-rejected",
|
|
};
|
|
return classMap[status] || "status-default";
|
|
},
|
|
|
|
// 获取商品操作按钮文本
|
|
getGoodsActionText(type) {
|
|
const textMap = {
|
|
1: "去查看",
|
|
2: "预约发货",
|
|
3: "去使用",
|
|
};
|
|
return textMap[type] || "去查看";
|
|
},
|
|
getGoodsActionTexted(type) {
|
|
const textMap = {
|
|
1: "去查看",
|
|
2: "查看物流",
|
|
3: "已使用",
|
|
};
|
|
return textMap[type] || "去查看";
|
|
},
|
|
showImgJdsz(img) {
|
|
if (!img) return;
|
|
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) {
|
|
return img;
|
|
} else {
|
|
return this.JDSU_IMG_URL + img;
|
|
}
|
|
},
|
|
|
|
// 获取商品操作按钮样式
|
|
getGoodsActionClass(type) {
|
|
const classMap = {
|
|
1: "btn-view",
|
|
2: "btn-logistics",
|
|
3: "btn-used",
|
|
};
|
|
return classMap[type] || "btn-view";
|
|
},
|
|
|
|
// 获取主要操作按钮文本
|
|
getMainActionText() {
|
|
const textMap = {
|
|
0: "立即支付",
|
|
1: "返回",
|
|
2: "返回",
|
|
3: "返回",
|
|
4: "返回",
|
|
};
|
|
return textMap[this.orderDetail.status] || "返回";
|
|
},
|
|
|
|
// 获取商品类型名称
|
|
getGoodsTypeName(type) {
|
|
const typeMap = {
|
|
1: "IP数字资产",
|
|
2: "IP资源商品",
|
|
3: "门票",
|
|
};
|
|
return typeMap[type] || "未知类型";
|
|
},
|
|
|
|
// 获取商品状态文本
|
|
getGoodsStatusText(status) {
|
|
const statusMap = {
|
|
1: "待使用",
|
|
2: "待发货",
|
|
3: "已发货",
|
|
4: "已完成",
|
|
5: "售后",
|
|
};
|
|
return statusMap[status] || "未知状态";
|
|
},
|
|
|
|
// 获取商品状态样式类
|
|
getGoodsStatusClass(status) {
|
|
const classMap = {
|
|
1: "goods-status-waiting",
|
|
2: "goods-status-pending",
|
|
3: "goods-status-shipping",
|
|
4: "goods-status-completed",
|
|
5: "goods-status-refund",
|
|
};
|
|
return classMap[status] || "goods-status-default";
|
|
},
|
|
|
|
// 复制订单号
|
|
copyOrderNo() {
|
|
uni.setClipboardData({
|
|
data: this.orderDetail.orderNo,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "订单号已复制",
|
|
icon: "success",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
// 显示权益码
|
|
showEquityCode() {
|
|
this.showEquityPopup = true;
|
|
},
|
|
|
|
// 关闭权益码弹窗
|
|
closeEquityPopup() {
|
|
this.showEquityPopup = false;
|
|
},
|
|
|
|
// 处理商品操作
|
|
handleGoodsAction(goods) {
|
|
switch (goods.type) {
|
|
case 1: // IP数字资产 - 查看
|
|
this.viewDigitalAsset(goods);
|
|
break;
|
|
case 2: // IP资源商品 - 预约发货
|
|
this.reserveDelivery(goods);
|
|
break;
|
|
case 3: // 君道苏州门票 - 去使用
|
|
this.useTicket(goods);
|
|
break;
|
|
}
|
|
},
|
|
|
|
// 查看数字资产
|
|
viewDigitalAsset(goods) {
|
|
// 跳转到数字资产详情页面
|
|
|
|
uni.navigateTo({
|
|
url: "/subPackages/memorialAlbum/detail?id=" + goods.childId,
|
|
});
|
|
},
|
|
|
|
// 预约发货
|
|
reserveDelivery(goods) {
|
|
// 跳转到确认订单页面
|
|
if (goods.status == 1) {
|
|
uni.navigateTo({
|
|
url: `/subPackages/orderQy/confrim?goodsId=${goods.goodsId}&orderChildId=${goods.childId}`,
|
|
});
|
|
} else {
|
|
this.showLogisticsInfo(goods);
|
|
}
|
|
},
|
|
|
|
// 使用门票
|
|
useTicket(goods) {
|
|
// 处理使用门票逻辑
|
|
this.toJdszWx('pages/user/order/sceneOrderInfo/index??id='+goods.thirdOrderId)
|
|
},
|
|
|
|
// 显示物流信息
|
|
showLogisticsInfo(goods) {
|
|
if (goods.orderExchangeVo) {
|
|
this.currentLogisticsInfo = goods.orderExchangeVo;
|
|
this.currentGoodsInfo = goods;
|
|
this.showLogisticsPopup = true;
|
|
} else {
|
|
uni.showToast({
|
|
title: "暂无物流信息",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
|
|
// 关闭物流信息弹窗
|
|
closeLogisticsPopup() {
|
|
this.showLogisticsPopup = false;
|
|
this.currentLogisticsInfo = null;
|
|
this.currentGoodsInfo = null;
|
|
},
|
|
|
|
// 查看商品详情
|
|
viewGoodsDetail(goods) {
|
|
// 根据商品类型跳转到不同页面
|
|
if (goods.type === 1) {
|
|
uni.navigateTo({
|
|
url: `/subPackages/equityGoods/detail?id=${goods.goodsId}`,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 复制权益码
|
|
copyEquityCode() {
|
|
uni.setClipboardData({
|
|
data: this.orderDetail.equityCode,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "权益码已复制",
|
|
icon: "success",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
// 取消订单
|
|
async cancelOrder() {
|
|
const res = await uni.showModal({
|
|
title: "确认取消",
|
|
content: "确定要取消这个订单吗？",
|
|
});
|
|
|
|
if (res.confirm) {
|
|
try {
|
|
await this.cancelOrderApi(this.orderId);
|
|
uni.showToast({
|
|
title: "订单已取消",
|
|
icon: "success",
|
|
});
|
|
this.loadOrderDetail();
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: "取消失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// 支付订单
|
|
payOrder() {
|
|
// 跳转到支付页面或调用支付接口
|
|
uni.navigateTo({
|
|
url: `/pages/payment/index?orderId=${this.orderId}`,
|
|
});
|
|
},
|
|
|
|
// 再次购买
|
|
buyAgain() {
|
|
// 跳转到商品页面
|
|
uni.navigateTo({
|
|
url: `/subPackages/equityGoods/detail?id=${this.orderDetail.packageId}`,
|
|
});
|
|
},
|
|
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
|
|
// 处理主要操作
|
|
handleMainAction() {
|
|
if (this.orderDetail.status === 0) {
|
|
this.payOrder();
|
|
} else {
|
|
this.goBack();
|
|
}
|
|
},
|
|
|
|
// 格式化时间
|
|
formatTime(time) {
|
|
if (!time) return "";
|
|
const date = new Date(time);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
|
|
2,
|
|
"0"
|
|
)}-${String(date.getDate()).padStart(2, "0")} ${String(
|
|
date.getHours()
|
|
).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
|
|
},
|
|
|
|
// API接口 - 取消订单
|
|
async cancelOrderApi(orderId) {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve({ code: 200, message: "取消成功" });
|
|
}, 500);
|
|
});
|
|
},
|
|
|
|
// 确认收货
|
|
async confirmReceipt(goods) {
|
|
uni.showModal({
|
|
title: "确认收货",
|
|
content: "确认已收到商品吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
try {
|
|
uni.showLoading({
|
|
title: "确认中...",
|
|
});
|
|
|
|
// 调用确认收货API
|
|
this.Post(
|
|
{
|
|
childOrderId: goods.childId,
|
|
},
|
|
"/framework/order/complete",
|
|
"DES"
|
|
).then((res) => {
|
|
uni.hideLoading();
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "确认收货成功",
|
|
icon: "success",
|
|
});
|
|
// 重新加载订单详情
|
|
setTimeout(() => {
|
|
this.loadOrderDetail();
|
|
}, 800);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || "确认收货失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {
|
|
uni.hideLoading();
|
|
console.error("确认收货失败:", error);
|
|
uni.showToast({
|
|
title: "确认收货失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
// 显示售后商品选择弹窗
|
|
handleShowAfterSalePopup() {
|
|
this.showAfterSalePopup = true;
|
|
},
|
|
|
|
// 关闭售后商品选择弹窗
|
|
closeAfterSalePopup() {
|
|
this.showAfterSalePopup = false;
|
|
},
|
|
|
|
// 选择商品进行售后
|
|
selectGoodsForAfterSale(goods) {
|
|
this.currentGoodsInfo = goods; // 设置当前商品信息
|
|
this.showAfterSalePopup = false; // 关闭弹窗
|
|
|
|
// 构建商品信息对象
|
|
const productInfo = {
|
|
id: goods.goodsId,
|
|
image: this.showImgJdsz(goods.goodsImg.split(",")[0]),
|
|
title: goods.goodsTitle,
|
|
subtitle: goods.skuName || "",
|
|
description: this.getGoodsTypeName(goods.type),
|
|
};
|
|
|
|
uni.navigateTo({
|
|
url: `/subPackages/afterSale/add?productInfo=${encodeURIComponent(
|
|
JSON.stringify(productInfo)
|
|
)}`,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-detail-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
// 状态头部
|
|
.status-header {
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
|
|
&.status-pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.status-waiting {
|
|
background-color: #007aff;
|
|
}
|
|
|
|
&.status-shipping {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.status-completed {
|
|
background-color: #666;
|
|
}
|
|
|
|
&.status-rejected {
|
|
background-color: #ff3b30;
|
|
}
|
|
}
|
|
|
|
.order-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
// 通用区域样式
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
// 收货地址区域
|
|
.address-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.address-card {
|
|
background-color: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.address-text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 1.5;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.contact-info {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.contact-name,
|
|
.contact-phone {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
// 预约发货区域
|
|
.delivery-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
// 商品标题
|
|
.product-title {
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// 商品列表
|
|
.goods-section {
|
|
background-color: #fff;
|
|
padding: 0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.goods-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.goods-checkbox {
|
|
margin-right: 20rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.checkbox-icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
// 商品状态标签
|
|
.goods-status-badge {
|
|
position: absolute;
|
|
top: -8rpx;
|
|
right: -8rpx;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
z-index: 10;
|
|
|
|
&.goods-status-waiting {
|
|
background-color: #007aff;
|
|
}
|
|
|
|
&.goods-status-pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.goods-status-shipping {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.goods-status-completed {
|
|
background-color: #666;
|
|
}
|
|
|
|
&.goods-status-refund {
|
|
background-color: #ff3b30;
|
|
}
|
|
|
|
&.goods-status-default {
|
|
background-color: #999;
|
|
}
|
|
}
|
|
|
|
.goods-content {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.goods-info {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.goods-desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.goods-quantity {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.goods-actions {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
border: none;
|
|
|
|
padding: 0rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
color: #333333;
|
|
transition: all 0.3s ease;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
background-color: #77f3f9;
|
|
height: 55rpx;
|
|
line-height: 55rpx;
|
|
}
|
|
.action-btn-bottom {
|
|
padding: 20rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
border: none;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
color: #333333;
|
|
transition: all 0.3s ease;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
background-color: #77f3f9;
|
|
}
|
|
.confirm-btn {
|
|
background-color: #34c759;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.logistics-btn {
|
|
background-color: #007aff;
|
|
color: #ffffff;
|
|
margin-top: 10rpx;
|
|
}
|
|
// 金额汇总
|
|
.amount-summary {
|
|
padding: 20rpx 30rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
background-color: white;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
// 订单信息
|
|
.order-info-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.total {
|
|
padding-top: 16rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
|
|
&.total-amount {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #ff3b30;
|
|
}
|
|
}
|
|
|
|
.no-address {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// 底部按钮占位
|
|
.bottom-placeholder {
|
|
height: 180rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
// 底部操作
|
|
.bottom-actions {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
border-top: 1rpx solid #eee;
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
.action-btn-bottom {
|
|
flex: 1;
|
|
padding: 0rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
color: #333333;
|
|
transition: all 0.3s ease;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
background-color: #77f3f9;
|
|
height: 55rpx;
|
|
line-height: 55rpx;
|
|
|
|
&.after-sale-btn {
|
|
background-color: #ff4757;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 权益码弹窗
|
|
.equity-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.equity-popup {
|
|
width: 600rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.popup-close {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 40rpx 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.qrcode-container {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.qrcode-image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
border: 1px solid #eee;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.code-container {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.code-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.code-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
background-color: #f8f9fa;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.code-tip {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// 物流信息弹窗
|
|
.logistics-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logistics-popup {
|
|
width: 650rpx;
|
|
max-height: 80vh;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logistics-popup .popup-content {
|
|
padding: 30rpx;
|
|
text-align: left;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.logistics-section {
|
|
margin-bottom: 30rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// 物流弹窗状态信息
|
|
.status-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.status-badge-popup {
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
|
|
&.goods-status-waiting {
|
|
background-color: #007aff;
|
|
}
|
|
|
|
&.goods-status-pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.goods-status-shipping {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.goods-status-completed {
|
|
background-color: #666;
|
|
}
|
|
|
|
&.goods-status-refund {
|
|
background-color: #ff3b30;
|
|
}
|
|
|
|
&.goods-status-default {
|
|
background-color: #999;
|
|
}
|
|
}
|
|
|
|
.logistics-section .section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
border-left: 4rpx solid #007aff;
|
|
padding-left: 16rpx;
|
|
}
|
|
|
|
.address-info {
|
|
background-color: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.address-detail {
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.address-text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.contact-info {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.contact-name,
|
|
.contact-phone {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
min-width: 160rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
.goods-specs {
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.spec-tag {
|
|
background: #f0f8ff;
|
|
border: 1rpx solid #e6f3ff;
|
|
border-radius: 12rpx;
|
|
padding: 4rpx 12rpx;
|
|
display: inline-block;
|
|
margin-bottom: 6rpx;
|
|
font-size: 22rpx;
|
|
color: #4a90e2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 售后商品选择弹窗
|
|
.after-sale-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.after-sale-popup {
|
|
width: 100%;
|
|
max-height: 70vh;
|
|
background-color: #fff;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.after-sale-popup .popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.after-sale-popup .popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.after-sale-popup .popup-close {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.after-sale-popup .popup-content {
|
|
padding: 0;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.goods-list {
|
|
padding: 0 30rpx 30rpx;
|
|
}
|
|
|
|
.goods-select-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:active {
|
|
background-color: #f8f9fa;
|
|
}
|
|
}
|
|
|
|
.goods-select-info {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.goods-select-image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.goods-select-details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.goods-select-name {
|
|
text-align: left;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.goods-select-specs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.spec-tag {
|
|
background: #f0f8ff;
|
|
border: 1rpx solid #e6f3ff;
|
|
border-radius: 12rpx;
|
|
padding: 4rpx 12rpx;
|
|
display: inline-block;
|
|
font-size: 22rpx;
|
|
color: #4a90e2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.goods-select-info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.goods-select-type {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
background-color: #f5f5f5;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
.goods-select-quantity {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.goods-select-arrow {
|
|
margin-left: 20rpx;
|
|
}
|
|
</style>
|
|
|