dev/dcp-web-gate/src_old/views/electionBallot/ElectionBallot.vue

<template>
    <div class="electionBallot">
        <div v-if="OFF!='true'">
<!--        理事选票banner-->
        <div class="Banner">
            <img :src="bannerUrls" alt="" style="width: 100%;">
        </div>
<!--        直播界面-->
        <!-- <div class="liveBox" v-if="vote == 1 && isShowLive == true">
            <div class="close" @click="closeLive">x</div>
            <iframe :src="link" frameborder="0" style="height: 100%;width: 100%"></iframe>
        </div> -->

        <div class="electionTime">
            <div style="width: 1200px;margin: auto">
                <!--投票类别选择-->
                <div class="voteTab">
                    <span class="backHome" @click="toView('home')" v-if="GoHome">
                        {{$t('common.BackToHome')}}
                    </span>
                    <!-- <div class="voteTabBtn" :class="vote==0?'isActive':''" @click="changeState(0)">{{$i18n.locale == 'zh'?'财务报告':'financial statement'}}</div>
                    <span> | </span>
                    <div class="voteTabBtn" :class="vote==1?'isActive':''" @click="changeState(1)">{{$i18n.locale == 'zh'?'选举办法':'Election method'}}</div>
                    <span> | </span>
                    <div class="voteTabBtn" :class="vote==2?'isActive':''" @click="changeState(2)">{{$i18n.locale == 'zh'?'工作办法':'Work method'}}</div>
                    <span> | </span>
                    <div class="voteTabBtn" :class="vote==3?'isActive':''" @click="changeState(3)">{{$i18n.locale == 'zh'?'主席候选':'Chairman'}}</div>
                    <span> | </span>
                    <div class="voteTabBtn" :class="vote==4?'isActive':''" @click="changeState(4)">{{$i18n.locale == 'zh'?'理事单位':'Director unit'}}</div> -->
                    <!--直播地址-->
                    <!-- <span class="linkAddress" @click="showLive" v-if="vote==1 && showLink == true">
                        {{$t('common.Liveing')}}
                    </span> -->
                    <div style="clear: both"></div>
                </div>
            </div>
            <!--投票内容-->
            <!-- 旧 -->
            <!-- <DirectorVote :vote="vote" v-if="vote==0"></DirectorVote> -->
            <!-- <MatterVote :vote="vote" v-if="vote==1" :showLink="showLink"></MatterVote> -->
            <!-- 新 -->
            <FinancialStatement v-if="vote==0" :vote="vote" @pushFlag="getMsgFormSon" @getVotepage="receiveVotepage"></FinancialStatement>
            <ElectionMethod v-if="vote==1" @pushFlag="getMsgFormSon" @getVotepage="receiveVotepage"></ElectionMethod>
            <WorkMethod v-if="vote==2" @pushFlag="getMsgFormSon" @getVotepage="receiveVotepage"></WorkMethod>
            <Chairman v-if="vote==3" @pushFlag="getMsgFormSon" @getVotepage="receiveVotepage"></Chairman>
            <DirectorUnit v-if="vote==4" @pushFlag="getMsgFormSon"></DirectorUnit>
            <!-- <div class="pageButton">
                <el-button type="primary" @click="lastpage" v-if="vote!=0">{{$i18n.locale=='zh'?'上一页':'Previous'}}</el-button>
                <el-button type="primary" @click="nextpage" v-if="vote!=4 && nextpageFlag">{{$i18n.locale=='zh'?'下一页':'Next'}}</el-button>
            </div> -->
            <footers></footers>
        </div>
        <!-- 投票结束后的弹出框 -->
        <el-dialog
          :show-close="false"
          :visible.sync="OverFlag"
          width="600px">
          <div class="category-body submit-success">
            <p style="font-size: 24px; color: #666; margin-bottom: 20px;text-align:center">{{$i18n.locale=='en'? 'The vote was successful. Thank you for your participation!': '投票成功,感谢参与'}}</p>
            <p style="text-align:center">
              <el-button style="background: #2c558a; color: #fff" @click="toView('home')">{{$i18n.locale=='en'? 'Back Home': '返回首页'}}</el-button>
              <el-button @click="Iknow">{{$i18n.locale=='en'? 'Confirm': '确定'}}</el-button>
            </p>
          </div>
        </el-dialog>
        </div>

        <!-- 都投完票,再次进入后看到的页面 -->
        <div v-if="OFF=='true'" class="Voteover">
            <div class="Banner">
                <img :src="bannerUrls" alt="" style="width: 100%;">
            </div>
            <div class="VoteoverText">{{$i18n.locale=='en'? 'You have to vote.': '您已投票'}}</div>
        </div>
    </div>
    
