• 电子--实名认证


    <template>
    <!-- 实名认证 -->
    <div class="projectBox project_list">
        <!-- 项目列表 -->
      <basic-container class="projectManange" ref="page">
        <div class="box"> 
          <div class="authed" v-if="isAuthed">
            <div class="law-logo">
              <img :src="userInfo.logo" alt="">
            </div>
            <div class="law-name">
              <div class="name">{{userInfo.title}}</div>
              <img class="icon" src="../../assets/electronic/yirenzheng.png" alt="">
            </div>
          </div>
          <div v-else>
            <iframe :src="xinUrl"
              :height="iframeH"
              width="100%"
              id="mobsf"
              scrolling="no"
              frameborder="0">
            </iframe>
          </div>
        </div>
      </basic-container>
    </div>
    </template> 
    <script>
    import * as Api from "@/api/signature/index";
    import { GetOrganizetion } from "../../views/manage/organizetion/api/organizetion";
    export default {
      data() {
        return {
          requestId: '',
          xinUrl: '',
          iframeH:0,
          userInfo:{
            title:'',
            logo:''
          },
          isAuthed:false,
        }
      },
      created() {
        this.getzutai();  
      },
      methods:{
        //实名认证请求
        getzutai() {
          Api.SealAppServeice().then(({ data }) => {
            if(data.Code === 200) {
              const resData = JSON.parse(data.Data)
              // 获取跳转url
              if(resData.code == "0") {
                let resUrl = resData.result.authUrl
                this.xinUrl = resUrl.slice(0, resUrl.indexOf(resUrl.substring(resUrl.length-4)))  + 'false'
                this.requestId = resData.result.requestId;
              }else if(resData.code == "1605"){
                // 已认证
                this.isAuthed = true;
              }else{
                this.$alert(data.ShowData, '提示', {
                  confirmButtonText: '确定',
                  type: 'error'
                });
              }
            }else {
              this.$alert(data.ShowData, '提示', {
                confirmButtonText: '确定',
                type: 'error'
              });
            }
          }).catch((error)=>{
            if(error.data.Code == 400){
              this.$alert(error.data.ShowData, '提示', {
                confirmButtonText: '确定',
                type: 'error'
              });
            }
          });
        }
      },
      mounted(){
        GetOrganizetion().then(res => {
          this.userInfo.title = res.data.Data.Name;
          this.userInfo.logo = res.data.Data.IconUrl;
        })
        this.$nextTick(()=>{
          this.iframeH = document.getElementsByClassName('avue-main')[0].offsetHeight - 84;
        })
      }
    }
    </script>

    <style lang="scss" scoped>
    .box{
      text-align: center;
      .authed{
        text-align: center;
        padding: 60px 0 22% 0;
        display: inline-block;
        .law-logo{
          margin: 0 auto;
          height: 160px;
           160px;
          // border: 1px solid red;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          img{
            max- 160px;
            max-height: 160px;
          }
        }
        .law-name{
          height: 24px;
          line-height: 24px;
          margin-top: 30px;
          .name{
            display: inline-block;
            vertical-align: top;
            font-size: 20px;
            letter-spacing: 2px;
          }
          .icon{
            display: inline-block;
            vertical-align: top;
          }
        }
      }
    }
    </style>
  • 相关阅读:
    vue(21)初识Vuex
    ESCMScript6(3)Promise对象
    vue(20)生命周期函数
    vue(19)嵌套路由
    vue(18)路由懒加载
    vue(17)vue-route路由管理的安装与配置
    vue(16)vue-cli创建项目以及项目结构解析
    vue(15)vue-cli介绍与安装
    webpack(11)配置文件分离为开发配置、生成配置和基础配置
    webpack(10)webpack-dev-server搭建本地服务器
  • 原文地址:https://www.cnblogs.com/xiaoxiao95/p/12836064.html
Copyright © 2020-2023  润新知