| | |
| | | <template> |
| | | <div class="authentication-container"> |
| | | <van-nav-bar |
| | | :placeholder="true" |
| | | :safe-area-inset-top="true" |
| | | :title="$t('rnv')" |
| | | left-arrow |
| | | @click-left="$router.go(-1)" |
| | | > |
| | | <van-nav-bar :placeholder="true" :safe-area-inset-top="true" :title="$t('rnv')" left-arrow |
| | | @click-left="$router.go(-1)"> |
| | | </van-nav-bar> |
| | | |
| | | <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.realName" |
| | | class="form-input" |
| | | :disabled="isActive" |
| | | /> |
| | | <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="form.realType" |
| | | direction="horizontal" |
| | | :disabled="isActive" |
| | | style="font-size: 3.5vw;margin-top: 1em;" |
| | | > |
| | | <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> |
| | |
| | | |
| | | <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" |
| | | /> |
| | | <input type="text" v-model="form.idCard" class="form-input" :disabled="isActive" /> |
| | | </div> |
| | | |
| | | <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" |
| | | /> |
| | | <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 }" |
| | | > |
| | | <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" |
| | | :on-error="handleError" |
| | | :before-upload="beforeAvatarUpload" |
| | | :disabled="isActive" |
| | | > |
| | | <img |
| | | v-if="form.img1key" |
| | | :src="form.img1key" |
| | | class="id-img avatar" |
| | | style="width: 100%; height: 100%" |
| | | /> |
| | | <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" |
| | | :on-error="handleError" :before-upload="beforeAvatarUpload" :disabled="isActive"> |
| | | <img v-if="form.img1key" :src="form.img1key" class="id-img avatar" style="width: 100%; height: 100%" /> |
| | | <i v-else class="iconfont icon-zhaopian"></i> |
| | | </el-upload> |
| | | </div> |
| | | |
| | | <div |
| | | class="form-group flex-between" |
| | | :class="{ disabled: isSubmitting || isActive }" |
| | | > |
| | | <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" |
| | | :on-error="handleError2" |
| | | :before-upload="beforeAvatarUpload2" |
| | | :disabled="isActive" |
| | | > |
| | | <img |
| | | v-if="form.img2key" |
| | | :src="form.img2key" |
| | | class="id-img avatar" |
| | | style="width: 100%; height: 100%" |
| | | /> |
| | | <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" |
| | | :on-error="handleError2" :before-upload="beforeAvatarUpload2" :disabled="isActive"> |
| | | <img v-if="form.img2key" :src="form.img2key" class="id-img avatar" style="width: 100%; height: 100%" /> |
| | | <i v-else class="iconfont icon-zhaopian"></i> |
| | | </el-upload> |
| | | </div> |
| | | |
| | | <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div> |
| | | |
| | | <div |
| | | class="submit-button" |
| | | :class="{ disabled: isSubmitting || isActive }" |
| | | @click="toSure" |
| | | > |
| | | <span>{{ $t("hj161") }}</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> |
| | |
| | | }; |
| | | }, |
| | | 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; |
| | | }, |
| | | 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() { |
| | |
| | | toSure() { |
| | | 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")); |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | @green: #c4d600; |
| | | @green: #00f0ff; |
| | | |
| | | /deep/ .van-nav-bar__content { |
| | | height: 65px; |
| | |
| | | .disabled { |
| | | opacity: 0.5; |
| | | } |
| | | |
| | | .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> |