dev/dcp-web-gate/src_old/views/enterprise/EnterpriseInformationDetails.vue

<template>
    <div class="autoBox box" style="min-height: 550px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                <el-breadcrumb-item ><span @click="back" style="font-weight: 700;cursor: pointer;">{{$t('common.EnterpriseShow')}}</span></el-breadcrumb-item>
                <el-breadcrumb-item>{{$t(name)}}</el-breadcrumb-item>
                </el-breadcrumb>
        </div>
        <div style="margin-top: 30px;width: 100%;">
            <div style="padding:0 100px;text-align: center;line-height: 50px;color: #666;font-size: 28px;font-weight: 700;">{{initData.title}}</div>
            <div style="margin: 0 20px;padding: 0 10px; line-height: 50px;color: #bcbcbc;font-size: 15px;border-bottom: 1px solid #bcbcbc;">
                <span>{{$t('common.ReleaseTime')}}：{{formatDate(initData.updateDate)}} | {{$t('common.Source')}}：{{initData.auther}}</span>
                <span style="float: right;cursor: pointer;" v-if="!collectionType" @click="Collection">{{$t('common.Collection')}}</span>
                <span style="float: right;cursor: pointer;" v-if="collectionType" @click="unCollection">{{$t('common.Collected')}}</span>
                <!-- Collected -->
            </div>
