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

<template>
    <div>
        <div class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator="/" style="float: left;margin: 0px ">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.MemberShow')}}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">
                  <span class="cursor" :class="screenIndex==index?'screen1':'screen2'"
                        @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens">
                    &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;
                  </span>
                </el-breadcrumb>
            </div>
            <div style="margin-top: 20px;" v-if="screen1s.item.length > 0 &&  screen2s.item.length > 0">
                <Screen v-bind:screen1="screen1s" :screen2="screen2s" :screen4="screen3s"
                        @screenBack="screenBack"></Screen>
            </div>
            <div style="margin: 20px;color: #666;font-size: 14px;height: 50px;">
                {{$t('common.Total')}}  {{totalCount}} {{$t('common.MemberNumbers')}}
                <el-input v-model="input" :placeholder="$t('common.PleaseEnterMemberName')"
                style="width: 250px;float: right;margin-right: 28px;">
                    <i class="el-icon-search"></i>
                    <el-button slot="append" icon="el-icon-search" style="background: #fff;border-left: 0;margin: -8px -20px;"
                               @click="getData()"></el-button>
                </el-input>
            </div>
            <div style="margin: 20px;color: #666;font-size: 14px;" class="continents">
                <ul>
                    <li class="cursor" style="margin-right: 22px;"
                        @click="toViewDetail('IntroductionPresentationDetails',item)"
                        v-for="(item,index) in initData">
                        {{$i18n.locale=='zh'?item.memberNameZh:item.memberNameEn}}
                    </li>
                </ul>
            </div>
            <div style="width: 100%;position: relative;height: 100px;">
                <el-pagination
                        style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                        background
                        page-size=60
                        layout="prev, pager, next"
                        :total=totalCount
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
            <div style="width: 100%;height: 50px;">
                <el-button type="primary" style="float: right;margin-right: 50px;"
                           @click="toView('IntroductionFundingApplication','')">{{$t('common.IWantToJoinTheMemberShip')}}
                </el-button>
            </div>
            <div>
                <div style="color: #666;font-weight: 700;margin-left: 20px;">{{$t('common.Recommendmembers')}}</div>
                <div class="recommend">
                    <ul>
                        <li v-for="(item,index) in recommends" class="cursor" :key="index">
                            <!--@click="toView('IntroductionPresentationDetails')"  推荐会员暂时为静态展示-->
                            <img :src="getIconUrl(item.img)" alt="" style="width: 100%;height: 150px;">
