|
@@ -2,74 +2,64 @@
|
|
|
<view class="buy-order-item" @click="goToDetail">
|
|
<view class="buy-order-item" @click="goToDetail">
|
|
|
<!-- 订单头部:订单号和状态 -->
|
|
<!-- 订单头部:订单号和状态 -->
|
|
|
<view class="order-header">
|
|
<view class="order-header">
|
|
|
- <text class="order-no">{{ order.orderNo }}</text>
|
|
|
|
|
- <text class="order-status">{{ getStatusText(order.status) }}</text>
|
|
|
|
|
|
|
+ <text class="order-no">订单号:{{ order.orderId }}</text>
|
|
|
|
|
+ <text class="order-status">{{ getStatusText(order) }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 商品信息 -->
|
|
<!-- 商品信息 -->
|
|
|
<view class="goods-list">
|
|
<view class="goods-list">
|
|
|
- <!-- 单个商品 -->
|
|
|
|
|
- <view v-if="order.goodsList && order.goodsList.length === 1" class="single-goods">
|
|
|
|
|
- <image :src="order.goodsList[0].cover || defaultCover" mode="aspectFill" class="goods-cover"></image>
|
|
|
|
|
- <view class="goods-info">
|
|
|
|
|
- <view class="goods-title">{{ order.goodsList[0].title }}</view>
|
|
|
|
|
- <view class="goods-quality">品相:{{ order.goodsList[0].quality || '中等' }}</view>
|
|
|
|
|
|
|
+ <scroll-view scroll-x class="goods-scroll">
|
|
|
|
|
+ <view class="goods-wrapper">
|
|
|
|
|
+ <image v-for="(cover, index) in order.detailCoverList" :key="index" :src="cover || defaultCover"
|
|
|
|
|
+ mode="aspectFill" class="goods-cover"></image>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="goods-price-num">
|
|
|
|
|
- <view class="price">¥ {{ order.goodsList[0].price }}</view>
|
|
|
|
|
- <view class="num">x{{ order.goodsList[0].num }}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- 多个商品 -->
|
|
|
|
|
- <view v-else class="multi-goods">
|
|
|
|
|
- <scroll-view scroll-x class="goods-scroll">
|
|
|
|
|
- <view class="goods-wrapper">
|
|
|
|
|
- <image v-for="(goods, index) in order.goodsList" :key="index" :src="goods.cover || defaultCover"
|
|
|
|
|
- mode="aspectFill" class="goods-cover"></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 价格汇总 -->
|
|
<!-- 价格汇总 -->
|
|
|
<view class="order-total">
|
|
<view class="order-total">
|
|
|
- <text>总价 ¥{{ order.totalPrice }}</text>
|
|
|
|
|
- <text class="ml-20">实付款 ¥{{ order.realPayPrice }}</text>
|
|
|
|
|
|
|
+ <text>共{{ order.totalNum }}本</text>
|
|
|
|
|
+ <text class="ml-20">实付款 ¥{{ order.payMoney || 0 }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
<!-- 操作按钮 -->
|
|
|
<view class="action-box">
|
|
<view class="action-box">
|
|
|
- <template v-if="order.status === 2"> <!-- 待付款 -->
|
|
|
|
|
- <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click="handleAction('address')">修改地址</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click="handleAction('cancel')">取消订单</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click="handleAction('pay')">付款</u-button>
|
|
|
|
|
|
|
+ <!-- 待付款 -->
|
|
|
|
|
+ <template v-if="order.status == '1' && order.cancelStatus == '0'">
|
|
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('cancel')">取消订单</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('pay')">付款</u-button>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else-if="order.status === 3"> <!-- 待发货 -->
|
|
|
|
|
- <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click="handleAction('address')">修改地址</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click="handleAction('refund')">申请售后</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" type="warning" plain :custom-style="btnStyle" @click="handleAction('remind')">催发货</u-button>
|
|
|
|
|
|
|
+ <!-- 待发货 -->
|
|
|
|
|
+ <template v-else-if="order.status == '2' && order.refundStatus == '1' && order.cancelStatus == '0'">
|
|
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('refund')">申请售后</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="warning" plain :custom-style="btnStyle" @click.stop="handleAction('remind')">催发货</u-button>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else-if="order.status === 8"> <!-- 待收货/已发货 -->
|
|
|
|
|
- <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click="handleAction('extend')">延长收货</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click="handleAction('invoice')">申请开票</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" plain :custom-style="btnStyle" @click="handleAction('logistics')">查看物流</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click="handleAction('addToCart')">加入购物车</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click="handleAction('confirm')">确认收货</u-button>
|
|
|
|
|
|
|
+ <!-- 待收货 -->
|
|
|
|
|
+ <template v-else-if="order.status == '3' && order.refundStatus == '1' && order.cancelStatus == '0'">
|
|
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('extend')">延长收货</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('invoice')">申请开票</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('complaint')">投诉</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('logistics')">查看物流</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('confirm')">确认收货</u-button>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else-if="order.status === 12"> <!-- 已完成 -->
|
|
|
|
|
- <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click="handleAction('addToCart')">加入购物车</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click="handleAction('rebuy')">再买一单</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click="handleAction('evaluate')">评价</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click="handleAction('more', ['applyAfterSales', 'logistics', 'invoice'])">更多</u-button>
|
|
|
|
|
|
|
+ <!-- 已完成 -->
|
|
|
|
|
+ <template v-else-if="order.status == '4' && order.refundStatus == '1' && order.cancelStatus == '0'">
|
|
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('rebuy')">再买一单</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('evaluate')">评价</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('more', ['applyAfterSales', 'logistics', 'invoice'])">更多</u-button>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else-if="order.status === 10"> <!-- 退款/售后 -->
|
|
|
|
|
- <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click="handleAction('moneyWhere')">钱款去向</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click="handleAction('detail')">查看详情</u-button>
|
|
|
|
|
|
|
+ <!-- 退款/售后 -->
|
|
|
|
|
+ <template v-else-if="order.refundStatus != '1'">
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('moneyWhere')">钱款去向</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('detail')">查看详情</u-button>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else-if="order.status === -1"> <!-- 已取消 -->
|
|
|
|
|
- <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click="handleAction('delete')">删除订单</u-button>
|
|
|
|
|
- <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click="handleAction('addToCart')">加入购物车</u-button>
|
|
|
|
|
|
|
+ <!-- 已取消 -->
|
|
|
|
|
+ <template v-else-if="order.cancelStatus == '1'">
|
|
|
|
|
+ <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('delete')">删除订单</u-button>
|
|
|
|
|
+ <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
|
|
|
</template>
|
|
</template>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -109,19 +99,21 @@ export default {
|
|
|
methods: {
|
|
methods: {
|
|
|
goToDetail() {
|
|
goToDetail() {
|
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
|
- url: `/pages-car/pages/order-detail?orderNo=${this.order.orderNo}`
|
|
|
|
|
|
|
+ url: `/pages-car/pages/order-detail?orderId=${this.order.orderId}`
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- getStatusText(status) {
|
|
|
|
|
|
|
+ getStatusText(order) {
|
|
|
|
|
+ if (order.cancelStatus == '1') return '已取消';
|
|
|
|
|
+ if (order.refundStatus == '2') return '退款中';
|
|
|
|
|
+ if (order.refundStatus == '3') return '已退款';
|
|
|
|
|
+
|
|
|
const map = {
|
|
const map = {
|
|
|
- 2: '待付款',
|
|
|
|
|
- 3: '待发货',
|
|
|
|
|
- 8: '待收货',
|
|
|
|
|
- 12: '已完成',
|
|
|
|
|
- 10: '退款/售后',
|
|
|
|
|
- '-1': '已取消'
|
|
|
|
|
|
|
+ '1': '待付款',
|
|
|
|
|
+ '2': '待发货',
|
|
|
|
|
+ '3': '待收货',
|
|
|
|
|
+ '4': '已完成'
|
|
|
}
|
|
}
|
|
|
- return map[status] || '未知状态'
|
|
|
|
|
|
|
+ return map[order.status] || '未知状态'
|
|
|
},
|
|
},
|
|
|
handleAction(type, data) {
|
|
handleAction(type, data) {
|
|
|
this.$emit('action', { type, order: this.order, data })
|
|
this.$emit('action', { type, order: this.order, data })
|
|
@@ -156,77 +148,22 @@ export default {
|
|
|
.goods-list {
|
|
.goods-list {
|
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
|
|
- .single-goods {
|
|
|
|
|
- display: flex;
|
|
|
|
|
-
|
|
|
|
|
- .goods-cover {
|
|
|
|
|
- width: 140rpx;
|
|
|
|
|
- height: 170rpx;
|
|
|
|
|
- border-radius: 8rpx;
|
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- background-color: #eee;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .goods-info {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
-
|
|
|
|
|
- .goods-title {
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- margin-bottom: 10rpx;
|
|
|
|
|
- display: -webkit-box;
|
|
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
|
- -webkit-line-clamp: 2;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .goods-quality {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- background-color: #f5f5f5;
|
|
|
|
|
- padding: 4rpx 10rpx;
|
|
|
|
|
- border-radius: 4rpx;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .goods-price-num {
|
|
|
|
|
- text-align: right;
|
|
|
|
|
-
|
|
|
|
|
- .price {
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .num {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- margin-top: 6rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .goods-scroll {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .multi-goods {
|
|
|
|
|
- .goods-scroll {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .goods-wrapper {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .goods-wrapper {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .goods-cover {
|
|
|
|
|
- width: 140rpx;
|
|
|
|
|
- height: 170rpx;
|
|
|
|
|
- border-radius: 8rpx;
|
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
- background-color: #eee;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .goods-cover {
|
|
|
|
|
+ width: 140rpx;
|
|
|
|
|
+ height: 170rpx;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+ background-color: #eee;
|
|
|
|
|
+ display: inline-block;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -246,6 +183,11 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ flex-wrap: wrap; // 防止按钮过多换行问题
|
|
|
|
|
+
|
|
|
|
|
+ u-button {
|
|
|
|
|
+ margin-bottom: 10rpx; // 如果换行,增加间距
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
.status-desc {
|
|
.status-desc {
|
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|