</template>
<script>
    import DirectorVote from "./DirectorVote";
    import MatterVote from "./MatterVote";
    import FinancialStatement from "./FinancialStatement";
    import ElectionMethod from "./ElectionMethod";
    import WorkMethod from "./WorkMethod";
    import Chairman from "./Chairman";
    import DirectorUnit from "./DirectorUnit";
    import footers from "@/components/footersNew";
    //用户投票状态查询方法引入
    import {getCouncilVoteSituation,getBannerUrls,getMeetingGeidcoMatters} from "@/api/vote/council";
   export default {
       name:'electionBallot',
       components:{
           DirectorVote,
           MatterVote,
           footers,
           FinancialStatement,
           ElectionMethod,
           WorkMethod,
           Chairman,
           DirectorUnit
       },
       data () {
           return {
               vote:0,
               depVip:'',
               showHomeEntrance:'',
               votedLeader: '',
               votedMatter: '',
               link:'',
               bannerUrls:[],
               isShowLive:false,
               showLink:'',
               nextpageFlag:'',
               OverFlag:false,//投票结束后的显示结束的页面
               AllFlag:[],
               GoHome:false,
               OFF:this.$route.query.votedLeader,
               xxx:[]
           }
       },
       mounted() {
           this.getVoteState();
           this.getBannerUrl();
           if(localStorage.getItem("Votepage")){
               this.vote = localStorage.getItem("Votepage")
           }
       },
       methods:{
           receiveVotepage(data){
               this.vote = data;
               localStorage.setItem("Votepage", this.vote);
           },
           //===============================
            getMsgFormSon(data){
                console.log('ssssssssssss',data);
                // this.nextpageFlag = data;
                if(this.vote==4&&data==true){
                    this.OverFlag = data
                };
                if(this.vote==0&&data==true){
                    this.AllFlag[0] = data
                }else if(this.vote==1&&data==true){
                    this.AllFlag[1] = data
                }else if(this.vote==2&&data==true){
                    this.AllFlag[2] = data
                }else if(this.vote==3&&data==true){
                    this.AllFlag[3] = data
                }else if(this.vote==4&&data==true){
                    this.AllFlag[4] = data
                };
                if(this.AllFlag.length==5){
                    if(this.AllFlag.findIndex((target)=>{target===true})==-1){
                        this.GoHome = true
                    }
                };
                console.log('ppppppppppp',this.AllFlag)
            },
           //==========================
           changeState(e){
               this.vote = e;
               if (this.vote == 0){
                   this.isShowLive = false
               }
           },
           //查询投票用户状态
           getVoteState(){
               getCouncilVoteSituation().then((res)=>{
                   let sta = res.data.councilVoteSituation;
                   this.depVip=sta.depVip;
                   this.showHomeEntrance=sta.showHomeEntrance;
                   this.votedLeader=sta.votedLeader;
                   this.votedMatter=sta.votedMatter
                   this.link = sta.councilLiveingLink;
                   this.showLink = sta.showCouncilLiveingLink;
               })
           },

           //获取banner图片
           getBannerUrl(){
               getBannerUrls({paramKey:"COUNCIL_AGENDA_ZH,COUNCIL_AGENDA_EN,COUNCIL_PROPAGANDA_ZH,COUNCIL_PROPAGANDA_EN,COUNCIL_END_ZH,COUNCIL_END_EN"}).then(res => {
                   if(this.$i18n.locale == 'zh'){
                       this.bannerUrls =  'api/file/pub/'+ res.data.bannerUrls[2].bannerUrl;
                   }else{
                       this.bannerUrls =  'api/file/pub/'+ res.data.bannerUrls[3].bannerUrl;
                   }
                   
               });
           },

           toView(router, json) {
               this.$router.push({
                   name: router,
                   query: {
                       key:json,

                   }
               });
           },
           //显示直播窗口
           showLive(){
               this.isShowLive = true;

           },
           //关闭直播窗口
           closeLive(){
               this.isShowLive = false
           },
           //下一页
           nextpage(){
               if(this.vote<4){
                   this.vote += 1;
               };
           },
           //上一页
           lastpage(){
               if(this.vote>0){
                   this.vote -= 1
               };
           },
           //============================
           Iknow(){
               this.OverFlag = false
           }
       }
   }
