dsn_android/pages/order/details.vue

<template>
	<view class="orderDetail">
		<navigation-bar-view ref="nav" :maxTimer="options.isAdmin ? 0 : 60"></navigation-bar-view>
		<view class="header-bg"></view>
		<block v-if="order.rentSn">
			<view class="code">{{order.rentSn}}</view>
			<view class="label-box">取物码</view>
		</block>
		<view style="height: 3.3vw;" v-else></view>
		<view class="group">
			<view class="top">
				<view class="line"></view>
				<view class="label">存放信息</view>
			</view>
			<view class="content">
				<view class="cell">
					<view class="label">租赁状态：</view>
					<view class="message">
						<text v-if="order.rentStatus == 1">租赁中</text>
						<text v-if="order.rentStatus == 2">已取出</text>
						<text v-if="order.rentStatus == 0">未开始</text>
					</view>
				</view>
				<view class="cell">
					<view class="label">格口类型：</view>
					<view class="message">
						<text v-if="order.cabinetType == 1">小格子</text>
						<text v-if="order.cabinetType == 2">中格子</text>
						<text v-if="order.cabinetType == 3">大格子</text>
						<text v-if="order.rentType == 1">(预存{{order.rentTimes / 60}}小时)</text>
						<text v-if="order.rentType == 2">(剩余{{order.remainNums}}次)</text>
					</view>
				</view>
				<view class="cell">
					<view class="label">存放时间：</view>
					<view class="message">{{order.payTime}}</view>
				</view>
				<view class="cell">
					<view class="label">存放箱号：</view>
					<view class="message">{{order.caseSn}}</view>
				</view>
				<view class="cell">
					<view class="label">联系方式：</view>
					<view class="message">{{order.mobile}}</view>
				</view>
			</view>
		</view>
		<view class="group">
			<view class="top">
				<view class="line"></view>
				<view class="label">订单信息</view>
			</view>
			<view class="content">
				<view class="cell">
					<view class="label">订单金额：</view>
					<view class="message">￥{{order.payAmount}}</view>
				</view>
				<view class="cell">
					<view class="label">支付方式：</view>
					<view class="message">
						<text v-if="order.payType == 1">微信支付</text>
						<text v-if="order.payType == 2">支付宝支付</text>
					</view>
				</view>
				<view class="cell">
					<view class="label">订单编号：</view>
					<view class="message">{{order.orderSn}}</view>
				</view>
				<view class="cell">
					<view class="label">下单时间：</view>
					<view class="message">{{order.createTime}}</view>
				</view>
				<view class="cell">
					<view class="label">支付时间：</view>
					<view class="message">{{order.payTime}}</view>
				</view>
				<view class="cell">
					<view class="label">最迟时间：</view>
					<view class="message">{{order.endTime}}</view>
				</view>
			</view>
		</view>

		<block v-if="options.isAdmin">
			<view class="footer-btns" v-if="order.rentStatus == 1">
				<view class="btn right" @click="closeOrder">结束订单</view>
			</view>
		</block>
		<block v-else>
			<block v-if="order.rentStatus == 1">
				<block v-if="getOvertimeStatus()">
					<view class="footer-btns">
						<view class="btn right" @click="renew">你已超时，请先续费(￥{{order.renewalPrice}}/小时)</view>
					</view>
				</block>
				<block v-else>
					<view class="footer-btns" v-if="order.rentType == 1">
						<view class="btn left" @click="openLocker(1)">临时取物</view>
						<view class="btn right" @click="openLocker(2)">结束取物</view>
					</view>
					<view class="footer-btns" v-if="order.rentType == 2">
						<view class="btn left" @click="openLocker(1)" v-if="order.remainNums > 1">临时取物</view>
						<view class="btn right" @click="openLocker(2)">结束取物</view>
					</view>
				</block>
			</block>
		</block>

		<pay-code-popup ref="payCode" :orderSn="renewalOrderSn" :type="payType" @success="paySuccess"></pay-code-popup>
	</view>
</template>

