dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServicesDetails.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: 'financialServices' }">{{$t('common.FinancialServices')}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'FinancialServicesAgency' }">{{$t('common.FinancialInstitutions')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{initData.unitName}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
<!--      机构详情-->
      <div style="width: 100%;height: 450px;position: relative;margin-top:20px">
        <div style="width:96%;height:100%;margin:auto">
          <!-- 轮播图 -->
          <div style="width:40%;height:100%;float:left;">
            <div class="swipers">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item,index) in img" :key="index">
                    <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>ni
              </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div
                            class="swiper-slide"
                            :key="'thumb'+index"
                            :data-swiper-slide-index="index"
                            v-for="(i,index) in img">
                            <img :src="'api/file/pub/' +i" alt style="width: 100%;height: 100%;"/>
                        </div>
                    </div>
                </div>
              <div style="float: right;color: #666;font-size: 14px;margin-right: 20px;"></div>
                <div style="clear: both"></div>
            </div>
          </div>
          <!-- 机构详情 -->
          <div style="width:55%;height:100%;float:left;">
            <div class="details">
              <div style="width: 100%; font-size: 16px;color: #666666">
                <div>
                  <span class="initData_label cursor">{{initData.unitName}}</span>

                  <div style="margin-top: 37px">
                    <div>
                        <span>
                          <i class="el-icon-location-outline"></i>
                          {{$t('common.place')}}：
                          <span v-show="initData.unitRegion">{{areaDictsMap[initData.areaDict]}}-{{countryDictsMap[initData.unitCountryDict]}}-{{initData.unitRegion}}</span>
                        </span>
                    </div>
                  <div style="width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-top: 20px">
                    <span>
                        <i class="el-icon-office-building" aria-hidden="true"></i>
                         {{$t('common.Website')}}：
                         <a href="javaScript:;" class="a-style" @click="toOffcial(initData.officialWebsitePath)">
                           {{initData.officialWebsitePath}}
                         </a>

                    </span>
                  </div>
                  <div style=";margin-top: 20px">
                      <i class="el-icon-tickets"></i>
                    <span>
                        {{$t('common.ProductAndService')}}
                      (<span style="color: blue"><a href="#service">{{serveceNum}}</a></span>)
                    </span>
                    <span style="margin-left: 30px;">
                        {{$t('common.InvestmentAndCases')}}
                        (<span style="color: blue"><a href="#example">{{exampleNum}}</a></span>)
                    </span>
                  </div>
                    <div style=";margin-top: 20px">
                      <div style="color: #666;">
                        <i class="el-icon-tickets"></i>
                        {{$t('common.Introduce')}}：
                      </div>
                      <div style="height:52px;line-height:20px;font-size: 14px;
                               -webkit-box-orient: vertical;
                                position:relative;
                                overflow: hidden;
                                margin-top: -10px;"
                                 class="plate"
                           @click="dialogVisibleChange" v-html="initData.unitIntroduction"></div>
                    </div>
                  <div style="color: #666;font-size: 16px;margin-right: 20px;margin-top: 20px">
                    <div>
<!--                      关注按钮-->
                      <el-button type="" style="margin-top: 10px;height: 40px;" icon="el-icon-star-off" :style="ifcommon?'color: #66b1ff;':''" @click="shareChange()">
                        {{ifcommon?$t('common.InstitutionConcerned'):$t('common.PayAttention')}}
                      </el-button>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--产品与服务-->
      <div style="margin: 20px 20px;" v-show="serviceContent[1]&&serveceNum>0" id="service">
        <div class="tankthink_style" >
            <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="width: 6px;height:18px;margin-top: 5px">
            <span class="tankthink_style_span">{{$t('common.ProductAndService')}}</span>
            <span style="font-weight: normal;font-size: 14px;float: right;margin-right: 20px;cursor:pointer;" @click="toViewMore('FinancialServiceMoreList',initData.baseEntityId,'1')" v-if="serveceNum>5"> {{$t('common.ViewMore')}}</span>
        </div>
        <div class="tankthink_content">
          <div style="width: 75%;float:left;font-size:14px;color:#666666;vertical-align: top">
           <ul style="padding:10px">
             <li  style="height: 40px;line-height: 40px;border-bottom: 1px dashed #d4d4d4;cursor: pointer" v-for="(serveItem,index) in serviceContent[1]" v-if="index < 5" @click="toViewDetails('FinancialserviceContentDetails',serveItem.baseEntityId,initData.baseEntityId)">
                 <div style="display: inline-block;width: 70%;float: left;width: 80%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                   {{serveItem.title}}
                 </div>
                <div style="display: inline-block;float: right;margin-right: 20px">
                  {{formatDate(serveItem.publishDate)}}
                </div>
               <div style="clear: both"></div>
             </li>
           </ul>
          </div>
          <div style="width: 23%;float:right; margin-left: 20px;margin-top: 20px">
              <img src="@/assets/img/financialService/productService1.png" alt="" style="width:100%;height: 200px">
<!--            <img :src="'api/file/pub/' + picture1" alt="" style="width:100%;height: 200px">-->
<!--            <img v-if="picture1 == null" src="@/assets/img/financialService/productService1.png" alt="" style="width:100%;height: 200px">-->
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <!--投融资案例-->
      <div style="margin: 20px 20px;" v-show="serviceContent[2]&&exampleNum>0" id="example">
        <div class="tankthink_style" >
            <img  src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="width: 6px;height:18px;margin-top: 5px">

            <span class="tankthink_style_span">{{$t('common.InvestmentAndCases')}}</span>
            <span style="font-weight: normal;font-size: 14px;float: right;margin-right: 20px;cursor:pointer;" @click="toViewMore('FinancialServiceMoreList',initData.baseEntityId,'2')" v-show="exampleNum>5"> {{$t('common.ViewMore')}}</span>

            <!--<span style="float: right;font-size: 14px;color: #666666;font-weight: normal;margin-right: 20px">更多 ></span>-->
        </div>
        <div class="tankthink_content">
          <div style="width: 75%;float:left;font-size:14px;color:#666666;vertical-align: top">
            <ul style="padding:10px">
              <li  style="height: 40px;line-height: 40px;border-bottom: 1px dashed #d4d4d4;cursor: pointer;" v-for="(exItem,index) in serviceContent[2]"  v-if="index < 5" @click="toViewDetails('FinancialserviceContentDetails',exItem.baseEntityId,initData.baseEntityId)">
                <div style="display: inline-block;width: 70%;float: left;width: 80%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                  {{exItem.title}}
                </div>
                <div style="display: inline-block;float: right;margin-right: 20px">
                  {{formatDate(exItem.publishDate)}}
                </div>
                <div style="clear: both"></div>
              </li>
            </ul>
          </div>
          <div style="width: 23%;float:right; margin-left: 20px;margin-top: 20px">
<!--            <img :src="'api/file/pub/' + picture2" alt="" style="width:100%;height: 200px">-->
<!--              <img v-if="picture2 == null" src="@/assets/img/financialService/productService2.png" alt="" style="width:100%;height: 200px">-->
              <img src="@/assets/img/financialService/productService2.png" alt="" style="width:100%;height: 200px">

          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <!--机构动态-->
      <div style="margin: 20px 20px;" v-if="serviceContent[3] && dynamicNum>0" >
<!--      <div style="margin: 20px 20px;">-->
        <div class="tankthink_style3">
            <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="width: 6px;height:18px;margin-top: 5px">
            <span class="tankthink_style_span">{{$t('common.InstitutionDynamic')}}</span>
            <span style="font-weight: normal;font-size: 14px;float: right;margin-right: 20px;cursor:pointer;" @click="toViewMore('FinancialServiceMoreList',initData.baseEntityId,'3')" v-if="dynamicNum>5"> {{$t('common.ViewMore')}}</span>

        </div>
        <div >
          <div style="width: 23%;float:left; margin-right: 20px;margin-top: 20px">
              <img src="@/assets/img/financialService/productService3.png" alt="" style="width:100%;height: 200px">
          </div>
          <div class="tankthink_content">
            <div style="width: 75%;float:right;font-size:14px;color:#666666">
              <ul style="padding:10px">
                <li style="height: 40px;line-height: 40px;border-bottom: 1px dashed #d4d4d4;cursor: pointer;" v-for="(dyItem,index)  in serviceContent[3]" @click="toViewDetails('FinancialserviceContentDetails',dyItem.baseEntityId,initData.baseEntityId)" v-if="index < 5" >
                  <div style="display: inline-block;width: 70%;float: left;width: 80%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                    {{dyItem.title}}
                  </div>
                  <div style="display: inline-block;float: right;margin-right: 20px">
                    {{formatDate(dyItem.publishDate)}}
                  </div>
                  <div style="clear: both"></div>
                </li>
              </ul>
            </div>
            <div style="clear:both"></div>
          </div>
        </div>

      </div>
    </div>
    <!--企业简介-->
    <el-dialog
            :title="$t('common.InformationDetails')"
            :visible.sync="dialogVisibleintro"
            width="30%">
        <span style="line-height: 29px;font-size: 14px;word-break:normal;color: #666666" v-html="initData.unitIntroduction"></span>
    </el-dialog>

    <!--登录提示-->
    <el-dialog
            :title="$i18n.locale=='zh'?'提示':'Reminder'"
            :visible.sync="toViewLogin"
            :width="$i18n.locale=='zh'?'500px':'750px'"
            :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="toView('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} from 'vue-awesome-swiper';
  import {getInformationList} from '@/api/financialService/cmsInformationViews';
  import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  import Base from "@/views/base/Base";
  import { saveFollowModel } from "@/api/operation/basePortalModelFollowInfo";
  import {getToken } from "@/utils/auth";
  import { getDicts } from "@/api/dict";
  import {getBaseFinancialInstitutionInfos} from "../../api/financialService/baseFinancialInstitutionInfo";
  import {getFollowModeNumlByModelIdAndUserId} from "../../api/operation/basePortalModelFollowInfo";
  import {saveOrUpdate as clickSave} from "@/api/operation/basePortalModelClickInfo";
  export default {
    name: "FinancialServicesDetails",
    extends: Base,
    data() {
      return {
        num:5,
        serveceNum:0,
          exampleNum:0,
          dynamicNum:0,
        toViewLogin:false,
        timer:'',
        img:[],
        picture1:'',
        picture2:'',
        picture3:'',
        dialogVisible:false,
        FinancialServicesDetails: "",
        serviceList:[],
        dialogVisibleintro:false,
        serviceContent:[],
        unitCountryDicts:[],
        unitAreaDicts:[],
        example:'',
        dynamic:'',
        ifcommon:false,
        initData:{},
        queryDetails:{
          pageSize: "10",
          pageNo: "1",
          language:'',
          baseEntityId:''
        },
        clickModel:{
          modelType:"project",
          modelEntityId:"",
          userId:"",
          clickTime:"",
        },
        enterprise: {
          label1: {
            label: "",
            src: ""
          },
          label2: {
            src: "",
          },
          label3: {
            src: "",
          },
          label4: {
            src: "",
          },
          label5: {
            src: "",
          }
        },
        UnitTypeNumber:{},
      };
    },
    computed:{
      countryDictsMap: function () {
        return this.unitCountryDicts.array2Obj('value', 'label');
      },
      areaDictsMap: function () {
        return this.unitAreaDicts.array2Obj('value', 'label');
      },

    },
    updated(){
      this.Swiper();
    },
    mounted() {
      this.getCountry();
      this.getDetailsData();
      this.$store.commit('modify', 'FinancialServicesDetails');
      window.localStorage.setItem('router', 'FinancialServicesDetails');
    },
    watch: {
      '$i18n.locale'(){

        this.getDetailsData();
        this.getCountry();
        // this.shareChange()

      },
      "toViewLogin"(){
        if(this.toViewLogin==true){
          this.loginTipsChange()
        }
      },
    },

    methods: {
      // 未登录跳转
      loginTipsChange(){
        const that=this;
        this.num =5;
        // clearInterval(timer_interval);

        this.timer = setInterval(function() {
          if (that.num > 0) {
            that.num--;
          } else {
            if(that.toViewLogin==true){
              clearInterval(that.timer);
              that.toView('login');
            }else {
              clearInterval(that.timer);
            }
          }
        }, 1000)
      },
      // 判断未登录跳转是否关闭
      toViewLoginChange(done){
        this.toViewLogin=false;
        this.num=5;
        clearInterval(this.timer);
      },
      dialogVisibleChange(){
        this.dialogVisible=true;
      },
      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
          }
        });
      },
      getDetailsData(){
        const that =this;
        this.queryDetails.language = this.$i18n.locale.toUpperCase();
        this.queryDetails.baseEntityId = this.$route.query.key;
        getBaseFinancialInstitutionInfos(this.queryDetails).then((res) => {
            if(res.data){
                this.initData = res.data.baseFinancialInstitutionInfos[0];
                if(this.initData.photo == null || this.initData.photo == false){
                    this.initData.photo = '/def/def1.png';
                };
                this.getServiceList();

                this.img =[];
                this.img.push(this.initData.photo);
                this.num = res.data.page.totalCount;
                this.loading = false;
                this.conFlow()

            }else {
                this.initData = {};
                if(this.$i18n.locale =='zh'){
                    this.$message({
                        message: '无当前版本',
                        type: 'error'
                    });
                }else{
                    this.$message({
                        message: 'No current version',
                        type: 'error'
                    });
                }
            }

        });


      },
      // 获取产品与服务列表
      getServiceList() {
        const that =this;
        const params1={
            // pageNo:'1',
            businessType:'financial_institutions',
            businessId:this.initData.baseEntityId,
            language:this.$i18n.locale.toUpperCase(),
        };
          getInformationList(params1).then(res => {
              this.serviceContent = [];
              if(res.data[1]||res.data[2]||res.data[3]){
                this.serviceContent = res.data;
                this.serveceNum = this.serviceContent[1].length;
                this.exampleNum = this.serviceContent[2].length;
                this.dynamicNum = this.serviceContent[3].length;
                console.log(this.serveceNum,this.exampleNum, this.dynamicNum,'--------------------------------------数量')
                // this.serveceNum = res.data.page.totalCount;
                // let num=0;
                // if(this.serviceContent[num].pictureUrl){
                //     this.picture1 = this.serviceContent[num].pictureUrl;
                //     if(this.serviceContent[num].pictureUrl==null){
                //         num++
                //     }
                // }else {
                //     this.picture1 = []
                // }
            }

        });

      },
      toView(router, json) {
        clearInterval(this.timer);
        this.$router.push({ name: router, params: {key:json} });
      },
        toViewDetails(router, json,baseEntityId) {
            const { href } = this.$router.resolve({
                name: router,
                // id:baseEntityId,
                query: {
                    key: json,
                    baseEntityId:baseEntityId
                },
            });
            window.open(href, '_blank');
        },
        toViewMore(router,json,typeDict){
            this.$store.commit('modify', router);
            window.localStorage.setItem('router', router);
            const { href } = this.$router.resolve({
                name: router,
                query: {
                    key: json,
                    typeDict:typeDict
                },
            });
            window.open(href, '_blank');
        },
      screenBack(data) {
        console.log(data, "screenBackscreenBackscreenBackscreenBack");
      },
      screen(i) {
        this.index = i;
      },
      // 关注项目
      shareChange() {
        if (this.ifcommon) {
          this.saveFollowModelDo("unfollow");
        } else {
          this.saveFollowModelDo("follow");
        }
      },
      //关注项目
      saveFollowModelDo: function (followType) {
        let user = window.localStorage.getItem("user");
        if (!this.$Cookies.get('token')) {
          this.toViewLogin = true;
        } else {
          var users = JSON.parse(user);
          var token = "" + getToken();
          var projectId = this.initData.baseEntityId;
          var userId = users.userId;
          // 接口逻辑
          this.submitHandler((token) => {
            saveFollowModel(projectId, "financialInstitution", userId, followType, token)
                    .then((result) => {
                        if(followType=='unfollow'){
                            if(this.$i18n.locale=='zh'){
                                this.$message({
                                    message: '取消关注成功',
                                    type: "success",
                                });
                            }else{
                                this.$message({
                                    message: 'Cancel the follow successfully',
                                    type: "success",
                                });
                            }
                        }else{
                            if(this.$i18n.locale=='zh'){
                                this.$message({
                                    message: '关注成功',
                                    type: "success",
                                });
                            }else{
                                this.$message({
                                    message: 'Follow of success',
                                    type: "success",
                                });
                            }

                        }
                        this.ifcommon = !this.ifcommon;
                        this.resetToken();
                      // this.$message({
                      //   message: "关注哦",
                      //   type: "success",
                      // });
                      // this.ifcommon = !this.ifcommon;
                      // this.resetToken();
                      // if( this.ifcommon==false){
                      //     this.$message({
                      //         message: "取消了哦",
                      //         type: "failed",
                      //     });
                      // }
                    })
                    .catch((error) => {

                    });
          });
        }
      },
      dialogVisibleChange(){
        this.dialogVisibleintro=true;
      },

      getCountry(){
        getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT,CONTINENT_CODE_DICT':'unit_country_dict_en,CONTINENT_CODE_DICT_EN').then((res)=>{
                this.unitCountryDicts = res.data[0];
                this.unitAreaDicts = res.data[1]
        })
      },
      conFlow(){
        let user = window.localStorage.getItem("user");
        if (user) {
          var users = JSON.parse(user);
          var token = "" + getToken();
          var baseEntityId = this.initData.baseEntityId;
          this.userId = users.userId;
          getFollowModeNumlByModelIdAndUserId(
                  baseEntityId,
                  "financialInstitution",
                  this.userId
          ).then((res) => {
            this.ifcommon = res.data;
            console.log(
                    res.data,
            );
          });

        }
      },
        toOffcial(url){

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

            window.open(url,'_blank')
        },
    }
  };
</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: 80px;*/
    width: 460px;
    height: 390px;
  }
  .details {
    position: absolute;
    top: 30px;
    left: 500px;
    width: 500px;
    height: 390px;
    font-size: 16px;

  }
  .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: #2c558a;
    font-weight: 700;
    font-size: 30px;
  }
  .tankthink_style {
    width: 75%;
    line-height: 50px;
    color: #666666;
    font-size: 18px;
    font-weight: 700;
    margin-top: 5px;
  }
  .tankthink_style3 {
      width: 100%;
      line-height: 50px;
      color: #666666;
      font-size: 18px;
      font-weight: 700;
      margin-top: 5px;
  }
  .tankthink_style_span {
    display: inline-block;
    padding: 0 10px;
    height: 50px;
    border-bottom: 2px solid #6699ff;
      color: #2C558A;
  }
  .tankthink_style_product tr {
    line-height: 30px;
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
  }

  .share:hover {
    color: #2c558a;
  }
  >>>.el-dialog__body {
    word-break:normal;
    padding: 0px 20px 10px;
  }
  .tankthink_content{
    width: 100%;
  }
</style>