dev/dcp-web-gate/src_old/views/introductionCooperation/IntroductionLeagueMemberDetails.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 @click="toView('IntroductionMemberProfile',union)" >{{$t('common.AllianceShow')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{initData.unitName}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="width: 100%;height: 510px;position: relative;border-bottom: 1px solid #ccc;">
                <div class="swipers">
                    <div class="swiper-container gallery-top">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in img" v-if="img.length>0">
                                <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;" >
                                <img :src="'api/file/pub/' + '/def/def1.png'" alt=""  style="width: 100%;height: 100%;">
                            </div>
                            <div class="swiper-slide"  v-if="img.length <= 0">
                                <img :src="'api/file/pub/' + '/def/def1.png'" 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 class="swiper-slide" v-if="img.length <= 0">
                                <img :src="'api/file/pub/' + '/def/def1.png'" alt="" style="width: 100%;height: 100%;">
                            </div>
                        </div>
                    </div>
                    <div style="float: right;color: #666;font-size: 14px;margin-right: 20px;">
                    </div>
                </div>
                <div class="details">
                    <div style="width: 100%; font-size: 15px;color: #95949c;" >
                        <div>
                            <span class="initData_label cursor" style="color: #2c558a;width: 100%;">{{initData.unitName}}</span>
                        </div>
                        <div style="line-height: 35px;">
                            <div>
                                <span>
                                    <i class="el-icon-location-outline"></i>
                                    {{$t('common.place')}}：{{countryDictsMap[initData.unitCountryDict]}}{{initData.unitRegion?'-'+initData.unitRegion:''}}
                                </span>
                            </div>
                            <div>
                                <span>
                                    <i class="fa fa-star-o"></i>
                                    {{$t('common.DateOfEstablishment')}}：{{initData.setUpDate}}
                                </span>
                            </div>
                            <div>
                                <span>
                                    <i class="el-icon-time"></i>
                                    {{$t('common.LegalRepresentative')}}：{{initData.corporateName}}
                                </span>
                            </div>
                            <div>

                                <span><i class="el-icon-office-building"></i> {{$t('common.OfficialWebsite')}}：
                                    <a href="javaScript:;" class="a-style" @click="toOffcial(initData.officialWebsitePath)">
                                    {{initData.officialWebsitePath?initData.officialWebsitePath:''}}
                                </a></span>
                            </div>
                           
                           <div v-if="initData.unitLabel" >
                               <el-tag style="margin-right: 10px;" v-for="item in initData.unitLabel">{{item}}</el-tag>
                           </div>
                           <div>
                               <div style="color: #666;">{{$t('common.intro')}}：</div>
                               <div style="height: 120px; line-height: 24px; color: rgb(51, 51, 51); font-size: 14px;
                                 -webkit-box-orient: vertical;
                                position:relative;
                                line-height:1.4em;
                                overflow: hidden;
                                height:7em;" class="plate" @click="dialogVisibleChange">
                               {{initData.projectPerformance}}
                               </div>
                           </div>
                        </div>

                    </div>
                </div>
            </div>
            <div style="margin: 0 30px" v-for="(item,index) in history">
                <div class="enterprise_style">
                    <span class="enterprise_style_span" style="display: inline-block;">{{item.title}}</span>
                </div>
                <div :style="$i18n.locale=='zh'?'text-indent: 30px;':''" style="float: left;margin-top: 15px;width: 773px;margin-left: 30px;font-size: 16px;" v-html="item.contentHtml">

                </div>
                <div style="margin-left: 20px;width: 225px;height: 140px;padding-right:55px;padding-top:17px;float: right;"
                     v-if="item.pictureUrl" alt="" >
                    <img :src="'/api/file/pub/' + item.pictureUrl" alt="" style="width: 100%;height: 100%;">
                </div>
                <div style="clear:both"></div>
            </div>
            <div style="clear: both;"></div>
            <div style="width: 100%;height: 320px;border-bottom: 1px solid #ccc;" v-if="leagueMemberDynamicList[0]">
                <div class="enterprise_style">
                    <span class="enterprise_style_span" style="margin-left: 34px;text-align: left;">
                        {{$t('common.AllianceMemberDynamics')}}
                    </span>
                </div>
                <div v-if="leagueMemberDynamicPics.length > 0" style="float: left;;margin-top: 15px;margin-left: 100px;width: 400px;height: 230px;">
                    <img :src="'/api/file/pub/' + leagueMemberDynamicPics[0]" alt="" style="width: 100%;height: 200px">
                </div>
                <div style="float: left;margin-top: 15px;" :style="leagueMemberDynamicPics.length > 0?'width: 620px;margin-left: 20px;':'width: 1020px;margin-left: 100px;'" class="enterprise_style_product">
                    <tr v-for="(item,index) in leagueMemberDynamicList" 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 {saveOrUpdate} from '@/api/consultMessageInfo'
    import {getToken} from "@/utils/auth";
    import {getInformationList,memberDynamicInfos} from "@/api/cooperation/baseCooperationUnit";
    import {getViewByEntityId,getLeagueIdByUnitId} from "@/api/baseUnitView";
    import {getLeagueMember} from '@/api/leagueMember/leagueMember'
    import { formatDate } from '@/utils/formatUtils'
    import {getDicts} from "@/api/dict";
    

    export default {
        name: 'IntroductionLeagueMemberDetails',
        extends: Base,
        data() {
            return {
                enterpriseDetails: '',
                dialogVisible:false,
                textarea: '',
                url: '',
                ProjectConsultant:{},
                consultMessageInfo: {},
                img: [],
                initData: {},
                history:[],
                cooperationUnitDynamicList:[],
                params: {
                    pageNo: 1,
                    pageSize: 60,
                    language: "",  
                    businessType:"introduction_to_members",
                    businessId: this.$route.params.id,
                    index:this.$route.query.index
                },
                countryDicts:[],
                enterprise: {
                    label1: {
                        label: '经营范围包括三峡工程建设和经营管理，住宿经营的管理；长江中上游水资源开发；水利水电技术服务；水利水电工程所需物资、设备的销售（国家有专营专项的除外）；与上述业务有关的咨询服务；经营或代理公司所属企业自产产品（国家组织统一联合经营的16种出口商品除外）的出口业务；经营或代理公司及所属产业所需设备和材料（国家指定公司经营的12种进口商品除外）的进口业务；经营或代理技术进出口业务；承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。（企依法自主选择经营项目，开展经营活动；依法需批准的项目；经相关部门批准后依批准的内容开展经营活动；不得从事本市产业政策禁止和限制类的经营活动。',
                        src: 'u31492.jpg',
                        src2:'u31520.jpg'
                    },
                },
                baseEntityId:'',
                leagueMemberId:this.$route.query.key,
                leagueMember:{},
                leagueMemberDynamicList:[],
                leagueMemberDynamicPics:[],
            }
        },
        watch:{
            '$i18n.locale'(){
                this.getInitData();
                this.getCountry();
            }
        },
        created() {},
        updated(){
            this.Swiper();
        },
        computed:{
            countryDictsMap() {
                return this.countryDicts.array2Obj('value', 'label');
            },
        },
        mounted() {
            this.getInitData();
            this.getCountry();
        },
        methods: {
            getCountry(){
                getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en').then(res=>{
                    this.countryDicts=res.data[0];
                })
            },
            toOffcial(url){
                if(url.indexOf('http') == -1){
                    url = 'http://' + url
                }
                window.open(url,'_blank')
            },
            getTig(){
                getLeagueIdByUnitId({baseEntityId:this.initData.baseEntityId}).then(res=>{
                    
                })
            },
            getInitData:function(){
                const that = this;
                if(this.leagueMemberId != undefined){
                    getLeagueMember({id:this.leagueMemberId}).then(result=>{
                        var data = result.data;
                        if(data){
                            that.leagueMember = data.baseLeagueMembers[0]||{};
                            getViewByEntityId(that.leagueMember.unitId,that.$i18n.locale.toUpperCase()).then(result=>{
                                var data = result.data;
                                if(data){
                                    that.initData = data[0]||{};
                                    that.initData.task= that.initData.unitIntrodution?
                                    that.initData.unitIntrodution.replace(/<[^>]+>|&[^>]+;/g, ""):'';
                                    this.initData.setUpDate = formatDate(this.initData.setUpDate,'YYYY')
                                    this.initData.unitLabel=this.initData.unitLabel?this.initData.unitLabel.split(','):"";
                                }
                            })
                        }
                    })
                }
                var params={
                    language: this.$i18n.locale.toUpperCase(),
                    businessType:"introduction_to_the_alliance",
                    businessId: this.leagueMemberId
                }
                getInformationList(params).then((res) => {
                    this.img = [];
                    if(res.data){
                        if(res.data['1']){
                            this.history = res.data['1'];
                            this.history.forEach(element=>{
                                if(element.pictureUrl){
                                    this.img.push(element.pictureUrl);
                                }
                            })
                        }else{
                            this.history = [];
                        }
                    }
                });
                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.leagueMemberDynamicList = data.memberDynamicInfos ||[];
                    }
                    this.leagueMemberDynamicPics = [];
                    this.leagueMemberDynamicList.forEach(leagueMemberDynamic=>{
                        if(leagueMemberDynamic.pictureUrl){
                            this.leagueMemberDynamicPics.push(leagueMemberDynamic.pictureUrl);
                        }
                    })
                });
            },
            dialogVisibleChange(){
                this.dialogVisible=true;
            },
            getProjectList(){
                this.params.language = this.$i18n.locale.toUpperCase();
                const that =this;
            },
            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');
            },
            copy() {
                var _this = this;
                var clipboard = new Clipboard(".btn");
                clipboard.on("success", e => {
                    // 释放内存
                    this.$message({
                        message: '复制项目已成功',
                        type: 'success'
                    });
                    clipboard.destroy();
                });
                clipboard.on("error", e => {
                    // 不支持复制
                    this.$message({
                        message: "该浏览器不支持自动复制",
                        type: "warning"
                    });
                    // 释放内存
                    clipboard.destroy();
                });
            },
            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
                    }
                });
            },
            
            // 项目收藏改变
            shareChange() {
                if (this.initData[0].share == 'y') {
                    this.initData[0].share = 'n'
                } else {
                    this.initData[0].share = 'y'
                }
            },
            consultMessage() {
                // 人员信息
                let user = window.localStorage.getItem('user');
                if (!user) {
                    this.$message.warning("请先登录");
                } else {
                    var users = JSON.parse(user);
                    this.consultMessageInfo.senderId = users.userId;
                    this.consultMessageInfo.replyStatusDict = "N";
                    this.consultMessageInfo.senderDate = new Date();
                    var token = "" + getToken();
                    // 接口逻辑
                    this.submitHandler(token => {
                        saveOrUpdate(JSON.stringify(this.consultMessageInfo),token).then(result => {
                            alert(result.msg);
                            this.$message({
                                message: '已发送成功，请等待',
                                type: 'success'
                            });
                            this.consultMessageInfo = {}
                        }).catch(error => {
                            // 此处你的业务代码

                        });
                    });
                }
            },
            getIconUrl(url) {
                return require("@/assets/img/introductionCooperation/" + url);
            },
            toView(router, json) {
                this.$router.push({
                    name: router,
                    query: {key:json}
                })
            },
            screenBack(data) {
            },
            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;
    }

    .swipers {
        position: absolute;
        top: 30px;
        left: 30px;
        width: 550px;
        height: 439px;
    }

    .details {
        position: absolute;
        top: 30px;
        left: 600px;
        width: 460px;
        height: 390px;
    }

    .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }

    .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;
    }

    .initData_label {
        color: #6c8c9d;
        font-weight: 700;
        font-size: 18px;
        line-height: 42px;
        width: 330px;
        display: inline-block;
        /* overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;  */
    }

    .enterprise_style {
        line-height: 50px;
        color: #6C819D;
        padding-left: 30px;
        font-size: 18px;
        font-weight: 700;
        margin-top: 5px;
    }

    .enterprise_style_span {
        display: 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;
    }

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

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

    .share:hover {
        color: #66b1ff;
    }
    .dynamic{
        width: 95%;
        height: 274px;
        margin: 30px 0 30px 20px;
    }
    .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;
        
    }
    >>>.el-dialog__body{
        padding: 0px 20px 10px;
        word-break:normal;
    }
</style>