dev/dcp-web-gate/src_old/views/introductionCooperation/IntroductionFundingApplicationAgreement.vue

<template>
    <div style="position: relative;" class="Agreenment">
        <div style="width: 30%;margin: auto;color: #666;font-size: 20px;font-weight: 700;text-align: center;margin-top: 50px;margin-bottom: 20px;">
            {{$t('common.Applicationinstructions')}}
        </div>
        <div style="width: 70%;margin: auto;" class="initData"> 
            <div class="div">一、 {{$t('common.Requirements')}}</div> 
            <p>{{$t('common.EnterRequirementsFirst')}}</p>
            <p>{{$t('common.EnterRequirementsSecond')}}</p>
            <p>{{$t('common.EnterRequirementsThird')}}</p>
            <div class="div">二、{{$t('common.RightsandObligations')}}</div>
            <p>{{$t('common.EnterRequirementsFourth')}}</p>
            <p>{{$t('common.EnterRequirementsFifth')}}</p>
            <div class="MemberServices div" >三、{{$t('common.DescriptionofMembershipService')}}
                <p style="margin-left: 36px;">{{$t('common.InformationService')}}</p>
                <p style="margin-left: 36px;">{{$t('common.PublicityService')}}</p>
                <p style="margin-left: 36px;">{{$t('common.ExchangeatConferences')}}</p>
                <p style="margin-left: 36px;">{{$t('common.TrainingandSeminars')}}</p>
                <p style="margin-left: 36px;">{{$t('common.ResourceSharing')}}</p>
                <p style="margin-left: 36px;">{{$t('common.BusinessDevelopment')}}</p>
                <p style="margin-left: 36px;">{{$t('common.ProfessionalAlliancesactivities')}}</p>
                <p style="margin-left: 36px;">{{$t('common.CustomizedService')}}</p>
            </div >
            <p style="color: #6cbafa;">
                <i class="el-icon-document"></i> 
                <a href="javaScript:;" 
                    style="color: #6cbafa;"
                    @click="menbership"
                    >
                    {{$t('common.EnterprisesMembers')}}
                </a>
            </p>
            
            <p style="color: #6cbafa;"><i class="el-icon-document"></i> <a href="javaScript:;" 
                style="color: #6cbafa;" @click="toPDFView">
                {{$t('common.2020MembershipServiceGuide')}}</a>
            </p>
            <div 
                style="position: absolute;left:655px;top:311px;width: 400px;
                height: 505px;border: 1px solid #ececec;background: #fff;box-shadow:#e2e2e2  10px 10px 10px;text-align: center;"
                v-show="Membership" 
            >
                 <div style="width: 100%;height: 50px;line-height: 50px;background: #f0f7ff;
                 text-align: center;border-bottom: 2px solid #e2e2e2;">
                    <span style="float: left;width: 65%;border-right: 1px solid #e2e2e2;">{{$t('common.Membertype')}}</span>
                    <span style="float: left;width: 34%;" :style="$i18n.locale=='en'?'font-size:14px;line-height:18px':''">{{$t('common.Membershipfeestandard')}}</span>
                 </div>
                 <div style="height: 298px;font-size: 14px;">
                    <div style="float: left;width: 65%;height: 100%;border-right: 1px solid #e2e2e2;">
                        <div style="float: left;width: 50%;height: 100%;border-right: 1px solid #e2e2e2;line-height: 298px;"
                        class="weight">{{$t('common.Domestic')}}</div>
                        <div style="float: left;width: 49%;height: 100%;" class="domesticList">
                            <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">{{$t('common.Councilmembers')}}</div>
                            <div style="border-bottom: 1px solid #e2e2e2;" :style="$i18n.locale=='zh'?
                            'padding: 20px 0':'padding: 2px 0;'">
                                <div>{{$t('common.FortuneGlobal500enterprises')}}</div>
                                <div style="font-size: 12px;margin-top: 10px;">({{$i18n.locale=='zh'?'或相应规模企业':'or
                                    enterprises of similar size'}})</div>
                            </div>
                            <div style="border-bottom: 1px solid #e2e2e2;" :style="$i18n.locale=='zh'?
                            'padding: 20px 0':'padding: 5px 0;'">
                                <div>{{$i18n.locale=='zh'?'大型企业':"Large enterprises"}}</div>
                                <div style="font-size: 12px;margin-top: 10px;">({{$i18n.locale=='zh'?'中国500强或相应规模企业':'Top 500 Enterprises of China or
                                    enterprises of similar size'}})</div>
                            </div>
                            <div style="height: 50px;line-height: 50px;">{{$i18n.locale=='zh'?'其他企业':"Other enterprises"}}</div> 
                        </div>
                    </div>
                    <div style="float: left;width: 34%;height: 100%;font-size: 14px;">
                        <div style="float: left;width: 100%;height: 100%;" class="domesticList">
                            <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">{{$t('common.RMB800000')}} / {{$t('common.year')}}</div>
                            <div style="border-bottom: 1px solid #e2e2e2;padding: 33px 0;">
                                <div>{{$t('common.RMB500000')}} / {{$t('common.year')}}</div>
                                
                            </div>
                            <div style="border-bottom: 1px solid #e2e2e2;padding: 41px 0;">
                                <div>{{$t('common.RMB300000')}} / {{$t('common.year')}}</div>
                     
                            </div>
                            <div style="height: 50px;line-height: 50px;">{{$t('common.RMB100000')}} / {{$t('common.year')}}</div>
                        </div>
                    </div>
                 </div>
                 <div style="width: 100%;height: 98px;border: 2px solid #e2e2e2;border-left: 0;border-right: 0;font-size: 14px;">
                    <div style="float: left;width: 65%;height: 100%;border-right: 1px solid #e2e2e2;">
                        <div style="float: left;width: 50%;height: 100%;border-right: 1px solid #e2e2e2;line-height: 98px;">
                            {{$i18n.locale=='zh'?
                            '国际':'International'}}</div>
                        <div style="float: left;width: 49%;height: 100%;">
                            <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">
                                {{$i18n.locale=='zh'?
                                '企业理事':'Council members'}}</div>
                            <div style="height: 50px;line-height: 50px;">{{$i18n.locale=='zh'?
                                '其他企业':'Other enterprises'}}</div>
                        </div>
                    </div>
                    <div style="float: left;width: 34%;height: 100%;">
                        <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #e2e2e2;">{{$t('common.$30000')}} / {{$t('common.year')}}</div>
                        <div style="height: 50px;line-height: 50px;">{{$t('common.$10000')}} / {{$t('common.year')}}</div>
                    </div>
                 </div>
                 <div style="height: 50px;line-height: 50px;font-size: 14px;">
                    <div style="float: left;width: 65%;height: 100%;border-right: 1px solid #e2e2e2;" :style="$i18n.locale=='zh'?
                    '':'line-height:25px'">
                        {{$i18n.locale=='zh'?'个人及非盈利机构':'Individuals and non-profit organizations'}}
                    </div>
                    <div style="float: left;width: 34%;height: 100%;">
                        {{$i18n.locale=='zh'?'免费':'Free'}}
                    </div>
                 </div>
            </div>
            <div style="margin-top: 65px;">
                <el-checkbox v-model="checked" >{{$t('common.Ihavereadandagree')}}</el-checkbox>
                <!-- <span style="float: right;color: #666;font-weight: 700;font-size: 18px;">全球能源互联网展合作组织</span> -->
            </div>
            <div  style="margin: auto;position: relative;height: 100px;">
                <el-button type="primary" 
                style="width: 200px;position: absolute;top: 50px;left: 50%; transform: translate(-50%,-50%);"
                :disabled="!checked"
                @click="activeChange"
                >
                {{$t('common.Next')}}
            </el-button>
            </div>
        </div>
        <el-dialog
                :title="$i18n.locale=='zh'?'提示':'Reminder'"
                :visible.sync="toViewLogin"
                :width="$i18n.locale=='zh'?'500px':'750px'"
                :height="$i18n.locale=='zh'?'300px':'386px'"
                :before-close="toViewLoginChange"
        >
            <div style="width: 100%;height: 100%;">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
                <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
                    <div style="font-size: 20px;font-weight: normal;color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
                        {{$t('common.ReminderFirst')}}
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderForth')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                  {{$t('common.ReminderFifth')}}
                </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
                  {{$t('common.ReminderSixth')}}
                </span>
                    </div>
                </div>
            </div>
        </el-dialog>
        
        <el-dialog
            :title="$i18n.locale=='zh'?'2023会员服务指南':'2023 Membership Service Guide'"
            :visible.sync="toPDFViewList"
            style=" margin:25px auto;"
            width="50%"
            >
            <iframe :src="src" page="1" frameborder="0" style="width:100%;height: 500px;"></iframe>
        </el-dialog>
    </div>
</template>
<script>
    export default {
      name: 'IntroductionFundingApplicationAgreement',
      data () {
        return {
            initData:"",
            checked: false,
            Membership:false,
            toViewLogin:false,
            timer:'',
            num:5,
            toPDFViewList:false,
            src:null
        }
      },
      mounted(){
        this.src = this.$i18n.locale.toUpperCase() == "ZH" ? '/api/file/pub/def/toPDFViewList.pdf' : '/api/file/pub/def/toPDFViewListEN.pdf';
        document.all.iframeid.src = this.src?this.src:'';
        debugger
        this.$forceUpdate();
      },
      watch:{
        "toViewLogin"(){
            if(this.toViewLogin==true){
                this.loginTipsChange();
            }
        }
      },
      methods:{
        toPDFView(){
            this.toPDFViewList=true;
        },
        // 未登录跳转
        toView(router,json){
            if(router=='login'){
                let rpath = { name: 'IntroductionFundingApplication', query: {}};
                sessionStorage.setItem('pathReminder', JSON.stringify(rpath));
                this.$router.push({name:router,params:json})
                
            }else {
                this.$router.push({name:router,params:json})

            }
        },
        loginTipsChange(){
            const that=this;
            this.num =5;
            clearInterval(timer_interval);
            
            this.timer = setInterval(function() {
            if (that.num > 0) {
                that.num--;
            } else {
                if(that.toViewLogin==true){
                    clearInterval(that.timer);
                    that.toView('login');
                }else {
                clearInterval(that.timer);
                }
            }
            }, 1000)
        },
        // 判断未登录跳转是否关闭
        toViewLoginChange(done){
            this.toViewLogin=false;
            this.num=5;
            clearInterval(this.timer);
        },
        activeChange(){
            if (!this.$Cookies.get('token')) {
            // this.$message.warning("请先登录");
            // this.$confirm('检测到您未登录，是否登录')
            // .then(_ => {
            //  this.toView('login');
            // })
            // .catch(_ => {});
              this.toViewLogin=true;
        } else {
            this.$emit('agreementChange',1)
        }
           
        },
         menbership(){

            this.Membership =!this.Membership;
        }
      },
    }
</script>
<style scoped>
    .initData .div{
        color: #666;
        font-weight: 700;
    }
    .initData .weight{
        font-weight: 400;
    }
    .initData p{
        margin-left: 18px;
        font-size: 14px;
        color: #aeaeae;
    }
    .MemberServices {
        margin-top: 50px;
    }
    .MemberServices p {

        display:list-item; 
        list-style-type:disc; 
        margin-left:2em;
        color: #325a8e;
    }
    .domesticList div {
        width: 100%;
    }
    html {
        height: 500px;
    }
    .Agreenment >>>.el-dialog__body {
        padding:0 20px 30px 20px;
    }
</style>