mh/pages/me/order-details.vue

<template>
	<view class="odetail">
		<view class="odetail-top">
			<view class="odetail-title">收货人信息</view>
			<view class="odetail-top-main flex">
				<view class="odetail-address">
					<view class="odetail-ssq">{{ details.province }} {{ details.city }} {{ details.area }}</view>
					<view class="odetail-xq">{{ details.detail }}</view>
					<view class="odetail-userinfo flexs">
						<text>{{ details.username }}</text>
						<text>{{ details.mobile }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="odetail-main">
			<view class="odetail-main-title">订单信息</view>
			<view class="odetail-main-box">
				<view class="odetail-main-item flexs">
					<view class="odetail-main-item-icon"><image :src="details.goods_image" mode="aspectFill"></image></view>
					<view class="odetail-main-item-info flex">
						<view class="odetail-main-item-name">{{ details.goods_name }}</view>
						<view class="odetail-main-item-time">开箱日期：{{ details.box_open_time }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="odetail-pay">
			<view class="odetail-pay-money flex">
				<text>付款金额</text>
				<text class="red">{{ details.pay_amount }}</text>
			</view>
			<view class="odetail-pay-money flex">
				<text>支付方式</text>
				<text>{{ details.pay_method }}</text>
			</view>
		</view>
		<view class="odetail-pay orderId">
			<view class="odetail-pay-money flex">
				<text>订单号：{{ details.delivery_order_no }}</text>
			</view>
			<view class="odetail-pay-money flex">
				<text>下单时间：{{ details.delivery_apply_time }}</text>
			</view>
			<view class="odetail-pay-money flex" v-if="details.status == 'unreceived' || details.status == 'finished'">
				<text>发货时间：{{ details.delivery_time }}</text>
			</view>
			<view class="odetail-pay-money flex" v-if="details.status == 'unreceived' || details.status == 'finished'">
				<text>物流号：{{ details.delivery_number }}</text>
				<!-- <text class="logistics" @click="lookLogistics" v-if="details.status == 'unreceived'">查看物流</text> -->
			</view>
			<view class="odetail-pay-money flex" v-if="details.status == 'unreceived' || details.status == 'finished'">
				<text>物流名称：{{ details.post_name }}</text>
				<!-- <text class="logistics" @click="lookLogistics" v-if="details.status == 'unreceived'">查看物流</text> -->
			</view>
			<view class="odetail-pay-money flex" v-if="details.status == 'finished'">
				<text>收货时间：{{ details.receive_time }}</text>
			</view>
		</view>
		<button class="btn" hover-class="hover-view" v-if="details.status == 'unreceived'" @click="affirm">确认收货</button>
		<button class="btn" hover-class="hover-view" v-if="details.status == 'unreceived' && canTi == 1" @click="affirm1">申请退货</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '', //订单ID
			details: {}, //详情
			canTi: ''
		};
	},
	methods: {
		//查看物流
		// lookLogistics() {
		// 	uni.navigateTo({ url: '/pages/me/logistics' });
		// },
		//获取订单详情
		onLoadData() {
			this.$api.deliveryOrderDetail({ delivery_order_id: this.id }).then(res => {
				if (res.code === 1) {
					this.details = res.data;
				}
			});
		},
		//确认收货
		affirm() {
			uni.showModal({
				content: '是否确认收货？',
				success: res => {
					if (res.confirm) {
						this.$api.confirmReceipt({ delivery_order_id: this.id }).then(res => {
							if (res.code === 1) {
								uni.showToast({ title: res.msg });
								setTimeout(() => {
									uni.navigateBack();
								}, 800);
							}
						});
					}
				}
			});
		},
		affirm1() {
			uni.showModal({
				content: '申请退货成功，请耐心等待审核。',
				success: res => {
					if (res.confirm) {
					}
				}
			});
		}
	},
	onLoad({ id }) {
		this.id = id;
		this.onLoadData();
		this.$api.checkSwitch2().then(({ data }) => {
			this.canTi = data;
		});
	}
};
</script>

<style lang="scss">
.odetail {
	padding: 0 30rpx 38rpx 30rpx;
	.odetail-title {
		padding: 30rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}
	.odetail-top-main {
		padding: 30rpx;
		border-radius: 10rpx;
		background: #ffffff;
		input {
			font-size: 28rpx;
		}
	}
	.odetail-address {
		.odetail-ssq {
			color: #666666;
			font-size: 28rpx;
		}
		.odetail-xq {
			font-size: 26rpx;
			margin: 20rpx 0;
		}
		.odetail-userinfo {
			text {
				color: #999999;
				font-size: 30rpx;
				&:last-child {
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
}
.odetail-main-title {
	font-size: 28rpx;
	font-weight: bold;
	padding: 30rpx 0 20rpx 0;
}
.odetail-main-item {
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	.odetail-main-item-icon {
		width: 168rpx;
		height: 168rpx;
		image {
			border-radius: 10rpx;
		}
		margin-right: 20rpx;
	}
	.odetail-main-item-info {
		height: 168rpx;
		align-items: flex-start;
		flex-direction: column;
		justify-content: space-around;
	}
	.odetail-main-item-name {
		font-size: 28rpx;
		line-height: 36rpx;
	}
	.odetail-main-item-time {
		color: #999999;
	}
}
.odetail-pay {
	padding: 0 30rpx 0 20rpx;
	border-radius: 10rpx;
	background: #ffffff;
	margin-top: 20rpx;
	.odetail-pay-money {
		padding: 30rpx 0;
		text {
			font-size: 26rpx;
			&:last-child {
				color: #999999;
			}
		}
		.red {
			color: #cf271b !important;
		}
	}
}
.orderId {
	padding: 30rpx 20rpx;
	.odetail-pay-money {
		padding: 0;
		margin-bottom: 30rpx;
		&:last-child {
			margin-bottom: 0;
		}
		.logistics {
			width: 130rpx;
			height: 44rpx;
			text-align: center;
			line-height: 44rpx;
			color: #ffffff !important;
			font-size: 24rpx;
			background: #f6af32;
			border-radius: 22rpx;
		}
	}
}
.btn {
	color: #333333;
	font-size: 30rpx;
	font-weight: bold;
	height: 98rpx;
	margin-top: 45rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 121rpx 0rpx rgba(63, 52, 2, 0.12);
	border-radius: 10rpx;
}
</style>