123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <template>
- <view class="container">
- <view class="row b-b">
- <text class="tit">手机号</text>
- <input class="input" v-model="account" type="text" placeholder="请填写手机号" placeholder-class="placeholder" />
- </view>
- <view class="row b-b">
- <text class="tit">验证码</text>
- <input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
- <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
- </view>
- <view class="row b-b">
- <text class="tit">新密码</text>
- <input class="input" v-model="password" type="password" placeholder="请填写新密码" placeholder-class="placeholder" />
- </view>
- <button class="add-btn" :class="{'bg-gray':loding}" @click="loding?'':confirm()">提交</button>
- </view>
- </template>
- <script>
- import { verify } from '@/api/login.js';
- import { mapState } from 'vuex';
- import { registerReset } from '@/api/set.js';
- export default {
- data() {
- return {
- time: '',
- countDown: 0,
- account: '',
- captcha: '',
- password: '' ,
- loding:false,
- };
- },
- computed: {
- ...mapState(['userInfo'])
- },
- onLoad() {
- if(this.userInfo.phone == null){
- this.account = '';
- }else{
- this.account = this.userInfo.phone;
- this.show = false;
- }
- },
- watch: {
-
- countDown(i) {
- if (i == 0) {
- clearInterval(this.time);
- }
- }
- },
- methods: {
-
- verification() {
- let obj = this;
- if (this.account == '') {
- this.$api.msg('请输入电话号码');
- return;
- }
- if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
- this.$api.msg('请输入正确的手机号');
- return;
- }
-
- if (obj.countDown > 0) {
- return false;
- } else {
- obj.countDown = 60;
- obj.time = setInterval(() => {
- obj.countDown--;
- }, 1000);
-
- verify({
- phone: obj.account,
- type: ''
- })
- .then(({ data }) => {})
- .catch(err => {
- console.log(err);
- });
- }
- },
- confirm(e) {
- this.loding = true;
- registerReset({
- account: this.account,
- captcha: this.captcha,
- password: this.password,
- })
- .then(({ data }) => {
- this.loding = false;
- this.$api.msg('修改成功');
- })
- .catch(err => {
- this.loding = false;
- console.log(err);
- });
- }
- }
- };
- </script>
- <style lang="scss">
- page {
- background: $page-color-base;
- }
- .container {
- padding-top: 30rpx;
- }
- .row {
- display: flex;
- align-items: center;
- position: relative;
- padding: 0 30rpx;
- height: 110rpx;
- background: #fff;
- .tit {
- flex-shrink: 0;
- width: 120rpx;
- font-size: 30rpx;
- color: $font-color-dark;
- }
- .input {
- flex: 1;
- font-size: 30rpx;
- color: $font-color-dark;
- }
- .iconlocation {
- font-size: 36rpx;
- color: $font-color-light;
- }
- }
- .add-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 690rpx;
- height: 80rpx;
- margin: 60rpx auto;
- font-size: $font-lg;
- color: #fff;
- background-color: $base-color;
- border-radius: 10rpx;
- // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
- }
- .bg-gray{
- background-color: $color-gray;
- }
- .code {
- color: #5dbc7c;
- font-size: 23rpx;
- border-left: 1px solid #eeeeee;
- width: 150rpx;
- flex-shrink: 0;
- text-align: center;
- }
- </style>
|