<script>
	import payCodePopup from '../../components/payCodePopup.vue';
	import navigationBarView from '../../components/navigationBarView.vue'

	export default {
		components: {
			payCodePopup,
			navigationBarView
		},
		data() {
			return {
				order: {
					endTime: ''
				},
				options: {},
				payType: '',
				renewalOrderSn: ''
			}
		},

		onLoad(options) {
			this.options = options;
			if (options.isAdmin) {
				this.getAdminData()
			} else {
				if (options.orderSn) {
					this.order.orderSn = options.orderSn;
					this.getNewOrder();
				} else {
					this.getData();
				}
			}

			const $this = this;
			this.$nextTick(function() {
				$this.$refs.payCode.clearTimer();
			})
		},

		onHide() {
			const $this = this;
			this.$nextTick(function() {
				$this.$refs.payCode.clearTimer();
				$this.$refs.nav.clearTimer();
			})
		},

		methods: {
			getAdminData() {
				this.$api.managerDetail({
					orderId: this.options.id
				}).then(res => {
					res.data.remainNums = res.data.remainNums || res.data.rentNums;
					this.order = res.data
				})
			},
			getData() {
				this.options.deviceSn = uni.getStorageSync('sn');
				this.$api.offorderOfflineInfo(this.options).then(res => {
					res.data.remainNums = res.data.remainNums || res.data.rentNums;
					this.order = res.data
				})
			},

			getOvertimeStatus() {
				let endTime = this.order.endTime.replace(/\-/g, '/');
				return new Date().getTime() > new Date(endTime).getTime();
			},

			renew() {
				this.$api.offorderRenewal({
					orderSn: this.order.orderSn
				}).then(res => {
					this.renewalOrderSn = res.order.renewalOrderSn;
					const $this = this;
					this.payType = '1';
					this.$nextTick(function() {
						console.log("SSS1");
						$this.$refs.payCode.init(res)
					})
				})
			},

			paySuccess(e) {
				if (e == 1) {
					uni.showToast({
						title: '续费成功'
					})
					this.getNewOrder();
				}
			},

			openLocker(e) {
				uni.showLoading({
					title: "开箱中..."
				})
				this.$api.offorderOpenLocker({
					orderSn: this.order.orderSn,
					type: e
				}).then(res => {
					uni.hideLoading()
					uni.redirectTo({
						url: '/pages/fetchPacket/success'
					})
				}, err => {
					uni.hideLoading()
				})
			},

			getNewOrder() {
				this.$api.offlineInfoByorder({
					orderSn: this.order.orderSn
				}).then(res => {
					res.data.remainNums = res.data.remainNums || res.data.rentNums;
					this.order = res.data
				})
			},

			closeOrder() {
				const _ = this;
				uni.showModal({
					title: '提示',
					content: '确认结束这个订单？',
					success: (r) => {
						if (r.confirm) {
							_.$api.managerEndOrder({
								orderSn: this.order.orderSn
							}).then(res => {
								uni.showToast({
									title: '操作成功'
								})
								_.getAdminData()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.orderDetail {
		padding-top: 1rpx;
		min-height: 100vh;
		background-color: #F8F8F8;

		.header-bg {
			position: absolute;
			top: 0;
			width: 100vw;
			height: 50vw;
			overflow: hidden;

			&:after {
				width: 140%;
				height: 50vw;
				position: absolute;
				left: -20%;
				top: 0;
				content: '';
				border-radius: 0 0 50% 50%;
				background: linear-gradient(to right, #FEE704, #FDD001);
			}
		}

		.code {
			position: relative;
			margin-top: 1.7vw;
			text-align: center;
			font-weight: bold;
			font-size: 9.2vw;
			line-height: 9.2vw;
		}

		.label-box {
			position: relative;
			margin-top: 28rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 30rpx;
		}

		.group {
			position: relative;
			padding: 0 3.3vw;
			margin: 3.3vw 4vw 0;
			background-color: #FFFFFF;
			border-radius: 1.6vw;
			padding-bottom: 0.9vw;

			.top {
				display: flex;
				align-items: center;
				height: 10vw;
				border-bottom: 2rpx solid #F8F8F8;
				margin-bottom: 2.3vw;

				.line {
					width: 4rpx;
					height: 3.2vw;
					margin-right: 1.3vw;
					border-radius: 4rpx;
					background-color: #FDD302;
				}

				.label {
					font-weight: bold;
					font-size: 4vw;
				}
			}

			.cell {
				display: flex;
				align-items: center;
				margin-bottom: 4vw;
				font-size: 3.5vw;
				line-height: 3.5vw;

				.label {
					color: #333333;
				}

				.message {
					color: #AAAAAA;
				}
			}
		}

		.footer-btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100vw - 8vw);
			padding: 2.3vw 0;
			margin: 0 4vw;

			.btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 11.5vw;
				border-radius: 11.5vw;
				margin-right: 4vw;
				font-weight: 500;
				font-size: 4vw;

				&:last-child {
					margin: 0;
				}

				&.left {
					color: #FFFFFF;
					background: linear-gradient(to right, #43F62D, #22E151, #01CB75);
				}

				&.right {
					background: linear-gradient(to right, #FEE704, #FDD001);
				}
			}
		}
	}
</style>