password.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view class="content">
  3. <form @submit="onSubmit">
  4. <view class="hg24"></view>
  5. <view class="box-pack-between item bgf flex-y-center">
  6. <text>手机号</text>
  7. <view class="tr">
  8. <input placeholder-class="placeholder-class" disabled name="tel" @input="phoneInput" type="number" :value="phoneData"
  9. placeholder="请输入手机号" maxlength="11" />
  10. </view>
  11. </view>
  12. <block>
  13. <view class="box-pack-between item bgf flex-y-center">
  14. <text>验证码</text>
  15. <view class="tr flex-y-center">
  16. <input placeholder-class="placeholder-class" name="code" type="number" placeholder="请输入短信验证码" />
  17. <view class="method-line"></view>
  18. <text class="get-code" v-if="sendNum==1">{{sendMg}}</text>
  19. <text class="get-code" v-else @click="getVerCode">{{sendMg}}</text>
  20. </view>
  21. </view>
  22. </block>
  23. <view class="hg24"></view>
  24. <view class="box-pack-between item bgf flex-y-center">
  25. <text>设置新密码</text>
  26. <view class="tr">
  27. <input placeholder-class="placeholder-class" type="text" name="pass" value="" placeholder="6到16位的数字或字母"
  28. maxlength="16" />
  29. </view>
  30. </view>
  31. <view class="box-pack-between item bgf flex-y-center">
  32. <text>确认新密码</text>
  33. <view class="tr">
  34. <input placeholder-class="placeholder-class" type="text" name="repass" value="" placeholder="请再次输入新密码" maxlength="16" />
  35. </view>
  36. </view>
  37. <view class="bottom-bar">
  38. <button class="login-btn flex-center" formType="submit">确定</button>
  39. </view>
  40. </form>
  41. </view>
  42. </template>
  43. <script>
  44. export default {
  45. data() {
  46. return {
  47. phoneData: "", //电话
  48. verCode: "", //验证码
  49. sendMg: '获取验证码',
  50. time: 60,
  51. sendNum: 0,
  52. is_code: null,
  53. }
  54. },
  55. components: {
  56. },
  57. onLoad(e) {
  58. this.phoneData=e.tel;
  59. },
  60. onShareAppMessage(e) {
  61. },
  62. methods: {
  63. phoneInput(e) {
  64. this.phoneData = e.detail.value;
  65. },
  66. //获取验证码
  67. getVerCode() {
  68. if (this.phoneData.length != 11) {
  69. uni.showToast({
  70. icon: 'none',
  71. position: 'bottom',
  72. title: '手机号不正确'
  73. });
  74. return false;
  75. }
  76. this.request({
  77. url: "user/sendcode",
  78. data: {
  79. tel: this.phoneData,
  80. },
  81. }).then(res => {
  82. console.log(res, "res")
  83. if (res.code === '200') {
  84. let tim = setInterval(() => {
  85. this.time = parseInt(this.time) - 1;
  86. this.sendMg = "剩余" + this.time + "S";
  87. this.sendNum = 1;
  88. if (this.time <= 0) {
  89. this.sendMg = "获取验证码";
  90. this.sendNum = 0;
  91. clearInterval(tim);
  92. this.time = 10;
  93. }
  94. }, 1000);
  95. }
  96. }).catch((res) => {
  97. uni.showToast({
  98. title: res.message,
  99. icon: 'none',
  100. duration: 2000
  101. })
  102. });
  103. },
  104. onSubmit(e) {
  105. let data = e.detail.value;
  106. data.token=uni.getStorageSync("token");
  107. data.type=1;
  108. this.request({
  109. url: "user/edit_pass",
  110. data,
  111. }).then(res => {
  112. console.log(res, "res")
  113. if (res.code === '200') {
  114. uni.showToast({
  115. title: "设置成功",
  116. icon: 'none',
  117. duration: 2000
  118. })
  119. setTimeout(() => {
  120. uni.navigateBack({
  121. delta: 1
  122. })
  123. }, 1500)
  124. }
  125. }).catch((res) => {
  126. uni.showToast({
  127. title: res.message,
  128. icon: 'none',
  129. duration: 2000
  130. })
  131. });
  132. },
  133. }
  134. }
  135. </script>
  136. <style lang="scss">
  137. .hg24 {
  138. height: 24rpx;
  139. }
  140. .item {
  141. width: 100%;
  142. height: 100rpx;
  143. background: rgba(255, 255, 255, 1);
  144. font-size: 16px;
  145. font-weight: 400;
  146. color: rgba(51, 51, 51, 1);
  147. padding: 0 30rpx;
  148. }
  149. .get-code {
  150. font-size: 14px;
  151. font-family: Source Han Sans CN;
  152. font-weight: 400;
  153. color: #3387FF;
  154. opacity: 1;
  155. }
  156. .login-btn {
  157. width: 630rpx;
  158. height: 90rpx;
  159. background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
  160. box-shadow: 0px 2rpx 12rpx #3387FF;
  161. opacity: 1;
  162. border-radius: 45rpx;
  163. margin: 0 auto;
  164. color: #FFFFFF;
  165. font-size: 30rpx;
  166. font-family: Source Han Sans CN;
  167. font-weight: 500;
  168. opacity: 1;
  169. }
  170. .bottom-bar {
  171. position: fixed;
  172. bottom: 30px;
  173. left: 0;
  174. width: 100%;
  175. z-index: 1000;
  176. }
  177. .tr{
  178. text-align: right;
  179. }/* 分割线 */
  180. .method-line {
  181. width: 2rpx;
  182. height: 20rpx;
  183. background: rgba(159, 159, 159, 1);
  184. opacity: 1;
  185. border-radius: 1rpx;
  186. margin: 0 40rpx;
  187. }
  188. </style>