|
@@ -6,7 +6,9 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="验证码" prop="verifyCode">
|
|
|
<el-input placeholder="验证码内容" v-model="phoneBindingForm.verifyCode" class="input-with-select">
|
|
|
- <el-button slot="append" @click="getVerifyCode">{{hasVerifyCode ? codeTime : '获取验证码'}}</el-button>
|
|
|
+ <el-button slot="append" @click="getVerifyCode" :disabled="hasVerifyCode">{{hasVerifyCode ? codeTime :
|
|
|
+ '获取验证码'}}
|
|
|
+ </el-button>
|
|
|
</el-input>
|
|
|
<span v-if="hasVerifyCode">验证码已发送到您手机上</span>
|
|
|
</el-form-item>
|
|
@@ -19,94 +21,90 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import Http from '@/js/http.js'
|
|
|
- import {storageGet} from '@/js/index'
|
|
|
- import {notify} from '@/constants/index'
|
|
|
+ import Http from '@/js/http.js'
|
|
|
+ import {storageGet} from '@/js/index'
|
|
|
+ import {notify} from '@/constants/index'
|
|
|
|
|
|
- export default {
|
|
|
- name: "BindingMobile",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- phoneBindingForm: {
|
|
|
- phone: '',
|
|
|
- verifyCode: ''
|
|
|
- },
|
|
|
- hasVerifyCode: false,
|
|
|
- codeTime: 60,
|
|
|
- user: {},
|
|
|
- rules: {
|
|
|
- verifyCode: [
|
|
|
- {required: true, message: '请输入验证码', trigger: 'blur'},
|
|
|
- {min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur'}
|
|
|
- ],
|
|
|
- phone: [
|
|
|
- {required: true, message: '请输入手机号', trigger: 'blur'},
|
|
|
- {min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur'}
|
|
|
- ],
|
|
|
- }
|
|
|
- }
|
|
|
+ export default {
|
|
|
+ name: "BindingMobile",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ phoneBindingForm: {
|
|
|
+ phone: '',
|
|
|
+ verifyCode: ''
|
|
|
},
|
|
|
- methods: {
|
|
|
- setUserInfo() {
|
|
|
- let userId = storageGet('user') && storageGet('user').userVO.id;
|
|
|
- Http.get(`/api/user/${userId}`).then(res => {
|
|
|
- this.user = res.userVO
|
|
|
- })
|
|
|
- },
|
|
|
- getVerifyCode() {
|
|
|
- let params = {
|
|
|
- id: this.user.id,
|
|
|
- mobile: this.phoneBindingForm.phone
|
|
|
- }
|
|
|
- Http.put('/api/verify/mobile', params).then((res) => {
|
|
|
- if (res.msg == "ERROR") {
|
|
|
- notify('error', res.data);
|
|
|
- } else {
|
|
|
- notify('success', res.data);
|
|
|
- this.hasVerifyCode = true;
|
|
|
- let _this = this;
|
|
|
- let codeTimer = setInterval(function () {
|
|
|
- if (_this.codeTime > 0) {
|
|
|
- _this.codeTime--;
|
|
|
- } else {
|
|
|
- clearInterval(codeTimer);
|
|
|
- _this.hasVerifyCode = false;
|
|
|
- this.codeTime = 10;
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- notify('error', '绑定手机失败:' + err.data);
|
|
|
- })
|
|
|
- },
|
|
|
- bindingMobile() {
|
|
|
- // this.$refs['phoneBindingForm'].validate(valid => {
|
|
|
- // if (valid) {
|
|
|
- //
|
|
|
- // }
|
|
|
- // })
|
|
|
- let params = {
|
|
|
- id: this.user.id,
|
|
|
- mobile: this.phoneBindingForm.phone,
|
|
|
- verifyCode: this.phoneBindingForm.verifyCode
|
|
|
- };
|
|
|
- Http.put('/api/user/mobile', params).then(res => {
|
|
|
- if (res.msg == "ERROR") {
|
|
|
- notify('error', '重新绑定失败:' + res.data);
|
|
|
- } else {
|
|
|
- notify('success', '重新绑定成功');
|
|
|
- this.$router.push({path: '/personal/phoneBinding'});
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- notify('error', err.data);
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.setUserInfo()
|
|
|
+ hasVerifyCode: false,
|
|
|
+ codeTime: 60,
|
|
|
+ user: {},
|
|
|
+ rules: {
|
|
|
+ verifyCode: [
|
|
|
+ {required: true, message: '请输入验证码', trigger: 'blur'},
|
|
|
+ {min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ {required: true, message: '请输入手机号', trigger: 'blur'},
|
|
|
+ {min: 11, max: 11, message: '手机号不合法', trigger: 'blur'}
|
|
|
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setUserInfo() {
|
|
|
+ let userId = storageGet('user') && storageGet('user').userVO.id;
|
|
|
+ Http.get(`/api/user/${userId}`).then(res => {
|
|
|
+ this.user = res.userVO
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getVerifyCode() {
|
|
|
+ let params = {
|
|
|
+ id: this.user.id,
|
|
|
+ mobile: this.phoneBindingForm.phone
|
|
|
}
|
|
|
+ Http.put('/api/verify/mobile', params).then((res) => {
|
|
|
+ if (res.msg == "ERROR") {
|
|
|
+ notify('error', res.data);
|
|
|
+ } else {
|
|
|
+ notify('success', res.data);
|
|
|
+ this.hasVerifyCode = true;
|
|
|
+ let _this = this;
|
|
|
+ let codeTimer = setInterval(function () {
|
|
|
+ if (_this.codeTime > 0) {
|
|
|
+ _this.codeTime--;
|
|
|
+ } else {
|
|
|
+ clearInterval(codeTimer);
|
|
|
+ _this.hasVerifyCode = false;
|
|
|
+ this.codeTime = 10;
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ notify('error', '绑定手机失败:' + err.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ bindingMobile() {
|
|
|
+ let params = {
|
|
|
+ id: this.user.id,
|
|
|
+ mobile: this.phoneBindingForm.phone,
|
|
|
+ verifyCode: this.phoneBindingForm.verifyCode
|
|
|
+ };
|
|
|
+ Http.put('/api/user/mobile', params).then(res => {
|
|
|
+ if (res.msg == "ERROR") {
|
|
|
+ notify('error', '重新绑定失败:' + res.data);
|
|
|
+ } else {
|
|
|
+ notify('success', '重新绑定成功');
|
|
|
+ this.$router.push({path: '/personal/phoneBinding'});
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ notify('error', err.data);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.setUserInfo()
|
|
|
+
|
|
|
}
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|