From 27b1b860ab636e02dd72797fc09b3e9d3c4b67e8 Mon Sep 17 00:00:00 2001
From: "3321822538@qq.com" <3321822538@qq.com>
Date: Wed, 6 Nov 2024 16:55:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=BD=95=E5=85=A5=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue            |   37 +-
 pages/myorder/index.vue          |  551 +++++++++++++--
 pages/myorder/returned/index.vue | 1076 +++++++++++++++++++++++++-----
 3 files changed, 1424 insertions(+), 240 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2f50b7c..5a31ebd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -25,8 +25,12 @@
 					切换设备 <image src="https://api.ccttiot.com/smartmeter/img/static/uwHOBxvbJjkhx1uDiQHI" mode="">
 					</image>
 				</view>
-				<view class="selectshezhi" @click="btnsz">
-					<image src="https://api.ccttiot.com/smartmeter/img/static/uvCJ8ro0MpfGZd53vypJ" mode=""></image>
+				
+				<view class="selectshezhi" style="display: flex;">
+					<view class="selectnames" @click="btnluru" v-if="userobj.userType == 00">
+						录入设备
+					</view>
+					<image @click="btnsz" src="https://api.ccttiot.com/smartmeter/img/static/uvCJ8ro0MpfGZd53vypJ" mode=""></image>
 				</view>
 			</view>
 			<view class="selectbox">
@@ -312,7 +316,8 @@
 				user:{},
 				lastChar:'',
 				timer:'',
-				bjflag:false
+				bjflag:false,
+				userobj:{}
 			}
 		},
 		// 分享到好友（会话）
@@ -342,6 +347,15 @@
 
 		},
 		methods: {
+			// 点击进行设备录入
+			btnluru(){
+				this.datalist = ''
+				this.mac = ''
+				this.ver_data = {}
+				uni.navigateTo({
+					url:'/pages/myorder/index'
+				})
+			},
 			// 点击选择时间
 			btnshowjs() {
 				this.showjs = true
@@ -1649,6 +1663,23 @@
 					margin-left: 14rpx;
 				}
 			}