<!--            <img :src="'api/file/pub/'+ content.pictureUrl" alt="" style="width: 300px;"  :style="content.picturePosition=='L'?'float: left;margin-right:20px;':'float: right;margin-left:20px;'">-->
            <div class="contentDiv" style="padding:0 50px;line-height: 40px;font-size: #666;padding:20px;"  v-html="initData.contentHtml"></div>
            <!-- <div style="padding:0 50px;line-height: 40px;font-size: #666;margin-top: 30px;">
                附件：<a href="javascript:;">{{initData.path}}</a>
            </div> -->
            <!--<div style="padding:0 50px;line-height: 40px;font-size: #666;">
                {{$t('common.ReleaseTime')}}：{{formatDate(content.createDate)}}
            </div>-->
        </div>
        <el-dialog
        :title="$i18n.locale == 'zh' ? '提示' : 'Reminder'"
        :visible.sync="toViewLogin"
        :width="$i18n.locale == 'zh' ? '30%' : '40%'"
        :height="$i18n.locale == 'zh' ? '300px' : '386px'"
        :before-close="toViewLoginChange"
      >
        <div style="width: 100%; height: 100%">
          <img
            src="@/assets/img/loginTips.png"
            alt=""
            style="width: 180px; height: 180px; margin-left: 20px"
          />
          <div
            style="float: right; margin-right: 20px"
            :style="
              $i18n.locale == 'zh'
                ? 'width: 49%;margin-top: 10px;'
                : 'width: 453px;margin-top: -25px;'">
            <div style="
                font-size: 20px;
                font-weight: normal;
                color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
              {{ $t("common.ReminderFirst") }}
            </div>
            <div style="
                font-size: 16px;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                font-weight: normal;
                color: #666666;
                line-height: 30px;">
              {{ $t("common.ReminderSecond") }}
              <span style="color: #0091ff; font-size: 18px">{{ num }}</span>
              {{ $t("common.ReminderThird") }}
            </div>
            <div style="
                font-size: 14px;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                font-weight: normal;
                color: #666666;
                line-height: 30px;">
              {{ $t("common.ReminderForth") }}
            </div>
            <div style="
                font-size: 14px;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                height: 33px;
                line-height: 60px;
                font-weight: normal;
                color: #0091ff;">
              <span
                style="margin-left: 40px"
                class="cursor"
                @click="toViewLoginCh('login')">
                {{ $t("common.ReminderFifth") }}
              </span>
              <span
                style="margin-left: 10px"
                class="cursor"
                @click="toView('Register')">
                {{ $t("common.ReminderSixth") }}
              </span>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
      import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
      import {addCollectInfo} from "@/api/baseUnitView";
      import {getPortalMyCollectModelByResearch } from "@/api/operation/basePortalModelFollowInfo";
      import {getInformationById} from "@/api/baseUnitView";
      import { getToken, resetToken } from "@/utils/auth";

  export default {
    name: 'countryInformationDetails',

    data () {
        return {
            collectionType:false,
            initData:{},
            toViewLogin: false,
            timer: "",
            num: 0,
            name:this.$route.query.name,
            page:{
                baseId:this.$route.query.key,
            },
        }
    },
      watch:{
        '$i18n.locale'(){
            this.getData();
        },
        toViewLogin() {
            if (this.toViewLogin == true) {
                this.loginTipsChange();
            }
        },
      },
    created(){},
    mounted(){
        this.$store.commit('modify', 'enterpriseInformationDetails');
        window.localStorage.setItem('router', 'enterpriseInformationDetails');
        clearInterval(this.timer);
        this.getData();
        this.Swiper()
    },
    methods:{
        getData(){
            this.page.language=this.$i18n.locale.toUpperCase();
            getInformationById(this.page).then(res=>{
                var data = res.data;
                if(data){
                    this.initData=res.data.cmsInformationView;
                }
                this.getCollection()
            })
        },
        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
                }
            });
        },
        toViewLoginCh(router){
            clearInterval(this.timer);
            this.$router.push(router);
        },
        toView (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');
        },
        getIconUrl(url){
        return require("@/assets/img/realTimeInfo/"+url);
        },
        toView(router,json){
            this.$router.push({name:router,params:json})
        },
        screenBack(data){
            console.log(data,'screenBackscreenBackscreenBackscreenBack')
        },
         // 未登录跳转
        loginTipsChange() {
            const that = this;
            this.num = 5;
            clearInterval(that.timer);
            this.timer = setInterval(function () {
                if (that.num > 0) {
                that.num--;
                } else {
                if (that.toViewLogin == true) {
                    clearInterval(that.timer);
                    that.toViewLoginCh("login");
                } else {
                    clearInterval(that.timer);
                }
                }
            }, 1000);
        },
        getCollection(){
            let that = this;
            let user = window.localStorage.getItem('user');
            var users = JSON.parse(user);
            var modelType = 'information';
            var userId = users.userId;
            var modelId=this.initData.baseEntityId;
            getPortalMyCollectModelByResearch(modelId, modelType, userId).then(res => {
                that.collectionType = res.data.result;
            })
        },
        unCollection(){
            let user = window.localStorage.getItem('user');
            let tokenDetaile= this.$Cookies.get('token');
            if (!tokenDetaile) {
                // this.$message.warning(this.$i18n.locale=='zh'?"请先登录":"Please login first");
                this.toViewLogin = true;
            }else{
                var users = JSON.parse(user);
                this.userId = users.userId;
                let list ={
                    modelId:this.initData.baseEntityId,
                    modelType:"message",
                    userId:users.userId,
                    collectType:"uncollect"
                }
                var token = "" + getToken();
                addCollectInfo(list.modelId,list.modelType,list.userId,list.collectType,token).then(res=>{
                    if(res.status==200){
                        this.$message({
                            message: this.$i18n.locale=='zh'?"取消收藏成功":"DisCollection of success",
                            type: 'success'
                        });
                        this.collectionType = false;
                    }
                    this.resetToken();
                }).catch(error => {
                    this.resetToken();
                });
            }
        },
        Collection(){
            let user = window.localStorage.getItem('user');
            let tokenDetaile= this.$Cookies.get('token');
            if (!tokenDetaile) {
                // this.$message.warning(this.$i18n.locale=='zh'?"请先登录":"Please login first");
                this.toViewLogin = true;
            }else{
                var users = JSON.parse(user);
                this.userId = users.userId;
                let list ={
                    modelId:this.initData.baseEntityId,
                    modelType:"message",
                    userId:users.userId,
                    collectType:"collect"
                }
                var token = "" + getToken();
                addCollectInfo(list.modelId,list.modelType,list.userId,list.collectType,token).then(res=>{
                    if(res.status==200){
                        this.$message({
                            message: this.$i18n.locale=='zh'?"收藏成功":"Collection of success",
                            type: 'success'
                        });
                        this.collectionType = true;
                    }
                    this.resetToken();
                }).catch(error => {
                    this.resetToken();
                });
            }
        },
        screen(i){
            this.index=i
        },
        getInformation(num){
                    this.informationsClass=num
        },
        back() {
            this.$router.go(-1); //返回上一层
        },
    }
  }
  </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: 100px;
    width: 460px;
    height: 390px;
  }
  .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;
   }
   .enterprise_style{
  line-height: 40px;
  color: #6C819D;
  /* padding-left: 100px; */
  font-size: 18px;
  /* font-weight: 700; */
  margin-top: 5px;
  margin-left: 100px;
  border-bottom: 1px solid #95d13e;
}
.enterprise_style_span {
     padding: 10px;
    text-align: center;
    height: 100%;
    background: #95d13e;
    color: #fff;
    /* 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: 100px;
   }
   .recommend li{
        display: inline-block;
        width: 170px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
   }
   .information1 {
        display: inline-block;
        width: 123px;
        height: 100%;
        border:1px solid rgba(228, 228, 228, 1);
        text-align: center;
        background: #f9f9f9;
        color: #999;
    }
    .information2 {
        display: inline-block;
        width: 123px;
        height: 100%;
        border-top:3px solid #2c5589;
        text-align: center;
        color: #2c5589;
    }
    .information1:hover {
        color: #FF0036;
    }
    .contentDiv >>> table{
        margin: auto;
        border-collapse:collapse !important;
    }
    .contentDiv >>> tr ,.contentDiv >>> td{
        border: 1px solid black !important;
    }
    .contentDiv >>>tbody {
        width: 800px;
        display: inherit;
    }
</style>