|
|
@@ -8,206 +8,327 @@
|
|
|
|
|
|
<!-- 商品信息 -->
|
|
|
<view class="goods-list">
|
|
|
- <scroll-view scroll-x class="goods-scroll">
|
|
|
+ <scroll-view scroll-x class="goods-scroll" v-if="order.detailCoverList && order.detailCoverList.length > 0">
|
|
|
<view class="goods-wrapper">
|
|
|
<image v-for="(cover, index) in order.detailCoverList" :key="index" :src="cover || defaultCover"
|
|
|
mode="aspectFill" class="goods-cover"></image>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
+
|
|
|
+ <!-- 单本书样式 -->
|
|
|
+ <view class="single-book" v-else>
|
|
|
+ <image :src="order.bookCover || defaultCover" mode="aspectFit" class="book-cover"></image>
|
|
|
+ <view class="book-info">
|
|
|
+ <view class="info-top">
|
|
|
+ <text class="book-name u-line-2">{{ order.bookName }}</text>
|
|
|
+ <view class="price-box">
|
|
|
+ <text class="price">¥ {{ order.bookPrice || '0.00' }}</text>
|
|
|
+ <text class="num">x{{ order.bookNum }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="book-sku" v-if="order.bookConditionType">
|
|
|
+ 品相:{{ qualityNames[order.bookConditionType] || '未知' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 价格汇总 -->
|
|
|
<view class="order-total">
|
|
|
- <text>共{{ order.totalNum }}本</text>
|
|
|
+ <text class="ml-20">总价 ¥{{ order.totalMoney || 0 }}</text>
|
|
|
<text class="ml-20">实付款 ¥{{ order.payMoney || 0 }}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
<view class="action-box">
|
|
|
- <!-- 修改地址 -->
|
|
|
- <u-button v-if="order.showModifyAddress == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
|
|
|
-
|
|
|
- <!-- 投诉 -->
|
|
|
- <u-button v-if="order.showComplaint == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('complaint')">投诉</u-button>
|
|
|
-
|
|
|
- <!-- 申请开票 -->
|
|
|
- <u-button v-if="order.showApplyInvoice == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('invoice')">申请开票</u-button>
|
|
|
-
|
|
|
+ <!-- 付款 (未包含在Flags中,保留原逻辑: 待付款且未取消) -->
|
|
|
+ <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle"
|
|
|
+ :custom-style="themeBtnStyle" @click.stop="handleAction('pay')">付款</u-button>
|
|
|
+
|
|
|
+ <!-- 确认收货 -->
|
|
|
+ <u-button v-if="order.showConfirmShop == 1" size="mini" shape="circle" :custom-style="themeBtnStyle"
|
|
|
+ @click.stop="handleAction('confirm')">确认收货</u-button>
|
|
|
+
|
|
|
+ <!-- 加入购物车 -->
|
|
|
+ <u-button v-if="order.showAddToCart == 1" size="mini" shape="circle" :custom-style="themeBtnStyle"
|
|
|
+ @click.stop="handleAction('addToCart')">加入购物车</u-button>
|
|
|
+
|
|
|
+ <!-- 再来一单 -->
|
|
|
+ <u-button v-if="order.showBuyAgain == 1" size="mini" shape="circle" type="primary" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('rebuy')">再买一单</u-button>
|
|
|
+
|
|
|
+ <!-- 评价 -->
|
|
|
+ <u-button v-if="order.showEvaluation == 1" size="mini" shape="circle" type="primary" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('evaluate')">评价</u-button>
|
|
|
+
|
|
|
+ <!-- 查看物流 -->
|
|
|
+ <u-button v-if="order.showCheckExpress == 1 && order.status != '4'" size="mini" shape="circle"
|
|
|
+ type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('logistics')">查看物流</u-button>
|
|
|
+
|
|
|
+ <!-- 延长收货 -->
|
|
|
+ <u-button v-if="order.showExtendReceivingTime == 1" size="mini" shape="circle" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('extend')">延长收货</u-button>
|
|
|
+
|
|
|
+ <!-- 催发货 -->
|
|
|
+ <u-button v-if="order.showUrge == 1" size="mini" shape="circle" type="warning" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('remind')">催发货</u-button>
|
|
|
+
|
|
|
+ <!-- 更多操作 (仅在已完成状态下显示) -->
|
|
|
+ <u-button v-if="order.status == '4'" size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click.stop="handleMoreAction">更多</u-button>
|
|
|
+
|
|
|
+ <!-- 申请售后 -->
|
|
|
+ <u-button v-if="order.showAfterSales == 1 && order.status != '4'" size="mini" shape="circle" type="error"
|
|
|
+ plain :custom-style="btnStyle" @click.stop="handleAction('refund')">申请售后</u-button>
|
|
|
+
|
|
|
+ <!-- 取消订单 (未包含在Flags中,保留原逻辑: 待付款且未取消) -->
|
|
|
+ <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle" type="error"
|
|
|
+ plain :custom-style="btnStyle" @click.stop="handleAction('cancel')">取消订单</u-button>
|
|
|
+
|
|
|
+ <!-- 删除订单 (未包含在Flags中,保留原逻辑) -->
|
|
|
+ <u-button v-if="order.cancelStatus == '1'" size="mini" shape="circle" type="error" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('delete')">删除订单</u-button>
|
|
|
+
|
|
|
<!-- 钱款去向 -->
|
|
|
- <u-button v-if="order.showMoneyDestination == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('moneyWhere')">钱款去向</u-button>
|
|
|
-
|
|
|
+ <u-button v-if="order.showMoneyDestination == 1" size="mini" shape="circle" type="primary" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('moneyWhere')">钱款去向</u-button>
|
|
|
+
|
|
|
<!-- 查看详情 -->
|
|
|
- <u-button v-if="order.showShowDetail == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('detail')">查看详情</u-button>
|
|
|
-
|
|
|
- <!-- 删除订单 (未包含在Flags中,保留原逻辑) -->
|
|
|
- <u-button v-if="order.cancelStatus == '1'" size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('delete')">删除订单</u-button>
|
|
|
-
|
|
|
- <!-- 取消订单 (未包含在Flags中,保留原逻辑: 待付款且未取消) -->
|
|
|
- <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('cancel')">取消订单</u-button>
|
|
|
-
|
|
|
- <!-- 申请售后 -->
|
|
|
- <u-button v-if="order.showAfterSales == 1" size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('refund')">申请售后</u-button>
|
|
|
-
|
|
|
- <!-- 催发货 -->
|
|
|
- <u-button v-if="order.showUrge == 1" size="mini" shape="circle" type="warning" plain :custom-style="btnStyle" @click.stop="handleAction('remind')">催发货</u-button>
|
|
|
-
|
|
|
- <!-- 延长收货 -->
|
|
|
- <u-button v-if="order.showExtendReceivingTime == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('extend')">延长收货</u-button>
|
|
|
-
|
|
|
- <!-- 查看物流 -->
|
|
|
- <u-button v-if="order.showCheckExpress == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('logistics')">查看物流</u-button>
|
|
|
-
|
|
|
- <!-- 评价 -->
|
|
|
- <u-button v-if="order.showEvaluation == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('evaluate')">评价</u-button>
|
|
|
-
|
|
|
- <!-- 再来一单 -->
|
|
|
- <u-button v-if="order.showBuyAgain == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('rebuy')">再买一单</u-button>
|
|
|
-
|
|
|
- <!-- 加入购物车 -->
|
|
|
- <u-button v-if="order.showAddToCart == 1" size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
|
|
|
-
|
|
|
- <!-- 确认收货 -->
|
|
|
- <u-button v-if="order.showConfirmShop == 1" size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('confirm')">确认收货</u-button>
|
|
|
-
|
|
|
- <!-- 付款 (未包含在Flags中,保留原逻辑: 待付款且未取消) -->
|
|
|
- <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('pay')">付款</u-button>
|
|
|
+ <u-button v-if="order.showShowDetail == 1" size="mini" shape="circle" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('detail')">查看详情</u-button>
|
|
|
+
|
|
|
+ <!-- 申请开票 -->
|
|
|
+ <u-button v-if="order.showApplyInvoice == 1 && order.status != '4'" size="mini" shape="circle" plain
|
|
|
+ :custom-style="btnStyle" @click.stop="handleAction('invoice')">申请开票</u-button>
|
|
|
+
|
|
|
+ <!-- 投诉 -->
|
|
|
+ <u-button v-if="order.showComplaint == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click.stop="handleAction('complaint')">投诉</u-button>
|
|
|
+
|
|
|
+ <!-- 修改地址 -->
|
|
|
+ <u-button v-if="order.showModifyAddress == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
+ @click.stop="handleAction('address')">修改地址</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- order: {
|
|
|
- type: Object,
|
|
|
- required: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- defaultCover: 'https://uviewui.com/album/1.jpg',
|
|
|
- btnStyle: {
|
|
|
- marginLeft: '20rpx',
|
|
|
- height: '60rpx',
|
|
|
- lineHeight: '60rpx',
|
|
|
- padding: '0 24rpx',
|
|
|
- fontSize:'26rpx',
|
|
|
- },
|
|
|
- themeBtnStyle: {
|
|
|
- marginLeft: '20rpx',
|
|
|
- height: '60rpx',
|
|
|
- lineHeight: '60rpx',
|
|
|
- padding: '0 30rpx',
|
|
|
- backgroundColor: '#38C148',
|
|
|
- color: '#fff',
|
|
|
- fontSize:'26rpx',
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ order: {
|
|
|
+ type: Object,
|
|
|
+ required: true
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goToDetail() {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages-car/pages/order-detail?orderId=${this.order.orderId}`
|
|
|
- })
|
|
|
},
|
|
|
- getStatusText(order) {
|
|
|
- if (order.cancelStatus == '1') return '已取消';
|
|
|
- if (order.refundStatus == '2') return '退款中';
|
|
|
- if (order.refundStatus == '3') return '已退款';
|
|
|
-
|
|
|
- const map = {
|
|
|
- '1': '待付款',
|
|
|
- '2': '待发货',
|
|
|
- '3': '待收货',
|
|
|
- '4': '已完成'
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //1-良好 2-中等 3-次品 4-全新
|
|
|
+ qualityNames: {
|
|
|
+ '1': '良好',
|
|
|
+ '2': '中等',
|
|
|
+ '3': '次品',
|
|
|
+ '4': '全新',
|
|
|
+ },
|
|
|
+ defaultCover: 'https://uviewui.com/album/1.jpg',
|
|
|
+ btnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0 24rpx',
|
|
|
+ fontSize: '26rpx',
|
|
|
+ },
|
|
|
+ themeBtnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0 30rpx',
|
|
|
+ backgroundColor: '#38C148',
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: '26rpx',
|
|
|
+ }
|
|
|
}
|
|
|
- return map[order.status] || '未知状态'
|
|
|
},
|
|
|
- handleAction(type, data) {
|
|
|
- if (type === 'complaint') {
|
|
|
- uni.setStorageSync('tempComplaintOrder', this.order);
|
|
|
+ methods: {
|
|
|
+ goToDetail() {
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages-car/pages/complaint?orderId=${this.order.orderId}`
|
|
|
- });
|
|
|
- return;
|
|
|
+ url: `/pages-car/pages/order-detail?orderId=${this.order.orderId}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getStatusText(order) {
|
|
|
+ if (order.cancelStatus == '1') return '已取消';
|
|
|
+ if (order.refundStatus == '2') return '退款中';
|
|
|
+ if (order.refundStatus == '3') return '已退款';
|
|
|
+
|
|
|
+ const map = {
|
|
|
+ '1': '待付款',
|
|
|
+ '2': '待发货',
|
|
|
+ '3': '待收货',
|
|
|
+ '4': '已完成'
|
|
|
+ }
|
|
|
+ return map[order.status] || '未知状态'
|
|
|
+ },
|
|
|
+ handleAction(type, data) {
|
|
|
+ if (type === 'complaint') {
|
|
|
+ uni.setStorageSync('tempComplaintOrder', this.order);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages-car/pages/complaint?orderId=${this.order.orderId}`
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (type === 'detail') {
|
|
|
+ // 跳转至退款详情页
|
|
|
+ const id = this.order.refundOrderId || this.order.orderId;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages-car/pages/refund-detail?refundOrderId=${id}`
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$emit('action', { type, order: this.order, data })
|
|
|
+ },
|
|
|
+ handleMoreAction() {
|
|
|
+ // 收集更多按钮下的操作
|
|
|
+ const actions = [];
|
|
|
+ if (this.order.showAfterSales == 1) actions.push('applyAfterSales');
|
|
|
+ if (this.order.showCheckExpress == 1) actions.push('logistics');
|
|
|
+ if (this.order.showApplyInvoice == 1) actions.push('invoice');
|
|
|
+
|
|
|
+ this.$emit('action', { type: 'more', order: this.order, data: actions });
|
|
|
}
|
|
|
- this.$emit('action', { type, order: this.order, data })
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.buy-order-item {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .order-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .buy-order-item {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
- font-size: 28rpx;
|
|
|
|
|
|
- .order-no {
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
+ .order-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .order-no {
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
|
|
|
- .order-status {
|
|
|
- color: #999;
|
|
|
+ .order-status {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .goods-list {
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ .goods-list {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
- .goods-scroll {
|
|
|
- width: 100%;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ .goods-scroll {
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .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: 140rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .order-total {
|
|
|
- text-align: right;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ .single-book {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .ml-20 {
|
|
|
- margin-left: 20rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
+ .book-cover {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .info-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .book-name {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .action-box {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap; // 防止按钮过多换行问题
|
|
|
-
|
|
|
- u-button {
|
|
|
- margin-bottom: 10rpx; // 如果换行,增加间距
|
|
|
+ .book-sku {
|
|
|
+ background: rgb(56, 193, 72, 0.1);
|
|
|
+ color: #333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ align-self: flex-start;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .status-desc {
|
|
|
+ .order-total {
|
|
|
+ text-align: right;
|
|
|
font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .ml-20 {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap; // 防止按钮过多换行问题
|
|
|
+
|
|
|
+ u-button {
|
|
|
+ margin-bottom: 10rpx; // 如果换行,增加间距
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|