first

zzzz

2024-04-30 7a57bcc3208f804cde9915d361f1a738a4e88e1d

 src/page/register/identity.vue

@@ -1,281 +1,382 @@
<template>
    <!-- 申请身份认证 -->
    <div class="identity pl-30 pr-30 font-24" style="padding-bottom: 30px;">
        <div class=" header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
<!--            <div class="textColor" @click="$router.push('/finish')">{{ $t('跳过') }}</div>-->
        </div>
        <Step :step="2"></Step>
        <div class="title textColor">{{ $t('实名认证') }}</div>
        <div class=" pt-58 pb-54 box-border border-b-color" v-if="disabled() || status === 3">
            <div class="flex justify-between items-center px-30">
                <div class="font-50">{{ $t('身份认证') }}</div>
                <div class="flex items-center" v-if="resultArr[this.status]">
                    <img :src="require(`@/assets/image/assets-center/${resultArr[this.status] && resultArr[this.status].split('_')[0]}.png`)"
                        alt="success img" class="w-36 h-36" />
                    <div class="font-32 ml-18">{{ resultArr[this.status] && resultArr[this.status].split('_')[1] }}
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="mb-40">
                <div class="mt-54 mb-25 font-24 textColor">{{ $t('国籍') }}</div>
                <div class="pt-28 pb-28 pl-38 pr-38 flex justify-between items-center rounded inputBackground textColor" @click="openBtn">
                    <div class="flex items-center">
                        <!-- <div class="iti-flag mr-20" :class="countryCode" style="transform: scale(2.1)"></div> -->
                        <div>{{ countryName }}</div>
                    </div>

                    <img v-if="resultArr.length === 0" src="../../assets/image/public/down-arrow.png" class="w-33 h-20"
                        alt="arrow" />
                </div>
            </div>
            <ExInput :label="$t('真实姓名')" :placeholderText="$t('请输入真实姓名')" v-model="name" />
            <ExInput :label="$t('证件/护照号码')" :placeholderText="$t('请输入您的证件/护照号码')" v-model="idnumber" />
            <div>
                <div v-if="resultArr.length > 0" class="mb-25 textColor">{{ $t('证件照/上传护照') }}</div>
                <div v-else class="mt-109 mb-25">{{ $t('证件/护照认证图片上传') }}</div>
                <div class="flex mt-33 mb-80 justify-between">
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            <img src="@/assets/image/kyc/0.png" alt="" class="w-full"
                                v-if="[1, 2].includes(status) && frontFile.length === 0" />
                            <van-uploader v-model="frontFile" multiple :max-count="1" :disabled="disabled()"
                                :deletable="!disabled()" :after-read="afterRead"
                                @click-upload="onClickUpload('frontFile')" v-else />
                        </div>
                        <div class="mt-32 font-26 h-20 textColor">{{ $t('证件正面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            <img src="@/assets/image/kyc/1.png" alt="" class="w-full"
                                v-if="[1, 2].includes(status) && reverseFile.length === 0" />
                            <van-uploader v-model="reverseFile" multiple :max-count="1" :disabled="disabled()"
                                :deletable="!disabled()" :after-read="afterRead"
                                @click-upload="onClickUpload('reverseFile')" v-else />
                        </div>
                        <div class="mt-32 font-26 h-20 textColor">{{ $t('证件反面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">
                            <img src="@/assets/image/kyc/2.png" alt="" class="w-full"
                                v-if="[1, 2].includes(status) && fileList.length === 0" />
                            <van-uploader v-model="fileList" multiple :max-count="1" :disabled="disabled()"
                                :deletable="!disabled()" :after-read="afterRead"
                                @click-upload="onClickUpload('fileList')" v-else />
                        </div>
                        <div class="mt-32 font-26 h-20 textColor">{{ $t('手持证件照') }}</div>
                    </div>
                </div>
            </div>
            <template v-if="!disabled()">
                <div class="mb-32 textColor">{{ $t('拍摄示例') }}</div>
                <img src="../../assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;"
                    class="w-756 h-220 mb-100">
            </template>
            <button class="apply-btn text-white font-36 h-96 rounded btnMain" @click="onSubmit">{{
                $t('下一步')
                }}</button>
            <nationality-list ref='controlChild' :title="$t('请选择国家')" @getName="getName(arguments)" v-if="!disabled()">
            </nationality-list>
        </div>
  <!-- 申请身份认证 -->
  <div class="identity pl-30 pr-30 font-24" style="padding-bottom: 30px">
    <div class="header">
      <div @click="$router.go(-1)">
        <img
          src="../../assets/image/assets-center/left-arrow.png"
          alt=""
          class="w-14 h-27"
        />
      </div>
      <!--            <div class="textColor" @click="$router.push('/finish')">{{ $t('跳过') }}</div>-->
    </div>
    <Step :step="2"></Step>
    <div class="title textColor">{{ $t("实名认证") }}</div>
    <div
      class="pt-58 pb-54 box-border border-b-color"
      v-if="disabled() || status === 3"
    >
      <div class="flex justify-between items-center px-30">
        <div class="font-50">{{ $t("身份认证") }}</div>
        <div class="flex items-center" v-if="resultArr[this.status]">
          <img
            :src="
              require(`@/assets/image/assets-center/${
                resultArr[this.status] && resultArr[this.status].split('_')[0]
              }.png`)
            "
            alt="success img"
            class="w-36 h-36"
          />
          <div class="font-32 ml-18">
            {{ resultArr[this.status] && resultArr[this.status].split("_")[1] }}
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="mb-40">
        <div class="mt-54 mb-25 font-24 textColor">{{ $t("国籍") }}</div>
        <div
          class="pt-28 pb-28 pl-38 pr-38 flex justify-between items-center rounded inputBackground textColor"
          @click="openBtn"
        >
          <div class="flex items-center">
            <!-- <div class="iti-flag mr-20" :class="countryCode" style="transform: scale(2.1)"></div> -->
            <div>{{ countryName }}</div>
          </div>

          <img
            v-if="resultArr.length === 0"
            src="../../assets/image/public/down-arrow.png"
            class="w-33 h-20"
            alt="arrow"
          />
        </div>
      </div>
      <ExInput
        :label="$t('真实姓名')"
        :placeholderText="$t('请输入真实姓名')"
        v-model="name"
      />
      <ExInput
        :label="$t('证件/护照号码')"
        :placeholderText="$t('请输入您的证件/护照号码')"
        v-model="idnumber"
      />
      <div>
        <div v-if="resultArr.length > 0" class="mb-25 textColor">
          {{ $t("证件照/上传护照") }}
        </div>
        <div v-else class="mt-109 mb-25">{{ $t("证件/护照认证图片上传") }}</div>
        <div class="flex mt-33 mb-80 justify-between">
          <div
            class="flex-1 flex flex-col text-center justify-center items-center"
          >
            <div class="upload-wrap">
              <img
                src="@/assets/image/kyc/0.png"
                alt=""
                class="w-full"
                v-if="[1, 2].includes(status) && frontFile.length === 0"
              />
              <van-uploader
                v-model="frontFile"
                multiple
                :max-count="1"
                :disabled="disabled()"
                :deletable="!disabled()"
                :after-read="afterRead"
                @click-upload="onClickUpload('frontFile')"
                v-else
              />
            </div>
            <div class="mt-32 font-26 h-20 textColor">{{ $t("证件正面") }}</div>
          </div>
          <div
            class="flex-1 flex flex-col text-center justify-center items-center"
          >
            <div class="upload-wrap">
              <img
                src="@/assets/image/kyc/1.png"
                alt=""
                class="w-full"
                v-if="[1, 2].includes(status) && reverseFile.length === 0"
              />
              <van-uploader
                v-model="reverseFile"
                multiple
                :max-count="1"
                :disabled="disabled()"
                :deletable="!disabled()"
                :after-read="afterRead"
                @click-upload="onClickUpload('reverseFile')"
                v-else
              />
            </div>
            <div class="mt-32 font-26 h-20 textColor">{{ $t("证件反面") }}</div>
          </div>
          <div
            class="flex-1 flex flex-col text-center justify-center items-center"
          >
            <div class="upload-wrap">
              <img
                src="@/assets/image/kyc/2.png"
                alt=""
                class="w-full"
                v-if="[1, 2].includes(status) && fileList.length === 0"
              />
              <van-uploader
                v-model="fileList"
                multiple
                :max-count="1"
                :disabled="disabled()"
                :deletable="!disabled()"
                :after-read="afterRead"
                @click-upload="onClickUpload('fileList')"
                v-else
              />
            </div>
            <div class="mt-32 font-26 h-20 textColor">
              {{ $t("手持证件照") }}
            </div>
          </div>
        </div>
      </div>
      <template v-if="!disabled()">
        <div class="mb-32 textColor">{{ $t("拍摄示例") }}</div>
        <img
          src="../../assets/image/kyc/kyc-demo.png"
          alt=""
          style="width: 100%; height: auto"
          class="w-756 h-220 mb-100"
        />
      </template>
      <button
        class="apply-btn text-white font-36 h-96 rounded btnMain"
        @click="onSubmit"
      >
        {{ $t("下一步") }}
      </button>
      <nationality-list
        ref="controlChild"
        :title="$t('请选择国家')"
        @getName="getName(arguments)"
        v-if="!disabled()"
      >
      </nationality-list>
    </div>
  </div>
</template>

<script>
// import { ActionSheet,Search } from 'vant';
import Step from "./step.vue";
import nationalityList from '../authentication/components/nationalityList.vue'
import { Uploader } from 'vant';
import { _uploadImage, _applyIdentify, _getIdentify } from '@/API/fund.api'
import nationalityList from "../authentication/components/nationalityList.vue";
import { Uploader } from "vant";
import { _uploadImage, _applyIdentify, _getIdentify } from "@/API/fund.api";
import countries from "../authentication/components/countryList";
import ExInput from "@/components/ex-input";
import {GET_USERINFO, SET_USERINFO} from "@/store/const.store";
import {mapActions} from "vuex";
import {setStorage} from "@/utils/utis";
import { GET_USERINFO, SET_USERINFO } from "@/store/const.store";
import { mapActions } from "vuex";
import { setStorage } from "@/utils/utis";
export default {
    name: "AuthenticationPage",
    components: {
        nationalityList,
        [Uploader.name]: Uploader,
        ExInput,
        Step
    },
    data() {
        return {
            countryName: this.$t("请选择国家"), //国家名称
            countryCode: "af", //国家地区号
            idnumber: '',
            name: '',
            frontFile: [],
            reverseFile: [],
            fileList: [],
            curFile: 'frontFile',
            status: '', // 0
            imgs: [],
            resultArr: ['small-success_' + this.$t('已申请未审核'), 'identifing_' + this.$t('审核中'), 'small-success_' + this.$t('审核通过'), 'icon-close_' + this.$t('审核未通过')] // 0 好像是未提交
  name: "AuthenticationPage",
  components: {
    nationalityList,
    [Uploader.name]: Uploader,
    ExInput,
    Step,
  },
  data() {
    return {
      countryName: this.$t("请选择国家"), //国家名称
      countryCode: "af", //国家地区号
      idnumber: "",
      name: "",
      frontFile: [],
      reverseFile: [],
      fileList: [],
      curFile: "frontFile",
      status: "", // 0
      imgs: [],
      resultArr: [
        "small-success_" + this.$t("已申请未审核"),
        "identifing_" + this.$t("审核中"),
        "small-success_" + this.$t("审核通过"),
        "icon-close_" + this.$t("审核未通过"),
      ], // 0 好像是未提交
    };
  },
  created() {
    this.fetchInfo();
  },
  methods: {
    ...mapActions("user", ["GET_UERS_KYC"]),
    fetchInfo() {
      // 获取状态
      _getIdentify().then((data) => {
        this.status = data.status;
        if (data.status !== 0) {
          this.countryName =
            countries[this.$i18n.locale][data.nationality]["name"];
          this.countryCode = data.nationality;
          this.idnumber = data.idnumber;
          this.name = data.name;
          this.frontFile = data.idimg_1 ? [{ url: data.idimg_1_path }] : [];
          this.reverseFile = data.idimg_2 ? [{ url: data.idimg_2_path }] : [];
          this.fileList = data.idimg_3 ? [{ url: data.idimg_3_path }] : [];
        }
      });
    },
    created() {
        this.fetchInfo()
    onClickUpload(type) {
      this.curFile = type;
    },
    methods: {
      ...mapActions('user', [SET_USERINFO]),
        fetchInfo() {   // 获取状态
            _getIdentify().then(data => {
                this.status = data.status
                if (data.status !== 0) {
                    this.countryName = countries[this.$i18n.locale][data.nationality]['name']
                    this.countryCode = data.nationality
                    this.idnumber = data.idnumber
                    this.name = data.name
                    this.frontFile = data.idimg_1 ? [{ url: data.idimg_1_path }] : []
                    this.reverseFile = data.idimg_2 ? [{ url: data.idimg_2_path }] : []
                    this.fileList = data.idimg_3 ? [{ url: data.idimg_3_path }] : []
                }
            })
        },
        onClickUpload(type) {
            this.curFile = type
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        disabled() { // 是否禁用按钮
            return ![0, 3, ''].includes(this.status)
        },
        afterRead(file) { /// 处理文件
            file.status = 'uploading'
            file.message = this.$t('上传中...')
            _uploadImage(file).then(data => {
                file.status = 'success';
                file.message = this.$t('上传成功');
                file.resURL = data
                this[this.curFile] = [file]
            }).catch(err => {
                file.status = 'failed';
                file.message = this.$t('图片上传失败');
            })
        },
        //打开国家列表底部弹窗
        openBtn() {
            if (!this.disabled()) {
                this.$refs.controlChild.open();
            }
        },
        //获取到当前选中国家的code值
        getName(params) {
            this.countryName = params[0];
            this.countryCode = params[1];
        },
        onSubmit() {
            if (!this.countryName) {
                this.$toast(this.$t('请选择国家'))
                return
            }
            if (!this.name) {
                this.$toast(this.$t('请输入姓名'))
                return
            }
            if (!this.idnumber) {
                this.$toast(this.$t('请输入证件号码'))
                return
            }
    onClickLeft() {
      this.$router.go(-1);
    },
    disabled() {
      // 是否禁用按钮
      return ![0, 3, ""].includes(this.status);
    },
    afterRead(file) {
      /// 处理文件
      file.status = "uploading";
      file.message = this.$t("上传中...");
      _uploadImage(file)
        .then((data) => {
          file.status = "success";
          file.message = this.$t("上传成功");
          file.resURL = data;
          this[this.curFile] = [file];
        })
        .catch((err) => {
          file.status = "failed";
          file.message = this.$t("图片上传失败");
        });
    },
    //打开国家列表底部弹窗
    openBtn() {
      if (!this.disabled()) {
        this.$refs.controlChild.open();
      }
    },
    //获取到当前选中国家的code值
    getName(params) {
      this.countryName = params[0];
      this.countryCode = params[1];
    },
    onSubmit() {
      if (!this.countryName) {
        this.$toast(this.$t("请选择国家"));
        return;
      }
      if (!this.name) {
        this.$toast(this.$t("请输入姓名"));
        return;
      }
      if (!this.idnumber) {
        this.$toast(this.$t("请输入证件号码"));
        return;
      }

            if (!this.frontFile.length || !this.reverseFile.length ||!this.fileList.length) {
                this.$toast(this.$t('请上传完整证件信息'))
                return
            }
      if (!this.frontFile.length || !this.reverseFile.length) {
        this.$toast(this.$t("请上传完整证件信息"));
        return;
      }

            if (this.status!==0){
                this.$router.push('/finish');
            }else{
                _applyIdentify({
                    name: this.name,
                    idnumber: this.idnumber,
                    frontFile: this.frontFile,
                    reverseFile: this.reverseFile,
                    fileList: this.fileList,
                    countryName: this.countryCode // this.countryName 存储的 code, 回来再遍历
                }).then(() => {
                     this.$toast(this.$t('提交成功'))
                     this.$router.push('/finish');
                   this.$store.commit('user/SET_OUT')
                   setStorage('popNotice', false)
                    //this.fetchInfo()
                }).catch(err => {
                    if(err.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if (err.msg !== undefined) { this.$toast(this.$t(err.msg)); }
                    else if (err.message !== undefined) { this.$toast(this.$t(err.message)); }
                })
      if (this.status !== 0) {
        this.$router.push("/finish");
      } else {
        _applyIdentify({
          name: this.name,
          idnumber: this.idnumber,
          frontFile: this.frontFile,
          reverseFile: this.reverseFile,
          countryName: this.countryCode, // this.countryName 存储的 code, 回来再遍历
        })
          .then(() => {
            this.GET_UERS_KYC();
            this.$toast(this.$t("提交成功"));
            this.$router.push("/finish");
            this.$store.commit("user/SET_OUT");
            setStorage("popNotice", false);
            //this.fetchInfo()
          })
          .catch((err) => {
            if (err.code === "ECONNABORTED") {
              this.$toast(this.$t("网络超时！"));
            } else if (err.msg !== undefined) {
              this.$toast(this.$t(err.msg));
            } else if (err.message !== undefined) {
              this.$toast(this.$t(err.message));
            }
            
        }
    }
}
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>

.identity{
    width: 100%;
    box-sizing: border-box;
.identity {
  width: 100%;
  box-sizing: border-box;
}
.upload-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
    font-size: 35px;
  font-size: 35px;
}

input:disabled {
    background: #fff;
  background: #fff;
}

.list-view {
    overflow-y: scroll;
    border-bottom: 1px solid #e5e5e5;
  overflow-y: scroll;
  border-bottom: 1px solid #e5e5e5;
}

.kyc-input {
    width: 100%;
    border: none;
  width: 100%;
  border: none;
}

.apply-btn {
    border: none;
    outline: none;
    width: 100%;
    line-height: 96px;
  border: none;
  outline: none;
  width: 100%;
  line-height: 96px;
}

.service-text {
    text-decoration: underline;
  text-decoration: underline;
}
.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 0 26px;
  font-size: 28px;
  height: 100px;
  line-height: 100px;
}
.stepBox{
    padding: 0 30px;
.stepBox {
  padding: 0 30px;
}
.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 50px;
    margin-bottom: 60px;
  font-weight: 700;
  font-size: 52px;
  margin-top: 50px;
  margin-bottom: 60px;
}
.city{
    background: #F5F5F5;
.city {
  background: #f5f5f5;
}
</style>