dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServicesGuideDetails.vue

<template>
    <div>
        <div class="autoBox box" >
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'financialServices' }">{{$t('common.FinancialServices')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'FinancialServiceInvestmentGuide' }">{{$t('common.InvestmentGuide')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{guideList.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="projectBox">
                <div class="content">
                    <div class="title">
                        <p style="font-size: 26px;font-weight: 600;color: #666666;margin-top: 0;color: #666666">{{guideList.name}}</p>
                        <div style="font-size: 14px;border-bottom: 1px solid #cccccc;line-height: 40px">
                            <span style="float: left">{{$t('common.ReleaseTime')}}：{{formatDate(guideList.publishDate)}}</span>
                            <div style="float: right;color: #666666">
<!--                                <span style="margin-right: 10px;cursor: pointer;color: #666666;" @click="download(pdfList.attachmentSavePath)">{{$t('common.Print')}}</span>-->
<!--                                <span style="margin-right: 10px;">|</span>-->
                                <span
                                      :style="ifcommon?'color: #66b1ff;':'color: #666666;'"
                                      style="margin-right: 10px;cursor: pointer"
                                      @click="shareChange()">
<!--                                        <i class="el-icon-star-off" :style="ifcommon?'color: #66b1ff;':'color: #000;'"></i>-->
                                        {{ifcommon?$t('common.Collected'):$t('common.Collection')}}
                                    </span>
<!--                                <span style="margin-right: 10px;">|</span>-->
<!--                                <span style="margin-right:10px;cursor: pointer;color: #666666;">{{$t('common.Share')}}</span>-->
                            </div>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div class="preview" :class="isLogin==false?'content1':''">
                        <div v-show="!pdfIsOn" style="font-size: 18px;">
                            <span>{{$t('common.NoFile')}}</span>
                        </div>
<!--                        pdf展示-->
                        <iframe v-show="pdfSrc" id="iframe_id" width="100%"  height="1160px" :src="pdfSrc + '#toolbar=0'" frameborder="0"></iframe>

                    </div>

                </div>
<!--                <div class="relevan">-->
                    <!--其他区域投资指引-->
<!--                    <div class="relevanInformation">-->
<!--                        <div class="informationTitle">{{$t('common.OtherRelated')}}</div>-->
<!--                        <div class="informationList">-->
<!--                            <ul>-->
<!--                                <li v-for="(AreaItem,index) in otherArea"  >-->
<!--                                    <div style="width: 4px;height: 4px;background: #666666;border-radius: 50%;float: left;margin-top: 18px"></div>-->
<!--                                    <div class="list" @click="toDetails('FinancialServicesGuideDetails',AreaItem.baseEntityId)">-->
<!--                                        {{AreaItem.name}}-->
<!--                                    </div>-->
<!--                                    <div style="clear: both"></div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                        <div style="clear: both"></div>-->
<!--                    </div>-->
                    <!--其他机构相关研究报告-->
<!--                    <div class="relevanInformation">-->
<!--                        <div class="informationTitle">{{$t('common.RelevantInstitutions')}}</div>-->
<!--                        <div class="informationList">-->
<!--                            <ul>-->
<!--                                <li v-for="(reportItem,index) in reportList"  @click="toInformationList1(reportItem)">-->
<!--                                    <div style="width: 4px;height:4px;background: #666666;border-radius: 50%;float: left;margin-top: 18px"></div>-->
<!--                                    <div class="list">-->
<!--                                        {{reportItem.name}}-->
<!--                                    </div>-->
<!--                                    <div style="clear: both"></div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
                    <!--投融资会议及活动-->
<!--                    <div class="relevanInformation">-->
<!--                        <div class="informationTitle">{{$t('common.MeetingsAndEvents')}}</div>-->
<!--                        <div class="informationList">-->
<!--                            <ul>-->
<!--                                <li v-for="(InvestItem,index) in InvestmentList" @click="toDetails('ConferenceResult',InvestItem.id)">-->
<!--                                    <div style="width:4px;height: 4px;background: #666666;border-radius: 50%;float: left;margin-top: 18px"></div>-->
<!--                                    <div class="list">-->
<!--                                        {{$i18n.locale=='en'?InvestItem.meetingNameEn: InvestItem.meetingName}}-->
<!--                                    </div>-->
<!--                                    <div style="clear: both"></div>-->
<!--                                </li>-->
<!--                                <div style="margin-top: 20px"></div>-->
<!--                                <li v-for="(activeItem,index) in activityList" @click="toDetails('cooperationExchangeListDetails',activeItem.baseActivityEntityId)">-->
<!--                                    <div style="width: 4px;height: 4px;background: #666666;border-radius: 50%;float: left;margin-top: 18px"></div>-->
<!--                                    <div class="list">-->
<!--                                        {{activeItem.activityName}}-->
<!--                                    </div>-->
<!--                                    <div style="clear: both"></div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div style="clear: both;"></div>
            </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>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import moment from "moment";
    import {getFollowModeNumlByModelIdAndUserId} from "../../api/operation/basePortalModelFollowInfo";
    import {getBaseInvestmentGuidelinesInfos} from '@/api/financialService/baseInvestmentGuidelinesInfo';
    import { saveFollowModel } from "@/api/operation/basePortalModelFollowInfo";
    import {getToken } from "@/utils/auth";
    import {activityInfos, sysAttachmentInfos} from "../../api/cooperation/baseCooperationUnit";
    import {getConfrences} from "../../api/meeting/meetingOutInfo";
    import { getBaseResearchResultViews,gateResearchResultViewById,gateResearchResultFileById } from "@/api/research/baseResearchResultView";

    export default {
        name: "FinancialServicesGuideDetails",
        components: { moment },
        extends: Base,
        data() {
            return {
                index: 0,
                imgIndex:1,
                loading: true,
                maxNum:0,
                num:5,
                pdfIsOn:'',
                isLoding:true,
                projectFaIcon:2,
                showPdf:false,
                toViewLogin:false,
                ifcommon:false,
                InvestmentList:[],
                activityList:[],
                reportList:[],
                currentPage:1,
                showPdfDeta:{},
                pdfSrc:null,
                pdfNum:0,
                pdfParams:{
                    pageNo:1,
                    pageSize:1,
                    language:'',
                    researchResultFileId:''
                },
                pdfList:'',
                guideList:'',
                params:{
                    pageSize:"10",
                    pageNo:"1",
                    language:'',
                    baseEntityId:'',
                    statusDict:'2'
                },
                isLogin:false,
                otherArea:[],
                informationList:[],
                clickNum:{},
                dict: {},
                Initials:'',
                informationNumMap:{},
            };
        },

        mounted() {
            this.getData()
            this.confLogin();
            this.getOtherArea();
            // this.getPdfList();
            this.getMeetingAndActive();
            this.getactivityStatusDict();
            this.getreportList();

            this.$store.commit('modify', 'FinancialServices');
            window.localStorage.setItem('router', 'FinancialServices');

        },

        watch: {
            '$i18n.locale'(){
                this.getData();
                this.getOtherArea();
                this.confLogin();
                this.getMeetingAndActive();
                this.getactivityStatusDict();
                this.getreportList();

                // this.getPdfList();
            },

            "toViewLogin"(){
                if(this.toViewLogin==true){
                    this.loginTipsChange();

                }
            },

        },
        methods: {
            // 未登录跳转
            loginTipsChange(){
                const that=this;
                this.num =5;
                clearInterval(this.timer);

                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);
            },
            getIconImg(url) {
                return require("@/assets/img/financialService/" + url);
            },
            getOtherArea(){
                let otherList = {
                    pageSize:"6",
                    pageNo:"1",
                    language:this.$i18n.locale.toUpperCase(),
                    statusDict:'2',
                    showable:'y'
                }
                getBaseInvestmentGuidelinesInfos(otherList).then((res)=>{
                    let dataList=[];
                    dataList = res.data.baseInvestmentGuidelinesInfos;
                    this.otherArea = [];
                    for(let i=0;i<dataList.length;i++){
                        if(dataList[i].name !== this.guideList.name){
                            this.otherArea.push(dataList[i])
                        }
                    }
                    // this.otherArea = res.data.baseInvestmentGuidelinesInfos;
                })
            },
            toView(router, json) {
                clearInterval(this.timer);
                console.log(router,json)
                this.$router.push({
                    name: router,
                    query:{
                        key:json,
                    }
                })
            },
            toInformationList1(ele){
                let params = {
                    entityId:ele.entityId,
                    // researchResultFileId:ele.researchResultFileId,
                }
                this.toViewInformationList('resourceSharingDetails',params)
            },
            toViewInformationList(router, json) {
                clearInterval(this.timer);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key:JSON.stringify(json),
                    }
                });
                window.open(href, '_blank');

            },
            confLogin(){
                if (!this.$Cookies.get('token')) {
                    this.isLogin=false
                }else{
                    this.isLogin= true
                }
            },
            getData(){
                const that =this;
                this.params.language = this.$i18n.locale.toUpperCase();
                this.params.baseEntityId = this.$route.query.key;
                getBaseInvestmentGuidelinesInfos(this.params).then((res)=>{
                    this.guideList = res.data.baseInvestmentGuidelinesInfos[0];
                    this.getMyCollecModel();
                    if(this.guideList.pdfToPictureFileIds){
                        this.getPdf();
                        this.pdfIsOn = true;
                    }else{
                        this.pdfIsOn = false;

                    }
                    let list={
                        attachmentBusinessId: this.guideList.id,
                        attachmentBusinessType:'base_investment_guide'
                    };
                    sysAttachmentInfos(list).then((res)=>{
                        this.showPdfDeta = res.data.attachmentInfos[0];
                        this.pdfSrc = 'api/file/pub/' + this.showPdfDeta.attachmentSavePath;
                        console.log(this.showPdfDeta)
                    });

                })
                this.getOtherArea()

            },
            // 项目收藏改变
            shareChange() {
                if (this.ifcommon) {
                    this.Collection("unfollow");
                }else{
                    this.Collection("follow");
                }
                console.log(this.ifcommon)
            },
            Collection: function (collectType) {
                let user = window.localStorage.getItem("user");
                if (!this.$Cookies.get('token')) {
                    this.toViewLogin = true;
                } else {
                    var users = JSON.parse(user);
                    var token = "" + getToken();
                    var userId = users.userId;
                    var modelId =this.guideList.baseEntityId;
                    // 接口逻辑
                    this.submitHandler((token) => {
                        saveFollowModel(modelId, "investmentGuidelines", userId, collectType, token)
                            .then((result) => {
                                if(result.status==200) {
                                    if (!this.ifcommon) {
                                        this.$message({
                                            message: this.$i18n.locale == 'zh' ? "已收藏" : "Already collected",
                                            type: 'success'
                                        });
                                    } else{
                                        this.$message({
                                            message: this.$i18n.locale == 'zh' ? "取消收藏" : "Cancel coilection",
                                            type: 'success'
                                        });
                                    }
                                }
                                this.ifcommon = !this.ifcommon;
                                this.resetToken();
                            })
                            .catch((error) => {
                                this.$message({
                                    message: result.data,
                                    type: "failed",
                                });
                            });
                    });
                }
            },
            getMyCollecModel(){
                const that= this;
                let user = window.localStorage.getItem("user");

                if (this.$Cookies.get('token')) {
                    var users = JSON.parse(user);
                    var token = "" + getToken();
                    var baseEntityId = this.guideList.baseEntityId;
                    this.userId = users.userId;
                    getFollowModeNumlByModelIdAndUserId(
                        baseEntityId,
                        "investmentGuidelines",
                        this.userId
                    ).then((res) => {
                        this.ifcommon = res.data;
                        console.log(
                            res.data,
                            "---------------------------------------------------------------------------"
                        );
                    });
                }
            },
            download(url){
                const href  ="api/file/pub/" + this.showPdfDeta.attachmentSavePath;
                window.open(href, '_blank');
                // a.click();
            },
            // getMeetingAndActive(){
            //     // 获取会议
            //     getConfrences().then((res)=>{
            //         if(res.data.meetingBasicInfos){
            //             let meetingLength = res.data.meetingBasicInfos.length;
            //             this.InvestmentList = [];
            //             for(let i=0;i<meetingLength;i++){
            //                 if(i<3){
            //                     this.InvestmentList.push(res.data.meetingBasicInfos[i])
            //                 }
            //             }
            //         }
            //     });
            // },
            getactivityStatusDict(){
                let list={
                    pageSize:9,
                    pageNo:1,
                    language:this.$i18n.locale.toUpperCase(),
                    activityStatusDict:1, // 活动类型
                    activityArea:"",// 大洲

                }
                activityInfos(list).then(res=>{
                    if(JSON.stringify(res.data)!=='{}'){
                        let activityLength = res.data.activityInfos.length;
                        this.activityList = [];
                        for(let i=0;i<activityLength;i++){
                            if(i<2){
                                this.activityList.push(res.data.activityInfos[i])
                            }
                        }
                    }
                })
            },
            // getreportList(){
            //     const that = this;
            //     let reportParams = {
            //         pageSize: 5,
            //         pageNo: 1,
            //         language:this.$i18n.locale.toUpperCase(),
            //         totalPage:'',
            //         descStatus:0
            //     };
            //     getBaseResearchResultViews(reportParams).then((res)=>{
            //         this.reportList = res.data.baseResearchResultViews;
            //     })
            // },
            toDetails(router,json){
                // this.$store.commit('modify', router);
                window.localStorage.setItem('router', router);
                localStorage.setItem('conferenceId', json);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key: json
                    }
                });
                window.open(href, '_blank');
                // this.getData()
            },
            // getPdf(){
            //     this.pdfParams.language = this.$i18n.locale.toUpperCase();
            //     this.pdfParams.researchResultFileId = this.guideList.pdfToPictureFileIds;
            //     gateResearchResultFileById(this.pdfParams).then((res)=>{
            //         this.pdfList = res.data.baseResearchResultFile;
            //
            //         if( this.isLogin==true){
            //             this.pdfNum =this.pdfList.filePages;
            //
            //         }else{
            //             this.pdfNum = 2;
            //         }
            //     })
            // },

            // setTimeout(isLodingchange,3000)

    //分页索引接着上一页的索引
            indexMethod(index){
                return (this.page-1)*10+index+1;
            },
            // 分页
            handleCurrentChange(val){
                this.pdfParams.pageNo=val
                this.getData();
            },
            getIframe(){
                var x=document.getElementById("")
            }


        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    li {
        display: inline-block;
        color: #1251a7;
    }

    .projectBox{
        width: 100%;
        margin-top: 40px;
    }
    .content {
        /*float: left;*/
        width: 70%;
        margin: auto;

    }
    .content .preview{
        width: 100%;
        margin: 10px 0;
        text-align: center;
    }
    .content .title{
        width:95%;
        padding: 0 20px;
        text-align: center;
    }
    .content .toLogin{
        width: 100%;
        height: 30px;
        text-align: center;
    }
    .content .toLogin p{
        line-height: 30px;
        font-size: 18px;
        font-weight:600;
    }
    .relevan{
        width:30%;
        float:right;
    }
    .relevanInformation{
        min-height: 200px;
        max-height: 400px;
        padding: 0 20px;
        overflow: hidden;
        line-height: 34px;
    }
    .relevanMeeting{
        padding: 0 20px;
        overflow: hidden;
        line-height: 24px;
    }
    .informationList{
        width: 100%;
        font-size: 14px;
        /*padding-left: 15px;*/
    }
    .informationTitle{
        font-size: 20px;
        color: #666666;
        border-bottom: 1px solid #2C558A;
        padding: 0 0 10px 0;
        font-weight: 600;
        opacity: 0.9;
        color: #2C558A;
    }
    .informationList ul{
        margin-top: 14px;
        font-size: 14px;
        /*list-style-type:disc;*/
        padding: 0 30px 0 0;
        box-sizing: border-box;
    }
    .informationList ul li{
        width: 100%;
        height: 34px;
        line-height: 34px;
        margin-bottom: 12px;
        color: #666666;
        cursor: pointer;
        /*margin-top: 10px;*/
        list-style: disc inside;
    }
    .informationList ul li .list{
        width: 96%;
        float: right;
        display: inline-block;
        overflow: hidden;
        line-height: 34px;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
    .content1{
        /*max-height: 850px;*/
        overflow: hidden;
    }
    .meetingImg{
        width: 100%;
        height: 160px;
        cursor: pointer;
    }

</style>