kaiguan-zfb/page_components/fuwu/index.vue

<template>
	<view class="page">
		<u-navbar title="充值" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='58'></u-navbar>
		<view class="title">
			设备名称：{{deviceobj.deviceName}}
		</view>
		<view class="box">
			<view class="tit">
				选择服务
			</view>
			<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
				<view :class="indexactive == item.suitId ? 'active':''"
					style="width: 304rpx;height: 122rpx;background: #fff;box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);border-radius: 30rpx;display: flex;justify-content: space-between;padding: 20rpx 34rpx;box-sizing: border-box;margin-top: 20rpx;"
					v-for="(item,index) in deviceobj.suitList" :key="index" @click="btnactive(item)">
					<view class="lt">
						<view class="tc">
							{{item.name}}
						</view>
						<view class="date">
							{{item.value}}分钟
						</view>
					</view>
					<view class="rt">
						￥{{item.price}}
					</view>
				</view>
			</view>

			<view class="shuom" v-for="(item,index) in deviceobj.suitList" :key="index"
				v-if="indexactive == item.suitId">
				<view class="tits">
					套餐说明
				</view>
				<view class="wz">
					该设备还剩余时长：{{expireTimeStr}}分钟
				</view>
				<view class="">
					{{item.description}}
				</view>
				<view class="wz">
					联系客服：2562356565
				</view>
			</view>

			<view class="tongyi">
				<u-checkbox-group>
					<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
						<text>《用户服务协议》</text> </u-checkbox>
				</u-checkbox-group>
				<view class="zf" @click="btnzhifu">
					立即支付
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexactive: 0,
				checked: false,
				deviceobj: {},
				deviceid: 'DS-000002',
				timer: null,
				expireTimeStr: '',
				zfobj: {},
				orderno: '',
				id:''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.startTimer()
			this.gettaoc()
		},
		computed: {

		},
		methods: {
			startTimer() {
				this.timer = setInterval(() => {
					this.gettaoc(); // 每隔30秒请求一次数据  
				}, 30000); // 30秒  
			},
			gettaoc() {
				this.$u.get(`/app/device/${this.id}/withSuitList`).then((res) => {
					if (res.code == 200) {
						this.deviceobj = res.data;
						this.indexactive = res.data.suitList[0].suitId;
						this.zfobj = res.data.suitList[0]
						let targetDateStr = this.deviceobj.expireTime
						let targetParts = targetDateStr.split(/[- :]/);
						let targetDate = new Date(targetParts[0], targetParts[1] - 1, targetParts[2], targetParts[
							3], targetParts[4], targetParts[5]);
						let now = new Date();
						let differenceInMs = targetDate - now;
						let differenceInMinutes = Math.floor(differenceInMs / (1000 * 60));
						this.expireTimeStr = parseInt(differenceInMinutes) <= 0 ? '0' : differenceInMinutes
					}
				});
			},
			btnzhifu() {
				if (this.checked == false) {
					uni.showToast({
						title: '请勾选用户服务协议 !',
						icon: 'none',
						duration: 1000
					});
				} else {
					let data = {
						deviceNo: this.id,
						suitId: this.zfobj.suitId,
						money: this.zfobj.price,
						suitTime: this.zfobj.value
					}
					this.$u.post('/app/bill/recharge', data).then((res) => {
						if (res.code == 200) {
							this.orderno = res.data
							this.$u.get(`/app/pay/wx/${this.orderno}`).then((res) => {
								if (res.code == 200) {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.packageVal,
										signType: res.data.signType,
										paySign: res.data.paySign,
										success(res) {
											console.log(res,'支付成功');
											// 支付成功逻辑
											uni.showToast({
												title: '支付成功',
												icon: 'success',
												duration: 2000
											});
										},
										fail(err) {
											// 支付失败逻辑
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											});
										}
									});
								}
							})
						}else if(res.code == 401){
							uni.reLaunch({
								url:'/pages/login/login'
							})
						}
					})
				}
			},


			btnactive(item) {
				this.zfobj = item
				this.indexactive = item.suitId;
			},
			checkboxChange(e) {
				this.checked = e.value
			},
			onUnload() {
				// 页面卸载时  
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	.active {
		background-color: #8883F0 !important;
		color: #fff !important;
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.title {
			margin-top: 40rpx;
			padding-left: 32rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #383838;
			margin-bottom: 30rpx;
		}

		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 36rpx 54rpx;
			box-sizing: border-box;

			.tongyi {
				width: 590rpx;
				position: fixed;
				bottom: 50rpx;
				left: 50%;
				transform: translateX(-50%);

				text {
					color: #638DFF;
				}

				.zf {
					width: 590rpx;
					height: 84rpx;
					background: #8883F0;
					filter: blur(0px);
					border-radius: 50rpx;
					text-align: center;
					line-height: 84rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}
			}

			.shuom {
				width: 648rpx;
				height: 286rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				filter: blur(0px);
				border-radius: 30rpx;
				margin: auto;
				margin-top: 36rpx;
				padding: 20rpx 36rpx;
				box-sizing: border-box;

				.tits {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 30rpx;
				}

				.wz {
					font-size: 28rpx;
					color: #383838;
					margin-top: 30rpx;
				}
			}

			.list_val {
				.tc {
					font-weight: 500;
					font-size: 34rpx;
					color: #525252;
				}

				.date {
					font-size: 24rpx;
					color: #525252;
					margin-top: 10rpx;
				}

				.rt {
					font-size: 40rpx;
					color: #525252;
					padding-top: 20rpx;
				}
			}

			.tit {
				font-size: 40rpx;
				color: #383838;
				font-weight: 600;
				margin-bottom: 32rpx;
			}
		}
	}
</style>