alipay/pages/index/index.vue

<template>
	<view>
		<!-- 20240830取消提示弹框 -->
		<view v-if="false" @click="endGuide" class="guide-box">
			<!-- 引导框，这里可以放置引导提示信息 -->
			<view
				style="margin: 30% auto;display: grid;justify-items: center;border: 5px double #004aff94;width: 250px;height: 250px;align-content: center;background-color: white;border-radius: 10px">
				<view style="display: flex;align-items: center;color: #c50303;font-size: x-large;font-weight: 800;">
					<image style="width: 50px;height: 50px;" src="../../static/quan.png"></image>
					<text>领取一元支付券</text>
				</view>

				<text class="shake-animation">选择插座,购买安全险;</text>
				<text class="shake-animation">领取支付优惠券,开始充电;</text>
				<view style="display: flex;align-items: center;color: #787272;font-size: small;margin-top: 60px">
					<image style="width: 25px;height: 25px;" src="../../static/mayi.png"></image>
					<text>蚂蚁保</text>
					<image style="width: 25px;height: 25px;" src="../../static/x.png"></image>
					<image style="width: 23px;height: 23px;" src="../../static/zongan.png"></image>
					<text>众安保险</text>
				</view>
				<!-- <button style="width: 150px;border-radius: 20px;margin-top: 10px" type="primary"
					@click="endGuide">我知道了</button> -->
			</view>

		</view>
		<view class="head">
			<view style="float: left;">

				<view id="header-content1">
					<view id="header-score1">
						余额:<span>{{goods==''?0:data.balance}}</span>
					</view>
				</view>
				<view class="cz-panel">
					<view class="fz1 cz-btn" @click="selectCF();">
						充值
					</view>
				</view>
			</view>
			<view style="float: right;display: flex;">
				<view @click="mycenter()" style="margin-right: 5px;color: #4592FF;">
					个人中心
				</view>
				<view @click="customers()" style="margin-right: 5px;color: #4592FF;">联系客服</view>
			</view>
		</view>
		<view>
			<uni-popup ref="popup" background-color="#fff;" :is-mask-click="false">
				<view style="width: 80%; text-align: center; font-size: 16px; margin: 0 auto; padding: 7px;">
					充值活动中, 充值金额仅用于【充电使用】, 不支持设备自动退款, 如需退款请点击右上角【联系客服】联系设备运营者退款
				</view>
				<span style="    display: flex;
			    align-items: center;
			    justify-content: center;
			    flex-wrap: wrap;">
					<view v-if="recharge.length<1">暂无充值套餐</view>
					<view v-for="(item, index) in recharge" :key="index" class="each_option_recharge">
						<view class="item" @click="payOrder(item[0], item[1])">
							<view class="item-number-p">
								<image class="icon" src="../../static/chong.png" />
								<text>{{ item[0] }}元</text>
							</view>
							<view v-if="item[1] > 0" class="item-status-p">
								<image class="icon" src="../../static/song.png" />
								<text>{{ item[1] }}元</text>
							</view>
						</view>
					</view>
					<view class="cz-po-cs" @click="canCZ()">
						取消
					</view>
				</span>
			</uni-popup>
		</view>
		<view class="info-pane">
			<view>
				{{goods==''?'':goods.sub_region_name}}
			</view>
			<view>
				<text>设备编号: {{goods==''?'':goods.sn}}</text>
				<!--                设备编号：{$goods['sn']}-->
				<view style="float: left;">
					<view @click="coupons()" id="applyCoupons">
						<view class="applyCouponsClass" style="background: none">
							<view id="" style="color:#4592FF;font-weight: bold">
								办理卡券
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view :style="hide_show" class="tip-panel-all tip-panel-zf animate-bounce-down">
			<view class="tip-panel-bor-all tip-panel-bor"></view>
			<view class="tip-panel-text-all tip-panel-text">
				遇到问题</br>
				及时联系客服
			</view>
		</view>

		<view class="s">
		</view>
		<view class="bk-mk"></view>
		<view class="options-panel">
			<view style="background-color: #ffffff;    padding: 10px 3px;
																            border-radius: 8px;">
				<view style="width: 47%;display: inline-block;padding-left: 6px;">
					选择插座
				</view>
				<view style="width: 49%;display: inline-block;text-align: right;" @tap="port_refresh()">刷新
				</view>

				<view v-for="item in port_list" :key="item.port_id">
					<view class="each-option">

						<view
							:class="{'item-selected':selectedNum==item.port_id,'item-busy':item.status==2,'item-disable':item.status==3,'item-disable':item.status==4,'item-ready':item.status==5}"
							class="item" @click="channel_select( item.port_id,item.status);" :id="'port_'+item.port_id">
							<view class="item-number">{{item.port_id}}号</view>
							<view class="item-status">{{getStatus(item.status) }}</view>
						</view>
					</view>
					<input type="hidden" style="display: none;" name="updatetime" :value="item.updatetime">
					<input type="hidden" style="display: none;" :id="'port_status_'+(item.port_id)"
						:value="item.status">

				</view>
				<view style="clear: both;"></view>
			</view>
			<input type="hidden" style="display: none;" name="selected_port" id="selected_port">

			<view class="ct-panel" style="width: 100%;">
				<view class="fz1">
					选择套餐
				</view>
				<!-- 用户自定义是否显示主板计费规则 -->
				<view v-if="isempty(fee_tpl.board_rules_hide)" class="fz1" style="text-align: right;font-size: 14px;">
					计费方式:
				</view>
				<view v-if="isempty(fee_tpl.board_rules_hide)" class="fz1 ct-ck" style="font-size: 14px;"
					@click="showTip();">
					{{data==''?'':data.fee_type_name}}
				</view>
			</view>
			<!-- 用户自定义是否显示主板计费规则 -->
			<span v-if="isempty(fee_tpl.board_rules_hide)">
				<view class="ct-ck1" v-show="tip_panel_show">
					<span v-if="data.fee_type==2&&goods.coin_1_tp<10">
						<view style=" text-align: justify;
			                text-justify:inter-ideograph;">
							功率范围: 0-{{goods.power_max_1-1}}W 1小时 {{goods.coin_1_tp}}/10}元
						</view>
						<view>
							{{goods.power_max_1}}-{{goods.power_max_2 - 1}}W 1小时 {{goods.coin_2_tp/10}}元
						</view>
						<view>
							{{goods.power_max_2}}-{{goods.power_max_3 - 1}}W 1小时 {{goods.coin_3_tp/10}}元
						</view>
						<view>
							{{goods.power_max_3}}-{{goods.power_max_4 - 1}}W 1小时 {{goods.card_1_tp/10}}元
						</view>
						<view>
							{{goods.power_max_4}}W及以上 1小时 {{goods.card_2_tp/10}}元
						</view>
					</span>
					<span v-if="data.fee_type==2">
						<view style=" text-align: justify;
			                text-justify:inter-ideograph;">
							功率范围: 0-{{goods.power_max_1 - 1}}W 1小时 {{goods.coin_1_tp/100}}元
						</view>
						<view>
							{{goods.power_max_1}}-{{goods.power_max_2 - 1}}W 1小时 {{goods.coin_2_tp/100}}元
						</view>
						<view>
							{{goods.power_max_2}}-{{goods.power_max_3 - 1}}W 1小时 {{goods.coin_3_tp/100}}元
						</view>
						<view>
							{{goods.power_max_3}}-{{goods.power_max_4 - 1}}W 1小时 {{goods.card_1_tp/100}}元
						</view>
						<view>
							{{goods.power_max_4}}W及以上 1小时 {{goods.card_2_tp/100}}元
						</view>
					</span>

					<view v-if="data.fee_type==3" style=" text-align: justify;
			                text-justify:inter-ideograph;">

						服务费{{goods.port_power_max/1000}}元/度,
						电价{{goods.card_min/1000}}元/度

					</view>


					<span v-if="data.fee_type==1&&(!isempty(params_sort[0].mny))">
						<view style=" text-align: justify;
			    text-justify:inter-ideograph;">
							功率范围: 0-{{goods.power_max_1 - 1}}W 支付1元 {{params_sort[0].tm/params_sort[0].mny}} 分钟
						</view>
						<view>
							{{goods.power_max_1}}-{{goods.power_max_2 - 1}}W 支付1元
							{{goods.power_1_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
						</view>
						<view>
							{{goods.power_max_2}}-{{goods.power_max_3 - 1}}W 支付1元
							{{goods.power_2_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
						</view>
						<view>
							{{goods.power_max_3}}-{{goods.power_max_4 - 1}}W 支付1元
							{{goods.power_3_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
						</view>
						<view>
							{{goods.power_max_4}}W及以上 支付1元
							{{goods.power_4_tim * params_sort[0].tm / (params_sort[0].mny * 100)}} 分钟
						</view>
					</span>

				</view>
			</span>
			<view v-if="!isempty(fee_tpl.full_stop_fee)" class="pay-btn-content" style="position: relative;">

				<view @click="full_to_stop(data.balance, fee_tpl.full_stop_fee);" class="pay-btn item-tc"
					style="color: #454955;text-align: left;">
					<view class="weui-flex3" style="padding: 6px 15px 0px 15px;font-size: 15px;font-weight: bold;">
						<view>
							充满自停
						</view>
						<view style="font-size: 14px;
			                        color: #9199af;font-weight: normal;">
							<!-- {if empty($item['remark'])} -->

							<!-- <text v-if="item.remark!='.'">
										{{item.remark}}
									</text> -->
							<text>
								套餐</text>
							<!-- {/if}
									{/if} -->
						</view>
					</view>
					<view class="weui-flex1"
						style="text-align: right;font-weight: bold;font-size: 26px;color: #ff6565;line-height: 52px;padding: 0px 12px">
					</view>
				</view>
			</view>


			<view v-for="item in params_sort" >
				<view v-if="!isempty(item.mny)" class="pay-btn-content" style="position: relative;">
					<view @click="selectmenu(item.mny)" :id="''+item.mny" class="pay-btn item-tc"
						style="color: #454955;text-align: left;" :class="total==item.mny?'item-selected':''">
						<view class="weui-flex3" style="padding: 6px 15px 0px 15px;font-size: 15px;font-weight: bold;">
							<view>
								{{item.mny}}元
								<text v-if="data.fee_type==1 && (isempty(goods.time_hide) && !isempty(item.tm))">
									{{item.tm}}分钟
								</text>

								<text v-if="!isempty(goods.para_type)&&(isempty(goods.coin_hide)&&!isempty(item.coin))">
									{$item['coin']}币
								</text>
							</view>
							<view style="font-size: 14px;
			            color: #9199af;font-weight: normal;">

								<text v-if="isempty(item.remark)&&goods.type!=9">套餐</text>
								<text v-else-if="item.remark!='.'">
									{{item.remark}}
								</text>

							</view>
						</view>
						<view class="weui-flex1"
							style="text-align: right;font-weight: bold;font-size: 26px;color: #ff6565;line-height: 52px;padding: 0px 12px">
							<span>{{item.mny}}</span><span style="font-size: 13px;">元</span>
						</view>
					</view>
				</view>
			</view>

			<input type="hidden" style="display: none;" id="selected_num" :value="selectedNum">
			<input type="hidden" style="display: none;" id="total" :value="total">

			<input type="hidden" id="dev_status_checked" style="display: none;" value="0">
			<input type="hidden" id="dev_status_unavail" style="display: none;" :value="dev_status_unavail">
		</view>
		<view style="height: 100px;"></view>
		<view @click="startCharging()" class="confirm-panel">
			<view class="confirm-btn" id="confirm">
				开始充电
			</view>
		</view>


		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog mode="base" title="客服服务">
					<view style="display: grid;line-height: 25px;">
						<text>支付成功后，设备未立即启动，可能存在网络延迟，请稍等。若仍未启动，可采用如下方式:</text>
						<view style="color: #4592FF;display: flex;justify-content: space-between;" @click="feedback()">
							反馈问题<uni-icons style="margin-right: 0;" type="right"></uni-icons>
						</view>
						<view style="color: #4592FF;display: flex;justify-content: space-between;">
							客服电话:<text style="margin-right: 0;">{{telephone}}</text></view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 退出弹框 -->

			<uni-popup ref="popupclose" type="dialog">
				<uni-popup-dialog mode="base" title="注意" showClose="false" @close="closeout" @confirm="closeout">
					<view style="display: grid;line-height: 25px;">
						<text>请重新扫描设备二维码进入小程序</text>
					</view>
				</uni-popup-dialog>
			</uni-popup>
			<!-- 
			
			<uni-popup ref="popupclose" type="dialog">
				<uni-popup-message type="success" message="成功消息" :duration="2000">
					<view style="display: grid;line-height: 25px;">
						<text>请重新扫描设备二维码进入小程序</text>
						<button @click="exitMiniProgram">退出</button>
					</view>
					</uni-popup-message>
			</uni-popup> -->
		</view>
		<!-- 广告 -->
		<view>
			<riding-risk-component-pop :visible="visible" onPopupClose="onPopupClose" onSuccess="onSuccess"
				onAdError="onAdError" onClose="onClose"></riding-risk-component-pop>
		</view>
		<!-- 支付券 -->
		<uni-popup :is-mask-click="false" ref="popupmarketings" type="message">
			<view
				style=" background-color: #f1f1f1c7;width: 320px;height: 450px;display: flex;flex-direction: column;align-items: center;">
				<view style="display: grid;padding: 12px 10px;">
					<text style="text-align: center;margin: auto;font-weight: 900;color: #e94242;">{{message1}}</text>
					<text style="margin: auto;font-size: 12px;color: #4e4646">{{message2}}</text>
				</view>
				<view>
					<image style="margin: 0px 10px;width: 200px;height: 200px;" src="../../static/market.png"></image>
				</view>
				<get-coupon onBeforeGetCoupon="onBeforeGetCoupon" onGetCouponSuccess="onGetCouponSuccess"
					onGetCouponFail="onGetCouponFail" onUseImmediately="onUseImmediately" onClose="onClose"
					:params="params" :dialogBtnType="dialogBtnType" :dialogBtnStyle="dialogBtnStyle" :zIndex="9998">
					<button style="text-align: center;color: #4592FF;width: 200px;">领取优惠券</button>
				</get-coupon>
				<button style="text-align: center;color: #c30061;width: 200px;margin-top: 20px;"
					@click="closeMarket()">关闭领取</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import config from '@/config.js'
	let pluginIns;
	export default {

		data() {
			return {
				message1: '领取优惠券',
				message2: '1、本券不可兑换现金，不可找零。\n2、如果消费并使用优惠券后，订单发生退款，优惠券无法退还。',
				loading: false,
				balance: '0', // 示例余额
				data: '',
				goods: '',
				port_list: '',
				fee_tpl: '',
				params_sort: [],
				oem_info: '',
				ports: [{
						id: '1',
						status: '空闲'
					},
					{
						id: '2',
						status: '使用中'
					},
					{
						id: '3',
						status: '禁用'
					},
					{
						id: '4',
						status: '故障'
					},
					{
						id: '5',
						status: '已接入'
					},
					{
						id: '6',
						status: '已预约'
					},
					{
						id: '7',
						status: '完成'
					},
					{
						id: '8',
						status: '急停'
					}
				],
				fee_type_names: [{
						type: 2,
						name: '按功率计费'
					},
					{
						type: 1,
						name: '按时间计费'
					},
					{
						type: 3,
						name: '按电量计费'
					},
					{
						type: 4,
						name: '刷卡免费模式'
					}
				],
				tip_panel_show: false,
				hide_show: '',
				checkSelectShow: false,
				selectedNum: '',
				total: '',
				telephone: '',
				dev_status_unavail: 0,
				processing: false,
				recharge: [],
				checkClazz: '',
				openid: '',
				unionid: '',
				starting: false,
				dev_status_checked: 0,
				sessionId: '',
				device_sn: '',
				visible: false,
				hasPop:false,
				title: '',
				showMask: true,
				// alipay
				params: [{
					//活动id
					activityId: '2024062400826004792330551163',
					outBizNo: '202305226095221590xxxxxxxxx',
				}],
				dialogBtnType: 2,
				dialogBtnStyle: {
					color: '#000',
					borderColor: '#59bdff',
					backgroundColor: '#59bdff'
				},
				marketStatus: 'unknown',
				marketingIs: false,
				succBack: false,
				showGuide: false // 控制引导框的显示

			}
		},
		onReady() {
			if (this.device_sn == '') {
			
				this.mycenter();
				//this.$refs.popupclose.open("center")
			}
			//this.$refs.popupmarketings.open("center")
		},
		onShow() {
			var _this = this
			_this.selectedNum = ''
			_this.total = ''
			_this.hide_show = '';
			setTimeout(function() {
				_this.hide_show = 'display: none;';
				console.log("这段代码将在1000毫秒后执行");
			}, 3000);
			_this.flushed(_this.device_sn);

			my.getAuthCode({
				scopes: 'auth_user',
				success: (res) => {
					console.log('res>>>auth_user>>' + JSON.stringify(res))
					uni.request({
						method: 'get',
						url: config.baseUrl +
							'app/index.php?i=1&j=1&c=entry&m=wdl_shopping&debugSkip=true&do=getOpenId&auth_code=' +
							res.authCode + '&state=' +
							_this
							.sessionId,
						success(res) {
							console.log('openid>>>>>>>>===' + JSON.stringify(res.data.openid))
						}
					})
				},
			});

		},
		onLoad(option) {

			//领券弹框

			this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this)
			this.$scope.onUseImmediately = this.onUseImmediately.bind(this)
			this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this)

			//领券弹框
			//保险
			console.log("这段index>>onload>>" + JSON.stringify(option));
			this.$scope.onPopupClose = this.onPopupClose.bind(this)
			this.$scope.onSuccess = this.onSuccess.bind(this)
			this.$scope.onClose = this.onClose.bind(this)
			this.$scope.onAdError = this.onAdError.bind(this)
			//保险
			
			var _this = this
			_this.device_sn = uni.getStorageSync("device_sn")
			_this.title = uni.getStorageSync("title")
			_this.sessionId = 'we7sid-' + uni.getStorageSync("sessionId")
			 // _this.device_sn = 'GD1B406633'
			// _this.sessionId = 'we7sid-' + '9908b0533fb8af82dba4cd59daa93870';
			uni.setNavigationBarTitle({
				title: _this.title
			})

		},
		methods: {
			endGuide() {
				// 结束引导
				this.showGuide = false;
				// 将引导结束状态存储到本地
				//uni.setStorageSync('isGuideShown', true);

			},
			closeMarket() {
				//关闭领取弹框
				var _this = this
				uni.showModal({
					title: '提示',
					content: '确认不领取该优惠券?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.$refs.popupmarketings.close()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onUseImmediately() {
				this.$refs.popupmarketings.close()
				console.log('去支付')
			},
			//保险弹框冲突不使用
			onClosed() {
				console.log('领个券关闭>>>>')
				this.$refs.popupmarketings.close()
			},
			onGetCouponSuccess(e) {
				console.log('领券成功', e)
				uni.showToast({
					title: '领取成功',
					icon: 'success',
					duration: 1000,
				})
				//this.$refs.popupmarketings.close()
			},
			onGetCouponFail(e) {
				console.log('领券失败', e)
				uni.showToast({
					title: '领券失败',
					icon: 'fail',
					duration: 1000,
				})
			},
			closeout(e) {
				// 如果成功退出小程序，会直接结束小程序进程，一般情况已经来不及执行success/complete回调。
				my.exitMiniProgram();
			},
			onShowBtn() {
				if(this.hasPop){
					return;
				}
				this.visible = true
				this.hasPop=true
			},
			onPopupClose() {
				this.visible = false
			},
			onSuccess() {
				console.log("加载成功")
				if (this.device_sn == "" || this.device_sn == null) {
					this.showGuide = false;
					return;
				}
				this.showGuide = true;
			},
			async onClose(err) {
				console.log('关闭保险领取')
				uni.showLoading({
					title: '获取中，请稍候'
				});

				//console.log('广告关闭???????????>>>>' + JSON.stringify(err))
				//广告关闭判断是否购买保险成功
				var _this = this
				var bizId = err.bizId
				if (!_this.isempty(bizId)) {
					//验证回调
					_this.doSomething();
					await uni.request({
						method: 'get',
						url: config.baseUrl +
							'app/index.php?i=1&j=1&c=auth&a=alipay_code_money&do=succ_back&bizId=' +
							bizId + '&state=' +
							_this
							.sessionId,
						success(res) {
							console.log('验证回调接口是否有用户购买成功的信息>.1')
							if (res.data.code == 1) {
								_this.succBack = true;
							} else {
								_this.succBack = false
								uni.showToast({
									title: '用户购未购买'
								})
								console.log('验证回调接口是否有用户购买未购买的信息>.1.5')
								uni.hideLoading();
								return
							}
						},
						fail(res) {
							console.log('验证回调接口是否有用户购买失败的信息>.2')
							_this.succBack = false
							uni.showToast({
								title: '验证购买失败'
							})
							uni.hideLoading();
							return
						},
						complete(res) {
							console.log('验证回调接口是否有用户购买完成的信息>.3')
							//_this.succBack = false
							return;
						}
					})
					if (!_this.succBack) {
						return
					}
				} else {
					console.log("广告关闭,未知bizid4")
					// uni.showToast({
					// 	title: '未知bizid'
					// })
					uni.hideLoading();
					return
				}
				console.log("广告关闭,查询的回调结果为true,购买保险成功5")
				//购买成功继续
				//1.判断活动情况 2.活动正常弹出领券
				console.log('验证是否发券的结果???????????>>>>6')
				await uni.request({
					method: 'get',
					url: config.baseUrl +
						'app/index.php?i=1&j=1&c=entry&m=wdl_shopping&debugSkip=true&do=marketing&state=' +
						_this
						.sessionId,
					success(res) {
						console.log('咨询用户是否可以领取该活动优惠券>.7')
						if (res.data.rv == 1) {
							//成功,弹出领取福利窗口
							_this.showMask = true
							_this.message1 = res.data.msg.voucher_display_pattern_info.voucher_name
							_this.message2 = res.data.msg.voucher_display_pattern_info.voucher_description
							_this.marketStatus = res.data.msg.activity_base_info.activity_status
							_this.params = [{
								activityId: res.data.msg.activity_base_info.activity_id,
								outBizNo: bizId,
							}]
							// 活动已激活: ACTIVE
							// 活动已暂停: PAUSE
							// 活动已结束: FINISHED
							if (_this.marketStatus == 'ACTIVE') {
								_this.$refs.popupmarketings.open("center")
							} else {
								uni.showToast({
									title: _this.marketStatus == 'PAUSE' ? '活动暂停' : _this
										.marketStatus ==
										'FINISHED' ? '活动已结束' : _this.marketStatus
								})
								uni.hideLoading();
							}
						}
					},
					fail(res) {
						console.log('咨询用户是否可以领取该活动优惠券失败8>.')
						uni.showToast({
							title: '优惠券加载失败'
						})
						uni.hideLoading();
					},
					complete(res) {
						console.log('咨询用户是否可以领取该活动优惠券完成9>.')
						_this.$scope.onClose = _this.onClosed.bind(_this)
					}
				})
				uni.hideLoading();
			},
			onAdError(err) {
				console.log('广告加载失败???????????>>>>' + JSON.stringify(err))
			},
			sleep(duration = 2000) {
				return new Promise(resolve => {
					setTimeout(resolve, duration);
				});
			},
			// 使用示例
			async doSomething() {
				console.log('开始睡眠');
				await sleep(1500); // 休眠5秒
				console.log('休眠结束');
			},
			flushed(sn) {
				if (this.device_sn == "" || this.device_sn == null) {
					return;
				}
				uni.showLoading({
					title: '获取中，请稍候'
				});
				console.log('flushed设备详情>>>' + this.sessionId)
				var _this = this
				uni.request({
					method: 'get',
					url: config.baseUrl +
						'/app/index.php?i=1&j=1&c=entry&debugSkip=true&debug=1&isajax=1&m=wdl_shopping&do=wepay&sn=' +
						sn + '&state=' +
						_this
						.sessionId,
					success(res) {
						console.log('res>>>' + JSON.stringify(res))
						_this.goods = res.data.goods
						_this.port_list = res.data.port_list
						_this.fee_tpl = res.data.fee_tpl
						_this.data = res.data.data
						_this.params_sort = res.data.params_sort
						_this.oem_info = res.data.oem_info
						uni.hideLoading();
						// uni.showToast({
						// 	title: '因支付宝用户系统升级,若您的余额丢失,请进入右上角 个人中心 点击同步余额功能。给您造成了不便,深表歉意。',
						// 	duration: 3000
						// });

					},
					fail(res) {
						console.log(JSON.stringify(res))
						uni.hideLoading();
					},
					complete() {
						_this.dev_status_check();
						uni.hideLoading();
					}
				})
			},
			coupons() {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				//var url = config.baseUrl + "/app/index.php?i=1&j=1&c=entry&m=wdl_shopping&do=coupons&sn=" + this.goods.sn
				//
				console.log('coupons?>>>>>>')
				uni.navigateTo({
					url: '/pages/coupons/coupons?sn=' + this.goods.sn
				})
			},
			payOrder(recharge, award) {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					
					this.$refs.popupclose.open("center")
					return;
				}
				//console.log('>>>'+JSON.stringify(window.location.href) )
				if (this.processing) { // 判断是否在处理中
					return;
				}

				if (this.goods.weid === '0') {
					uni.showToast({
						title: '设备未绑定，请登录管理后台扫码绑定后再操作',
						icon: 'none'
					});
					return;
				}


				uni.showLoading({
					title: '支付发起中,请稍后'
				});
				uni.hideLoading();
				// setTimeout(function() {
				// 	uni.hideLoading();
				// }, 4000);
				this.processing = true;
				// uni.navigateTo({
				// 	url:'/pages/userrecharge/userrecharge?dev_id=' + this.goods.id + '&weid=' + this.goods.weid + '&recharge='+recharge+'&award='+award
				// })
				const url = config.baseUrl +
					"app/index.php?i=1&j=1&c=entry&do=recharge&m=wdl_shopping&alipay_mini=1" +
					"&dev_id=" + this.goods.id + "&weid=" + this
					.goods.weid + "&recharge=" + recharge + "&award=" + award + '&state=' + this.sessionId;

				const params = {
					recharge,
					award,
					callback: '', // 获取当前页面路径
					ajax: '1'
				};

				uni.request({
					url,
					data: params,
					method: 'get',
					success: (res) => {
						console.log('payOrder()>>res>>>' + JSON.stringify(res))
						this.processing = false;
						uni.hideLoading();
						if (res.data.rv == '1') {
							const is_third = res.data.is_third || '';
							if (is_third == 1) {
								// uni.navigateTo({
								// 	url:'/pages/userrecharge/userrecharge?src='+res.data.order.payUrl,
								// })
								uni.request({
									url: res.data.order.payUrl,
									method: 'get',
									success(res) {
										console.log('succ>>>' + JSON.stringify(res))
									},
									fail(res) {
										console.log('fail>>>>>>' + res)
									}
								})
							} else {
								this.tradePay(res.data.trade_no);
							}
						} else {

							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							uni.navigateBack({
								delta: 1 // 回退一级页面，如果当前页面是首页，将返回首页
							});
						}
					},
					fail: (error) => {
						this.processing = false;
						uni.hideLoading();
						console.error('请求出错:', error);
					},
					complete: () => {
						uni.hideLoading();
					},
					dataType: 'json'
				});
			},
			tradePay(trade_no) {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				var _this = this
				_this.canCZ()
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: trade_no, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						//刷新当前页面
						_this.flushed(_this.goods.sn);
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						_this.flushed(_this.goods.sn);
					}
				});
			},
			selectCF() {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				//充值
				var url = config.baseUrl + "api/dev_info.php?do=recharge_options_get&uid=" + this.goods.weid +
					'&region_id=' + this.goods.region_id + '&state=' + this.sessionId;
				uni.request({
					url,
					method: 'get',
					success: (res) => {
						console.log('selectCF>>' + JSON.stringify(res))
						this.recharge = res.data.list
						this.$refs.popup.open("bottom")
					}
				})

			},
			canCZ() {
				this.$refs.popup.close()
			},
			port_refresh() {
				
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.mycenter();
					// this.$refs.popupclose.open("center")
					return;
				}
				//刷新
				var _this = this
				const url = config.baseUrl + "api/devstate.php?do=dev_state_req_id&dev_id=" + _this.goods.id + '&state=' +
					_this.sessionId;

				if (_this.processing) {
					return;
				}

				uni.showLoading({
					title: '获取中，请稍候'
				});

				_this.processing = true;

				const param = {
					dev_id: _this.goods.id,
					sn: _this.goods.sn
				};

				uni.request({
					url,
					data: param,
					method: 'get',
					success: (res) => {
						_this.processing = false;
						console.log('刷新>>>' + JSON.stringify(res))
						setTimeout(() => {
							uni.hideLoading();
							// 假设当前在pages.json中定义了pages/index/index页面
							uni.redirectTo({
								url: '/pages/index/index'
							})

						}, 3000);
					},
					fail: (error) => {
						console.error(error);
						uni.hideLoading();
						uni.showToast({
							icon: 'error',
							title: '刷新失败'
						})
						_this.processing = false;
					}
				});
			},
			port_status_req() {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.mycenter();
					//this.$refs.popupclose.open("center")
					return;
				}
				const url = config.baseUrl + "api/devstate.php?do=dev_state_req_id&dev_id=" + this.dev.id + '&state=' +
					_this.sessionId;

				const param = {
					dev_id: this.goods.id,
					sn: this.goods.sn
				};

				uni.request({
					url,
					data: param,
					method: 'POST',
					success: (res) => {
						// 在这里处理响应
						console.log('' + res)
					},
					fail: (error) => {
						console.error(error);
					}
				});
			},
			dev_status_check() {

				var _this = this
				const dev_status_get_url = config.baseUrl + "api/dev_info.php?do=dev_status_check&state=" + _this
					.sessionId;

				const dev_status_get_param = {
					dev_id: _this.goods.id,
					title: _this.goods.title,
					type: _this.goods.type
				};
				console.log('dev_status_check>dev_status_get_param>>' + JSON.stringify(dev_status_get_url))
				try {
					const res = uni.request({
						url: dev_status_get_url,
						data: dev_status_get_param,
						method: 'GET',
						success(res) {
							console.log('dev_status_check>>' + JSON.stringify(res))
							if (res.data.rv == '1') {
								_this.dev_status_checked = 1;
								return;
							}

							if (res.data.rv == '0') {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
								return;
							}

							if (res.data.rv == '2') {
								_this.port_status_req();

								let get_count = 0;

								const timer = setInterval(async () => {
									const res = await uni.request({
										url: dev_status_get_url,
										data: dev_status_get_param,
										method: 'GET'
									});

									if (res[1].data.rv === '1') {
										clearInterval(timer);
										_this.dev_status_checked = 1;

										uni.hideLoading();
										uni.showToast({
											title: '设备查询成功,请选择套餐',
											icon: 'none'
										});
										return;
									}
									get_count++;
									if (get_count > 5) {
										clearInterval(timer);

										_this.dev_status_unavail = 1;

										uni.hideLoading();

										uni.showToast({
											title: '设备异常,请选择其他设备',
											icon: 'none'
										});
										return;
									}
								}, 4000);
							}
						}
					});
				} catch (error) {
					console.error(error);
				}
			},
			feedback() {
				//反馈问题
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				uni.navigateTo({
					url: '/pages/feedback/feedback?weid=' + this.goods.weid + '&state=' + this.sessionId
				})



			},
			channel_select(port_id, status) {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				//选择插座
				if (status == 1) {
					//空闲
					for (let ports of this.port_list) {
						console.log('port_' + port_id)
						if (ports.port_id == port_id) {
							console.log('port_>>' + port_id)
							if (this.selectedNum != port_id) {
								this.selectedNum = port_id
								console.log('selectedNum>' + this.selectedNum)
								//保险弹框
								this.onShowBtn()
							} else {
								this.selectedNum = ''
							}
						}
					}
					if (this.selectedNum == '') {
						this.total = ''
					}
				} else {
					//非空闲不可用
					uni.showToast({
						title: '端口' + port_id + '不可用，请重新选择',
						icon: 'error'
					})
				}
			},

			selectmenu(mny) {
				//选择套餐
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				console.log('mny>>' + JSON.stringify(mny))
				var channel = this.selectedNum

				if (channel == "") {
					uni.showToast({
						title: '请先选择端口',
						icon: 'error'
					})
					return false;
				}
				console.log('.params_sort>' + JSON.stringify(this.params_sort))
				if (this.total == mny) {
					this.total = ''
				} else {
					this.total = mny
				}
				var total_int = parseInt(this.total);
				var balance = parseInt(this.balance);
				console.log('mny>>' + JSON.stringify(mny))
				if (1 == this.fee_tpl.pay_mode) {
					if (total_int > balance) {
						uni.showToast({
							icon: 'error',
							title: '请先充值使用充值余额支付'
						});
						return false;
					}
				}

			},
			showTip() {
				//计费模型展示
				this.tip_panel_show = !this.tip_panel_show
			},
			isempty(item) {
				//判断工具
				if (item == 0 || item == '' || item == null) {
					return true;
				} else {
					return false;
				}
			},
			getStatus(status) {
				//选择端口

				const port = this.ports.find(p => p.id == status);
				return port ? port.status : '未知状态'; // 如果找不到对应的端口，返回'未知状态'
			},
			getFeeType(type) {
				const feeType = this.fee_type_names.find(f => f.type == type);
				return feeType ? feeType.name : '未知状态'; // 如果找不到对应的端口，返回'未知状态'
			},
			goToCenter() {
				// 跳转至个人中心的逻辑
			},
			mycenter() {
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					console.log("not login 进入登录页面");
					//this.mycenter();
					// this.$refs.popupclose.open("center")
					uni.redirectTo({
						url: '/pages/auth/auth'
					})
					return;
				}
				let oid = 1
				if (!this.isempty(this.oem_info.uid) && !this.isempty(this.oem_info.mp_permit)) {
					oid = this.oem_info.uid
				}
				uni.navigateTo({
					url: '/pages/user/user?&oid=' + oid + '&sessionid=' + this.sessionId
				})


			},
			customers() {
				// 联系客服的逻辑
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				var _this = this
				uni.request({
					method: 'get',
					url: config.baseUrl + "api/dev_info.php?do=customer_service&uid=" + _this.goods.weid +
						'&region_id=' + _this.goods.region_id + '&state=' + _this.sessionId,
					success(res) {
						console.log(JSON.stringify(res.data))
						if (res.data.rv == 1) {
							_this.telephone = res.data.msg
							_this.$refs.alertDialog.open("center")
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					},
					fail(res) {
						console.log(res)
					}

				})

			},
			close() {
				this.$refs.alertDialog.close()
			},
			selectPackage(pe) {
				// 选择套餐的逻辑
				this.selectedPackage = pe;
			},
			startCharging() {

				console.log('...111')
				if (this.sessionId == 'we7sid-' || this.sessionId == '') {
					this.$refs.popupclose.open("center")
					return;
				}
				// 开始充电的逻辑
				// uni.showToast({
				// 	title: '充电开始',
				// 	icon: 'success'
				// });

				if (this.starting == true) {
					return false;
				}

				if (this.goods.weid == '0') {
					uni.showToast({
						title: '设备未绑定，请登录管理后台扫码绑定后再操作',
						icon: 'none'
					});
					return false;
				}


				if (this.selectedNum == "") {
					uni.showToast({
						title: '请选择端口',
						icon: 'none'
					});
					return false;
				}

				if (this.total == '') {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none'
					});
					return false;
				}

				if (this.dev_status_unavail == 1) {
					uni.showToast({
						title: '设备异常,请选择其他设备',
						icon: 'none'
					});
					return false;
				}


				if (this.dev_status_checked == 0) {
					uni.showToast({
						title: '查询设备中,请稍候',
						icon: 'none'
					});
					return false;
				}

				if (!this.selectedNum || !this.total) {
					uni.showToast({
						title: '请选择插座和套餐',
						icon: 'none'
					});
					return;
				}


				//0611:转到H5支付
				uni.navigateTo({
					url: '/pages/rechargepay/rechargepay?id=' + this.goods.id + '&sn=' + this.goods.sn +
						'&title=' + this.goods.title + '&total=' + this.total + '&channel=' + this.selectedNum +
						'&sessionid=' + this.sessionId
				})

			},
			full_to_stop(balance, fee) {
				this.total = ''
				let surplus = parseInt(balance);
				if (surplus === 0) {
					uni.showToast({
						title: '余额为0,请充值',
						icon: 'none'
					});
					return;
				}

				const channel = this.selectedNum; // 假设这是获取渠道值的方法

				if (!channel) {
					uni.showToast({
						title: '请先选择端口',
						icon: 'none'
					});
					return;
				}

				const dev_status_unavail = this.dev_status_unavail; // 假设这是获取设备状态值的方法
				if (dev_status_unavail === 1) {
					uni.showToast({
						title: '设备异常,请选择其他设备',
						icon: 'none'
					});
					return;
				}

				const dev_status_checked = this.dev_status_checked; // 假设这是获取设备状态检查值的方法
				if (dev_status_checked === 0) {
					uni.showLoading({
						mask: true,
						title: '查询设备中,请稍候'
					});
					return;
				}

				if (this.processing) {
					return;
				}
				console.log('surplus>>' + surplus + '<><>' + fee)
				if (surplus >= fee) {
					surplus = fee;
				} else {
					uni.showToast({
						title: '充满自停将预扣费' + fee + '元,余额不足,请先点击上方充值',
						icon: 'none'
					});
					return;
				}

				const msg = '充满自停将预扣费' + fee + '元, 充电结束后退回多余的余额,请确认';
				uni.showModal({
					title: '操作确认',
					content: msg,
					success: (res) => {
						if (res.confirm) {
							this.processing = true;
							this.doPostRequest(channel, fee);
						} else if (res.cancel) {
							// 取消操作
						}
					}
				});
			},
			doPostRequest(channel, surplus) {
				
				// 这里是发送充满自停请求
				uni.showLoading({
					mask: true,
					title: '请稍候'
				});
				console.log('dev_id>>' + this.goods.id)
				console.log('channel>>' + channel)
				console.log('total>>' + surplus)
				var _this = this;
				// const url = config.baseUrl + 'app/index.php?i=1&j=1&c=auth&a=devstart&do=dev_full_to_stop&dev_id=' +
				// 	_this.goods.id + '&state=' + _this.sessionId
				//console.log('dev_full_to_stop>>>' + url)
				const params = {
					'channel': channel,
					'total': surplus
				};
				console.log('充满自停>>>'+config.baseUrl+'app/index.php?i=1&j=1&c=auth&a=devstart&do=dev_full_to_stop&dev_id=' +_this.goods.id + '&state=' + _this.sessionId)
				console.log('canshu>>'+JSON.stringify(params))
				
				uni.request({
					url: config.baseUrl+'app/index.php?i=1&j=1&c=auth&a=devstart&do=dev_full_to_stop&alipay=1&dev_id=' +
						_this.goods.id + '&state=' + _this.sessionId,
					method: 'get',
					data: params,
					success: (res) => {
						uni.hideLoading()
						console.log('doPostRequest>>' + JSON.stringify(res))
						_this.processing = false;
						if (res.data.rv === '1') {
							uni.showToast({
								title: res.data.msg
							});
							setTimeout(() => {
								_this.showmp(surplus)
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						} 
					},
					fail: (err) => {
						console.error('请求失败:', err);
						uni.hideLoading()
						_this.processing = false;
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});

					},
					complete() {
						_this.processing = false
						uni.hideLoading()
					}
				});
			
			},
			showmp(surplus) {
				//启动完成跳转,
				uni.navigateTo({
					url: '/pages/showmp/showmp?oid=1&total=' + surplus + '&dev_id=' + this.goods.id + "&sn=" + this
						.device_sn + "&state=" + this.sessionId,
				})

			},
			formatDate(time) {
				let date = new Date(time * 1000);
				let year = date.getUTCFullYear();
				let month = date.getUTCMonth() + 1;
				let day = date.getUTCDate();
				let hours = date.getUTCHours();
				let minutes = date.getUTCMinutes();
				let seconds = date.getUTCSeconds();
				// 为了使结果更加易读，可以对月、日、小时、分钟和秒进行补零操作
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		}
	};
