book-hi/pages-mine/pages/order-detail.vue

<template>
	<view class="order-detail">
		<!-- 时间轴组件 -->
		<order-timeline :logVoList="orderInfo.logVoList" :trackingVoList="orderInfo.trackingVoList"></order-timeline>

		<!--   -->
		<return-notice :orderInfo="orderInfo" v-if="orderInfo.restTime" @close="handleReturn"></return-notice>
		<!-- 书籍列表组件 -->
		<book-list :books="bookList" :totalNum="orderInfo.totalNum"></book-list>

		<!-- 收入信息区块 -->
		<view class="info-block">
			<view class="flex-a flex-j-b">
				<text class="common-title font-32">卖书收入：</text>
				<text class="common-text" style="color: #ff0000" v-if="orderInfo.finalMoney">¥{{ orderInfo.finalMoney
				}}</text>
				<text class="common-text" style="color: #ff0000" v-else>待审核</text>
			</view>
			<view class="desc-bg">
				<view class="flex-a flex-j-b">
					<text class="common-text-2 font-26">书籍数量：</text>
					<text class="common-text font-26">{{ orderInfo.totalNum }}</text>
				</view>

				<view class="flex-a flex-j-b" v-if="orderInfo.upsellFinalMoney || orderInfo.upsellExpectMoney">
					<text class="common-text-2 font-26">限时加价：</text>
					<text class="common-text-2 font-26">¥{{ orderInfo.upsellFinalMoney || orderInfo.upsellExpectMoney
					}}</text>
				</view>
				<view class="flex-a flex-j-b">
					<view class="common-text-2 font-26">
						预估书款：
						<u-icon name="question-circle-fill" color="#333333" size="36" @click="showRules"></u-icon>
					</view>
					<text class="common-text-2 font-26">¥{{ orderInfo.expectMoney }}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息区块 -->
		<view class="info-block">
			<view class="flex-a flex-j-b">
				<text class="common-title font-32">卖书编号：</text>
				<view class="common-text-2 font-26 flex-a">
					{{ orderInfo.orderId }}
					<image src="../static/copy.png" style="width: 42rpx; height: 42rpx; margin-left: 20rpx"
						@click="copyOrderNo"></image>
				</view>
			</view>
			<view class="desc-bg">
				<view class="flex-a flex-j-b">
					<view class="common-text-2 font-26">快递备注：</view>
					<text class="common-text font-26">{{ orderInfo.expressDelivery || '-' }}</text>
				</view>
			</view>
		</view>

		<!-- 地址信息区块 -->
		<view class="info-block">
			<view class="flex-a flex-j-b">
				<text class="common-title font-32" style="width: 220rpx">发货地址：</text>

				<view class="flex-d flex-j-e flex-1">
					<view class="common-text-2 font-26 mb-12">
						<text>{{ orderInfo.sendName }}</text>
						<text class="ml-40">{{ orderInfo.sendMobile }}</text>
					</view>
					<text class="common-text" style="line-height: 42rpx">
						{{ orderInfo.sendAddress }}
					</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-fixed-con detail-bottom flex-d">
			<service-info :firstOrder="orderInfo.firstOrder"></service-info>
			<view class="flex-a"
				style="width: 100%; padding: 0 30rpx;justify-content: flex-end;align-items: center;min-height: 42px;">
				<u-button size="small" type="warning" @click="handleOpenOverTime"
					v-if="orderInfo.confirmCompensationMoney" style="margin-right: 10px">验货超时补偿</u-button>
				<u-button size="small" type="warning" @click="handleOpenSellLoss"
					v-if="orderInfo.priceCompensationMoney" style="margin-right: 10px">卖亏必赔</u-button>
				<order-actions style="width:fit-content" :order="orderInfo" :status="orderInfo.status"
					@action="handleAction" @success="getOrderInfo"></order-actions>
			</view>
		</view>

		<u-action-sheet v-model="showReportSheet" :list="actionList" @close="showReportSheet = false"
			@click="handleReportSelect" cancelText="取消" :mask-close-able="false" :safe-area-inset-bottom="true" />

		<CommonDialog ref="returnDialog" title="退回不通过书籍" :showFooter="false" @confirm="handleRecycleConfirm"
			width="88%">
			<view class="flex-a flex-j-b">
				<button class="confirm-btn plain" @click="handleApplyBack">我要取回</button>
				<button class="confirm-btn plain" @click="handleRecycleWare">仓库循环处理</button>
			</view>
			<view class="button-bottom" @click="handleRecycle">
				<text style="font-size: 32rpx; font-weight: bold">按纸价回收</text>
				<text style="margin-top: 2px">补贴 ¥{{ orderInfo.basicRecycleMoney || 0 }} 到余额</text>
			</view>
		</CommonDialog>

		<CommonDialog ref="recycleDialog" title="是否按纸价回收" @confirm="handleRecycleConfirm">补贴 ¥{{
			orderInfo.basicRecycleMoney || 0 }} 到余额</CommonDialog>
		<CommonDialog ref="recycleWare" title="是否仓库循环处理" @confirm="handleRecycleWareConfirm">感谢您对环保事业的支持，仓库将循环处理
		</CommonDialog>

		<CommonDialog ref="overTimeDialog" title="验货超时补偿" @confirm="handleOverTimeConfirm" :showFooter="false">
			<view class="flex-a flex-j-b" style="padding: 40rpx 0">
				<u-button class="confirm-btn" type="success" @click="handleOverTimeConfirm">补贴 ¥{{
					orderInfo.confirmCompensationMoney || 0 }} 到余额</u-button>
				<u-button class="confirm-btn" type="warning" @click="handleCloseOverTime">原谅你了</u-button>
			</view>
		</CommonDialog>
		<CommonDialog ref="sellLossDialog" title="卖亏必赔" @confirm="handleSellLossConfirm" :showFooter="false">
			<view class="flex-a flex-j-b" style="padding: 40rpx 0">
				<u-button class="confirm-btn" type="success" @click="handleSellLossConfirm">补贴 ¥{{
					orderInfo.priceCompensationMoney || 0 }} 到余额</u-button>
				<u-button class="confirm-btn" type="warning" @click="handleCloseSellLoss">原谅你了</u-button>
			</view>
		</CommonDialog>
		<common-dialog ref="reviewDialog" title="温馨提示" @confirm="onApplyReturn">
			<text>该订单正在排队复审，申请退回复审将退出！</text>
		</common-dialog>
	</view>
