dev/dcp-web-gate/src_old/views/introductionCooperation/IntroductionPresentationDetails.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: 'IntroductionMemberInformation' }">{{$t('common.MemberShow')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$i18n.locale=='zh'?this.member.memberNameZh:this.member.memberNameEn}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="margin: 0 30px; 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">
                                <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 style="float: right;color: #666;font-size: 16px;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%">{{$i18n.locale=='zh'?this.member.memberNameZh:this.member.memberNameEn}}</span>
                        </div>
                        <div style="line-height: 35px;">
                            <div>
                                <span>
                                    <i class="el-icon-location-outline"></i>
                                    {{$t('common.place')}}：
                                  <el-button type="text" @click="unitCountryFour(initData.unitCountryDict)">  {{countryDictsMap[initData.unitCountryDict]}}</el-button>
                                  {{initData.unitRegion?'-'+initData.unitRegion:''}}
                                </span>
                            </div>
<!--                            <div>-->
<!--                                <span>-->
<!--                                    <i class="el-icon-office-building" aria-hidden="true"></i>-->
<!--                                    {{$t('common.RegisteredCapital')}}：{{initData.registerMoney?initData.registerMoney + "0000":'0'}}-->
<!--                                    {{$i18n.locale=='zh'?'元':'RMB'}}-->
<!--                                </span>-->
<!--                            </div>-->
                            <div>
                                <span>
                                    <i class="fa fa-star-o"></i>
                                    {{$t('common.DateOfEstablishment')}}：{{initData.setUpDate?initData.setUpDate:''}}
                                </span>
                            </div>
                            <div>
                                <span>
                                    <i class="el-icon-time"></i>
                                    {{$t('common.LegalRepresentative')}}：{{initData.corporateName?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>
                                <el-tag style="margin-right: 10px;" v-for="(i,index) in initData.unitLabel">{{i}}</el-tag>
                           </div> -->
                           <div v-if="initData.industry || initData.industryDict">
                                <el-tag type="danger" v-if="$i18n.locale=='zh'">{{initData.industry}}</el-tag>
                                <el-tag type="danger" v-if="$i18n.locale=='en'">{{TagEn[parseInt(initData.industryDict)]}}</el-tag>
                            </div>
                           <div>
                               <div style="color: #666;">{{$t('common.intro')}}：</div>
                               <div style="height: 72px;line-height: 24px;color: #333;font-size: 14px;
                               -webkit-box-orient: vertical;
                                position:relative;
                                line-height:1.4em;

                                overflow: hidden;
                                height:4.2em;" 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;':''" class="nomale" 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: 250px;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="width: 100%;height: 320px;border-bottom: 1px solid #ccc;" v-if="memberDynamicList[0]">
                <div class="enterprise_style">
                    <span class="enterprise_style_span" style="margin-left: 34px;text-align: left;">
                        {{$t('common.MemberDynamics')}}
                    </span>
                </div>
                <div v-if="memberDynamicPics.length > 0" style="float: left;;margin-top: 15px;margin-left: 100px;width: 400px;height: 230px;">
                    <img :src="'/api/file/pub/' + memberDynamicPics[0]" alt="" style="width: 100%;height: 200px">
                </div>
                <div style="float: left;margin-top: 15px;" :style="memberDynamicPics.length > 0?'width: 620px;margin-left: 20px;':'width: 1020px;margin-left: 100px;'" class="enterprise_style_product">
                    <tr v-for="(item,index) in memberDynamicList" 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 style="clear: both"></div>
                <el-dialog
                :title="$t('common.InformationDetails')"
                :visible.sync="dialogVisible"
                width="30%">
                <span style="line-height: 29px;font-size: 18px;word-break:normal;" v-html="initData.unitIntrodution"></span>
          </el-dialog>
        </div>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
    import {saveOrUpdate} from '@/api/consultMessageInfo'
    import {getToken} from "@/utils/auth";
    import {getMemberUnit} from '@/api/baseContactsInfo'
    import {getInformationList,memberDynamicInfos} from "@/api/cooperation/baseCooperationUnit";
    import { formatDate } from "@/utils/formatUtils";
    import {getCountryByName} from '@/api/country/countryList'
    export default {
        name: 'IntroductionPresentationDetails',
        extends: Base,
        data() {
            return {
                enterpriseDetails: '',
                textarea: '',
                url: '',
                isOnlineConsultation: false,
                ProjectConsultant:{},
                dialogVisible:false,
                consultMessageInfo: {},
                img: [],
                TagEn:['Individual Member','Groups','Scientific Institutions','Colleges And Universities','Energy Companies','Equipement Manufactures','Project Contractors','Financial Institutions','Consultation Enterprises','Rigidity Of Enterprise','Media','Logistics Transportation','Others'],
                recommend: [
                    {
                        img: "u31535.jpg",
                        num: "2934",
                    },
                    {
                        img: "u31535.jpg",
                        num: "2934",
                    },
                    {
                        img: "u31535.jpg",
                        num: "2934",
                    },
                    {
                        img: "u31535.jpg",
                        num: "2934",
                    },
                    {
                        img: "u31535.jpg",
                        num: "2934",
                    }
                ],
                initData: {},
                history:[],
                memberDynamicList:[],
                params: {
                    pageNo: 1,
                    pageSize: 60,
                    language: "",
                    businessType:"introduction_to_members",
                    businessId: this.$route.query.key,
                },
                enterprise: {
                    label1: {
                        label: '经营范围包括三峡工程建设和经营管理，住宿经营的管理；长江中上游水资源开发；水利水电技术服务；水利水电工程所需物资、设备的销售（国家有专营专项的除外）；与上述业务有关的咨询服务；经营或代理公司所属企业自产产品（国家组织统一联合经营的16种出口商品除外）的出口业务；经营或代理公司及所属产业所需设备和材料（国家指定公司经营的12种进口商品除外）的进口业务；经营或代理技术进出口业务；承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。（企依法自主选择经营项目，开展经营活动；依法需批准的项目；经相关部门批准后依批准的内容开展经营活动；不得从事本市产业政策禁止和限制类的经营活动。',
                        src: 'u31492.jpg',
                        src2:'u31520.jpg'
                    },

                },
                countryDicts:[],
                baseEntityId:"",
                baseMemberId:this.$route.query.key,
                baseMemberInfo:{},
                member:[],
                memberDynamicPics:[],
            }
        },
        created() {},
        mounted() {
            this.getProjectList();
            this.getCountry();
        },
        updated(){
            this.Swiper();
        },
        watch:{
            "$i18n.locale"(){
                this.getProjectList();
                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];
                })
            },
            getProjectList(){
                this.member = JSON.parse(this.$route.query.member);
                if(this.baseMemberId != undefined){
                    let list = {
                        baseEntityId:this.member.unitId,
                        language:this.$i18n.locale.toUpperCase()
                    };
                    getMemberUnit(list).then(res=>{
                        this.img = [];
                        this.initData=res.data.baseUnitView || [];
                        this.initData.unitLabel=this.initData.unitLabel?this.initData.unitLabel.split(','):"";
                        this.initData.setUpDate = formatDate(this.initData.setUpDate,'YYYY');
                        this.img.push(this.initData.photo);
                        if(this.$i18n.locale=="zh"){
                            this.initData.unitCountry = res.data.baseUnitView.unitCountry;
                        }else if(this.$i18n.locale=="en"){
                            this.initData.unitCountry = res.data.baseUnitView.unitCountryDict;
                        }
                        if(this.img.length==0){
                            this.img.push('/def/memberUnitsDef.png');
                        }
                    });
                }else{
                    this.$store.commit('modify', 'IntroductionMemberInformation');
                    window.localStorage.setItem('router', 'IntroductionMemberInformation');
                    const { href } = this.$router.resolve({
                        name: router,
                        query: {
                        }
                    });
                }
            
                var params={
                    language: this.$i18n.locale.toUpperCase(),
                    businessType:"introduction_to_members",
                    businessId: this.$route.query.key
                }
                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.memberDynamicList = data.memberDynamicInfos ||[];
                    }
                    this.memberDynamicPics = [];
                    this.memberDynamicList.forEach(memberDynamic=>{
                        if(memberDynamic.pictureUrl){
                            this.memberDynamicPics.push(memberDynamic.pictureUrl);
                        }
                    })
                });
               
            },
            dialogVisibleChange(){
                this.dialogVisible=true;
            },
            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
                    }
                });
            },
            // 项目收藏改变
            shareChange() {
                if (this.initData[0].share == 'y') {
                    this.initData[0].share = 'n'
                } else {
                    this.initData[0].share = 'y'
                }
            },
            toOffcial(url){

                // let urls='http://'+url;
                if(url.indexOf('http') == -1){
                    url = 'http://' + url
                }

                window.open(url,'_blank')
            },
            handleClose(done) {
                this.isOnlineConsultation = false;
            },
            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 => {
                            // 此处你的业务代码

                        });
                    });
                }
            },
          unitCountryFour (unitCountry){
            getCountryByName(unitCountry).then(res=>{
              console.log("请求返回的值",res.data)
              if (res.data.countryById != null ){
                this.$store.commit('modify', 'countryNationalSpace')
                window.localStorage.setItem('router', 'countryNationalSpace')
                const { href } = this.$router.resolve({
                  name: 'countryNationalSpace',
                  query: {
                    key: res.data.countryById,
                  },
                })
                window.open(href, '_blank')
              }else{
                alert("国别信息库中未维护该国别");
              }
            })
            console.log("当前语言版本",this.language);
            console.log("显示选中的国别信息",unitCountry);
        },
            getIconUrl(url) {
                return require("@/assets/img/introductionCooperation/" + url);
            },


            toView(router, json) {
                this.$router.push({
                    name: router,
                    params: json
                })
            },
            screenBack(data) {
            }
        }
    }

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

    .a-style {
        color: #0500ee;
        cursor: pointer;
        text-decoration: underline;
    }
    .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;
        display: inline-block;
    }

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

    .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 50px;
    }
    .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: 55px;
    }
    .news>ul>li>span{
       float: right;

    }
    .nomale >>>ul, .nomale >>>p,.nomale:first-child,.nomale{
        /* word-break:break-word; */
   
        word-wrap:break-word;
    }
    >>>.el-dialog__body{
        padding: 0px 20px 10px;
        word-break:normal;
    }
</style>