</script>

<style scoped>
	/*  */

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.info-pane {
		padding: 0px 8px;
		font-size: 15px;
		margin-top: 49px
	}

	.ct-panel {
		display: flex;
		padding: 5px 2px 0px 8px;
	}

	.ct-ck {
		text-align: right;
		font-weight: bold;
		position: relative;
		padding-right: 40px;
	}

	.ct-ck:after {
		content: " ";
		display: inline-block;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		height: 9px;
		width: 9px;
		border-width: 2px 2px 0 0;
		border-color: #247aff;
		border-style: solid;
		position: absolute;
		right: 11px;
		top: 5px;
	}

	.ct-ck1:after {
		-webkit-transform: rotate(315deg);
		transform: rotate(315deg);
		top: 12px;
	}

	.tip-panel {
		border-top: 1px #AEAEAE solid;
		display: none;
		padding-left: 8px;
	}

	/*  */
	.kt {
		position: fixed;
		right: 0px;
		top: 45px;
		width: 60px;
		/* border: 1px #089BFB solid; */
		z-index: 999;
		border-radius: 30px 0px 0px 30px;
		padding: 5px;
		background-color: #ffffff;
		box-shadow: -2px 2px 6px #939a9e;
	}

	.kt-ic {
		color: #089BFB;
	}

	.kt-f {
		font-size: 11px;
		text-align: center;
		color: #089BFB;
	}

	.cz-po {
		display: none;
		z-index: 1001;
		width: 95%;
		/* height: 200px; */
		border-radius: 5px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0px;
		background-color: #ffffff;
		margin: auto;
		padding: 10px 8px 81px 8px;
	}

	.kt-po {
		display: none;
		z-index: 1001;
		width: 80%;
		height: 200px;
		border-radius: 5px;
		position: fixed;
		left: 0;
		right: 0;
		top: 12px;
		bottom: 0;
		background-color: #ffffff;
		margin: auto;
		padding: 8px;
	}

	.cz-po-cs {
		margin-top: 20px;
		text-align: center;
		color: #ff8c56;
		bottom: 12px;
		/* margin: auto; */
		right: 0px;
		left: 0px;
		font-size: 18px;
		width: 100%;
		height: 50px;
	}

	.kt-po-cs {
		text-align: center;
		color: #ff8c56;
		position: absolute;
		bottom: 12px;
		margin: auto;
		right: 0px;
		left: 0px;
		font-size: 18px;
		padding-top: 8px;
	}

	.kt-po-ft {
		color: #089BFB;
		padding: 10px;
		border-bottom: 1px #ddd solid;
	}

	.bk-mk {
		position: fixed;
		top: 0px;
		right: 0px;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: #565656;
		filter: alpha(Opacity=80);
		-moz-opacity: 0.5;
		opacity: 0.5;
		display: none;
	}

	.gg-phone {
		margin: auto;
		box-sizing: border-box;
		position: relative;
		display: block;
		width: 22px;
		height: 22px;
		transform: scale(var(--ggs, 1))
	}

	.gg-phone::after,
	.gg-phone::before {
		content: "";
		display: block;
		box-sizing: border-box;
		position: absolute
	}

	.gg-phone::after {
		width: 18px;
		height: 18px;
		border-top-left-radius: 1px;
		border-bottom-right-radius: 1px;
		border-bottom-left-radius: 12px;
		border-left: 4px solid;
		border-bottom: 4px solid;
		left: 2px;
		bottom: 0px;
		background:
			linear-gradient(to left,
				currentColor 10px,
				transparent 0) no-repeat right 11px/6px 4px,
			linear-gradient(to left,
				currentColor 10px,
				transparent 0) no-repeat -1px 0/4px 6px
	}

	.gg-phone::before {
		width: 20px;
		height: 20px;
		border: 6px double;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
		border-radius: 50%;
		transform: rotate(-45deg);
		bottom: 0px;
		left: 2px
	}

	/*  */
	.options-panel {
		/* background: #ffffff; */
		overflow: hidden;
	}

	.each-option {
		position: relative;
		float: left;
		padding: 5px 0px;
		width: 18%;
		box-sizing: border-box;
		border: 0px red solid;
		text-align: center;
		color: #2A2A2A;
		border-radius: 5px;
		margin: 1%;
		height: 58px;
	}

	.item {
		border-radius: 5px;
		height: 65px;
		background-color: #F2F7FF;
		display: grid;
		align-content: space-around;
		justify-items: center;
	}

	.item-busy {
		color: #FF7D12;
		background-color: #FFF3E9;
	}

	.item-zt {
		color: #959595;
		background-color: #F9F9F9;
	}

	.item-disable {
		color: #FF4747;
		background-color: #FFF0F0;
	}

	.item-number {
		font-size: 18px;
		line-height: 23px;
		padding-top: 5px;
	}

	.item-status {
		font-size: 14px;
		line-height: 20px;
		padding-top: 1px;
	}

	.item-selected {
		color: #1B7BFF !important;
		background: #EDF4FF;
		border: 1px #1B7BFF solid !important;
		height: 58px;
		position: relative;
		margin: 0 auto;
		text-align: center;
		background-color: #fff;
	}

	.item-selected:before {
		content: '';
		position: absolute;
		right: -1px;
		bottom: -1px;
		border: 12px solid #089BFB;
		border-top-color: transparent;
		border-left-color: transparent;
		border-radius: 0px 0px 7px 0px;
	}

	.item-selected:after {
		content: '';
		width: 2px;
		height: 6px;
		position: absolute;
		right: 3px;
		bottom: 4px;
		border: 2px solid #fff;
		border-top-color: transparent;
		border-left-color: transparent;
		transform: rotate(45deg);
	}

	/*  */
	.each-tc {
		position: relative;
		float: left;
		width: 29.333333333%;
		box-sizing: border-box;
		border: 0px red solid;
		text-align: center;
		color: #2A2A2A;
		border-radius: 5px;
		margin: 2%;
	}

	.item-tc {
		border-radius: 5px;
		height: 40px;
		background-color: #ffffff;
		/* border: 1px #AEAEAE solid; */
	}

	.item-tc-nr {
		font-size: 15px;
		line-height: 40px;
		border-radius: 5px;
	}

	/*  */
	.confirm-panel {
		background-color: #ffffff;
		border-radius: 0px 0px 5px 5px;
		padding: 5px 0px 24px 0px;
		position: fixed;
		bottom: 0px;
		width: 100%;
	}

	.confirm-btn {
		margin: 0 auto;
		width: 93%;
		height: 50px;
		text-align: center;
		font-size: 17px;
		color: #ffffff;
		background-color: #089BFB;
		line-height: 50px;
		border-radius: 7px;
	}

	/* */
	.cz-panel {
		display: flex;
		background-color: #ffffff;
		padding: 8px;
		border-radius: 5px;
		margin-left: 110px;
	}

	.cz-btn {
		width: 71px;
		height: 28px;
		text-align: center;
		font-size: 14px;
		color: #ffffff;
		background-color: #089BFB;
		line-height: 19px;
		border-radius: 20px;
	}

	.fz1 {
		flex: 1;
		line-height: 28px;
	}

	.fz2 {
		flex: 2;
		line-height: 40px;
	}

	.fz3 {
		flex: 3;
		line-height: 40px;
	}

	/*  */

	.bot {
		text-align: center;
		height: 50px;
		line-height: 45px;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		width: 100%;
		background-color: #ffffff;
		color: #636363;
		display: flex;
	}

	.gg-clipboard {
		box-sizing: border-box;
		position: relative;
		display: block;
		transform: scale(var(--ggs, 1));
		width: 18px;
		height: 18px;
		border: 2px solid;
		border-radius: 2px;
		margin: auto;
	}

	.gg-clipboard::after,
	.gg-clipboard::before {
		content: "";
		display: block;
		box-sizing: border-box;
		position: absolute;
		border-radius: 2px;
		width: 10px;
		left: 2px
	}

	.gg-clipboard::before {
		border: 2px solid;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		top: -2px;
		height: 6px
	}

	.gg-clipboard::after {
		height: 2px;
		background: currentColor;
		box-shadow: 0 -4px 0 0;
		bottom: 2px
	}

	.cl-f {
		font-size: 12px;
		line-height: 26px;
	}

	.cl-it {
		padding: 5px;
		color: #636363;

	}

	.cl-gx {
		background-color: #59bdff;
		color: #ffffff;
		line-height: 50px;
	}

	.ph {
		width: 18px;
		height: 18px;
	}

	a {
		text-decoration: none;
		color: #000000;
	}

	.options_panel_recharge {
		margin-top: 7px;
		border-radius: 8px 8px 0px 0px;
		background: #ffffff;
		padding: 7px;
		overflow: hidden;
	}

	.each_option_recharge {
		position: relative;
		float: left;
		padding: 5px 0px;
		width: 31.3333333%;
		box-sizing: border-box;
		border: 0px red solid;
		text-align: center;
		color: #2A2A2A;
		border-radius: 5px;
		margin: 1%;
		height: 72px;
	}

	.tip-panel-all {
		position: fixed;
		border: 2px solid #636363;
		border-radius: 8px;
		z-index: 1002;
		background-color: #000000;
		filter: alpha(opacity=50);
		/* IE */
		-moz-opacity: 0.5;
		/* Moz + FF */
		opacity: 0.5;
	}

	.tip-panel-zf {
		width: 103px;
		height: 55px;
		top: 46px;
		right: 14px;
	}

	.tip-panel-gx {
		width: 189px;
		height: 58px;
		bottom: 67px;
		right: 13px;
	}

	.tip-panel-bor-all {
		width: 0px;
		height: 0;
		position: relative;
	}

	.tip-panel-bor {
		border: 17px solid transparent;
		border-bottom-color: #000000;
		top: -29px;
		left: 60px;
	}

	.tip-panel-bor-gx {
		border: 12px solid transparent;
		border-top-color: #000000;
		top: 60px;
		left: 108px;
	}

	.tip-panel-text-all {
		position: relative;
		text-align: center;
		color: #ffffff;
	}

	.tip-panel-text {
		top: -30px;
		left: 0px;
		font-size: 15px;
	}

	.tip-panel-text-gx {
		top: -22px;
		left: 1px;
	}


	@-webkit-keyframes bounce-down {
		25% {
			-webkit-transform: translateY(-5px);
		}

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

		75% {
			-webkit-transform: translateY(5px);
		}
	}

	@keyframes bounce-down {
		25% {
			transform: translateY(-5px);
		}

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

		75% {
			transform: translateY(5px);
		}
	}

	.animate-bounce-down {
		-webkit-animation: bounce-down 1.2s linear infinite;
		animation: bounce-down 1.2s linear infinite;
	}

	@-webkit-keyframes bounce-down-gx {
		25% {
			-webkit-transform: translateY(5px);
		}

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

		75% {
			-webkit-transform: translateY(-5px);
		}
	}

	@keyframes bounce-down-gx {
		25% {
			transform: translateY(5px);
		}

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

		75% {
			transform: translateY(-5px);
		}
	}

	.animate-bounce-down-gx {
		-webkit-animation: bounce-down-gx 1.2s linear infinite;
		animation: bounce-down-gx 1.2s linear infinite;
	}


	/*  */
	.head {
		text-align: center;
		height: 45px;
		line-height: 45px;
		box-shadow: 0 1px 1px 1px #eee;
		background: #fff;
		position: fixed;
		left: 0;
		top: 44px;
		z-index: 1;
		width: 100%;
		color: #000;
	}

	#header-content1 {
		height: 30px;
		float: left;
		background-color: #FFF;
		border-radius: 20px;
		position: absolute;
		/* left: 5%; */
		top: 6px;
		line-height: 30px;
		padding-left: 16px;
		font-size: 14px;
	}

	#header-score1 {
		border-radius: 40px;
		padding: 0px 10px;
	}

	.head {
		text-align: center;
		height: 45px;
		line-height: 45px;
		box-shadow: 0 1px 1px 1px #eee;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		color: #000;
	}

	.pay-btn {
		background-color: #ffffff;
		border: 1px solid #ffffff;
		height: 100%;
		width: 100%;
		font-size: 18px;
		border-radius: 11px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		padding: 5px 0px;
		box-shadow: 1px 1px 8px #e0e0e8;

	}

	.weui-flex1 {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}

	.weui-flex3 {
		-webkit-box-flex: 3;
		-webkit-flex: 3;
		flex: 3;
	}

	.pay-btn:active {
		background-color: #eceef2;
		border-radius: 11px;
		outline: none;
		color: #ffffff;
	}

	.pay-btn-content {
		padding: 5px 5px;
	}

	a {
		color: #1677ff;
		text-decoration: none;
	}

	.relod-btn {
		border: 1px solid #1677ff;
		color: #1677ff;
	}

	body,
	html {
		background: #efeff4;
	}

	#header_integral_text {
		height: 20px;
		padding-top: 15px;
		padding-right: 15px;
		line-height: 20px;
		font-weight: bold;
		color: #1677ff;
		font-size: 14px;
		display: inline-flex;
	}

	.applyCouponsClass {
		margin-left: 80vw;
		color: #008eff;
		font-size: 14px;
		font-weight: bold;
		position: absolute;
	}

	.coupone_wrap {
		margin-top: 200px;
	}

	.coupon_btn {
		width: 100%;
		height: 50px;
		text-align: center;
		margin-top: 100px;
	}
</style>
<style lang="scss" scoped>
	.icon {
		width: 30px;
		height: 30px;
	}

	.item-number-p {
		display: flex;
		color: #1296db;
		font-size: 18px;
		font-weight: 700;
		padding-top: 5px;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.item-status-p {
		color: #f33e3e;
		;
		font-size: 14px;
		line-height: 20px;
		padding-top: 1px;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.guide-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.15);
		z-index: 1000;
		align-content: space-around;
		justify-content: center;
	}

	@keyframes shake {
		0% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-3px);
		}

		50% {
			transform: translateX(3px);
		}

		75% {
			transform: translateX(-3px);
		}

		100% {
			transform: translateX(3px);
		}
	}

	.shake-animation {
		display: inline-block;
		animation: shake 0.8s;
		/* 调整时间可以控制动画的速度 */
		animation-iteration-count: infinite;
		/* 让动画无限循环 */
		font-size: larger;
		font-weight: 600;
		color: #3f00ff;
		margin-top: 20px;
	}
</style>