<template> <view class="page"> <u-navbar title="充值" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></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: '' } }, onLoad() { this.startTimer() this.gettaoc() }, computed: { }, methods: { startTimer() { this.timer = setInterval(() => { this.gettaoc(); // 每隔30秒请求一次数据 }, 30000); // 30秒 }, gettaoc() { this.$u.get(`/app/device/${this.deviceid}/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: 'DS-000002', 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.navigateTo({ 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>