|
|
@@ -2,6 +2,7 @@
|
|
|
<div class="club-bind">
|
|
|
<div class="form-container">
|
|
|
<div class="logo">
|
|
|
+ <!-- <img src="~/assets/theme-images/ross/ross-logo.png" alt="" /> -->
|
|
|
<img :src="supplierInfo.logo" :alt="supplierInfo.shopName" />
|
|
|
</div>
|
|
|
<div class="tip">输入验证码即可完成账号注册及ROSS授权牌匾制作与寄送</div>
|
|
|
@@ -34,6 +35,7 @@
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+ <div id="slide-verify" class="verify-wrap"></div>
|
|
|
<el-button type="primary" class="confirm" @click="onSubmit"
|
|
|
>确定</el-button
|
|
|
>
|
|
|
@@ -50,7 +52,7 @@
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="onCancel" v-if="resultStatus === -2">取消</el-button>
|
|
|
<el-button type="primary" @click="onConfirm">{{
|
|
|
- resultStatus === 0 ? '确定' : '去登录'
|
|
|
+ resultStatus === -2 ? '去登录' : '确定'
|
|
|
}}</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -59,12 +61,23 @@
|
|
|
<script>
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import { isMobile } from '~/utils/validator'
|
|
|
+import { SlideVerify } from '@/utils/libs/slide-verify'
|
|
|
export default {
|
|
|
layout: 'app',
|
|
|
data() {
|
|
|
+ var validateMobile = (rule, value, callback) => {
|
|
|
+ if (!value || isMobile(value)) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback(new Error('手机号格式不正确'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
return {
|
|
|
resultStatus: 0,
|
|
|
dialogVisible: false,
|
|
|
+ slideVerifyStatus: false,
|
|
|
+ slideVerify: null,
|
|
|
formData: {
|
|
|
mobile: '',
|
|
|
verifyCode: '',
|
|
|
@@ -74,6 +87,7 @@ export default {
|
|
|
rules: {
|
|
|
mobile: [
|
|
|
{ required: true, message: '手机号不能为空', trigger: ['blur'] },
|
|
|
+ { validator: validateMobile, trigger: ['blur'] },
|
|
|
],
|
|
|
verifyCode: [
|
|
|
{ required: true, message: '验证码不能为空', trigger: ['blur'] },
|
|
|
@@ -88,7 +102,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['authUserId', 'routePrefix','supplierInfo']),
|
|
|
+ ...mapGetters(['authUserId', 'routePrefix', 'supplierInfo']),
|
|
|
sendCodeBtnText() {
|
|
|
return this.sendStatus === 0
|
|
|
? '发送验证码'
|
|
|
@@ -101,28 +115,23 @@ export default {
|
|
|
created() {
|
|
|
this.$store.commit('app/HIDE_LAYOUT')
|
|
|
this.initLinkInfo()
|
|
|
+ this.initSlideVerify()
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
this.$store.commit('app/SHOW_LAYOUT')
|
|
|
},
|
|
|
methods: {
|
|
|
- // 判断机构是否已经被绑定
|
|
|
- async checkoutClubIsBind() {
|
|
|
- this.isRequest = true
|
|
|
- try {
|
|
|
- const res = await this.$http.api.fetchClubAuthInfo({
|
|
|
- authUserId: this.authUserId,
|
|
|
- authId: this.authId,
|
|
|
+ initSlideVerify() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.slideVerify = new SlideVerify('#slide-verify', {
|
|
|
+ initText: '请向右滑动滑块', //设置 初始的 显示文字
|
|
|
+ sucessText: '验证通过', //设置 验证通过 显示的文字
|
|
|
+ getSuccessState: (status) => {
|
|
|
+ //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
|
|
|
+ this.slideVerifyStatus = status
|
|
|
+ },
|
|
|
})
|
|
|
- const auth = res.data.auth
|
|
|
- if (auth) {
|
|
|
- this.bindStatus = auth.bindStatus
|
|
|
- this.dialogActive = auth.bindStatus === 1
|
|
|
- }
|
|
|
- this.isRequest = false
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- }
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
// 取消操作
|
|
|
@@ -161,11 +170,19 @@ export default {
|
|
|
},
|
|
|
// 提交
|
|
|
async onSubmit() {
|
|
|
+ if (!this.slideVerifyStatus) {
|
|
|
+ return this.$toast('滑动验证未通过')
|
|
|
+ }
|
|
|
try {
|
|
|
await this.$refs.formRef.validate()
|
|
|
this.onRegisterSubmit()
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
+ } finally {
|
|
|
+ this.slideVerifyStatus = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.slideVerify?.resetVerify()
|
|
|
+ }, 500)
|
|
|
}
|
|
|
},
|
|
|
// 用户注册
|
|
|
@@ -208,7 +225,7 @@ export default {
|
|
|
},
|
|
|
// 倒计时
|
|
|
countdown() {
|
|
|
- this.sendStatus = 30
|
|
|
+ this.sendStatus = 60
|
|
|
this.timer = setInterval(() => {
|
|
|
if (this.sendStatus === 0) {
|
|
|
clearInterval(this.timer)
|
yuwenjun1997