最新

XIGUASSR

2022-11-11 c3afe3d4e0a8663b379510c38ec543ac8dbc2e5e

最新

 src/App.vue

@@ -29,7 +29,7 @@

<script>
import elalert from "@/components/elalert.vue";
  import foot from "@/components/foot.vue";
import foot from "@/components/foot.vue";
export default {
  components: {
    foot,

 src/assets/img/close2.png

 src/assets/img/close3.png

 src/assets/img/closes.png

 src/components/loginDialog.vue

New file
@@ -0,0 +1,158 @@
<template>
  <div class="login_dialog_pag">
    <van-popup v-model="dialogVisible" position="bottom" :style="{ height: '50%' }">
      <div class="dialog_content">
        <div class="top_close">
          <div class="close" @click="dialogVisible = false">
            <img src="@/assets/img/close3.png" alt="">
          </div>
        </div>
        <div class="welcome_dialog">
          <span>{{ '欢迎回来' }}</span>
        </div>
        <div class="portrait">
          <div>
            <img src="@/assets/img/eslogo.png" alt />
          </div>
        </div>
        <div class="names">
          <span>{{ 'Mitrade' }}</span>
        </div>
        <div class="go_login_btn background" @click="goToLogin()">
          <span class="title1">{{ '使用手机号登录' }}</span>
        </div>
        <div class="go_login_btn">
          <span class="title2" @click="goToReg()">{{ '还没有账号?去注册!' }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "dialogVisible",
  data() {
    return {
      dialogVisible: false,
      routeShowPathArr: ['/home']
    };
  },
  mounted() {
    if (!this.routeShowPathArr.includes(this.$route.path)) { // 查找不弹出的path
      setTimeout(() => {
        this.dialogVisible = true;
      }, 1000);
    }
  },
  methods: {
    goToLogin() {
      this.dialogVisible = false;
      this.$router.push('/login')
    },
    goToReg() {
      this.dialogVisible = false;
      this.$router.push('/register');
    }
  }
};
</script>

<style scoped lang="less">
.login_dialog_pag {
  width: 100%;
  height: 100%;
  .dialog_content {
    width: 100%;
    height: 100%;
    padding: .4rem .8rem;
    .top_close {
      width: 100%;
      height: .7rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .close {
        width: .7rem;
        height: .7rem;
        background: rgb(158, 158, 158);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: .4rem;
          height: .4rem;
        }
      }
    }
    .welcome_dialog {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .5615rem;
      margin-top: .5rem;
      span {
        font-weight: 600;
      }
    }
    .portrait {
      width: 100%;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: .7rem;
      div {
        width: 2.8rem;
        height: 2.8rem;
        background: #ccc;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .names {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .359rem;
      margin-top: .1rem;
      span {
        font-weight: 600;
      }
    }
    .go_login_btn {
      width: 100%;
      height: 1.3rem;
      border-radius: .23rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .4015rem;
      margin-top: .5rem;
      .title1 {
        color: #fff;
        font-weight: 600;
      }
      .title2 {
        font-weight: 600;
        color: #2d6ae9;
      }
    }
    .go_login_btn.background {
      background: #2d6ae9;
    }
  }
}
.van-popup.van-popup--bottom{
  border-radius: .2rem .2rem 0 0;
}
</style>

 src/page/authentication/index.vue

@@ -1,477 +1,360 @@
<template>
  <div class="wrapper">
    <div class="header">
      <div class="left_back" @click="handleGoToBack()">
        <img src="../../assets/img/zuojiantou.png" alt="">
  <div class="bank_card_page">
    <div class="content">
      <div class="top_back">
        <div class="left_back_icon" @click="$router.go(-1)">
          <img src="../../assets/img/zuojiantou.png" alt />
        </div>
      </div>
      <div class="header_titles">
      <div class="titles">
        <span>{{ '实名认证' }}</span>
      </div>
    </div>
    <div class="boxs"></div>
    <div class="box transaction">
      <div class="box-contain clearfix">
        <div class="empty text-center">
          <!-- 您已通过实名认证 -->
          <i v-if="this.$store.state.userInfo.isActive == 1" style="color:red;font-size: 1.5rem;"
             class="iconfont icon-shenhezhong"></i>
          <i v-if="!showBtn && this.$store.state.userInfo.isActive != 1" style="color:red;font-size: 1.5rem;"
             class="iconfont icon-tongguo1"></i>
          <i v-if="showBtn" style="color:red;font-size: 1.5rem;" class="iconfont icon-icon-test"></i>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '真实姓名:' }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="form.name" />
        </div>
      </div>
    </div>
    <div class="form-block">
      <div class="auth-msg" v-if="this.$store.state.userInfo.isActive == 3">
        <p>认证失败，请重新认证</p>
        <div>
          失败原因：{{this.$store.state.userInfo.authMsg}}
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '身份证号:' }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="form.idCard" />
        </div>
      </div>
      <!-- <mt-field label="手机号" placeholder="请输入您的手机号" v-model="form.phone"></mt-field> -->
      <mt-field label="真实姓名" placeholder="请输入您的真实姓名" type="text" v-model="form.name"></mt-field>
      <mt-field label="身份证号" placeholder="请输入您的身份证号" type="text" v-model="form.idCard"></mt-field>
    </div>
    <div class="upload-box clearfix">
      <!-- <form action=""> -->
      <div class="upload-btn">
        <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">
          <img v-if="form.img1key" :src="form.img1key" class="id-img avatar">
          <i v-else class="iconfont icon-zhaopian"></i>
          <span v-if="!form.img1key && !imgStatus" class="btn-title">身份证正面</span>
          <span v-if="imgStatus" class="btn-title">正在上传中...</span>
        </el-upload>
        <!-- <i class="iconfont icon-tupian"></i> -->
        <!-- <span class="btn-title">身份证正面</span> -->
        <!-- <input class="btn-hidden" type="file" accept="image/jpeg, image/png, image/jpg" @change="handleFile"/> -->
        <!-- <img class="id-img" :src="this.form.img2Key" alt=""> -->
      </div>
      <div class="upload-btn">
        <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">
          <img v-if="form.img2key" :src="form.img2key" class="id-img avatar">
          <i v-else class="iconfont icon-zhaopian"></i>
          <span v-if="!form.img2key && !imgStatus2" class="btn-title">身份证背面</span>
          <span v-if="imgStatus2" class="btn-title">正在上传中...</span>
        </el-upload>
        <!--
            :auto-upload="false"
            身份证背面 -->
      </div>
      <!-- <div class="upload-btn">
      <div class="uploads">
        <div class="lefts">
          <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="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload3">
              <img v-if="form.img3key" :src="form.img3key" class="id-img avatar">
              <i v-else class="iconfont icon-zhaopian"></i>
              <span v-if="!form.img3key"  class="btn-title">手持身份证</span>
            :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"
          >
            <img v-if="form.img1key" :src="form.img1key" class="id-img avatar" />
            <i v-else class="iconfont icon-zhaopian"></i>
            <span v-if="!form.img1key && !imgStatus" class="btn-title">身份证正面</span>
            <span v-if="imgStatus" class="btn-title">正在上传中...</span>
          </el-upload>
      </div> -->
        </div>
        <div class="rights">
          <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"
          >
            <img v-if="form.img2key" :src="form.img2key" class="id-img avatar" />
            <i v-else class="iconfont icon-zhaopian"></i>
            <span v-if="!form.img2key && !imgStatus2" class="btn-title">身份证背面</span>
            <span v-if="imgStatus2" class="btn-title">正在上传中...</span>
          </el-upload>
        </div>
      </div>
      <div class="bank_name bind" @click="toSure" v-if="showBtn">
        <span>{{ '确定' }}</span>
      </div>
      <van-notify v-model="messFlag" type="primary">
        <div>
          <div class="eft">
            <span>{{ '认证失败，请重新认证' }}</span>
          </div>
          <div class="bft">
            <span>失败原因：{{this.$store.state.userInfo.authMsg}}</span>
          </div>
        </div>
      </van-notify>
    </div>
    <div class="rule-box">
      <div class="title">认证规则：</div>
      <ul>
        <li>1、新用户注册后必须通过实名认证审核。</li>
        <li>2、姓名和身份证号码一经认证不予修改，修改请联系客服。</li>
        <li>3、真实姓名必须和出金银行卡户名一致。</li>
      </ul>
    <div class="pass">
      <div class="top_t">
        <span v-if="this.$store.state.userInfo.isActive == 1" class="ise_pass">{{ '审核中' }}</span>
        <span v-if="!showBtn && this.$store.state.userInfo.isActive != 1">{{ '通过' }}</span>
        <span v-if="showBtn" class="ise_pass">{{ '未通过' }}</span>
      </div>
    </div>
    <div v-if="showBtn" class="btnbox">
      <span class="" @click="toSure">确定</span>
    </div>

  </div>
