瀏覽代碼

认证页面

lilei 4 年之前
父節點
當前提交
89b2c4379c
共有 4 個文件被更改,包括 284 次插入50 次删除
  1. 9 0
      pages.json
  2. 121 50
      pages/index/index.vue
  3. 154 0
      pages/userAuth/userAuth.vue
  4. 二進制
      static/chengzhong.png

+ 9 - 0
pages.json

@@ -75,6 +75,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/userAuth/userAuth",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "投放称重",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 121 - 50
pages/index/index.vue

@@ -1,8 +1,21 @@
 <template>
 	<view class="content">
-		<view class="cz-box" @click="toFindDev">
-			<u-image width="150rpx" height="150rpx" src="/static/chengzhong.png"></u-image>
-			<view class="tits">{{statusStr}}</view>
+		<view class="cz-box" @click="toWork">
+			<u-image width="100rpx" height="100rpx" src="/static/chengzhong.png"></u-image>
+			<view class="tits">投放称重</view>
+		</view>
+		<view class="bindDev" @click="toFindDev">
+			{{statusStr}}
+		</view>
+		<view class="devList">
+			<view @click="connectBlue(item)" v-for="item in deviceList" :key="item.deviceId">
+				<view class="names">
+					<view>{{item.name}}</view>
+					<view class="texts">MAC:{{item.deviceId}}</view>
+				</view>
+				<view class="btns" v-if="!connectStatus">点击连接</view>
+				<view class="btns" @click="closeConnect" v-else>断开连接</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -15,16 +28,42 @@
 				deviceId: '',
 				connectedDeviceId: '',
 				services: [],
-				notifyCharacteristicsId:'',
+				readsId:'',
+				writeId:'',
 				notifyServicweId: '',
 				writeDatas: '',
 				balanceData: '',
 				hexstr: '',
