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

<template>
    <div>
        <div style="width: 100%;height: 190px;background: #fff;">
            <div style="float: left;width: 20%;height: 100%;position: relative;">
                <img src="@/assets/img/userCenter/user.png" alt="" style="width: 130px;position: absolute;left: 50%;top: 45%;transform: translate(-50%,-50%);">
            </div>
            <div style="float: left;width: 50%;height: 100%;">
                <div style="width: 96.5%;margin-left: 10px;margin-top: 20px;height: 80%;">
                    <div>
                        <span style="font-size: 20px;color: #2c5589;font-weight: 700;">{{userInfor.userName}}</span>
                        <span v-if="userInfor.tag1" class="tag">{{realStatusDicts[this.realStatus]}}</span>
                        <span v-if="userInfor.tag1" class="tag">{{userMobileStatusDicts[this.mobileStatus]}}</span>
                        <span v-if="userInfor.tag1" class="tag">{{userEmailStatusDicts[this.emailStatus]}}</span>
                    </div>
                    <div style="margin-top: 10px;font-size: 14px;color: #999;">
                        <span style="margin-right: 25px;">
                            <i class="el-icon-message" aria-hidden="true"></i>
                            {{userInfor.Email}}
                        </span>
                        <div style="margin-top: 10px;font-size: 14px;color: #999;">
                            <span>
                            <i class="el-icon-mobile-phone" aria-hidden="true"></i>
                            {{userInfor.tel}}
                        </span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: left;width: 19.8%;height: 100%;border-left: 1px solid #ebebeb;">
                <div style="width: 96.4%;margin-left: 10px;margin-top: 20px;height: 80%;">
                    <div>
                        <span  style="font-size: 18px;color: #2c5589;font-weight: 700;">{{$t('common.MessageRemind')}}</span>
                        <i class="fa fa-volume-up" aria-hidden="true" style="color: #2c5589;margin-left: 20px;font-size: 18px;"></i>
                    </div>
                    <div style="margin-top: 10px;font-size: 14px;color: #999;">
                       <span style="display:block;line-height: 30px;" @click="toView('SystemMessage','/SystemMessage')"
                             class="cursor">
                        {{$t('common.SystemRemind')}}：<span class="num1">0</span>
                    </span>
                        <span style="display:block;line-height: 30px;" @click="toView('notification','/notification')"
                              class="cursor">
                        {{$t('common.Announcements')}}：<span class="num1">0</span>
                    </span>
                        <span style="display:block;line-height: 30px;" @click="toView('myConsultingService','/myConsultingService')"
                              class="cursor">
                        {{$t('common.MyAdvice')}}：<span class="num2">0</span>
                    </span>
                        <span style="display:block;line-height: 30px;" @click="toView('communication','/communication')"
                              class="cursor">
                        {{$t('common.interactiveMessage')}}：<span class="num2">0</span>
                    </span>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 100px;background: #fff;margin-top: 15px;">
            <div class="title">
                <span> <i class="el-icon-menu" aria-hidden="true" style="margin-right:10px"></i>{{$t('common.FunctionRecommended')}}</span>
            </div>
            <div style="width: 100%;height: 50px;line-height: 50px;font-size: 15px;color: #666;">
                <span style="padding: 3px 30px;border-right: 1px solid #2c5589;" @click="toViewDevelopmentCooperation()"> <i class="el-icon-message" aria-hidden="true" style="margin-right:5px;color: #2c5589;" ></i>{{$t('common.CooperationForum')}}</span>
                <span style="padding: 3px 30px;border-right: 1px solid #2c5589;" @click="toOnlineMeeting()"> <i class="el-icon-microphone" aria-hidden="true" style="margin-right:5px;color: #2c5589;"></i>{{$t('common.OnlineMeeting')}}</span>
            </div>
        </div>
        <!--我的项目-->
        <div style="width: 100%;background: #fff;margin-top: 15px;">
            <div class="title">
                <span> <i class="el-icon-office-building" aria-hidden="true" style="margin-right:10px"></i>{{$t('common.UserMyProject')}}</span>
                <span style="float: right;font-size: 14px;color: #666;line-height: 80px;" @click="toMyProject()">{{$t('common.More')}} <i class="el-icon-arrow-right" aria-hidden="true" style="margin-right:10px"></i></span>
            </div>
            <div style="width: 100%;height: 160px;">
                <div class="recommend">
                    <ul>
                        <li v-for="(item,index) in myProject" v-if="index<4" :key="index + 2" style="margin-left: 20px;">
                            <img @click="toViewProject('projectPresentationDetails',item.id,index)"
                                 :src="'api/file/pub/'+ item.bannerImg" alt
                                 style="width: 100%;height: 115px;cursor: pointer;"/>
                            <div style="color: #bcbcbc;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                {{item.followName}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="width: 100%;background: #fff;margin-top: 15px;">
            <div class="title">
                <span> <i class="el-icon-wind-power" aria-hidden="true" style="margin-right:10px"></i>{{$t('common.UserMyActivities')}}</span>
                <span style="float: right;font-size: 14px;color: #666;line-height: 80px;" @click="toMyProject()">{{$t('common.More')}} <i class="el-icon-arrow-right" aria-hidden="true" style="margin-right:10px"></i></span>
            </div>
            <div style="width: 100%;height: 160px;">
                <div class="recommend">
                    <ul>
                        <li v-for="(item,index) in myActivity" v-if="index<4" :key="index + 2" style="margin-left: 20px;">
                            <img @click="toViewActivity('CooperationExchangeListDetails',item.id,index)"
                                 :src="'api/file/pub/' + item.bannerImg" alt
                                 style="width: 100%;height: 115px;cursor: pointer;"/>
                            <div
                                    style="color: #bcbcbc;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                            >{{item.followName}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getPortalMyFollowMode} from "@/api/userCenter/myFollow";
    import {getToken} from "@/utils/auth";
    import {getUserInfoStatus} from "@/api/userCenter";
    export default {
        name: 'FinancialServicesBoxView',
        data () {
            return {
                projectNum:[],
                projectParams: {
                    pageNo: 1,
                    pageSize: 10,
                    technicalCategories: "",
                    technicalScope:"",
                    phaseType:"",
                    createBy: "",
                    projectName:"",
                    publishingChannels:"1",
                    approveStatus:"",
                    language:""
                },
                userInfor:{
                    userName:"",
                    tag1:'1',
                    tag2:'1',
                    tag3:'1',
                    enterpriseName:'common.threeGorgesCorporation',
                    Email:'',
                    tel:''
                },
                mobileStatus:"",
                emailStatus:"",
                realStatus:'',
                userMobileStatusDicts:{0:this.$t('common.PhoneNumberVerified'),1:this.$t('common.PhoneNumberNotVerified')},
                userEmailStatusDicts:{0:this.$t('common.EmailVerified'),1:this.$t('common.EmailNotVerified')},
                realStatusDicts:{true:this.$t('common.RealNameVerification'),false:this.$t('common.RealNameNotVerification')},
                myProject:[],
                myActivity:[],
                recommend:[],
            }
        },
        watch: {
            "$i18n.locale"() {
                this.userMobileStatusDicts={0:this.$t('common.PhoneNumberVerified'),1:this.$t('common.PhoneNumberNotVerified')};
                this.userEmailStatusDicts={0:this.$t('common.EmailVerified'),1:this.$t('common.EmailNotVerified')};
                this.realStatusDicts={true:this.$t('common.RealNameVerification'),false:this.$t('common.RealNameNotVerification')};
                this.initData();

            },
        },
        mounted(){
            this.initData();
        },
        methods:{
            toView(router, json,index) {
                window.localStorage.setItem('router', router);
                this.$store.commit('modify', router);
                const { href } =this.$router.resolve({
                    name: router,
                    query: {
                        key: json,
                        dataIndex:index,
                    }
                });
                window.open(href, '_blank');
            },
            //项目跳转
            toViewProject(router, json,index) {
                window.localStorage.setItem('router', router);
                this.$store.commit('modify', router);
                const { href } =this.$router.resolve({
                    name: router,
                    query: {
                        key: json,
                        dataIndex:index,
                    }
                });
                window.open(href, '_blank');
            },
            //活动跳转
            toViewActivity(router,json){
                this.$store.commit('modify', router);
                window.localStorage.setItem('router', router);
                const { href } = this.$router.resolve({
                    name: router,
                    query: {
                        key: json
                    },
                });
                window.open(href, '_blank');
            },
            //跳转到发展合作留言
            toViewDevelopmentCooperation(){
                var router = "developmentCooperation";
                this.toView(router)
            },
            //跳转到在线会议
            toOnlineMeeting(){
                var router = "onlineMeeting";
                this.toView(router)
            },
            //跳到我的项目
            toMyProject(){
                this.toView("myFollow");
            },
            //查看项目
            findProject(item,index){
                this.toView('projectPresentationDetails',item.id,index)
            },
            //查看留言
            findLeavMesage(item){
                alert("查看留言")
            },
            initData(){
                //获取用户信息
                getUserInfoStatus().then((result) => {
                    var data =result.data;
                    this.userInfor.userName =data.name;
                    this.userInfor.Email = data.email;
                    if(!this.userInfor.Email){
                        this.userInfor.Email =this.$t('common.noHave');
                    }
                    this.userInfor.tel =  data.newMobile;
                    if(!this.userInfor.tel){
                        this.userInfor.tel =this.$t('common.noHave');
                    }
                    this.mobileStatus=data.userMobileStatus;
                    this.emailStatus=data.userEmailStatus;
                    this.realStatus = data.realStatus;
                });
                //获取对应的项目数据
                this.projectParams.language = this.$i18n.locale.toUpperCase();
                let token =getToken();
                let list = {
                    modelType:"project",
                    language:this.$i18n.locale.toUpperCase(),
                    pageNo:1,
                    pageSize:4,
                }
                getPortalMyFollowMode(list,token).then(res=> {
                    this.myProject = res.data ? res.data.models : [];
                    if(this.myProject && this.myProject.length > 0){
                        this.myProject.forEach(element => {
                            if(element.bannerImg && element.bannerImg instanceof Array && element.bannerImg[0] != ''){
                                var bannerImgs = element.bannerImg;
                                element.bannerImg = bannerImgs[0];
                            }else if(element.bannerImg && element.bannerImg.constructor==String && element.bannerImg !='') {
                                var bannerImgs = element.bannerImg.split(",");
                                element.bannerImg = bannerImgs[0];
                            }else{
                                element.bannerImg = "def/projectdefault.png"
                            }
                        });
                    }
                });
                token =getToken();
                list = {
                    modelType:"activity",
                    language:this.$i18n.locale.toUpperCase(),
                    pageNo:1,
                    pageSize:4,
                }
                getPortalMyFollowMode(list,token).then(res=> {
                    this.myActivity = res.data ? res.data.models : [];
                    if(this.myActivity && this.myActivity.length > 0){
                        this.myActivity.forEach(element => {
                            if(element.bannerImg && element.bannerImg !=''){
                                var bannerImgs =   element.bannerImg.split(",");
                                element.bannerImg = bannerImgs[0];
                            }
                        });
                    }
                });
            },
            getIconUrl(url){
                return require("@/assets/img/userCenter/"+url)
            },
            getPorjectUrl(url){
                if(null == url){
                    url = "api/file/pub//def/projectdefault.png"
                }
                return url;
            }
        }
    }