</template>

<script>
import OrderTimeline from '../components/order-timeline.vue';
import BookList from '../components/book-list.vue';
import ReturnNotice from '../components/return-notice.vue';
import ServiceInfo from '@/pages/home/components/ServiceInfo.vue';
import btnAction from '../mixin/btnAction';
import OrderActions from '../components/order-actions.vue';
import CommonDialog from '@/components/common-dialog.vue';

export default {
	mixins: [btnAction],
	components: {
		OrderTimeline,
		BookList,
		ReturnNotice,
		ServiceInfo,
		OrderActions,
		CommonDialog
	},
	data() {
		return {
			bookList: [],
			// 订单信息
			orderInfo: {},
			orderId: ''
		};
	},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId;
		}
	},
	onShow() {
		if (this.orderId) {
			this.getOrderInfo(this.orderId);
		}
	},
	methods: {
		copyOrderNo() {
			uni.setClipboardData({
				data: this.orderInfo.orderId.toString(),
				success: () => {
					uni.$u.toast('复制成功');
				},
				fail: (error) => {
					console.log(error, 'error');
					uni.$u.toast('复制失败');
				}
			});
		},
		successFeedback() {
			this.getOrderInfo();
		},
		showRules() {
			uni.navigateTo({
				url: '/pages-mine/pages/rules-for-sellbooks'
			});
		},

		//获取订单信息
		getOrderInfo() {
			uni.$u.http.get('/token/order/getOrderDetail?orderId=' + this.orderId).then((res) => {
				if (res.code === 200) {
					this.orderInfo = res.data;
					this.bookList = res.data.detailVoList;
				}
			});
		},
		handleReturn() {
			if (this.orderInfo.restStop === 1) {
				this.$refs.reviewDialog?.openPopup();
			} else {
				this.$refs.returnDialog?.openPopup();
			}
		},
		onApplyReturn() {
			this.$refs.returnDialog?.openPopup();
		},
		//仓库循环处理
		handleRecycleWare() {
			this.closeDialog();
			this.$refs.recycleWare?.openPopup();
		},
		//仓库循环处理确认
		handleRecycleWareConfirm() {
			console.log('仓库循环处理确认');
			uni.$u.http
				.post('/token/order/notNeed', {
					orderId: this.orderInfo.orderId
				})
				.then((res) => {
					if (res.code === 200) {
						this.$refs.recycleDialog?.closePopup();
						uni.$u.toast(`已补贴 ${this.orderInfo.basicRecycleMoney || 0} 到余额`);
						this.getOrderInfo(this.orderInfo.orderId);
					}
				});
		},
		//纸价回收
		handleRecycle() {
			this.closeDialog();
			this.$refs.recycleDialog?.openPopup();
		},
		//纸价回收确认
		handleRecycleConfirm() {
			uni.$u.http
				.post('/token/order/basicRecycle', {
					orderId: this.orderInfo.orderId
				})
				.then((res) => {
					if (res.code === 200) {
						this.$refs.recycleDialog?.closePopup();
						uni.$u.toast('纸价回收成功');
						this.getOrderInfo(this.orderInfo.orderId);
					}
				});
		},
		closeDialog() {
			this.$refs.returnDialog?.closePopup();
		},
		//我要取回
		handleApplyBack() {
			console.log(this.orderInfo, 'xxxxx');
			uni.navigateTo({
				url: `/pages-mine/pages/apply?orderId=${this.orderInfo.orderId}`
			});
			this.closeDialog();
		},

		//验货超时补偿
		handleOpenOverTime() {
			this.$refs.overTimeDialog?.openPopup();
		},
		//卖亏必赔
		handleOpenSellLoss() {
			this.$refs.sellLossDialog?.openPopup();
		},
		//验货超时补偿确认
		handleOverTimeConfirm() {
			uni.$u.http
				.post('/token/order/confirmCompensation/submit', {
					orderId: this.orderInfo.orderId
				})
				.then((res) => {
					if (res.code === 200) {
						this.$refs.overTimeDialog?.closePopup();
						uni.$u.toast('验货超时补偿申请成功');
						this.getOrderInfo(this.orderInfo.orderId);
					}
				});
		},
		//验货超时补偿取消
		handleCloseOverTime() {
			uni.$u.http
				.post('/token/order/confirmCompensation/abandon', {
					orderId: this.orderInfo.orderId
				})
				.then((res) => {
					if (res.code === 200) {
						this.$refs.overTimeDialog?.closePopup();
						uni.$u.toast('操作成功');
						this.getOrderInfo(this.orderInfo.orderId);
					}
				});
		},
		//卖亏必赔确认
		handleSellLossConfirm() {
			uni.$u.http
				.post('/token/order/priceCompensation/submit', {
					orderId: this.orderInfo.orderId
				})
				.then((res) => {
					if (res.code === 200) {
						this.$refs.sellLossDialog?.closePopup();
						uni.$u.toast('卖亏必赔申请成功');
						this.getOrderInfo(this.orderInfo.orderId);
					}
				});
		},
		//卖亏必赔取消
		handleCloseSellLoss() {
			uni.$u.http
				.post('/token/order/priceCompensation/abandon', {
					orderId: this.orderInfo.orderId
				})
				.then((res) => {
					if (res.code === 200) {
						this.$refs.sellLossDialog?.closePopup();
						uni.$u.toast('操作成功');
						this.getOrderInfo(this.orderInfo.orderId);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-detail {
	min-height: 100vh;
	background: #f8f8f8;
	padding-bottom: 230rpx;

	.desc-bg {
		background: #fafafa;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.info-block {
		background: #ffffff;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 10rpx;
	}

	.detail-bottom {
		flex-direction: column;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
	}
}

.button-bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 30rpx 0;
	background-color: #38c148;
	color: #ffffff;
	font-size: 24rpx;
	line-height: 32rpx;
	padding: 16rpx 0;
	border-radius: 10rpx;
}

:deep(.btn-bottom) {
	height: 60rpx !important;
	line-height: 60rpx !important;
}
</style>