<!--                            <div style="color: #bcbcbc;font-size: 14px;">{{item.num}}{{$t('common.Browse')}}</div>-->
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import Screen from '@/components/screen'
    import {getDicts} from '@/api/dict'
    import {getMemberInformation} from '@/api/baseContactsInfo'
    import {gateGetUnitViewById} from "@/api/baseUnitView";

    export default {
        name: 'IntroductionMemberInformation',
        components: {Screen},
        data() {
            return {
                input: '',
                enterpriseDetails: '',
                screen1Item: '',
                screen2Item: '',
                totalCount: 0,
                realTimeInfoScreens: [{
                    lable: 'common.AllianceIntroduction',
                    value: 'union'
                }, {
                    lable: 'common.CooperativeUnitIntroduction',
                    value: 'cooperation'
                }, {
                    lable: "common.CustomService",
                    value: 'custom'
                }],
                page: {
                    pageSize: 60,
                    pageNo: 1,
                    continentDict: null,
                    industryDict: null,
                    initialOrderZh: null,
                    memberNameEn: null,
                    memberNameZh:null,
                    language: null,
                },
                screen1s: {
                    value: 'common.Region',
                    item: []
                },
                screen2s: {
                    value:'common.Category',
                    item: [],
                },
                screen3s: {
                    value: 'common.Byletter',
                    item: [
                        {
                            value: null,
                            ifValue: true,
                            label: 'common.All'
                        }, {
                            ifValue: false,
                            value: 'A',
                            label: 'A'
                        }, {
                            ifValue: false,
                            value: 'B',
                            label: 'B'
                        }, {
                            ifValue: false,
                            value: 'C',
                            label: 'C'
                        }, {
                            ifValue: false,
                            value: 'D',
                            label: 'D'
                        }, {
                            ifValue: false,
                            value: 'E',
                            label: 'E'
                        }, {
                            ifValue: false,
                            value: 'F',
                            label: 'F'
                        }, {
                            ifValue: false,
                            value: 'G',
                            label: 'G'
                        }, {
                            ifValue: false,
                            value: 'H',
                            label: 'H'
                        }, {
                            ifValue: false,
                            value: 'I',
                            label: 'I'
                        }, {
                            ifValue: false,
                            value: 'J',
                            label: 'J'
                        }, {
                            ifValue: false,
                            value: 'K',
                            label: 'K'
                        }, {
                            ifValue: false,
                            value: 'L',
                            label: 'L'
                        }, {
                            ifValue: false,
                            value: 'M',
                            label: 'M'
                        }, {
                            ifValue: false,
                            value: 'N',
                            label: 'N'
                        }, {
                            ifValue: false,
                            value: 'O',
                            label: 'O'
                        }, {
                            ifValue: false,
                            value: 'P',
                            label: 'P'
                        }, {
                            ifValue: false,
                            value: 'Q',
                            label: 'Q'
                        }, {
                            ifValue: false,
                            value: 'R',
                            label: 'R'
                        }, {
                            ifValue: false,
                            value: 'S',
                            label: 'S'
                        }, {
                            ifValue: false,
                            value: 'T',
                            label: 'T'
                        }, {
                            ifValue: false,
                            value: 'U',
                            label: 'U'
                        }, {
                            ifValue: false,
                            value: 'V',
                            label: 'V'
                        }, {
                            ifValue: false,
                            value: 'W',
                            label: 'W'
                        }, {
                            ifValue: false,
                            value: 'X',
                            label: 'X'
                        }, {
                            ifValue: false,
                            value: 'Y',
                            label: 'Y'
                        }, {
                            ifValue: false,
                            value: 'Z',
                            label: 'Z'
                        }],
                },
                initData: [],
                recommend: [{
                    img: 'u31492.jpg',
                    num: '2934'
                }, {
                    img: 'u31507.jpg',
                    num: '2934'
                }, {
                    img: 'u31520.jpg',
                    num: '2934'
                }, {
                    img: 'u31535.jpg',
                    num: '2934'
                }, {
                    img: 'u31520.jpg',
                    num: '2934'
                }],
                recommends: [{
                    img: 'beijng.jpg',
                    num: '2934'
                }, {
                    img: 'shandong.jpg',
                    num: '2934'
                }, {
                    img: 'shanghai.jpg',
                    num: '2934'
                }, {
                    img: 'wuhan.jpg',
                    num: '2934'
                }, {
                    img: 'zhejiang.jpg',
                    num: '2934'
                }],
            }
        },
        created() {
            if (this.$route.params.id && !this.$route.params.id.img) {
                this.screen1Item = this.$route.params.id;
            } else {
                this.screen2Item = this.$route.params.id;
            }
            if (this.$route.params.type && !this.$route.params.id.img) {
                this.page.continentDict = this.$route.params.type;
            } else {
                this.page.industryDict = this.$route.params.type;
            }
            this.$nextTick(() => {
                this.getInitData();
                this.getinformation()
            });
        },
        watch: {
            "$i18n.locale"() {
                this.page.language = this.$i18n.locale;
                this.get();
                this.getInitData();
            }
        },
        methods: {
            getInitData() {
                getDicts(this.$i18n.locale == 'zh' ? 'INDUSTRY_DICTS' : 'INDUSTRY_DICTS_EN').then(res => {
                    let both = {
                        value: null,
                        label: this.$i18n.locale == 'zh' ? '全部' : 'All'
                    };
                    this.screen2s.item = res.data[0];
                    this.screen2s.item.unshift(both)
                    this.screen2s.item.forEach(element => {
                        if (element.value == this.screen2Item.value) {
                            element.ifClick = true;
                        }
                    });
                    for(var i = 0; i < this.screen2s.item.length; ) {
                        if(this.screen2s.item[i].label == '其他' || this.screen2s.item[i].label == '个人会员') {
                            this.screen2s.item.splice(i, 1);
                        } else {
                            i++;
                        }
                    };
                });
                getDicts(this.$i18n.locale == 'zh' ? 'CONTINENT_CODE_DICT' : 'CONTINENT_CODE_DICT_EN').then(res => {
                    let both = {
                        value: null,
                        label: this.$i18n.locale == 'zh' ? '全部' : 'All'
                    };
                    this.screen1s.item = res.data[0]
                    this.screen1s.item.unshift(both)
                    this.screen1s.item.forEach(element => {
                        if (element.value == this.screen1Item.value) {
                            element.ifClick = true;
                        }
                    });
                });

            },
            getinformation() {
                this.page.continentDict = this.screen1Item.value;// 大洲
                this.page.language = this.$i18n.locale;// 语言
                this.get()
            },
            get() {
                const that = this;
                getMemberInformation(this.page).then(res => {
                    if (res.data.page) {
                        this.totalCount = res.data.page.totalCount - 0;
                        this.initData = res.data.baseMemberInfos;
                    } else {
                        this.totalCount = 0;
                        this.initData = [];
                    }

                })
            },
            handleCurrentChange(val) {
                this.page.pageNo = val;
                this.get();
            },
            getIconUrl(url) {
                return require("@/assets/img/introductionCooperation/" + url);
            },
            toView(router, json, index, unitId, language) {
                this.$router.push({
                    name: router,
                    query: {
                        id: json,
                        index: index,
                        baseEntityId: unitId,
                        language: language
                    },
                })
            },
            toView2(router, json,){
                this.$router.push({
                    name: router,
                    query: {
                        key: json,
                    },
                })
            },
            toViewDetail(router,json){
                gateGetUnitViewById(json.unitId,this.$i18n.locale.toUpperCase()).then(res => {
                    var data =  res.data;
                    if(data){
                        var baseUnitView = res.data.baseUnitView;
                        if(baseUnitView.showable == '1'){
                            this.$store.commit('modify', 'enterpriseDetails');
                            window.localStorage.setItem('router', 'enterpriseDetails');
                            const { href } = this.$router.resolve({
                                name: 'enterpriseDetails',
                                query: {
                                    key: json.unitId,

                                }
                            });
                            window.open(href, '_blank');
                        }else{
                            if(json.showFlag === 'y'){
                                this.$store.commit('modify', router);
                                window.localStorage.setItem('router', router);
                                let member ={
                                    memberNameZh: json.memberNameZh,
                                    memberNameEn:json.memberNameEn,
                                    unitId:json.unitId,
                                }
                                const { href } = this.$router.resolve({
                                    name: router,
                                    query: {
                                        key: json.id,
                                        member:JSON.stringify(member)
                                    }
                                });
                                window.open(href, '_blank');
                            }else if(baseUnitView.officialWebsitePath){
                                var url = baseUnitView.officialWebsitePath;
                                if(url.indexOf('http') == -1){
                                    url = 'http://' + url
                                }
                                window.open(url,'_blank')
                            }else{
                                return
                            }
                        }
                    }
                });
            },
            getData(){
                this.page.memberNameZh='';
                this.page.memberNameEn='';
                if(this.$i18n.locale === 'zh'){
                    this.page.memberNameZh = this.input
                }else {
                    this.page.memberNameEn= this.input
                }
                getMemberInformation(this.page).then(res => {
                    if (res.data.page) {
                        this.totalCount = res.data.page.totalCount - 0;
                        this.initData = res.data.baseMemberInfos;
                    } else {
                        this.totalCount = 0;
                        this.initData = [];
                    }

                })
            },
            realTimeInfoScreen(i, index) {
                this.toView2('IntroductionMemberProfile', index)
            },
            screenBack(data) {
                this.page.continentDict = data.click1
                this.page.industryDict = data.click2
                if (this.$i18n.locale == 'zh') {
                    this.page.initialOrderZh = data.click4 ? data.click4.toString() : ''
                } else if (this.$i18n.locale == 'en') {
                    this.page.initialOrderEn = data.click4 ? data.click4.toString() : ''
                }
                this.get()
            },
            screen(i) {
                this.index = i
            }
        }
    }
</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;
        height: 20px;
    }

    body {
        margin: 0;
    }

    .continents ul {
        text-align: top;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content: flex-start;
        flex-wrap: wrap;

    }

    .continents ul li {
        border: 1px solid #f1f1f1;
        box-shadow: 5px 5px 5px #f1f1f1;
        margin-bottom: 10px;
        color: #2c558a;
        border-radius: 5px;
        width: 207px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }

    .continents ul li:hover {
        border: 1px solid #e36844;
    }

    .continents ul li:active {
        background: #e36844;
        color: #fff;
    }

    .userCenterMyActivity >>> .el-pagination .el-pager li,
    .userCenterMyActivity >>> .el-pagination .btn-next,
    .userCenterMyActivity >>> .el-pagination .btn-prev {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .recommend {
        margin-top: 15px;
        margin-left: 10px;
    }

    .recommend li {
        display: inline-block;
        width: 212px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
    }

    .screen1 {
        background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
        border-radius: 20px 20px 20px 20px;
        padding: 8px 12px;
        color: #F0F3F8;
        margin-left: 10px;
    }
    .screen2 {
        font-size: 14px;
        background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
        border-radius: 20px;
        padding: 8px 12px;
        color: #165099;
        margin-left: 10px;
    }

</style>