</script>
<style scoped>
    .electionBallot{
        margin: 0;
        padding: 0;
        width: 100%;
        background: #fff;
    }
    .Banner{
        height: 380px;
        width: 100%;
        background: #faf3ec;
        /* background: url("../../assets/img/electionBallot/DirectorVotes/directorBanner.png") no-repeat; */
        background-size: cover;
        overflow: hidden;

    }
    .Banner1{
        height: 380px;
        width: 100%;
        background: #0be0c4;
        background: url("../../assets/img/electionBallot/MattersVotes/back.png") no-repeat;
        background-size: cover;
        overflow: hidden;

    }
    .worldMap{
        width: 962px;
        height: 205px;
        position: absolute;
        left: 50%;
        top: 60px;
        transform: translate(-50%, 10px);
    }
    .Logo{
        width: 246px;
        height: 45px;
        margin:auto;
        position: relative;
        top: 82px;
    }

    .title{
        width: 507px;
        margin:auto;
        position: relative;
        top: 100px;
    }
    .title2{
        width: 887px;
        margin:auto;
        position: relative;
        top: 100px;
    }
    .lightBox{
        width: 507px;
        margin:auto;
        position: relative;
        top: 85px;
    }
    .electionTime{
        /*height: 337px;*/
        /*text-align: center;*/
    }
    .backHome{
        cursor: pointer;
        font-weight: normal;
        font-size: 16px;
        float: left;
    }
    .linkAddress{
        cursor: pointer;
        font-weight: normal;
        font-size: 16px;
        float: right;
    }
    .voteTab{
       text-align: center;
        margin:20px 0;
        font-size: 28px;
        font-weight: 600;
        color: #666666;
    }
    .voteTabBtn{
        display: inline-block;
        cursor: pointer;
        position: relative;
    }
    .isActive:after{
        width:100%;
        height: 4px;
        content: "";
        content: "";
        position: absolute;
        top: 107%;
        left: 0px;
        background-color:#5682CB;
    }
    .timeBack{
        width: 173px;
        height: 56px;
        background: url("../../assets/img/electionBallot/DirectorVotes/timmer.png") no-repeat;
        background-size: 100%;
        line-height: 56px;
        text-align: left;

    }
    .voteText{
       padding: 0 30px;
        margin: 10px 0;

    }
    .liveBox{
        width:1200px;
        height: 380px;
        background: #ffffff;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0px);
        box-shadow: 1px 1px 6px #999;
        /*界面可以拉大缩小*/
        resize: both;
        overflow: auto;
    }
    .close{
        width: 20px;
        height: 20px;
        background: #ccc;
        text-align: center;
        line-height: 20px;
        color: #fff;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }
    .close:hover{
        background: red;

    }
    .pageButton{
        width: 500px;
        margin: auto;
        text-align: center;
        margin-bottom: 30px;
    }
    .Voteover{
        background: #48baff;
        height: 100vh;
    }
    .Voteover>.Banner{
        background: #48baff;
    }
    .VoteoverText{
        font-size: 20vh;
        text-align: center;
        color: #fff;
    }

</style>