123

dcc

2024-06-29 68a34d95db63a264e7a577051d586ea496c63ca0

 src/page/resetVerify/index.vue

@@ -1,242 +1,282 @@
<template>
    <div class="resetVerify">
        <assets-head :title="title" />
        <div class="content">
            <div>
                <div class="mb-25 textColor">{{ $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">

                            <van-uploader v-model="frontFile" multiple :max-count="1" :after-read="afterRead"
                                @click-upload="onClickUpload('frontFile')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('证件正面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">

                            <van-uploader v-model="reverseFile" multiple :max-count="1" :after-read="afterRead"
                                @click-upload="onClickUpload('reverseFile')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('证件反面') }}</div>
                    </div>
                    <div class="flex-1 flex flex-col text-center justify-center items-center">
  <div class="resetVerify">
    <assets-head :title="title" />
    <div class="content">
      <div>
        <div class="mb-25 textColor">{{ $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">
              <van-uploader
                v-model="frontFile"
                multiple
                :max-count="1"
                :after-read="afterRead"
                @click-upload="onClickUpload('frontFile')"
              />
            </div>
            <div class="mt-32 font-26 h-20 text-grey">{{ $t("证件正面") }}</div>
          </div>
          <div
            class="flex-1 flex flex-col text-center justify-center items-center"
          >
            <div class="upload-wrap">
              <van-uploader
                v-model="reverseFile"
                multiple
                :max-count="1"
                :after-read="afterRead"
                @click-upload="onClickUpload('reverseFile')"
              />
            </div>
            <div class="mt-32 font-26 h-20 text-grey">{{ $t("证件反面") }}</div>
          </div>
          <!-- <div class="flex-1 flex flex-col text-center justify-center items-center">
                        <div class="upload-wrap">

                            <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead"
                                @click-upload="onClickUpload('fileList')" />
                        </div>
                        <div class="mt-32 font-26 h-20 text-grey">{{ $t('手持证件照') }}</div>
                    </div>
                </div>
            </div>
            <ExChecked class="mb-42" :list="list" @checked="onChecked"></ExChecked>
            <div v-if="type == 0">
                <ExInput :label="$t('资金密码')" :placeholderText="$t('请输入您的资金密码')" v-model="password" :tips="$t('请输入6位数字')"
                    typeText="password" />
                <ExInput :label="$t('确认资金密码')" :placeholderText="$t('请输入您的资金密码')" v-model="repassword" :tips="$t('请输入6位数字')"
                    typeText="password" />
            </div>
            <ExInput :label="$t('留言')" :placeholderText="$t('请输入留言')" v-model="remark" />
            <div class="btn" @click="submit">{{ $t('确定') }}</div>
                    </div> -->
        </div>
      </div>
      <ExChecked class="mb-42" :list="list" @checked="onChecked"></ExChecked>
      <div v-if="type == 0">
        <ExInput
          :label="$t('资金密码')"
          :placeholderText="$t('请输入您的资金密码')"
          v-model="password"
          :tips="$t('请输入6位数字')"
          typeText="password"
        />
        <ExInput
          :label="$t('确认资金密码')"
          :placeholderText="$t('请输入您的资金密码')"
          v-model="repassword"
          :tips="$t('请输入6位数字')"
          typeText="password"
        />
      </div>
      <ExInput
        :label="$t('留言')"
        :placeholderText="$t('请输入留言')"
        v-model="remark"
      />
      <div class="btn" @click="submit">{{ $t("确定") }}</div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ExChecked from "@/components/ex-checked";
import { _uploadImage, _applyIdentify, _getIdentify } from '@/API/fund.api'
import { Uploader } from 'vant';
import { _uploadImage, _applyIdentify, _getIdentify } from "@/API/fund.api";
import { Uploader } from "vant";
import Axios from "@/API/userCenter.js";
export default {
    props: {

  props: {},
  components: {
    [Uploader.name]: Uploader,
    assetsHead,
    ExInput,
    ExChecked,
  },
  data() {
    return {
      title: "",
      remark: "",
      password: "",
      repassword: "",
      type: 0,
      radio: 0,
      list: [
        {
          name: this.$t("重置资金密码"),
          type: 0,
        },
        // {
        //     name: this.$t('重置手机号'),
        //     type: 1
        // },
        {
          name: this.$t("重置邮箱"),
          type: 2,
        },
        {
          name: this.$t("重置谷歌验证"),
          type: 3,
        },
      ],
      frontFile: [],
      reverseFile: [],
      fileList: [],
      idcard_path_front: "",
      idcard_path_back: "",
      idcard_path_hold: "",
      curFile: "frontFile",
      status: "", // 0
    };
  },
  mounted() {
    let type = this.$route.query.type;
    this.type = type;
    this.init(this.type);
    this.getSafewordApply();
  },
  methods: {
    init(type) {
      if (type == 1) {
        this.title = this.$t("人工重置手机号");
      } else if (type == 2) {
        this.title = this.$t("人工重置邮箱");
      } else if (type == 3) {
        this.title = this.$t("人工重置谷歌验证");
      } else {
        this.title = this.$t("人工重置资金密码");
      }
    },
    components: {
        [Uploader.name]: Uploader,
        assetsHead,
        ExInput,
        ExChecked
    onChecked(index) {
      this.type = index;
      this.init(this.type);
    },
    data() {
        return {
            title: '',
            remark: '',
            password: '',
            repassword: '',
            type: 0,
            radio: 0,
            list: [
                {
                    name: this.$t('重置资金密码'),
                    type: 0
                },
                // {
                //     name: this.$t('重置手机号'),
                //     type: 1
                // },
                {
                    name: this.$t('重置邮箱'),
                    type: 2
                },
                {
                    name: this.$t('重置谷歌验证'),
                    type: 3
                },
            ],
            frontFile: [],
            reverseFile: [],
            fileList: [],
            idcard_path_front: '',
            idcard_path_back: '',
            idcard_path_hold: '',
            curFile: 'frontFile',
            status: '', // 0
        }
    afterRead(file) {
      /// 处理文件
      console.log(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("图片上传失败");
        });
    },
    mounted() {
        let type = this.$route.query.type;
        this.type = type;
        this.init(this.type);
        this.getSafewordApply();
    onClickUpload(type) {
      console.log(type);
      this.curFile = type;
    },
    methods: {
        init(type) {
            if (type == 1) {
                this.title = this.$t("人工重置手机号");
            } else if (type == 2) {
                this.title = this.$t("人工重置邮箱");
            } else if (type == 3) {
                this.title = this.$t("人工重置谷歌验证");
            } else {
                this.title = this.$t("人工重置资金密码");
            }
        },
        onChecked(index) {
            this.type = index;
            this.init(this.type)
        },
        afterRead(file) { /// 处理文件
            console.log(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('图片上传失败');
            })
        },
        onClickUpload(type) {
            console.log(type);
            this.curFile = type
        },
        getSafewordApply() {
            Axios.getSafewordApply({
            }).then((res) => {
                if (res.data.length != 0) {
                    this.status = res.data[0].status;
                    this.idcard_path_front = res.data[0].idcard_path_front
                    this.idcard_path_back = res.data[0].idcard_path_back
                    this.idcard_path_hold = res.data[0].idcard_path_hold
                }
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        setSafewordApply() {
            let operate;
            if (this.type == 0) {
                operate = 0
            } else if (this.type == 1) {
                operate = 2
            } else if (this.type == 2) {
                operate = 3
            } else if (this.type == 3) {
                operate = 1
            }
            Axios.setSafewordApply({
                idcard_path_front: this.frontFile.length && this.frontFile[0].resURL || '',
                idcard_path_back: this.reverseFile.length && this.reverseFile[0].resURL || '',
                idcard_path_hold: this.fileList.length && this.fileList[0].resURL || '',
                operate: operate, //0 修改资金 1取消谷歌绑定 ，2取消手机绑定 3取消邮箱绑定
                safeword: this.password,
                safeword_confirm: this.repassword,
                remark: this.remark
            }).then((res) => {
                this.$router.push({ name: 'resetSuccess', query: { type: this.type } })
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        submit() {
            this.setSafewordApply();

        }
    }
}
    getSafewordApply() {
      Axios.getSafewordApply({})
        .then((res) => {
          if (res.data.length != 0) {
            this.status = res.data[0].status;
            this.idcard_path_front = res.data[0].idcard_path_front;
            this.idcard_path_back = res.data[0].idcard_path_back;
            this.idcard_path_hold = res.data[0].idcard_path_hold;
          }
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    setSafewordApply() {
      let operate;
      if (this.type == 0) {
        operate = 0;
      } else if (this.type == 1) {
        operate = 2;
      } else if (this.type == 2) {
        operate = 3;
      } else if (this.type == 3) {
        operate = 1;
      }
      Axios.setSafewordApply({
        idcard_path_front:
          (this.frontFile.length && this.frontFile[0].resURL) || "",
        idcard_path_back:
          (this.reverseFile.length && this.reverseFile[0].resURL) || "",
        idcard_path_hold:
          (this.fileList.length && this.fileList[0].resURL) || "",
        operate: operate, //0 修改资金 1取消谷歌绑定 ，2取消手机绑定 3取消邮箱绑定
        safeword: this.password,
        safeword_confirm: this.repassword,
        remark: this.remark,
      })
        .then((res) => {
          this.$router.push({
            name: "resetSuccess",
            query: { type: this.type },
          });
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    submit() {
      this.setSafewordApply();
    },
  },
};
</script>

<style lang="scss" scoped>
.resetVerify {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;
}


.content {
    font-size: 26px;
    padding: 32px;
  font-size: 26px;
  padding: 32px;

    @include themify() {
        border-top: themed("line_color");
    }
  @include themify() {
    border-top: themed("line_color");
  }
}

.btn {
    @include themify() {
        background: themed("btn_main");
    }
  @include themify() {
    background: themed("btn_main");
  }

    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  border-radius: 10px;
}

.upload-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

    img {
        height: 100%;
    }
  img {
    height: 100%;
  }
}

.opacity0 {
    opacity: 0;
  opacity: 0;
}

.opacity1 {
    opacity: 1;
  opacity: 1;
}

.imgShow {
    top: 0;
    position: absolute;
  top: 0;
  position: absolute;
}
</style>