<template>
	<view class="page">
		<view class="title">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uyr6T0Vfkefty2blkDmU" mode="aspectFit"
				style="width: 52rpx;height: 52rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;"
				@click="btnshouye"></image>
			<text style="width: 80%;text-align: center;display: inline-block;">{{ deviceobj.deviceName == undefined ?
				'--' : deviceobj.deviceName }}</text>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="wz" v-if="onlineStatus == 0">
					<view v-if="ver_dataflag == 1" style="color: #fff;">
						<image src="https://api.ccttiot.com/smartmeter/img/static/u6akzRBuxxP94XlUcMtV" mode=""></image>
						未连接
					</view>
					<view v-if="ver_dataflag == 2" style="color: #fff;">
						<image src="https://api.ccttiot.com/smartmeter/img/static/u6akzRBuxxP94XlUcMtV" mode=""></image>
						连接中
					</view>
					<view v-if="ver_dataflag == 3" style="color: #fff;">
						<image src="https://api.ccttiot.com/smartmeter/img/static/usSHAkmok1YIdjsgRECI" mode=""></image>
						已连接
					</view>
				</view>
				<view class="wz" @click="call" style="text-align: right;padding-right: 20rpx;margin-top: 50rpx;"
					v-if="deviceobj.storeContactMobile == null">
					联系客服
				</view>
				<view class="wz" @click="call" style="text-align: right;padding-right: 20rpx;margin-top: 50rpx;" v-else>
					联系客服
				</view>
			</view>
		</view>
		<!-- 检测蓝牙未开启 -->
		<view class="shibai" v-if="lanyaflag">
			<view class="top">
				设备离线
			</view>
			<view class="tishi">
				检测到该设备离线,请打开蓝牙进行蓝牙模式
			</view>
			<view class="li">
				<view class="wz">
					第一：检查手机蓝牙是否打开
				</view>
				<image style="width: 386rpx;height: 263rpx;"
					src="https://api.ccttiot.com/smartmeter/img/static/uM4DY4Ee9AgFHLv4bIDR" mode="aspectFit"></image>
			</view>
			<view class="li">
				<view class="wz">
					第二：设置小程序蓝牙授权
				</view>
				<image style="width: 368rpx;height: 151rpx;"
					src="https://api.ccttiot.com/smartmeter/img/static/uAj06uo9qysixLrcFHBn" mode="aspectFit"></image>
				<image style="width: 386rpx;height: 301rpx;"
					src="https://api.ccttiot.com/smartmeter/img/static/ugFSKFZn4mzJJHQx3K2Z" mode="aspectFit"></image>
				<image style="width: 386rpx;height: 330rpx;"
					src="https://api.ccttiot.com/smartmeter/img/static/uZ4XoCI2KNQzcPKbwGLN" mode="aspectFit"></image>
			</view>
			<view class="li">
				<view class="wz">
					第三：如以上还不行请重新进入小程序
				</view>
			</view>
			<view class="jxcz" @click="btnjxcz">
				我已知晓
			</view>
		</view>
		<view class="box" v-else>
			<view class="tit" style="display: flex;justify-content: space-between;width: 100%;">
				<text>选择服务</text>
			</view>
			<view>
				<view :class="indexactive == item.suitId ? 'active' : ''"
					style="width:100%;height:100%;background: #fff;box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);border-radius: 30rpx;padding: 20rpx 34rpx;box-sizing: border-box;margin-top: 20rpx;border: 4rpx solid #fff;"
					v-for="(item, index) in deviceobj.suitList" :key="index" @click="btnactive(item)">
					<view class="lt">
						<view class="tc" style="font-weight: 600;font-size: 34rpx;">
							{{ item.name }}
						</view>
					</view>
					<view class="rt" style="margin-top: 10rpx;font-size: 28rpx;">
						<text v-if="item.feeType == 1">计时收费</text>
						<text v-if="item.feeType == 2">按量收费</text>
						<text v-if="item.feeType == 3">分时段按量收费</text>
						<text v-if="item.feeType == 4">分时段按时收费</text>
						（{{ item.feeMode == 1 ? '单次收费' : '智能收费' }}）：
						<text v-if="item.feeType == 1">{{ item.value }}<text v-if="item.timeUnit == 2">时</text> <text
								v-if="item.timeUnit == 3">分钟</text> <text v-if="item.timeUnit == 4">秒</text>
							{{ item.price }}元</text>
						<text v-if="item.feeType == 2">{{ item.value }}度{{ item.price }}元</text>
						<text v-if="item.feeMode == 2">预存{{ item.deposit }}元</text>
					</view>
					<view class="" style="margin-top: 10rpx;color: #8883F0;font-size: 28rpx;" v-if="item.feeMode == 2">
						完成订单后押金将自动退还
					</view>
					<view class="" style="width: 100%" v-if="item.feeType == 3 || item.feeType == 4">
						<u-collapse>
							<u-collapse-item title="收费详情">
								<view class="" style="margin-bottom: 6rpx;font-size: 24rpx;">
									收费时间段(滑动查看各时段费用)
								</view>
								<view class="ulbox">
									<view class="ulli">
										<view class="li" v-for="(val, gearAmountindex) in item.arr"
											:key="gearAmountindex">
											{{ val }}元
										</view>
									</view>
									<view class="olli">
										<view class="li" v-for="(vals, timeindex) in 24" :key="timeindex">
											{{ timeindex + ':00' }}
										</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
					<view class="" style="margin-top: 10rpx;">
						套餐说明：{{ item.description == null ? '无' : item.description }}
					</view>
				</view>
				<view v-if="deviceobj.suitList == null || deviceobj.suitList.length == 0" class=""
					style="color: #ccc;font-size: 36rpx;">
					该设备暂无套餐...
				</view>
			</view>
			<view class="fee_box" @click="btngoumai" v-if="huiyuanlistflag">
				<view class="auto_box">
					<view class="auto_li" v-for="(item, index) in huiyuanlist" :key="index">
						<view class="txt1">
							{{ item.name == null ? '--' : item.name }}
						</view>
						<view class="txt1">
							{{ item.price == null ? '--' : item.price }}元
						</view>
						<view class="txt2">
							每单享{{ item.discount == null ? '--' : item.discount }}折
						</view>
						<view class="buy_btn">
							前去购买
						</view>
					</view>
				</view>
			</view>
			<view class="youhui" v-if="discountAmount != ''" @click="huiyuanflag = true">
				<view style="color: #666;">{{ vipLevelName }}</view>
				<view class="yh">
					<text class="yi">已优惠{{ discountAmount }}元</text> <u-icon name="arrow-right" color="rgb(128, 128, 128)"
						size="28"></u-icon>
				</view>
			</view>
			<view class="tongyi" v-if="deviceobj.suitList != null">
				<u-checkbox-group>
					<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
					</u-checkbox><text @click="btnyonghu">《用户服务协议》</text> <text @click="btnyinsi">《隐私政策》</text>
				</u-checkbox-group>
				<!-- 获取手机号 -->
				<button class="zf" v-if="telslag" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					立即支付
				</button>
				<view class="zf" @click="btnzhifu" v-else>
					￥{{ payPrice }} 立即支付
				</view>
			</view>
			<view class="mask" v-if="zhifuflag"></view>
			<view class="czdh" v-if="jzflag">
				<view class="bj">
					<view class="tittop">
						正在充值中,请稍后
					</view>
					<view class="bfb">
						{{ progress }} %
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="masksss"></view>
		<!-- 服务协议弹框  -->
		<view class="fuwutc" v-if="yinsiflag">
			<view class="wenxin">
				温馨提示
			</view>
			<view class="ty">
				是否同意
			</view>
			<view class="yinsi">
				《用户服务协议》及《隐私政策》？
			</view>
			<view class="anniu">
				<view class="qx" @click="yinsiflag = false">
					取消
				</view>
				<view class="qd" @click="btnqd">
					确定
				</view>
			</view>
		</view>
		<view class="mask" v-if="yinsiflag"></view>
		<!-- 选择会员弹窗 -->
		<view class="huiyuantc" v-if="huiyuanflag">
			<view class="cha" @click="huiyuanflag = false">
				×
			</view>
			<view class="" style="width: 100%;text-align: center;font-size: 32rpx;font-weight: 600;">
				我的会员
			</view>
			<view class="vip_box1" v-for="(item, index) in storelist" :key="index" @click="btnxzhuiyuan(item)">
				<view class="txt1">{{ item.vipLevelName }}</view>
				<view class="txt1"
					style="position: absolute;top: 70rpx;font-size: 24rpx;font-weight: 400;display: flex;">
					每单享{{ item.discount == null ? '--' : item.discount }}折
					<view class="" v-if="item.limitType == 1">
						使用无限制
					</view>
					<view class="" v-if="item.limitType == 2">
						每周最多用{{ item.limitCount == null ? '--' : item.limitCount }}次
					</view>
					<view class="" v-if="item.limitType == 3">
						每30天最多用{{ item.limitCount == null ? '--' : item.limitCount }}次
					</view>
				</view>
				<view class="txt2">会员将在{{ item.endTime.slice(0, 10) }}后到期，剩余{{ item.surplusCount }}次</view>
				<view class="btn">
					使用
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js");
export default {
	data() {
		return {
			yinsiflag: false,
			flags: false,
			jzflag: false,
			progress: 0,
			isLoading: false,
			zhifuflag: false,
			indexactive: -1,
			checked: false,
			lanyaflag: false,
			deviceobj: {},
			timer: null,
			expireTimeStr: '',
			zfobj: {},
			orderno: '',
			masksss: false,
			id: '',
			czflag: false,
			sytime: 0,
			datetime: 0,
			mac: '',
			deviceId: '',
			name: '',
			ver_data: '',
			devicesList: [],
			onlineStatus: '',
			jine: '',
			dingobj: {},
			suitTimeUnit: '',
			zfflag: true,
			prices: '',
			sceneValue: '',
			suitFeeMode: '',
			suitFeeType: '',
			suitGearAmount: [],
			suitGearTime: [],
			suitPrice: '',
			payNo: '',
			q: '',
			channelId: '',
			swindleflag: false,
			phonenumber: '',
			mchShowBillMobile: '',
			telslag: false,
			userId: '',
			hasCalledGetczly: false,
			hasCalledGetczlys: false,
			hasCalledGetczlyss: false,
			arrlists: [],
			imglanya: 'https://api.ccttiot.com/smartmeter/img/static/ulbuqIwcbhuCYGHZPAiL',
			ver_dataflag: 2,
			huiyuanflag: false,
			huiyuanlist: [],
			huiyuanlistflag: false,
			storelist: [],
			huiyuanid: '',
			vipLevelName: '',
			payPrice: '',
			discountAmount: '',
			zhekou: '',
			exit: 0,
			modelId:'',
			devicesarr:[],
		}
	},
	onLoad(option) {
		console.log("这里",option, this.id)
		console.log('开始获取位置时间:', new Date().toLocaleString())
		console.log("启动扫码")
		if(option.chushihua){
			
		}else{
			xBlufi.initXBlufi(1)
		}
		if (option.q) {
			function getQueryParam(url, paramName) {
				let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
				let results = regex.exec(url)
				return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
			}
			this.sceneValue = option.q
			let decodedValue = decodeURIComponent(this.sceneValue)
			this.id = getQueryParam(decodedValue, 's')
		} else {
			this.id = option.id
		}
		console.log(this.id)
	},
	computed: {

	},
	// 分享到好友（会话）
	onShareAppMessage: function () {
		return {
			title: '创想物联',
			path: '/pages/shouye/index'
		}
	},
	// 分享到朋友圈  
	onShareTimeline: function () {
		return {
			title: '创想物联',
			query: '',
			path: '/pages/shouye/index'
		}
	},
	mounted() {
		this.getMyLocation() // 获取并设置自身位置的覆盖物  
	},
	onShow() {
		if(this.ver_dataflag != 3){
			xBlufi.notifyStartDiscoverBle({'isStart': true})
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
		}
		// this.getuserinfo()
		if (uni.getStorageSync('tcid')) {
			uni.removeStorage({
				key: 'tcid',
				success: function () {
					console.log('本地存储项 tcid 已删除')
				},
				fail: function (err) {
					console.error('删除本地存储项失败：', err)
				}
			})
		}
		this.getone()
		setTimeout(()=>{
			if (this.id != '') {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						this.phonenumber = res.data.phonenumber
						this.userId = res.data.userId
				        this.getone()
					} else {
						uni.navigateTo({
							url: '/pages/login/login?id=' + this.id
						})
					} 
				})
			}
		},1)
	},
	onUnload: function () {
		if(this.exit==0){
		    xBlufi.notifyConnectBle({
			isStart: false,
			deviceId: this.deviceId,
			name: this.name
		  })
	    }
		if (this.timer) {
			clearInterval(this.timer)
			this.timer = null
		}
	},
	onHide() {

	},
	onBeforeUnmount() {

	},
	methods: {
		// 点击购买会员
		btngoumai() {
			uni.navigateTo({
				url: '/page_geren/index?storeId=' + this.deviceobj.storeId
			})
		},
		// 获取自身位置从而获得附近店铺
		getMyLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res, 'resresres')
				},
				fail: (err) => {
					console.error('获取位置失败：', err)
				}
			})
		},
		//选择套餐
		btnactive(item) {
			console.log(item);
			this.prices = item.price
			this.sytime = item.value
			this.zfobj = item
			this.indexactive = item.suitId
			this.suitTimeUnit = item.timeUnit
			this.suitPrice = item.price
			this.suitGearAmount = item.gearAmount
			this.suitGearTime = item.gearTime
			this.suitFeeMode = item.feeMode
			this.suitFeeType = item.feeType
			this.$u.get(`/app/bill/recharge/prePayPrice?vipId=${this.huiyuanid}&suitId=${this.zfobj.suitId}`).then(res => {
				if (res.code == 200) {
					this.discountAmount = res.data.discountAmount //优惠的钱
					this.payPrice = res.data.payPrice  //实际支付的钱
				}
			})
			if (item.feeMode == 2 && ['1', '2'].includes(item.feeType)) {
				let sum = item.deposit / item.price
				if (item.timeUnit == 1) {
					this.jine = item.value * 24 * 60 * 60 * sum
				} else if (item.timeUnit == 2) {
					this.jine = item.value * 60 * 60 * sum
				} else if (item.timeUnit == 3) {
					this.jine = item.value * 60 * sum
				} else if (item.timeUnit == 4) {
					this.jine = item.value * sum
				}
			} else {
				if (item.timeUnit == 1) {
					this.jine = item.value * 24 * 60 * 60
				} else if (item.timeUnit == 2) {
					this.jine = item.value * 60 * 60
				} else if (item.timeUnit == 3) {
					this.jine = item.value * 60
				} else if (item.timeUnit == 4) {
					this.jine = item.value
				}
			}
			console.log(this.jine);
		},
		// 点击我已知晓隐藏防骗提示
		// btnswindleflag() {
		// 	this.swindleflag = false
		// 	if (this.onlineStatus == 0) {
		// 		// if (this.ver_data == '') {

		// 		// } else {
		// 		// 	this.ver_dataflag = 3
		// 		// 	uni.hideLoading()
		// 		// }
		// 	}
		// },
		// 获取支付渠道
		getzfqd() {
			this.$u.get(`/app/channel/recharge/enabledList?mchId=` + this.deviceobj.userId).then(res => {
				if (res.code == 200) {
					this.channelId = res.data[0].channelId
					uni.hideLoading()
				} else {
					uni.hideLoading()
				}
			})
		},

		getone() {
			let that = this
			let data = {
				deviceNo: that.id
			}
			that.$u.get(`/app/device/isBind?deviceNo=${that.id}`).then(res => {
				if (res.data == 2) {
					that.$u.get(`/app/device/${that.id}/withSuitList`).then((res) => {
						if (res.code == 200) {
							that.$u.get(`/app/device/${that.id}/bySn`).then((res) => {
								if (res.code == 200) {
									that.arrlists.push(res.data)
									that.onlineStatus = res.data.onlineStatus
									that.mac = 'CTKG-' + res.data.mac
									that.modelId = res.data.modelChip  
									// modelTags
									that.deviceId = res.data.mac.match(/.{2}/g).reverse().join(':')
									console.log('链接获取位置时间:', new Date().toLocaleString())
									if (that.onlineStatus == 0) { //判断离线默认连蓝牙
										that.getlanya()
									}
								}
							})
						}
					})
				} else if (res.data == 1) {
					uni.navigateTo({
						url: '/pages/shouye/index?id=' + this.id
					})
				} else if (res.data == 0) {
					uni.navigateTo({
						url: '/pages/shouye/index?id=' + this.id
					})
				}
			})
			this.gettaoc()
		},
		// 连接蓝牙函数
		getlanya() {
			console.log("进入111蓝牙连接")
			if (this.ver_dataflag != 3) {
				this.czflag = true
				this.ver_dataflag = 2
				// console.log(this.deviceId,Number(this.deviceId.slice(-1)) + 2,this.deviceId.slice(0, -1),this.deviceId.slice(0, -1) + ((Number(this.deviceId.slice(-1)) + 2)));
				let that = this
				if (that.deviceId != '') {
					that.findDevice()
					// let systemInfo = uni.getSystemInfoSync()
					// 	if (systemInfo.platform == 'android') {
					// 		if(that.modelId == 'LX'){
					// 			console.log('有wifi配网');
					// 			let zuih = ''
					// 			if(that.deviceId.slice(-1) == 8){
					// 				zuih = 'A'
					// 			}else if(that.deviceId.slice(-1) == 9){
					// 				zuih = 'B' 
					// 			}else if(that.deviceId.slice(-1) == 'A'){
					// 				zuih = 'C'
					// 			}else if(that.deviceId.slice(-1) == 'B'){
					// 				zuih = 'D'
					// 			}else if(that.deviceId.slice(-1) == 'C'){
					// 				zuih = 'E'
					// 			}else if(that.deviceId.slice(-1) == 'D'){
					// 				zuih = 'F'
					// 			} else{
					// 				zuih = Number(that.deviceId.slice(-1)) + 2
					// 			}
					// 			that.deviceId = that.deviceId.slice(0, -1) + zuih
					// 			console.log(that.modelId,zuih,that.deviceId.slice(0, -1),'...........')
					// 			xBlufi.notifyStartDiscoverBle({
					// 				'isStart': false 
					// 			})
					// 			console.log("进入蓝牙连接", that.deviceId)
					// 			console.log("进入that.name", that.name)
					// 			xBlufi.notifyConnectBle({
					// 				isStart: true,
					// 				deviceId: that.deviceId,
					// 				name: that.name
					// 			})
					// 		}else{
					// 			console.log('无wifi配网');
					// 			xBlufi.notifyStartDiscoverBle({
					// 				'isStart': false
					// 			})
					// 			console.log("进入蓝牙连接", that.deviceId)
					// 			console.log("进入that.name", that.name)
					// 			xBlufi.notifyConnectBle({
					// 				isStart: true,
					// 				deviceId: that.deviceId,
					// 				name: that.name
					// 			})
					// 		}
					// 	} else if (systemInfo.platform == 'ios') {
					// 		// 当前设备是 iOS  
					// 		that.findDevice()
					// }
				}
			}
		},
		findDevice() {
		    // 使用 find 方法查找匹配的设备
			console.log(this.devicesarr,'所有设备');
		    const matchedDevice = this.devicesarr.find(device => {
		        console.log(device.name, this.mac, '111') 
		        console.log("IOSMAC", device)
		        return device.name.slice(-12) == this.mac.slice(-12)
		    })
		    if (matchedDevice) {
		        // 找到匹配的设备
		        xBlufi.notifyStartDiscoverBle({
		            'isStart': false
		        })
		        xBlufi.notifyConnectBle({
		            isStart: true,
		            deviceId: matchedDevice.deviceId,
		            name: matchedDevice.name
		        })
		        this.deviceId = matchedDevice.deviceId
		        this.name = matchedDevice.name
		        console.log(this.deviceId, '11221')
		    } else {
		        console.log("未找到匹配的设备，继续查找...")
		        setTimeout(this.findDevice.bind(this), 1000) // 使用 bind 保持 this 上下文
		    }
		},
		// 自定义点击返回首页
		btnshouye() {
			uni.reLaunch({
				url: '/pages/shouye/index'
			})
		},
		// 点击我已知晓
		btnjxcz() {
			// wx.openBluetoothAdapter({
			//   success: function (res) {
			//   this.czflag = false
			//   this.lanyaflag = false
			//   this.getlanya()								  
			//     console.log('蓝牙适配器初始化成功');
			//     // 你可以在这里继续调用其他蓝牙相关的API
			//   },
			//   fail: function (err) {
			// 	 this.lanyaflag = true
			// 	 uni.showToast({
			// 	 	title: '蓝牙权限获取失败',
			// 	 	icon: 'none',
			// 		duration:2000
			// 	 })
			//      console.error('蓝牙适配器初始化失败，可能是因为没有权限', err);
			//   }
			// })
		},
		// 点击拨打电话
		call() {
			let phoneNumber = ''
			if (this.deviceobj.storeContactMobile == null) {
				phoneNumber = this.deviceobj.userMobile
			} else {
				phoneNumber = this.deviceobj.storeContactMobile
			}
			uni.makePhoneCall({
				phoneNumber: phoneNumber,
				success: function (res) {
					console.log('拨打电话成功', res)
				},
				fail: function (err) {
					console.error('拨打电话失败', err)
					uni.showToast({
						title: '拨打电话失败',
						icon: 'none'
					})
				}
			})
		},
		//点击跳转隐私政策
		btnyinsi() {
			uni.navigateTo({
				url: '/page_fenbao/statulist/about/index?tit=' + '隐私政策'
			})
		},
		// 点击跳转服务协议
		btnyonghu() {
			uni.navigateTo({
				url: '/page_fenbao/statulist/about/index?tit=' + '用户服务协议'
			})
		},
		gettrue() {
			this.$u.get("/app/device/isBind?deviceNo=" + this.id).then((res) => {
				if (res.data == 0 || res.data == 1) {
					uni.navigateTo({
						url: '/pages/shouye/index?flag=' + true + '&id=' + this.id
					})
				}
			})
		},
		// 请求个人信息
		getuserinfo() {
			this.$u.get("/app/user/userInfo").then((res) => {
				if (res.code == 200) {

				} else {
					uni.navigateTo({
						url: '/pages/login/login?id=' + this.id
					})
				}
			})
		},
		// 拿到店铺id获取会员
		huiyuan() {
			this.$u.get(`/app/vipLevel/list?pageNum=1&pageSize=999&storeId=${this.deviceobj.storeId}`).then(res => {
				if (res.code == 200) {
					this.huiyuanlist = res.rows
					if (res.rows == null || res.rows.length == 0) {
						this.huiyuanlistflag = false
					} else {
						this.huiyuanlistflag = true
					}
				}
			})
		},
		// 拿到店铺id查询本人在店铺可用的折扣最低的会员
		zuidihuiyuan() {
			this.$u.get(`/app/vip/availableMinDiscount?storeId=${this.deviceobj.storeId}`).then(res => {
				if (res.code == 200) {
					this.vipLevelName = res.data.vipLevelName
					this.huiyuanid = res.data.id
					this.zhekou = res.data.discount
					// 计算优惠的钱
					this.$u.get(`/app/bill/recharge/prePayPrice?vipId=${this.huiyuanid}&suitId=${this.zfobj.suitId}`).then(res => {
						if (res.code == 200) {
							this.discountAmount = res.data.discountAmount //优惠的钱
							this.payPrice = res.data.payPrice  //实际支付的钱
						}
					})
				}
			})
		},
		// 根据店铺id获取自己的会员
		myhuiyuan() {
			this.$u.get(`/app/vip/list?pageNum=1&pageSize=99&orderByColumn=createTime&isAsc=desc&inValid=true&storeId=${this.deviceobj.storeId}`).then(res => {
				if (res.code == 200) {
					this.storelist = res.rows
				}
			})
		},
		// 点击选择其他会员
		btnxzhuiyuan(item) {
			this.huiyuanid = item.id //会员id
			this.vipLevelName = item.vipLevelName //会员名称
			this.zhekou = item.discount //会员折扣
			// 选择其他会员重新计算优惠金额
			this.$u.get(`/app/bill/recharge/prePayPrice?vipId=${this.huiyuanid}&suitId=${this.zfobj.suitId}`).then(res => {
				if (res.code == 200) {
					this.huiyuanflag = false
					this.discountAmount = res.data.discountAmount //优惠的钱
					this.payPrice = res.data.payPrice  //实际支付的钱
				}
			})
		},
		// 根据this.id获取信息
		gettaoc() {
			this.$u.get(`/app/device/${this.id}/withSuitList`).then((res) => {
				if (res.code == 200) {
					this.deviceobj = res.data
					this.getzfqd() //调用获取支付渠道
					// 判断该设备有没有套餐
					if (this.deviceobj.suitList.length == 0 || this.deviceobj.suitList == '') {
						// this.swindleflag = false
						if (this.userId == this.deviceobj.userId && this.deviceobj.suitList.length == 0) {
							let that = this
							uni.showModal({
								title: '提示',
								content: '该设备暂无套餐,是否前去配置？',
								showCancel: true,
								success: function (res) {
									if (res.confirm) {
										uni.setStorageSync('tcidlist', that.arrlists)
										uni.navigateTo({
											url: '/page_fenbao/statulist/taocanlist/index?id=' + that.arrlists[0].deviceId + '&sn=' + that.id + '&modevalue=' + 3
										})
									} else if (res.cancel) {
										uni.reLaunch({
											url: '/pages/shouye/index'
										})
									}
								}
							})
						} else if (this.userId != this.deviceobj.userId && this.deviceobj.suitList.length == 0) {
							uni.showToast({
								title: '该设备暂无套餐，请联系商家添加套餐在使用',
								icon: 'none',
								duration: 5000
							})
						}
					} else {
						this.btnactive(this.deviceobj.suitList[0]) //有套餐默认选择第一个
						if (this.deviceobj.storeId != null) { //判断有无店铺 进行会员查询操作
							this.huiyuan()
							this.zuidihuiyuan()
							this.myhuiyuan()
						}
					}
					this.zfobj = res.data.suitList[0]
					let targetDateStr = this.deviceobj.expireTime
					this.mchShowBillMobile = res.data.mchShowBillMobile
					if ((this.phonenumber == '' || this.phonenumber == null) && this.mchShowBillMobile == true) {
						this.telslag = true
					} else {
						this.telslag = false
					}
					if (targetDateStr != null) {
						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
						if (differenceInMs <= 0) {
							this.expireTimeStr = '0'
						} else {
							this.expireTimeStr = '1'
						}
					}
					if (res.data.suitList) {
						this.mapGearTimeToGearAmount(res.data.suitList)
					}
				}
			})
		},
		mapGearTimeToGearAmount(suitList) {
			// 遍历 suitList 数组
			suitList.forEach(suit => {
				const gearTime = suit.gearTime
				const gearAmount = suit.gearAmount
				const arr = new Array(gearTime.length).fill(null)
				gearTime.forEach((time, index) => {
					if (time >= 0 && time < gearAmount.length) {
						arr[index] = gearAmount[time]
					}
				})
				suit.arr = arr
			})
		},
		// 点击立即支付
		btnzhifu() {
			if ((this.phonenumber == '' || this.phonenumber == null) && this.mchShowBillMobile == true) {
				console.log(this.phonenumber, this.mchShowBillMobile)
				this.getPhoneNumber()
				this.telslag = true
			} else if (this.indexactive == -1) {
				uni.showToast({
					title: '请选择套餐 !',
					icon: 'none',
					duration: 1000
				})
			} else if (this.ver_dataflag != 3 && this.onlineStatus == 0) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '蓝牙连接中，请尽量靠近设备！',
					showCancel: false,
					success: function (res) {

					}
				})
			} else if (this.checked == false) {
				this.yinsiflag = true
			} else {
				this.getzhifu()
			}
		},
		// 确定同意隐私政策
		btnqd() {
			this.yinsiflag = false
			this.checked = true
			this.getzhifu()
		},
		// 获取手机号
		getPhoneNumber(e) {
			console.log(e)
			this.$u.put(`/app/user/bindWxMobile?mobileCode=${e.detail.code}`).then(res => {
				if (res.code == 200) {
					this.zhifuflag = false
					this.getzhifu()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
				}
			})
		},
		// 支付
		getzhifu() {
			if (this.onlineStatus == 1) {
				uni.showLoading({
					title: '准备支付中...'
				})
				this.getzfqd()
				let that = this
				let data = {
					deviceNo: that.id,
					suitId: that.zfobj.suitId,
					money: that.payPrice, // that.zfobj.price
					suitDeposit: that.zfobj.deposit,
					suitTime: that.zfobj.value,
					suitTimeUnit: that.suitTimeUnit,
					suitFeeMode: that.suitFeeMode,
					suitFeeType: that.suitFeeType,
					suitGearAmount: that.suitGearAmount,
					suitGearTime: that.suitGearTime,
					suitPrice: that.suitPrice,
					vipId: that.huiyuanid,
					vipDiscount: that.zhekou,
					discountAmount: that.discountAmount
				}
				that.$u.post('/app/bill/recharge', data).then((res) => {
					if (res.code == 200) {
						that.orderno = res.data
						if (this.suitFeeType == 3 || this.suitFeeType == 4) {
							let data = {
								billNo: that.orderno,
								channelId: that.channelId
							}
							that.$u.put(`/app/bill/pay`, data).then(res => {
								if (res.code == 200) {
									that.payNo = res.data.payBill.payNo
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.payParams.timeStamp,
										nonceStr: res.data.payParams.nonceStr,
										package: res.data.payParams.packageVal,
										signType: res.data.payParams.signType,
										paySign: res.data.payParams.paySign,
										success: (res) => {
											this.zhifuflag = false
											// console.log(res, '支付成功')
											if (that.timer) {
												clearInterval(this.timer)
												that.timer = null;
											}
											that.$u.put(`/app/bill/${that.payNo}/refreshPayResult`).then(res => { })
											// 支付成功逻辑
											uni.reLaunch({
												url: '/page_components/eletj?id=' + that.orderno + '&ver_data=' + this.ver_data + '&deviceId=' + this.deviceId + '&name=' + this.name
											})
											uni.setStorageSync('time', that.expireTimeStr)
										},
										fail(err) {
											that.$u.put(`/app/bill/recharge/cancel/${that.orderno}`).then(res => { })
											that.zhifuflag = false
											// 支付失败逻辑
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									})
								} else {
									that.zhifuflag = false
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else {
							let data = {
								billNo: that.orderno,
								channelId: that.channelId
							}
							that.$u.put(`/app/bill/pay`, data).then((res) => {
								if (res.code == 200) {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.payParams.timeStamp,
										nonceStr: res.data.payParams.nonceStr,
										package: res.data.payParams.packageVal,
										signType: res.data.payParams.signType,
										paySign: res.data.payParams.paySign,
										success: (res) => {
											this.zhifuflag = false
											// console.log(res, '支付成功')
											if (that.timer) {
												clearInterval(this.timer)
												that.timer = null
											}
											that.$u.put(`/app/bill/${that.orderno}/refreshPayResult`).then(res => { })
											// 支付成功逻辑
											uni.reLaunch({
												url: '/page_components/eletj?id=' + that.orderno + '&ver_data=' + this.ver_data
											})
											uni.setStorageSync('time', that.expireTimeStr)
										},
										fail(err) {
											that.$u.put(`/app/bill/recharge/cancel/${that.orderno}`).then(res => { })
											that.zhifuflag = false
											// 支付失败逻辑
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									})
								} else {
									that.zhifuflag = false
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}
					} else if (res.code == 401) {
						uni.reLaunch({
							url: '/pages/login/login'
						})
						that.zhifuflag = false
					} else if (res.code == 500) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			} else {
				this.getzfqd()
				uni.showLoading({
						title: '准备支付中...'
				})
				this.zhifuflag = true
				let that = this
				let data = {
					deviceNo: that.id,
					suitId: that.zfobj.suitId,
					money: that.payPrice,//that.zfobj.price
					suitDeposit: that.zfobj.deposit,
					suitTime: that.zfobj.value,
					suitTimeUnit: that.suitTimeUnit,
					suitFeeMode: that.suitFeeMode,
					suitFeeType: that.suitFeeType,
					suitGearAmount: that.suitGearAmount,
					suitGearTime: that.suitGearTime,
					suitPrice: that.suitPrice,
					vipId: that.huiyuanid,
					vipDiscount: that.zhekou,
					discountAmount: that.discountAmount
				}
				that.$u.post('/app/bill/recharge', data).then((res) => {
					if (res.code == 200) {
						that.orderno = res.data
						let data = {
							billNo: that.orderno,
							channelId: that.channelId
						}
						that.$u.put(`/app/bill/pay`, data).then((res) => {
							if (res.code == 200) {
								that.payNo = res.data.payBill.payNo
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.payParams.timeStamp,
									nonceStr: res.data.payParams.nonceStr,
									package: res.data.payParams.packageVal,
									signType: res.data.payParams.signType,
									paySign: res.data.payParams.paySign,
									success: (res) => {
										if (that.timer) {
											clearInterval(this.timer)
											that.timer = null
										}
										that.$u.put(`/app/payBill/${that.payNo}/refreshPayResult`).then(res => {
											that.$u.get(`/app/bill/byNo/${that.orderno}`).then(res => {
												let timesc = res.data.syncDeviceSeconds
												let suitEnabledVoid = res.data.suitEnabledVoid
												let suitVoidMinute = res.data.suitVoidMinute
												if (res.code == 200) {
													if (res.data.status == 2) {
														let datas = {
															mac: that.mac,
															reason: '下单' + that.orderno,
															command: '11time' + timesc + '@',
															result: '成功'
														}
														console.log(datas, '111');
														that.$u.post(`/app/commandLog/bluetooth`, datas).then(res => { })
														that.$u.get(`/app/bill/recharge/${res.data.billNo}/bluetoothSuccess`).then(res => { })
														
														xBlufi.notifySendCustomData({
															customData: "time" + timesc + '@'
														})
														xBlufi.notifySendCustomData({
															customData: "11time" + timesc + '@'
														})
														if (suitEnabledVoid == true) {
															xBlufi.notifySendCustomData({
																customData: "11dj" + suitVoidMinute * 60 + '@'
															})
														}
														that.zhifuflag = false
														that.exit = 1;
														uni.reLaunch({
															url:'/page_components/eletj?id=' + that.orderno  + '&ver_data=' + this.ver_data + '&deviceId=' + this.deviceId
														})
													} else {
														this.zhifuflag = false
														uni.showToast({
															title: '支付失败',
															icon: 'none',
															duration: 2000
														})
													}
												} else {
													this.zhifuflag = false
													uni.showToast({
														title: res.msg,
														icon: 'none',
														duration: 2000
													})
												}
											})
										})
										// 支付成功逻辑
									},
									fail(err) {
										this.$u.put(`/app/bill/recharge/cancel/${that.orderno}`).then(res => { })
										this.zhifuflag = false
										setTimeout(() => {
											this.czflag = false
											uni.hideLoading()
										}, 500)
											// 支付失败逻辑
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 2000
										})
									}
								})
							} else {
								this.zhifuflag = false
							}
						})
					} else if (res.code == 500) {
						this.zhifuflag = false
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					} else {
						this.czflag = false
					}
				})
			}
		},
		// 蓝牙充值动画
		startLoading() {
			this.isLoading = true
			const intervalId = setInterval(() => {
				this.progress += 100 / 100 // 每次增加 1
				if (this.progress >= 99) {
					clearInterval(intervalId)
					this.isLoading = false
					this.progress = 98 // 确保进度条最终达到98
				}
			}, 15)
		},
		// 点击同意政策
		checkboxChange(e) {
			this.checked = e.value
		},

		// 获取附近蓝牙设备列表
		funListenDeviceMsgEvent: function (options) {
			switch (options.type) {
				// case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
				// 	if (!options.result) {
				// 		uni.showModal({
				// 			title: '很抱歉提醒你！',
				// 			content: '小程序与设备异常断开',
				// 			showCancel: false,
				// 			//是否显示取消按钮
				// 			success: function(res) {
				// 				this.ver_data = ''
				// 			}
				// 		})
				// 	}
				// 	break;
				case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
					if (options.result) {
						this.devicesarr = options.data
					}
					break;
				case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
					console.log("连接回调：" + JSON.stringify(options))
					if (options.result == true) {
						setTimeout(()=>{
							this.ver_dataflag = 3
						},2000)
						xBlufi.notifyInitBleEsp32({
							deviceId: this.deviceId
						})
						this.deviceIds = options.data.deviceId
						this.name = this.name
					}
					break;
				case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
					this.ver_data = this.parseCustomData(options.data)
					this.ver_dataflag = 3
					console.log("1收到设备发来的自定义数据结果：", options.data)
					setTimeout(() => {
						this.czflag = false
						this.zhifuflag = false
						uni.hideLoading()
						this.imglanya = 'https://api.ccttiot.com/smartmeter/img/static/uzmkQ6a3gBrJ7SjbfmmU'
						if (!this.hasCalledGetczly) {
							this.getlyxx(options.data)
							this.hasCalledGetczly = true
						}
					}, 1000)
					break;
				case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
					if (!options.result) {
						console.log('蓝牙未开启')
						return
					} else {
						this.lanyaflag = false
					}
					break;
			}
		},
		// 同步蓝牙信息
		getlyxx(data) {
			this.$u.put(`/app/device/bltSyncIot?sn=${this.id}&info=${data}`).then(res => {
				if (res.code == 200) {

				} 
			})
		},

		parseCustomData(data) {
			const dataArray = data.split('@')
			const parsedData = {}
			const prefixMap = {
				'V': 'voltage',
				'S': 'switchState',
				'A': 'current',
				'P': 'power',
				'M': 'remainingPower',
				'T': 'setMode',
				'W': 'temperature'
			};
			// 遍历数组并解析每个字段  
			for (let i = 0; i < dataArray.length; i++) {
				const field = dataArray[i]
				for (const prefix in prefixMap) {
					if (field.startsWith(prefix)) {
						const value = field.substring(1)
						const propertyName = prefixMap[prefix]
						parsedData[propertyName] = isNaN(parseFloat(value)) ? value : parseFloat(value)
						break
					}
				}
			}
			return parsedData
		},

	}
}
</script>

<style lang="scss">
.youhui {
	position: fixed;
	right: 40rpx;
	bottom: 200rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 680rpx;
	border: 1px dashed #ccc;
	padding: 2rpx;
	box-sizing: border-box;
	.yh {
		color: #ef3333;
	}
}
.huiyuantc {
	width: 100%;
	height: 80vh;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #fff;
	border-radius: 50rpx 50rpx 0 0;
	padding-top: 50rpx;
	box-sizing: border-box;
	.cha {
		position: absolute;
		top: 0rpx;
		right: 30rpx;
		font-size: 60rpx;
		font-weight: 600;
	}
	.vip_box1 {
		position: relative;
		margin-left: 38rpx;
		width: 680rpx;
		height: 158rpx;
		background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiaiNkMy7221n3bk2ta0');
		background-size: cover;
		/* 背景图片等比缩放以覆盖整个容器 */
		background-position: center;
		/* 背景图片居中显示 */
		background-repeat: no-repeat;
		margin-top: 40rpx;
		.txt1 {
			top: 20rpx;
			left: 171rpx;
			position: absolute;
			font-weight: 500;
			font-size: 39rpx;
			color: #B07C1E;
		}
		.txt2 {
			position: absolute;
			left: 171rpx;
			bottom: 20rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #B07C1E;
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 18rpx;
			right: 23rpx;
			width: 150rpx;
			height: 43rpx;
			border-radius: 31rpx 31rpx 31rpx 31rpx;
			border: 1rpx solid #B07C1E;
			font-weight: 400;
			font-size: 25rpx;
			color: #B07C1E;
		}
	}
}
.fee_box {
	margin-top: 18rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 270rpx;
	width: 680rpx;
	height: 288rpx;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ugciMYClSGgJxP8HYoRU');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	.auto_box::-webkit-scrollbar {
		display: none;
	}
	.auto_box {
		padding-left: 24rpx;
		display: flex;
		overflow-x: auto;
		/* 允许横向滚动 */
		flex-wrap: nowrap;
		/* 禁止换行，保持所有元素在一行 */
		position: absolute;
		top: 90rpx;
		width: 100%;
		/* 根据需要调整宽度 */
		height: auto;

		/* 根据内容自动调整高度 */
		.auto_li {
			position: relative;
			padding: 24rpx 28rpx;
			margin-right: 22rpx;
			width: 408rpx;
			height: 176rpx;
			flex-shrink: 0;
			/* 防止子元素被压缩 */
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ui88NWy9R1j2zFGojdHU');
			background-size: cover;
			background-position: center;
			.txt1 {
				width: 100%;
				font-weight: 600;
				font-size: 32rpx;
				color: #495E74;
			}
			.txt2 {
				font-weight: 400;
				font-size: 24rpx;
				color: #495E74;
			}
			.buy_btn {
				position: absolute;
				right: 26rpx;
				bottom: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 132rpx;
				height: 50rpx;
				background: #495E74;
				border-radius: 25rpx 25rpx 25rpx 25rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFF3DB;
			}
		}
	}
}
.fuwutc {
	width: 640rpx;
	height: 400rpx;
	background-color: #fff;
	border-radius: 30rpx;
	position: fixed;
	z-index: 9;
	top: 600rpx;
	left: 50%;
	transform: translateX(-50%);
	.wenxin {
		font-size: 36rpx;
		font-weight: 600;
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
	}
	.ty {
		font-size: 32rpx;
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
	}
	.yinsi {
		font-size: 32rpx;
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
	}
	.anniu {
		display: flex;
		border-top: 1px solid #D8D8D8;
		margin-top: 60rpx;
		.qx {
			border-right: 1px solid #D8D8D8;
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			height: 120rpx;
			line-height: 110rpx;
		}
		.qd {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #000;
			height: 120rpx;
			line-height: 110rpx;
		}
	}
}
.fangswindle {
	position: fixed;
	top: 500rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999 !important;
	image {
		width: 584rpx;
		height: 456rpx;
	}
	.zhixiao {
		width: 530rpx;
		height: 76rpx;
		background: #8883F0;
		border-radius: 47rpx 47rpx 47rpx 47rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		top: 340rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}
}
.czdh {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
	padding-top: 700rpx;
	.bj {
		width: 500rpx;
		height: 300rpx;
		background-color: #fff;
		margin: auto;
		border-radius: 20rpx;
		.tittop {
			width: 100%;
			text-align: center;
			padding-top: 50rpx;
			box-sizing: border-box;
		}
		.bfb {
			width: 100%;
			text-align: center;
			padding-top: 50rpx;
			box-sizing: border-box;
			font-size: 50rpx;
		}
	}
}
.mask {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #000;
	opacity: .1;
}
.ulbox {
	width: 100%;
	overflow: scroll;
	.ulli {
		display: flex;
		width: 170vh;
		.li {
			flex: 1;
			border: 1rpx solid #ccc;
			text-align: center;
			font-size: 32rpx;
			color: #8883F0;
			height: 88rpx;
			line-height: 88rpx;
		}
	}
	.olli {
		display: flex;
		width: 170vh;
		.li {
			flex: 1;
			border: 1rpx solid #ccc;
			text-align: center;
			font-size: 22rpx;
			color: #262B37;
			height: 88rpx;
			line-height: 88rpx;
		}
	}
}
.shibai {
	margin-top: 50rpx;
	text-align: center;
	padding-bottom: 600rpx;
	height: 100vh;
	overflow: scroll;
	.jxcz {
		width: 563rpx;
		height: 100rpx;
		background: #8883F0;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 45rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 62rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.top {
		font-size: 40rpx;
		color: #3D3D3D;
	}
	.tishi {
		font-size: 31rpx;
		color: #3D3D3D;
		margin-top: 50rpx;
	}
	.li {
		margin-top: 50rpx;
		font-size: 31rpx;
		color: #3D3D3D;
		image {
			margin-top: 30rpx;
		}
	}
}
/deep/ .u-title {
	padding-bottom: 22rpx;
}
/deep/ .u-checkbox__label {
	margin-right: 0 !important;
}
page {
	background: linear-gradient(180deg, rgb(136, 131, 240) 30%, rgba(255, 255, 255, 0) 100%);
}
.active {
	border: 4rpx solid #8883F0 !important;
	box-sizing: border-box;
}
.page {
	width: 750rpx;
	overflow: hidden;
	height: 100vh;
	.tip_box {
		position: fixed;
		left: 72rpx;
		top: 700rpx;
		width: 610rpx;
		background: #F7FAFE;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		z-index: 10000000;
		.top {
			padding: 52rpx 38rpx 42rpx 36rpx;
			.txt {
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}
		.bot {
			border-top: 2rpx solid #D8D8D8;
			display: flex;
			flex-wrap: nowrap;
			height: 100%;
			.bot_left {
				width: 50%;
				height: 98rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
			}
			.bot_right {
				width: 50%;
				height: 98rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 2rpx solid #D8D8D8;
				font-weight: 500;
				font-size: 36rpx;
				color: #8883F0;
			}
		}
	}
	.title {
		margin-top: 40rpx;
		padding-left: 32rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #fff;
		margin-bottom: 45rpx;
		margin-top: 110rpx;
		height: 126rpx;
		.wz {
			font-weight: 400;
			font-size: 32rpx;
			margin-top: 30rpx;
			view {
				display: flex;
				align-items: center;
				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	.box {
		width: 750rpx;
		height: 66vh;
		overflow: scroll;
		background: #F4F5F7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 36rpx 54rpx;
		padding-bottom: 400rpx;
		box-sizing: border-box;
		border-radius: 30rpx 30rpx 0 0;
		.tongyi {
			width: 590rpx;
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			text {
				color: #638DFF;
				height: 50rpx;
				line-height: 50rpx;
			}
			.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;
			max-height: 100%;
			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: #ccc;
			margin-top: 30rpx;
			font-weight: 400;
		}
		.list_val {
			.tc {
				font-weight: 600;
				font-size: 34rpx;
				color: #525252;
			}
			.date {
				font-size: 26rpx;
				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>