dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyFollow.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
        <div style="height: 60px;line-height: 60px;padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
            {{$t('common.MyAttention')}}
        </div>
        <div v-if="!ProjectType">
            <ul style="margin:30px;width: 90%;">
                <img v-if="this.$i18n.locale.toUpperCase()=='ZH'" src="@/assets/img/noData.png" alt="" style="width: 100%;height: 100%;">
                <img v-if="this.$i18n.locale.toUpperCase()=='EN'" src="@/assets/img/noDataEn.png" alt="" style="width: 100%;height: 100%;">
            </ul>
        </div>
        <div style="min-height: 60px;line-height: 60px;margin-left: 30px;margin-right: 30px; " v-else>
            <span v-for="(item,index) in ProjectType" @click="getData(item,index)" :class="index==jsonType?'jsonType1 cursor':'jsonType2 cursor'">
                {{$t(item.modelName)}}（{{modelTypeNumMap[item.modelName]}}）
            </span>
            <!-- <el-input :placeholder="$t('common.keywordSearch')" v-model="keyWord" style="float: right;margin-top: 10px;">
                <template slot="append"><i class="el-icon-search" @click="keyWordSearch()"></i></template>
              </el-input> -->
        </div>
        <div style="margin-left: 30px;margin-right: 30px;margin-top: 10px; " class="myActivity" >
            <div>
                <ul>
                    <li class="myActivityLi"  v-for="(item,index) in tableData " :key="index">
                        <img @click="toView('',item,index)"
                             :src="'api/file/pub/'+ item.bannerImg" alt
                             style="width: 100%;height: 131px;cursor: pointer;"/>
                        <div
                                style="color: #bcbcbc;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"

                        >{{item.followName}}
                        </div>
                    </li>
                    <li class="myActivityLi"  v-if="initDataOther.length!=0" :key="'other'+index" v-for="(item,index) in initDataOther "  >
                    </li>
                </ul>
            </div>
            <!--            <div style="width: 100%;height: 160px;">-->
            <!--                <div class="recommend">-->
            <!--                    <ul>-->
            <!--                        <li v-for="(item,index) in tableData">-->
            <!--                            &lt;!&ndash; <img @click="toViewChange(item.projectId,index)" :src="'api/file/pub/' + item.bannerList[0]" alt style="width: 100%;height: 115px;cursor: pointer;" /> &ndash;&gt;-->
            <!--                            <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%;position: relative;height: 100px;">
            <el-pagination
                    style="margin-top: 40px;height: 80px;position: absolute;left: 50%;top: 0;transform: translateX(-50%);"
                    background
                    layout="prev, pager, next"
                    page-size="8"
                    :total=total  @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {followModelNumByUser,getPortalMyFollowMode} from "@/api/userCenter/myFollow";
    import { saveFollowModelLanguage } from "@/api/operation/basePortalModelFollowInfo";
    import {getToken} from "@/utils/auth";
    import Base from "@/views/base/Base";
    export default {
        name: 'userCenterMyFollow',
        extends: Base,
        data () {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                jsonType:0,
                ProjectType:[],
                modelTypeNumMap:{},
                tableData: [],
                userId:'',
                toDate:Date.parse(new Date()),
                total:1,
                modelType:'',
                params: {
                    pageNo: 1,
                    pageSize: "8",
                    modelType: "project",
                    language:""
                },
                initDataOther:[]
            }
        },
        mounted(){
            let user = window.localStorage.getItem('user'); 
            var users = JSON.parse(user);
            this.userId = users.userId;
            this.getFollowNum();// 获取用户关注数量

        },
        watch:{
            '$i18n.locale'(){
                this.getFollowNum();
            }
        },
        methods:{
            toView(router,json,index){
                console.log(json)
                if('已删除' == json.followName||'Deleted' == json.followName){
                    this.shareChange(json.id);
                    return;
                }
                if(this.params.modelType=='project'){
                    router='projectPresentationDetails'
                    window.localStorage.setItem('router', router);
                    this.$store.commit('modify', router);
                    const { href } =this.$router.resolve({
                        name: router,
                        query: {
                            key: json.id,
                            dataIndex:index,
                        }
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='activity'){
                    router = 'cooperationExchangeListDetails'
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    const { href } = this.$router.resolve({
                        name: router,
                        query: {
                            key: json.id
                        },
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='country'){
                    router = 'countryNationalSpace'
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    const { href } = this.$router.resolve({
                        name: 'countryNationalSpace',
                        query: {
                            key: json.id
                        }
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='enterprise'){
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    const { href } = this.$router.resolve({
                        name: 'enterpriseDetails',
                        query: {
                            key: json.id
                        }
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='researchResources'){
                    router = 'resourceSharingResourceDetails'
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    let params = {
                            entityId:json.entityId,
                        }
                    const { href } = this.$router.resolve({
                        name: 'resourceSharingResourceDetails',
                        query: {
                            key : JSON.stringify(json)
                        }
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='researchResult'){
                    router = 'resourceSharingDetails'
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    let params = {
                            entityId:json.entityId,
                        }
                    const { href } = this.$router.resolve({
                        name: 'resourceSharingDetails',
                        query: {
                            key : JSON.stringify(json)
                        }
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='financialInstitution'){
                    router = 'FinancialServicesDetails'
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    let params = {
                        key:json.id,
                    }
                    const { href } = this.$router.resolve({
                        name: 'FinancialServicesDetails',
                        query: {
                            key : json.id
                        }
                    });
                    window.open(href, '_blank');
                }else if(this.params.modelType=='investmentGuidelines'){
                    router = 'FinancialServicesGuideDetails'
                    this.$store.commit('modify', router);
                    window.localStorage.setItem('router', router);
                    let params = {
                        key:json.id,
                    }
                    const { href } = this.$router.resolve({
                        name: 'FinancialServicesGuideDetails',
                        query: {
                            key : json.id
                        }
                    });
                    window.open(href, '_blank');
                }
            },
            getFollowNum(){
                let params={
                    // userId:this.userId,
                    language:this.$i18n.locale.toUpperCase()
                };
                let token =getToken();
                followModelNumByUser(params,token).then(res=>{
                    this.ProjectType=res.data.modelTypeMap;
                    this.modelTypeNumMap=res.data.modelTypeNumMap;
                    this.modelType=res.data.modelTypeMap[0].modelType
                    this.getList(this.userId,res.data.modelTypeMap[0].modelType);
                    
                })
            },
            getList(id,type){
                if(type){
                    this.params.modelType = type;
                }
                this.params.language=this.$i18n.locale.toUpperCase();
                let token =getToken();
                let that = this;
                getPortalMyFollowMode(this.params,token).then(res=>{
                    that.tableData=res.data?res.data.models:[];
                    that.tableData.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 = '';
                        }
                    });
                    if (that.params.modelType == "project") {
                        that.tableData.forEach((i) => {
                            i.status = "project"
                            if(!i.bannerImg || i.bannerImg ==''){
                                i.bannerImg = "def/projectdefault.png"
                            }
                        })
                    }
                    if (that.params.modelType == "enterprise") {
                        that.tableData.forEach((i) => {
                            i.status = "enterprise"
                            if(!i.bannerImg || i.bannerImg ==''){
                                i.bannerImg = "def/enterpriseDefault.png"
                            }
                        })
                    }
                    if (that.params.modelType == "country") {
                        that.tableData.forEach((i) => {
                            i.status = "country"
                            if(!i.bannerImg || i.bannerImg ==''){
                                i.bannerImg = "def/projectdefault.png"
                            }
                        })
                    }
                    if (that.params.modelType == "activity") {
                        that.tableData.forEach((i) => {
                            i.status = "activity"
                            if(!i.bannerImg || i.bannerImg ==''){
                                i.bannerImg = "def/projectdefault.png"
                            }
                        })
                    }
                    if (that.params.modelType == "researchResources") {
                        that.tableData.forEach((i) => {
                            i.status = "researchResources"
                            if(!i.bannerImg || i.bannerImg ==''){
                                i.bannerImg = "def/projectdefault.png"
                            }
                        })
                    }
                    if (that.params.modelType == "researchResult") {
                        that.tableData.forEach((i) => {
                            i.status = "researchResult"
                            if(!i.bannerImg || i.bannerImg ==''){
                                i.bannerImg = "def/projectdefault.png"
                            }
                        })
                    }
                    that.total=res.data?res.data.page.totalCount-0:0;
                    that.initDataOther = [];
                    var initDataNum = that.tableData.length%4
                    initDataNum = 4-initDataNum;
                    if(initDataNum!=4){
                        for (var i=0;i<(initDataNum);i++){
                            that.initDataOther[i] = {}
                        }
                    }
                })
            },
            shareChange(id) {
                    this.saveFollowModelDo("unfollow",id);
            },
            saveFollowModelDo: function(followType,projectId){
                let user = window.localStorage.getItem('user');
                if (!user) {
                    this.$message.warning("请先登录");
                } else {
                    let token = "" + getToken();
                    this.resetToken();
                    // 接口逻辑
                    this.submitHandler(token => {
                        saveFollowModelLanguage(this.$i18n.locale.toUpperCase(),projectId,this.modelType, this.userId,followType,token).then(result => {
                            // console.log(result);
                            this.$message({
                                message: result.data,
                                type: 'success'
                            });
                            this.getList();
                        }).catch(error => {
                            // 此处你的业务代码

                        });
                    });
                }
            },
            // 获取数据
            getData(json,index){
                //json为搜索标识
                this.jsonType=index;
                this.modelType=json.modelType;
                this.getList(this.userId,json.modelType);

            },
            // 撤回
            withdraw(index,rows) {
                console.log(index, rows)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.params.pageNo=val;
                this.getList()
            },
        }
    }
</script>
<style scoped>

    .el-input {
        width: 200px ;
    }
    .el-form-item__content,.el-select {
        width: 200px !important;
    }
    .el-table thead {
        background: #eee;
    }
    .userCenterMyActivity >>> .el-pagination .el-pager li,
    .userCenterMyActivity >>> .el-pagination .btn-next,
    .userCenterMyActivity >>> .el-pagination .btn-prev{
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .userCenterMyActivity >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0050d8;
    }
    .margin_left {
        margin-left: 5px;
    }
    .myActivityLi {
        width: 220px;
        float: left;
        /*height: 153px;*/
        margin-bottom: 20px;
        /*border: 1px solid rgba(228, 228, 228, 1);*/
        /*box-shadow: rgba(228, 228, 228, 1);*/
    }
    .myActivityLi .title {
        color: #666;
        font-weight: 700;
        margin-left: 10px;
        margin-top: 8px;
    }
    .myActivityLi_data {
        color: #666;
        font-size: 12px;
        margin-top: 5px;
        margin-left: 10px;
    }
    .myActivity ul {
        text-align: top;
        height: 100%;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content:space-between;
        flex-wrap:wrap;
    }
    .el-tag {
        height: 22px;
        line-height: 22px;
        margin-right: 5px;
    }
    .jsonType1 {
        font-size: 14px;
        margin-right: 10px;
        color: #0050d8;
    }
    .jsonType2 {
        font-size: 14px;
        margin-right: 10px;
    }
    .recommend {
        width: 456px;
        float: left;
        height: 153px;
        margin-bottom: 20px;
        border: 1px solid rgba(228, 228, 228, 1);
        box-shadow: rgba(228, 228, 228, 1);
        /* margin-left: 30px; */
    }

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