dsn_android/pages/bagStorage/orders.vue

<template>
	<view class="bagStorageOrders">
		<navigation-bar-view ref="nav" :maxTimer="60"></navigation-bar-view>
		<view class="label-box">第一步：选择箱门</view>
		<view class="selected-box">
			<block v-for="(item, i) in rentCabinetList" :key="i">
				<view class="item" :class="selectedIndex == i ? 'active' : ''" @click="changeSpec(i)">
					<image class="selected-icon" :src="require('../../static/images/icon-selected.png')" v-if="selectedIndex == i"></image>
					<block v-if="item.cabinetType == 1">
						<image class="small-icon" :src="require('../../static/images/icon-sub-box-selected.png')" v-if="selectedIndex == i"></image>
						<image class="small-icon" :src="require('../../static/images/icon-sub-box.png')" v-else></image>
						<view class="label">小格子</view>
					</block>
					<block v-if="item.cabinetType == 2">
						<image class="middle-icon" :src="require('../../static/images/icon-middle-box-selected.png')" v-if="selectedIndex == i"></image>
						<image class="middle-icon" :src="require('../../static/images/icon-middle-box.png')" v-else></image>
						<view class="label">中格子</view>
					</block>
					<block v-if="item.cabinetType == 3">
						<image class="big-icon" :src="require('../../static/images/icon-big-box-selected.png')" v-if="selectedIndex == i"></image>
						<image class="big-icon" :src="require('../../static/images/icon-big-box.png')" v-else></image>
						<view class="label">大格子</view>
					</block>
					<view class="message">{{item.cabinetDesc}}</view>
				</view>
			</block>
		</view>
		<view class="label-box">第二步：存物人手机号</view>
		<view class="input-box">{{options.phone}}</view>
		<view class="label-box">第三步：选择存放时长</view>
		<picker mode="selector" :range="rentOptionDtoList" range-key="name" :value="timersIndex" @change="changeTimers">
			<view class="input-box selected">
				<text v-if="rentOptionDtoList.length">{{rentOptionDtoList[timersIndex].name}}</text>
				<image class="arrow" :src="require('../../static/images/icon-arrow-right-grey.png')"></image>
			</view>
		</picker>
		<view class="agreement-box">
			<text>下单即同意</text>
			<text class="agreement" @click="openAgreementPopup">《木桩租柜服务用户协议》</text>
		</view>
		<view class="footer-btn">
			<view class="left">
				<view class="price" v-if="rentCabinetList.length">￥{{rentCabinetList[selectedIndex].price}}</view>
				<!--  -->
				<!-- <view class="message" @click="showPriceDetail">
					<text>查看价格详情</text>
					<image class="arrow" :src="require('../../static/images/icon-arrow-right-grey.png')"></image>
				</view> -->
			</view>
			<view class="right" @click="orders">下单</view>
		</view>

		<uni-popup ref="agreementPopup" type="center">
			<view class="agreement-popup">
				<image class="delete-icon" :src="require('../../static/images/icon-delete.png')" @click="closeAgreementPopup"></image>
				<scroll-view class="text-box" scroll-y>
					<rich-text :nodes="agreement.data"></rich-text>
				</scroll-view>
			</view>
		</uni-popup>

		<uni-popup ref="priceDetailPopup" type="center">
			<view class="price-popup">
				<image class="delete-icon" src="../../static/images/icon-delete.png" @click="closePriceDetail"></image>
				<view class="title">
					<text>存包费用：</text>
					<text class="num">3</text>
					<text>元</text>
				</view>
				<view class="label">详细价格详情</view>
				<block v-for="(item, i) in rentPopup" :key="i">
					<view class="cell">
						<image class="icon" :src="require('../../static/images/icon-sub-box-popup.png')" mode="aspectFit" v-if="item.cabinetType == 1"></image>
						<image class="icon" :src="require('../../static/images/icon-middle-box-popup.png')" mode="aspectFit" v-if="item.cabinetType == 2"></image>
						<image class="icon" :src="require" mode="aspectFit" v-if="item.cabinetType == 3"></image>
						<view class="info">
							<view class="message" v-for="(sub, j) in item.list" :key="j">
								<text>{{sub.description}}，</text>
								<text class="num">{{sub.price}}</text>
								<text>元</text>
							</view>
						</view>
					</view>
				</block>
				<view class="btn" @click="closePriceDetail">知道了</view>
			</view>
		</uni-popup>
		<uni-popup ref="payPopup" type="center">
			<view class="pay-popup">
				<image class="delete-icon" :src="require('../../static/images/icon-delete.png')" @click="closePayDetail"></image>
				<view class="title">
					<text>请扫码支付，你的存物箱号为：{{order.caseSn}}</text>
				</view>
				<view class="code-box">
					<view class="item">

						<view class="qrcode">
							<!-- <canvas canvas-id="aliCode" /> -->
							<image :src="aliCodeImg"></image>
							<!-- <mosowe-canvas-image ref="aliCanvas" @canvasImage="aliCanvasImage" :lists="aliLists" height="40vw" width="40vw" /> -->
						</view>
						<view class="label">支付宝</view>
					</view>
					<view class="item">

						<view class="qrcode">
							<!-- <canvas canvas-id="weChatCode" /> -->
							<image :src="wxCodeImg"></image>
							<!-- <mosowe-canvas-image ref="wxCanvas" @canvasImage="wxCanvasImage" :lists="wxLists" height="40vw" width="40vw" /> -->
						</view>
						<view class="label">微信</view>
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import navigationBarView from '../../components/navigationBarView.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
	import mosoweCanvasImage from '@/components/mosowe-canvas-image/mosowe-canvas-image.vue'
	export default {
		components: {
			navigationBarView,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			mosoweCanvasImage
		},
		data() {
			return {
				selectedIndex: 0,
				rentOptionDtoList: [],
				timersIndex: 0,
				agreement: {},
				info: {},
				rentCabinetList: [],
				rentPopup: [],
				options: {},
				order: {},
				codeBody: {},
				timer: '',
				aliLists: [{
					type: 'qr',
					content: '',
					x: 0,
					y: 0,
				}],
				aliCodeImg: '',
				wxLists: [{
					type: 'qr',
					content: '',
					x: 0,
					y: 0,
				}],
				wxCodeImg: ''
			}
		},

		onLoad(options) {
			this.options = options
			this.getAgreement();
			this.getData();
		},

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

		beforeDestroy() {
			clearInterval(this.timer);
		},

		methods: {
			getData() {
				let sn = uni.getStorageSync('sn');
				this.$api.deviceInfo({
					deviceSn: sn
				}).then(res => {
					this.info = res.data;
					this.rentOptionDtoList = res.data.rentOptionDtoList;
					this.rentCabinetList = res.data.rentOptionDtoList.length ? res.data.rentOptionDtoList[this.timersIndex].rentCabinetList :
						[];
					let cabinetTypes = res.data.cabinetTypes.split(',')
					this.selectedIndex = Number(cabinetTypes[0]) - 1

					let lists = []
					// for (let i = 0; i < res.data.rentOptionDtoList.length; i++) {
					// 	let item = res.data.rentOptionDtoList[i];
					// 	for (let j = 0; j < item.rentCabinetList.length; j++) {
					// 		let rentCabinet = item.rentCabinetList[j];
					// 		rentCabinet.list = rentCabinet.list || [] 
					// 		let n = 0;
					// 		for (let k = 0; k < lists.length; k++) {
					// 			if (lists[k].cabinetType == rentCabinet.cabinetType) {
					// 				n++;
					// 				if (!lists[k].list) lists[k].list = []
					// 				lists[k].list.push({
					// 					...item,
					// 					...rentCabinet
					// 				})
					// 			}
					// 		}
					// 		if (n == 0) {
					// 			let list = [{ 
					// 				description: item.description,
					// 				price: rentCabinet.price
					// 			}]
					// 			rentCabinet.list = list
					// 			lists.push(rentCabinet)
					// 		}
					// 	}
					// }
					this.rentPopup = lists;
				})
			},


			changeSpec(e) {
				if (this.info.cabinetTypes.indexOf(String(e + 1)) == -1) {
					uni.showToast({
						icon: 'none',
						title: '该箱门不可用'
					})
					return;
				}
				this.selectedIndex = e
			},

			getAgreement() {
				this.$api.commonAboutus({
					type: 2
				}).then(res => {
					this.agreement = res;
				})
			},

			changeTimers(e) {
				this.timersIndex = e.detail.value
			},

			openAgreementPopup() {
				this.$nextTick(function() {
					this.$refs.agreementPopup.open();
				})
			},

			closeAgreementPopup() {
				this.$nextTick(function() {
					this.$refs.agreementPopup.close();
				})
			},

			aliCanvasImage(e) {
				this.aliCodeImg = e;
			},

			wxCanvasImage(e) {
				this.wxCodeImg = e;
			},

			orders() {
				const params = {
					cabinetType: this.rentCabinetList[this.selectedIndex].cabinetType,
					mobile: this.options.phone,
					optionId: this.rentOptionDtoList[this.timersIndex].id,
					deviceSn: uni.getStorageSync('sn')
				}
				this.$api.offorderCreateOffline(params).then(res => {
					console.log(res);
					this.order = res.order;
					this.codeBody.aliCode = res.aliCode;
					this.codeBody.wxCode = res.wxCode;
					this.aliCodeImg = res.aliCode;
					this.wxCodeImg = res.wxCode;
					const $this = this;
					let info = uni.getSystemInfoSync()
					// this.aliLists[0].content = res.aliCode;
					// this.aliLists[0].width = info.screenWidth * 0.4
					// this.aliLists[0].height = info.screenWidth * 0.4
					// this.wxLists[0].content = res.wxCode;
					// this.wxLists[0].width = info.screenWidth * 0.4
					// this.wxLists[0].height = info.screenWidth * 0.4
					this.$nextTick(function() {
						$this.$refs.nav.timer = 60;
						$this.$refs.nav.countdown()
						$this.$refs.payPopup.open();
						// setTimeout(function() {
						// $this.$refs.aliCanvas.createCanvas();
						// $this.$refs.wxCanvas.createCanvas();
						// }, 500)

						$this.timer = setInterval(function() {
							$this.getPayStatus();
						}, 3000)
					})
				})
			},

			getPayStatus() {
				this.$api.offorderGetStatus({
					orderSn: this.order.orderSn
				}).then(res => {
					if (res.status == 1) {
						clearInterval(this.timer);
						uni.redirectTo({
							url: '/pages/bagStorage/success?remind=' + this.order.remind
						})
					}
				})
			},

			showPriceDetail() {
				this.$nextTick(function() {
					this.$refs.priceDetailPopup.open();
				})
			},

			closePriceDetail() {
				this.$nextTick(function() {
					this.$refs.priceDetailPopup.close();
				})
			},

			closePayDetail() {
				clearInterval(this.timer)
				this.$nextTick(function() {
					this.$refs.payPopup.close();
				})
			},
		}
	}
