|
|
@@ -0,0 +1,522 @@
|
|
|
+<template>
|
|
|
+ <view class="order-detail-page">
|
|
|
+ <!-- 顶部状态栏 -->
|
|
|
+ <view class="status-header">
|
|
|
+ <view class="status-text">{{ statusText }}</view>
|
|
|
+ <view class="status-desc" v-if="orderInfo.status === 2">
|
|
|
+ 订单编号:{{ orderInfo.orderNo }}
|
|
|
+ <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="status-desc" v-else-if="orderInfo.status === 3">
|
|
|
+ 订单编号:{{ orderInfo.orderNo }}
|
|
|
+ <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="status-desc-block" v-else-if="orderInfo.status === 8">
|
|
|
+ <view class="status-tip">还剩9天22时18分自动确认收货</view>
|
|
|
+ <view class="status-desc-row">
|
|
|
+ 订单编号:{{ orderInfo.orderNo }}
|
|
|
+ <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="status-desc" v-else>
|
|
|
+ 订单编号:{{ orderInfo.orderNo }}
|
|
|
+ <u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 地址信息 -->
|
|
|
+ <view class="info-card address-card">
|
|
|
+ <view class="icon-box">
|
|
|
+ <u-icon name="map-fill" color="#ff0000" size="40"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="address-content">
|
|
|
+ <view class="user-info">
|
|
|
+ <text class="name">{{ orderInfo.address && orderInfo.address.name }}</text>
|
|
|
+ <text class="mobile">{{ orderInfo.address && orderInfo.address.mobile }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="address-detail">{{ orderInfo.address && orderInfo.address.detail }}</view>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 物流信息 (已发货/已完成/退款) -->
|
|
|
+ <view class="info-card logistics-card" v-if="[8, 12, 10].includes(orderInfo.status) && orderInfo.logistics">
|
|
|
+ <view class="icon-box">
|
|
|
+ <u-icon name="car-fill" color="#38C148" size="40"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="logistics-content" @click="viewLogistics">
|
|
|
+ <view class="company-name">{{ orderInfo.logistics.company }} ({{ orderInfo.logistics.no }})</view>
|
|
|
+ <view class="latest-trace">{{ orderInfo.logistics.trace }}</view>
|
|
|
+ <view class="update-time">{{ orderInfo.logistics.updateTime }}</view>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="info-card goods-card">
|
|
|
+ <view class="goods-item" v-for="(goods, index) in orderInfo.goodsList" :key="index">
|
|
|
+ <image :src="goods.cover" mode="aspectFill" class="goods-cover"></image>
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="goods-title">{{ goods.title }}</view>
|
|
|
+ <view class="goods-quality">品相:{{ goods.quality }}</view>
|
|
|
+ <view class="price-box">
|
|
|
+ <text class="price">¥{{ goods.price }}</text>
|
|
|
+ <text class="num">x{{ goods.num }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品级按钮,如退款 -->
|
|
|
+ <view class="goods-action" v-if="[3, 8].includes(orderInfo.status)">
|
|
|
+ <u-button size="mini" shape="circle" plain
|
|
|
+ custom-style="margin-left: 20rpx; height: 50rpx; line-height: 50rpx;">退款</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="goods-action" v-if="[10].includes(orderInfo.status)">
|
|
|
+ <u-button size="mini" shape="circle" plain disabled
|
|
|
+ custom-style="margin-left: 20rpx; height: 50rpx; line-height: 50rpx; background: #f5f5f5; color: #999; border: none;">退款成功</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 价格明细 -->
|
|
|
+ <view class="price-detail">
|
|
|
+ <view class="row">
|
|
|
+ <text>邮费</text>
|
|
|
+ <text>¥ {{ orderInfo.postage || '0.00' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <text>商品金额</text>
|
|
|
+ <text class="goods-total">¥{{ orderInfo.goodsTotalPrice }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <text>优惠金额</text>
|
|
|
+ <text class="discount">-¥{{ orderInfo.discountPrice || '0.00' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="real-pay-row">
|
|
|
+ <text>实付款 (微信支付)</text>
|
|
|
+ <text class="real-price">¥ {{ orderInfo.realPayPrice }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单时间信息 -->
|
|
|
+ <view class="info-card time-card">
|
|
|
+ <view class="row">
|
|
|
+ <text class="label">下单时间</text>
|
|
|
+ <text class="value">{{ orderInfo.createTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="orderInfo.payTime">
|
|
|
+ <text class="label">付款时间</text>
|
|
|
+ <text class="value">{{ orderInfo.payTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="orderInfo.deliveryTime">
|
|
|
+ <text class="label">发货时间</text>
|
|
|
+ <text class="value">{{ orderInfo.deliveryTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="orderInfo.finishTime">
|
|
|
+ <text class="label">完成时间</text>
|
|
|
+ <text class="value">{{ orderInfo.finishTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="orderInfo.closeTime">
|
|
|
+ <text class="label">关闭时间</text>
|
|
|
+ <text class="value">{{ orderInfo.closeTime }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部操作栏 -->
|
|
|
+ <view class="bottom-bar">
|
|
|
+ <!-- 待付款 -->
|
|
|
+ <template v-if="orderInfo.status === 2">
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('addToCart')">加入购物车</u-button>
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('cancel')">取消订单</u-button>
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('address')">修改地址</u-button>
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
|
|
|
+ @click="handleAction('pay')">继续付款</u-button>
|
|
|
+ </template>
|
|
|
+ <!-- 待发货 -->
|
|
|
+ <template v-else-if="orderInfo.status === 3">
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('addToCart')">加入购物</u-button>
|
|
|
+ <u-button size="mini" shape="circle" type="warning" :custom-style="btnStyle"
|
|
|
+ @click="handleAction('overtime')">超时发货</u-button>
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
|
|
|
+ @click="handleAction('remind')">催发货</u-button>
|
|
|
+ </template>
|
|
|
+ <!-- 已发货 -->
|
|
|
+ <template v-else-if="orderInfo.status === 8">
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('addToCart')">加入购物</u-button>
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('complaint')">投诉</u-button>
|
|
|
+ <u-button size="mini" shape="circle" type="primary" :custom-style="themeLightBtnStyle"
|
|
|
+ @click="handleAction('priceMatch')">降价补差</u-button>
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
|
|
|
+ @click="handleAction('confirm')">确认收货</u-button>
|
|
|
+ </template>
|
|
|
+ <!-- 交易关闭/已退款 -->
|
|
|
+ <template v-else-if="orderInfo.status === -1 || orderInfo.status === 10">
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('addToCart')">加入购物</u-button>
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('complaint')">投诉</u-button>
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
|
|
|
+ @click="handleAction('moneyWhere')">钱款去向</u-button>
|
|
|
+ </template>
|
|
|
+ <!-- 交易完成 -->
|
|
|
+ <template v-else-if="orderInfo.status === 12">
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('addToCart')">加入购物</u-button>
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click="handleAction('complaint')">投诉</u-button>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 占位符,防止底部按钮遮挡内容 -->
|
|
|
+ <view style="height: 120rpx;"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderInfo: {
|
|
|
+ status: 2,
|
|
|
+ orderNo: '',
|
|
|
+ goodsList: [],
|
|
|
+ address: {}
|
|
|
+ },
|
|
|
+ btnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ width: '160rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0'
|
|
|
+ },
|
|
|
+ themeBtnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ width: '160rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0',
|
|
|
+ backgroundColor: '#38C148',
|
|
|
+ color: '#fff',
|
|
|
+ border: 'none'
|
|
|
+ },
|
|
|
+ themeLightBtnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ width: '160rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0',
|
|
|
+ backgroundColor: '#5bc0de', // Light blue/green for price match? Or keep simple
|
|
|
+ color: '#fff',
|
|
|
+ border: 'none'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ statusText() {
|
|
|
+ const map = {
|
|
|
+ 2: '等待买家付款',
|
|
|
+ 3: '等待卖家发货',
|
|
|
+ 8: '已发货',
|
|
|
+ 12: '交易完成',
|
|
|
+ 10: '交易关闭', // 退款
|
|
|
+ '-1': '交易关闭'
|
|
|
+ };
|
|
|
+ return map[this.orderInfo.status] || '未知状态';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.orderNo) {
|
|
|
+ this.loadOrderDetail(options.orderNo);
|
|
|
+ } else {
|
|
|
+ // For testing/preview if no orderNo passed, use a mock default
|
|
|
+ this.loadOrderDetail('SN_MOCK_DEFAULT');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadOrderDetail(orderNo) {
|
|
|
+ // Mock data loading
|
|
|
+ this.orderInfo = this.getMockData(orderNo);
|
|
|
+ },
|
|
|
+ copyOrderNo() {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: this.orderInfo.orderNo,
|
|
|
+ success: () => {
|
|
|
+ uni.showToast({ title: '复制成功', icon: 'none' });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ viewLogistics() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages-car/pages/logistics-detail?orderNo=${this.orderInfo.orderNo}`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleAction(type) {
|
|
|
+ uni.showToast({ title: `点击了${type}`, icon: 'none' });
|
|
|
+ // Implement specific logic here similar to my-order.vue
|
|
|
+ },
|
|
|
+ getMockData(orderNo) {
|
|
|
+ // Basic mock structure
|
|
|
+ return {
|
|
|
+ status: 2, // Default to pending payment for dev
|
|
|
+ orderNo: orderNo || '32656+56+5655',
|
|
|
+ createTime: '2021-07-23 14:50:05',
|
|
|
+ goodsTotalPrice: '6565',
|
|
|
+ postage: '0.00',
|
|
|
+ discountPrice: '55',
|
|
|
+ realPayPrice: '918.00',
|
|
|
+ address: {
|
|
|
+ name: '张三',
|
|
|
+ mobile: '155****5855',
|
|
|
+ detail: '四川省成都市高新区XXX街XXX路XXX号XXX小区XXX栋XXXX单元XXX楼XXX'
|
|
|
+ },
|
|
|
+ goodsList: [
|
|
|
+ {
|
|
|
+ title: '马克思主义基本原理',
|
|
|
+ quality: '中等',
|
|
|
+ price: '9.60',
|
|
|
+ num: 2,
|
|
|
+ cover: 'https://uviewui.com/album/1.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '马克思主义基本原理',
|
|
|
+ quality: '中等',
|
|
|
+ price: '9.60',
|
|
|
+ num: 2,
|
|
|
+ cover: 'https://uviewui.com/album/1.jpg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.order-detail-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ .status-header {
|
|
|
+ background-color: #d1f2d8; // Light green bg
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-desc-block {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ .status-tip {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-desc-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-card {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &.address-card {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon-box {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-content {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .mobile {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-detail {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.logistics-card {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon-box {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logistics-content {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .company-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #38C148;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .latest-trace {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .update-time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.goods-card {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .goods-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .goods-cover {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .goods-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-quality {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-action {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-detail {
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+ padding-top: 20rpx;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .goods-total {
|
|
|
+ color: #38C148;
|
|
|
+ }
|
|
|
+
|
|
|
+ .discount {
|
|
|
+ color: #38C148;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .real-pay-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .real-price {
|
|
|
+ color: #38C148;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.time-card {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-bar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|