userAuth.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <view class="content">
  3. <view class="steps">
  4. <u-steps :list="numList" active-color="#00aaff" :current="current"></u-steps>
  5. </view>
  6. <view class="step1" v-if="current==0">
  7. <view class="form-row form-flex">
  8. <view><text class="red">*</text>网点名称</view>
  9. <view>{{stationName}}</view>
  10. </view>
  11. <view class="form-row form-flex">
  12. <view><text class="red">*</text>投递手机号</view>
  13. <view>
  14. <u-input v-model="formData.customerMobile" type="number" input-align="right" :custom-style="{color: '#666'}" :maxlength="11" placeholder="请输入手机号码"></u-input>
  15. </view>
  16. </view>
  17. <view class="form-row">
  18. <view><text class="red">*</text>投递类型</view>
  19. <view class="form-grid">
  20. <view v-for="(item,index) in rubbishtype" :key="item.id" @click="selRubbishType(item)" :class="formData.rubbishType==item.rubbishType?'active':''">
  21. <view class="imgs">
  22. <u-image :src="`/static/${item.rubbishType}.png`" width="70rpx" height="70rpx"></u-image>
  23. </view>
  24. <view class="info">
  25. <view>{{item.rubbishTypeDictValue}}</view>
  26. <view class="texts">{{item.rubbishWeight||0}}g/{{item.goleNum||0}}乐豆</view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="step2" v-if="current==1">
  33. <view class="form-row form-flex">
  34. <view>投递手机号</view>
  35. <view>{{formData.customerMobile}}</view>
  36. </view>
  37. <view class="form-row form-flex">
  38. <view>用户乐豆余额</view>
  39. <view class="flex-row"><text>{{currentGold}}</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view>
  40. </view>
  41. <view class="form-row form-flex">
  42. <view>投递类型</view>
  43. <view>
  44. {{curRubbishType.rubbishTypeDictValue}}
  45. <text class="des">({{curRubbishType.rubbishWeight||0}}g/{{curRubbishType.goleNum||0}}乐豆)</text>
  46. </view>
  47. </view>
  48. <view class="form-row form-flex">
  49. <view>投递重量</view>
  50. <view><text class="nums">{{balanceData}}g</text></view>
  51. </view>
  52. <view class="form-row form-flex">
  53. <view>可兑换乐豆数</view>
  54. <view class="flex-row"><text class="nums">{{goldNum}}</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view>
  55. </view>
  56. </view>
  57. <view class="buttons">
  58. <view v-if="current==0" ><u-button shape="circle" :loading="loading" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
  59. <view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
  60. <view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
  61. </view>
  62. <!-- 注意事项 -->
  63. <view class="notes">
  64. <view>注意事项:</view>
  65. <view>
  66. <view>1.请等待电子秤数据稳定后,再点击提交按钮</view>
  67. <view>2.提交数据时,请仔细检查投递重量是否正确</view>
  68. <view>3.下次称重时,记得将上次称重的物品取下,避免重复称重</view>
  69. </view>
  70. </view>
  71. <!-- 提交确认弹框 -->
  72. <u-modal v-model="showOk" :duration="50" show-cancel-button @confirm="confirm" @cancel="cancel">
  73. <view class="slot-content">
  74. <rich-text :nodes="modelContent"></rich-text>
  75. </view>
  76. </u-modal>
  77. </view>
  78. </template>
  79. <script>
  80. import {findBySrcDeviceNo, saveDelivery} from '@/api/delivery.js'
  81. import {queryldByMobile} from '@/api/officialPartnerGoldLog.js'
  82. export default {
  83. data() {
  84. return {
  85. showOk: false,
  86. modelContent:'',
  87. customStyle: {
  88. background: '#00aaff'
  89. },
  90. current: 0,
  91. numList: [{
  92. name: '用户认证'
  93. }, {
  94. name: '称重'
  95. }],
  96. stationName: '', // 网点名称
  97. formData:{
  98. customerMobile: '', // 客户电话
  99. rubbishType: '', // 投递类型
  100. rubbishWeight:0, // 投递重量
  101. srcDeviceCode: '',
  102. operatorNo: ''
  103. },
  104. currentGold: 0, // 用户乐豆余额
  105. blueConnect: true,
  106. deviceId: null,
  107. id: null,
  108. rubbishtype: [],
  109. curRubbishType: null,
  110. loading: false
  111. }
  112. },
  113. computed: {
  114. // 计算可兑换乐豆
  115. goldNum(){
  116. let ret = 0
  117. if(this.curRubbishType&&this.curRubbishType.rubbishWeight){
  118. if(this.balanceData >= this.curRubbishType.rubbishWeight){
  119. ret = this.balanceData / this.curRubbishType.rubbishWeight * this.curRubbishType.goleNum
  120. }else{
  121. ret = 0
  122. }
  123. }
  124. return Math.floor(ret)
  125. },
  126. // 称重结果
  127. balanceData() {
  128. this.cancel()
  129. let _this = this
  130. let data = _this.$store.state.vuex_balanceData
  131. console.log(data)
  132. // 解析结果
  133. let weight = data.split(',')[2]
  134. let uit = '' // 单位
  135. let fh = '' // 正负符号
  136. // 去掉换行符
  137. weight = weight.replace('\n','')
  138. // 符号位
  139. if(weight.indexOf('+')>=0){
  140. fh = '+'
  141. }
  142. if(weight.indexOf('-')>=0){
  143. fh = '-'
  144. }
  145. // 解析数字
  146. if(weight.indexOf('kg')>0){
  147. weight = weight.replace(/\+|-|[kg]/g,'')
  148. console.log(weight,'kg-weight')
  149. weight = Number(weight) * 1000
  150. uit = 'kg'
  151. }else if(weight.indexOf('lb')>0){
  152. weight = weight.replace(/\+|-|[lb]/g,'')
  153. console.log(weight,'lb-weight')
  154. weight = Math.floor(Number(weight) * 453.59237)
  155. uit = 'lb'
  156. }else{
  157. weight = weight.replace(/\+|-|g/g,'')
  158. console.log(weight,'g-weight')
  159. weight = Number(weight)
  160. uit = 'g'
  161. }
  162. // console.log(weight,uit,fh,'weight end')
  163. _this.formData.rubbishWeight = weight
  164. return fh + weight
  165. }
  166. },
  167. onLoad(options) {
  168. let _this = this
  169. // 设备id,去掉冒号并转小写
  170. this.deviceId = options.macAddress.toLowerCase()
  171. this.deviceId = this.deviceId.replace(/:/g,'')
  172. this.id = options.id
  173. this.blueConnect = true
  174. // 连接中断
  175. uni.$on('blueConnectClose',function(){
  176. _this.reConnect(1)
  177. })
  178. // 连接成功
  179. uni.$on('blueConnectCallback',function(type){
  180. if(type&&!this.blueConnect){
  181. _this.blueConnect = true
  182. uni.showModal({
  183. title: '提示',
  184. content: '重连成功,请重新称重',
  185. showCancel: false,
  186. })
  187. }else{
  188. _this.reConnect(0)
  189. }
  190. })
  191. // 通过设备id查询网点信息
  192. this.findBySrcDeviceNo()
  193. },
  194. onUnload() {
  195. uni.$off('blueConnectClose')
  196. uni.$off('blueConnectCallback')
  197. },
  198. methods: {
  199. // 获取网点信息
  200. findBySrcDeviceNo(){
  201. uni.showLoading({
  202. title: '加载中',
  203. mask: true
  204. });
  205. findBySrcDeviceNo({srcDeviceCode:this.deviceId}).then(res=>{
  206. console.log(res,'====')
  207. if(res.status == 200){
  208. this.rubbishtype = res.data.list
  209. this.stationName = res.data.stationEntity.name
  210. this.formData.srcDeviceCode = this.deviceId
  211. this.formData.operatorNo = this.$store.state.vuex_userData.id
  212. }else{
  213. uni.showModal({
  214. title: '提示',
  215. content: res.message,
  216. showCancel: false,
  217. complete(e) {
  218. uni.navigateBack()
  219. }
  220. })
  221. }
  222. uni.hideLoading()
  223. })
  224. },
  225. // 选择投递类型
  226. selRubbishType(item){
  227. this.formData.rubbishType = item.rubbishType
  228. this.curRubbishType = item
  229. },
  230. // 重连蓝牙设备
  231. reConnect(type){
  232. console.log(type,'reConnect')
  233. this.blueConnect = false
  234. uni.showModal({
  235. title: '提示',
  236. content: type ? '蓝牙连接设备已断开,请重新绑定连接' : '请检测电子秤或手机蓝牙是否开启,确认后请重新连接',
  237. showCancel: false,
  238. confirmText: '重新连接',
  239. complete(e){
  240. if(e.confirm){
  241. uni.$emit('blueReConnect')
  242. }
  243. }
  244. })
  245. },
  246. next(){
  247. if(this.formData.customerMobile == ''){
  248. uni.showToast({
  249. icon: 'none',
  250. title: '请输入手机号码'
  251. })
  252. return
  253. }
  254. if(this.formData.customerMobile.length!=11){
  255. uni.showToast({
  256. icon: 'none',
  257. title: '请输入正确的手机号码'
  258. })
  259. return
  260. }
  261. if(this.formData.rubbishType == ''){
  262. uni.showToast({
  263. icon: 'none',
  264. title: '请选择投递类型'
  265. })
  266. return
  267. }
  268. this.loading = true
  269. // 查询用户乐豆余额
  270. queryldByMobile({mobile: this.formData.customerMobile}).then(res => {
  271. if(res.status == 200){
  272. this.current = this.current + 1
  273. this.currentGold = res.data.currentGold
  274. }
  275. this.loading = false
  276. })
  277. },
  278. // 上一步
  279. prev(){
  280. this.current = this.current - 1
  281. },
  282. // 提交保存结果
  283. submit(){
  284. let that = this
  285. console.log(this.formData.rubbishWeight,'this.formData.rubbishWeight')
  286. if(this.balanceData<=0){
  287. uni.showToast({
  288. icon: 'none',
  289. title: '请投放物品!'
  290. })
  291. return
  292. }
  293. // 判断设备蓝牙是否仍然连接中
  294. uni.getBluetoothDevices({
  295. success(res) {
  296. console.log(res.devices,that.id)
  297. let has = res.devices.find(item => item.deviceId == that.id)
  298. console.log(has,that.blueConnect,'判断设备仍然连接中')
  299. if(that.blueConnect && has){
  300. that.showOk = true
  301. that.modelContent = `
  302. <div>
  303. <div style="font-weight:bold;padding:10px 0;">投递重量:<span style="color:red">${that.balanceData}</span> g</div>
  304. <div>提交后将为此用户计入本次投递数据,确认提交吗?</div>
  305. </div>
  306. `
  307. }else{
  308. that.reConnect(1)
  309. }
  310. }
  311. })
  312. },
  313. // 取消提交
  314. cancel(){
  315. this.showOk = false
  316. this.modelContent = ''
  317. },
  318. // 确认提交
  319. confirm(){
  320. // console.log(this.formData,'formData')
  321. saveDelivery(this.formData).then(res => {
  322. if(res.status == 200){
  323. setTimeout(()=>{
  324. uni.navigateBack()
  325. },500)
  326. }
  327. uni.showToast({
  328. icon: 'none',
  329. title: res.message
  330. })
  331. })
  332. }
  333. }
  334. }
  335. </script>
  336. <style lang="less">
  337. .content{
  338. width: 100%;
  339. padding: 20rpx;
  340. background-color: #FFFFFF;
  341. .steps{
  342. padding: 40rpx 0;
  343. border-bottom: 1px solid #f8f8f8;
  344. }
  345. .flex-row{
  346. display: flex;
  347. align-items: center;
  348. justify-content: flex-end;
  349. }
  350. .form-flex{
  351. display: flex;
  352. align-items: center;
  353. > view{
  354. &:first-child{
  355. width: 30%;
  356. }
  357. &:last-child{
  358. width: 70%;
  359. text-align: right;
  360. color: #666;
  361. }
  362. }
  363. }
  364. .form-row{
  365. border-bottom: 1px solid #f8f8f8;
  366. padding: 20rpx 15rpx;
  367. position: relative;
  368. .red{
  369. color: red;
  370. margin-right: 6rpx;
  371. }
  372. .des{
  373. color: #666;
  374. margin-left: 5rpx;
  375. font-size: 24rpx;
  376. }
  377. .nums{
  378. color: red;
  379. margin-right: 5rpx;
  380. }
  381. }
  382. .form-grid{
  383. display: flex;
  384. align-items: center;
  385. flex-wrap: wrap;
  386. > view{
  387. width: 46%;
  388. border: 1px solid #eee;
  389. margin: 10rpx;
  390. padding: 10rpx 20rpx;
  391. border-radius: 8rpx;
  392. display: flex;
  393. align-items: center;
  394. background-color: #f8f8f8;
  395. .texts{
  396. font-size: 24rpx;
  397. color: #999;
  398. padding: 2rpx 0;
  399. }
  400. .imgs{
  401. width: 90rpx;
  402. }
  403. .info{
  404. flex-grow: 1;
  405. }
  406. }
  407. .active{
  408. border-color: #e69900;
  409. background-color: #ffaa00;
  410. color: #FFFFFF;
  411. .texts{
  412. color: #FFFFFF;
  413. }
  414. }
  415. }
  416. .buttons{
  417. padding: 50rpx 5%;
  418. display: flex;
  419. align-items: center;
  420. justify-content: center;
  421. >view{
  422. width: 50%;
  423. padding: 0 5%;
  424. }
  425. }
  426. .notes{
  427. margin-top: 50rpx;
  428. border-radius: 10rpx;
  429. color: #999;
  430. > view{
  431. &:first-child{
  432. padding: 10rpx 20rpx;
  433. }
  434. &:last-child{
  435. padding: 0 40rpx;
  436. > view{
  437. padding: 6rpx 20rpx;
  438. }
  439. }
  440. }
  441. }
  442. .slot-content{
  443. padding: 25rpx 50rpx 50rpx;
  444. }
  445. }
  446. </style>