userAuth.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  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="active">
  21. <view>废旧纸张</view>
  22. <view class="texts">200g/1乐豆</view>
  23. </view>
  24. <view>
  25. <view>废旧纸张</view>
  26. <view class="texts">200g/1乐豆</view>
  27. </view>
  28. <view>
  29. <view>废旧纸张</view>
  30. <view class="texts">200g/1乐豆</view>
  31. </view>
  32. <view>
  33. <view>废旧纸张</view>
  34. <view class="texts">200g/1乐豆</view>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="step2" v-if="current==1">
  40. <view class="form-row form-flex">
  41. <view>投递手机号</view>
  42. <view>13709146191</view>
  43. </view>
  44. <view class="form-row form-flex">
  45. <view>用户乐豆余额</view>
  46. <view><text class="nums">560</text></view>
  47. </view>
  48. <view class="form-row form-flex">
  49. <view>投递类型</view>
  50. <view>
  51. 废旧衣服
  52. <text class="des">(200g/1乐豆)</text>
  53. </view>
  54. </view>
  55. <view class="form-row form-flex">
  56. <view>投递重量</view>
  57. <view><text class="nums">{{balanceData}}g</text></view>
  58. </view>
  59. <view class="form-row form-flex">
  60. <view>可兑换乐豆数</view>
  61. <view><text class="nums">10</text></view>
  62. </view>
  63. </view>
  64. <view class="buttons">
  65. <view v-if="current==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
  66. <view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
  67. <view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
  68. </view>
  69. </view>
  70. </template>
  71. <script>
  72. export default {
  73. data() {
  74. return {
  75. customStyle: {
  76. background: '#00aaff'
  77. },
  78. current: 0,
  79. numList: [{
  80. name: '用户认证'
  81. }, {
  82. name: '称重'
  83. }],
  84. formData:{
  85. address: '',
  86. phone: '',
  87. washType: '0'
  88. }
  89. }
  90. },
  91. computed: {
  92. balanceData() {
  93. let data = this.$store.state.vuex_balanceData
  94. console.log(data.split(','))
  95. let weight = data.split(',')[2]
  96. let uit = ''
  97. let fh = ''
  98. weight = weight.replace('\n','')
  99. // 符号位
  100. if(weight.indexOf('+')>=0){
  101. fh = '+'
  102. }
  103. if(weight.indexOf('-')>=0){
  104. fh = '-'
  105. }
  106. // 解析数字
  107. if(weight.indexOf('kg')>0){
  108. weight = weight.replace(/\+|-|[kg]/g,'')
  109. console.log(weight,'kg-weight')
  110. weight = Number(weight) * 1000
  111. uit = 'kg'
  112. }else if(weight.indexOf('lb')>0){
  113. weight = weight.replace(/\+|-|[lb]/g,'')
  114. console.log(weight,'lb-weight')
  115. weight = Math.floor(Number(weight) * 453.59237)
  116. uit = 'lb'
  117. }else{
  118. weight = weight.replace(/\+|-|g/g,'')
  119. console.log(weight,'g-weight')
  120. weight = Number(weight)
  121. uit = 'g'
  122. }
  123. console.log(weight,uit,fh,'weight end')
  124. return fh + weight
  125. }
  126. },
  127. methods: {
  128. next(){
  129. if(this.formData.phone == ''){
  130. uni.showToast({
  131. icon: 'none',
  132. title: '请输入手机号码'
  133. })
  134. return
  135. }
  136. if(this.formData.washType == ''){
  137. uni.showToast({
  138. icon: 'none',
  139. title: '请选择投递类型'
  140. })
  141. return
  142. }
  143. this.current = this.current + 1
  144. },
  145. prev(){
  146. this.current = this.current - 1
  147. },
  148. submit(){
  149. }
  150. }
  151. }
  152. </script>
  153. <style lang="less">
  154. .content{
  155. width: 100%;
  156. padding: 20rpx;
  157. background-color: #FFFFFF;
  158. .steps{
  159. padding: 40rpx 0;
  160. border-bottom: 1px solid #f8f8f8;
  161. }
  162. .form-flex{
  163. display: flex;
  164. align-items: center;
  165. > view{
  166. &:first-child{
  167. width: 30%;
  168. }
  169. &:last-child{
  170. width: 70%;
  171. text-align: right;
  172. color: #666;
  173. }
  174. }
  175. }
  176. .form-row{
  177. border-bottom: 1px solid #f8f8f8;
  178. padding: 20rpx 15rpx;
  179. position: relative;
  180. .red{
  181. color: red;
  182. margin-right: 6rpx;
  183. }
  184. .des{
  185. color: #666;
  186. margin-left: 5rpx;
  187. font-size: 24rpx;
  188. }
  189. .nums{
  190. color: red;
  191. margin-right: 5rpx;
  192. }
  193. }
  194. .form-grid{
  195. display: flex;
  196. align-items: center;
  197. flex-wrap: wrap;
  198. justify-content: space-around;
  199. > view{
  200. width: 45%;
  201. border: 1px solid #eee;
  202. margin: 20rpx 0;
  203. padding: 20rpx;
  204. border-radius: 6rpx;
  205. text-align: center;
  206. .texts{
  207. font-size: 24rpx;
  208. color: #999;
  209. padding: 10rpx 0;
  210. }
  211. }
  212. .active{
  213. border-color: #ffaa00;
  214. background-color: #ffd36a;
  215. color: #FFFFFF;
  216. .texts{
  217. color: #FFFFFF;
  218. }
  219. }
  220. }
  221. .buttons{
  222. padding: 50rpx 5%;
  223. display: flex;
  224. align-items: center;
  225. justify-content: center;
  226. >view{
  227. width: 50%;
  228. padding: 0 5%;
  229. }
  230. }
  231. }
  232. </style>