123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 |
- <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,
- id: null,
- rubbishtype: [],
- curRubbishType: null,
- loading: false
- }
- },
- computed: {
- // 计算可兑换乐豆
- goldNum(){
- let ret = 0
- if(this.curRubbishType&&this.curRubbishType.rubbishWeight){
- if(this.balanceData >= this.curRubbishType.rubbishWeight){
- ret = this.balanceData / this.curRubbishType.rubbishWeight * this.curRubbishType.goleNum
- }else{
- ret = 0
- }
- }
- 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.macAddress.toLowerCase()
- this.deviceId = this.deviceId.replace(/:/g,'')
- this.id = options.id
- this.blueConnect = true
- // 连接中断
- 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){
- console.log(type,'reConnect')
- 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) {
- console.log(res.devices,that.id)
- let has = res.devices.find(item => item.deviceId == that.id)
- console.log(has,that.blueConnect,'判断设备仍然连接中')
- 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>
|