<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>{{stationName}}</view> </view> <view class="form-row form-flex"> <view><text class="red">*</text>投递手机号</view> <view> <u-input v-model="formData.customerMobile" 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 v-for="(item,index) in rubbishtype" :key="item.id" @click="selRubbishType(item)" :class="formData.rubbishType==item.rubbishType?'active':''"> <view class="imgs"> <u-image :src="`/static/${item.rubbishType}.png`" width="70rpx" height="70rpx"></u-image> </view> <view class="info"> <view>{{item.rubbishTypeDictValue}}</view> <view class="texts">{{item.rubbishWeight||0}}g/{{item.goleNum||0}}乐豆</view> </view> </view> </view> </view> </view> <view class="step2" v-if="current==1"> <view class="form-row form-flex"> <view>投递手机号</view> <view>{{formData.customerMobile}}</view> </view> <view class="form-row form-flex"> <view>用户乐豆余额</view> <view class="flex-row"><text>{{currentGold}}</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view> </view> <view class="form-row form-flex"> <view>投递类型</view> <view> {{curRubbishType.rubbishTypeDictValue}} <text class="des">({{curRubbishType.rubbishWeight||0}}g/{{curRubbishType.goleNum||0}}乐豆)</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 class="flex-row"><text class="nums">{{goldNum}}</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view> </view> </view> <view class="buttons"> <view v-if="current==0" ><u-button shape="circle" :loading="loading" :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 class="notes"> <view>注意事项:</view> <view> <view>1.请等待电子秤数据稳定后,再点击提交按钮</view> <view>2.提交数据时,请仔细检查投递重量是否正确</view> <view>3.下次称重时,记得将上次称重的物品取下,避免重复称重</view> </view> </view> <!-- 提交确认弹框 --> <u-modal v-model="showOk" :duration="50" show-cancel-button @confirm="confirm" @cancel="cancel"> <view class="slot-content"> <rich-text :nodes="modelContent"></rich-text> </view> </u-modal> </view> </template> <script> import {findBySrcDeviceNo, saveDelivery} from '@/api/delivery.js' import {queryldByMobile} from '@/api/officialPartnerGoldLog.js' export default { data() { return { showOk: false, modelContent:'', customStyle: { background: '#00aaff' }, current: 0, numList: [{ name: '用户认证' }, { name: '称重' }], stationName: '', // 网点名称 formData:{ customerMobile: '', // 客户电话 rubbishType: '', // 投递类型 rubbishWeight:0, // 投递重量 srcDeviceCode: '', operatorNo: '' }, currentGold: 0, // 用户乐豆余额 blueConnect: true, deviceId: null, rubbishtype: [], curRubbishType: null, loading: false } }, computed: { // 计算可兑换乐豆 goldNum(){ let ret = 0 if(this.curRubbishType&&this.curRubbishType.rubbishWeight&&this.curRubbishType.goleNum){ ret = this.balanceData / this.curRubbishType.rubbishWeight / this.curRubbishType.goleNum } return Math.floor(ret) }, // 称重结果 balanceData() { this.cancel() let _this = this let data = _this.$store.state.vuex_balanceData console.log(data) // 解析结果 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') _this.formData.rubbishWeight = weight return fh + weight } }, onLoad(options) { let _this = this // 设备id,去掉冒号并转小写 this.deviceId = options.deviceId.toLowerCase() this.deviceId = this.deviceId.replace(/:/g,'') // 连接中断 uni.$on('blueConnectClose',function(){ _this.reConnect(1) }) // 连接成功 uni.$on('blueConnectCallback',function(type){ if(type&&!this.blueConnect){ _this.blueConnect = true uni.showModal({ title: '提示', content: '重连成功,请重新称重', showCancel: false, }) }else{ _this.reConnect(0) } }) // 通过设备id查询网点信息 this.findBySrcDeviceNo() }, onUnload() { uni.$off('blueConnectClose') uni.$off('blueConnectCallback') }, methods: { // 获取网点信息 findBySrcDeviceNo(){ uni.showLoading({ title: '加载中', mask: true }); findBySrcDeviceNo({srcDeviceCode:this.deviceId}).then(res=>{ console.log(res,'====') if(res.status == 200){ this.rubbishtype = res.data.list this.stationName = res.data.stationEntity.name this.formData.srcDeviceCode = this.deviceId this.formData.operatorNo = this.$store.state.vuex_userData.id }else{ uni.showModal({ title: '提示', content: res.message, showCancel: false, complete(e) { uni.navigateBack() } }) } uni.hideLoading() }) }, // 选择投递类型 selRubbishType(item){ this.formData.rubbishType = item.rubbishType this.curRubbishType = item }, // 重连蓝牙设备 reConnect(type){ this.blueConnect = false uni.showModal({ title: '提示', content: type ? '蓝牙连接设备已断开,请重新绑定连接' : '请检测电子秤或手机蓝牙是否开启,确认后请重新连接', showCancel: false, confirmText: '重新连接', complete(e){ if(e.confirm){ uni.$emit('blueReConnect') } } }) }, next(){ if(this.formData.customerMobile == ''){ uni.showToast({ icon: 'none', title: '请输入手机号码' }) return } if(this.formData.customerMobile.length!=11){ uni.showToast({ icon: 'none', title: '请输入正确的手机号码' }) return } if(this.formData.rubbishType == ''){ uni.showToast({ icon: 'none', title: '请选择投递类型' }) return } this.loading = true // 查询用户乐豆余额 queryldByMobile({mobile: this.formData.customerMobile}).then(res => { if(res.status == 200){ this.current = this.current + 1 this.currentGold = res.data.currentGold } this.loading = false }) }, // 上一步 prev(){ this.current = this.current - 1 }, // 提交保存结果 submit(){ let that = this console.log(this.formData.rubbishWeight,'this.formData.rubbishWeight') if(this.balanceData<=0){ uni.showToast({ icon: 'none', title: '请投放物品!' }) return } // 判断设备蓝牙是否仍然连接中 uni.getBluetoothDevices({ success(res) { let has = res.devices.find(item => { let deviceId = item.deviceId.toLowerCase() return deviceId.replace(/:/g,'') == that.deviceId }) // console.log(has,'判断设备仍然连接中') if(that.blueConnect && has){ that.showOk = true that.modelContent = ` <div> <div style="font-weight:bold;padding:10px 0;">投递重量:<span style="color:red">${that.balanceData}</span> g</div> <div>提交后将为此用户计入本次投递数据,确认提交吗?</div> </div> ` }else{ that.reConnect(1) } } }) }, // 取消提交 cancel(){ this.showOk = false this.modelContent = '' }, // 确认提交 confirm(){ // console.log(this.formData,'formData') saveDelivery(this.formData).then(res => { if(res.status == 200){ setTimeout(()=>{ uni.navigateBack() },500) } uni.showToast({ icon: 'none', title: res.message }) }) } } } </script> <style lang="less"> .content{ width: 100%; padding: 20rpx; background-color: #FFFFFF; .steps{ padding: 40rpx 0; border-bottom: 1px solid #f8f8f8; } .flex-row{ display: flex; align-items: center; justify-content: flex-end; } .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; } .des{ color: #666; margin-left: 5rpx; font-size: 24rpx; } .nums{ color: red; margin-right: 5rpx; } } .form-grid{ display: flex; align-items: center; flex-wrap: wrap; > view{ width: 46%; border: 1px solid #eee; margin: 10rpx; padding: 10rpx 20rpx; border-radius: 8rpx; display: flex; align-items: center; background-color: #f8f8f8; .texts{ font-size: 24rpx; color: #999; padding: 2rpx 0; } .imgs{ width: 90rpx; } .info{ flex-grow: 1; } } .active{ border-color: #e69900; background-color: #ffaa00; color: #FFFFFF; .texts{ color: #FFFFFF; } } } .buttons{ padding: 50rpx 5%; display: flex; align-items: center; justify-content: center; >view{ width: 50%; padding: 0 5%; } } .notes{ margin-top: 50rpx; border-radius: 10rpx; color: #999; > view{ &:first-child{ padding: 10rpx 20rpx; } &:last-child{ padding: 0 40rpx; > view{ padding: 6rpx 20rpx; } } } } .slot-content{ padding: 25rpx 50rpx 50rpx; } } </style>