transaction.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view class="container">
  3. <view class="row b-b">
  4. <text class="tit">{{$t('reg.a2')}}</text>
  5. <input class="input" v-model="account" type="text" :placeholder="$t('reg.a3')" placeholder-class="placeholder" />
  6. </view>
  7. <view class="row b-b">
  8. <text class="tit">{{$t('reg.a8')}}</text>
  9. <input class="input" v-model="password" type="password" :placeholder="$t('reg.a9')" placeholder-class="placeholder" />
  10. </view>
  11. <view class="row b-b">
  12. <text class="tit">{{$t('reg.b0')}}</text>
  13. <input class="input" v-model="repeat" type="password" :placeholder="$t('reg.b1')" placeholder-class="placeholder" />
  14. </view>
  15. <view class="row b-b">
  16. <text class="tit">{{$t('reg.a6')}}</text>
  17. <input class="input" v-model="captcha" type="text" :placeholder="$t('reg.a7')" placeholder-class="placeholder" />
  18. <view class="code" @click="verification">{{ countDown == 0 ? $t('reg.c6') : countDown }}</view>
  19. </view>
  20. <button class="add-btn" :class="{'bg-gray':loding}" @click="loding?'':confirm()">{{$t('common.submit')}}</button>
  21. </view>
  22. </template>
  23. <script>
  24. import { verify } from '@/api/login.js';
  25. import { mapState } from 'vuex';
  26. import { registerReset } from '@/api/set.js';
  27. export default {
  28. data() {
  29. return {
  30. time: '', //保存倒计时对象
  31. countDown: 0, //倒计时
  32. account: '', //手机号
  33. captcha: '', //验证码
  34. password: '' ,//新密码
  35. repeat: '', //重复密码
  36. loding:false,//是否载入中
  37. };
  38. },
  39. computed: {
  40. ...mapState(['userInfo'])
  41. },
  42. onLoad() {
  43. if(this.userInfo.phone == null){
  44. this.account = '';
  45. }else{
  46. this.account = this.userInfo.phone;
  47. this.show = false;
  48. }
  49. },
  50. watch: {
  51. // 监听倒计时
  52. countDown(i) {
  53. if (i == 0) {
  54. clearInterval(this.time);
  55. }
  56. }
  57. },
  58. methods: {
  59. //发送验证码
  60. verification() {
  61. let obj = this;
  62. if (this.account == '') {
  63. this.$api.msg('请输入电话号码');
  64. return;
  65. }
  66. if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
  67. this.$api.msg('请输入正确的手机号');
  68. return;
  69. }
  70. // 判断是否在倒计时
  71. if (obj.countDown > 0) {
  72. return false;
  73. } else {
  74. obj.countDown = 60;
  75. obj.time = setInterval(() => {
  76. obj.countDown--;
  77. }, 1000);
  78. //调用验证码接口
  79. verify({
  80. phone: obj.account,
  81. type: ''
  82. })
  83. .then(({ data }) => {})
  84. .catch(err => {
  85. console.log(err);
  86. });
  87. }
  88. },
  89. confirm(e) {
  90. // 检查两次输入的新密码是否一致
  91. if (this.password === this.repeat) {
  92. // 发送请求或执行逻辑来修改密码
  93. // 根据具体需求进行操作
  94. console.log('密码修改成功');
  95. // 更新交易密码
  96. this.password = this.repeat;
  97. // 清空输入框
  98. this.password = '';
  99. this.repeat = '';
  100. } else {
  101. console.log('两次输入的密码不一致');
  102. }
  103. }
  104. }
  105. };
  106. </script>
  107. <style lang="scss">
  108. page {
  109. background: $page-color-base;
  110. }
  111. .container {
  112. padding-top: 30rpx;
  113. }
  114. .row {
  115. display: flex;
  116. align-items: center;
  117. position: relative;
  118. padding: 0 30rpx;
  119. height: 110rpx;
  120. background: #191a1f;
  121. .tit {
  122. flex-shrink: 0;
  123. font-size: 30rpx;
  124. color: $font-color-white;
  125. }
  126. .input {
  127. flex: 1;
  128. font-size: 30rpx;
  129. color: $font-color-light;
  130. padding-left: 20rpx;
  131. }
  132. .iconlocation {
  133. font-size: 36rpx;
  134. color: $font-color-light;
  135. }
  136. }
  137. .add-btn {
  138. display: flex;
  139. align-items: center;
  140. justify-content: center;
  141. width: 690rpx;
  142. height: 80rpx;
  143. margin: 60rpx auto;
  144. font-size: $font-lg;
  145. color: #fff;
  146. background-color: $base-color;
  147. border-radius: 40rpx;
  148. // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  149. }
  150. .bg-gray{
  151. background-color: $color-gray;
  152. }
  153. .code {
  154. color: #5dbc7c;
  155. font-size: 23rpx;
  156. border-left: 1px solid #eeeeee;
  157. width: 150rpx;
  158. flex-shrink: 0;
  159. text-align: center;
  160. }
  161. </style>