</template>

<script>
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'
import { isNull, idCardReg, isName } from '@/utils/utils'
import { compress } from '@/utils/imgupload'
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, idCardReg, isName } from "@/utils/utils";
import { compress } from "@/utils/imgupload";

export default {
  components: {},
  props: {},
  data () {
  name: "bankCard",
  data() {
    return {
      form: {
        phone: '',
        name: '',
        idCard: '',
        img1key: '',
        img2key: '',
        img3key: ''
        phone: "",
        name: "",
        idCard: "",
        img1key: "",
        img2key: "",
        img3key: ""
      },
      img1Key: '',
      img2Key: '',
      img3Key: '',
      img1Key: "",
      img2Key: "",
      img3Key: "",
      showBtn: true,
      admin: '',
      admin: "",
      imgStatus: false,
      imgStatus2: false
    }
      imgStatus2: false,
      messFlag: this.$store.state.userInfo.isActive == 3 ? true : false
    };
  },
  watch: {},
  computed: {},
  created () {
    if (this.$store.state.userInfo.isActive === 1 || this.$store.state.userInfo.isActive === 2) {
      this.form.idCard = this.$store.state.userInfo.idCard
      this.form.name = this.$store.state.userInfo.realName
      this.form.img1key = this.$store.state.userInfo.img1Key
      this.form.img2key = this.$store.state.userInfo.img2Key
  created() {
    if (
      this.$store.state.userInfo.isActive === 1 ||
      this.$store.state.userInfo.isActive === 2
    ) {
      this.form.idCard = this.$store.state.userInfo.idCard;
      this.form.name = this.$store.state.userInfo.realName;
      this.form.img1key = this.$store.state.userInfo.img1Key;
      this.form.img2key = this.$store.state.userInfo.img2Key;
      //   this.form.img3key = this.$store.state.userInfo.img3Key
      this.showBtn = false
      this.showBtn = false;
    }
  },
  beforeDestroy () {
    if (this.$state.theme =='red') {
      document.body.classList.remove('red-bg')
        document.body.classList.add('black-bg')
  beforeDestroy() {
    if (this.$state.theme == "red") {
      document.body.classList.remove("red-bg");
      document.body.classList.add("black-bg");
    }
  },
  mounted () {
    if (this.$state.theme =='red') {
        document.body.classList.remove('black-bg')
        document.body.classList.add('red-bg')
  mounted() {
    if (this.$state.theme == "red") {
      document.body.classList.remove("black-bg");
      document.body.classList.add("red-bg");
    }
    this.admin = process.env.API_HOST
    this.admin = process.env.API_HOST;
    if (this.admin === undefined) {
      this.admin = ''
      this.admin = "";
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imgStatus = false
      this.form.img1key = res.data.url
    handleAvatarSuccess(res, file) {
      this.imgStatus = false;
      this.form.img1key = res.data.url;
    },
    handleGoToBack() {
      this.$router.go(-1);
    beforeAvatarUpload(file) {
      this.imgStatus = true;
    },
    beforeAvatarUpload (file) {
      this.imgStatus = true
      //     const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
      //     const isLt2M = file.size / 1024 / 1024 < 20;
      //     if (!isJPG) {
      //         Toast('请选择jpg或者png的图片格式!');
      //     }
      // // if (!isLt2M) {
      // //     Toast('上传头像图片大小不能超过 2MB!');
      // // }
      //     return isJPG && isLt2M;
    handleError() {
      this.imgStatus = false;
    },
    handleError () {
      this.imgStatus = false
    handleAvatarSuccess2(res, file) {
      this.imgStatus2 = false;
      this.form.img2key = res.data.url; // URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess2 (res, file) {
      this.imgStatus2 = false
      this.form.img2key = res.data.url // URL.createObjectURL(file.raw);
    },
    // 自动义图片上传 uploadFileFun2
    // async uploadFileFun2 (params) {
    //   console.log('uploadFile', params)
    //   const _that = this
    //   const isLt10M = file.size / 1024 / 1024 < 10
    //   if (!isLt10M) {
    //     this.$message.error('上传图片大小不能超过 10M!')
    //     return false
    //   } else {
    //     this.form.img2key = URL.createObjectURL(file.raw)
    //     compress(file.raw, function (val) {
    //       _that.form.img2key = val
    //     })
    //   }
    //   // 通过 FormData 对象上传文件
    //   const _file = params.file
    //   var formData = new FormData()
    //   formData.append('upload_file', _file)
    //   let data = await api.uploadimg(formData)
    //   if (data.status === 0) {
    //     this.form.img2key = data.data
    //   } else {
    //     Toast(data.msg)
    //   }
    // },
    beforeAvatarUpload2 (file) {
      this.imgStatus2 = true
    beforeAvatarUpload2(file) {
      this.imgStatus2 = true;
      // const _that = this
      const isLt10M = file.size / 1024 / 1024 < 10
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10M!')
        return false
        this.$message.error("上传图片大小不能超过 10M!");
        return false;
      } else {
        this.form.img2key = URL.createObjectURL(file)
        compress(file, function (val) {
          // _that.theForm.picUrl = val
          // _that.imgFile = val
          // _that.showDelete = true
          // _that.$refs['addBuildingForm'].validateField('picUrl')
        })
        this.form.img2key = URL.createObjectURL(file);
        compress(file, function(val) {});
      }
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 20;

      // return isJPG && isLt2M;
    },
    handleError2 () {
      this.imgStatus2 = false
    handleError2() {
      this.imgStatus2 = false;
    },
    handleAvatarSuccess3 (res, file) {
      this.form.img3key = res.data.url // URL.createObjectURL(file.raw);
    handleAvatarSuccess3(res, file) {
      this.form.img3key = res.data.url; // URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload3 (file) {
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 20;
      // if (!isJPG) {
      //     Toast('请选择jpg或者png的图片格式!');
      // }
      // return isJPG && isLt2M;
    },
    beforeAvatarUpload3(file) {},
    // 上传
    handleFile: function (e) {
    handleFile: function(e) {
      // var that = this
      let $target = e.target || e.srcElement
      let file = $target.files[0]
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      // if(file.size > 1024 * 1024 *20){
      console.log(file, 'file')
      let i = false
      console.log(file, "file");
      let i = false;
      if (i) {
        Toast('您上传的照片过大，请选择20M以下的图片')
        Toast("您上传的照片过大，请选择20M以下的图片");
      } else {
        // Indicator.open('Loading...')
        this.img1Key = file
        this.img1Key = file;
        // this.$refs.formDate.submit()
        // this.uploadIdImg({upload_file:file})
        var reader = new FileReader()
        reader.onload = (data) => {
          let res = data.target || data.srcElement
          this.form.img1Key = res.result
        var reader = new FileReader();
        reader.onload = data => {
          let res = data.target || data.srcElement;
          this.form.img1Key = res.result;
          // Indicator.close()
        }
        };
        // reader.onloadend = () => {
        //   Indicator.close()
        // }
        reader.readAsDataURL(file)
        reader.readAsDataURL(file);
      }
    },
    // async uploadIdImg(){
    //      let imgformData = new FormData()

    //         imgformData.append('upload_file', this.img1Key)
    //     let data = await api.uploadFile({upload_file:this.img1Key})
    //     if(data.status == 0){
    //         Toast('认证成功!')
    //     }else{
    //         Toast(data.msg)
    //     }
    // },
    toSure () {
    toSure() {
      // 实名认证弹框
      if (isNull(this.form.name) || !isName(this.form.name)) {
        Toast('请输入您的真实姓���')
        Toast("请输入您的真实姓���");
      } else if (isNull(this.form.idCard) || !idCardReg(this.form.idCard)) {
        Toast('请输入您的正确的身份证号码')
        Toast("请输入您的正确的身份证号码");
      } else if (isNull(this.form.img1key) || isNull(this.form.img2key)) {
        Toast('请上传您的身份证照片')
        Toast("请上传您的身份证照片");
      } else {
        // 显示确认弹窗
        this.toAuthentication()
        this.toAuthentication();
      }
    },
    async toAuthentication () {
    async toAuthentication() {
      let opts = {
        realName: this.form.name,
        idCard: this.form.idCard,
        img1key: this.form.img1key,
        img2key: this.form.img2key,
        img3key: this.form.img3key
      }
      let data = await api.userAuth(opts)
      };
      let data = await api.userAuth(opts);
      if (data.status === 0) {
        Toast('提交成功!')
        this.goBack()
        Toast("提交成功!");
        this.goBack();
      } else {
        Toast(data.msg)
        Toast(data.msg);
      }
    },
    goBack () {
      this.$router.back(-1)
    goBack() {
      this.$router.back(-1);
    }
  }
}
};
</script>
<style lang="less" scoped>
  .transaction {
    color: rgba(100, 100, 100, 0.78);

    .empty {
      width: 100%;
      // height: 1.34rem;
      font-size: 0.43rem;
      color: #888888;
      text-align: center;
      line-height: 2rem;
      // background: url('../../assets/img/thingsOk.png') no-repeat center center;
      background-size: 70%;
    }
  }

  .rule-box {
    padding: 0.2rem 0.3rem;

    .title {
      font-size: 0.3rem;
      height: 0.5rem;
      line-height: 0.5rem;
      margin-bottom: 0.2rem;
    }

    ul {
      li {
        color: #999;
        line-height: 0.5rem;
      }
    }
  }

  .upload-box {
    padding: 0.5rem;

    .upload-btn {
      // border: 1px solid #ddd;
      border-radius: 4px;
      width: 40%;
      height: 1.6rem;
      margin-bottom: 10px;
      float: left;
      margin: 0.2rem 5%;
      text-align: center;
      position: relative;

      .btn-hidden {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        opacity: 0;
      }

      .id-img {
        max-width: 100%;
        max-height: 100%;
      }

      /deep/ .el-upload--picture-card {
        background: none;
        width: 100%;
        height: 1.6rem;
        line-height: 1.6rem;
      }

      .btn-title {
        position: absolute;
        top: 23px;
        left: 0;
        width: 100%;
      }

      /deep/ .el-upload__input {
        display: none;
      }

    }

  }

  .auth-msg {
    padding: 0.2rem 0.6rem;
    line-height: 0.4rem;

    p {
      color: red;
    }

    div {
      color: #ddd;
    }
  }
  .header {
<style scoped lang="less">
.bank_card_page {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  .content {
    width: 100%;
    height: 1.5rem;
    background: #fff;
    position: fixed;
    z-index: 999;
    border-radius: 0 0 .15rem .15rem;
    .left_back {
      width: 1rem;
      height: 100%;
      left: 0;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
    height: 100%;
    padding: 0 0.6rem;
    .top_back {
      width: 100%;
      height: 2rem;
      > div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }
      img {
        width: .6rem;
        height: .6rem;
        width: 0.6rem;
        height: 0.6rem;
      }
    }
    .header_titles {
    .titles {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: .4615rem;
      line-height: 1.5rem;
      height: 1.5rem;
      font-size: 0.641rem;
      margin-top: 1rem;
      span {
        font-weight: 600;
      }
    }
  }
  .boxs {
  .bank_name {
    width: 100%;
    height: 1.7rem;
  }
  .btnbox {
    width: 100%;
    height: 1rem;
    padding: 0 .3rem;
    font-size: .4615rem;
    color: #fff;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      display: inline-block;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      background: #2d6ae9;
      text-align: center;
      font-weight: 600;
      border-radius: .12rem;
    padding: 0 0.2rem;
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;
    .lefts {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.3846rem;
      span {
        font-weight: 600;
      }
    }
    .rights {
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      input {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
}
.bank_name.bind {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d6ae9;
  font-size: 0.4103rem;
  color: #fff;
  span {
    font-weight: 600;
  }
}
.uploads {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
  > div {
    width: 48%;
    background: rgb(247, 247, 247);
  }
}
/deep/ .el-upload--picture-card {
  background: none;
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
}
/deep/ .el-upload__input {
  display: none;
}
.pass {
  width: 70%;
  height: 4rem;
  position: absolute;
  top: 3.5rem;
  right: .2rem;
  opacity: 0.2;
  .top_t {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: flex-end;
    font-size: 3.2821rem;
    color: #99b8f5;
    align-items: flex-end;
  }
  .ise_pass {
    font-size: 2.2rem;
  }
}
</style>

 src/page/newUser/index.vue

@@ -191,6 +191,7 @@
        </div>
      </div>
    </van-popup>
    <loginPopup />
  </div>
</template>

@@ -198,6 +199,7 @@
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
import loginPopup from "@/components/loginDialog.vue";

export default {
  name: "newUser",
@@ -209,8 +211,11 @@
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", //确认新密码
      userInfo: {}
      userInfo: {},
    };
  },
  components: {
    loginPopup,
  },
  created() {
    this.getUserInfo();
@@ -218,6 +223,7 @@
  methods: {
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;
      this.dialogVisible = true;
    },
    async getUserInfo() {
      // 获取用户信息

 src/page/user/authentication.vue

@@ -12,10 +12,13 @@
      <div class="box-contain clearfix">
        <div class="empty text-center">
          <!-- 您已通过实名认证 -->
          <!-- 审核中 -->
          <i v-show="this.$store.state.userInfo.isActive == 1" style="color:red;font-size: 1.5rem;"
             class="iconfont icon-shenhezhong"></i>
             <!-- 通过 -->
          <i v-show="!showBtn && this.$store.state.userInfo.isActive != 1" style="color:red;font-size: 1.5rem;"
             class="iconfont icon-tongguo1"></i>
             <!-- 未通过 -->
          <i v-show="showBtn" style="color:red;font-size: 1.5rem;" class="iconfont icon-icon-test"></i>
        </div>
      </div>
@@ -49,10 +52,7 @@
          <span v-if="!form.img1key && !imgStatus" class="btn-title">身份证正面</span>
          <span v-if="imgStatus" class="btn-title">正在上传中...</span>
        </el-upload>
        <!-- <i class="iconfont icon-tupian"></i> -->
        <!-- <span class="btn-title">身份证正面</span> -->
        <!-- <input class="btn-hidden" type="file" accept="image/jpeg, image/png, image/jpg" @change="handleFile"/> -->
        <!-- <img class="id-img" :src="this.form.img2Key" alt=""> -->

      </div>
      <div class="upload-btn">
        <el-upload
@@ -70,25 +70,9 @@
          <span v-if="!form.img2key && !imgStatus2" class="btn-title">身份证背面</span>
          <span v-if="imgStatus2" class="btn-title">正在上传中...</span>
        </el-upload>
        <!--
            :auto-upload="false"
            身份证背面 -->

      </div>
      <!-- <div class="upload-btn">
          <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="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload3">
              <img v-if="form.img3key" :src="form.img3key" class="id-img avatar">
              <i v-else class="iconfont icon-zhaopian"></i>
              <span v-if="!form.img3key"  class="btn-title">手持身份证</span>
          </el-upload>
      </div> -->

    </div>
    <div class="rule-box">
      <div class="title">认证规则：</div>
@@ -161,161 +145,7 @@
      this.admin = ''
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imgStatus = false
      this.form.img1key = res.data.url
    },
    beforeAvatarUpload (file) {
      this.imgStatus = true
      //     const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
      //     const isLt2M = file.size / 1024 / 1024 < 20;
      //     if (!isJPG) {
      //         Toast('请选择jpg或者png的图片格式!');
      //     }
      // // if (!isLt2M) {
      // //     Toast('上传头像图片大小不能超过 2MB!');
      // // }
      //     return isJPG && isLt2M;
    },
    handleError () {
      this.imgStatus = false
    },
    handleAvatarSuccess2 (res, file) {
      this.imgStatus2 = false
      this.form.img2key = res.data.url // URL.createObjectURL(file.raw);
    },
    // 自动义图片上传 uploadFileFun2
    // async uploadFileFun2 (params) {
    //   console.log('uploadFile', params)
    //   const _that = this
    //   const isLt10M = file.size / 1024 / 1024 < 10
    //   if (!isLt10M) {
    //     this.$message.error('上传图片大小不能超过 10M!')
    //     return false
    //   } else {
    //     this.form.img2key = URL.createObjectURL(file.raw)
    //     compress(file.raw, function (val) {
    //       _that.form.img2key = val
    //     })
    //   }
    //   // 通过 FormData 对象上传文件
    //   const _file = params.file
    //   var formData = new FormData()
    //   formData.append('upload_file', _file)
    //   let data = await api.uploadimg(formData)
    //   if (data.status === 0) {
    //     this.form.img2key = data.data
    //   } else {
    //     Toast(data.msg)
    //   }
    // },
    beforeAvatarUpload2 (file) {
      this.imgStatus2 = true
      // const _that = this
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10M!')
        return false
      } else {
        this.form.img2key = URL.createObjectURL(file)
        compress(file, function (val) {
          // _that.theForm.picUrl = val
          // _that.imgFile = val
          // _that.showDelete = true
          // _that.$refs['addBuildingForm'].validateField('picUrl')
        })
      }
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 20;

      // return isJPG && isLt2M;
    },
    handleError2 () {
      this.imgStatus2 = false
    },
    handleAvatarSuccess3 (res, file) {
      this.form.img3key = res.data.url // URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload3 (file) {
      // const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpeg' || file.type === 'image/png';
      // const isLt2M = file.size / 1024 / 1024 < 20;
      // if (!isJPG) {
      //     Toast('请选择jpg或者png的图片格式!');
      // }
      // return isJPG && isLt2M;
    },
    // 上传
    handleFile: function (e) {
      // var that = this
      let $target = e.target || e.srcElement
      let file = $target.files[0]
      // if(file.size > 1024 * 1024 *20){
      console.log(file, 'file')
      let i = false
      if (i) {
        Toast('您上传的照片过大，请选择20M以下的图片')
      } else {
        // Indicator.open('Loading...')
        this.img1Key = file
        // this.$refs.formDate.submit()
        // this.uploadIdImg({upload_file:file})
        var reader = new FileReader()
        reader.onload = (data) => {
          let res = data.target || data.srcElement
          this.form.img1Key = res.result
          // Indicator.close()
        }
        // reader.onloadend = () => {
        //   Indicator.close()
        // }
        reader.readAsDataURL(file)
      }
    },
    // async uploadIdImg(){
    //      let imgformData = new FormData()

    //         imgformData.append('upload_file', this.img1Key)
    //     let data = await api.uploadFile({upload_file:this.img1Key})
    //     if(data.status == 0){
    //         Toast('认证成功!')
    //     }else{
    //         Toast(data.msg)
    //     }
    // },
    toSure () {
      // 实名认证弹框
      if (isNull(this.form.name) || !isName(this.form.name)) {
        Toast('请输入您的真实姓���')
      } else if (isNull(this.form.idCard) || !idCardReg(this.form.idCard)) {
        Toast('请输入您的正确的身份证号码')
      } else if (isNull(this.form.img1key) || isNull(this.form.img2key)) {
        Toast('请上传您的身份证照片')
      } else {
        // 显示确认弹窗
        this.toAuthentication()
      }
    },
    async toAuthentication () {
      let opts = {
        realName: this.form.name,
        idCard: this.form.idCard,
        img1key: this.form.img1key,
        img2key: this.form.img2key,
        img3key: this.form.img3key
      }
      let data = await api.userAuth(opts)
      if (data.status === 0) {
        Toast('提交成功!')
        this.goBack()
      } else {
        Toast(data.msg)
      }
    },
    goBack () {
      this.$router.back(-1)
    }
  }
  
}
</script>
<style lang="less" scoped>