userAuth.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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 :class="item==0?'active':''" v-for="item in 8" :key="item">
  21. <view>废旧纸张</view>
  22. <view class="texts">200g/1乐豆</view>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="step2" v-if="current==1">
  28. <view class="form-row form-flex">
  29. <view>投递手机号</view>
  30. <view>13709146191</view>
  31. </view>
  32. <view class="form-row form-flex">
  33. <view>用户乐豆余额</view>
  34. <view class="flex-row"><text>560</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view>
  35. </view>
  36. <view class="form-row form-flex">
  37. <view>投递类型</view>
  38. <view>
  39. 废旧衣服
  40. <text class="des">(200g/1乐豆)</text>
  41. </view>
  42. </view>
  43. <view class="form-row form-flex">
  44. <view>投递重量</view>
  45. <view><text class="nums">{{balanceData}}g</text></view>
  46. </view>
  47. <view class="form-row form-flex">
  48. <view>可兑换乐豆数</view>
  49. <view class="flex-row"><text class="nums">10</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view>
  50. </view>
  51. </view>
  52. <view class="buttons">
  53. <view v-if="current==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
  54. <view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
  55. <view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
  56. </view>
  57. <!-- 注意事项 -->
  58. <view class="notes">
  59. <view>注意事项:</view>
  60. <view>
  61. <view>1.请等待电子秤数据稳定后,再点击提交按钮</view>
  62. <view>2.提交数据时,请仔细检查投递重量是否正确</view>
  63. <view>3.下次称重时,记得将上次称重的物品取下,避免重发提交数据</view>
  64. </view>
  65. </view>
  66. <!-- 提交确认弹框 -->
  67. <u-modal v-model="showOk" :duration="50" show-cancel-button @confirm="confirm" @cancel="cancel">
  68. <view class="slot-content">
  69. <rich-text :nodes="modelContent"></rich-text>
  70. </view>
  71. </u-modal>
  72. </view>
  73. </template>
  74. <script>
  75. export default {
  76. data() {
  77. return {
  78. showOk: false,
  79. modelContent:'',
  80. customStyle: {
  81. background: '#00aaff'
  82. },
  83. current: 0,
  84. numList: [{
  85. name: '用户认证'
  86. }, {
  87. name: '称重'
  88. }],
  89. formData:{
  90. address: '',
  91. phone: '',
  92. washType: '0',
  93. washWeight:0
  94. },
  95. blueConnect: true,
  96. deviceId: null
  97. }
  98. },
  99. computed: {
  100. balanceData() {
  101. this.cancel()
  102. let data = this.$store.state.vuex_balanceData
  103. console.log(data)
  104. let weight = data.split(',')[2]
  105. let uit = ''
  106. let fh = ''
  107. weight = weight.replace('\n','')
  108. // 符号位
  109. if(weight.indexOf('+')>=0){
  110. fh = '+'
  111. }
  112. if(weight.indexOf('-')>=0){
  113. fh = '-'
  114. }
  115. // 解析数字
  116. if(weight.indexOf('kg')>0){
  117. weight = weight.replace(/\+|-|[kg]/g,'')
  118. console.log(weight,'kg-weight')
  119. weight = Number(weight) * 1000
  120. uit = 'kg'
  121. }else if(weight.indexOf('lb')>0){
  122. weight = weight.replace(/\+|-|[lb]/g,'')
  123. console.log(weight,'lb-weight')
  124. weight = Math.floor(Number(weight) * 453.59237)
  125. uit = 'lb'
  126. }else{
  127. weight = weight.replace(/\+|-|g/g,'')
  128. console.log(weight,'g-weight')
  129. weight = Number(weight)
  130. uit = 'g'
  131. }
  132. console.log(weight,uit,fh,'weight end')
  133. this.washWeight = weight
  134. return fh + weight
  135. }
  136. },
  137. onLoad(options) {
  138. let _this = this
  139. this.deviceId = options.deviceId
  140. // 连接中断
  141. uni.$on('blueConnectClose',function(){
  142. _this.reConnect(1)
  143. })
  144. // 连接成功
  145. uni.$on('blueConnectCallback',function(type){
  146. if(type&&!this.blueConnect){
  147. _this.blueConnect = true
  148. uni.showModal({
  149. title: '提示',
  150. content: '重连成功,请重新称重',
  151. showCancel: false,
  152. })
  153. }else{
  154. _this.reConnect(0)
  155. }
  156. })
  157. },
  158. onUnload() {
  159. uni.$off('blueConnectClose')
  160. uni.$off('blueConnectCallback')
  161. },
  162. methods: {
  163. reConnect(type){
  164. this.blueConnect = false
  165. uni.showModal({
  166. title: '提示',
  167. content: type ? '蓝牙连接设备已断开,请重新绑定连接' : '请检测电子秤或手机蓝牙是否开启,确认后请重新连接',
  168. showCancel: false,
  169. confirmText: '重新连接',
  170. complete(e){
  171. if(e.confirm){
  172. uni.$emit('blueReConnect')
  173. }
  174. }
  175. })
  176. },
  177. next(){
  178. if(this.formData.phone == ''){
  179. uni.showToast({
  180. icon: 'none',
  181. title: '请输入手机号码'
  182. })
  183. return
  184. }
  185. if(this.formData.washType == ''){
  186. uni.showToast({
  187. icon: 'none',
  188. title: '请选择投递类型'
  189. })
  190. return
  191. }
  192. this.current = this.current + 1
  193. },
  194. prev(){
  195. this.current = this.current - 1
  196. },
  197. submit(){
  198. let that = this
  199. console.log(this.washWeight,'this.washWeight')
  200. if(this.washWeight==0){
  201. uni.showToast({
  202. icon: 'none',
  203. title: '投递重量不能是0,请投放称重'
  204. })
  205. return
  206. }
  207. // 判断设备仍然连接中
  208. uni.getBluetoothDevices({
  209. success(res) {
  210. console.log(res.devices,that.deviceId)
  211. let has = res.devices.find(item => item.deviceId == that.deviceId)
  212. if(that.blueConnect && has){
  213. that.showOk = true
  214. that.modelContent = `
  215. <div>
  216. <div style="font-weight:bold;padding:10px 0;">投递重量:<span style="color:red">${that.balanceData}</span> g</div>
  217. <div>提交后将为此用户计入本次投递数据,确认提交吗?</div>
  218. </div>
  219. `
  220. }else{
  221. that.reConnect(1)
  222. }
  223. }
  224. })
  225. },
  226. // 取消提交
  227. cancel(){
  228. this.showOk = false
  229. this.modelContent = ''
  230. },
  231. // 确认提交
  232. confirm(){
  233. }
  234. }
  235. }
  236. </script>
  237. <style lang="less">
  238. .content{
  239. width: 100%;
  240. padding: 20rpx;
  241. background-color: #FFFFFF;
  242. .steps{
  243. padding: 40rpx 0;
  244. border-bottom: 1px solid #f8f8f8;
  245. }
  246. .flex-row{
  247. display: flex;
  248. align-items: center;
  249. justify-content: flex-end;
  250. }
  251. .form-flex{
  252. display: flex;
  253. align-items: center;
  254. > view{
  255. &:first-child{
  256. width: 30%;
  257. }
  258. &:last-child{
  259. width: 70%;
  260. text-align: right;
  261. color: #666;
  262. }
  263. }
  264. }
  265. .form-row{
  266. border-bottom: 1px solid #f8f8f8;
  267. padding: 20rpx 15rpx;
  268. position: relative;
  269. .red{
  270. color: red;
  271. margin-right: 6rpx;
  272. }
  273. .des{
  274. color: #666;
  275. margin-left: 5rpx;
  276. font-size: 24rpx;
  277. }
  278. .nums{
  279. color: red;
  280. margin-right: 5rpx;
  281. }
  282. }
  283. .form-grid{
  284. display: flex;
  285. align-items: center;
  286. flex-wrap: wrap;
  287. justify-content: space-around;
  288. > view{
  289. width: 30%;
  290. border: 1px solid #eee;
  291. margin: 20rpx 0;
  292. padding: 20rpx;
  293. border-radius: 6rpx;
  294. text-align: center;
  295. .texts{
  296. font-size: 24rpx;
  297. color: #999;
  298. padding: 10rpx 0;
  299. }
  300. }
  301. .active{
  302. border-color: #ffaa00;
  303. background-color: #ffd36a;
  304. color: #FFFFFF;
  305. .texts{
  306. color: #FFFFFF;
  307. }
  308. }
  309. }
  310. .buttons{
  311. padding: 50rpx 5%;
  312. display: flex;
  313. align-items: center;
  314. justify-content: center;
  315. >view{
  316. width: 50%;
  317. padding: 0 5%;
  318. }
  319. }
  320. .notes{
  321. background: #fff3dc;
  322. border:1px solid #efb564;
  323. margin-top: 60rpx;
  324. border-radius: 10rpx;
  325. > view{
  326. &:first-child{
  327. padding: 20rpx;
  328. }
  329. &:last-child{
  330. padding: 0 20rpx;
  331. > view{
  332. padding: 10rpx 20rpx;
  333. }
  334. }
  335. }
  336. }
  337. .slot-content{
  338. padding: 25rpx 50rpx 50rpx;
  339. }
  340. }
  341. </style>