</script>
<style scoped>
    .tag {
        display: inline-block;
        padding: 3px 10px;
        background: #95bef2;
        border-radius: 12px;
        color: #fff;
        font-size: 12px;
        margin-left: 15px;
    }
    .num1 {
        color: #328cfc;
        font-weight: 700;
    }
    .num2 {
        font-weight: 700;
        color: #d8361d;
    }
    .title {
        height: 50px;
        margin-left: 30px;
        margin-right: 30px;
        border-bottom: 1px solid #ebebeb;
        line-height: 50px;
        font-size: 17px;
        color: #2c5589;
        font-weight: 700;
    }
    .init {
        /* padding:0 30px; */
        height: 450px;
        padding-bottom: 30px;
        width: 100%;

    }
    .init ul {
        text-align: top;
        height: 100%;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content:space-between;
        flex-wrap:wrap;
    }
    .init li {
        width: 430px;
        height: 130px;
        text-align: top;
        margin-bottom: 10px;
    }
    .initLiItem {
        float: left;
        height: 100%;
        width: 230px;
        position: relative;
        display: flex;
        flex-direction: column;

    }
    .initLiItemFirst {
        text-align: center;
        margin-top: 40px;
        font-size: 18px;
        color: #666;
        font-weight: 600;
    }
    /* .initLiItem div, */
    .initLiItem span:hover {
        color: #2c5589;
    }
    #myActivity li{
        float: left;
        width: 300px;
        height: 200px;
        margin-right: -80px;
        background: skyblue;

    }
    #myActivity ul{
        text-align: top;
        margin-top: 20px;
        height: 200px;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content:space-between;
        flex-wrap:nowrap;
    }
    .swiper-container {
        width: 100%;
        height: 200px;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide {
        margin-right: 10px !important;
    }
    .recommend {
        margin-top: 16px;
        /* margin-left: 30px; */
    }

    .recommend li {
        display: inline-block;
        width: 170px;
        /* height: 130px; */
        text-align: center;
        margin-right: 16px;
    }
    .cursor:hover {
        color: red;
    }
</style>