<template>
	<view class="pages">
		<view class="title">
			<image src="https://api.ccttiot.com/smartmeter/img/static/ux6MC6FBl41qHB3f2SZh" mode=""
				style="width: 54rpx;height: 56rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;"
				@click="btnshouye"></image>
			<text style="width: 80%;text-align: center;display: inline-block;">{{obj.deviceName}}</text>
			<view class="wz" @click="call" style="text-align: right;padding-right: 50rpx;"
				v-if="obj.storeContactMobile == null">
				<image style="width: 48rpx;height: 50rpx;vertical-align: middle;"
					src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode="aspectFit"></image>
				<!-- <text>客服</text> -->
			</view>
			<view class="wz" @click="call" style="text-align: right;padding-right: 50rpx;" v-else>
				<image style="width: 60rpx;height: 64rpx;vertical-align: middle;"
					src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode=""></image>
				<!-- <text>客服</text> -->
			</view>
		</view>

		<view class="">
			<!-- 套餐  @scrolltolower="onScrollToLower"-->
			<scroll-view class="list" scroll-y="true" @scroll="handleScroll" :scroll-top="scrollTop" scroll-with-animation="true">
				<view class="list_item" :class="activeindex == item.suitId ? 'active' : ''" v-for="(item,index) in list"
					:key="index" @click="btnactive(item)">
					<view class="tit">
						<text class="tc" :class="activeindex == item.suitId ? 'active' : ''">{{item.name}}</text> <text
							class="yh"
							:class="activeindex == item.suitId ? 'actives' : ''">{{item.usePoint}}%用户选择</text>
					</view>
					<view class="bot">
						<view class="price" :class="activeindex == item.suitId ? 'active' : ''">
							￥{{item.price}}
						</view>
						<view class="time" :class="activeindex == item.suitId ? 'active' : ''">
							可使用{{item.value}} {{item.timeUnit == 3 ? '分钟' : '小时'}}
						</view>
					</view>
				</view>
				<image v-if="picimg" class="picdh" @click="btnscrll"
					src="https://api.ccttiot.com/smartmeter/img/static/uDdjuHcC2h79pEBoQdTh" mode=""></image>
			</scroll-view>
			<!-- 说明 -->
			<view class="shuom">
				<view class="shuomtit">
					功能介绍
				</view>
				<view class="cont" style="height: 208rpx;" v-html="obj.funcInfo">
					<!-- {{obj.funcInfo == undefined ? '暂无介绍...'}} -->
				</view>
			</view>
			<view class="shuom" style="max-height: 220rpx;margin-top: 30rpx;">
				<view class="shuomtit">
					设备地址
				</view>
				<view class="shuomwz">
					<image style="width: 30rpx;height: 30rpx;margin-right: 6rpx;"
						src="https://api.ccttiot.com/smartmeter/img/static/umUFE9oFeYo2Q7atp3jv" mode=""></image>
					{{obj.storeName == undefined ? '' : obj.storeName}} {{obj.room == undefined ? '--' : obj.room}}室
				</view>
				<view class="shuomwz">
					<image style="width: 30rpx;height: 30rpx;margin-right: 6rpx;"
						src="https://api.ccttiot.com/smartmeter/img/static/uHHgD7nRON3WTmomzKVE" mode=""></image>
					{{obj.storeAddress ? (obj.storeAddress.length > 18 ? obj.storeAddress.substring(0, 18) + '...' : obj.storeAddress) : '' }}
				</view>
			</view>


			<!-- 支付 -->
			<view class="tongyi">
				<u-checkbox-group>
					<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
					</u-checkbox><text @click="btnxieyi">《用户服务协议》</text>
				</u-checkbox-group>
				<view class="zf" v-if="zhifuflag" @click="btnzhifu">
					立即支付
				</view>
				<view class="zf" v-else>
					立即支付
				</view>
			</view>
		</view>
		<!-- <view class="mask" v-if="zfflag"></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/uOiCQSDjukktdvbx5oPw" mode=""></image>
		</view>

		<!-- 客服列表 -->
		<view class="kflist" v-if="kfflag">
			<view class="kftit">
				请选择您要联系的客服
			</view>
			<view class="kfwz">
				我们根据选择为您提供服务
			</view>
			<view class="kfshuzu">
				<view class="item_val" v-for="(item,index) in kefulist" :key="index" @click="btncall(item.mobile)">
					<view class="lt">
						<image v-if="item.type == 2"
							src="https://api.ccttiot.com/smartmeter/img/static/urCSQTavLmUje5oTIsE6" mode=""></image>
						<image v-if="item.type == 3"
							src="https://api.ccttiot.com/smartmeter/img/static/uE5rZZvVutxxUj9I06m5" mode=""></image>
						<image v-if="item.type == 4"
							src="https://api.ccttiot.com/smartmeter/img/static/uruHLe3W460sdXr2lcxF" mode=""></image>
					</view>
					<view class="rt">
						<view class="" v-if="item.type == 2">{{item.name}}</view>
						<view class="" v-if="item.type == 3">运维人员：{{item.name}}</view>
						<view class="" v-if="item.type == 4">酒店客服：{{item.name}}</view>
						<view class="" style="margin-top: 10rpx;">{{item.mobile}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qx" @click="btnkfflag" v-if="kfflag">
			×
		</view>
		<view class="mask" v-if="kfflag"></view>

		<!-- 蓝牙充值动画 -->
		<view class="czdh" v-if="jzflag">
			<view class="bj">
				<view class="tittop">
					正在充值中,请稍后
				</view>
				<view class="bfb">
					{{progress}} %
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js");
	export default {
		data() {
			return {
				picimg: false,
				jine: '',
				zfflag: false,
				jzflag: false,
				progress: 0,
				mac: '',
				deviceId: '',
				name: '',
				czflag: false,
				lanyaflag: false,
				ver_data: '',
				devicesList: [],
				bgc: {
					// backgroundColor: "#8883f0",
				},
				checked: false,
				zhifuflag: true,
				activeindex: -1,
				id: '',
				list: [],
				obj: {},
				orderno: '',
				payNo: '',
				prices: '',
				sytime: '',
				zfobj: {},
				suitTimeUnit: '',
				suitPrice: '',
				suitGearAmount: '',
				suitGearTime: '',
				suitFeeMode: '',
				suitFeeType: '',
				title: '',
				sbobj: {},
				onlineStatus: '',
				kfflag: false,
				timer: null,
				titflag: false,
				kefulist: [],
				scrollTop:0,
				billId:''
			}
		},
		onLoad(option) {
			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')
				this.$u.get(`/app/user/userInfo`).then(res => {
					if (res.code == 200) {
						this.getlist()
					} else if (res.code == 401) {
						uni.navigateTo({
							url: '/pages/login/login?id=' + this.id
						})
					}
				})
			} else {
				this.id = option.id
				this.$u.get(`/app/user/userInfo`).then(res => {
					if (res.code == 200) {
						this.getlist()
					} else if (res.code == 401) {
						uni.navigateTo({
							url: '/pages/login/login?id=' + this.id
						})
					}
				})
			}
		},
		onUnload: function() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null;
			}
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			})
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 点击协议跳转
			btnxieyi() {
				uni.navigateTo({
					url: '/page_fenbao/shiyong?tit=' + '用户服务协议' + '&type=' + 'user'
				})
			},
			// 获取设备客服
			getkefu() {
				this.$u.get(`/app/device/${this.obj.deviceId}/service`).then(res => {
					if (res.code == 200) {
						this.kefulist = res.data
					}
				})
			},

			// 获取设备套餐列表
			getlist() {
				this.$u.get(`app/device/${this.id}/withSuitList`).then((res) => {
					if (res.code == 200) {
						this.list = res.data.suitList
						if (this.list.length <= 3) {
							this.picimg = false
						} else {
							this.picimg = true
						}
						this.obj = res.data
						this.onlineStatus = res.data.onlineStatus
						this.mac = 'CCYK:' + res.data.mac
						this.getkefu()
					} else if (res.code == 401) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			},
			// 滚动到底部
			handleScroll(e) {
				if (e.detail.deltaY <= 0) {
					  this.picimg = false
				} else {
					setTimeout(()=>{
						this.scrollTop = 0
						if(this.list.length <= 3){
							this.picimg = false
						}else{
							this.picimg = true
						}
					},100)
				}
			},
			btnscrll() {
				this.scrollTop = 99999
			},
			// 点击支付	
			btnzhifu() {
				if (this.onlineStatus == 0) {
					if (this.ver_data == '') {
						this.czflag = true
						uni.showLoading({
							title: '蓝牙连接中'
						})
						let that = this
						xBlufi.initXBlufi(1);
						xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent);
						xBlufi.notifyStartDiscoverBle({
							'isStart': true
						})
						setTimeout(() => {
							xBlufi.notifyStartDiscoverBle({
								'isStart': false
							})
							if (that.devicesList.length > 0) {
								xBlufi.notifyConnectBle({
									isStart: true,
									deviceId: that.deviceId,
									name: that.name
								})
							}
						}, 2000)
						uni.showModal({
							title: '温馨提示',
							content: `检测到该设备未联网,为您切换为蓝牙模式,支付的时候靠近该设备,并打开蓝牙`,
							showCancel: false,
						})
						setTimeout(() => {
							if (that.ver_data == '') {
								uni.showToast({
									title: '未连接成功，如多次失败请点击右上角联系客服咨询',
									icon: 'none',
									duration: 5000
								})
								that.czflag = false
								setTimeout(() => {
									uni.hideLoading()
								}, 5000)
							}
						}, 18000)
					} else {
						this.zhifuflag = false
						let that = this
						let data = {
							deviceNo: that.id,
							suitId: that.zfobj.suitId,
							money: that.zfobj.price,
							suitTime: that.zfobj.value,
							suitTimeUnit: that.suitTimeUnit,
							suitFeeMode: that.suitFeeMode,
							suitFeeType: that.suitFeeType,
							suitGearAmount: that.suitGearAmount,
							suitGearTime: that.suitGearTime,
							suitPrice: that.suitPrice
						}
						that.$u.post('/app/bill/recharge', data).then(res => {
							if (res.code == 200) {
								that.orderno = res.data.billNo
								that.billId = res.data.billId
								that.$u.get(`/app/pay/wx/${that.orderno}`).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) => { 
												if (that.timer) {
													clearInterval(this.timer);
													that.timer = null;
												}
												that.$u.put(`/app/bill/${that.orderno}/refreshPayResult`).then(res => {
													// if(res.code == 200){
													that.$u.get('/app/bill/recharge/device/fail/list').then(res => {
														if (res.code == 200) {
															if (res.data.length != 0) {
																let dingobj = res.data[0].billNo
																uni.getNetworkType({
																	success(res) {
																		if (res.networkType !== 'none') {
																			uni.getConnectedBluetoothDevices({
																				success(res) {
																					that.jzflag =true
																					that.startLoading()
																					setTimeout(() => {
																						xBlufi.notifySendCustomData({
													 													customData: "11time@" + that.jine
																									})
																							},1500)
																				},
																				fail(err) {
																					console.error('获取已连接蓝牙设备信息失败：',err)
																				}
																			})
																			that.$u.get(`/app/bill/recharge/${dingobj}/bluetoothSuccess`).then(res => {
																				if (res.code == 200) {
																							that.zhifuflag = true
																							console.log('蓝牙离线充值成功11')
																							setTimeout
								 																(() => {
																										uni.navigateTo({
																											url: '/page_fenbao/dingdan?billId=' + that.billId 
																										})
																									},
																									1000
																								)
																						}
																					}
																				)
																		}
																	}
																})
															} else {
																uni.getNetworkType({
																	success(res) {
																		if (res.networkType !== 'none') {
																			uni.getConnectedBluetoothDevices({
																				success(res) {
																					that.jzflag = true
																					that.startLoading()
																					setTimeout(() => {
																								xBlufi.notifySendCustomData({
																										customData: "11time@" + that.jine
																									})
																							},1500)
																						},
																				fail(err) {
																					console.error('获取已连接蓝牙设备信息失败：',err)
																				}
																			})
																			that.zhifuflag = true
																			setTimeout(() => {
																						uni.navigateTo({
																							url: '/page_fenbao/dingdan?billId=' + that.billId 
																						})
																					},1000)
																		} 
																	}
																})
															}

														}
													})
													// }
												})
												// 支付成功逻辑
												uni.setStorageSync('time', that.expireTimeStr)
											},
											fail(err) {
												this.zhifuflag = true
												setTimeout(() => {
													this.czflag = false
													uni.hideLoading()
												}, 500)
												// 支付失败逻辑
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													duration: 2000
												});
											}
										})
									} else {
										this.zhifuflag = true
									}
								})
							}
						})
					}
				} else {
					if (this.checked == false) {
						uni.showToast({
							title: '请勾选用户服务协议 !',
							icon: 'none',
							duration: 1000
						})
					} else if (this.activeindex == -1) {
						uni.showToast({
							title: '请选择套餐 !',
							icon: 'none',
							duration: 1000
						})
					} else {
						// 不允许一直点击支付
						this.zhifuflag = false
						let that = this
						let data = {
							deviceNo: that.id,
							suitId: that.zfobj.suitId,
							money: that.zfobj.price,
							suitTime: that.zfobj.value,
							suitTimeUnit: that.suitTimeUnit,
							suitFeeMode: that.suitFeeMode,
							suitFeeType: that.suitFeeType,
							suitGearAmount: that.suitGearAmount,
							suitGearTime: that.suitGearTime,
							suitPrice: that.suitPrice
						}
						that.$u.post('/app/bill/recharge', data).then(res => {
							if (res.code == 200) {
								that.orderno = res.data.billNo
								that.billId = res.data.billId
								let data = {
									billNo: that.orderno,
									channelId: 1
								}
								that.$u.get(`app/pay/wx/${that.orderno}`).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) => {
												that.zhifuflag = true
												that.$u.put(`/app/bill/${that.payNo}/refreshPayResult`).then(res => {
													// 支付成功逻辑
													uni.navigateTo({
														url: '/page_fenbao/dingdan?billId=' + that.billId  
													})
												})
											},
											fail(err) {
												that.zhifuflag = true
												// 支付失败逻辑
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													duration: 2000
												})
											}
										})
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
										setTimeout(() => {
											this.zhifuflag = true
										}, 2000)
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
								setTimeout(() => {
									this.zhifuflag = true
								}, 2000)
							}
						})
					}
				}
			},

			// 蓝牙充值动画
			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);
			},
			// 获取附近蓝牙设备列表
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							let devicesarr = options.data
							console.log(devicesarr, this.mac, '111');
							devicesarr.forEach(device => {
								const mac = device.name.substring(4);
								if (device.name.slice(5, 17) == this.mac.slice(5, 17)) {
									this.deviceId = device.deviceId
									this.name = device.name
									this.devicesList.push(device);
									let uniqueDevicesList = Array.from(new Set(this.devicesList));
									// 将去重后的数组重新赋值给 this.devicesList
									this.devicesList = uniqueDevicesList;
								}
							})
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						console.log("连接回调：" + JSON.stringify(options));
						uni.showToast({
							title: '连接成功',
							icon: 'none',
							duration: 2000
						})
						if (options.result) {
							// console.log('125451245')  
							{
								xBlufi.notifyInitBleEsp32({
									deviceId: this.deviceId
								});
								xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);
								this.deviceIds = options.data.deviceId
								this.name = this.name
							}
						} else {

						}

						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
						this.ver_data = this.parseCustomData(options.data)
						console.log("1收到设备发来的自定义数据结果：", this.ver_data);
						setTimeout(() => {
							this.czflag = false
							uni.hideLoading()
						}, 1000)
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));
							let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) ===
								"CCYK");
							// 将过滤后的数组重新赋值给 this.devicesList
							this.devicesList = filteredDevices;
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) {
							this.lanyaflag = true
							uni.showToast({
								title: '蓝牙未开启',
								icon: 'none',
								duration: 3000
							});
							return
						} else {
							this.lanyaflag = false
						}
						break;
				}
			},
			// 从蓝牙拿到数据进行解析
			parseCustomData(data) {
				// 将字符串按照 "@" 分割成数组
				const dataArray = data.split('@');
				const voltage = parseFloat(dataArray[0].substring(1)); // 去除前缀 "V"，并将字符串转换为浮点数
				const switchState = dataArray[1].substring(1); // 去除前缀 "S"
				const current = parseFloat(dataArray[2].substring(1)); // 去除前缀 "A"，并将字符串转换为浮点数
				const power = parseFloat(dataArray[4].substring(1)); // 去除前缀 "P"，并将字符串转换为浮点数
				const remainingPower = parseFloat(dataArray[5].substring(1)); // 去除前缀 "M"，并将字符串转换为浮点数
				const setMode = dataArray[6].substring(1); // 去除前缀 "T"
				// 返回解析后的数据对象
				return {
					voltage,
					switchState,
					current,
					power,
					remainingPower,
					setMode
				};
			},

			btnactive(item) {
				this.activeindex = item.suitId
				this.prices = item.price
				this.sytime = item.value
				this.zfobj = item
				this.suitTimeUnit = item.timeUnit
				this.suitPrice = item.price
				this.suitGearAmount = item.gearAmount
				this.suitGearTime = item.gearTime
				this.suitFeeMode = item.feeMode
				this.suitFeeType = item.feeType
				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
				}
			},

			btnshouye() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			checkboxChange(e) {
				this.checked = e.value
			},
			// 联系客服
			call() {
				this.kfflag = true
				this.picimg = false
			},
			btnkfflag(){
				this.kfflag = false
				this.picimg = true
			},
			// 拨打客服电话
			btncall(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						})
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: #918CFF !important;
		color: #fff !important;
	}

	.actives {
		background-color: #fff !important;
	}

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

	.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;
			}
		}
	}

	.qx {
		width: 68rpx;
		height: 68rpx;
		background: #fff;
		border-radius: 50%;
		text-align: center;
		line-height: 68rpx;
		font-size: 50rpx;
		color: #3D3D3D;
		margin: auto;
		bottom: 420rpx;
		z-index: 1;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
	}

	.kflist {
		width: 590rpx;
		height: 778rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		position: fixed;
		top: 326rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		padding-top: 48rpx;
		box-sizing: border-box;

		.kftit {
			font-size: 40rpx;
			color: #3D3D3D;
			font-weight: 600;
			width: 100%;
			text-align: center;
		}

		.kfwz {
			font-size: 28rpx;
			color: #3D3D3D;
			margin-top: 16rpx;
			width: 100%;
			text-align: center;
		}

		.kfshuzu {
			height: 580rpx;
			overflow: scroll;

			.item_val {
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				box-sizing: border-box;
				width: 528rpx;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: auto;
				margin-top: 42rpx;

				.lt {
					margin-right: 34rpx;
					padding-top: 10rpx;
					box-sizing: border-box;

					image {
						width: 76rpx;
						height: 78rpx;
					}
				}

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

	.picdh {
		width: 40rpx;
		height: 35rpx;
		position: fixed;
		top: 53%;
		right: 76rpx;
		z-index: 99;
		opacity: .5;
		animation: moveUpDown 1.5s infinite ease-in-out;
	}

	@keyframes moveUpDown {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
			/* 控制上下跳动的幅度 */
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .5;
	}

	page {
		background-color: #F7FAFE;
		overflow: hidden;
	}

	.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;
			}
		}
	}

	.pages {
		width: 750rpx;
		box-sizing: border-box;

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

			.cont {
				margin-top: 10rpx;
				max-height: 120rpx;
				overflow: scroll;
				line-height: 40rpx;
			}

			.shuomtit {
				font-weight: 700;
				font-size: 34rpx;
				color: #383838;
			}

			.shuomwz {
				font-size: 28rpx;
				color: #383838;
				margin-top: 16rpx;
				display: flex;
				align-items: center;
			}
		}

		.list {
			width: 648rpx;
			margin: auto;
			height: 42vh;
			overflow: scroll;

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

				.tit {
					display: flex;
					justify-content: space-between;

					.tc {
						font-weight: 600;
						font-size: 34rpx;
						color: #3D3D3D;
						padding-top: 26rpx;
						box-sizing: border-box;
					}

					.yh {
						width: 213rpx;
						height: 67rpx;
						background: #DCDBFF;
						border-radius: 0 0 0 20rpx;
						font-size: 28rpx;
						color: #918CFF;
						text-align: center;
						line-height: 67rpx;
					}
				}

				.bot {
					margin-top: 40rpx;
					display: flex;

					.price {
						font-weight: 600;
						font-size: 36rpx;
						color: #3D3D3D;
						margin-right: 46rpx;
					}

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

		.tongyi {
			width: 590rpx;
			position: fixed;
			bottom: 50rpx;
			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: 20rpx;
			}
		}

		.title {
			margin-top: 40rpx;
			padding-left: 32rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #3D3D3D;
			margin-top: 100rpx;
			height: 126rpx;

			.wz {
				font-weight: 400;
				font-size: 32rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>