+			.selectnames {
+				font-size: 28rpx;
+				color: #3D3D3D;
+                border: 1px solid;
+				padding:0 20rpx;
+				box-sizing: border-box;
+				border-radius: 20rpx;
+				background-color: #48893B;
+				color: #fff;
+				height: 60rpx;
+				line-height: 60rpx;
+				image {
+					width: 32rpx;
+					height: 26rpx;
+					margin-left: 14rpx;
+				}
+			}
 
 			.selectshezhi {
 				image {
diff --git a/pages/myorder/index.vue b/pages/myorder/index.vue
index 6b05b88..89ee5a4 100644
--- a/pages/myorder/index.vue
+++ b/pages/myorder/index.vue
@@ -1,115 +1,526 @@
 <template>
-	<view class="page">
-		<u-navbar title="我的订单" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar>
-         <view class="listorder">
-         	<view class="title">
-         		<view>SDFGA5452168437113123 &nbsp;&nbsp; <u-icon name="file-text" size="38"></u-icon> </view> <view @click="btnnav"><u-icon name="arrow-right"></u-icon></view>
-         	</view>
-			<view class="bh">
-				<text>柜机编号</text> <text>SDGJRAEG15684721339658</text>
-			</view>
-			<view class="bh">
-				<text>电池编号</text> <text>DFASF5413786946</text>
-			</view>
-			<view class="bh">
-				<text>手机号码</text> <text>12345678978</text>
-			</view>
-			<view class="bh">
-				<text>订单状态</text> <text>使用中</text>
-			</view>
-			<view class="bh">
-				<text>订单金额</text> <text>-</text>
-			</view>
-			<view class="bh">
-				<text>租借时间</text> <text>2024-04-08 15:05:21</text>
-			</view>
-			<view class="bh">
-				<text>租借时长</text> <text>-</text>
-			</view>
-         </view>
-	
+	<view class="pages">
+		<u-navbar title="设备录入" :border-bottom="false" :background="bgc" title-size='38' title-color='#000'
+			back-icon-color="#000" height='50'></u-navbar>
+		<view class="title">
+			<text>设备录入列表</text>
+			<!-- <text style="font-size: 28rpx;width: 160rpx;height: 60rpx;border-radius: 20rpx;background-color: #7FAD76;text-align: center;color: #fff;line-height: 60rpx;margin-top: 20rpx;" @click="btnkzt">控制台</text> -->
+		</view>
 
+		<view class="dblist" v-for="(item, index) in devicesLists" :key="index">
+			<view class="cen" :id="item.deviceId" @click="createBLEConnections(item)">
+				<view class="name">
+					<view class="">
+						状态：<text v-if="item.flags == true" style="color: #e10328;">已录入</text> <text v-else
+							style="color:seagreen;">未录入</text>
+					</view>
+					<!-- <view class="" style="display: flex;width: 100%;">
+						SN码:{{item.sn == undefined ? '--' : item.sn}}
+					</view> -->
+				</view>
+				<view class="mac">
+					MAC：{{item.name.substring(5)}}
+				</view>
+				<view class="" style="color: #7FAD76;margin-top: 10rpx;margin-bottom: 10rpx;text-align: left;">
+					蓝牙强度:{{item.RSSI}}
+				</view>
+			</view>
+			<view class="rt" :id="item.deviceId" @click="createBLEConnections(item)">
+				<text style="margin-bottom: 10rpx;">选择</text>
+			</view>
+		</view>
+
+		<view class="anniu" v-if="seachflag" @click="Search">
+			<button>重新扫描</button>
+		</view>
+
+		<view class="mask" v-if="titleflag">
+			<view class="titles">
+				温馨提示
+			</view>
+			<text>未扫描到附近未绑定设备:</text>
+			<text>1.确保待连接设备在附近且蓝牙处于打开状态。</text>
+			<text>2.确保设备未与其他设备进行蓝牙连接。</text>
+			<text>3.确保设备未被添加过。</text>
+			<button @click="btnyc">好的</button>
+		</view>
+
+		<view v-if="mengcflag" class="mengc"
+			style="width: 100%;height: 100vh;background-color: #000;opacity: .5;position: fixed;top: 0;left: 0;"></view>
+
+		<!-- 选择蓝牙型号 -->
+		<u-select v-model="shows" :list="arr" @confirm="confirm"></u-select>
 	</view>
 </template>
 
 <script>
+	const app = getApp();
+	var xBlufi = require("@/components/blufi/xBlufi.js");
 	export default {
 		data() {
 			return {
-				
+				mengcflag: false,
+				titleflag: false, //提示隐藏
+				bgc: {
+					backgroundColor: "#F7FAFE",
+				},
+				devicesList: [
+					// {name:'110000',
+					// mac:'11111'}
+				],
+				devicesLists: [],
+				searching: false,
+				texts: '正在扫描设备...',
+				btnflag: true,
+				tishiflag: false,
+				option: '',
+				bluthlist: [], //蓝牙数组
+				status: 'loading',
+				statusflag: false,
+				Bluetoothmac: '',
+				gps: {},
+				mac: '',
+				status: false,
+				storeId: '',
+				lurulist: [],
+				arr: [],
+				shows: false,
+				arrname: '',
+				valuexh: '',
+				deviceId: '',
+				arrs: '',
+				sn: '输入SN',
+				snname: '',
+				qrResult:'',
+				name:'',
+				ver_data:null,
+				seachflag:true
 			}
 		},
+		onLoad(option) {
+			// console.log(option);
+			// this.storeId = option.sn
+		},
+		onUnload: function() {
+			console.log("unload ");
+			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
+			wx.closeBLEConnection({
+				deviceId: this.deviceId,
+			})
+		},
 		// 分享到好友（会话）
 		onShareAppMessage: function() {
 			return {
-				title: '绿小能',
-				path: '/pages/index/index'
+				title: '创想物联',
+				path: '/pages/shouye/index'
 			}
 		},
-		
 		// 分享到朋友圈  
 		onShareTimeline: function() {
 			return {
-				title: '绿小能',
+				title: '创想物联',
 				query: '',
-				path: '/pages/index/index'
+				path: '/pages/shouye/index'
 			}
 		},
-		onLoad() {
-
+		mounted() {
+			// this.videoContext = uni.createVideoContext('myVideo', this)
 		},
 		methods: {
-			btnnav(){
+			btnkzt(){
 				uni.navigateTo({
-					url:'/pages/myorder/returned/index'
+					url:'/page_user/wifijoint/index' 
 				})
+			},
+			// 扫码sn
+			scanQRCode(item) {
+				this.snname = item.name
+				uni.scanCode({
+					onlyFromCamera: true,
+					scanType: ['qrCode'],
+					success: res => {
+						function getQueryParam(url, paramName) {
+							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
+							let results = regex.exec(url);
+							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
+						}
+						let sceneValue = res.result
+						let decodedValue = decodeURIComponent(sceneValue)
+						let id = getQueryParam(decodedValue, 's')
+						this.storeId = id
+						this.devicesLists.forEach(item => {
+							if (item.name == this.snname) {
+								item.sn = id
+							}
+						})
+					},
+					fail: err => {
+						console.error('扫描失败：', err)
+						uni.showToast({
+							title: '扫描失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+			btnshows(item, index) {
+				this.arrname = item.name
+				this.shows = true
+			},
+			// 选择型号
+			confirm(e) {
+				this.devicesLists.forEach(item => {
+					if (item.name == this.arrname) {
+						item.xuanz = e[0].label
+						this.valuexh = e[0].value
+					}
+				})
+			},
+			btnyc() {
+				this.titleflag = false
+			},
+			funListenDeviceMsgEvent: function(options) {
+				switch (options.type) {
+					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
+						let loadPercent = options.data;
+						let loadText = '文件读取中'
+						break;
+					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
+						this.ver_data = this.parseCustomData(options.data)
+						console.log("1收到设备发来的自定义数据结果：", this.ver_data)
+						break;
+					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
+						if (options.result) {
+							this.devicesList = options.data
+							this.devicesList.forEach(device => {
+								const mac = device.name.substring(5)
+								if (device.name == this.qrResult) {
+									this.deviceId = device.deviceId
+									this.name = device.name
+									this.mac = device.name.slice(5, 17)
+								}
+							})
+						}
+						break;
+					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
+						// console.log("连接回调：" + JSON.stringify(options))
+						if (options.result) {
+							setTimeout(()=>{
+								this.bluetoothflag = false
+							},3000)
+							 {
+								console.log("连接回调options.data.deviceId：" + options.data.deviceId,
+									"连接回调options.data.name：" + options.data.name)
+							}
+						} else {
+							this.shibaiflag = true
+							this.bluetoothflag = false
+							
+							
+						}
+						break;
+					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
+						if (!options.result) {
+							this.mengcflag = false
+							uni.hideLoading()
+							console.log("蓝牙未开启", options)
+							uni.showToast({
+								title: '蓝牙未开启,请打开手机蓝牙',
+								icon: 'none',
+								duration: 3000
+							})
+						} else {
+							this.searching = true
+						}
+						break;
+					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
+						if (options.result) {
+							let uniqueDevicesList = Array.from(new Set(this.devicesList));
+							this.devicesLists = uniqueDevicesList.map(device => {
+								const deviceId = device.name.substring(5)
+								const newDevice = {
+									...device,
+									xuanz: "请选择",
+								}; // 直接在复制时添加 xuanz 字段  
+								return newDevice
+							})
+							let devicesarr = options.data
+							this.devicesList.forEach(device => {
+								if (device.name.substring(0, 4) == "CCYK") {
+									this.devicesList.push(device)
+									let uniqueDevicesList = Array.from(new Set(this.devicesList))
+									this.devicesLists = uniqueDevicesList.filter(device => {
+										const deviceId = device.name.substring(5)
+										return deviceId
+									})
+								}
+							})
+							// console.log('蓝牙停止搜索ok')
+							this.mengcflag = false
+							if (this.devicesLists.length == 0) {
+								this.titleflag = true
+							} else {
+								let arr = []
+								// console.log(this.devicesLists,'101010');
+								this.devicesLists.forEach(item => {
+									arr.push(item.name.slice(5))
+								})
+								this.arrs = arr.join(',')
+								this.$u.get(`/app/getExistMac/${this.arrs}`).then(res => {  
+								    if (res.code == 200 && Array.isArray(res.data)) {  
+								        const existingDevices = new Map(res.data.map(item => [item.mac, true]))// 使用Map来存储已找到的MAC  
+								        this.devicesLists = this.devicesLists.map(device => {  
+								            const trimmedName = device.name.slice(5) // 假设name中包含MAC地址的一部分  
+								            const mac = trimmedName // 如果trimmedName直接就是MAC，则不需要再处理  
+								            device.found = existingDevices.has(mac) // 添加一个found属性来标记是否找到  
+								            if (device.found) {  
+								                const sn = res.data.find(val => val.mac === mac)?.sn // 从res.data中找到匹配的sn  
+								                if (sn) {  
+								                    device.sn = sn // 设置sn  
+								                }  
+								                device.flags = true // 设置flags为true，因为找到了匹配的MAC  
+								            } else {  
+								                device.flags = false // 可选：如果你想要明确表示未找到  
+								            }  
+								            return device // 但map函数仍然需要return来保持结构  
+								        })
+								        this.devicesLists.sort((a, b) => {  
+								            if (a.found && !b.found) return 1 // b排在a前面（即a在后面）  
+								            if (!a.found && b.found) return -1 // a排在b前面  
+								            return 0;  
+								        });  
+								    }  
+								})
+								setTimeout(()=>{
+									uni.hideLoading()
+								},2000)
+							}
+						} else {
+							//蓝牙停止搜索失败
+							this.mengcflag = false
+							setTimeout(()=>{
+								uni.hideLoading()
+							},2000)
+							console.log('蓝牙停止搜索失败')
+						}
+						this.searching = false
+						break
+				}
+			},
+            
+			// 发送开关
+			createBLEConnections(e) {
+				let Bluetoothmac = e.name.substring(5)
+				this.devicesLists = []
+				uni.navigateTo({
+					url:'/pages/myorder/returned/index?mac='+Bluetoothmac
+				})
+			},
+
+			// 点击重新搜索
+			Search() {
+				// if (this.status) {
+					this.seachflag = false
+				this.mengcflag = true
+				uni.showLoading({
+					title: '请稍后...'
+				})
+				xBlufi.initXBlufi(1);
+				xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
+				xBlufi.notifyStartDiscoverBle({
+					'isStart': true
+				})
+				// 重新搜索清空蓝牙数组
+				this.bluthlist = []
+				this.devicesList = []
+				this.devicesLists = []
+				this.arrs = []
+				// 重新搜索
+				// this.startBluetoothDevicesDiscovery()
+				this.statusflag = true
+				this.texts = '正在扫描蓝牙设备...'
+				setTimeout(() => {
+					this.statusflag = false
+					uni.hideLoading()
+					// if (this.searching) {
+						xBlufi.notifyStartDiscoverBle({
+							'isStart': false
+						});
+						this.seachflag = true
+				}, 2000)
+				// }
+			},
+			// 点击隐藏没有设备提示
+			btnhd() {
+				this.tishiflag = false
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-
 	page {
-		// background-color: ;
-		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
-		border-radius: 0rpx 0rpx 0rpx 0rpx;
-	}
-
-	.page {
-		width: 750rpx;
-		padding-left: 34rpx;
-		padding-right: 34rpx;
+		background-color: #F7FAFE !important;
+		padding-bottom: 300rpx;
 		box-sizing: border-box;
-        position: fixed;
+	}
+	.containers {
+		width: 100%;
+		height: 100vh;
+		position: fixed;
 		top: 0;
+		padding-top: 130rpx;
+		box-sizing: border-box;
 		left: 0;
-		.listorder{
-			margin-top: 32rpx;
-			width: 100%;
-			height: 100%;
-			background-color: #fff;
-			border-radius: 30rpx;
-			padding: 32rpx;
+		z-index: 999 !important;
+	}
+	.pages {
+		padding: 0 32rpx;
+		box-sizing: border-box;
+	}
+	.sm {
+		color: #77808D;
+		border-radius: 0rpx 0rpx 0rpx 0rpx;
+		display: inline-block;
+	}
+	.title {
+		margin-bottom: 84rpx;
+		margin-top: 50rpx;
+        display: flex;
+		justify-content: space-between;
+		image {
+			display: inline-block;
+			width: 48rpx;
+			height: 48rpx;
+			vertical-align: bottom;
+			margin-right: 10rpx;
+		}
+		text:nth-child(1) {
+			font-weight: 400;
+			font-size: 66rpx;
+			color: #262B37;
+			line-height: 88rpx;
+			text-align: left;
+			font-style: normal;
+			text-transform: none;
+			display: block;
+			margin-bottom: 48rpx;
+		}
+	}
+	.dblist {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		margin-top: 34rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
+		padding: 20rpx 20rpx 24rpx 18rpx;
+		box-sizing: border-box;
+		text-align: center;
+		border-radius: 10rpx;
+		.lt {
+			padding-left: 10rpx;
 			box-sizing: border-box;
-			.title{
-				display: flex;
-				justify-content: space-between;
+			margin-right: 18rpx;
+			image {
+				width: 120rpx;
+				height: 200rpx;
+			}
+		}
+		.cen {
+			width: 365rpx;
+			padding-left: 10rpx;
+			box-sizing: border-box;
+			.name {
+				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
 				font-weight: 400;
 				font-size: 32rpx;
-				color: #666666;
-				border-bottom: 1px solid #ccc;
-				padding-bottom: 20rpx;
-				margin-bottom: 28rpx;
+				color: #262B37;
+				line-height: 40rpx;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				margin-top: 10rpx;
 			}
-			.bh{
-				display: flex;
-				justify-content: space-between;
-				margin-top: 18rpx;
-				font-size: 24rpx;
-				color: #808080;
+			.mac {
+				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #262B37;
 				line-height: 32rpx;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				margin-top: 16rpx;
+			}
+		}
+		.rt {
+			margin-top: 32rpx;
+			box-sizing: border-box;
+			text {
+				display: block;
+				width: 108rpx;
+				height: 60rpx;
+				background: rgba(255, 255, 255, 0);
+				border: 2rpx solid #7FAD76;
+				filter: blur(0px);
+				border-radius: 20rpx;
+				text-align: center;
+				line-height: 60rpx;
+				color: #7FAD76;
 			}
 		}
 	}
+	.anniu {
+		padding: 0 90rpx;
+		width: 100%;
+		box-sizing: border-box;
+		position: fixed;
+		left: 0;
+		bottom: 112rpx;
+		button {
+			background: #7FAD76;
+			border-radius: 52rpx 52rpx 52rpx 52rpx;
+			color: #fff;
+		}
+	}
+	.mask {
+		width: 622rpx;
+		height: 710rpx;
+		background: #FFFFFF;
+		filter: blur(0px);
+		border-radius: 20rpx;
+		position: fixed;
+		top: 475rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		padding-top: 38rpx;
+		padding-left: 60rpx;
+		padding-right: 60rpx;
+		box-sizing: border-box;
+		.titles {
+			font-size: 48rpx;
+			color: #262B37;
+			line-height: 70rpx;
+			text-align: center;
+			margin-bottom: 24rpx;
+		}
+		text {
+			display: block;
+			font-size: 32rpx;
+			color: #262B37;
+			line-height: 56rpx;
+			text-align: left;
+		}
+		button {
+			margin-top: 46rpx;
+			width: 266rpx;
+			height: 96rpx;
+			background: #7FAD76;
+			border-radius: 52rpx 52rpx 52rpx 52rpx;
+			color: #fff;
+			text-align: center;
+			line-height: 96rpx;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/myorder/returned/index.vue b/pages/myorder/returned/index.vue
index 72a1836..2ae34eb 100644
--- a/pages/myorder/returned/index.vue
+++ b/pages/myorder/returned/index.vue
@@ -1,202 +1,944 @@
 <template>
 	<view class="page">
-		<u-navbar title="已归还" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar>
-         <view class="listorder">
-         	<view class="title">
-         		<view class="date">
-         			<text>0天0小时10分钟9秒</text> <text>3.00</text>
-         		</view>
-				<view class="jine">
-					<text>使用时长</text> <text>订单金额</text>
-				</view>
-         	</view>
-			<view class="gjmx">
-				<view class="titles">
-					价格明细
-				</view>
-				<view class="mx">
-					<text>收费标准</text> <text>3.00元/小时，前5分钟免费，日封顶30.00元</text>
-				</view>
-				<view class="mx">
-					<text>租借方式</text> <text>微信免押</text>
-				</view>
-				<view class="mx">
-					<text>使用时长</text> <text>0天0小时10分钟9秒</text>
-				</view>
-				<view class="mx">
-					<text>付款金额</text> <text>￥3.00</text>
-				</view>
-				<view class="mx">
-					<text>订单金额</text> <text>￥3.00</text>
-				</view>
-			</view>
-			
-			<view class="guih">
-                <view class="ghtitle">
-                	租借信息
-                </view>
-                <view class="zj">
-                	<text>租借时间</text> <text>2024-04-08 15:05:21</text>
-                </view>	
-				<view class="zj">
-					<text>租借店铺</text> <text>久久红农家乐</text>
-				</view>						
-				<view class="zj">
-					<text>租借设备</text> <text>JXDD2138748956451</text>
-				</view>			
-				<view class="zj">
-					<text>租借电池</text> <text>JXDD21387489</text>
-				</view>			
-				<view class="zj">
-					<text>租借地点</text> <text>福建省宁德市福鼎市秦晖路附近久久红农家乐 </text>
-				</view>		
-				<view class="" style="font-size: 24rpx;color: #808080;line-height: 32rpx;margin-bottom: 18rpx;text-align: right;">
-					（朝阳路店）
-				</view>
-				<view class="zj">
-					<text>归还时间</text> <text>2024-04-08 15:15:30</text>
-				</view>			
-				<view class="zj">
-					<text>归还店铺</text> <text>久久红农家乐</text>
-				</view>			
-				<view class="zj">
-					<text>归还设备</text> <text>JXDD2138748956451</text>
-				</view>			
-				<view class="zj">
-					<text>归还地点</text> <text>福建省宁德市福鼎市秦晖路附近久久红农家乐</text>
-				</view>		
-					<view class="" style="font-size: 24rpx;color: #808080;line-height: 32rpx;margin-bottom: 18rpx;text-align: right;">
-						（朝阳路店）
-					</view>
-				<view class="zj">
-					<text>订单编号</text> <text>S1269876456368798741201 <text class="fz">复制</text> </text>
-				</view>			
-			</view>
-         </view>
-	
+		<u-navbar title="添加设备" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
+			height='50'></u-navbar>
+		<view class="iptbox" @click="backpage()">
 
+			<input type="text" class="ips" v-model="mac" placeholder=" " style="margin-left: 32rpx;" 
+				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="storeId" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
+				placeholder-class="my-placeholder" />
+		</view> -->
+		<view class="iptbox" @click="show=true">
+			<!-- <view class="" v-if="hardwareInfo.version">
+				版本：{{hardwareInfo.version}} 版本id:{{hardwareInfo.id}}
+			</view> -->
+			<view class="">
+				{{banben}}
+			</view>
+		</view>
+		<view class="tips" v-if="hardwareInfo.version">
+			版本介绍：{{hardwareInfo.instructions}}
+		</view>
+		<u-select v-model="show" :list="list" title='选择型号' @confirm="confirm"></u-select>
+
+		<view class="imgs" style="margin-top: 330rpx;">
+			<!-- @click="qrcode()" -->
+			<image src="https://lxnapi.ccttiot.com/bike/img/static/u9wFJhLZGm7rboSDySV4" mode="" >
+			</image>
+		</view>
+		<view class="btn" @click="bind()">
+			确认录入
+		</view>
+		<view class="bot_btn">
+
+			<view class="btn1" @click="Binddevice()">
+				蓝牙连接
+			</view>
+			<!-- <view class="btn1" @click="ring()" v-if="carstause">
+				响铃寻车
+			</view> -->
+
+			<view class="btn1" @click="open()" v-if="carstause">
+				开启浇水
+			</view>
+			<view class="btn1" @click="close()" v-if="carstause">
+				关闭浇水
+			</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>
 </template>
 
 <script>
+	const app = getApp();
+	var xBlufi = require("@/components/blufi/xBlufi.js");
+	let _this = null;
 	export default {
 		data() {
 			return {
-				
+				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,
+				banben: '请点击选择版本',
+				modelId: '',
+				bgc: {
+					backgroundColor: "#F7FAFE",
+				},
+				sn: '',
+				carstause: false,
+				isbands: false,
+				show: false,
+				list: [],
+				hardwareInfo: {},
+				showbind: false,
+                storeId:'',
+                deviceId:''
+
 			}
 		},
-		// 分享到好友（会话）
-		onShareAppMessage: function() {
-			return {
-				title: '绿小能',
-				path: '/pages/index/index'
+		onLoad(e) {
+			console.log(e);
+			this.mac = e.mac
+			this.Binddevice()
+			this.isbands = false
+			this.carstause = false
+			if(uni.getStorageSync('banben') || uni.getStorageSync('banbenid')){
+				this.banben = uni.getStorageSync('banben')
+				this.modelId = uni.getStorageSync('banbenid')
 			}
 		},
-		
-		// 分享到朋友圈  
-		onShareTimeline: function() {
-			return {
-				title: '绿小能',
-				query: '',
-				path: '/pages/index/index'
-			}
+		onShow() {
+			this.getlist()
 		},
-		onLoad() {
+		onUnload: function() {
+			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
+			wx.closeBLEConnection({
+				deviceId: this.deviceId,
+			})
+		},
+		onHide() {
+			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
+			xBlufi.notifyStartDiscoverBle({
+				'isStart': false
+			});
+		},
+		onBeforeUnmount() {
+			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
+			xBlufi.notifyStartDiscoverBle({
+				'isStart': false
+			});
+		},
+		watch: {
+
+
 
 		},
 		methods: {
-			
+			confirm(e) {
+				// console.log(e);
+				this.banben = e[0].label
+				this.modelId = e[0].value
+				uni.setStorageSync('banben', this.banben)
+				uni.setStorageSync('banbenid', this.modelId)
+			},
+			getlist() {
+				this.$u.get('/app/getAllModelList').then((res) => {
+					if (res.code === 200) {
+						this.Versionlist = res.data
+						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 = res.data.map(item => ({
+							value: item.modelId,
+							label: item.modelName
+						}));
+					} 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时表示返回的页面层数
+							});
+						}, 2000)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				})
+			},
+			// 新增and替换设备
+			// gettihuan(){
+			// 	let data = {
+			// 		// sn: this.storeId,
+			// 		mac: this.mac,
+			// 		modelId: this.modelId
+			// 	}
+			// 	this.$u.post(`/app/band?mac=${this.mac}&modelId=${this.modelId}`, data).then((res) => {
+			// 		if (res.code == 200) {
+			// 			uni.showToast({
+			// 				title: res.msg,
+			// 				icon: 'success',
+			// 				duration: 2000
+			// 			})
+			// 			wx.closeBLEConnection({
+			// 				deviceId: this.deviceId,
+			// 			})
+			// 			setTimeout(()=>{
+			// 				uni.navigateTo({
+			// 					url:'/page_user/wifijoint/index?sn=' + this.storeId
+			// 				})
+			// 			},1500)
+			// 		} else {
+			// 			uni.showToast({
+			// 				title: res.msg,
+			// 				icon: 'none',
+			// 				duration: 2000
+			// 			});
+			// 		}
+			// 	})
+			// },
+			bind() {
+				let data = {
+					// sn: this.storeId,
+					mac: this.mac,
+					modelId: this.modelId
+				}
+				this.$u.post(`/appVerify/band?mac=${this.mac}&modelId=${this.modelId}`, data).then((res) => {
+					if (res.code == 200) {
+						uni.showToast({
+							title: res.msg,
+							icon: 'success',
+							duration: 2000
+						})
+						wx.closeBLEConnection({
+							deviceId: this.deviceId,
+						})
+						// setTimeout(()=>{
+						// 	uni.navigateTo({
+						// 		url:'/page_user/wifijoint/index?sn=' + this.storeId
+						// 	})
+						// },1500)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				})
+				// this.$u.get(`/app/device/admin/byMac?mac=${this.mac}`).then(res =>{
+				// 	if(res.code == 200){
+				// 		if(res.data == '' || res.data == null){
+    //                        this.gettihuan()
+				// 		}else{
+				// 			let that = this
+				// 			uni.showModal({
+				// 			    title: '温馨提示',  
+				// 			    content: '该设备已绑定SN，您确定修改该设备的SN吗？',  
+				// 			    success: (resModal) => {  
+				// 			        if (resModal.confirm) { 
+				// 						that.gettihuan()
+				// 			        } else if (resModal.cancel) { // 用户点击了取消按钮  
+				// 			            uni.showToast({  
+				// 			                title: '已取消',  
+				// 			                icon: 'none',  
+				// 			                duration: 1000  
+				// 			            })
+				// 			        }  
+				// 			    }  
+				// 			})
+				// 		}
+				// 	}else{
+				// 		uni.showToast({
+				// 			title: res.msg,
+				// 			icon: 'success',
+				// 			duration: 2000
+				// 		})
+				// 	}
+				// })
+			},
+			qrcode() {
+				uni.scanCode({
+					onlyFromCamera: true,
+					scanType: ['qrCode'],
+					success: res => {
+						function getQueryParam(url, paramName) {
+							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
+							let results = regex.exec(url);
+							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
+						}
+						let sceneValue = res.result
+						let decodedValue = decodeURIComponent(sceneValue)
+						let id = getQueryParam(decodedValue, 's')
+						this.storeId = id
+					},
+					fail: err => {
+						console.error('扫描失败：', err)
+						uni.showToast({
+							title: '扫描失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+
+			Binddevice() {
+				uni.showLoading({
+					title: '连接中..'
+				})
+				xBlufi.initXBlufi(1);
+				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;
+							// console.log(this.devicesList,'this.devicesListthis.devicesList');
+							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.ishave = true;
+									this.createBLEConnection(device)
+
+									console.log('对比正确1111111111');
+								} else {
+									console.log('对比错误');
+
+								}
+							});
+						}
+					}, 200)
+					// 判断是否存在浇花器设备
+
+					// this.status = true
+				}, 2000)
+
+			},
+			reboot() {
+				let vm = this; // 将外部的 this 绑定到 vm 上
+				uni.getNetworkType({
+					success(res) {
+						if (res.networkType !== 'none') {
+							uni.getConnectedBluetoothDevices({
+								success(res) {
+									console.log('已连接的蓝牙设备信息：', res);
+									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
+									xBlufi.notifySendCustomData({
+										customData: "11reboot"
+									});
+									// uni.hideLoading()
+									// vm.remakr()
+								},
+								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);
+									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
+									xBlufi.notifySendCustomData({
+										customData: "11open"
+									});
+									// uni.hideLoading()
+									// vm.remakr()
+								},
+								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);
+									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
+									xBlufi.notifySendCustomData({
+										customData: "11close"
+									});
+									// uni.hideLoading()
+									// vm.remakr()
+								},
+								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);
+									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
+									xBlufi.notifySendCustomData({
+										customData: "11play1@"
+									});
+									// uni.hideLoading()
+									// vm.remakr()
+								},
+								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) {
+							let devicesarr = options.data
+							// this.devicesList = 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();
+							this.carstause = true
+							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) {
+
+						} 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.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
+				});
+			},
+			// 点击重新搜索
+			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.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 {
-		// background-color: ;
-		background: linear-gradient( 180deg, #25CE88 0%, rgba(255,255,255,0) 100%);
-		border-radius: 0rpx 0rpx 0rpx 0rpx;
+		overflow-x: hidden;
+		background-color: #F3F3F3;
 	}
 
 	.page {
+		padding-bottom: 250rpx;
 		width: 750rpx;
-		padding-left: 34rpx;
-		padding-right: 34rpx;
-		box-sizing: border-box;
-        position: fixed;
-		top: 0;
-		left: 0;
-		.listorder{
-			margin-top: 32rpx;
-			width: 100%;
-			height: 100%;
-			background-color: #fff;
-			border-radius: 30rpx;
-			padding: 32rpx;
-			box-sizing: border-box;
-			.title{
-				border-bottom: 1px solid #ccc;
-				padding-bottom: 20rpx;
-				margin-bottom: 28rpx;
-				.date{
+        height: 100%;
+		.tip_box {
+			position: fixed;
+			left: 72rpx;
+			top: 628rpx;
+			width: 610rpx;
+			// height: 282rpx;
+			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;
-					justify-content: space-between;
-					font-weight: 500;
-					font-size: 40rpx;
-					color: #3D3D3D;
-					line-height: 54rpx;
-				}
-				.jine{
-					display: flex;
-					justify-content: space-between;
-					font-weight: 400;
-					font-size: 24rpx;
-					color: #666666;
-					line-height: 32rpx;
-					margin-top: 12rpx;
-				}
-			}
-			.gjmx{
-				border-bottom: 1px solid #ccc;
-				padding-bottom: 14rpx;
-				.titles{
-					font-weight: 500;
-					font-size: 32rpx;
-					color: #333333;
-					margin-bottom: 30rpx;
-				}
-				.mx{
-					display: flex;
-					justify-content: space-between;
-					font-size: 24rpx;
-					color: #808080;
-					line-height: 32rpx;
-					margin-bottom: 18rpx;
-				}
-			}
-			.guih{
-				margin-top: 24rpx;
-				.ghtitle{
-					font-weight: 500;
-					font-size: 32rpx;
-					color: #333333;
-					margin-bottom: 30rpx;
-				}
-				.zj{
-					display: flex;
-					justify-content: space-between;
-					font-size: 24rpx;color: #808080;line-height: 32rpx;margin-bottom: 18rpx;
-					.fz{
-						display: inline-block;
-						border: 1px solid #ccc;
-						border-radius: 10rpx;
-						padding: 5rpx 10px;
-						text-align: center;
-						margin-left: 10rpx;
+					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;
+				// border-top: 2rpx solid #D8D8D8;
+				display: flex;
+				flex-wrap: nowrap;
+				// height: 100%;
+				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: #7FAD76;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					color: #FFFFFF;
+					// border-left: 2rpx solid #D8D8D8;
+					font-weight: 500;
+					font-size: 32rpx;
+					// color: #4C97E7;
+
+				}
+
 			}
-		
 		}
+
+
+		.imgs {
+			margin-top: 50rpx;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+
+			image {
+				width: 400rpx;
+				height: 400rpx;
+			}
+		}
+
+		.btn {
+
+			margin: 160rpx auto;
+			margin-top: 30rpx;
+			// position: fixed;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			// bottom: 100rpx;
+			// left: 46rpx;
+			width: 658rpx;
+			height: 88rpx;
+			background: #7FAD76;
+			border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #FFFFFF;
+		}
+
+		.tips {
+			margin: 28rpx auto 0;
+			width: 658rpx;
+		}
+
+		.iptbox {
+			display: flex;
+			align-items: center;
+			flex-wrap: nowrap;
+			padding: 22rpx;
+			margin: 28rpx auto 0;
+			width: 658rpx;
+			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 {
+			position: fixed;
+			bottom: 0;
+			display: flex;
+			flex-wrap: wrap;
+			padding: 40rpx 18rpx;
+			width: 750rpx;
+			// height: 330rpx;
+			background: #fff;
+			// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
+			border-radius: 0rpx 0rpx 0rpx 0rpx;
+
+			.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 #7FAD76;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #3D3D3D;
+			}
+		}
+
+
+
 	}
 </style>
\ No newline at end of file