ct-mattress/page_user/mydetail.vue

<template>
	<view class="page">
		<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
			title-size='36' height='44'></u-navbar>

		<view class="shengyu">
			剩余时长
		</view>
		<view class="time">
			{{formattedTime}}
		</view>
		<view class="setmeal">
			<view class="lt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ujJcBAlIiMjakFEBQV8O" mode=""></image>
				<view class="quan">
					<view class="one">
						{{detailobj.suitTime == undefined ? '--' : detailobj.suitTime}}{{detailobj.timeUnit == 3 ? '分钟' : '小时'}}
					</view>
					<view class="two">
						套餐时长
					</view>
				</view>
			</view>
			<view class="cen"></view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/u9hyl89RRMfuvTFnuVbi" mode=""></image>
				<view class="quan">
					<view class="one">
						{{detailobj.money == undefined ? '--' : detailobj.money}}元
					</view>
					<view class="two">
						实付金额
					</view>
				</view>
			</view>
		</view>

		<view class="list_item">
			<view class="top">
				<view class="bh">
					设备编号：{{detailobj.deviceNo == undefined ? '--' : detailobj.deviceNo}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					订单号
				</view>
				<view class="">
					{{detailobj.billNo == undefined ? '--' : detailobj.billNo}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					购买套餐：
				</view>
				<view class="">
					{{detailobj.suitName == undefined ? '--' : detailobj.suitName}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					金额
				</view>
				<view class="">
					￥{{detailobj.money == undefined ? '--' : detailobj.money}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					租借店铺：
				</view>
				<view class="">
					{{detailobj.storeName == undefined ? '--' : detailobj.storeName}}
				</view>
			</view>
			<view class="item_xx">
				<view class="">
					支付时间：
				</view>
				<view class="">
					{{detailobj.payTime == undefined ? '--' : detailobj.payTime}}
				</view>
			</view>
		</view>

		<view class="del" @click="btndel" v-if="flag">
			删除订单
		</view>
		<view class="del" v-else>
			删除订单
		</view>


		<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
			<image style="width: 100%;height: 100vh;"
				src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgad: '',
				detailobj: {},
				billId: '',
				timeday: '',
				flag: true
			}
		},
		onLoad(option) {
			if (option.billId) {
				this.billId = option.billId
				this.getlist()
				// this.getad()
			} else {
				this.billId = option.id
				this.getlist()
				// this.getad()
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		computed: {
			formattedTime() {
				if (this.timeday.days > 0) {
					// 只展示天和小时  
					return `${this.timeday.days}天${this.timeday.hours}小时`
				} else if (this.timeday.hours > 0) {
					// 展示小时和分钟  
					return `${this.timeday.hours}小时${this.timeday.minutes}分钟`
				} else if (this.timeday.minutes > 0) {
					// 展示分钟和秒  
					return `${this.timeday.minutes}分钟${this.timeday.seconds}秒`
				} else {
					// 展示秒或0（如果秒也为0）  
					return this.timeday.seconds > 0 ? `${this.timeday.seconds}秒` : '0'
				}
			}
		},
		methods: {
			btndel() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除此订单吗？',
					success: function(res) {
						if (res.confirm) {
							that.flag = false
							that.$u.delete(`/app/bill/${that.billId}`).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 1000
									})
									setTimeout(() => {
										that.flag = true
										uni.navigateBack()
									}, 1500)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1000
									})
									setTimeout(() => {
										that.flag = true
									}, 1500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},

			// 请求详情
			getlist() {
				this.$u.get(`/app/bill/${this.billId}`).then((res) => {
					if (res.code == 200) {
						this.detailobj = res.data
						if (this.detailobj.suitExpireTime == null) {
							this.timeday = 0
						} else {
							let expireTimeStr = this.detailobj.suitExpireTime
							let expireTimeParts = expireTimeStr.split(" ")
							let expireDateParts = expireTimeParts[0].split("-")
							let expireTimePartsTime = expireTimeParts[1].split(":")
							let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1, expireDateParts[2], expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
							let now = new Date()
							let differenceInMs = expireDate - now
							if (differenceInMs <= 0) {
								this.timeday = 0
							} else {
								if (this.timeday == '') {
									this.timeday = this.formatMilliseconds(differenceInMs)
									this.startTimer()
								}
							}
						}
					}
				})
			},
			startTimer() {
				this.timer = setInterval(() => {
					if (this.timeday.seconds > 0) {
						this.timeday.seconds--
					} else if (this.timeday.minutes > 0) {
						this.timeday.seconds = 59 // 重置秒数为59  
						this.timeday.minutes--
					} else if (this.timeday.hours > 0) {
						this.timeday.minutes = 59 // 重置分钟数为59  
						this.timeday.hours--
						this.timeday.seconds = 0 // 同时重置秒数为0  
					} else if (this.timeday.days > 0) {
						this.timeday.hours = 23 // 重置小时数为23  
						this.timeday.minutes = 59 // 重置分钟数为59  
						this.timeday.seconds = 0 // 重置秒数为0  
						this.timeday.days--
					} else {
						// 所有时间单位都已减为0，停止定时器  
						clearInterval(this.timer)
						this.timer = null;
						console.log('时间已到期')
					}
				}, 1000); // 每秒执行一次  
			},
			formatMilliseconds(milliseconds) {
				// 计算天数  
				let days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
				// 计算剩余的小时数  
				let hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
				// 计算剩余的分钟数  
				let minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
				// 计算剩余的秒数  
				let seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
				// 返回一个对象，包含天、小时、分钟和秒  
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	page {
		background: #F4F5F7;
	}

	.del {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		// background-color: #fff;
		// background: linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%);
		background-color: red;
		padding-left: 50rpx;
		padding-right: 50rpx;
		width: 650rpx;
		height: 84rpx;
		// background: red;
		filter: blur(0px);
		text-align: center;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
		border-radius: 50rpx;
	}

	.page {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
		padding: 0 46rpx;
		box-sizing: border-box;

		.guangg {
			margin-top: 30rpx;
			margin-bottom: 10rpx;

			image {
				border-radius: 30rpx;
				width: 100%;
				height: 218rpx;
			}
		}

		.list_item {
			width: 658rpx;
			height: 380rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 30rpx;
			padding: 24rpx 30rpx;
			box-sizing: border-box;

			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #D8D8D8;
				padding-bottom: 20rpx;
				box-sizing: border-box;

				.bh {
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.wc {
					font-size: 28rpx;
					color: #8883F0;
				}
			}

			.bot {
				margin-top: 22rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 28rpx;
				padding-top: 20rpx;
				box-sizing: border-box;
				border-top: 1px solid #D8D8D8;

				.time {
					font-size: 24rpx;
					color: #808080;
				}

				.pagexq {
					width: 142rpx;
					height: 48rpx;
					background: #8883F0;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 20rpx;
				}
			}

			.item_xx {
				margin-top: 22rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}

		.shengyu {
			font-size: 40rpx;
			color: #3D3D3D;
			margin-top: 46rpx;
		}

		.time {
			font-size: 48rpx;
			color: #8883F0;
			margin-top: 12rpx;
		}

		.setmeal {
			margin-top: 38rpx;
			width: 658rpx;
			height: 150rpx;
			background: rgba(136, 131, 240, 0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07999999821186066), rgba(156.31499379873276, 140.25000303983688, 255, 0.23999999463558197)) 2 2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 42rpx;
			box-sizing: border-box;

			.cen {
				width: 2rpx;
				height: 108rpx;
				border: 2rpx solid #8883F0;
				opacity: 0.5;
			}

			.lt {
				display: flex;
				align-items: center;
				text-align: center;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-right: 30rpx;
				}

				.one {
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.two {
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}

			.rt {
				display: flex;
				align-items: center;
				text-align: center;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-right: 30rpx;
				}

				.one {
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.two {
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>