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

<template>
    <div>
        <div style="width: 100%;height: 342px;margin-top: 20px;position: relative;">
            <div><img src="../../assets/img/introductionCooperation/exclusive/zh_en.png" alt="" style="width: 100%;"></div>
               <div style="position: relative;   left: 487px; top: -215px">
                    <span :style="this.$i18n.locale== 'zh' ? 'font-size: 40px;font-weight: 700;color: white;position: relative;left: 32px;top: -14px;':'font-size: 40px;font-weight: 700;color: white;position: relative;left:-56px;top: -14px;'">{{$t('common.TitleTop')}}</span>
                    <br/>
                    <span :style="this.$i18n.locale== 'zh' ? 'font-size: 20px;color: white;position:relative; top: 4px;  letter-spacing: 5px;left: -42px;':'font-size: 20px;color: white; position: relative;top: 4px;left: -176px;'">{{$t('common.TitleBottom')}}</span>
               </div>

        </div>
        <div style="width: 80%;margin: auto;margin-top: 30px;color: #333;">
            <span>{{$t('common.CooperationUnitIntroduction')}}</span>
        </div>
        <div style="margin:50px 30px 0 30px ;height: 50px;line-height: 50px;" class="box1">
            <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                 style="height: 20px;vertical-align: middle;">
            <span style="color: #3a6295;font-weight: 700;margin-left: 5px;">{{$t('common.AgreementMoUPartners')}}</span>
            <!-- 搜索合作单位 -->
            <span style="float: right;width: 200px; margin-right: 550px;">
                <!-- suffix-icon="el-icon-search" -->
                <el-input
                        style="width: 350px;"
                        
                        v-model="searchName"
                        :placeholder="$t('common.Enterthenameofthepartner')"
                >
                  <el-button class="cursor" slot="append" type="primary"
                             @click="getDatas">{{$t('common.Search')}}</el-button>
                </el-input>
                
              </span>
        </div>
        <div style="margin: 20px;color: #666;font-size: 14px;" class="continents">
            <ul>
                <li class="cursor" v-for="(item,index) in initData"
                    @click="toViewDetail('IntroductionPartnerInformationDetails',item)">
                    <img v-if="memberUnits[item.unitId]"src="@/assets/img/introductionCooperation/profile.png" alt="" style="vertical-align: middle;">
                    <span style="margin-left: 9px">{{$i18n.locale === 'zh'?item.unitZhName : item.unitEnName}}</span>
                </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
                    layout="prev, pager, next"
                    page-size=15
                    :total=total-0
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <div style="margin:25px 30px 0 30px ;height: 50px;line-height: 50px;" class="box1">
            <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                 style="height: 20px;vertical-align: middle;">
            <span style="color: #3a6295;font-weight: 700;margin-left: 5px;">{{$t('common.Recommendedpartner')}}</span>
        </div>
        <div class="recommended">
            <div class="cursor" style="width: 22%;height: 180px;display: inline-block;color: #000;" v-for="i in recommendList" @click="toViewDetail('IntroductionPartnerInformationDetails',i)">
                <img :src="'api/file/pub/'+ i.photo" alt=""
                     @click="toViewDetail('IntroductionPartnerInformationDetails',item)"
                     style="width: 100%;height: 150px">
                <span>{{$i18n.locale=='zh'?i.unitZhName:i.unitEnName}}</span>
<!--                <span><span>110</span>{{$t('common.visits')}}</span>-->
            </div>
        </div>
    </div>
</template>

