Browse Source

蓝牙连接页面

lilei 4 years ago
parent
commit
7be3dfd2f9
3 changed files with 146 additions and 52 deletions
  1. 57 36
      pages/index/index.vue
  2. 87 3
      pages/userAuth/userAuth.vue
  3. 2 13
      store/index.js

+ 57 - 36
pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
 	<view class="content">
 	<view class="content">
-		<view class="cz-box" @click="toWork">
+		<view class="cz-box" :class="loading?'turn':''" @click="toWork">
 			<u-image width="100rpx" height="100rpx" src="/static/chengzhong.png"></u-image>
 			<u-image width="100rpx" height="100rpx" src="/static/chengzhong.png"></u-image>
 			<view class="tits">投放称重</view>
 			<view class="tits">投放称重</view>
 		</view>
 		</view>
@@ -8,12 +8,12 @@
 			{{statusStr}}
 			{{statusStr}}
 		</view>
 		</view>
 		<view class="devList">
 		<view class="devList">
-			<view @click="connectBlue(item)" v-for="item in deviceList" :key="item.deviceId">
+			<view v-for="item in deviceList" :key="item.deviceId">
 				<view class="names">
 				<view class="names">
 					<view>{{item.name}}</view>
 					<view>{{item.name}}</view>
 					<view class="texts">MAC:{{item.deviceId}}</view>
 					<view class="texts">MAC:{{item.deviceId}}</view>
 				</view>
 				</view>
-				<view class="btns" v-if="!connectStatus">点击连接</view>
+				<view class="btns" @click="connectBlue(item)" v-if="!connectStatus">点击连接</view>
 				<view class="btns" @click="closeConnect" v-else>断开连接</view>
 				<view class="btns" @click="closeConnect" v-else>断开连接</view>
 			</view>
 			</view>
 		</view>
 		</view>
@@ -35,15 +35,13 @@
 				balanceData: '',
 				balanceData: '',
 				hexstr: '',
 				hexstr: '',
 				statusStr: '绑定电子秤',
 				statusStr: '绑定电子秤',
-				connectStatus: false // 设备连接状态
+				connectStatus: false ,// 设备连接状态
+				loading: false // 正在连接
 			}
 			}
 		},
 		},
 		methods: {
 		methods: {
 			// 去认证用户并开始称重
 			// 去认证用户并开始称重
 			toWork(){
 			toWork(){
-				uni.navigateTo({
-					url: '/pages/userAuth/userAuth'
-				})
 				// 连接成功
 				// 连接成功
 				if(this.connectStatus){
 				if(this.connectStatus){
 					uni.navigateTo({
 					uni.navigateTo({
@@ -61,31 +59,11 @@
 				}
 				}
 			},
 			},
 			toFindDev(){
 			toFindDev(){
-				if(this.connectStatus){
+				if(this.connectStatus || this.deviceList.length > 0){
 					return
 					return
 				}
 				}
 				let _this = this
 				let _this = this
 				const res = uni.getSystemInfoSync();
 				const res = uni.getSystemInfoSync();
-				// 初始化蓝牙模块
-				uni.openBluetoothAdapter({
-				  success(res) {
-				    console.log(res)
-					_this.statusStr = '初始化蓝牙模块成功'
-					/* 获取本机的蓝牙状态 */
-					setTimeout(() => {
-						_this.init()
-					}, 1000)
-				  }
-				})
-				// 监听蓝牙适配器状态变化事件
-				uni.onBluetoothAdapterStateChange(function (res) {
-				  console.log(res,'适配器变化')
-				  _this.statusStr = res.available ? '蓝牙已开启,点击重连' : '蓝牙已关闭,请开启手机蓝牙'
-				  if(!res.available){
-					  _this.closeConnect()
-				  }
-				})
-				
 				if(!res.bluetoothEnabled){
 				if(!res.bluetoothEnabled){
 					uni.showModal({
 					uni.showModal({
 						title:'提示',
 						title:'提示',
@@ -96,7 +74,31 @@
 							_this.statusStr = '请开启手机蓝牙'
 							_this.statusStr = '请开启手机蓝牙'
 						}
 						}
 					})
 					})
+				}else{
+					_this.loading = true
+					// 初始化蓝牙模块
+					uni.openBluetoothAdapter({
+					  success(res) {
+					    console.log(res)
+						_this.statusStr = '初始化蓝牙模块成功'
+						/* 获取本机的蓝牙状态 */
+						setTimeout(() => {
+							_this.init()
+						}, 1000)
+					  }
+					})
 				}
 				}
+				
+				// 监听蓝牙适配器状态变化事件
+				uni.onBluetoothAdapterStateChange(function (res) {
+				  console.log(res,'适配器变化')
+				  if(this.connectStatus){
+					  _this.statusStr = res.available ? '蓝牙已开启,点击重连' : '蓝牙已关闭,请开启手机蓝牙'
+				  }
+				  if(!res.available){
+				  	_this.closeConnect()
+				  }
+				})
 			},
 			},
 			// 初始化蓝牙
 			// 初始化蓝牙
 			init(){
 			init(){
@@ -126,6 +128,7 @@
 					  if(devices.length){
 					  if(devices.length){
 						  _this.statusStr = '发现设备'
 						  _this.statusStr = '发现设备'
 						  _this.deviceList = res.devices
 						  _this.deviceList = res.devices
+						  _this.loading = false
 					  }
 					  }
 					})
 					})
 				  }
 				  }
