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

<template>
    <div>
          <div class="autoBox box">
             <div class="crumbs" style="height: 30px;">
                <el-breadcrumb separator="/" style="float: left;margin: 0 15px ">
                    <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=custom' }">{{$t('common.CustomizedService')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{enterprise.unitName}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0" >
                        <span class="cursor screen2"  
                        @click="realTimeInfoScreen(item,item.value)" v-for="(item,index) in realTimeInfoScreens4"> 
                          &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp; <span v-if="(index+1)!==realTimeInfoScreens4.length">/</span>
                        </span>
                    </el-breadcrumb>
             </div>
               
             <div style="width: 100%;position: relative;background: #fff;">
                 <div style="width:100%;height:320px;padding:10px 0">
                     <!-- <img :src="'/api/file/pub/' + serviceContent.pictureUrl" alt="" style="height: 20px;vertical-align: middle;"> -->
                    <img v-if="serviceContent.pictureUrl" :src="'/api/file/pub/' + serviceContent.pictureUrl" alt="" style="height:100%;width:100%;">
                </div>
              
                 <div>
                    <div style="width: 100%; font-size: 15px;color: #95949c;">
                       <div style="color:#666666;font-size: 28px;font-weight: 700;margin: 20px;">
                           {{enterprise.unitName}}
                        </div>
                        <!-- 单位简介 -->
                        <div style="height: 50px;line-height: 50px;">
                            <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;">{{$t('common.UnitIntroduction')}}</span>
                        </div>
                        <div style="font-size: 16px;line-height: 28px; text-indent:2em;color: #666666;padding:0 10px">
                           <p v-html="enterprise.unitIntrodution"></p>
                        </div>
                    </div>
                 </div>
                 <!-- 服务内容 -->
                 <div>
                    <div class="enterprise_style">
                        <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;">{{$t('common.ServiceContent')}}</span>
                    </div>
                    <div style="line-height: 28px;text-align: center;" v-html="serviceContent.contentHtml"></div>
                    
                    <!-- <div style="width: 1200px;padding:20px">
                        <div style="width: 100%;height: 300px;">   
                            <div class="DetImg">
                               <div class="imgcontent">
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;"> 

                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;"> 
                               
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;"> 
                                </div>
                                <div class="imgcontent" style="margin-top: 20px;">
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;"> 
           
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;"> 
                          
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;"> 
                                </div>
                                
                            </div>                        
                            <div class="Detcontent">
                                    2019年11月，在2019全球能源互联网暨中-非能源电力大会期间，组织近200位重要非洲嘉宾参观调研三峡电站；在北京国家会议中心为三峡集团提供展位，
                                    安排企业品牌宣传活动，促成与多位非洲国家部长、电力公司负责人对接洽谈，并达成初步合作意向.
                            </div>
                        </div>
                    </div>

                    <div style="width: 1200px;padding:20px">
                        <div class="Detcontent">
                                    2019年11月，在2019全球能源互联网暨中-非能源电力大会期间，组织近200位重要非洲嘉宾参观调研三峡电站；在北京国家会议中心为三峡集团提供展位，
                                    安排企业品牌宣传活动，促成与多位非洲国家部长、电力公司负责人对接洽谈，并达成初步合作意向.
                        </div>
                        <div style="width: 100%;height: 300px;">   
                            <div class="DetImg">
                               <div class="imgcontent">
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:49%;height:140px;float:left;">                               
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:49%;height:140px;float:left;"> 
                                </div>
                                <div class="imgcontent" style="margin-top: 20px;">
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:30%;height:140px;float:left;">                                     
                                    <img src="@/assets/img/introductionCooperation/AllianceActivities.png" alt="" style="width:69%;height:140px;float:left;"> 
                                </div>
                                
                            </div>                        
                           
                        </div>
                    </div> -->
                 </div>
                 
             </div>        
          </div>
         
    </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 {getInformationList} from "@/api/cooperation/baseCooperationUnit";
    import {getViewByEntityId} from "../../api/baseUnitView";
    import { formatDate } from '@/utils/formatUtils'
    import {getCoopCustomServices} from '@/api/cooperation/coopCustomService'
    export default {
        name: 'IntroductionCustomizationDetails',
        extends: Base,
        data () {
        return {
            
            baseEntityId:'',
            enterpriseDetails:'',
            enterprise:{},
            textarea: '',
            url:'',
            svrHeight:0,
            img:[{
                src:'u6668.png',
            },{
                src:'u6676.png',
            },{
                src:'u6720.png',
            },{
                src:'u6763.png',
            },{
                src:'u6668.png',
            }],
            realTimeInfoScreens4:[{
                lable:"common.MemberIntroduction",
                value:'member'
            },{
                lable:"common.AllianceIntroduction",
                value:'union'
            },{
                lable:"common.CooperativeUnitIntroduction",
                value:'cooperation'
            }],
            initData:[{
                label:'日本大型海上风电项目',
                place:'日本 神奈川市',
                money:'海上风电 | 跨国 | 咨询',
                time:'332人关注 /两个月前发布',
                information01:'35',
                information02:'102',
                information03:'56',
                share:'y',
                information:'产品信息 (35) 核心技术 (102) 项目业绩 (56)',
                sketch:'经营范围包括三峡工程建设和经营管理，住宿经营的管理；长江中上游水资源开发；水利水电技术服务；水利水电工程所需物资、设备的销售（国家有专营专项的除外）；与上述业务有关的咨询服务；经营或代理公司所属企业自产产品（国家组织统一联合经营的16种出口商品除外）的出口业务；经营或代理公司及所属产业所需设备和材料（国家指定公司经营的12种进口商品除外）的进口业务；经营或代理技术进出口业务；承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。（企业'
            }],
            
                recommend:[{
                    img:'u6029.png',
                    num:'2934'
                },{
                    img:'u6029.png',
                    num:'2934'
                },{
                    img:'u6029.png',
                    num:'2934'
                },{
                    img:'u6029.png',
                    num:'2934'
                }],
                serviceContent:{},
                customServiceId:this.$route.query.key,
                customService:{},
                // imgdata1:[
                //     {
                //         w:'100px',
                //         h:'100px',
                //         b:'red'
                //     }
                // ],
            }
        },
        created(){
            this.url=window.location.href

        },
       
        mounted(){
            this.initDataList();
            this.Swiper();
            this.getsvrHeight();
        },
        computed:{
            content() {
                return function (str) {
                    return str.replace(/<[^>]+>/g, "")
                }
            }
        },
        watch:{
            '$i18n.locale'(){
                this.initDataList();
            }
        },
        methods:{
            getsvrHeight(){
                let svrBox = document.getElementById('serviceContent');
                let svrContent = document.querySelectorAll('#serviceContent div');
                let ListHeight='';
                let AllListHeight = [];
                
                for(let i=0;i<svrContent.length;i++){
                    let ListHeight = svrContent[i].clientHeight;
                    if(i<4){
                        this.svrHeight +=ListHeight;
                    }
                    AllListHeight.push(ListHeight)
                }
            },
            realTimeInfoScreen(i,index){
                this.toView('IntroductionMemberProfile',index);
            },
            initDataList:function(){
                getCoopCustomServices({id:this.customServiceId}).then(result=>{
                    var data = result.data;
                    if(data){
                        this.customService = data.coopCustomServices[0]||{};
                        this.baseEntityId = this.customService.unitId;
                        let language = this.$i18n.locale.toUpperCase();
                        getViewByEntityId(this.baseEntityId,language).then(res=>{
                            const data = res.data ;
                            if(data){
                                this.enterprise = data[0] ;
                                this.enterprise.setUpDate = formatDate(this.initData.setUpDate,'YYYY-MM-DD')
                            }
                        })
                        var params={
                            language: this.$i18n.locale.toUpperCase(),
                            businessType:"custom_service",
                            businessId: this.customService.id
                        }
                        getInformationList(params).then((res) => {
                            if(res.data){
                                this.serviceContent = res.data.allDataList[0]||{};
                            }
                        });
                    }
                })
            },
            copy: function() {
                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,
            });
            var galleryTop = new Swiper('.gallery-top', {
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: galleryThumbs
                }
            });
        },
        // 项目收藏改变
        shareChange(){
            if(this.initData[0].share=='y'){
                this.initData[0].share='n'
            }else {
                this.initData[0].share='y'
            }
        },
        getIconUrl(url){
            return require("@/assets/img/realTimeInfo/"+url);
        },
        toView(router,json){
            this.$router.push({name:router,query:{key:json}})
        },
        screenBack(data){
            console.log(data,'screenBackscreenBackscreenBackscreenBack')
        },
        screen(i){
            this.index=i
        }
        }
    }