</script>

<style lang="scss">
	.bagStorageOrders {
		min-height: 100vh;
		background-color: #F8F8F8;

		.label-box {
			padding: 7.7vw 5vw 2.9vw;
			color: #222222;
			font-size: 4.2vw;
			line-height: 4.2vw;
		}

		.selected-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 4.8vw;

			.item {
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 26.5vw;
				padding-bottom: 9vw;
				margin-right: 4.2vw;
				border: .4vw solid #EBEBEB;
				border-radius: .8vw;
				background-color: #FFFFFF;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					border-color: #FFDB82;
				}

				.selected-icon {
					position: absolute;
					top: 0;
					right: 0;
					width: 5.4vw;
					height: 5.4vw;
				}

				.small-icon {
					margin-top: 11vw;
					width: 16.3vw;
					height: 6.9vw;
				}

				.label {
					margin-top: 6vw;
					font-weight: 500;
					color: #FFB706;
					font-size: 4.2vw;
					line-height: 4.2vw;
				}

				.message {
					margin-top: 2.7vw;
					color: #AAAAAA;
					font-size: 2.9vw;
					line-height: 2.9vw;
				}

				.middle-icon {
					margin-top: 11vw;
					width: 16.7vw;
					height: 6.7vw;
				}

				.big-icon {
					margin-top: 9.6vw;
					width: 16.7vw;
					height: 8.1vw;
				}
			}
		}

		.input-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 13.3vw;
			border: .4vw solid #DEDEDE;
			background-color: #F4F4F4;
			padding: 0 3.5vw;
			margin: .3vw 4.8vw 0;
			color: #444444;
			font-size: 5vw;
			border-radius: .8vw;

			&.selected {
				border-color: #FBD87F;
				font-weight: 500;
				color: #FFB706;
				background-color: #FFFFFF;
			}

			.arrow {
				width: 2.3vw;
				height: 3.8vw;
			}
		}

		.agreement-box {
			margin: 8vw 5vw 0;
			font-size: 2.9vw;
			line-height: 2.9vw;

			.agreement {
				color: #008CFF;
			}
		}

		.footer-btn {
			display: flex;
			height: 16.7vw;
			margin: 4vw 5vw 3.8vw;

			.left {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				padding: 0 8.1vw;
				border-radius: 16.7vw 0 0 16.7vw;
				background-color: #0C0B09;

				.price {
					color: #FFFFFF;
					font-size: 6.3vw;
					line-height: 6.3vw;
				}

				.message {
					display: flex;
					align-items: center;
					margin-top: 2.3vw;
					color: #9E9D9D;
					font-size: 2.9vw;
					line-height: 2.9vw;

					.arrow {
						width: 1.3vw;
						height: 1.7vw;
						margin-left: .6vw;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 35.4vw;
				border-radius: 0 16.7vw 16.7vw 0;
				background: linear-gradient(to right, #FEE704, #FDD001);
				font-size: 5vw;
			}
		}

		.agreement-popup {
			position: relative;
			width: 90.8vw;
			height: 70vh;
			background-color: #FFFFFF;
			border-radius: 1.7vw;
			overflow-y: scroll;

			.delete-icon {
				position: absolute;
				top: 4vw;
				right: 4vw;
				width: 3.3vw;
				height: 3.3vw;
			}

			.text-box {
				width: calc(100% - 11.6vw);
				height: 56.5vh;
				margin: 11.3vw 0 0;
				padding: 0 5.8vw;
				color: #888888;
				font-size: 3.2vw;
			}
		}

		.price-popup {
			position: relative;
			width: 90.8vw;
			height: 70vh;
			background-color: #FFFFFF;
			border-radius: 1.7vw;
			overflow-y: scroll;

			.delete-icon {
				position: absolute;
				top: 4vw;
				right: 4vw;
				width: 3.3vw;
				height: 3.3vw;
			}

			.title {
				margin-top: 14vw;
				text-align: center;
				font-weight: 500;
				font-size: 4.2vw;
				line-height: 4.2vw;

				.num {
					color: #FFB706;
				}
			}

			.label {
				margin: 7.3vw 5.8vw 5.6vw;
				font-size: 2.9vw;
				font-weight: 500;
			}

			.cell {
				display: flex;
				align-items: center;
				min-height: 18.5vw;
				margin: 0 5.8vw 1.9vw;
				border-radius: .8vw;
				background-color: #F8F8F8;

				.icon {
					width: 16.7vw;
					height: 6.7vw;
					margin: 0 11.5vw 0 6.5vw;
				}

				.info {
					flex: 1;

					.message {
						font-size: 2.1vw;
						line-height: 2.1vw;
						margin-bottom: 1.9vw;

						&:last-child {
							margin-bottom: 0;
						}

						.num {
							color: #FFB706;
						}
					}
				}
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 5vw;
				line-height: 5vw;
				margin: 12.1vw 0 0;
			}
		}

		.pay-popup {
			position: relative;
			width: 90vw;
			min-height: 70vw;
			margin: 0 5.8vw 1.9vw;
			border-radius: .8vw;
			background-color: #F8F8F8;
			padding-top: 1rpx;

			.title {
				margin: 7vw 0;
				text-align: center;
				font-weight: 500;
				font-size: 4.2vw;
				line-height: 4.2vw;
			}

			.delete-icon {
				position: absolute;
				top: 4vw;
				right: 4vw;
				width: 3.3vw;
				height: 3.3vw;
			}

			.code-box {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					display: flex;
					align-items: center;
					flex-direction: column;

					.qrcode {
						width: 40vw;
						height: 40vw;

						image {
							width: 40vw;
							height: 40vw;
						}
					}

					.label {
						margin-top: 2.9vw;
						font-size: 2.9vw;
						font-weight: 500;
					}
				}
			}


		}
	}
</style>