userAuth.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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 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. 第二步
  41. </view>
  42. <view class="buttons">
  43. <view v-if="current==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
  44. <view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
  45. <view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. customStyle: {
  54. background: '#00aaff'
  55. },
  56. current: 0,
  57. numList: [{
  58. name: '用户认证'
  59. }, {
  60. name: '称重'
  61. }],
  62. formData:{
  63. address: '',
  64. phone: '',
  65. washType: ''
  66. }
  67. }
  68. },
  69. methods: {
  70. next(){
  71. this.current = this.current + 1
  72. },
  73. prev(){
  74. this.current = this.current - 1
  75. },
  76. submit(){
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="less">
  82. .content{
  83. width: 100%;
  84. padding: 20rpx;
  85. background-color: #FFFFFF;
  86. .steps{
  87. padding: 40rpx 0;
  88. border-bottom: 1px solid #f8f8f8;
  89. }
  90. .form-flex{
  91. display: flex;
  92. align-items: center;
  93. > view{
  94. &:first-child{
  95. width: 30%;
  96. }
  97. &:last-child{
  98. width: 70%;
  99. text-align: right;
  100. color: #666;
  101. }
  102. }
  103. }
  104. .form-row{
  105. border-bottom: 1px solid #f8f8f8;
  106. padding: 20rpx 15rpx;
  107. position: relative;
  108. .red{
  109. color: red;
  110. margin-right: 6rpx;
  111. }
  112. }
  113. .form-grid{
  114. display: flex;
  115. align-items: center;
  116. flex-wrap: wrap;
  117. justify-content: space-around;
  118. > view{
  119. width: 45%;
  120. border: 1px solid #eee;
  121. margin: 20rpx 0;
  122. padding: 20rpx;
  123. border-radius: 6rpx;
  124. text-align: center;
  125. .texts{
  126. font-size: 24rpx;
  127. color: #999;
  128. padding: 10rpx 0;
  129. }
  130. }
  131. .active{
  132. border-color: #ffaa00;
  133. background-color: #ffd36a;
  134. color: #FFFFFF;
  135. .texts{
  136. color: #FFFFFF;
  137. }
  138. }
  139. }
  140. .buttons{
  141. padding: 50rpx 5%;
  142. display: flex;
  143. align-items: center;
  144. justify-content: center;
  145. >view{
  146. width: 50%;
  147. padding: 0 5%;
  148. }
  149. }
  150. }
  151. </style>