@@ -133,6 +136,8 @@
 			},
 			},
 			connectBlue(item){
 			connectBlue(item){
 				this.deviceId = item.deviceId
 				this.deviceId = item.deviceId
+				this.statusStr = '正在连接设备...'
+				this.loading = true
 				this.createBLEConnection()
 				this.createBLEConnection()
 			},
 			},
 			// 开始连接指定设备
 			// 开始连接指定设备
@@ -143,7 +148,6 @@
 				  deviceId:this.deviceId,
 				  deviceId:this.deviceId,
 				  success(res) {
 				  success(res) {
 				    console.log(res)
 				    console.log(res)
-					_this.statusStr = '正在连接设备...'
 					_this.connectedDeviceId = _this.deviceId
 					_this.connectedDeviceId = _this.deviceId
 					// 获取连接设备的service服务
 					// 获取连接设备的service服务
 					setTimeout(()=>{
 					setTimeout(()=>{
@@ -219,14 +223,16 @@
 					characteristicId: that.readsId,
 					characteristicId: that.readsId,
 					success(res) {
 					success(res) {
 						console.log(res,'notifyBLECharacteristicValueChange')
 						console.log(res,'notifyBLECharacteristicValueChange')
-						that.statusStr = '连接成功,请点击投放称重'
+						that.statusStr = '连接成功,请投放称重'
 						that.connectStatus = true
 						that.connectStatus = true
+						that.loading = false
 						/*用来监听手机蓝牙设备的数据变化*/
 						/*用来监听手机蓝牙设备的数据变化*/
 						uni.onBLECharacteristicValueChange(function(res) {
 						uni.onBLECharacteristicValueChange(function(res) {
 							console.log(res,'read data')
 							console.log(res,'read data')
 							that.balanceData = that.buf2string(res.value)
 							that.balanceData = that.buf2string(res.value)
+							that.$u.vuex('vuex_balanceData',that.balanceData)
 						})
 						})
-						that.sendData()
+						// that.sendData()
 					},
 					},
 					fail(res) {
 					fail(res) {
 						console.log(res, '启用低功耗蓝牙设备监听失败')
 						console.log(res, '启用低功耗蓝牙设备监听失败')
@@ -317,6 +323,7 @@
 						console.log(res,'closeBluetoothAdapter')
 						console.log(res,'closeBluetoothAdapter')
 						that.statusStr = '绑定电子秤'
 						that.statusStr = '绑定电子秤'
 						that.connectStatus = false
 						that.connectStatus = false
+						that.loading = false
 						that.balanceData = ''
 						that.balanceData = ''
 						that.deviceList = []
 						that.deviceList = []
 			        },
 			        },
@@ -337,7 +344,7 @@
 		align-items: center;
 		align-items: center;
 		justify-content: center;
 		justify-content: center;
 		flex-direction: column;
 		flex-direction: column;
-		background-image: linear-gradient(#24c4ff,#1a9ecf);
+		background-image: radial-gradient(ellipse at bottom, #00aaff 0%, #0081c1 100%);
 		height: 100vh;
 		height: 100vh;
 		width: 100%;
 		width: 100%;
 	}
 	}
@@ -365,14 +372,18 @@
 	}
 	}
 	.bindDev{
 	.bindDev{
 		margin: 30rpx 0;
 		margin: 30rpx 0;
+		padding: 10rpx 40rpx;
+		box-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
+		border-radius: 100rpx;
+		color: #fff;
 	}
 	}
-	.devList > view, .bindDev{
+	.devList > view{
 		display: flex;
 		display: flex;
 		align-items: center;
 		align-items: center;
-		color: #ffff;
+		color: #00aaff;
 		border-radius: 100rpx;
 		border-radius: 100rpx;
-		background: rgba(255,255,255,0.5);
-		padding: 10rpx 40rpx;
+		background: rgba(255,255,255,0.8);
+		padding: 15rpx 40rpx;
 		box-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
 		box-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
 	}
 	}
 	.devList > view .names{
 	.devList > view .names{
@@ -384,4 +395,14 @@
 	.devList > view .btns{
 	.devList > view .btns{
 		text-align: center;
 		text-align: center;
 	}
 	}
+	.turn{
+		animation:turn 1s linear infinite;
+	}
+	@keyframes turn{
+	  0%{-webkit-transform:rotate(0deg);}
+	  25%{-webkit-transform:rotate(90deg);}
+	  50%{-webkit-transform:rotate(180deg);}
+	  75%{-webkit-transform:rotate(270deg);}
+	  100%{-webkit-transform:rotate(360deg);}
+	}
 </style>
 </style>

+ 87 - 3
pages/userAuth/userAuth.vue

@@ -11,7 +11,7 @@
 			<view class="form-row form-flex">
 			<view class="form-row form-flex">
 				<view><text class="red">*</text>投递手机号</view>
 				<view><text class="red">*</text>投递手机号</view>
 				<view>
 				<view>
-					<u-input type="number" input-align="right" :custom-style="{color: '#666'}" :maxlength="11" placeholder="请输入手机号码"></u-input>
+					<u-input v-modal="formData.phone" type="number" input-align="right" :custom-style="{color: '#666'}" :maxlength="11" placeholder="请输入手机号码"></u-input>
 				</view>
 				</view>
 			</view>
 			</view>
 			<view class="form-row">
 			<view class="form-row">
@@ -37,7 +37,29 @@
 			</view>
 			</view>
 		</view>
 		</view>
 		<view class="step2" v-if="current==1">
 		<view class="step2" v-if="current==1">
-			第二步
+			<view class="form-row form-flex">
+				<view>投递手机号</view>
+				<view>13709146191</view>
+			</view>
+			<view class="form-row form-flex">
+				<view>用户乐豆余额</view>
+				<view><text class="nums">560</text></view>
+			</view>
+			<view class="form-row form-flex">
+				<view>投递类型</view>
+				<view>
+					废旧衣服
+					<text class="des">(200g/1乐豆)</text>
+				</view>
+			</view>
+			<view class="form-row form-flex">
+				<view>投递重量</view>
+				<view><text class="nums">{{balanceData}}g</text></view>
+			</view>
+			<view class="form-row form-flex">
+				<view>可兑换乐豆数</view>
+				<view><text class="nums">10</text></view>
+			</view>
 		</view>
 		</view>
 		<view class="buttons">
 		<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==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
@@ -63,12 +85,65 @@
 				formData:{
 				formData:{
 					address: '',
 					address: '',
 					phone: '',
 					phone: '',
-					washType: ''
+					washType: '0'
 				}
 				}
 			}
 			}
 		},
 		},
+		computed: {
+			balanceData() {
+				let data = this.$store.state.vuex_balanceData
+				console.log(data.split(','))
+				let weight = data.split(',')[2]
+				let uit = ''
+				let fh = ''
+				weight = weight.replace('\n','')
+				
+				// 符号位
+				if(weight.indexOf('+')>=0){
+					fh = '+'
+				}
+				if(weight.indexOf('-')>=0){
+					fh = '-'
+				}
+				
+				// 解析数字
+				if(weight.indexOf('kg')>0){
+					weight = weight.replace(/\+|-|[kg]/g,'')
+					console.log(weight,'kg-weight')
+					weight = Number(weight) * 1000
+					uit = 'kg'
+				}else if(weight.indexOf('lb')>0){
+					weight = weight.replace(/\+|-|[lb]/g,'')
+					console.log(weight,'lb-weight')
+					weight = Math.floor(Number(weight) * 453.59237)
+					uit = 'lb'
+				}else{
+					weight = weight.replace(/\+|-|g/g,'')
+					console.log(weight,'g-weight')
+					weight = Number(weight)
+					uit = 'g'
+				}
+				console.log(weight,uit,fh,'weight end')
+				return fh + weight
+			}
+		},
 		methods: {
 		methods: {
 			next(){
 			next(){
+				if(this.formData.phone == ''){
+					uni.showToast({
+						icon: 'none',
+						title: '请输入手机号码'
+					})
+					return
+				}
+				if(this.formData.washType == ''){
+					uni.showToast({
+						icon: 'none',
+						title: '请选择投递类型'
+					})
+					return
+				}
+				
 				this.current = this.current + 1
 				this.current = this.current + 1
 			},
 			},
 			prev(){
 			prev(){
@@ -112,6 +187,15 @@
 			color: red;
 			color: red;
 			margin-right: 6rpx;
 			margin-right: 6rpx;
 		}
 		}
+		.des{
+			color: #666;
+			margin-left: 5rpx;
+			font-size: 24rpx;
+		}
+		.nums{
+			color: red;
+			margin-right: 5rpx;
+		}
 	}
 	}
 	.form-grid{
 	.form-grid{
 		display: flex;
 		display: flex;

+ 2 - 13
store/index.js

@@ -18,11 +18,7 @@ let saveStateKeys = [
 	'vuex_userData',
 	'vuex_userData',
 	'vuex_payType',
 	'vuex_payType',
 	'vuex_payStatus',
 	'vuex_payStatus',
-	'vuex_storeId',
-	'vuex_bizId',
-	'vuex_orderNo',
-	'vuex_orderStatus',
-	'vuex_cartNums'
+	'vuex_balanceData'
 ];
 ];
 
 
 // 保存变量到本地存储中
 // 保存变量到本地存储中
@@ -102,14 +98,7 @@ const store = new Vuex.Store({
 		vuex_userData: lifeData.vuex_userData ? lifeData.vuex_userData : '',
 		vuex_userData: lifeData.vuex_userData ? lifeData.vuex_userData : '',
 		vuex_payType: lifeData.vuex_payType ? lifeData.vuex_payType : [], // 支付方式数据字典
 		vuex_payType: lifeData.vuex_payType ? lifeData.vuex_payType : [], // 支付方式数据字典
 		vuex_payStatus: lifeData.vuex_payStatus ? lifeData.vuex_payStatus : [], // 支付状态数据字典
 		vuex_payStatus: lifeData.vuex_payStatus ? lifeData.vuex_payStatus : [], // 支付状态数据字典
-		// 订单信息
-		vuex_storeId: lifeData.vuex_storeId ? lifeData.vuex_storeId : '',// 网点id
-		vuex_bizId: lifeData.vuex_bizId ? lifeData.vuex_bizId : '',// 设备编号
-		vuex_orderNo: lifeData.vuex_orderNo ? lifeData.vuex_orderNo : '',// 订单编号
-		vuex_orderStatus: lifeData.vuex_orderStatus ? lifeData.vuex_orderStatus : '',// 订单状态
-		// 购物车及下单
-		vuex_cartList: [],
-		vuex_toOrderList: [],
+		vuex_balanceData: lifeData.vuex_balanceData ? lifeData.vuex_balanceData : '', // 称重重量
 		// 如果无需保存到本地永久存储,无需lifeData.xx方式
 		// 如果无需保存到本地永久存储,无需lifeData.xx方式
 		vuex_socket: null,
 		vuex_socket: null,
 		vuex_wsMessageData: '',
 		vuex_wsMessageData: '',