chuangte_bike_newxcx/page_user/luru/bind_mac.vue

<template>
	<view class="page">
		<u-navbar title="添加设备" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
			height='50' :custom-back="btnfh"></u-navbar>
		<view class="iptbox" @click="backpage()">

			<input type="text" class="ips" v-model="mac" placeholder=" " style="margin-left: 32rpx;" disabled
				placeholder-class="my-placeholder" />
			<view class="iconfont icon-xiangyou1 ">

			</view>

		</view>
		<view class="iptbox">
			<view class="qrcode" @click="qrcode()">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
			</view>
			<input type="text" class="ips" v-model="sn" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
				placeholder-class="my-placeholder" />
		</view>
		<!-- <view class="iptbox" @click="kashow=true">
			<view class="" v-if="kaname">
				卡商：{{kaname}}
			</view>
			<view class="" v-else>
				请点击选择卡商
			</view>
		</view> -->
		<!-- <u-select v-model="kashow" :list="kalist" title='选择卡商' @confirm="confirmka"></u-select> -->
		<view class="hardware-block">
			<view class="iptbox iptbox--hw-line" style="margin-top: 0rpx;" @click="openHardwarePicker">
				<view v-if="hardwareInfo.version">硬件：{{ hardwareInfo.version }}</view>
				<view v-else>请点击选择版本</view>
			</view>
			<view class="hardware-block__intro" v-if="hardwareInfo.version && hardwareInfo.instructions">
				<text class="hardware-block__intro-label">介绍：</text>
				<text class="hardware-block__intro-text">{{ hardwareInfo.instructions }}</text>
			</view>
		</view>
		
		<u-mask :show="show" :z-index="100" @click="show = false" />
		<view v-if="show" class="hw-picker-sheet" @click.stop>
			<view class="hw-picker__toolbar">
				<text class="hw-picker__tb-side" @click="show = false">取消</text>
				<text class="hw-picker__tb-title">选择硬件</text>
				<view class="hw-picker__tb-spacer" />
			</view>
			<scroll-view
				scroll-y
				class="hw-picker__scroll"
				:show-scrollbar="true"
			>
				<view
					v-for="(row, idx) in list"
					:key="row.value + '-' + idx"
					class="hw-picker__row"
					@click="onPickHardwareItem(idx)"
				>
					<view class="hw-picker__row-line">
						<text v-if="row.ver" class="hw-picker__ver">{{ row.ver }}</text>
						<text v-if="row.rest" class="hw-picker__rest">
							{{ row.ver ? ' ' : '' }}{{ row.rest }}
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="device-and-apn-card">
			<view class="device-telemetry--grid">
				<view
					v-for="(gRow, ri) in telemetryLayoutRows"
					:key="ri"
					:class="gRow.kind === 'full' ? 'device-telemetry__grid-row device-telemetry__grid-row--full' : 'device-telemetry__grid-row'"
				>
					<template v-if="gRow.kind === 'pair'">
						<view
							v-for="(cell, ci) in gRow.cells"
							:key="ci"
							class="device-telemetry__cell"
							:class="{ 'device-telemetry__cell--has-coeff': cell.isCoeff }"
						>
							<view v-if="cell.isCoeff" class="device-telemetry__apn-line">
								<view class="device-telemetry__apn-line-main">
									<text class="device-telemetry__k">系数：</text>
									<text class="device-telemetry__v device-telemetry__v--apn-inline">{{ cell.value }}</text>
								</view>
								<view class="device-telemetry__apn-edit" @click="openCoeffDialog">修改</view>
							</view>
							<view v-else class="device-telemetry__pair-cell-inner">
								<text class="device-telemetry__k">{{ cell.label }}：</text>
								<text class="device-telemetry__v">{{ cell.value }}</text>
							</view>
						</view>
					</template>
					<view v-else class="device-telemetry__cell device-telemetry__cell--full">
						<!-- 定位：与 APN 同排横条样式，整行一列、长文省略，无侧栏按钮 -->
						<view
							v-if="gRow.label === '定位'"
							class="device-telemetry__apn-line device-telemetry__loc-line"
						>
							<view class="device-telemetry__apn-line-main">
								<text class="device-telemetry__k">定位：</text>
								<text class="device-telemetry__v device-telemetry__v--apn-inline">{{ gRow.value }}</text>
							</view>
						</view>
						<!-- APN：值过长省略，「修改」固定右侧整行一直展示 -->
						<view
							v-else-if="gRow.label === 'APN'"
							class="device-telemetry__apn-line"
						>
							<view class="device-telemetry__apn-line-main">
								<text class="device-telemetry__k">APN：</text>
								<text class="device-telemetry__v device-telemetry__v--apn-inline">{{ gRow.value }}</text>
							</view>
							<view class="device-telemetry__apn-edit" @click="openApnDialog">修改</view>
						</view>
						<view v-else>
							<text class="device-telemetry__k">{{ gRow.label }}：</text>
							<text class="device-telemetry__v">{{ gRow.value }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="page-bottom-dock">
			<view class="apn-below-actions" @click.stop>
				<view class="apn-below-actions__btns">
					<view class="btn1" @click="btnfh">返回</view>
					<view class="btn1" @click="findDevice()">连接</view>
					<view class="btn1" @click="qrcode">扫码</view>
				</view>
			</view>
			<view class="btn-bind btn-bind--full" @click="bind()">确认添加</view>
			<view class="bot_btn bot_btn--grid" style="gap:2rpx;padding-bottom:0;">
				<view style="width:18%;margin-top:10rpx;" class="btn1" @click="ring()">响铃</view>
				<view style="width:18%;margin-top:10rpx;" class="btn1" @click="open()">开锁</view>
				<view style="width:18%;margin-top:10rpx;" class="btn1" @click="close()">关锁</view>
				<view style="width:18%;margin-top:10rpx;" class="btn1" @click="shaoru">烧录</view>
				<view style="width:18%;margin-top:10rpx;" class="btn1" @click="reboot()">重启</view>
				<!-- <view class="btn1" @click="Binddevice()" v-if="isbands">接口响铃</view> -->
			</view>
		</view>
		<u-mask :show="showApnModal" :z-index="102" @click="showApnModal = false" />
		<view class="apn_box" v-if="showApnModal" @click.stop>
			<view class="top">
				<view class="tip">设置 APN</view>
				<view class="apn_ipt">
					<textarea
						v-model="apnInput"
						class="apn_ipt__field"
						:auto-height="false"
						:maxlength="200"
						:show-confirm-bar="false"
						placeholder="请输入 APN"
						placeholder-class="apn-placeholder"
					/>
				</view>
			</view>
			<view class="bots">
				<view class="bot_left" @click="showApnModal = false">取消</view>
				<view class="bot_right" @click="submitApn">确定</view>
			</view>
		</view>
		<u-mask :show="showCoeffModal" :z-index="103" @click="showCoeffModal = false" />
		<view class="apn_box coeff_box" v-if="showCoeffModal" @click.stop>
			<view class="top">
				<view class="tip">设置系数</view>
				<view class="coeff-modal-hint">新系数 = 设置电压 ÷ 现电压 × 现系数</view>
				<view class="coeff-modal-readonly">
					<view class="coeff-modal-row">
						<text class="coeff-modal-k">现电压</text>
						<text class="coeff-modal-v">{{ coeffModalBatDisplay || '（暂无）' }}</text>
					</view>
					<view class="coeff-modal-row">
						<text class="coeff-modal-k">现系数</text>
						<text class="coeff-modal-v">{{ coeffModalXsDisplay || '（暂无）' }}</text>
					</view>
					<view class="coeff-modal-row">
						<text class="coeff-modal-k">设置电压</text>
						<input
							v-model="coeffSetVoltageInput"
							class="coeff-modal-input"
							type="digit"
							placeholder="默认 50"
						/>
					</view>
					<view v-if="previewCoeffToSend" class="coeff-modal-row">
						<text class="coeff-modal-k">将下发</text>
						<text class="coeff-modal-v coeff-modal-v--em">{{ previewCoeffToSend }}</text>
					</view>
				</view>
			</view>
			<view class="bots">
				<view class="bot_left" @click="showCoeffModal = false">取消</view>
				<view class="bot_right" @click="submitCoeff">确定</view>
			</view>
		</view>
		<u-mask :show="showbind" :z-index='100' />
		<view class="tip_box" v-if="showbind">
			<view class="top" v-if="showbind">
				<view class="tip">
					操作提示
				</view>
		
				<view class="ipt_box" style="justify-content: center;">
					<view class="text" style="width: 80%;text-align: center;">
						该mac号已有绑定sn码是否修改为当前sn码
					</view>
		
				</view>
		
			</view>
			<view class="bots">
				<view class="bot_left" @click="showbind=false ">
					取消
				</view>
				<view class="bot_right" @click="changeBind()">
					确定
				</view>
			</view>
		</view>
		<!-- <view class="bot">
			<view class="btn">
				退款
			</view>
		</view> -->
	</view>
</template>

<script>
	const app = getApp();
	var xBlufi = require("@/components/blufi/xBlufi.js");
	let _this = null;
	export default {
		data() {
			return {
				devicesarr:[],
				devicesList: [
					// {name:'110000',
					// mac:'11111'}
				],
				searching: false,
				texts: '正在扫描蓝牙设备...',
				btnflag: true,
				tishiflag: false,
				option: '',
				bluthlist: [], //蓝牙数组
				// status: 'loading',
				statusflag: false,
				Bluetoothmac: '',
				mac: '',
				ishave: false,
				ver_data: null,
				deviceInfoss: {},
				gps: {},
				isband: false,
				// status: false,
				deviceIds: '',
				name: '',
				orderinfo: {},
				dl: 0,
				czmoney: true,
				iscz: true,
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				sn: '',
				carstause: false,
				isbands: false,
				show: false,
				list: [],
				hwPickerActiveIndex: 0,
				hardwareVersionId: '',
				hardwareInfo: {},
				showbind:false,
                deviceid:'',
                kalist:[],
				kashow:false,
				kaname:'',
				kaid:'',
				deviceDataPairs: [],
				apnDisplay: '',
				showApnModal: false,
				apnInput: '',
				/* 系数弹窗：设置电压默认 50，下发 11bxs{值}@ */
				showCoeffModal: false,
				coeffSetVoltageInput: '50'

			}
		},
		onLoad(e) {
			xBlufi.notifyStartDiscoverBle({
				'isStart': true
			})
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
			this.mac = e.mac
			if (e.sn != null && String(e.sn).trim() !== '') {
				this.sn = String(e.sn).trim()
			}
			this.findDevice()
			this.isbands = false
			this.carstause = false
		},
		onShow() {
			this.getlist()
			this.getka()
		},
		watch: {

		},
		computed: {
			/** 设备推送解析后的 name:value 映射（name 已 toLowerCase；系数字段为 xs，APN 为 apn） */
			deviceDataMap() {
				const map = {}
				if (this.deviceDataPairs && this.deviceDataPairs.length) {
					this.deviceDataPairs.forEach((p) => {
						if (p && p.name) map[p.name.toLowerCase()] = p.value
					})
				}
				return map
			},
			coeffModalBatDisplay() {
				return this.formatDeviceBatText(this.deviceDataMap['bat'])
			},
			coeffModalXsDisplay() {
				return this.formatDeviceCoeffText(this.pickCoeffRaw(this.deviceDataMap))
			},
			/** 根据设置电压预览将下发的系数（用于弹窗展示） */
			previewCoeffToSend() {
				const map = this.deviceDataMap
				const curV = this.parseNumericBat(map['bat'])
				const curXs = this.parseNumericCoeff(this.pickCoeffRaw(map))
				const setV = parseFloat(String(this.coeffSetVoltageInput || '').trim())
				if (!isFinite(setV) || setV <= 0) return ''
				if (!(curV > 0) || !isFinite(curXs)) return ''
				const n = (setV / curV) * curXs
				return this.formatXsForBluetooth(n)
			},
			// 电门/状态、网络/卫星、电压/系数 为两列；定位、APN 各独占一行（先定位后 APN）
			telemetryLayoutRows() {
				const map = this.deviceDataMap
				let statusVal = map['status']
				if (statusVal === undefined || statusVal === null || statusVal === '') {
					statusVal = map['statue']
				}
				const coeffRaw = this.pickCoeffRaw(map)
				const apnStr =
					this.apnDisplay != null && String(this.apnDisplay).trim() !== ''
						? String(this.apnDisplay).trim()
						: ''
				const loc = this.formatDeviceLocation(map['lat'], map['lon'])
				return [
					{
						kind: 'pair',
						cells: [
							{ label: '电门', value: this.formatDeviceDoorText(map['q']) },
							{ label: '状态', value: this.formatDeviceStatusText(statusVal) }
						]
					},
					{
						kind: 'pair',
						cells: [
							{ label: '网络', value: this.fmtStr(map['csq']) },
							{ label: '卫星', value: this.fmtStr(map['s']) }
						]
					},
					{
						kind: 'pair',
						cells: [
							{ label: '电压', value: this.formatDeviceBatText(map['bat']) },
							{ label: '系数', value: this.formatDeviceCoeffText(coeffRaw), isCoeff: true }
						]
					},
					{ kind: 'full', label: '定位', value: loc },
					{ kind: 'full', label: 'APN', value: apnStr }
				]
			}
		},
		methods: {
			/** 系数字段：推送为 xs；兼容旧名 */
			pickCoeffRaw(map) {
				if (!map) return undefined
				return map['xs'] ?? map['coeff'] ?? map['coff'] ?? map['ratio'] ?? map['coefficient'] ?? map['系数'] ?? map['k']
			},
			parseNumericBat(raw) {
				if (raw === undefined || raw === null || raw === '') return NaN
				const s = String(raw).trim()
				const numStr = s.replace(/V$/i, '').trim()
				return parseFloat(numStr)
			},
			parseNumericCoeff(raw) {
				if (raw === undefined || raw === null || raw === '') return NaN
				return parseFloat(String(raw).trim())
			},
			/** 蓝牙 11bxs 中的数值字符串 */
			formatXsForBluetooth(n) {
				if (!isFinite(n)) return ''
				if (Math.abs(n - Math.round(n)) < 1e-8) return String(Math.round(n))
				const r = Math.round(n * 10000) / 10000
				return String(r)
			},
			openCoeffDialog() {
				this.coeffSetVoltageInput = '50'
				this.showCoeffModal = true
			},
			submitCoeff() {
				const map = this.deviceDataMap
				const curV = this.parseNumericBat(map['bat'])
				const curXs = this.parseNumericCoeff(this.pickCoeffRaw(map))
				const setV = parseFloat(String(this.coeffSetVoltageInput || '').trim())
				if (!isFinite(setV) || setV <= 0) {
					uni.showToast({ title: '请输入有效的设置电压', icon: 'none' })
					return
				}
				if (!(curV > 0)) {
					uni.showToast({ title: '暂无现电压，请等待设备推送', icon: 'none' })
					return
				}
				if (!isFinite(curXs)) {
					uni.showToast({ title: '暂无现系数，请等待设备推送', icon: 'none' })
					return
				}
				const newXs = (setV / curV) * curXs
				const xsPayload = this.formatXsForBluetooth(newXs)
				if (!xsPayload) {
					uni.showToast({ title: '系数计算无效', icon: 'none' })
					return
				}
				const self = this
				const cmd = '11bxs' + xsPayload + '@'
				uni.getNetworkType({
					success(res) {
						if (res.networkType === 'none') {
							uni.showToast({ title: '请连接网络后重试', icon: 'none' })
							return
						}
						uni.getConnectedBluetoothDevices({
							success() {
								xBlufi.notifySendCustomData({ customData: cmd })
								self.showCoeffModal = false
								uni.showToast({ title: '已发送', icon: 'none' })
							},
							fail() {
								uni.showToast({ title: '请先连接蓝牙', icon: 'none' })
							}
						})
					}
				})
			},
			fmtStr(v) {
				if (v === undefined || v === null || v === '') return ''
				return String(v)
			},
			formatDeviceCoeffText(raw) {
				if (raw === undefined || raw === null || String(raw).trim() === '') return ''
				return String(raw).trim()
			},
			formatDeviceStatusText(raw) {
				if (raw === undefined || raw === null || raw === '' || String(raw).trim() === '') return ''
				const n = parseInt(String(raw), 10)
				if (isNaN(n)) return String(raw)
				const t = {
					0: '断电',
					1: '上电',
					2: '轮动抱死',
					3: '强制锁车',
					4: '临时锁车'
				}
				return Object.prototype.hasOwnProperty.call(t, n) ? t[n] : `未知(${raw})`
			},
			formatDeviceBatText(raw) {
				if (raw === undefined || raw === null || raw === '') return ''
				const s = String(raw).trim()
				const numStr = s.replace(/V$/i, '').trim()
				const n = parseFloat(numStr)
				if (isNaN(n)) {
					return /V$/i.test(s) ? s : `${s}V`
				}
				return `${n.toFixed(1)}V`
			},
			formatDeviceDoorText(raw) {
				if (raw === undefined || raw === null || raw === '') return ''
				const s = String(raw).trim()
				if (s === '0') return '关'
				if (s === '1') return '开'
				return s
			},
			formatDeviceLocation(lat, lon) {
				const a = lat != null && lat !== '' ? String(lat).trim() : ''
				const b = lon != null && lon !== '' ? String(lon).trim() : ''
				if (!a && !b) return ''
				if (!a) return b
				if (!b) return a
				return `${a}，${b}`
			},
			// 解析设备自定义数据，如 status:0,bat:0.0,csq:0 → [{name, value}, ...]
			parseDeviceCustomData(raw) {
				if (raw == null || raw === '') return []
				const s = typeof raw === 'string' ? raw : String(raw)
				const pairs = []
				s.split(',').forEach((part) => {
					const t = part.trim()
					if (!t) return
					const idx = t.indexOf(':')
					if (idx < 0) {
						pairs.push({ name: t, value: '' })
					} else {
						pairs.push({
							name: t.slice(0, idx).trim(),
							value: t.slice(idx + 1).trim()
						})
					}
				})
				return pairs
			},
			// 设备推送 APN 字段名为 apn
			syncApnFromDevicePairs(pairs) {
				if (!pairs || !pairs.length) return
				const apnRow = pairs.find(
					(p) => p.name && p.name.toLowerCase() === 'apn'
				)
				if (apnRow) this.apnDisplay = (apnRow.value != null) ? String(apnRow.value).trim() : ''
			},
			openApnDialog() {
				this.apnInput = this.apnDisplay || ''
				this.showApnModal = true
			},
			submitApn() {
				const v = (this.apnInput || '').trim()
				if (!v) {
					uni.showToast({ title: '请输入 APN', icon: 'none' })
					return
				}
				const self = this
				uni.getNetworkType({
					success(res) {
						if (res.networkType === 'none') {
							uni.showToast({ title: '请连接网络后重试', icon: 'none' })
							return
						}
						uni.getConnectedBluetoothDevices({
							success() {
								const cmd = '11apn' + v + '@'
								xBlufi.notifySendCustomData({ customData: cmd })
								self.apnDisplay = v
								self.showApnModal = false
								uni.showToast({ title: '已发送', icon: 'none' })
							},
							fail() {
								uni.showToast({ title: '请先连接蓝牙', icon: 'none' })
							}
						})
					}
				})
			},
			// 点击确认卡商
			confirmka(e){
				this.kaname = e[0].label
				this.kaid = e[0].value
				uni.setStorageSync('kashang',this.kaid)
			},
			// 请求所有卡商
			getka(){
				this.$u.get(`/system/dict/data/type/device_sim_producer`).then((res) => {
					if (res.code === 200) {
						let id = uni.getStorageSync('kashang')
						res.data.some(item =>{
							if(item.dictValue == id){
								this.kaname = item.dictLabel
								this.kaid = item.dictValue
							}
						})
						this.kalist = res.data.map(item => ({
						    value: item.dictValue,
						    label: item.dictLabel
						}))
					}
				})
			},
			
			btnfh(){
				uni.reLaunch({
					url:'/page_user/luru/index'
				})
			},
			btngx(){
				// this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
				// 	if (res.code == 200) {
				//         uni.showToast({
				//         	title: res.msg,
				//         	icon: 'success',
				//         	duration: 2000
				//         })
				// 	} else {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'none',
				// 			duration: 3000
				// 		})
				// 	}
				// })
			},
			confirm(e) {
				// console.log(e);
				uni.setStorageSync('hardwareVersionId', e[0].value);
				this.hardwareVersionId = e[0].value
				const hardwareVersionId =this.hardwareVersionId
				if (hardwareVersionId) {
					const matchedVersion = this.Versionlist.find(version => version.id ===
						hardwareVersionId);
					if (matchedVersion) {
						this.hardwareInfo = matchedVersion;
					}
				}
			},
			openHardwarePicker() {
				if (!this.list || !this.list.length) {
					uni.showToast({ title: '暂无硬件列表，请稍后重试', icon: 'none' })
					return
				}
				this.syncHwPickerActiveIndex()
				this.show = true
			},
			syncHwPickerActiveIndex() {
				const id = this.hardwareVersionId !== null && this.hardwareVersionId !== ''
					? this.hardwareVersionId
					: uni.getStorageSync('hardwareVersionId')
				const i = this.list.findIndex((x) => String(x.value) === String(id))
				this.hwPickerActiveIndex = i >= 0 ? i : 0
			},
			/** 点击行即选中并关闭，无需再点确认 */
			onPickHardwareItem(idx) {
				if (!this.list || !this.list.length) return
				const item = this.list[idx]
				if (!item) return
				this.hwPickerActiveIndex = idx
				this.confirm([item])
				this.show = false
			},
			getlist() {
				this.$u.get('/bst/hardwareVersion/all').then((res) => {
					if (res.code === 200) {
						const filtered = res.data.filter((item) => item.parentId != 0)
						// 倒序：接口里越靠后的越排前面
						const ordered = filtered.slice().reverse()
						this.Versionlist = ordered
						const hardwareVersionId = uni.getStorageSync('hardwareVersionId');
						if (hardwareVersionId) {
							this.hardwareVersionId=hardwareVersionId
							const matchedVersion = this.Versionlist.find(version => version.id ===
								hardwareVersionId);
							if (matchedVersion) {
								this.hardwareInfo = matchedVersion;
							}
						}
						this.list = ordered.map((item) => {
							const rest = (item.instructions && String(item.instructions).trim()) || ''
							const name = (item.version && String(item.version).trim()) || ''
							const label = rest && name ? `${name} ${rest}` : (name || rest)
							return {
								value: item.id,
								label,
								ver: name,
								rest
							}
						});
						console.log(JSON.stringify(this.list, null, 2));
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			send() {
				this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
					if (res.code === 200) {

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			changeBind(){
				this.$u.post(`/appVerify/updateSn?sn=` + this.sn + '&mac=' + this.mac+'&hardwareVersionId='+this.hardwareVersionId).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							// uni.navigateBack({
							// 	delta: 1 // delta值为1时表示返回的页面层数
							// });
							uni.navigateTo({
								url:'/page_user/luru/controlDevice?sn='+this.sn
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			backpage() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				})
			},
			bind() {
				let data = {
					sn:this.sn,
					mac:this.mac,
					hardwareVersionId:this.hardwareVersionId,
					simProducer:this.kaid,
					appId:this.$store.state.appid
				}
				console.log(data,'111');
				this.$u.post(`/bst/device`,data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateTo({
								url:'/page_user/luru/controlDevice?sn='+this.sn
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			qrcode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						let sn = null;
						let queryParams = res.result.split('?')[1];
						if (queryParams) {
							let params = queryParams.split('&');
							params.forEach(param => {
								let [key, value] = param.split('=');
								if (key === 's') {
									sn = value;
								}
							})
						}
						this.sn = sn
						console.log(res.result);
						if (this.sn != '') {

						}
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			findDevice() {
				// 使用 find 方法查找匹配的设备
				const matchedDevice = this.devicesarr.find(device => {
					console.log(this.mac, '111')
					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
				} else {
					this.findDeviceTimer = setTimeout(this.findDevice.bind(this), 1000) // 使用 bind 保持 this 上下文
				}
			},
			// 获取附近蓝牙设备列表
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
						if (!options.result) {
							this.carstause = false
							console.log('断开断开');
						}
						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) {
							this.carstause = true
							xBlufi.notifyInitBleEsp32({
								deviceId: this.deviceid
							})
						
						}else{
							
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA: {
						console.log("1收到设备发来的自定义数据结果：", options.data)
						this.deviceDataPairs = this.parseDeviceCustomData(options.data)
						this.syncApnFromDevicePairs(this.deviceDataPairs)
						break
					}
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) {
							console.log('蓝牙未开启')
							return
						} else {
						
						}
						break;
				}
			},
			// Binddevice() {
			// 	uni.showLoading({
			// 		title: '连接中..'
			// 	})
			// 	console.log("xBlufi", xBlufi.XMQTT_SYSTEM)
			// 	xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
			// 	xBlufi.notifyStartDiscoverBle({
			// 		'isStart': true
			// 	})
			// 	// 两秒后停止蓝牙搜索
			// 	setTimeout(() => {
			// 		xBlufi.notifyStartDiscoverBle({
			// 			'isStart': false
			// 		})
			// 		setTimeout(() => {
			// 			uni.hideLoading()
			// 			if (this.devicesList.length == 0) {
			// 				uni.showToast({
			// 					title: '暂无发现对应设备,请靠近设备',
			// 					icon: 'none'
			// 				})
			// 			} else {
			// 				let uniqueDevicesList = Array.from(new Set(this.devicesList))
			// 				// 将去重后的数组重新赋值给 this.devicesList
			// 				this.devicesList = uniqueDevicesList
			// 				this.devicesList.forEach(device => {
			// 					// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
			// 					let macFromName = device.name.substring(device.name.length - 12)
			// 					console.log(macFromName, 'macFromNamemacFromName')
			// 					// 与 this.mac 进行比较
			// 					if (macFromName == this.mac) {
			// 						// 如果相同，则将 this.ishave 设置为 true
			// 						console.log(device)
			// 						this.deviceInfoss = device
			// 						this.createBLEConnection(device)
			// 						console.log('对比正确1111111111')
			// 					} else {
			// 						console.log('对比错误')
			// 					}
			// 				})
			// 			}
			// 		}, 200)
			// 	}, 2000)
			// },
			reboot() {
				let vm = this // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res)
									xBlufi.notifySendCustomData({
										customData: "11reboot"
									})
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err)
								}
							});
						} else {
							console.log('手机未连接网络')
						}
					}
				})
			},
			open() {
				let vm = this // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res)
									xBlufi.notifySendCustomData({
										customData: "11open"
									})
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err)
								}
							})
						} else {
							console.log('手机未连接网络')
						}
					}
				})
			},
			shaoru(){
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res)
									xBlufi.notifySendCustomData({
										customData: "11resetGG"
									})
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err)
								}
							});
						} else {
							console.log('手机未连接网络')
						}
					}
				});
			},
			close() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res)
									xBlufi.notifySendCustomData({
										customData: "11close"
									})
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err)
								}
							});
						} else {
							console.log('手机未连接网络')
						}
					}
				});
			},
			ring() {
				let vm = this // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res)
									xBlufi.notifySendCustomData({
										customData: "11play1@"
									})
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err)
								}
							})
						} else {
							console.log('手机未连接网络')
						}
					}
				})
			},
			btnyc() {
				this.titleflag = false
			},
		// 	// 解析自定义数据
		// 	funListenDeviceMsgEvent: function(options) {
		// 		switch (options.type) {
		// 			case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
		// 				if (options.result) {
		// 					this.devicesarr = options.data
		// 					// devicesarr.forEach(device => {
		// 					// 	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));
		// 				if (options.result) {
		// 					uni.hideLoading();
		// 					uni.showToast({
		// 						title: '连接成功',
		// 						icon: 'none'
		// 					}); {

		// 						xBlufi.notifyInitBleEsp32({
		// 							deviceId: options.data.deviceId
		// 						});

		// 						xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);

		// 						this.deviceIds = options.data.deviceId
		// 						this.name = options.data.name
		// 						// 连接成功绑定设备
		// 						// let params = {
		// 						// 	mac: this.Bluetoothmac,
		// 						// 	userId: this.$store.state.user.userId
		// 						// }
		// 						let systemInfo = uni.getSystemInfoSync();
		// 						if (systemInfo.platform === 'android') {
		// 							// 当前设备是 Android  

		// 						} else if (systemInfo.platform === 'ios') {
		// 							// 当前设备是 iOS  
		// 							// uni.navigateTo({
		// 							// 	url: '/pages/wifilist/index?deviceId=' + options
		// 							// 		.data.deviceId + '&name=' + options.data.name
		// 							// })
		// 						}
		// 					}
		// 				}

		// 				break;
		// 			case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:

		// 				// this.ver_data = this.parseCustomData(options.data)
		// 				if (options.data) {
		// 					this.carstause = true
		// 				}
		// 				// console.log("1收到设备发来的自定义数据结果：", this.ver_data);
		// 				break;
		// 			case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
		// 				if (options.result) {
		// 					let uniqueDevicesList = Array.from(new Set(this.devicesList));

		// 					// 过滤出名称字段的前五个字母为 "CTPOW" 的项
		// 					let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) ===
		// 						"BBLE");

		// 					// 将过滤后的数组重新赋值给 this.devicesList
		// 					this.devicesList = filteredDevices;

		// 					// console.log('蓝牙停止搜索ok',this.devicesList);
		// 				} else {
		// 					//蓝牙停止搜索失败
		// 					// console.log('蓝牙停止搜索失败');
		// 				}
		// 				this.searching = false
		// 				// _this.setData({
		// 				// 	searching: false
		// 				// });

		// 				break;
		// 		}
		// 	},


			//4、建立连接
			createBLEConnection(e) {
				console.log('调用了');
				xBlufi.notifyStartDiscoverBle({
					'isStart': false
				});
				console.log(e, '蓝牙信息')
				const deviceId = e.deviceId
				// this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
				// console.log(this.Bluetoothmac, '11111');
				let name = e.name;
				console.log('点击了，蓝牙准备连接的deviceId:' + e.deviceId);
				xBlufi.notifyConnectBle({
					isStart: true,
					deviceId: e.deviceId,
					name
				});
				// for (var i = 0; i < this.devicesList.length; i++) {
				// 	if (e.deviceId === this.devicesList[i].deviceId) {

				// 		uni.showLoading({
				// 			title: '连接蓝牙设备中...'
				// 		});
				// 	}
				// }
			},
			// 点击重新搜索
			Search() {
				if (this.status) {
					xBlufi.notifyStartDiscoverBle({
						'isStart': true
					});
					// 重新搜索清空蓝牙数组
					this.bluthlist = []
					this.devicesList = []
					// 重新搜索
					// this.startBluetoothDevicesDiscovery()
					this.statusflag = true
					this.status = false
					this.texts = '正在扫描蓝牙设备...'
					setTimeout(() => {
						this.statusflag = false
						this.status = true
						if (this.searching) {
							xBlufi.notifyStartDiscoverBle({
								'isStart': false
							});
							// 判断是否存在浇花器设备
							if (this.devicesList.length == 0) {
								uni.showToast({
									title: '暂无发现对应设备,请靠近设备',
									icon: 'none'
								});
							} else {
								this.texts = '扫描到以下设备，请点击连接！'
							}
						} else {
							xBlufi.notifyStartDiscoverBle({
								'isStart': true
							});
						}
					}, 2000)
				}


			},
			// funListenDeviceMsgEvents: function(options) {
			// 	let that = this;
			// 	switch (options.type) {
			// 		case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
			// 			console.log('状态', options.result)
			// 			if (options.result == false) {
			// 				this.carstause = false
			// 				uni.showToast({
			// 					title: '设备断开链接，请重新点击蓝牙链接',
			// 					icon: 'none'
			// 				});
			// 				// uni.showModal({
			// 				// 	title: '很抱歉提醒你！',
			// 				// 	content: '小程序与设备异常断开',
			// 				// 	showCancel: false,
			// 				// 	success: function(res) {
			// 				// 		// uni.navigateBack({
			// 				// 		// 	url: '../search/search'
			// 				// 		// });
			// 				// 	}
			// 				// });
			// 				// this.statusflag = false
			// 				uni.hideLoading();
			// 			}
			// 		}
			// 		break;

			// 		case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
			// 			this.loadPercent = options.data;
			// 			this.loadText = '文件读取中'
			// 			console.log("文件读取中", options.data);
			// 			break;
			// 		case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
			// 			// this.isband = true
			// 			// this.ver_data = this.parseCustomData(options.data)
			// 			console.log("1收到设备发来的自定义数据结果：", options.data);
			// 			if (options.data) {
			// 				this.carstause = true
			// 			}
			// 			break;

			// 		case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
			// 			uni.hideLoading();
			// 			if (options.result) {
			// 				console.log('初始化成功');
			// 			} else {
			// 				console.log('初始化失败');


			// 			}
			// 			break;
			// 	}
			// },
			// 点击隐藏没有设备提示
			btnhd() {
				this.tishiflag = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		overflow-x: hidden;
		background-color: #F3F3F3;
	}
	.apn-placeholder {
		color: #9a9a9a;
		font-size: 32rpx;
	}
		.page {
		padding-bottom: 280rpx;
		width: 750rpx;
		.hardware-block {
			margin: 28rpx auto 0;
			width: 658rpx;
			background: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			overflow: hidden;
			box-sizing: border-box;
		}
		.iptbox--hw-line {
			margin: 0;
			width: 100%;
			height: 88rpx;
			border-radius: 0;
			box-shadow: none;
		}
		.hardware-block__intro {
			margin: 0;
			padding: 20rpx 22rpx 24rpx;
			width: 100%;
			box-sizing: border-box;
			background: #ffffff;
			border-top: 1rpx solid #E8ECF0;
		}
		.hardware-block__intro-label {
			font-size: 26rpx;
			color: #666;
		}
		.hardware-block__intro-text {
			font-size: 26rpx;
			color: #262b37;
			line-height: 1.55;
			word-break: break-all;
		}
		.apn-below-actions {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 28rpx auto 0;
			width: 658rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 20rpx;
		}
		// .apn-below-actions__img {
		// 	flex-shrink: 0;
		// 	width: 120rpx;
		// 	height: 120rpx;
		// 	margin-left: 20rpx;
		// 	margin-right: 0;
		// 	border-radius: 16rpx;
		// 	overflow: hidden;
		// 	background: #f5f7fa;
		// 	image {
		// 		width: 120rpx;
		// 		height: 120rpx;
		// 		display: block;
		// 	}
		// }
		.apn-below-actions__btns {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
			width: 658rpx;
			/* 与 page 内 .bot_btn .btn1 同套样式（此处 btn 未包在 .bot_btn 下需单独写） */
			.btn1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 164rpx;
				height: 80rpx;
				background: #E2F2FF;
				border: 2rpx solid #4C97E7;
				border-radius: 0rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
				box-sizing: border-box;
				flex: 0 0 auto;
				margin: 0;
				border-radius: 10rpx;
			}
			.btn1 + .btn1 {
				margin-left: 12rpx;
			}
		}
		/* 自定义选择硬件：底部弹层，列表文案左对齐 */
		.hw-picker-sheet {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 101;
			display: flex;
			flex-direction: column;
			max-height: 72vh;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0 0;
			box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
			box-sizing: border-box;
			overflow: hidden;
		}
		.hw-picker__toolbar {
			position: relative;
			flex-shrink: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			padding: 0 28rpx;
			border-bottom: 1rpx solid #ececec;
			box-sizing: border-box;
		}
		.hw-picker__tb-title {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #262b37;
			pointer-events: none;
		}
		.hw-picker__tb-side {
			position: relative;
			z-index: 1;
			font-size: 30rpx;
			color: #3d3d3d;
			padding: 12rpx 8rpx;
		}
		/* 与左侧「取消」对称占位，保持标题真正居中 */
		.hw-picker__tb-spacer {
			position: relative;
			z-index: 1;
			width: 100rpx;
			flex-shrink: 0;
		}
		.hw-picker__scroll {
			width: 100%;
			min-height: 240rpx;
			max-height: 58vh;
			height: 48vh;
			margin-top: 20rpx;
			box-sizing: border-box;
		}
		.hw-picker__row {
			padding: 26rpx 28rpx;
			border-bottom: 1rpx solid #f0f2f5;
			box-sizing: border-box;
			text-align: left;
		}
		.hw-picker__row-line {
			text-align: left;
			line-height: 1.55;
		}
		.hw-picker__ver {
			font-size: 28rpx;
			font-weight: 600;
			color: #4c97e7;
			margin-right: 8rpx;
		}
		.hw-picker__rest {
			font-size: 28rpx;
			font-weight: 400;
			color: #3d3d3d;
			word-break: break-all;
		}
		.device-and-apn-card {
			margin: 28rpx auto 0;
			width: 658rpx;
			background: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
			box-sizing: border-box;
			overflow: hidden;
			.device-telemetry--grid {
				margin: 0;
				width: 100%;
				padding: 20rpx 20rpx 24rpx;
				box-sizing: border-box;
			}
			.device-telemetry__grid-row {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				margin-top: 20rpx;
				&:first-of-type {
					margin-top: 0;
				}
			}
			.device-telemetry__grid-row--full {
				.device-telemetry__cell--full {
					flex: 1;
					min-width: 0;
					width: 100%;
					padding: 0 8rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					line-height: 1.5;
				}
			}
			.device-telemetry__cell {
				flex: 1;
				width: 0;
				min-width: 0;
				padding: 0 8rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				line-height: 1.5;
				&--has-coeff {
					display: flex;
					align-items: center;
				}
			}
			.device-telemetry__pair-cell-inner {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.device-telemetry__v {
					display: inline;
					margin-top: 0;
				}
			}
			.device-telemetry__k {
				color: #666;
			}
			.device-telemetry__v {
				display: block;
				margin-top: 4rpx;
				color: #262b37;
				word-break: break-all;
			}
			/* APN/定位 行：不在中间换行，长内容省略；定位无侧栏 */
			.device-telemetry__apn-line {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: nowrap;
				width: 100%;
				min-width: 0;
				box-sizing: border-box;
			}
			.device-telemetry__apn-line.device-telemetry__loc-line {
				justify-content: flex-start;
			}
			.device-telemetry__apn-line-main {
				flex: 1;
				min-width: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: nowrap;
			}
			.device-telemetry__v--apn-inline {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 0;
				color: #262b37;
			}
			.device-telemetry__apn-edit {
				flex: 0 0 auto;
				flex-shrink: 0;
				margin-left: 16rpx;
				padding: 6rpx 20rpx;
				font-size: 26rpx;
				color: #4c97e7;
				border: 2rpx solid #4c97e7;
				border-radius: 10rpx;
				white-space: nowrap;
			}
		}
		.coeff_box {
			.coeff-modal-hint {
				margin-top: 16rpx;
				font-size: 24rpx;
				color: #888;
				line-height: 1.45;
				text-align: left;
			}
			.coeff-modal-readonly {
				margin-top: 20rpx;
			}
			.coeff-modal-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;
				font-size: 28rpx;
				&:first-child {
					margin-top: 0;
				}
			}
			.coeff-modal-k {
				flex-shrink: 0;
				color: #666;
				margin-right: 16rpx;
			}
			.coeff-modal-v {
				flex: 1;
				min-width: 0;
				color: #262b37;
				text-align: right;
				word-break: break-all;
				&--em {
					color: #4c97e7;
					font-weight: 600;
				}
			}
			.coeff-modal-input {
				flex: 1;
				min-width: 0;
				height: 72rpx;
				padding: 0 20rpx;
				font-size: 30rpx;
				color: #262b37;
				text-align: right;
				border: 2rpx solid #979797;
				border-radius: 12rpx;
				box-sizing: border-box;
			}
		}
		.apn-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 28rpx auto 0;
			padding: 22rpx 24rpx;
			width: 658rpx;
			min-height: 88rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx;
			box-sizing: border-box;
			&__text {
				flex: 1;
				min-width: 0;
				padding-right: 20rpx;
			}
			&__label {
				font-size: 28rpx;
				color: #666;
			}
			&__val {
				display: block;
				margin-top: 8rpx;
				font-size: 30rpx;
				color: #262b37;
				word-break: break-all;
			}
			&__edit {
				flex-shrink: 0;
				padding: 10rpx 24rpx;
				font-size: 28rpx;
				color: #4c97e7;
				border: 2rpx solid #4c97e7;
				border-radius: 12rpx;
			}
		}
		.apn_box {
			position: fixed;
			left: 72rpx;
			top: 500rpx;
			width: 610rpx;
			background: #ffffff;
			border-radius: 30rpx;
			z-index: 110;
			padding-bottom: 100rpx;
			.top {
				padding: 44rpx 36rpx 32rpx;
			}
			.tip {
				width: 100%;
				text-align: center;
				font-weight: 700;
				font-size: 32rpx;
				color: #3d3d3d;
			}
			.apn_ipt {
				margin-top: 28rpx;
				&__field {
					width: 100%;
					height: 160rpx;
					padding: 24rpx 24rpx;
					font-size: 34rpx;
					line-height: 1.5;
					color: #262b37;
					border: 2rpx solid #979797;
					border-radius: 16rpx;
					box-sizing: border-box;
				}
			}
			.bots {
				position: absolute;
				width: 610rpx;
				display: flex;
				flex-wrap: nowrap;
				bottom: -20rpx;
				.bot_left {
					border-radius: 0rpx 0rpx 0rpx 30rpx;
					width: 50%;
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3d3d3d;
					background: #eeeeee;
				}
				.bot_right {
					border-radius: 0rpx 0rpx 30rpx 0rpx;
					width: 50%;
					height: 86rpx;
					background: #4c97e7;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ffffff;
					font-weight: 500;
					font-size: 32rpx;
				}
			}
		}
		.tip_box {
			position: fixed;
			left: 72rpx;
			top: 628rpx;
			width: 610rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			z-index: 110;
			padding-bottom: 100rpx;
			.top {
				padding: 52rpx 38rpx 42rpx 36rpx;
				.ipt_box {
					margin-top: 22rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					.text {
						width: 350rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.ipt {
						padding: 10rpx 18rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 26rpx;
						width: 420rpx;
						height: 64rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #979797;
						.input {
							width: 80%;
						}
					}
				}
				.tip {
					width: 100%;
					text-align: center;
					font-weight: 700;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.txt {
					margin-top: 32rpx;
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
			.bots {
				position: absolute;
				width: 610rpx;
				display: flex;
				flex-wrap: nowrap;
				bottom: -20rpx;
				.bot_left {
					border-radius: 0rpx 0rpx 0rpx 30rpx;
					width: 50%;
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
					background: #EEEEEE;
				}
				.bot_right {
					border-radius: 0rpx 0rpx 30rpx 0rpx;
					width: 50%;
					height: 86rpx;
					background: #4C97E7;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-weight: 500;
					font-size: 32rpx;
				}
			}
		}
		.page-bottom-dock {
			position: fixed;
			left: 0;
			bottom: 0rpx;
			padding-bottom: 30rpx;
			width: 750rpx;
			z-index: 8;
			background: #fff;
			box-shadow: 0rpx -6rpx 24rpx rgba(0, 0, 0, 0.06);
		}
		.btn-bind {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #27c2fd;
			font-weight: 500;
			color: #ffffff;
			box-sizing: border-box;
		}
		.btn-bind--full {
			width: 658rpx;
			max-width: calc(100% - 48rpx);
			height: 88rpx;
			margin: 20rpx auto 0;
			padding: 0 20rpx;
			border-radius: 20rpx;
			font-size: 32rpx;
		}
		.tips {
			margin: 20rpx auto 0;
			width: 658rpx;
		}

		.iptbox {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			padding: 22rpx;
			margin: 28rpx auto 0;
			width: 658rpx;
			min-height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.qrcode {
				padding-right: 20rpx;
				border-right: 2rpx solid #D8D8D8;

				image {
					width: 54rpx;
					height: 54rpx;
				}
			}

			.ips {
				width: 630rpx;

			}

			image {
				width: 18rpx;
				height: 32rpx;
			}

			.my-placeholder {
				font-weight: 400;
				font-size: 32rpx;
				color: #808080;
			}
		}

		
		.bot_btn {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 18rpx 32rpx;
			width: 750rpx;
			background: #fff;
			box-sizing: border-box;

			.btn:nth-child(4n) {
				margin-right: 0;
			}

			.btn1 {
				margin-top: 10rpx;
				margin-right: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 164rpx;
				height: 66rpx;
				background: #E2F2FF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #4C97E7;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
				border-radius: 10rpx;
			}
		}
		.bot_btn--grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 658rpx;
			max-width: 100%;
			margin: 0 auto;
			box-sizing: border-box;
			background: #fff;
			.btn1 {
				margin: 0 0 20rpx 0;
				width: 31.6%;
				max-width: 210rpx;
				height: 80rpx;
				box-sizing: border-box;
			}
		}



	}
</style>