-				statusStr: '投放称重'
+				statusStr: '绑定电子秤',
+				connectStatus: false // 设备连接状态
 			}
 		},
 		methods: {
+			// 去认证用户并开始称重
+			toWork(){
+				uni.navigateTo({
+					url: '/pages/userAuth/userAuth'
+				})
+				// 连接成功
+				if(this.connectStatus){
+					uni.navigateTo({
+						url: '/pages/userAuth/userAuth'
+					})
+				}else{
+					uni.showModal({
+						title:'提示',
+						content:'请先绑定并连接电子秤',
+						showCancel: false,
+						complete(e) {
+							console.log(e)
+						}
+					})
+				}
+			},
 			toFindDev(){
+				if(this.connectStatus){
+					return
+				}
 				let _this = this
 				const res = uni.getSystemInfoSync();
 				// 初始化蓝牙模块
@@ -41,12 +80,17 @@
 				// 监听蓝牙适配器状态变化事件
 				uni.onBluetoothAdapterStateChange(function (res) {
 				  console.log(res,'适配器变化')
+				  _this.statusStr = res.available ? '蓝牙已开启,点击重连' : '蓝牙已关闭,请开启手机蓝牙'
+				  if(!res.available){
+					  _this.closeConnect()
+				  }
 				})
 				
 				if(!res.bluetoothEnabled){
 					uni.showModal({
 						title:'提示',
 						content:'请开启手机蓝牙',
+						showCancel: false,
 						complete(e) {
 							console.log(e)
 							_this.statusStr = '请开启手机蓝牙'
@@ -60,7 +104,7 @@
 				uni.getBluetoothAdapterState({
 				  success(res) {
 				    console.log(res)
-					_this.statusStr = 'adapterState changed, now is'
+					_this.statusStr = '开始搜寻附近的电子秤'
 					// 开始搜寻附近的蓝牙外围设备
 					_this.startBluetoothDevicesDiscovery()
 				  },
@@ -77,25 +121,20 @@
 				    console.log(res)
 					// 监听寻找到新设备的事件
 					uni.onBluetoothDeviceFound(function (res) {
-					  _this.deviceList = res.devices
-					  let devices = _this.deviceList.filter(item => item.name == 'FAYA')
-					  console.dir(devices,'devices list')
-					  if(devices.length == 1){
+					  let devices = res.devices.filter(item => item.name == 'FAYA')
+					  console.log(devices,'devices list')
+					  if(devices.length){
 						  _this.statusStr = '发现设备'
-						  _this.deviceId = devices[0].deviceId
-						  _this.createBLEConnection()
-					  }
-					  else if(devices.length > 1){
-						  
+						  _this.deviceList = res.devices
 					  }
-					  else{
-						  _this.statusStr = '没有找到电子秤'
-					  }
-					  
 					})
 				  }
 				})
 			},
+			connectBlue(item){
+				this.deviceId = item.deviceId
+				this.createBLEConnection()
+			},
 			// 开始连接指定设备
 			createBLEConnection(){
 				let _this = this
@@ -104,7 +143,7 @@
 				  deviceId:this.deviceId,
 				  success(res) {
 				    console.log(res)
-					_this.statusStr = '连接设备成功'
+					_this.statusStr = '正在连接设备...'
 					_this.connectedDeviceId = _this.deviceId
 					// 获取连接设备的service服务
 					setTimeout(()=>{
@@ -121,7 +160,7 @@
 				  deviceId: _this.deviceId,
 				  success(res) {
 				    console.log('device services:', res.services)
-					_this.statusStr = '获取连接设备的service服务成功'
+					// _this.statusStr = '获取连接设备的service服务成功'
 					_this.services = res.services
 					/* 获取连接设备的所有特征值 */
 					setTimeout(()=>{
@@ -147,18 +186,22 @@
 					serviceId: this.notifyServicweId,
 					success: function(res) {
 						console.log(res)
-						_this.statusStr = '获取连接设备的所有特征值成功'
+						// _this.statusStr = '获取连接设备的所有特征值成功'
 						for (let i = 0; i < res.characteristics.length; i++) {
-							if ((res.characteristics[i].properties.notify || res.characteristics[i].properties.indicate) &&
-								(res.characteristics[i].properties.read && res.characteristics[i].properties.write)) {
-								console.log(res.characteristics[i].uuid, '蓝牙特征值 ==========')
-								/* 获取蓝牙特征值 */
-								_this.notifyCharacteristicsId = res.characteristics[i].uuid
-								// 启用低功耗蓝牙设备特征值变化时的 notify 功能
-								setTimeout(()=>{
-									_this.notifyBLECharacteristicValueChange()
-								},500)
+							let properties = res.characteristics[i].properties
+							// 读id
+							if(properties.notify&&!properties.read&&!properties.write){
+								_this.readsId = res.characteristics[i].uuid
 							}
+							// 写id
+							if(!properties.notify&&!properties.read&&properties.write){
+								_this.writeId = res.characteristics[i].uuid
+							}
+							console.log(_this.readsId,_this.writeId, '蓝牙特征值 ==========')
+							// 启用低功耗蓝牙设备特征值变化时的 notify 功能
+							setTimeout(()=>{
+								_this.notifyBLECharacteristicValueChange()
+							},500)
 						}
 					},
 					fail: function(res) {
@@ -169,25 +212,26 @@
 			// 启用低功耗蓝牙设备特征值变化时的 notify 功能
 			 notifyBLECharacteristicValueChange() { 
 				let that = this;
-				console.log(that.connectedDeviceId,that.notifyServicweId,that.notifyCharacteristicsId)
 				uni.notifyBLECharacteristicValueChange({
 					state: true,
 					deviceId: that.connectedDeviceId,
 					serviceId: that.notifyServicweId,
-					// characteristicId: that.notifyCharacteristicsId,
-					characteristicId: '49535343-1E4D-4BD9-BA61-23C647249616',
+					characteristicId: that.readsId,
 					success(res) {
 						console.log(res,'notifyBLECharacteristicValueChange')
-						that.statusStr = '启用低功耗蓝牙设备特征值变化成功'
+						that.statusStr = '连接成功,请点击投放称重'
+						that.connectStatus = true
 						/*用来监听手机蓝牙设备的数据变化*/
 						uni.onBLECharacteristicValueChange(function(res) {
 							console.log(res,'read data')
 							that.balanceData = that.buf2string(res.value)
-							// that.hexstr = that.receiveData(res.value)
 						})
+						that.sendData()
 					},
 					fail(res) {
 						console.log(res, '启用低功耗蓝牙设备监听失败')
+						that.statusStr = '设备连接失败,请点击重试'
+						that.closeConnect()
 					}
 				})
 			},
@@ -228,23 +272,19 @@
 			    let that = this;
 			    let dataBuffer = new ArrayBuffer(3)
 			    let dataView = new DataView(dataBuffer)
-			    // for (let i = 0; i < str.length; i++) {
-			    //     dataView.setUint8(i, str.charAt(i).charCodeAt())
-			    // }
+			     
 				dataView.setUint8(0, 0x02)
-				dataView.setUint8(1, 0x42)
+				dataView.setUint8(1, 0x41)
 				dataView.setUint8(2, 0x03)
 			    let dataHex = that.ab2hex(dataBuffer);
 			    this.writeDatas = that.hexCharCodeToStr(dataHex);
 			    uni.writeBLECharacteristicValue({
 			        deviceId: that.connectedDeviceId,
 			        serviceId: that.notifyServicweId,
-			        characteristicId: that.notifyCharacteristicsId,
-					// characteristicId: '49535343-1E4D-4BD9-BA61-23C647249616',
+			        characteristicId: that.writeId,
 			        value: dataBuffer,
 			        success: function (res) {
-			            console.log('发送的数据:' + that.writeDatas)
-			            console.log('message发送成功')
+			            console.log('发送数据成功:' + that.writeDatas)
 			        },
 			        fail: function (res) {
 						console.log('发送失败:' + res)
@@ -274,9 +314,11 @@
 				let that = this;
 			    uni.closeBluetoothAdapter({
 			        success: function(res) {
-						that.statusStr = '关闭蓝牙模块'
-						that.balanceData = ''
 						console.log(res,'closeBluetoothAdapter')
+						that.statusStr = '绑定电子秤'
+						that.connectStatus = false
+						that.balanceData = ''
+						that.deviceList = []
 			        },
 			        fail: function(err) {
 			        }
@@ -294,17 +336,20 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		flex-direction: column;
+		background-image: linear-gradient(#24c4ff,#1a9ecf);
 		height: 100vh;
 		width: 100%;
 	}
 	.cz-box{
 		text-align: center;
-		background-color: #FFFFFF;
+		background: #fff;
 		padding: 50rpx 50rpx 30rpx;
+		border:10rpx solid #ef9f2e;
 		border-radius: 300rpx;
-		box-shadow: 2rpx 2rpx 5rpx #eee;
-		width: 300rpx;
-		height: 300rpx;
+		box-shadow: 2rpx 2rpx 5rpx #916100;
+		width: 250rpx;
+		height: 250rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -312,5 +357,31 @@
 	}
 	.tits{
 		padding: 20rpx 0;
+		color: #ef9f2e;
+	}
+	.devList{
+		width: 80%;
+		padding:10rpx 30rpx;
+	}
+	.bindDev{
+		margin: 30rpx 0;
+	}
+	.devList > view, .bindDev{
+		display: flex;
+		align-items: center;
+		color: #ffff;
+		border-radius: 100rpx;
+		background: rgba(255,255,255,0.5);
+		padding: 10rpx 40rpx;
+		box-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
+	}
+	.devList > view .names{
+		flex-grow: 1;
+	}
+	.devList > view .texts{
+		font-size: 24rpx;
+	}
+	.devList > view .btns{
+		text-align: center;
 	}
 </style>

+ 154 - 0
pages/userAuth/userAuth.vue

@@ -0,0 +1,154 @@
+<template>
+	<view class="content">
+		<view class="steps">
+			<u-steps :list="numList" active-color="#00aaff" :current="current"></u-steps>
+		</view>
+		<view class="step1" v-if="current==0">
+			<view class="form-row form-flex">
+				<view><text class="red">*</text>网点名称</view>
+				<view>啊撒旦解放拉风小区</view>
+			</view>
+			<view class="form-row form-flex">
+				<view><text class="red">*</text>投递手机号</view>
+				<view>
+					<u-input type="number" input-align="right" :custom-style="{color: '#666'}" :maxlength="11" placeholder="请输入手机号码"></u-input>
+				</view>
+			</view>
+			<view class="form-row">
+				<view><text class="red">*</text>投递类型</view>
+				<view class="form-grid">
+					<view class="active">
+						<view>废旧纸张</view>
+						<view class="texts">200g/1乐豆</view>
+					</view>
+					<view>
+						<view>废旧纸张</view>
+						<view class="texts">200g/1乐豆</view>
+					</view>
+					<view>
+						<view>废旧纸张</view>
+						<view class="texts">200g/1乐豆</view>
+					</view>
+					<view>
+						<view>废旧纸张</view>
+						<view class="texts">200g/1乐豆</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="step2" v-if="current==1">
+			第二步
+		</view>
+		<view class="buttons">
+			<view v-if="current==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
+			<view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
+			<view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				customStyle: {
+					background: '#00aaff'
+				},
+				current: 0,
+				numList: [{
+					name: '用户认证'
+				}, {
+					name: '称重'
+				}],
+				formData:{
+					address: '',
+					phone: '',
+					washType: ''
+				}
+			}
+		},
+		methods: {
+			next(){
+				this.current = this.current + 1
+			},
+			prev(){
+				this.current = this.current - 1
+			},
+			submit(){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+.content{
+	width: 100%;
+	padding: 20rpx;
+	background-color: #FFFFFF;
+	.steps{
+		padding: 40rpx 0;
+		border-bottom: 1px solid #f8f8f8;
+	}
+	.form-flex{
+		display: flex;
+		align-items: center;
+		> view{
+			&:first-child{
+				width: 30%;
+			}
+			&:last-child{
+				width: 70%;
+				text-align: right;
+				color: #666;
+			}
+		}
+	}
+	.form-row{
+		border-bottom: 1px solid #f8f8f8;
+		padding: 20rpx 15rpx;
+		position: relative;
+		.red{
+			color: red;
+			margin-right: 6rpx;
+		}
+	}
+	.form-grid{
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		> view{
+			width: 45%;
+			border: 1px solid #eee;
+			margin: 20rpx 0;
+			padding: 20rpx;
+			border-radius: 6rpx;
+			text-align: center;
+			.texts{
+				font-size: 24rpx;
+				color: #999;
+				padding: 10rpx 0;
+			}
+		}
+		.active{
+			border-color: #ffaa00;
+			background-color: #ffd36a;
+			color: #FFFFFF;
+			.texts{
+				color: #FFFFFF;
+			}
+		}
+	}
+	.buttons{
+		padding: 50rpx 5%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		>view{
+			width: 50%;
+			padding: 0 5%;
+		}
+	}
+}
+</style>

二進制
static/chengzhong.png