123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585 |
- <template>
- <view class="bg">
- <view class="bgimg">
- <u-image width="622rpx" height="953rpx" src="/static/ldbg.png"></u-image>
- </view>
- <!-- 称重 -->
- <view class="content">
- <view @click="toTdRecord" class="tdrecord">投递记录</view>
- <view class="cz-box" @click="toWork">
- <view :class="loading?'turn':''">
- <u-image width="100rpx" height="100rpx" src="/static/chengzhong.png"></u-image>
- <view class="tits">投放称重</view>
- </view>
- </view>
- <view class="bindDev" @click="toInit">
- {{statusStr}}
- </view>
- <view class="devList">
- <view 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" @click="connectBlue(item)" v-if="!connectStatus">点击连接</view>
- <view class="btns" @click="closeBlue" v-else>断开连接</view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {getLookUpDatas} from '@/api/data.js'
- import { getUserInfo } from '@/api/user.js'
- export default {
- data() {
- return {
- deviceList:[], // 设备列表
- deviceId: null,
- iosMac: null,
- connectedDeviceId: '',
- services: [],
- readsId:'',
- writeId:'',
- notifyServicweId: '',
- writeDatas: '',
- balanceData: '',
- hexstr: '',
- statusStr: '绑定电子秤',
- connectStatus: false ,// 设备连接状态
- loading: false ,// 正在连接
- }
- },
- onLoad() {
- let _this = this
- uni.$on('blueReConnect',function(){
- uni.showLoading({
- mask: true,
- title: '正在重连中...'
- })
- _this.connectBlue()
- })
-
- // 系统信息
- const sysinfo = uni.getSystemInfoSync();
- this.platform = sysinfo.platform
- console.log(sysinfo,'sysinfo')
- },
- onShow() {
- // 获取订单状态数据字典
- // this.getCodeList('RUBBISH_TYPE','vuex_rubbishType')
- this.getUserInfo()
- },
- onUnload() {
- uni.$off('blueReConnect')
- },
- methods: {
- // 获取用户信息
- getUserInfo(){
- getUserInfo().then(res => {
- if(res.status == 200){
- this.$u.vuex('vuex_userData', res.data);
- }
- })
- },
- // 获取数据字典
- getCodeList(code,key) {
- getLookUpDatas({
- type: code
- }).then(res => {
- if (res.status == 200) {
- this.$u.vuex(key, res.data)
- }
- })
- },
- // 查看投递记录
- toTdRecord(){
- uni.navigateTo({
- url: '/pages/tdRecord/tdRecord'
- })
- },
- // 去认证用户并开始称重
- toWork(){
- let _this = this
- // 连接成功
- if(this.connectStatus){
- // ios 设备无法获取mac地址,请手动扫描电子秤的MAC条形码
- if(this.platform == 'ios'&&this.iosMac==null){
- uni.showModal({
- title:'提示',
- content: '苹果手机无法获取mac地址,请手动扫描电子秤的MAC条形码',
- confirmText: '去扫描',
- complete(e) {
- if(e.confirm){
- uni.scanCode({
- success(res) {
- console.log(res)
- _this.iosMac = res.result
- uni.navigateTo({
- url: '/pages/userAuth/userAuth?deviceId=' + _this.iosMac
- })
- }
- })
- }
- }
- })
- }else{
- // 安卓系统直接跳转
- uni.navigateTo({
- url: '/pages/userAuth/userAuth?deviceId=' + (this.platform == 'ios' ? _this.iosMac : _this.deviceId)
- })
- }
- }else{
- let hasDev = this.deviceList.length
- if(!this.loading){
- uni.showModal({
- title:'提示',
- content:hasDev ? '请先连接设备':'请先绑定设备',
- confirmText: hasDev ? '确定':'去绑定',
- complete(e) {
- console.log(e)
- if(e.confirm){
- if(hasDev == 1){
- _this.connectBlue(_this.deviceList[0])
- }
- if(hasDev == 0){
- _this.toInit()
- }
- }
- }
- })
- }
- }
- },
- // 初始化蓝牙
- toInit(){
- let _this = this
- if(this.connectStatus || this.deviceList.length > 0 || this.loading){
- return
- }
- uni.openBluetoothAdapter({
- success(res) {
- console.log(res, 'openBluetoothAdapter success')
- _this.onBluetoothAdapterStateChange()
- _this.loading = true
- setTimeout(()=>{
- _this.toFindDev()
- },600)
- },
- fail(err){
- console.log(err,'openBluetoothAdapter error')
- _this.loading = false
- uni.showModal({
- title:'提示',
- content:'请开启手机蓝牙',
- showCancel: false,
- complete(e) {
- console.log(e)
- _this.statusStr = '请开启手机蓝牙'
- }
- })
- }
- })
- },
- toFindDev(){
- let _this = this
- _this.statusStr = '开始搜寻附近的电子秤,请确认设备已开启'
- uni.getBluetoothAdapterState({
- success(res) {
- console.log(res)
- if(res.available){
- // 开始搜寻附近的蓝牙外围设备
- _this.startBluetoothDevicesDiscovery()
- }else{
- _this.statusStr = '请开启手机蓝牙'
- }
- },
- fail(err) {
- console.log(err)
- }
- })
- },
- // 监听蓝牙状态
- onBluetoothAdapterStateChange(){
- let _this = this
- // 监听蓝牙适配器状态变化事件
- uni.onBluetoothAdapterStateChange(function (res) {
- console.log(res,'适配器变化')
- if(!res.available){
- // 关闭连接
- _this.statusStr = '蓝牙已关闭,请开启手机蓝牙'
- _this.connectedDeviceId = null
- _this.closeConnect()
- }else{
- if(!res.discovering && !_this.loading){
- _this.statusStr = '蓝牙已启用,请绑定设备'
- }
- }
- })
- },
- startBluetoothDevicesDiscovery(){
- let _this = this
- uni.startBluetoothDevicesDiscovery({
- services: [],
- success(res) {
- console.log(res)
- // 监听寻找到新设备的事件
- uni.onBluetoothDeviceFound(function (res) {
- let devices = res.devices.filter(item => item.name == 'FAYA')
- const hasDev = _this.deviceList.find(item => item.deviceId == res.devices[0].deviceId)
- console.log(devices,hasDev,'devices list')
- if(devices.length&&!hasDev){
- _this.statusStr = '已发现设备'
- _this.deviceList = _this.deviceList.concat(res.devices)
- _this.loading = false
- }
- })
- }
- })
- },
- // 连接蓝牙设备
- connectBlue(item){
- if(this.connectStatus){
- return
- }
- // ios 的deviceid 不是真正的mac 地址
- if(item){
- this.deviceId = item.deviceId
- }
- this.statusStr = '正在连接设备...'
- this.loading = true
- this.createBLEConnection()
- },
- // 断开蓝牙设备
- closeBlue(){
- this.statusStr = '连接已断开,请重新绑定设备'
- this.closeConnect()
- },
- // 开始连接指定设备
- createBLEConnection(){
- let _this = this
- uni.createBLEConnection({
- // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
- deviceId:this.deviceId,
- success(res) {
- console.log(res)
- _this.connectedDeviceId = _this.deviceId
- // 获取连接设备的service服务
- setTimeout(()=>{
- _this.getBLEDeviceServices()
- },1000)
- },
- fail(err) {
- console.log(err,'createBLEConnection error')
- _this.statusStr = '设备连接失败,请检查后重试'
- _this.connectStatus = false
- _this.loading = false
- uni.$emit('blueConnectCallback',0)
- uni.hideLoading()
- }
- })
- },
- // 获取连接设备的service服务
- getBLEDeviceServices(){
- let _this = this
- uni.getBLEDeviceServices({
- // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
- deviceId: _this.deviceId,
- success(res) {
- console.log('device services:', res.services)
- // _this.statusStr = '获取连接设备的service服务成功'
- _this.services = res.services
- /* 获取连接设备的所有特征值 */
- setTimeout(()=>{
- _this.getBLEDeviceCharacteristics()
- },500)
- // 停止搜索
- uni.stopBluetoothDevicesDiscovery({
- success: function(res) {
- console.log(res, '停止搜索')
- }
- })
- }
- })
- },
- // 获取连接设备的所有特征值
- getBLEDeviceCharacteristics(){
- let _this = this
- this.notifyServicweId = this.services[1].uuid
- uni.getBLEDeviceCharacteristics({
- deviceId: this.connectedDeviceId,
- serviceId: this.notifyServicweId,
- success: function(res) {
- console.log(res)
- // _this.statusStr = '获取连接设备的所有特征值成功'
- for (let i = 0; i < res.characteristics.length; i++) {
- 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) {
- console.log(res)
- }
- })
- },
- // 启用低功耗蓝牙设备特征值变化时的 notify 功能
- notifyBLECharacteristicValueChange() {
- let that = this;
- uni.notifyBLECharacteristicValueChange({
- state: true,
- deviceId: that.connectedDeviceId,
- serviceId: that.notifyServicweId,
- characteristicId: that.readsId,
- success(res) {
- console.log(res,'notifyBLECharacteristicValueChange')
- that.statusStr = '连接成功,请投放称重'
- if(!that.connectStatus){
- uni.$emit('blueConnectCallback',1)
- that.connectStatus = true
- uni.hideLoading()
- }
- that.loading = false
-
- /*用来监听手机蓝牙设备的数据变化*/
- uni.onBLECharacteristicValueChange(function(res) {
- console.log(res,'read data')
- that.balanceData = that.buf2string(res.value)
- that.$u.vuex('vuex_balanceData',that.balanceData)
- })
- // 该方法回调中可以用于处理连接意外断开等异常情况
- uni.onBLEConnectionStateChange(function (res) {
- console.log(`device ${res.deviceId} state has changed, connected: ${res.connected}`)
- if(!res.connected){
- uni.$emit('blueConnectClose',res)
- that.statusStr = '设备连接已断开,请重新连接'
- that.connectStatus = false
- that.loading = false
- }
- })
- },
- fail(res) {
- console.log(res, '启用低功耗蓝牙设备监听失败')
- that.statusStr = '设备连接失败,请点击重试'
- that.closeConnect()
- }
- })
- },
- /*转换成需要的格式*/
- buf2string(buffer) {
- let arr = Array.prototype.map.call(new Uint8Array(buffer), x => x)
- return arr.map((char, i) => {
- return String.fromCharCode(char);
- }).join('');
- },
- receiveData(buf) {
- return this.hexCharCodeToStr(this.ab2hex(buf))
- },
- /*转成二进制*/
- ab2hex (buffer) {
- let hexArr = Array.prototype.map.call(
- new Uint8Array(buffer), function (bit) {
- return ('00' + bit.toString(16)).slice(-2)
- }
- )
- return hexArr.join('')
- },
- /*转成可展会的文字*/
- hexCharCodeToStr(hexCharCodeStr) {
- let trimedStr = hexCharCodeStr.trim();
- let rawStr = trimedStr.substr(0, 2).toLowerCase() === '0x' ? trimedStr.substr(2) : trimedStr;
- let len = rawStr.length;
- let curCharCode;
- let resultStr = [];
- for (let i = 0; i < len; i = i + 2) {
- curCharCode = parseInt(rawStr.substr(i, 2), 16);
- resultStr.push(String.fromCharCode(curCharCode));
- }
- return resultStr.join('');
- },
- // 发送数据
- sendData(str) {
- let that = this;
- let dataBuffer = new ArrayBuffer(3)
- let dataView = new DataView(dataBuffer)
-
- dataView.setUint8(0, 0x02)
- 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.writeId,
- value: dataBuffer,
- success: function (res) {
- console.log('发送数据成功:' + that.writeDatas)
- },
- fail: function (res) {
- console.log('发送失败:' + res)
- },
- complete: function (res) {
- }
- })
- },
- // 断开设备连接
- closeConnect() {
- let that = this;
- if (that.connectedDeviceId) {
- uni.closeBLEConnection({
- deviceId: that.connectedDeviceId,
- success: function(res) {
- console.log(res)
- that.deviceId = null
- that.iosMac = null
- that.closeBluetoothAdapter()
- },
- fail(res) {
- console.log(res)
- }
- })
- } else {
- that.closeBluetoothAdapter()
- }
- },
- // 关闭蓝牙模块
- closeBluetoothAdapter() {
- let that = this;
- uni.closeBluetoothAdapter({
- success: function(res) {
- console.log(res,'closeBluetoothAdapter')
- that.connectStatus = false
- that.loading = false
- that.balanceData = ''
- that.deviceList = []
- that.deviceId = null
- that.iosMac = null
- },
- fail: function(err) {
- }
- })
- },
- },
- onUnload() {
- this.closeConnect()
- }
- }
- </script>
- <style lang="less">
- // @import url("bg.less");
- .bg{
- height: 100vh;
- width: 100%;
- position: relative;
- background-color: #015a50;
- }
- .bgimg{
- position: absolute;
- z-index: 100;
- width: 100%;
- height: 100vh;
- top: 0;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .content{
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- height: 100vh;
- width: 100%;
- position: absolute;
- z-index: 1000;
- }
- .tdrecord{
- position: absolute;
- right: 0;
- top: 5%;
- background: rgba(255,255,255,0.8);
- border-radius: 150rpx 0 0 150rpx;
- box-shadow: 2rpx 2rpx 6rpx rgba(0,0,0,0.4);
- padding: 15rpx 20rpx 15rpx 30rpx;
- font-size: 26rpx;
- }
- .cz-box{
- text-align: center;
- background: #01c9b2;
- border-radius: 300rpx;
- box-shadow: 3rpx 3rpx 10rpx rgba(0,0,0,0.4);
- }
- .cz-box > view{
- width: 250rpx;
- height: 250rpx;
- padding: 50rpx 50rpx 30rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- }
- .tits{
- padding: 20rpx 0;
- color: #FFFFFF;
- }
- .devList{
- width: 80%;
- padding:10rpx 30rpx;
- max-height: 50vh;
- overflow: auto;
- }
- .bindDev{
- margin: 20rpx 0;
- padding: 15rpx 40rpx;
- background: rgba(19,22,30,0.8);
- box-shadow: 2rpx 2rpx 8rpx rgba(0,0,0,0.2);
- border-radius: 100rpx;
- color: #FFFFFF;
- }
- .devList > view{
- display: flex;
- align-items: center;
- color: #666666;
- border-radius: 20rpx;
- background: rgba(255,255,255,0.8);
- box-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.2);
- margin-bottom: 20rpx;
- }
- .devList > view .names{
- flex-grow: 1;
- padding: 15rpx 40rpx;
- }
- .devList > view .texts{
- font-size: 24rpx;
- }
- .devList > view .btns{
- text-align: center;
- padding: 15rpx 20rpx;
- color: #ff5500;
- }
- .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>
|