qingyuyiliao/pages/index/service.vue

<template>
	<view class="service-home">
		<view class="ongoing" v-if="goingOrder" @click="onGoing">
			您有一个正在进行中的订单
		</view>
		<view class="mobile-frame" v-show="frameIshow">
			<view class="frame">
				<image src="../../static/image/tips.png" mode=""></image>
				<view class="title">
					当前操作需要授权手机号
				</view>
				<view class="submit">
					<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即授权</button>
				</view>
			</view>
			<view class="close" @click="frameIshow=false">
				<image src="../../static/image/close-white.png" mode=""></image>
			</view>
		</view>
		<view class="top">
			<view class="title">
				设备信息
			</view>
			<view class="top-content">
				<view class="left">
					<image src="../../static/image/machine.png" mode=""></image>
				</view>
				<view class="right">
					<view class="text">
						编号：{{detail.no ? detail.no : 0}}
					</view>
					<view class="text">
						水位：{{detail.water_level_warning_text ? detail.water_level_warning_text :0}}
					</view>
					<view class="text">
						温度：{{detail.temperature ? detail.temperature : 0}}℃
					</view>
					<view class="text">
						水质：{{detail.water_quality ? detail.water_quality : 0}}mg/L
					</view>

				</view>
			</view>
		</view>
		<view class="list" v-if="type!==0">
			<view class="title">
				气路选择
			</view>
			<view class="list-item" :class="currentList==index?'listActive':''" v-for="(item,index) in list"
				:key='index' @click="changeList(index)">
				<view class="list-title">
					{{item.name}}
				</view>
				<!-- <view class="text">
					300
				</view> -->
				<view class="time">
					￥{{item.money}}/分钟
				</view>
			</view>
		</view>
		<view class="select-time">
			<view class="title">
				时间选择
			</view>
			<view class="time-list">
				<view class="time-item" :class="currentTime==index?'timeActive':''" @click="changeTime(index)"
					v-for="(item,index) in timeList" :key='index'>
					{{item.time}}分钟
				</view>
				<view class="time-item" :class="currentTime==-1?'timeActive':''" @click="changeTime(-1)">
					自定义
				</view>
			</view>
			<view class="customTime" v-show="isShow">
				<input type="number" value="" placeholder="请输入时间(最大输入240分钟)" v-model="customTime"
					@input="inputCustom()" />
			</view>
		</view>
		<!-- 确认支付底部弹框 -->
		<view class="frame-border" v-show="surePay">
			<view class="frame">
				<view class="close" @click="surePay=false">
					<image src="../../static/image/close.png" mode=""></image>
				</view>
				<view class="frame-content" v-if="prePay.isTimePay==false">
					<view class="title" v-if="type!==0">
						当前模式：{{sureMessage.name}}
					</view>
					<view class="title">
						<text>服务时长：{{sureMessage.work_time}}分钟</text><text class="money">￥{{prePay.time_money}}</text>
					</view>
					<view class="tips" v-if="prePay.meTime!==0 && prePay.isTimePay==false">
						<text>您的吸氢卡剩余时长({{prePay.meTime}}分钟)不足，本次吸氢将采用微信支付</text>
					</view>

					<!-- <view class="tips">
						计费规则
					</view> -->
					<view class="tips-content">
						<text>确认支付之后，若中途关闭设备，将按实际使用时间扣费（最少使用30分钟不满三十分钟将按30分钟扣费），多出费用将在结束订单时原路退还</text>

					</view>
				</view>
				<view class="frame-content" v-if="prePay.isTimePay==true">
					<view class="title" v-if="type!==0">
						当前模式：{{sureMessage.name}}
					</view>
					<view class="title">
						<text>服务时长：{{sureMessage.work_time}}分钟</text>
					</view>
					<view class="title">
						<text>吸氢卡剩余时长：{{prePay.meTime}}分钟</text>
					</view>
					<view class="tips" v-if="sureMessage.work_type==2 && prePay.isTimePay==true">
						<text>您选择的吸氢模式为AB双路吸氢，本次服务将扣除2倍时长</text>
					</view>
					<view class="tips" style="font-size: 32upx; font-weight: 500;">
						<text>本次吸氢将使用吸氢卡的剩余时长，中途提前结束将返还多余时长</text>
					</view>
				</view>
				<view class="frame-submit" @click="configPayment()">
					确认支付
				</view>
			</view>
		</view>
		<view class="submit" @click="payMent()">
			立即支付
		</view>
		<!-- 支付成功弹框 -->
		<view class="success-frame" v-show="skipShow">
			<view class="success-content">
				<image src="../../static/image/success.png" mode=""></image>
				<view class="text">
					支付成功，即将在{{count}}后跳转
				</view>
				<view class="skip" @click="jumpNow()">
					立即跳转
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {

		data() {
			return {
				type: 0, //设备类型
				frameIshow: false,
				list: [{
						name: "A气路",
						money: app.globalData.a_minute_money
					},
					{
						name: "B气路",
						money: app.globalData.b_minute_money
					},
					{
						name: "AB气路",
						money: app.globalData.ab_minute_money
					}
				],
				sureMessage: {
					work_type: '',
					name: '',
					work_time: '',
					device_id: '',
					shop_id: ''
				},
				prePay: '', //预支付结果
				currentList: 0,
				currentTime: 0,
				isShow: false,
				surePay: false, //确认支付
				count: 10,
				skipShow: false, //跳转
				detail: "",
				// time1: ['30','60','120'

				// ],
				timeList: [{
						id: 0,
						time: 60
					},
					{
						id: 1,
						time: 120
					},
					{
						id: 2,
						time: 180
					},
				],
				customTime: '', //自定义时间
				goingOrder: ''
			}
		},
		created() {
			if (this.skipShow == true) {
				this.countDown();
			}

		},
		onShow() {
			app.request('/order/is-server-exist', '', 'get').then(res => {
				console.log(res, '是否有进行中订单')
				this.goingOrder = res.data.data.no

			})
		},
		onLoad(options) {
			let that = this
			setTimeout(function() {
				console.log(app.globalData.is_auth, 'ppppp')
				if (app.globalData.is_auth == true) {
					that.frameIshow = false
				} else {
					that.frameIshow = true
				}
			}, 2000)
			console.log(options)
			if (options.q !== undefined) {
				let scan = decodeURIComponent(options.q);
				let n1 = scan.length; //地址的总长度
				let n2 = scan.indexOf("="); //取得=号的位置
				let id = scan.substr(n2 + 1, n1 - n2); //从=号后面的内容
				let params = {
					no: id
				}
				console.log("000000")
				this.equipmentDetail(params)
			} else
			if (options.id) {
				let params = {
					id: options.id
				}
				console.log("1111")
				this.equipmentDetail(params)
			} else {
				let params = {
					no: options.device_no
				}
				console.log("22222")
				this.equipmentDetail(params)
			}

		},
		methods: {
			//获取手机号
			getPhoneNumber: function(e) {
				console.log(e.detail)
				let data = {
					session_key: uni.getStorageSync('session_key'),
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}
				app.request('/user/sync-mobile', data, 'post').then(res => {
					this.frameIshow = false
					app.globalData.is_auth = true
				})
			},
			//设备详情
			equipmentDetail: function(params) {
				uni.showLoading()
				app.request('/device', params, 'get').then(res => {
					console.log(res.data.data.data.shop.times, '设备详情')
					this.type = res.data.data.data.type
					this.detail = res.data.data.data
					var time = res.data.data.data.shop.times
					// if(res.data.data.data.shop.times){
					// 	this.timeList=time
					// }
					uni.setStorageSync('device_no', res.data.data.data.no)
					this.sureMessage = {
						work_type: 0,
						name: this.list[0].name,
						work_time: this.timeList[0].time,
						device_id: this.detail.id,
						shop_id: this.detail.shop_id
					}
					this.list = [{
								name: "A气路",
								money: res.data.data.data.shop.a_minute_money
							},
							{
								name: "B气路",
								money: res.data.data.data.shop.b_minute_money
							},
							{
								name: "AB气路",
								money: res.data.data.data.shop.ab_minute_money
							}
						],
						uni.hideLoading()
				})
			},
			changeList: function(e) {
				this.currentList = e
				this.sureMessage.name = this.list[e].name
				this.sureMessage.work_type = e
			},
			inputCustom: function() {
				this.sureMessage.work_time = this.customTime
			},
			changeTime: function(e) {
				console.log(e)

				if (e == -1) {
					console.log(this.customTime)
					this.isShow = true
					this.sureMessage.work_time = ''
				} else {
					console.log(this.customTime)
					this.isShow = false

					this.sureMessage.work_time = this.timeList[e].time
				}
				this.currentTime = e
			},


			//预支付
			payMent: function() {
				// surePay=true
				if (!this.sureMessage.work_time) {
					uni.showToast({
						title: "请输入时间",
						icon: 'none'
					})
				} else if (this.sureMessage.work_time > 240) {
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '时间不能大于240分钟'
					})
				} else {
					let params = {
						work_type: this.sureMessage.work_type,
						work_time: this.sureMessage.work_time,
						device_id: this.sureMessage.device_id,
						shop_id: this.sureMessage.shop_id,
						is_prepay: 1
					}
					app.request('/order', params, 'post').then(res => {
						console.log(res, '确认支付')
						if (res.statusCode == 200) {
							// this.payMoney = res.data.data.time_money
							this.prePay = res.data.data
							this.surePay = true

						} else {
							// uni.showToast({
							// 	title: res.data.message,
							// 	icon: 'none'
							// })
						}
					})
				}
			},
			//正在进行中的订单
			onGoing: function() {
				uni.navigateTo({
					url: './order?order_no=' + this.goingOrder
				})
			},
			//确认支付
			configPayment: function() {
				let params = {
					work_type: this.sureMessage.work_type,
					work_time: this.sureMessage.work_time,
					device_id: this.sureMessage.device_id,
					shop_id: this.sureMessage.shop_id,
				}
				app.request('/order', params, 'post').then(res => {
					console.log(res, '确认支付')

					if (res.statusCode == 200) {
						let data = res.data.data
						if (this.prePay.isTimePay == true) {
							let order_no = data.order_no
							uni.reLaunch({
								url: './order?order_no=' + order_no
							})
						} else if (data.is_pay == false) {
							let order_no = data.order_no
							uni.reLaunch({
								url: './order?order_no=' + order_no
							})
						} else {
							let order_no = res.data.data.no
							uni.setStorageSync('order_no', res.data.data.no)
							uni.setStorageSync('device_id', this.sureMessage.device_id)
							uni.setStorageSync('work_time', this.sureMessage.work_time)
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.data.timeStamp,
								nonceStr: res.data.data.nonceStr,
								package: res.data.data.package,
								signType: res.data.data.signType,
								paySign: res.data.data.paySign,
								appId: res.data.data.appId,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.navigateTo({
										url: './surePay?order_no=' + order_no
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									console.log(res.data.data.timeStamp)
									console.log(res.data.data.timeStamp.toString())
									console.log(typeof(res.data.data.package))
								}
							});
						}

						// this.skipShow = true
						// uni.navigateTo({
						// 	url:'./order'
						// })

					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-home {
		background-color: #f4f4f4;
		height: 100%;
		padding-bottom: 50upx;

		.ongoing {
			position: fixed;
			bottom: 20%;
			padding: 20upx;
			right: 0;
			font-size: 28upx;
			background-color: $mine-background-color;
			color: #FFFFFF;
			border-radius: 50upx 0 0 50upx;

		}

		.mobile-frame {
			position: fixed;
			height: 100vh;
			width: 100%;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 99999;
			top: 0;

			.frame {
				width: 50%;
				margin: 0 auto;
				padding: 50upx 30upx;
				margin-top: 40%;
				border-radius: 12upx;
				background-color: #FFFFFF;
				text-align: center;

				image {
					height: 90upx;
					width: 90upx;
				}

				.title {
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
				}

				.submit {
					margin: 0 auto;
					width: 50%;
					margin-top: 30upx;

					button {
						background-color: $mine-background-color;
						height: 70upx;
						line-height: 70upx;
						text-align: center;
						font-size: 26upx;
						color: #FFFFFF;
						background-color: $mine-background-color;
					}
				}

			}

			.close {
				margin: 0 auto;
				height: 100upx;
				width: 100upx;
				text-align: center;

				margin-top: 10%;

				image {
					height: 50upx;
					width: 50upx;
				}
			}
		}

		.top {
			padding: 30upx;

			.title {
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.top-content {
				display: flex;
				margin-top: 20upx;

				.left {
					flex: 0 0 230upx;
					height: 187upx;
					overflow: hidden;
					margin-right: 22upx;

					image {
						width: 230upx;
						height: 100%;
					}
				}

				.right {
					flex: 1;

					.text {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-top: 5upx;
					}
				}
			}

		}

		.list {
			margin-top: 80upx;

			.title {
				padding-left: 30upx;
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.list-item {
				margin: 30upx 30upx;
				background-color: #FFFFFF;
				padding: 20upx 30upx;
				position: relative;

				.list-title {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #000000;
				}

				.text {
					margin-top: 17upx;
					font-size: 24upx;
					font-family: PingFang SC;
					line-height: 35upx;
					color: #B6B6B6;
				}

				.time {
					position: absolute;
					right: 30upx;
					bottom: 20upx;
					font-size: 20upx;
					font-family: PingFang SC;
					color: #E71600;
				}
			}

			.listActive {
				background-color: $mine-background-color;
				box-shadow: 0upx 2upx 13upx 0upx rgba(150, 150, 150, 0.35);
				margin: 30upx 10upx;

				.list-title {
					color: #FFFFFF;
					font-size: 36upx;
					line-height: 40upx;
				}

				.text {
					color: #FFFFFF;
					font-size: 26upx;
				}

				.time {
					color: #FFFFFF;
					font-size: 22upx;
				}
			}
		}

		.select-time {
			padding: 30upx 0;
			margin-top: 50upx;

			.title {
				padding: 0 30upx;
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.time-list {
				display: flex;
				padding: 0 10upx;
				margin-top: 25upx;

				.time-item {
					flex: 1;
					margin: 0 10upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					background-color: #FFFFFF;
					border-radius: 37upx;
				}

				.timeActive {
					font-weight: bold;
					background: $mine-background-color;
					font-size: 33upx;
					box-shadow: 0upx 2upx 13upx 0upx rgba(150, 150, 150, 0.35);
					border-radius: 37upx;
					color: #FFFFFF;
				}
			}

			.customTime {
				height: 90upx;
				background-color: #FFFFFF;
				margin: 30upx;

				input {
					height: 90upx;
					padding: 0 30upx;
					line-height: 90upx;
					font-size: 34upx;
				}
			}
		}

		.frame-border {
			background-color: rgba($color: #000000, $alpha: 0.5);
			height: 100vh;
			width: 100%;
			position: fixed;
			z-index: 99999;
			top: 0;

			.frame {
				background-color: #FFFFFF;
				position: absolute;
				bottom: 0;
				padding: 30upx 0;
				width: 100%;
				padding-top: 70upx;

				.close {
					position: absolute;
					height: 70upx;
					width: 100upx;
					top: 0;
					right: 0;

					image {
						margin-left: 20upx;
						margin-top: 10upx;
						height: 50upx;
						width: 50upx;
					}
				}

				.frame-content {
					// margin: 0 30upx;
					width: 100%;

					.title {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						margin: 0 30upx;
						line-height: 50upx;

						.money {
							color: #D22928;
							font-size: 32upx;
							font-weight: 500;
							float: right;
						}
					}

					.tips {
						margin-left: 30upx;
						font-size: 24upx;
						font-family: PingFang SC;
						// border-left: 5upx solid #D22E2D;
						padding-left: 10upx;
						font-weight: bold;
						color: #D22E2D;
						margin-top: 30upx;
					}

					.tips-content {
						margin: 0 30upx;
						margin-top: 30upx;
						padding: 25upx 15upx;
						background-color: #EEEEEE;
						color: #063530;
						font-size: 24upx;
						line-height: 40upx;
						font-family: PingFang SC;
						font-weight: 400;

					}
				}

				.frame-submit {
					width: 80%;
					height: 120upx;
					line-height: 120upx;
					text-align: center;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					background-color: $mine-background-color;
					margin: 0 auto;
					margin-top: 130upx;
					border-radius: 60upx;
				}
			}
		}

		.submit {
			height: 122upx;
			line-height: 122upx;
			border-radius: 61upx;
			color: #FFFFFF;
			margin: 50upx 30upx 50upx;
			background: $mine-background-color;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;

		}

		.success-frame {
			background-color: rgba($color: #000000, $alpha: 0.5);
			height: 100vh;
			width: 100%;
			position: fixed;
			z-index: 99999;
			top: 0;

			.success-content {
				width: 70%;
				background-color: #FFFFFF;
				margin: 0 auto;
				padding: 30upx;
				margin-top: 35%;
				text-align: center;

				image {
					height: 80upx;
					width: 80upx;
					margin-top: 10%;
				}

				.text {
					margin-top: 40upx;
					font-size: 26upx;
					color: #808080;
				}

				.skip {
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					background-color: $mine-background-color;
					width: 50%;
					margin: 0 auto;
					margin-top: 30upx;
					border-radius: 20upx;
					color: #FFFFFF;
					margin-bottom: 50upx;
				}
			}
		}

	}
</style>