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

<template>
    <div style="width: 100%;background:#fff">
        <div class="autoBox box cool">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }" replace>{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'financialServices' }" replace>{{$t('common.FinancialServices')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'FinancialServicesFundIdeas' }" replace>{{$t('common.FundIdeas')}}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{iniData.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div class="autoBox box1">
            <div style="padding: 0 80px">
                <div class="ideasTitle">
                    {{iniData.title}}
                </div>
                <div style="font-size: 18px;font-weight: 700;color: #666666;width: 100%;">
                    <div style="height: 50px;line-height: 40px;width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{iniData.subtitle}}</div>
                    <div style="width: 38%;height: 1px;border-top: 1px solid #ccc "></div>
                    <div style="width: 38%;float: left;">
                        <div  style="margin-top: 20px;border-bottom: 1px solid rgba(204, 204, 204,.3);">
                            <div style="width:10%;float: left">
                                <img src="@/assets/img/financialService/Development.png" alt="" style="width: 44px;height: 44px;margin: 30px 0;">
                            </div>
                            <div style="width:80%;float:left;margin-left: 35px">
                                <p> {{$t(keyContent[0].title)}}</p>
                                <p style="font-size: 16px;color: #666666;font-weight: normal">{{$t(keyContent[0].label)}}</p>
                            </div>
                            <div style="clear: both"></div>
                        </div>

                        <div style="margin-top: 30px;border-bottom: 1px solid rgba(204, 204, 204,.3);">
                            <div style="width: 10%;float: left">
                                <img src="@/assets/img/financialService/Innovation.png" alt="" style="width: 44px;height: 44px;margin: 30px 0;">
                            </div>
                            <div style="width:80%;float:left;margin-left: 35px">
                                <span> {{$t(keyContent[1].title)}}</span>
                                <p style="font-size: 16px;color: #666666;font-weight: normal">{{$t(keyContent[1].label)}}</p>
                            </div>
                            <div style="clear: both"></div>

                        </div>
                        <div style="margin-top: 30px;border-bottom: 1px solid rgba(204, 204, 204,.3);">
                            <div style="width: 10%;float: left">
                                <img src="@/assets/img/financialService/construction.png" alt="" style="width: 44px;height: 44px;margin: 30px 0;">
                            </div>
                            <div style="width:80%;float:left;margin-left: 35px">
                                <span> {{$t(keyContent[2].title)}}</span>
                                <p style="font-size: 16px;color: #666666;font-weight: normal">{{$t(keyContent[2].label)}}</p>
                            </div>
                            <div style="clear: both"></div>

                        </div>
                    </div>
                   <div style="width:60%;float: right;">
                       <div style="margin: 0;padding: 0">
                           <img src="@/assets/img/financialService/GreenOne.png" alt="" style="width:100%;height: 130px">
                       </div>
                       <div>
                           <img src="@/assets/img/financialService/GreenTwo.png" alt="" style="width:100%;height: 130px">
                       </div>
                       <div >
                           <img src="@/assets/img/financialService/GreenThree.png" alt="" style="width:100%;height: 130px">
                       </div>
                   </div>
                    <div style="clear: both"></div>


                </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 {getBaseFundIdeasInfos} from '@/api/financialService/baseFundIdeasInfo'
    import {getFollowModeNumlByModelIdAndUserId} from "../../api/operation/basePortalModelFollowInfo";
    import {getToken } from "@/utils/auth";
    import Base from "@/views/base/Base";
    import { saveFollowModel } from "@/api/operation/basePortalModelFollowInfo";

    export default{
        name:'FinancialServicesIdeasDetails1',
        extends: Base,
        data(){
            return{
                num:5,
                iniData:{},
                ifcommon:false,
                toViewLogin:false,
                keyContent:[
                    {
                        title:'common.GreenEnergy',
                        label:'common.IncludingWind'
                    },
                    {
                        title:'common.GridInterconnection',
                        label:'common.CorrespondingKey'
                    },
                    {
                        title:'common.SmartGrid',
                        label:'common.ComprehensiveEnergy'
                    },
                ],
                params:{
                    pageSize:"5",
                    pageNo:"1",
                    language:'',
                    baseEntityId:'',
                    statusDict:'2'
                }
            }
        },
        mounted() {
            this.getDetails();

        },
        watch: {
            '$i18n.locale'(){
                this.getDetails();
            },
        },
        methods:{
            // 未登录跳转
            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);
            },
            getDetails(){
                this.params.language = this.$i18n.locale.toUpperCase();
                this.params.baseEntityId = this.$route.query.key;
                getBaseFundIdeasInfos(this.params).then((res)=>{
                    this.iniData = res.data.baseFundIdeasInfos[0];

                    this.iniData.keyword = this.iniData.keyword.split(',');
                    this.getMyCollecModel()
                })
            },
            // 项目收藏改变
            // shareChange() {
            //     if (this.ifcommon) {
            //         this.Collection("unfollow");
            //     }else{
            //         this.Collection("follow");
            //     }
            // },
            // 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 baseEntityId =this.iniData.baseEntityId;
            //
            //         // 接口逻辑
            //         this.submitHandler((token) => {
            //             saveFollowModel(baseEntityId, "finance", userId, collectType, token)
            //                 .then((result) => {
            //                     if(result.status==200) {
            //                         if (!this.ifcommon) {
            //                             this.$message({
            //                                 message: this.$i18n.locale == 'zh' ? "已收藏" : "Liked of success",
            //                                 type: 'success'
            //                             });
            //                         } else{
            //                             this.$message({
            //                                 message: this.$i18n.locale == 'zh' ? "取消收藏" : "Cancel the like",
            //                                 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.iniData.baseEntityId;
            //         this.userId = users.userId;
            //         getFollowModeNumlByModelIdAndUserId(
            //             baseEntityId,
            //             "finance",
            //             this.userId
            //         ).then((res) => {
            //             this.ifcommon = res.data;
            //             console.log(
            //                 res.data,
            //                 "---------------------------------------------------------------------------"
            //             );
            //         });
            //
            //     }
            // },

        }
    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    .box1 {
        padding: 0;
        /* transform: translateX(-20px); */
        margin-top: 15px;
        height: 700px;
    }

    body {
        margin: 0;
        padding: 0;
    }
    .ideasTitle{
        font-size: 28px;
        color: #666666;
        font-weight: 700;
        margin: 30px auto;
        text-align: center;
    }
</style>