safe-pass.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <view class="body">
  3. <view class="header-bg">
  4. </view>
  5. <view class="header">
  6. <view class="title">
  7. 设置支付密码
  8. </view>
  9. </view>
  10. <view class="main">
  11. <view class="input-item inline-form">
  12. <label class="label" for="">手机号码</label>
  13. <input class="input" type="text" placeholder="" v-model="form.mobile" disabled="true">
  14. </view>
  15. <view class="input-item inline-form">
  16. <label class="label" for="">验证码</label>
  17. <input class="input" type="text" placeholder="请输入验证码" v-model="form.captcha">
  18. <button class="send-vcode" @tap="sendSms()"
  19. :disabled="!sendable">{{sendable?'获取验证码':countdown+'秒'}}</button>
  20. </view>
  21. <view class="input-item inline-form">
  22. <label class="label" for="">新密码</label>
  23. <input class="input" type="password" placeholder="请输入新支付密码" maxlength="6" v-model="form.newsafepass">
  24. </view>
  25. <view class="input-item inline-form">
  26. <label class="label" for="">确认密码</label>
  27. <input class="input" type="password" placeholder="请输入新支付密码" maxlength="6" v-model="form.comfirmpass">
  28. </view>
  29. </view>
  30. <view style="margin: 10upx 40upx;font-size: 26upx;color: red;">*支付密码必须为6位数字</view>
  31. <view class="submit-btn-wrapper">
  32. <button class="btn submit-btn" type="default" @tap="submit">确认修改</button>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. let timeInterval = null;
  38. const time = 120;
  39. export default {
  40. data() {
  41. return {
  42. sendable: true,
  43. countdown: time,
  44. form: {
  45. type: "mobile",
  46. mobile: "",
  47. captcha: "",
  48. newsafepass: "",
  49. comfirmpass: ""
  50. }
  51. }
  52. },
  53. onLoad() {
  54. this.form.mobile = this.$store.state.user.mobile
  55. },
  56. methods: {
  57. sendSms() {
  58. if (this.sendable && this.$verified.mobile(this.form.mobile)) {
  59. this.sendable = false;
  60. this.$http.get({
  61. url: '/sms/send',
  62. data: {
  63. mobile: this.form.mobile,
  64. event: "resetsafepwd"
  65. },
  66. success: (res) => {
  67. uni.showToast({
  68. title: res.data.msg,
  69. icon: "none"
  70. })
  71. timeInterval = setInterval(() => {
  72. if (this.countdown-- === 0) {
  73. clearInterval(timeInterval)
  74. this.countdown = time;
  75. this.sendable = true;
  76. }
  77. }, 1000)
  78. },
  79. fail: () => {
  80. this.sendable = true;
  81. }
  82. })
  83. }
  84. },
  85. submit() {
  86. if (this.form.newsafepass !== this.form.comfirmpass) {
  87. uni.showToast({
  88. icon: "none",
  89. title: "两次输入的密码不一致"
  90. })
  91. return
  92. }
  93. if (this.$verified.safepass(this.form.newsafepass) && this.$verified.required(this.form.captcha,
  94. "请输入验证码")) {
  95. this.$http.post({
  96. url: "/user/resetsafepwd",
  97. data: this.form,
  98. success: (res) => {
  99. uni.showToast({
  100. title: "支付密码修改成功",
  101. icon: "none",
  102. success() {
  103. setTimeout(uni.navigateBack(), 1000)
  104. }
  105. })
  106. }
  107. })
  108. }
  109. }
  110. }
  111. }
  112. </script>
  113. <style lang="scss" scoped>
  114. .body {
  115. position: relative;
  116. overflow: hidden;
  117. }
  118. .header-bg {
  119. background: $primary-color;
  120. height: 100upx;
  121. position: absolute;
  122. top: 0;
  123. width: 100%;
  124. }
  125. .header {
  126. margin: 20upx;
  127. background: white;
  128. text-align: center;
  129. border-radius: 20upx;
  130. position: relative;
  131. z-index: 1;
  132. .title {
  133. height: 100upx;
  134. font-size: 32upx;
  135. line-height: 100upx;
  136. // font-weight: bold;
  137. }
  138. }
  139. .main {
  140. margin: 20upx;
  141. background: white;
  142. border-radius: 10upx;
  143. }
  144. .input-item.inline-form {
  145. display: flex;
  146. align-items: center;
  147. height: 80upx;
  148. font-size: 28upx;
  149. padding: 0 20upx;
  150. position: relative;
  151. color: #999999;
  152. .label {
  153. width: 160upx;
  154. // flex: 1 1 160upx;
  155. }
  156. .input {
  157. flex-grow: 1;
  158. font-size: 28upx;
  159. }
  160. }
  161. .send-vcode {
  162. background: $primary-color;
  163. color: white;
  164. font-size: 24upx;
  165. position: absolute;
  166. padding: 5upx 0;
  167. width: 160upx;
  168. line-height: normal;
  169. right: 0upx;
  170. top: 20upx;
  171. }
  172. .submit-btn-wrapper {
  173. margin-top: 80upx;
  174. .submit-btn {
  175. font-size: 30upx;
  176. line-height: 60upx;
  177. width: 250upx;
  178. background: $primary-color;
  179. color: white;
  180. }
  181. }
  182. </style>