forked from TALL/check-work
26 changed files with 491 additions and 137 deletions
|
After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 217 KiB |
|
Before Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
@ -0,0 +1,171 @@ |
|||
<!-- |
|||
Copyright (c) 2020. |
|||
author: song |
|||
email: 15235360226@163.com |
|||
--> |
|||
|
|||
<template> |
|||
<div> |
|||
<a-modal :confirm-loading="confirmLoading" :visible="showModel" @cancel="handleCancel" @ok="handleOk()" title="电话验证" width="50%"> |
|||
<a-form :form="form"> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required> |
|||
<a-input placeholder="请输入手机号" type="tel" v-model="tel" /> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required> |
|||
<div class="d-flex flex-nowrap"> |
|||
<a-input placeholder="请输入图片验证码" required type="number" v-model="codeNum" /> |
|||
<img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" /> |
|||
<a-button @click="changePicCode" class="code_img ml-2" size="small" type="primary" v-else>重新获取</a-button> |
|||
</div> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required> |
|||
<div class="d-flex flex-nowrap"> |
|||
<a-input placeholder="请输入验证码" type="number" v-model="code" /> |
|||
<a-button class="ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
|||
<a-button :disabled="!showCode" @click="getCode" class="ml-2" type="primary" v-else>获取验证码</a-button> |
|||
</div> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapActions } from 'vuex'; |
|||
import { carAndBuy } from 'config/api'; |
|||
|
|||
const formItemLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
|
|||
export default { |
|||
name: 'CartModel', |
|||
components: {}, |
|||
|
|||
props: { |
|||
showModel: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
phone: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
confirmLoading: false, |
|||
formItemLayout, |
|||
formTailLayout, |
|||
form: this.$form.createForm(this, { name: 'submitPhone' }), |
|||
tel: '', |
|||
code: '', |
|||
codeNum: '', |
|||
phoneRules: [ |
|||
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
|||
], |
|||
codeRules: [ |
|||
{ required: true, message: '请输入验证码' }, |
|||
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
|||
], |
|||
showInterval: false, |
|||
codeTimer: null, |
|||
interval: 120, // 验证码有效时间倒计时 |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
...mapState('user', ['picCode']), |
|||
|
|||
showCode() { |
|||
return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.tel); |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
phone(val) { |
|||
this.tel = this.phone; |
|||
}, |
|||
}, |
|||
|
|||
created() { |
|||
// if (this.phone) this.tel = this.phone; |
|||
this.sendPicCode(); |
|||
}, |
|||
|
|||
methods: { |
|||
...mapActions('user', ['sendCode', 'sendPicCode']), |
|||
|
|||
handleOk() { |
|||
if (!this.tel) { |
|||
this.$message.error('电话为必填项'); |
|||
} else { |
|||
if (this.tel) { |
|||
const phoneRule = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.tel); |
|||
if (phoneRule) { |
|||
this.$emit('submitCart', this.tel); |
|||
this.$emit('handleCancel'); |
|||
} else { |
|||
this.$message.error('请输入正确的联系电话'); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
handleCancel() { |
|||
this.$emit('handleCancel'); |
|||
}, |
|||
|
|||
// 获取验证码 |
|||
async getCode() { |
|||
try { |
|||
const params = { |
|||
phone: this.tel, |
|||
verificationCodeId: this.picCode.verificationCodeId, |
|||
verificationCodeValue: this.codeNum, |
|||
}; |
|||
await this.sendCode(params); |
|||
this.getCodeInterval(); |
|||
} catch (error) { |
|||
throw new Error(`SignIn.vue method getCode: ${error}`); |
|||
} |
|||
}, |
|||
|
|||
// 验证码倒计时 |
|||
getCodeInterval() { |
|||
this.showInterval = true; |
|||
this.codeTimer = setInterval(() => { |
|||
if (this.interval === 0) { |
|||
clearInterval(this.codeTimer); |
|||
this.codeTimer = null; |
|||
this.showInterval = false; |
|||
this.interval = 120; |
|||
return; |
|||
} |
|||
this.interval = this.interval - 1; |
|||
}, 1000); |
|||
}, |
|||
|
|||
// 刷新验证码 |
|||
changePicCode() { |
|||
this.sendPicCode(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue