| | |
| | | |
| | | <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div> |
| | | |
| | | <div class="form-group" :class="{ 'disabled': isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t('hj195') }}</label> |
| | | <input type="text" v-model="form.name" class="form-input" :disabled="isActive" /> |
| | | <div class="form-group" :class="{ disabled: isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t("hj195") }}</label> |
| | | <input type="text" v-model="form.realName" class="form-input" :disabled="isActive" /> |
| | | </div> |
| | | |
| | | <div class="form-group" :class="{ 'disabled': isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t('it1') }}</label> |
| | | <van-radio-group v-model="auRadio" direction="horizontal" disabled style="font-size: 3.5vw;margin-top: 1em;"> |
| | | <van-radio name="1">{{ $t('dl1') }}</van-radio> |
| | | <van-radio name="2">{{ $t('pa1') }}</van-radio> |
| | | <van-radio name="3">{{ $t('ot1') }}</van-radio> |
| | | <div class="form-group" :class="{ disabled: isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t("it1") }}</label> |
| | | <van-radio-group v-model="form.realType" direction="horizontal" :disabled="isActive" |
| | | style="font-size: 3.5vw;margin-top: 1em;"> |
| | | <van-radio :name="1">{{ $t("dl1") }}</van-radio> |
| | | <van-radio :name="2">{{ $t("pa1") }}</van-radio> |
| | | <van-radio :name="3">{{ $t("身份證件") }}</van-radio> |
| | | </van-radio-group> |
| | | </div> |
| | | |
| | | <div class="form-group" :class="{ 'disabled': isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t('in1') }}</label> |
| | | <div class="form-group" :class="{ disabled: isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t("in1") }}</label> |
| | | <input type="text" v-model="form.idCard" class="form-input" :disabled="isActive" /> |
| | | </div> |
| | | |
| | | <div class="form-group" :class="{ 'disabled': isSubmitting || isActive }"> |
| | | <div class="form-group" :class="{ disabled: isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t("电话号码") }}</label> |
| | | <input type="text" v-model="form.vaildNumber" class="form-input" :disabled="isActive" /> |
| | | </div> |
| | | |
| | | <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div> |
| | | |
| | | <div class="form-group flex-between" :class="{ 'disabled': isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t('fsi1') }}</label> |
| | | <div class="form-group flex-between" :class="{ disabled: isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t("fsi1") }}</label> |
| | | |
| | | <el-upload :with-credentials="true" class="avatar-uploader" :action="admin + 'user/upload.do'" |
| | | list-type="picture-card" name="upload_file" :show-file-list="false" :on-success="handleAvatarSuccess" |
| | |
| | | </el-upload> |
| | | </div> |
| | | |
| | | <div class="form-group flex-between" :class="{ 'disabled': isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t('bsi1') }}</label> |
| | | <div class="form-group flex-between" :class="{ disabled: isSubmitting || isActive }"> |
| | | <label class="required-label">{{ $t("bsi1") }}</label> |
| | | |
| | | <el-upload :with-credentials="true" class="avatar-uploader" :action="admin + 'user/upload.do'" |
| | | list-type="picture-card" name="upload_file" :show-file-list="false" :on-success="handleAvatarSuccess2" |
| | |
| | | |
| | | <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div> |
| | | |
| | | <div class="submit-button" :class="{ 'disabled': isSubmitting || isActive }" @click="toSure"> |
| | | <span>{{ $t("uv1") }}</span> |
| | | <div class="submit-button" :class="{ disabled: isSubmitting || isActive }" @click="toSure"> |
| | | <span>{{ submitButtonLabel }}</span> |
| | | </div> |
| | | |
| | | <div class="auth-status-wrap" v-if="authRejectReason"> |
| | | <div class="auth-reject-reason"> |
| | | <div class="reason-label">{{ $t("hj201") }}</div> |
| | | <div class="reason-text">{{ authRejectReason }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import { isNull } from "@/utils/utils"; |
| | | import { Toast } from "vant"; |
| | | export default { |
| | | name: 'Authentication', |
| | | name: "Authentication", |
| | | data() { |
| | | return { |
| | | frontImage: '', |
| | | backImage: '', |
| | | frontImage: "", |
| | | backImage: "", |
| | | isSubmitting: false, |
| | | auRadio: '1', |
| | | form: { |
| | | phone: "", |
| | | name: "", |
| | | realName: "", |
| | | idCard: "", |
| | | realType: "1", |
| | | vaildNumber: "", |
| | | img1key: "", |
| | | img2key: "", |
| | | img2key: "" |
| | | }, |
| | | imgStatus: false, |
| | | admin: apiUrl.baseURL, |
| | | } |
| | | admin: apiUrl.baseURL |
| | | }; |
| | | }, |
| | | computed: { |
| | | //注册默认0 1.提交未实名 2.已实名 3.驳回, 状态1||2的时候屏蔽所有的输入 |
| | | // 注册默认0 1.审核中 2.已实名 3.驳回;状态1||2时屏蔽所有输入 |
| | | isActive() { |
| | | return this.$store.state.userInfo.isActive == 1 || this.$store.state.userInfo.isActive == 2; |
| | | // return false; |
| | | return ( |
| | | this.$store.state.userInfo.isActive == 1 || |
| | | this.$store.state.userInfo.isActive == 2 |
| | | ); |
| | | }, |
| | | authStatusCode() { |
| | | const u = this.$store.state.userInfo; |
| | | if ( |
| | | !u || |
| | | u.isActive === undefined || |
| | | u.isActive === null || |
| | | u.isActive === "" |
| | | ) { |
| | | return 0; |
| | | } |
| | | const n = Number(u.isActive); |
| | | return Number.isNaN(n) ? 0 : n; |
| | | }, |
| | | authRejectReason() { |
| | | if (this.authStatusCode !== 3) return ""; |
| | | const msg = |
| | | this.$store.state.userInfo && this.$store.state.userInfo.authMsg; |
| | | return msg ? String(msg) : ""; |
| | | }, |
| | | /** 状态 1/2 时替换提交按钮文案,其余仍为「确定」 */ |
| | | submitButtonLabel() { |
| | | const c = this.authStatusCode; |
| | | if (c === 1) return this.$t("auth_submit_certifying"); |
| | | if (c === 2) return this.$t("auth_submit_certified_done"); |
| | | return this.$t("hj161"); |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | // 如果用户已经提交过认证信息,可以显示认证状态 |
| | | }, |
| | | methods: { |
| | | |
| | | toSure() { |
| | | if (this.isSubmitting || this.isActive) return // 防止重复提交 |
| | | if (this.isSubmitting || this.isActive) return; // 防止重复提交 |
| | | // 实名认证弹框 |
| | | if (isNull(this.form.name)) { |
| | | if (isNull(this.form.realName)) { |
| | | Toast(this.$t("hj207")); |
| | | } else if (isNull(this.form.idCard)) { |
| | | Toast(this.$t("hj208")); |
| | |
| | | } |
| | | }, |
| | | async toAuthentication() { |
| | | this.isSubmitting = true |
| | | this.isSubmitting = true; |
| | | |
| | | let opts = { |
| | | realName: this.form.name, |
| | | idCard: this.form.idCard, |
| | | vaildNumber: this.form.vaildNumber, |
| | | img1key: this.form.img1key, |
| | | img2key: this.form.img2key, |
| | | img3key: this.form.img3key, |
| | | ...this.form |
| | | }; |
| | | let data = await api.userAuth(opts); |
| | | if (data.status === 0) { |
| | |
| | | } else { |
| | | Toast(data.msg); |
| | | } |
| | | this.isSubmitting = false |
| | | this.isSubmitting = false; |
| | | }, |
| | | async getUserInfo() { |
| | | // 获取用户信息 |
| | |
| | | ) { |
| | | this.form.idCard = this.$store.state.userInfo.idCard; |
| | | this.form.vaildNumber = this.$store.state.userInfo.vaildNumber; |
| | | this.form.name = this.$store.state.userInfo.realName; |
| | | this.form.realName = this.$store.state.userInfo.realName; |
| | | this.form.realType = this.$store.state.userInfo.realType; |
| | | this.form.img1key = this.$store.state.userInfo.img1Key; |
| | | this.form.img2key = this.$store.state.userInfo.img2Key; |
| | | this.showBtn = false; |
| | |
| | | }, |
| | | handleError2() { |
| | | this.imgStatus2 = false; |
| | | }, |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | @green: #c4d600; |
| | | @green: #00f0ff; |
| | | |
| | | /deep/ .van-nav-bar__content { |
| | | height: 65px; |
| | |
| | | } |
| | | |
| | | .form-group { |
| | | margin-bottom: .25em; |
| | | padding: .25em .25em 0; |
| | | margin-bottom: 0.25em; |
| | | padding: 0.25em 0.25em 0; |
| | | } |
| | | |
| | | label { |
| | |
| | | .required-label { |
| | | color: #333; |
| | | font-weight: bold; |
| | | font-size: .4em; |
| | | font-size: 0.4em; |
| | | } |
| | | |
| | | .required-label::before { |
| | | content: '*'; |
| | | content: "*"; |
| | | color: #ff4d4f; |
| | | margin-right: 4px; |
| | | } |
| | |
| | | border: 1px solid #e8e8e8; |
| | | border-radius: 4px; |
| | | padding: 0 15px; |
| | | font-size: .4em; |
| | | font-size: 0.4em; |
| | | box-sizing: border-box; |
| | | color: #333; |
| | | } |
| | |
| | | |
| | | .submit-button { |
| | | width: 9.5em; |
| | | margin: .4em auto 0; |
| | | margin: 0.4em auto 0; |
| | | height: 1.2em; |
| | | background-color: #e6e254; |
| | | color: #fff; |
| | |
| | | font-weight: normal; |
| | | |
| | | span { |
| | | font-size: .4em; |
| | | font-size: 0.4em; |
| | | } |
| | | } |
| | | |
| | | .disabled { |
| | | opacity: .5; |
| | | opacity: 0.5; |
| | | } |
| | | </style> |
| | | |
| | | .auth-status-wrap { |
| | | margin: 1em 0.25em 1.2em; |
| | | padding: 0.35em 0.3em 0.45em; |
| | | background: #f7f8fa; |
| | | border-radius: 8px; |
| | | border: 1px solid #e8e8e8; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .auth-status-title { |
| | | color: #666; |
| | | font-size: 14px; |
| | | margin-bottom: 0.35em; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .auth-status-value { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | line-height: 1.45; |
| | | word-break: break-word; |
| | | } |
| | | |
| | | .auth-status-none { |
| | | color: #999; |
| | | } |
| | | |
| | | .auth-status-pending { |
| | | color: #d48806; |
| | | } |
| | | |
| | | .auth-status-approved { |
| | | color: #389e0d; |
| | | } |
| | | |
| | | .auth-status-rejected { |
| | | color: #cf1322; |
| | | } |
| | | |
| | | .auth-reject-reason { |
| | | margin-top: 0.45em; |
| | | padding-top: 0.35em; |
| | | border-top: 1px dashed #e0e0e0; |
| | | } |
| | | |
| | | .auth-reject-reason .reason-label { |
| | | color: #666; |
| | | font-size: 13px; |
| | | margin-bottom: 0.2em; |
| | | } |
| | | |
| | | .auth-reject-reason .reason-text { |
| | | color: #333; |
| | | font-size: 14px; |
| | | line-height: 1.5; |
| | | word-break: break-word; |
| | | } |
| | | </style> |