| | |
| | | <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.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.name" |
| | | 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> |
| | | <input type="text" v-model="form.idCard" class="form-input" :disabled="isActive" /> |
| | | <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" /> |
| | | <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" |
| | | :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 }"> |
| | | <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" |
| | | :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("uv1") }}</span> |
| | | <div |
| | | class="submit-button" |
| | | :class="{ disabled: isSubmitting || isActive }" |
| | | @click="toSure" |
| | | > |
| | | <span>{{ $t("hj161") }}</span> |
| | | </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: "", |
| | | idCard: "", |
| | | realType: "1", |
| | | vaildNumber: "", |
| | | img1key: "", |
| | | img2key: "", |
| | | img2key: "" |
| | | }, |
| | | imgStatus: false, |
| | | admin: apiUrl.baseURL, |
| | | } |
| | | admin: apiUrl.baseURL |
| | | }; |
| | | }, |
| | | computed: { |
| | | //注册默认0 1.提交未实名 2.已实名 3.驳回, 状态1||2的时候屏蔽所有的输入 |
| | | isActive() { |
| | | return this.$store.state.userInfo.isActive == 1 || this.$store.state.userInfo.isActive == 2; |
| | | return ( |
| | | this.$store.state.userInfo.isActive == 1 || |
| | | this.$store.state.userInfo.isActive == 2 |
| | | ); |
| | | // return false; |
| | | } |
| | | }, |
| | |
| | | // 如果用户已经提交过认证信息,可以显示认证状态 |
| | | }, |
| | | methods: { |
| | | |
| | | toSure() { |
| | | if (this.isSubmitting || this.isActive) return // 防止重复提交 |
| | | if (this.isSubmitting || this.isActive) return; // 防止重复提交 |
| | | // 实名认证弹框 |
| | | if (isNull(this.form.name)) { |
| | | Toast(this.$t("hj207")); |
| | |
| | | } |
| | | }, |
| | | 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.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; |
| | |
| | | return false; |
| | | } else { |
| | | this.form.img2key = URL.createObjectURL(file); |
| | | compress(file, function (val) { }); |
| | | compress(file, function(val) {}); |
| | | } |
| | | }, |
| | | handleError2() { |
| | | this.imgStatus2 = false; |
| | | }, |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | |
| | | } |
| | | |
| | | .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> |
| | | </style> |