</script>
<style scoped>
    .box {
        margin-top: 10px;
        padding: 0px 0;
    }
    .crumbs {
        margin-left: 20px;
       
    }
    .el-breadcrumb {
        height: 30px;
        line-height: 30px;
    }
    body {
        margin: 0;
    }
    .swipers {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 550px;
    height: 439px;
    }
    .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;
   }
   .enterprise_style{
     line-height: 50px;
     color: #6C819D;
     font-size: 15px;
     font-weight: 700;
     margin-top: 5px;
   }
   .enterprise_style_span {
       display: block;
       width: 82px;
       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,.recommend2 {
       margin-top:15px;
       margin-left: 30px;
   }
   .recommend2 ul {
      display: flex;
      display: -webkit-flex; 
      justify-content:space-between;
      flex-wrap:wrap;
   }
   .recommend li{
        display: inline-block;
        width: 170px;
        text-align: center;
        margin-right: 15px;
   }
   .recommend2 li {
        display: inline-block;
        text-align: center;
        margin-right: 15px;
   }
   .share:hover {
    color: #66b1ff;
   }
   .Detcontent{
        width: 35%;
        height: 270px;
        float: left;
        color: rgb(149, 148, 156);
        font-size: 15px;
        padding: 15px;
        text-indent: 2em;
        vertical-align: middle;
    }
    .DetImg{
        width: 60%;
        float: left;
        height: 300px;
    }
    .imgcontent{
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: space-between;
    }
    .aaa{
        width: 100%;
        height: 140px;
        background-color: red;
    }
</style>