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

<template>
    <div>
        <div class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <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 :to="{ path: 'IntroductionMemberProfile?key=cooperation'}">{{$t('common.CooperativeUnitIntroduction')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{initData.unitName}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="width: 100%;height:432px;margin-top:15px;">
                <div class="swipers">
                    <div class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in img">
                                <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
                            </div>
                        </div>
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                    </div>
                    <div class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in img">
                                <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
                            </div>
                        </div>
                    </div>
                </div>     
                <div class="unitDetails">
                <h3 style="font-size: 18px;color: #2c558a;margin-top: 30px;">{{initData.unitName}}</h3>
                <div style="font-size: 15px;color:#95949c;line-height: 35px;">
                        <i class="el-icon-location-outline"></i>
                    <span> {{$t('common.place')}}：<span>{{countryDictsMap[initData.unitCountryDict]}}{{initData.unitRegion?'-'+initData.unitRegion:''}}</span></span>
                </div>
                <div style="font-size: 15px;color:#95949c;line-height: 35px;">
                        <i class="fa fa-star-o"></i>
                        <span> {{$t('common.DateOfEstablishment')}}：<span>{{initData.setUpDate}}</span></span>
                    </div>
                    <div style="font-size: 15px;color:#95949c;line-height: 35px;">
                        <i class="el-icon-office-building"></i>
                        <span> {{$t('common.WebsiteForDetails')}}：<span style="font-weight: 400;color: #1890FF;">{{initData.officialWebsitePath}}</span></span>
                    </div>
                    <div>
                        <el-tag type="danger">{{$t('common.CooperationUnit')}}</el-tag>
                    </div>
                    <div style="line-height: 35px;">
                        <div style="color: #666;"> {{$t('common.Introduction')}}： </div>
                        <div class="plate" style="line-height: 24px; color: rgb(51, 51, 51);
                        font-size: 14px;  -webkit-box-orient: vertical;
                        position:relative;
                        line-height:1.4em;
                        overflow: hidden;
                        height:6.5em;" @click="dialogVisibleChange">{{initData.projectPerformance}}</div>
                    </div>
                </div>
            </div>
            <!-- 背景-->
            <div class="details" v-for="(item,index) in unitList" >
                <div>
                    <div style="height: 50px;line-height: 50px;display:inline-block">
                            <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                            <span style="color: #666666;font-weight: 700;margin-left: 5px;font-size: 18px;">{{item.title}}</span>                           
                        </div>
                        <div style="width:90%;height:1px;background:#eaeaea;display:inline-block;vertical-align:middle"></div>
                </div>              
                    <div style="padding-top: 20px;display: flex;">                   
                        <div style="width:72%;float:left" :style="item.pictureUrl?'width:72%':'width:100%'">                        
                            <p style="font-size: 16px;font-weight: 400;line-height: 28px;text-indent: 2em;" v-html="item.content"></p>
                        </div>
                        <img v-if="item.pictureUrl && item.pictureUrl!=='M'  " alt="" :src="'/api/file/pub/' + item.pictureUrl" class="img-responsive" 
                        :style="item.picturePosition=='L'?'float: left;':'float: right;'" style="width: 25%;height: 150px;margin-left: 34px;margin-bottom: 20px;float: right;"/>
                    </div>   
            </div>
            <div style="width: 100%;height: 320px;border-bottom: 1px solid #ccc;" v-if="cooperationUnitDynamicList[0]">
                <div class="enterprise_style">
                    <span class="enterprise_style_span" style="margin-left: 34px;text-align: left;">
                        {{$t('common.CooperativeUnitDynamics')}}
                    </span>
                </div>
                <div v-if="imgList.length > 0" style="float: left;;margin-top: 15px;margin-left: 100px;width: 400px;height: 230px;">
                    <img :src="'/api/file/pub/' + imgList[0]" alt="" style="width: 100%;height: 200px">
                </div>
                <div style="float: left;margin-top: 15px;" :style="imgList.length > 0?'width: 620px;margin-left: 20px;':'width: 1020px;margin-left: 100px;'" class="enterprise_style_product">
                    <tr v-for="(item,index) in cooperationUnitDynamicList" v-if="index<5" class="cursor" @click="viewChange('realTimeInfoItemdetails',item.baseEntityId)">
                        <td style="float: left;width: 500px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</td>
                        <td style="float: right;">{{formatDate(item.publishDate)}}</td>
                        <td style="clear:both"></td>
                    </tr>
                </div>
            </div>
        </div>
        <el-dialog
            :title="$t('common.InformationDetails')"
            :visible.sync="dialogVisible"
            width="30%">
            <span style="line-height: 29px;font-size: 18px;" v-html="initData.unitIntrodution"></span>
        </el-dialog>
    </div>
</template>
<script>
    import Base from "@/views/base/Base";
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
    import Clipboard from "clipboard";
    import { getBaseCooperationUnits,getInformationList,memberDynamicInfos} from "@/api/cooperation/baseCooperationUnit";
    import {getViewByEntityId} from "@/api/baseUnitView";
    import {formatDate} from "@/utils/formatUtils";
    import {getDicts} from "@/api/dict";
    export default {
        name:'IntroductionPartnerInformationDetails',
        extends: Base,
        data(){
            return {
                initData:{},
                dialogVisible:false,
                cooperationUnitDynamicList:[],
                unitList:[],
                params: {
                    pageNo: 1,
                    pageSize: 6,
                    language: "",  
                    businessType:"introduction_to_the_cooperative_unit",
                },
                countryDicts:[],
                imgList:[],
                img:[],
                baseCooprationId:this.$route.query.key,
                baseCooperation:{},
            };
        },
        watch: {
            "$i18n.locale"() {
                this.getUnitList();
                this.getCountry();
            }
        },
        updated(){
            this.Swiper();
        },
        mounted() {
            this.getUnitList();
            this.getCountry();
        },
        computed:{
            countryDictsMap() {
                return this.countryDicts.array2Obj('value', 'label');
            },
        },
        methods:{
            getCountry(){
                getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en').then(res=>{
                    this.countryDicts=res.data[0];
                })
            },
            dialogVisibleChange(){
                this.dialogVisible=true;
            },
            getUnitList() {
                if(this.baseCooprationId != undefined){
                    getBaseCooperationUnits({id:this.baseCooprationId}).then(result=>{
                        var data = result.data;
                        if(data){
                            this.baseCooperation = data.baseCooperationUnits[0]||{};
                            let language = this.$i18n.locale.toUpperCase();
                            let businessId = this.baseCooperation.unitId;
                            getViewByEntityId(businessId,language).then(res=>{
                                const data = res.data ;
                                if(data){
                                    this.initData = data[0] ;
                                    this.initData.setUpDate = formatDate(this.initData.setUpDate,'YYYY')
                                }
                            })
                        }
                    })
                }
                var params={
                    language: this.$i18n.locale.toUpperCase(),
                    businessType:"introduction_to_the_cooperative_unit",
                    businessId: this.baseCooprationId
                }
                getInformationList(params).then((res) => {
                    this.img = [];
                    if(res.data){
                        this.unitList = res.data['1'];
                        if(null != this.unitList){
                            this.unitList.forEach(element=>{
                                if(element.pictureUrl){
                                    this.img.push(element.pictureUrl);
                                }
                            })
                        }
                    }
                    this.imgList=[];
                    if(this.img.length==0){
                        this.img.push("/def/cooperationDef.png");
                    }
                    if(this.imgList.length==0){
                        this.imgList.push("/def/cooperationDef.png");
                    }
                });
                var params={
                    language: this.$i18n.locale.toUpperCase(),
                    objectId: this.$route.query.key,
                    pageNo: 1,
                    pageSize: 5,
                }
                memberDynamicInfos(params).then((result) => {
                    var data = result.data;
                    if(data){
                        this.cooperationUnitDynamicList = data.memberDynamicInfos ||[];
                    }
                    this.imgList = [];
                    this.cooperationUnitDynamicList.forEach(memberDynamic=>{
                        if(memberDynamic.pictureUrl){
                            this.imgList.push(memberDynamic.pictureUrl);
                        }
                    })
                });

            },
            viewChange(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');
            },
            Swiper() {
                var galleryThumbs = new Swiper('.gallery-thumbs', {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesVisibility: true,
                    watchSlidesProgress: true,
                    autoplay: {//自动播放
                        delay: 4000,
                        disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
                    },
                });
                
                var galleryTop = new Swiper('.gallery-top', {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    autoplay: {//自动播放
                        delay: 4000,
                        disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
                    },
                    thumbs: {
                        swiper: galleryThumbs
                    }
                });
            }, 
            toView(router,json){
                //  console.log(index)
                this.$router.push({
                    name:router,
                    params:{
                    id:json,
                   
                    },

                })
            },

        }
    }
  </script>

  <style scoped>
      .box {
        margin-top: 10px;
        background: #fff;
        padding: 20px 0;
    }
    .unitDetails{
        width: 48%;
        height: 100%;
        float: right;
        display: inline-block;
        padding-left: 34px;
        border: 1px solid #CDF0FD;
        border-left: none;
        background: url(../../assets/img/introductionCooperation/detailsbg.png) no-repeat;
        background-position: right;
    }
    .crumbs {
        margin-left :20px;
    }
    .comUnit{
        width:100px;
        height:38px;
        border:1px solid #c2e5ff;
        background:#e5f4ff;
        color: #35a8ff;
        margin-top:16px;
        text-align: center;
        line-height: 40px;
    }
    .comUnit1{
        width:160px;
        height:38px;
        border:1px solid #c2e5ff;
        background:#e5f4ff;
        color: #35a8ff;
        margin-top:16px;
        text-align: center;
        line-height: 40px;
    }
    .details{
        width: 95%;
        padding: 0 25px;
        color: #666666; 
        margin-top: 20px;
    }
    .dynamic{
        width: 95%;
        height: 274px;
        margin: 30px 0 30px 20px;
    }
    .news{
        width: 65%;
        padding-left: 20px;
        height: 232px;
        float: left;
    }
    .news>ul{
        height: 100%;
    }
    .news>ul>li:nth-child(1){
        border-top: 1px dotted #dadada;
    }
    .news>ul>li{
        height: 20%;
        border-bottom: 1px dotted #dadada;
        line-height: 45px;
    }
    .news>ul>li>span{
       float: right;
    }
    .swipers {
        position: absolute;
        top: 52px;
        left: 30px;
        width: 550px;
        height: 439px;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
    }
    .el-dialog__body{
        padding: 0px 20px 10px;
        word-break:normal;
    }
    .enterprise_style {
        line-height: 50px;
        color: #6C819D;
        padding-left: 30px;
        font-size: 18px;
        font-weight: 700;
        margin-top: 5px;
    }
    .enterprise_style_span {
        display: inline-block;
        text-align: center;
        height: 100%;
        border-bottom: 2px solid #6699ff;
    }
    .enterprise_style_product tr {
        line-height: 30px;
        width: 100%;
        display: inline-block;
        border-bottom: 1px dashed #ccc;
        font-size: 14px;
        color: #6C819D;
        margin-bottom: 5px;
    }
  </style>