<script>
    import {getBaseCooperationUnits} from "@/api/cooperation/baseCooperationUnit";
    import {gateGetUnitViewById} from "@/api/baseUnitView";



    export default {
        name: 'IntroductionPartnerInformation',
        data() {
            return {
                enterpriseDetails: this.$route.params.key,
                currentPage:1,
                params: {
                    pageNo: 1,
                    pageSize: 15,
                    language: '',
                    unitZhName: '',
                    unitEnName: ''
                },
                memberUnits:{},
                page: {},
                searchName: '',
                total: 0,
                initData: [],
                selectData: [],
                recommendList:[],
            }
        },
        created() {
            // this.getInitData();
            // this.getinformation()
        },
        watch: {
            "$i18n.locale"() {
                this.get();
            }
        },
        mounted() {
            this.get();
        },
        methods: {
            get() {
                this.params.language = this.$i18n.locale.toUpperCase();
                getBaseCooperationUnits(this.params).then(res => {
                    if (res.data) {
                        this.total = res.data.page.totalCount;
                        this.initData = res.data.baseCooperationUnits;
                        this.memberUnits = res.data.memberUnits
                        this.initData.forEach(element => {
                            if(!element.photo){
                                element.photo = "/def/enterpriseDefault.png"
                            }
                        });
                    }
                })
                var params={
                    pageNo: 1,
                    pageSize: 4,
                    language: this.$i18n.locale.toUpperCase(),
                    recommendFlag:'y'
                }
                getBaseCooperationUnits(params).then(res => {
                    if (res.data) {
                        this.recommendList = res.data.baseCooperationUnits||[];
                        this.recommendList.forEach(element=>{
                            if(!element.photo){
                                element.photo = "/def/cooperationDef.png"
                            }
                        })
                    }
                })
            },
            getDatas() {
                const that = this
                that.selectData = []
                this.params.unitZhName = '';
                this.params.unitEnName = '';
                this.params.language = this.$i18n.locale;
                this.params.pageNo = 1;
                if (this.$i18n.locale === 'zh') {
                    this.params.unitZhName = this.searchName;
                } else {
                    this.params.unitEnName = this.searchName
                }
                // this.params.pageNo=1
                getBaseCooperationUnits(this.params).then(res => {
                    console.log(res.data)
                    if (Object.keys(res.data).length !==0) {
                        this.total = res.data.page.totalCount;
                        this.currentPage=1;
                        this.initData = res.data.baseCooperationUnits;
                        this.memberUnits = res.data.memberUnits
                        // data_array = data_array.filter(function (item) {
                        //     console.log(item.unitZhName,this.searchName);


                            // if (item.unitZhName.toUpperCase().indexOf(this.searchName) !== -1) {
                            //     that.selectData.push(item)
                            //     console.log(",,,,,,,,",that.selectData)
                            // } else {
                            //     console.log('不一致')
                            // }
                        // })
                        // if (this.params.pageNo < Math.ceil(this.total / this.params.pageSize)) {
                        //     this.params.pageNo += 1;
                        //     this.getDatas(this.searchName);
                        // } else {
                        //     that.initData = that.selectData;
                        // }
                    } else {
                        this.initData = [];
                        this.total = 0;
                        console.log('查询结束')
                        return;
                    }

                })
            },
            getIconUrl(url) {
                return require("@/assets/img/introductionCooperation/" + url);
            },
            getIconUrl2(url) {
                return require("@/assets/img/introductionCooperation/industry/" + url);
            },
            toView(router, json, index) {
                this.$router.push({
                        name: router,
                        query: {
                            id: json.unitId,
                            businessId: json.id,
                            index: index
                        },
                    }
                )
            },
            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(data.isMember != undefined ){
                                let member ={
                                    memberNameZh: data.isMember.memberNameZh,
                                    memberNameEn:data.isMember.memberNameEn,
                                    unitId:data.isMember.unitId,
                                }
                                this.$store.commit('modify', 'IntroductionPresentationDetails');
                                window.localStorage.setItem('router', 'IntroductionPresentationDetails');
                                const { href } = this.$router.resolve({
                                    name: 'IntroductionPresentationDetails',
                                    query: {
                                        key: data.isMember.id,
                                        member: JSON.stringify(member)
                                    }
                                });
                                window.open(href, '_blank');
                            }else{
                                if(json.showFlag === 'y'){
                                    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(baseUnitView.officialWebsitePath){
                                    var url = baseUnitView.officialWebsitePath;
                                    if(url.indexOf('http') == -1){
                                        url = 'http://' + url
                                    }
                                    window.open(url,'_blank')
                                }else{
                                    return
                                }

                            }
                        }
                    }
                })
            },
            handleCurrentChange(val) {
                this.params.pageNo = val;
                this.get();
            },
            screenBack(data) {
                console.log(data, 'screenBackscreenBackscreenBackscreenBack')
            },
            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;
    }

    body {
        margin: 0;
    }

    .box1 >>> .el-input__inner {
        height: 40px !important;
        border-radius: 22px 0 0 22px;
    }

    .box1 >>> .el-input-group__prepend {
        border-radius: 22px 0 0 22px;
        background: #fff;
    }

    .box1 >>> .el-input-group__prepend {
        background-color: #fff;
        color: #000;
    }

    .box1 >>> .el-input-group {
        border-radius: 20px;
    }

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

    }

    .continents ul li {
        border: 1px solid #f1f1f1;
        display: inline-block;
        box-shadow: 5px 5px 5px #f1f1f1;
        margin-bottom: 10px;
        color: #5878a2;
        border-radius: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 364px;
        margin-right: 10px;
        height: 35px;
        line-height: 35px;
        text-align: left;
        padding-left: 10px;
    }

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

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

    .recommended {
        width: 95%;
        height: 180px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        overflow: hidden;
        margin-bottom: 30px;
        padding: 0 30px;
        text-align: center;
    }

    .box1 >>> .el-input-group__append {
        border-radius: 0 22px 22px 0;
        background-color: #fff;
    }
</style>