qingyuyiliao/pages/index/order.vue

<template>
	<view class="order-home">
		<!-- 	<view class="time">
			{{minute? minute:time}}:{{second?second:00}}
		</view> -->

		<view class="status">
			<view class="left">
				<view class="text1">

					<text>{{orderDetails.work_type_text}}</text>
				</view>
				<view class="text2">
					吸氢模式
				</view>
			</view>
			<view class="left">
				<view class="text1">
					{{minute>=10? minute:'0'+minute}}:{{second>=10?second:'0'+second}}

				</view>
				<view class="text2">
					剩余时长
				</view>
			</view>
		</view>
		<view class="shebei">
			<view class="title">
				机器状态（编码：{{no}}）
			</view>
			<view class="item-border">
				<view class="item" style="border-left: solid 1upx #ececec;">
					<image src="../../static/image/water.png" mode=""></image>
					<view class="text">
						<view class="name">
							{{deviceDetail.water_level_warning_text ? deviceDetail.water_level_warning_text :'--'}}
						</view>
					</view>
				</view>
				<view class="item">
					<image src="../../static/image/wendu.png" mode=""></image>
					<view class="text">
						<view class="name">
							{{deviceDetail.temperature ? deviceDetail.temperature :'--'}}℃
						</view>
					</view>
				</view>
				<view class="item">
					<image src="../../static/image/shuizhi.png" mode=""></image>
					<view class="text">
						<view class="name">
							{{deviceDetail.water_quality ? deviceDetail.water_quality : '--'}}mg/L
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="submit1">
			<view class="suspend" @click="suspendOperation()" v-if="orderDetails.status!==4">
				暂停吸氢
			</view>
			<view class="restart" @click="reStart()" v-else-if="orderDetails.status==4">
				重新启动
			</view>
			<view class="stop" @click="stopOperation()">
				结束订单
			</view>
		</view>
		<view class="refresh" @click="refresh()">
			<image src="../../static/image/ref.png" mode=""></image>
			<view class="ref-text">
				点击刷新
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	let counTDown
	export default {
		data() {
			return {
				deviceDetail: '',
				no: '',
				time: uni.getStorageSync('work_time'),
				order_no: '',
				minute: 0,
				second: 0,
				buttonStatus: 0,
				orderDetails: '',
				date6: '',
				work_time: '',


			}
		},
		onLoad(options) {

			//测试倒计
			console.log(options, 'ppppppppp')
			let that = this
			uni.showLoading()
			this.order_no = options.order_no

			// this.no = uni.getStorageSync('device_no')


		},
		onShow() {
			clearInterval(counTDown)
			this.orderDetail()
		},
		methods: {
			//点击刷新
			refresh:function(){
				clearInterval(counTDown)
				uni.showLoading({
					title:'刷新中'
				})
				this.orderDetail()
			},
			// 订单情况+根据定单编号查询
			orderDetail: function() {
				let data = {
					no: this.order_no
				}
				app.request('/orders', data, 'post').then(res => {
					console.log(res, '订单详情')
					let data = res.data.data.data
					this.orderDetails = data
					uni.hideLoading()

					let endTime = Date.parse(new Date()); //date日期类型
					let data1 = data.start_use_time
					let data2 = data1.replace(/-/g, '/')
					let data3 = new Date(data2)
					let startTime = data3.getTime()
					this.work_time = data.work_time
					this.countTime(startTime, endTime);
					let no = data.device.no
					this.no = data.device.no
					this.deviceMess(no)
				})
			},
			//设备信息
			deviceMess: function(no) {
				let params = {
					no: no
				}
				app.request('/device', params, 'get').then(res => {
					this.deviceDetail = res.data.data.data
					console.log(res, '--------------------------------------')
					uni.hideLoading()
				})
			},
			//倒计时
			countTime: function(startTime, endTime) {
				let that = this
				let date3 = endTime - startTime;
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				let workTime = that.work_time
				that.minute = minutes
				that.second = seconds
				that.time = workTime * 60 - (hours * 3600 + minutes * 60 + seconds)
				counTDown = setInterval(function() {
					that.time = that.time - 1
					// that.minute = that.time;
					// that.second =that.time;
					that.minute = parseInt(that.time / 60);
					that.second = parseInt(that.time % 60);
					console.log(that.minute + ':' + that.second, '+++++++++++++++重启服务')
					if (that.minute == 0 && that.second == 0) {
						clearInterval(counTDown)
						uni.showModal({
							content: "本次吸氢服务已经结束",
							confirmText: "返回首页",
							success: (res) => {
								if (res.confirm) {
									uni.reLaunch({
										url: './index'
									})
								}
							}
						})
					} else if (that.second < 0) {

						clearInterval(counTDown)
						that.minute = "0"
						that.second = "0"
						uni.showModal({
							content: "本次吸氢服务已经结束",
							confirmText: "返回首页",
							success: (res) => {
								if (res.confirm) {
									uni.reLaunch({
										url: './index'
									})
								}
							}
						})
					}
				}, 1000)
				console.log(workTime, '++++++++++++暂停服务')
				console.log(this.time + this.minute + "分 " + this.second)
				console.log(days + "天 " + hours + "小时 " + minutes + "分钟" + seconds)
			},
			//暂停吸氢
			suspendOperation: function() {
				uni.showModal({
					content: "即将暂停服务，暂停之后仍持续计费，是否继续？",
					success: (res) => {
						if (res.confirm) {

							console.log(this.minute)
							let data = {
								order_no: this.order_no,
								device_no: this.no
							}
							app.request('/device/close', data, 'post').then(res => {
								if (res.statusCode == 200) {
									uni.showToast({
										title: '服务暂停',
										icon: 'none'
									})
									this.orderDetails.status = 4
								} else {
									uni.showToast({
										title: '暂停失败',
										icon: 'none'
									})
								}

								console.log(res, '=============================')
							})
						} else if (res.cancel) {

						}
					}
				})

			},
			//重新启动
			reStart: function() {
				let that = this
				uni.showModal({
					content: "即将重新启动机器吸氢",
					success: (res) => {
						if (res.confirm) {

							let data = {
								order_no: that.order_no
							}
							app.request('/device/start', data, 'post').then(res => {

								if (res.statusCode == 200) {
									// clearInterval(counTDown)
									uni.showToast({
										title: '重启成功'
									})
									this.orderDetails.status = 2
									// this.orderDetail()
								} else {
									console.log(res, '重启失败')
									uni.showToast({
										title: '设备重启失败,请联系门店管理员',
										icon: 'none'
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '操作取消~',
								icon: 'none'
							})
						}
					}
				})

			},
			//关闭设备
			stopOperation: function() {
				let that = this
				console.log(that.order_no, 'order_no-------------------------')
				uni.showModal({
					title: '提示',
					content: '您即将结束本次吸氢服务，结束之后将无法继续，是否继续？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading()
							let params = {
								order_no: that.order_no, //订单编号
								device_no: that.no //设备编号
							}
							app.request('/order/close', params, 'post').then(res => {
								console.log(res)
								if (res.statusCode == 200) {
									clearInterval(counTDown)
									uni.hideLoading()
									uni.reLaunch({
										url: './index'
									})
								} else {
									uni.hideLoading()
									uni.showToast({
										title: res.data.message,
										icon: 'none'
									})
								}

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			}
		}

	}
</script>

<style lang="scss" scoped>
	.order-home {
		height: 100vh;
		background-color: #FFFFFF;
		width: 100%;



		.time {
			width: 200upx;
			height: 200upx;
			background-color: #ff781e;
			border-radius: 50%;
			color: #FFFFFF;
			font-size: 26upx;
			padding: 30upx;
		}

		.status {
			display: flex;
			text-align: center;
			padding: 0 30upx;
			margin-top: 30upx;

			.left {
				flex: 1;
				margin: 30upx;
				padding: 20upx;
				box-shadow: 0upx 2upx 13upx 0upx rgba(150, 150, 150, 0.35);

				.text1 {
					font-size: 40upx;
					color: $mine-background-color;
					font-weight: bold;
					line-height: 70upx;
					// font-style: italic;

					.text3 {
						font-size: 26upx;
						font-weight: 500;
						margin-left: 5upx;
					}
				}

				.text2 {
					font-size: 26upx;
					line-height: 50upx;
					color: #808080;
				}
			}

		}

		.shebei {
			padding: 0 50upx;
			margin-top: 60upx;

			.title {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				font-weight: 500;
				border-left: solid 6upx $mine-background-color;
				padding-left: 15upx;
				margin-bottom: 10upx;
				// border-bottom: solid 1upx #e3e3e3;
			}

			.item-border {
				display: flex;

				.item {
					margin-top: 30upx;
					padding: 30upx 0;
					flex: 1;
					text-align: center;
					border-right: solid 1upx #ececec;
					border-top: solid 1upx #ececec;
					border-bottom: solid 1upx #ececec;

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

					.text {
						margin-top: 20upx;
					}

					.name {
						font-size: 26upx;
						color: #808080;
					}
				}
			}

		}

		.submit1 {
			display: flex;
			margin-top: 100upx;

			.suspend {
				flex: 1;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				color: #FFFFFF;
				background-color: #f98975;
				font-size: 26upx;
				width: 30%;
				margin: 50upx 5% 50upx 15%;
				border-radius: 18upx;
			}

			.stop {
				width: 30%;
				margin: 50upx 15% 50upx 5%;
				flex: 1;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				color: #FFFFFF;
				background-color: $mine-background-color;
				font-size: 26upx;
				border-radius: 18upx;
				// width: 50%;
				// margin: 0 auto;
				// margin-top: 30%;
			}

			.restart {
				flex: 1;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				color: #FFFFFF;
				background-color: #40dc69;
				font-size: 26upx;
				width: 30%;
				margin: 50upx 5% 50upx 15%;
				border-radius: 18upx;

			}
		}

		.refresh {
			position: fixed;
			right: 0;
			bottom:15%;
			background-color: $mine-background-color;
			padding: 10upx 20upx;
			border-radius: 50upx 0 0 50upx;
			image{
				display: inline-block;
				vertical-align: middle;
				height: 50upx;
				width: 50upx;
				margin-right: 10upx;
			}
			.ref-text{
				display: inline-block;
				vertical-align: middle;
				line-height: 70upx;
				font-size: 30upx;
				color: #FFFFFF;
			}
		}



	}
</style>