userAuth.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  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>啊撒旦解放拉风小区</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.phone" 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" :class="index==0?'active':''">
  21. <view class="imgs">
  22. <u-image :src="`/static/${item.code}.png`" width="70rpx" height="70rpx"></u-image>
  23. </view>
  24. <view class="info">
  25. <view>{{item.dispName}}</view>
  26. <view class="texts">200g/1乐豆</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.phone}}</view>
  36. </view>
  37. <view class="form-row form-flex">
  38. <view>用户乐豆余额</view>
  39. <view class="flex-row"><text>560</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. 废旧衣服
  45. <text class="des">(200g/1乐豆)</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">10</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" :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. export default {
  81. data() {
  82. return {
  83. showOk: false,
  84. modelContent:'',
  85. customStyle: {
  86. background: '#00aaff'
  87. },
  88. current: 0,
  89. numList: [{
  90. name: '用户认证'
  91. }, {
  92. name: '称重'
  93. }],
  94. formData:{
  95. address: '',
  96. phone: '',
  97. washType: '0',
  98. washWeight:0
  99. },
  100. blueConnect: true,
  101. deviceId: null,
  102. rubbishtype: []
  103. }
  104. },
  105. computed: {
  106. balanceData() {
  107. this.cancel()
  108. let data = this.$store.state.vuex_balanceData
  109. console.log(data)
  110. let weight = data.split(',')[2]
  111. let uit = ''
  112. let fh = ''
  113. weight = weight.replace('\n','')
  114. // 符号位
  115. if(weight.indexOf('+')>=0){
  116. fh = '+'
  117. }
  118. if(weight.indexOf('-')>=0){
  119. fh = '-'
  120. }
  121. // 解析数字
  122. if(weight.indexOf('kg')>0){
  123. weight = weight.replace(/\+|-|[kg]/g,'')
  124. console.log(weight,'kg-weight')
  125. weight = Number(weight) * 1000
  126. uit = 'kg'
  127. }else if(weight.indexOf('lb')>0){
  128. weight = weight.replace(/\+|-|[lb]/g,'')
  129. console.log(weight,'lb-weight')
  130. weight = Math.floor(Number(weight) * 453.59237)
  131. uit = 'lb'
  132. }else{
  133. weight = weight.replace(/\+|-|g/g,'')
  134. console.log(weight,'g-weight')
  135. weight = Number(weight)
  136. uit = 'g'
  137. }
  138. console.log(weight,uit,fh,'weight end')
  139. this.washWeight = weight
  140. return fh + weight
  141. }
  142. },
  143. onLoad(options) {
  144. let _this = this
  145. this.deviceId = options.deviceId
  146. // 连接中断
  147. uni.$on('blueConnectClose',function(){
  148. _this.reConnect(1)
  149. })
  150. // 连接成功
  151. uni.$on('blueConnectCallback',function(type){
  152. if(type&&!this.blueConnect){
  153. _this.blueConnect = true
  154. uni.showModal({
  155. title: '提示',
  156. content: '重连成功,请重新称重',
  157. showCancel: false,
  158. })
  159. }else{
  160. _this.reConnect(0)
  161. }
  162. })
  163. // 投递类型
  164. this.rubbishtype = this.$store.state.vuex_rubbishType
  165. },
  166. onUnload() {
  167. uni.$off('blueConnectClose')
  168. uni.$off('blueConnectCallback')
  169. },
  170. methods: {
  171. reConnect(type){
  172. this.blueConnect = false
  173. uni.showModal({
  174. title: '提示',
  175. content: type ? '蓝牙连接设备已断开,请重新绑定连接' : '请检测电子秤或手机蓝牙是否开启,确认后请重新连接',
  176. showCancel: false,
  177. confirmText: '重新连接',
  178. complete(e){
  179. if(e.confirm){
  180. uni.$emit('blueReConnect')
  181. }
  182. }
  183. })
  184. },
  185. next(){
  186. if(this.formData.phone == ''){
  187. uni.showToast({
  188. icon: 'none',
  189. title: '请输入手机号码'
  190. })
  191. return
  192. }
  193. if(this.formData.washType == ''){
  194. uni.showToast({
  195. icon: 'none',
  196. title: '请选择投递类型'
  197. })
  198. return
  199. }
  200. if(this.formData.phone.length!=11){
  201. uni.showToast({
  202. icon: 'none',
  203. title: '请输入正确的手机号码'
  204. })
  205. return
  206. }
  207. this.current = this.current + 1
  208. },
  209. prev(){
  210. this.current = this.current - 1
  211. },
  212. submit(){
  213. let that = this
  214. console.log(this.washWeight,'this.washWeight')
  215. if(this.washWeight<=0){
  216. uni.showToast({
  217. icon: 'none',
  218. title: '请投放物品!'
  219. })
  220. return
  221. }
  222. // 判断设备仍然连接中
  223. uni.getBluetoothDevices({
  224. success(res) {
  225. console.log(res.devices,that.deviceId)
  226. let has = res.devices.find(item => item.deviceId == that.deviceId)
  227. if(that.blueConnect && has){
  228. that.showOk = true
  229. that.modelContent = `
  230. <div>
  231. <div style="font-weight:bold;padding:10px 0;">投递重量:<span style="color:red">${that.balanceData}</span> g</div>
  232. <div>提交后将为此用户计入本次投递数据,确认提交吗?</div>
  233. </div>
  234. `
  235. }else{
  236. that.reConnect(1)
  237. }
  238. }
  239. })
  240. },
  241. // 取消提交
  242. cancel(){
  243. this.showOk = false
  244. this.modelContent = ''
  245. },
  246. // 确认提交
  247. confirm(){
  248. }
  249. }
  250. }
  251. </script>
  252. <style lang="less">
  253. .content{
  254. width: 100%;
  255. padding: 20rpx;
  256. background-color: #FFFFFF;
  257. .steps{
  258. padding: 40rpx 0;
  259. border-bottom: 1px solid #f8f8f8;
  260. }
  261. .flex-row{
  262. display: flex;
  263. align-items: center;
  264. justify-content: flex-end;
  265. }
  266. .form-flex{
  267. display: flex;
  268. align-items: center;
  269. > view{
  270. &:first-child{
  271. width: 30%;
  272. }
  273. &:last-child{
  274. width: 70%;
  275. text-align: right;
  276. color: #666;
  277. }
  278. }
  279. }
  280. .form-row{
  281. border-bottom: 1px solid #f8f8f8;
  282. padding: 20rpx 15rpx;
  283. position: relative;
  284. .red{
  285. color: red;
  286. margin-right: 6rpx;
  287. }
  288. .des{
  289. color: #666;
  290. margin-left: 5rpx;
  291. font-size: 24rpx;
  292. }
  293. .nums{
  294. color: red;
  295. margin-right: 5rpx;
  296. }
  297. }
  298. .form-grid{
  299. display: flex;
  300. align-items: center;
  301. flex-wrap: wrap;
  302. justify-content: space-around;
  303. > view{
  304. width: 46%;
  305. border: 1px solid #eee;
  306. margin: 10rpx 0;
  307. padding: 10rpx 20rpx;
  308. border-radius: 8rpx;
  309. display: flex;
  310. align-items: center;
  311. background-color: #f8f8f8;
  312. .texts{
  313. font-size: 24rpx;
  314. color: #999;
  315. padding: 2rpx 0;
  316. }
  317. .imgs{
  318. width: 90rpx;
  319. }
  320. .info{
  321. flex-grow: 1;
  322. }
  323. }
  324. .active{
  325. border-color: #e69900;
  326. background-color: #ffaa00;
  327. color: #FFFFFF;
  328. .texts{
  329. color: #FFFFFF;
  330. }
  331. }
  332. }
  333. .buttons{
  334. padding: 50rpx 5%;
  335. display: flex;
  336. align-items: center;
  337. justify-content: center;
  338. >view{
  339. width: 50%;
  340. padding: 0 5%;
  341. }
  342. }
  343. .notes{
  344. margin-top: 50rpx;
  345. border-radius: 10rpx;
  346. color: #999;
  347. > view{
  348. &:first-child{
  349. padding: 10rpx 20rpx;
  350. }
  351. &:last-child{
  352. padding: 0 40rpx;
  353. > view{
  354. padding: 6rpx 20rpx;
  355. }
  356. }
  357. }
  358. }
  359. .slot-content{
  360. padding: 25rpx 50rpx 50rpx;
  361. }
  362. }
  363. </style>