h5 icon scroll

src/components/pageView/index.vue

@@ -0,0 +1,54 @@
<template>
  <div class="page-view">
    <img :src="logImg" style="display:none" />
    <span>浏览量 {{pageCount}}</span>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    props: [ 'pageObj' ],
    data() {
      return {
        HT_API: process.env.HT_API,
        pageCount: 0,
        logImg: ''
      }
    },
    created() {
      this.queryPageView()
      this.wlog(this.pageObj)
    },
    methods: {
      wlog(obj) {
        this.logImg = this.HT_API + '/ajax/img?__lt=' + obj.tn + '&id=' + obj.id + '&src=' + obj.src + '&_t=' + (new Date().getTime())
      },
      queryPageView() {
        var that = this
        axios.get(that.HT_API + '/ajax/log/qo/sum',{
          params: {
            tn: that.pageObj.tn,
            id: that.pageObj.id
          }
        }).then(res => {
          if (res.data.success) {
            that.pageCount = res.data.data
          }
        }).catch(err => {})
      },
      logPageCount() {
        // this.$axios.get('/ajax/log', {
        //   __lt: this.pageObj.tn,
        //   id: this.pageObj.id,
        //   src: this.pageObj.src
        // }, (res) => {})
      }
    }
  };
</script>
<style>
.page-view{
  display: inline-block;
  margin-right:15px;
}
</style>

src/pages/center/views/layout/common/Sidebar/SidebarItem.vue

@@ -0,0 +1,77 @@
<template>
  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
          <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{onlyOneChild.meta.title}}</span>
        </el-menu-item>
      </router-link>
      <el-submenu v-else :index="item.name||item.path">
        <template slot="title">
          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
          <span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
        </template>
        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
          <router-link v-else :to="resolvePath(child.path)" :key="child.name" replace>
            <el-menu-item :index="resolvePath(child.path)">
              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
  </div>
</template>
<script>
import path from 'path'
export default {
  name: 'SidebarItem',
  props: {
    // route配置json
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      onlyOneChild: null
    }
  },
  methods: {
    hasOneShowingChild(children) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          // temp set(will be used if only has one showing child )
          this.onlyOneChild = item
          return true
        }
      })
      if (showingChildren.length === 1) {
        return true
      }
      return false
    },
    resolvePath(...paths) {
      return path.resolve(this.basePath, ...paths)
    }
  }
}
</script>

src/pages/center/views/layout/common/Sidebar/index.vue

@@ -0,0 +1,34 @@
<template>
  <el-menu
    mode="vertical"
    :default-openeds="['personalCenter', 'myBusiness', 'modifyPassword']"
    :show-timeout="200"
    :default-active="$route.path">
    <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
  </el-menu>
</template>
<script>
import SidebarItem from './SidebarItem'
export default {
  components: { SidebarItem },
  watch: {
    bindCompany(val) {
      this.bindCompany = val
    }
  },
  computed: {
    ...Vuex.mapGetters([
      'bindCompany'
    ]),
    routes() {
      var aRouter = this.$router.options.routes
      if (!this.bindCompany) {
        aRouter[0].children.splice(2, 1)
      }
      return aRouter
    }
  }
}
</script>

src/pages/center/views/layout/common/index.vue

@@ -0,0 +1,102 @@
<template>
  <div class="main-content">
    <div class="boxLeft">
      <div class="headPhoto">
        <div class="userInfo">
          <div class="img-div" :style="{backgroundImage: 'url(' + headPhoto + ')'}"></div>
          <p>{{account}}</p>
        </div>
      </div>
      <sidebar></sidebar>
      <div class="exit-menu-item" @click="logout">退出登录</div>
    </div>
    <div class="boxRight">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
  import Sidebar from './Sidebar';
  export default {
    computed: {
      ...Vuex.mapGetters([
        'bindCompany',
        'headPhoto',
        'account'
      ])
    },
    components: {
      Sidebar
    },
    methods: {
      logout() {
        this.$confirm('您确认要退出登录吗?', '提示', {
          type: 'warning',
          center: true
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/#/loginPlat'
          })
        }).catch(() => {})
      }
    }
  };
</script>
<style scoped>
.main-content{
  margin: 20px 0;
  min-height: 500px;
}
.main-content .boxRight {
  padding:10px 20px;
  float: left;
  width: 880px;
  margin-left: 20px;
  background: #ffffff;
  box-sizing: border-box;
}
.main-content .boxLeft {
    float: left;
    overflow: hidden;
    width: 200px;
}
.main-content .boxLeft .headPhoto {
  height: 146px;
  background: #ffffff;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-content .boxLeft .headPhoto .userInfo {
  text-align: center;
  color: #606266;
}
.main-content .boxLeft .headPhoto .userInfo p {
  margin-top: 10px;
}
.main-content .boxLeft .headPhoto .userInfo .img-div {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: auto;
  background-size: cover;
}
.main-content .boxLeft .el-menu {
  border:none;
}
.main-content .boxLeft .exit-menu-item{
  padding-left: 20px;
  background: #ffffff;
  border-top: 10px solid #f4f6f8;
  box-sizing: content-box;
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  cursor: pointer;
}
</style>

src/pages/h5/views/index/index.vue

@@ -0,0 +1,390 @@
<template>
	<div>
    <div class="bannerA">
      <div class="logoA">
        <h2>{{plat.title}}</h2>
        <span>www.xttjpt.cn</span>
      </div>
      <img width="100%" src="../../image/bg1218.jpg" />
      <div class="search-wrap">
        <el-input class="search-input" placeholder="搜索专家、服务、资源" prefix-icon="el-icon-search"
        v-model="searchInput" @keyup.enter.native="enterSearch()"> </el-input>
      </div>
    </div>
    <div class="block-wrapper">
      <div class="mainbox">
        <div class="maintit">热门</div>
        <el-row class="gridbg">
          <el-col :span="8" v-for="item in navList" :key="item.index">
            <a :href="LinkToSearch(item.tab)">
              <i class="media-icon" :class="'icon-'+ item.icon"></i>
              <span class="media-body">{{item.name}}</span>
            </a>
          </el-col>
        </el-row>
      </div>
      <div class="mainbox">
        <div class="maintit">特约专家</div>
        <div class="content content-nf" v-if="platExperts && platExperts.length">
          <baseExpert v-for="item in platExperts" :key="item.index" :itemSingle="item" :noBlank="true"></baseExpert>
        </div>
        <a class="seeMore" :href="LinkToSearch('2')"><em>查看更多</em></a>
      </div>
      <div class="mainbox">
        <div class="maintit">热门资源</div>
        <div class="content content-nf" v-if="platResources && platResources.length">
          <baseResource v-for="item in platResources" :key="item.index" :itemSingle="item" :noBlank="true"></baseResource>
        </div>
        <a class="seeMore" :href="LinkToSearch('4')"><em>查看更多</em></a>
      </div>
      <div class="mainbox">
        <div class="maintit">最新入驻企业</div>
        <div class="content content-nf" v-if="residentComps && residentComps.length">
          <baseCompany v-for="item in residentComps" :key="item.index" :itemSingle="item" :noBlank="true"></baseCompany>
        </div>
        <a class="seeMore" :href="LinkToSearch('7')"><em>查看更多</em></a>
      </div>
    </div>
	</div>
</template>
<script>
  import { urlParse, commenTime, formatOfft, ImageUrl, defaultSet, autho } from '@/libs/util';
  import queryBase from '@/libs/queryBase';
  import baseExpert from '@/components/subTemplate/BaseExpert';
  import baseResource from '@/components/subTemplate/BaseResource';
  import baseCompany from '@/components/subTemplate/BaseCompany';
  export default {
    data() {
      return {
        /* eslint-disable no-undef */
        plat: PLAT.info,
        searchInput: '',
        platExperts: '',
        platResources: '',
        residentComps: '',
        navList: [
          {
            icon: 'mai',
            name: '平台动态',
            tab: '1'
          },
          {
            icon: 'co',
            name: '找服务',
            tab: '3'
          },
          {
            icon: 'jiao',
            name: '找资源',
            tab: '4'
          },
          {
            icon: 'bow',
            name: '找成果',
            tab: '5'
          },
          {
            icon: 'peo',
            name: '专家库',
            tab: '2'
          },
          {
            icon: 'more',
            name: '更多领域',
            tab: ''
          }
        ]
      };
    },
    created() {
      this.buttedProfessors()
      this.queryPlatResources()
      this.queryResidentComps();
    },
    components: {
      baseExpert,
      baseResource,
      baseCompany
    },
    methods: {
      LinkToSearch(val) {
        return 'h5.html#/search?n=' + val
      },
      enterSearch() {
        location.href = 'h5.html#/search?k=' + this.searchInput
      },
      buttedProfessors() {
        var that = this
        that.$axios.get('/ajax/professor/list', {}, (res) => {
          if (res.success) {
            var $data = res.data;
            var arr = []
            var hdata = { num: 1, data: $data }
            if ($data.length > 0) {
              $data.sort(function(a, b) {
                return a.level > b.level ? 1 : (a.level === b.level ? 0 : -1)
              })
              for (let i = 0; i < ($data.length > 5 ? 5: $data.length); ++i) {
                hdata.num++
                arr[i] = $data[i].id;
                hdata.num--
              }
              hdata.num--
              if (hdata.num === 0 && arr.length) {
                that.$axios.getk('/ajax/professor/qm', {
                  id: arr
                }, function(data) {
                  if (data.success && data.data) {
                    var obj = data.data
                    if (obj.length > 0) {
                      for (let m = 0; m < obj.length; ++m) {
                        obj[m].img = defaultSet.img.expert
                        if (obj[m].hasHeadImage) {
                          obj[m].img = ImageUrl(('head/' + obj[m].id + '_l.jpg'), true)
                        }
                        obj[m].auth = autho(obj[m].authType, obj[m].orgAuth, obj[m].authStatus)
                        obj[m].offt = formatOfft(obj[m], true)
                      }
                      setTimeout(() => {
                        for (let j = 0; j < obj.length; ++j) {
                          for (let n = 0; n < $data.length; ++n) {
                            if (obj[j].id === $data[n].id) {
                              if ($data[n].level) {
                                obj[j].level = $data[n].level
                              } else {
                                obj[j].level = 99999
                              }
                            }
                          }
                        }
                        obj.sort(function(a, b) {
                          return a.level > b.level ? 1 : (a.level === b.level ? 0 : -1)
                        })
                        that.platExperts = obj
                      }, 1000)
                    }
                  }
                })
              }
            }
          }
        })
      },
      queryPlatResources() {
        this.$axios.getk('/ajax/resource/index/search', {
          rows: 5
        }, (res) => {
          var _this = this;
          if (res.success) {
            var $info = res.data;
            for (let i = 0; i < $info.length; i++) {
              if ($info[i].images.length > 0) {
                $info[i].img = ImageUrl('resource/' + $info[i].images[0].imageSrc)
              } else {
                $info[i].img = defaultSet.img.resource
              }
              (function(m) {
                _this.ownerByond($info[m]);
              }(i));
            };
            this.platResources = $info;
          };
        });
      },
      ownerByond(item) {
        var _this = this;
        var type, id;
        if (item.resourceType) {
          type = item.resourceType;
          id = item.professorId || item.orgId;
        }
        if (item.category) {
          type = item.category;
          id = item.owner;
        };
        if (type === '1') {
          queryBase.getProfessor(id, function(sc, value) {
            if (sc) {
              item.ownerName = value.name;
              _this.$forceUpdate();
            }
          });
        } else if (type === '2') {
          queryBase.getOrganization(id, function(sc, value) {
            if (sc) {
              item.ownerName = value.forShort ? value.forShort : value.name;
              _this.$forceUpdate();
            }
          });
        }
      },
      queryResidentComps() {
        this.$axios.get('/ajax/company/pq', {
          pageSize: 5,
          pageNo: 1
        }, (res) => {
          if (res.success) {
            var $info = res.data.data;
            for (let i = 0; i < $info.length; ++i) {
              if (!$info[i].logo) {
                $info[i].logo = defaultSet.img.org
              }
            }
            this.residentComps = $info;
          };
        });
      }
    }
  };
</script>
<style lang="scss" rel="stylesheet/scss">
  @import '../../style/index';
  .bannerA {
    width: 100%;
    height:auto;
    position: relative;
    overflow: hidden;
    .logoA{
      text-align: center;
      width:100%;
      position: absolute;
      top:26%;
      z-index: 2;
      color: #fff;
      h2{
        font-size:30px;
        line-height: 38px;
      }
      span{
        font-size: 16px;
      }
    }
    img{
      display:block;
    }
  }
  .search-wrap{
    position: absolute;
    bottom: 16px;
    height: 40px;
    padding: 0 10px;
    width: 96%;
    left:50%;
    transform: translate(-50%, 0);
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    .search-input{
      position: absolute;
      left:0;
      top:0;
      width:100%;
      font-size:14px;
      height:40px;
      line-height:24px;
      input{
        border:none;
      }
    }
  }
  .gridbg{
    background: #FFFFFF;
    margin:auto;
    border-top: 1px solid #eee;
    .media-body{
      display: block;
      text-align: center;
      color: #333;
      font-size: 13px;
    } 
    .media-icon{
      display: block;
      margin:10px auto;
      width: 24px;
      height:24px;
      &.icon-bow{
        @include bg-image('../../image/field_icon/bow-icon.png');
      }
      &.icon-jiao{
        @include bg-image('../../image/field_icon/jiao-icon.png');
      }
      &.icon-co{
        @include bg-image('../../image/field_icon/co-icon.png');
      }
      &.icon-mai{
        @include bg-image('../../image/field_icon/mai-icon.png');
      }
      &.icon-more{
        @include bg-image('../../image/field_icon/more-icon.png');
      }
      &.icon-peo{
        @include bg-image('../../image/field_icon/peo-icon.png');
      }
    }
    .el-col{
      padding: 10px 4px;
      text-align:center;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }
  .mainbox{
    width:100%;
    margin:10px auto;
    padding: 0;
    background: #FFFFFF;
    .maintit{
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      color: #666;
    }
    .content{
      border-top: 1px solid #eee;
    }
  }
  .seeMore{
    display: block;
    cursor:pointer;
    text-align:center;
    font-size:14px;
    color:#999;
    line-height:40px;
    height:40px;
    border-top:1px solid #E5E5E5;
    position: relative;
    em{
      font-style: normal;
      position:relative;
      padding-right:5px;
      &:before{
        border: solid transparent;
        border-left-color:#ccc;
        border-width: 7px;
        content: " ";
        position: absolute;
        left: 100%;
        top: 1px;
      }
      &:after{
        border: solid transparent;
        border-left-color:#fff;
        border-width: 5px;
        content: " ";
        position: absolute;
        left: 100%;
        top: 3px;
      }
    }
    &:active{background: none;}
  }
</style>

src/pages/h5/views/layout/index.vue

@@ -0,0 +1,5 @@
<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

src/pages/h5/views/search/scrollMore.vue

@@ -0,0 +1,184 @@
<template lang="html">
    <div class="yo-scroll" @touchstart="touchStart($event)"
         @touchmove="touchMove($event)" @touchend="touchEnd($event)" :style="{top: topVal+'px'}" v-loading="dataList.loading">
      <section class="inner">
        <!-- 使用时外面的标签会填在里面 -->
        <slot>
        </slot>
        <!-- 保持加载更多条在最下面 -->
        <footer class="load-more">
          <slot name="load-more">
            <span>{{loadMoreText}}</span>
          </slot>
        </footer>
        <div class="nullData" v-show="dataList.noFlag">暂无更多数据</div>
      </section>
    </div>
</template>
<script>
export default {
  props: {
    offset: {
      type: Number,
      default: 100 //默认高度
    },
    enableLoadMore: {
      type: Boolean,
      default: true
    },
    dataList: {
      default: false,
      required: false
    },
    onLoadMore: {
      type: Function,
      default: undefined,
      require: false
    },
    topVal: {
      type: String
    }
  },
  data() {
    return {
      startX: 0,
      startY: 0,
      touching: false,
      isLoading: false,
      loadMoreText: '上拉加载更多'
    };
  },
  methods: {
    touchStart(e) {
      this.startY = e.targetTouches[0].pageY;
      this.startX = e.targetTouches[0].pageX;
      this.startScroll = this.$el.scrollTop || 0;
      this.touching = true; //留着有用，不能删除
      this.dataList.noFlag = false;
    },
    //滑动中
    touchMove(e) {
      if (!this.enableLoadMore || this.dataList.noFlag || !this.touching) {
        return;
      }
      let diff = e.targetTouches[0].pageY - this.startY - this.startScroll;
      if (diff > 0) {
        e.preventDefault();
      }
      this.loadMoreText = '上拉加载更多';
      this.$el.querySelector('.load-more').style.display = 'block';
    },
    touchEnd(e) {
      if (this.isLoading) {
        return;
      }
      this.touching = false;
      //用于判断滑动是否在原地 ----begin
      let endX = e.changedTouches[0].pageX,
        endY = e.changedTouches[0].pageY,
        dy = this.startY - endY,
        dx = endX - this.startX;
      //如果滑动距离太短
      if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
        // console.log("滑动距离太短")
        let more = this.$el.querySelector('.load-more');
        more.style.display = 'none'; //隐藏加载条
        return;
      }
      if (!this.enableLoadMore || this.isLoading) {
        let more = this.$el.querySelector('.load-more');
        more.style.display = 'none'; //隐藏加载条
        return;
      }
      let outerHeight = this.$el.clientHeight,
        innerHeight = this.$el.querySelector('.inner').clientHeight,
        scrollTop = this.$el.scrollTop,
        bottom = innerHeight - outerHeight - scrollTop;
      if (bottom <= this.offset) {
        //内容太少
        this.doLoadMore();
      } else {
        let more = this.$el.querySelector('.load-more');
        more.style.display = 'none'; //隐藏加载条
      }
    },
    doLoadMore() {
      this.isLoading = true;
      this.loadMoreText = '正在加载';
      this.onLoadMore(this.loadDone);
    },
    loadDone() {
      this.isLoading = false;
      let more = this.$el.querySelector('.load-more');
      more.style.display = 'none'; //隐藏加载条
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss">
// /*:class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"*/
.yo-scroll {
  position: absolute; //关键
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto; //关键
  z-index: 100;
  height: auto;
  -webkit-overflow-scrolling: touch;
  .inner {
    position: absolute;
    /*top: -5rem;*/
    width: 100%;
    height: auto;
    transition-duration: 300ms;
    .load-more {
      height: 5rem;
      line-height: 5rem;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      display: none;
      font-size: 13px;
      color: #999999;
    }
    .nullData {
      //暂无更多数据样式
      font-size: 13px;
      color: #999999;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .down-tip,
    .refresh-tip,
    .up-tip {
      display: none;
    }
  }
}
.yo-scroll.touch .inner {
  transition-duration: 0;
}
.yo-scroll.down .down-tip {
  display: block;
}
.yo-scroll.up .up-tip {
  display: block;
}
.yo-scroll.refresh .refresh-tip {
  display: block;
}
</style>

src/pages/h5/views/search/search.vue

@@ -0,0 +1,625 @@
<template>
  <div>
    <div class="fixedBlock">
      <div class="searchBox">
        <el-input placeholder="请输入关键词" v-model="searchText" @keyup.enter.native="clearToFun"></el-input>
      </div>
      <div class="tabBox">
        <div class="swiper-container-tab" ref="swiperNavTab">
          <div class="swiper-wrapper swiper-wrapper-tab">
            <div class="swiper-slide swiper-slide-tab"
              :class="item.tab===activeTab?'active-tab':''"
              v-for="item in navList"
              :key="item.index"
              @click.stop="slideChanged(item.tab)"
            >{{item.tit}}</div>
          </div>
        </div>
      </div>
      <div class="tabBox columnTab" v-if="activeTab==='1'">
        <div class="swiper-container-tab" ref="swiperColumnTab">
          <div class="swiper-wrapper swiper-wrapper-tab">
            <div class="swiper-slide swiper-slide-tab"
              :class="item.val===activeColumn?'active-tab':''"
              v-for="item in platTrend"
              :key="item.index"
              @click.stop="slideChangedColumn(item.val)"
            >{{item.tit}}</div>
          </div>
        </div>
      </div>
    </div>
    <v-scroll :onLoadMore="onLoadMore" :dataList="scrollData" :topVal="activeTab==='1'? '122' : '84'">
      <div v-if="activeTab==='1'">
        <template v-if="contentList.length">
          <baseContent v-for="watc in contentList" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseContent>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
      <div v-if="activeTab==='2'">
        <template v-if="searchExpert.length">
          <baseExpert v-for="watc in searchExpert" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseExpert>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
      <div v-if="activeTab==='3'">
        <template v-if="serviceList.length">
          <baseService v-for="watc in serviceList" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseService>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
      <div v-if="activeTab === '4'">
        <template v-if="resourceList.length">
          <baseResource v-for="watc in resourceList" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseResource>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
      <div v-if="activeTab === '5'">
        <template v-if="resultList.length">
          <baseResult v-for="watc in resultList" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseResult>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
      <div v-if="activeTab === '6'">
        <template v-if="searchOrg.length">
          <baseOrg v-for="watc in searchOrg" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseOrg>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
      <div v-if="activeTab === '7'">
        <template v-if="companyList.length">
          <baseCompany v-for="watc in companyList" :key="watc.index" :itemSingle="watc" :noBlank="true"></baseCompany>
        </template>
        <defaultPage v-else></defaultPage>
      </div>
    </v-scroll>
  </div>
</template>
<script>
import { urlParse, commenTime, formatOfft, ImageUrl, defaultSet, autho, platTrend } from '@/libs/util';
import baseExpert from '@/components/subTemplate/BaseExpert';
import baseOrg from '@/components/subTemplate/BaseOrg';
import baseCompany from '@/components/subTemplate/BaseCompany';
import baseService from '@/components/subTemplate/BaseService';
import baseResource from '@/components/subTemplate/BaseResource';
import baseResult from '@/components/subTemplate/BaseResult';
import baseContent from '@/components/subTemplate/BaseContent';
import loadmore from "./scrollMore.vue";
export default {
  data() {
    return {
      activeTab: '1',
      activeColumn: '1',
      platTrend,
      navList: [
        {
          tit: '动态',
          tab: '1'
        },
        {
          tit: '专家',
          tab: '2'
        },
        {
          tit: '服务',
          tab: '3'
        },
        {
          tit: '资源',
          tab: '4'
        },
        {
          tit: '成果',
          tab: '5'
        },
        {
          tit: '机构',
          tab: '6'
        },
        {
          tit: '企业',
          tab: '7'
        }
      ],
      contentList: [],
      expertList: [],
      serviceList: [],
      resourceList: [],
      resultList: [],
      orgList: [],
      companyList: [],
      dataO: {
        resSortNum: '',
        resTime: '',
        resId: '',
        serSortFirst: '',
        serTime: '',
        serId: '',
        patSortNum: '',
        patCreateTime: '',
        patId: ''
      },
      searchText: '',
      pageNo: 1,
      rows: 10,
      scrollData:{
        noFlag: false, //暂无更多数据显示
        loading: false
      }
    };
  },
  components: {
    'v-scroll': loadmore,
    baseExpert,
    baseOrg,
    baseCompany,
    baseService,
    baseResource,
    baseResult,
    baseContent
  },
  computed: {
    searchExpert: function() {
      var search = this.searchText;
      if (search) {
        return this.expertList.filter(function(item) {
          return Object.keys(item).some(function(key) {
            return String(item[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.expertList;
    },
    searchOrg: function() {
      var search = this.searchText;
      if (search) {
        return this.orgList.filter(function(item) {
          return Object.keys(item).some(function(key) {
            return String(item[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.orgList;
    }
  },
  created() {
    if (urlParse('n')) {
      this.activeTab = urlParse('n');
    }
    if (urlParse('k')) {
      this.searchText = urlParse('k');
    }
    this.tabTofun()
  },
  mounted() {
    var that = this
    this.mySwiperTab = new Swiper(that.$refs.swiperNavTab, {
      freeMode: true,
      slidesPerView: 'auto',
      freeModeSticky: true
    });
    this.swiperColumnTab = new Swiper(that.$refs.swiperColumnTab, {
      freeMode: true,
      slidesPerView: 'auto',
      freeModeSticky: true
    });
  },
  methods: {
    slideChanged(val) {
      this.activeTab = val
      var num = parseInt(val) - 1
      if (num < 3) {
        num = 0
      }
      this.mySwiperTab.slideTo(num, 500, false)
      this.clearToFun()
    },
    slideChangedColumn(val) {
      this.activeColumn = val
      var num = parseInt(val) - 1
      if (num < 3) {
        num = 0
      }
      this.swiperColumnTab.slideTo(num, 500, false)
      this.contentList = []
      this.pageNo = 1
      this.contentListFun()
    },
    clearToFun() {
      this.contentList = []
      this.expertList = []
      this.serviceList = []
      this.resourceList = []
      this.resultList = []
      this.orgList = []
      this.companyList = []
      this.dataO = {
        resSortNum: '',
        resTime: '',
        resId: '',
        serSortFirst: '',
        serTime: '',
        serId: '',
        patSortNum: '',
        patCreateTime: '',
        patId: ''
      }
      this.pageNo = 1
      this.tabTofun()
    },
    tabTofun() {
      const tab = this.activeTab
      if (tab === '1') {
        this.contentListFun()
      } else if (tab === '2') {
        this.expertListFun()
      } else if (tab === '3') {
        this.serviceListFun()
      } else if (tab === '4') {
        this.resourceListFun()
      } else if (tab === '5') {
        this.resultListFun()
      } else if (tab === '6') {
        this.orgListFun()
      } else if (tab === '7') {
        this.companyListFun()
      }
    },
    onLoadMore(done) {
      var that = this
      this.pageNo++;
      setTimeout(() => {
        that.tabTofun()
        that.scrollData.noFlag = true;
        done();
      }, 2000);
    },
    contentListFun() {
      var that = this
      that.scrollData.loading = true
      this.$axios.get('/ajax/article/pq', {
        title: that.searchText,
        catalog: that.activeColumn,
        published: 1,
        pageSize: that.rows,
        pageNo: that.pageNo
      }, (res) => {
        if (res.success && res.data) {
          if (res.data.pageNo !== that.pageNo) {
            return;
          }
          var $info = res.data.data;
          if ($info.length > 0) {
            for (let i = 0; i < $info.length; ++i) {
              if ($info[i].modifyTime) {
                $info[i].modifyTime = commenTime($info[i].modifyTime, true)
              }
            }
            that.contentList = that.contentList.concat($info);
          }
        };
        that.scrollData.loading = false
      });
    },
    expertListFun() {
      var that = this
      that.scrollData.loading = true
      that.$axios.get('/ajax/professor/list', {}, (res) => {
        if (res.success) {
          var $data = res.data;
          var arr = []
          var hdata = { num: 1, data: $data }
          if ($data.length > 0) {
            for (let i = 0; i < $data.length; ++i) {
              hdata.num++
              arr[i] = $data[i].id;
              hdata.num--
            }
            hdata.num--
            if (hdata.num === 0 && arr.length) {
              that.$axios.getk('/ajax/professor/qm', {
                id: arr
              }, function(data) {
                if (data.success && data.data) {
                  var obj = data.data
                  if (obj.length > 0) {
                    for (let m = 0; m < obj.length; ++m) {
                      obj[m].img = defaultSet.img.expert
                      if (obj[m].hasHeadImage) {
                        obj[m].img = ImageUrl(('head/' + obj[m].id + '_l.jpg'), true)
                      }
                      obj[m].auth = autho(obj[m].authType, obj[m].orgAuth, obj[m].authStatus)
                      obj[m].offt = formatOfft(obj[m], true)
                    }
                    setTimeout(() => {
                      for (let j = 0; j < obj.length; ++j) {
                        for (let n = 0; n < $data.length; ++n) {
                          if (obj[j].id === $data[n].id) {
                            if ($data[n].level) {
                              obj[j].level = $data[n].level
                            } else {
                              obj[j].level = 99999
                            }
                          }
                        }
                      }
                      obj.sort(function(a, b) {
                        return a.level > b.level ? 1 : (a.level === b.level ? 0 : -1)
                      })
                      that.expertList = obj
                      that.scrollData.loading = false
                    }, 1000)
                  }
                }
              })
            }
          }
        } else {
          that.scrollData.loading = false
        }
      })
    },
    orgListFun() {
      var that = this
      that.scrollData.loading = true
      that.$axios.get('/ajax/org/list', {}, (res) => {
        if (res.success) {
          var $data = res.data;
          var arr = []
          var hdata = { num: 1, data: $data }
          if ($data.length > 0) {
            for (let i in $data) {
              hdata.num++
              arr[i] = $data[i].id;
              hdata.num--
            }
            hdata.num--
            if (hdata.num === 0 && arr.length) {
              that.$axios.getk('/ajax/org/qm', {
                id: arr
              }, function(data) {
                if (data.success && data.data) {
                  var obj = data.data
                  if (obj.length > 0) {
                    for (let m = 0; m < obj.length; ++m) {
                      obj[m].logo = defaultSet.img.org
                      if (obj[m].hasOrgLogo) {
                        obj[m].logo = ImageUrl(('org/' + obj[m].id + '.jpg'), true)
                      }
                      if (obj[m].industry) {
                        obj[m].industry = obj[m].industry.replace(/,/g, ' | ')
                      }
                    }
                    setTimeout(() => {
                      for (let j = 0; j < obj.length; ++j) {
                        for (let n = 0; n < $data.length; ++n) {
                          if (obj[j].id === $data[n].id) {
                            if ($data[n].level) {
                              obj[j].level = $data[n].level
                            } else {
                              obj[j].level = 99999
                            }
                          }
                        }
                      }
                      obj.sort(function(a, b) {
                        return a.level > b.level ? 1 : (a.level === b.level ? 0 : -1)
                      })
                      that.orgList = obj
                      that.scrollData.loading = false
                    }, 1000);
                  }
                }
              })
            }
          }
        } else {
          that.scrollData.loading = false
        }
      })
    },
    companyListFun() {
      var that = this
      that.scrollData.loading = true
      this.$axios.get('/ajax/company/pq', {
        pageSize: that.rows,
        pageNo: that.pageNo
      }, (res) => {
        if (res.success) {
          if (res.data.pageNo !== that.pageNo) {
            return;
          }
          var $info = res.data.data;
          if ($info.length > 0) {
            for (let i = 0; i < $info.length; ++i) {
              if (!$info[i].logo) {
                $info[i].logo = defaultSet.img.org
              }
              $info[i].industry = that.getCompanyKeyword($info[i].id)
              that.$forceUpdate()
            }
            that.companyList = that.companyList.concat($info);
          };
        };
        that.scrollData.loading = false
      });
    },
    getCompanyKeyword(id) {
      var that = this
      var objKey = []
      that.$axios.get('/ajax/company/qo/keyword', {
        id: id,
        type: 1
      }, function(res) {
        if (res.success && res.data) {
          const str = res.data
          if (str.length > 0) {
            str.map(item => {
              objKey.push(item.value)
            })
          }
        }
      })
      return objKey
    },
    resourceListFun() {
      var that = this
      that.scrollData.loading = true
      this.$axios.getk('/ajax/resource/index/search', {
        key: that.searchText,
        sortNum: that.dataO.resSortNum,
        publishTime: that.dataO.resTime,
        id: that.dataO.resId,
        rows: that.rows
      }, (res) => {
        if (res.success) {
          var $info = res.data;
          if ($info.length > 0) {
            that.dataO.resSortNum = $info[$info.length - 1].sortNum;
            that.dataO.resTime = $info[$info.length - 1].publishTime;
            that.dataO.resId = $info[$info.length - 1].resourceId;
            that.resourceList = that.resourceList.concat($info);
          }
        };
        that.scrollData.loading = false
      });
    },
    resultListFun() {
      var that = this
      that.scrollData.loading = true
      this.$axios.getk('/ajax/ppatent/index/search', {
        key: that.searchText,
        sortNum: that.dataO.patSortNum,
        createTime: that.dataO.patCreateTime,
        id: that.dataO.patId,
        rows: that.rows
      }, (res) => {
        if (res.success) {
          var $info = res.data;
          if ($info.length > 0) {
            that.dataO.patSortNum = $info[$info.length - 1].sortNum;
            that.dataO.patCreateTime = $info[$info.length - 1].createTime;
            that.dataO.patId = $info[$info.length - 1].id;
            that.resultList = that.resultList.concat($info);
          };
        };
        that.scrollData.loading = false
      });
    },
    serviceListFun() {
      var that = this
      that.scrollData.loading = true
      this.$axios.getk('/ajax/ware/index/search', {
          key: that.searchText,
          sortFirst: that.dataO.serSortFirst,
          time: that.dataO.serTime,
          id: that.dataO.serId,
          rows: that.rows
      }, (res) => {
        if (res.success) {
          var $info = res.data;
          if ($info.length > 0) {
            that.dataO.serSortFirst = $info[$info.length - 1].sortFirst;
            that.dataO.serTime = $info[$info.length - 1].modifyTime;
            that.dataO.serId = $info[$info.length - 1].id;
            that.serviceList = that.serviceList.concat($info);
          };
        };
        that.scrollData.loading = false
      });
    }
  },
  beforeDestroy() {
    this.mySwiperTab.destroy()
    this.swiperColumnTab.destroy()
  }
};
</script>
<style lang="scss" rel="stylesheet/scss">
@import '../../style/index';
.fixedBlock {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  .searchBox {
    display: flex;
    justify-content: center;
    position: relative;
    height: 42px;
    background: $--color-primary;
    overflow: hidden;
    .el-input {
      width: 98%;
      margin: 6px auto;
      .el-input__inner {
        border-color: $--color-primary;
        height: 30px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
}
.tabBox {
  height: 40px;
  .swiper-slide-tab {
    line-height: 40px;
    font-size: 15px;
    text-align: center;
    background: #fff;
    width: auto;
    padding: 0 5%;
    &:after {
      position: absolute;
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      z-index: 2;
      display: block;
      width: 100%;
      height: 1px;
      content: "";
      background-color: #dcdcdc;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-transform: scaleY(0.5);
    }
    &.active-tab {
      color: $--color-primary;
      &:after {
        opacity: 1;
        background-color: $--color-primary;
        height: 4px;
      }
    }
  }
  &.columnTab{
    position: fixed;
    top: 80px;
    width: 100%;
    z-index: 3;
    .swiper-slide-tab{
      margin:5px 4px;
      line-height: 32px;
      padding:0 8px;
      &:after{
        content:none;
      }
      &.active-tab {
        background: $--color-primary;
        color:#fff;
        &:after {
          content:none;
        }
      }
    }
  }
}
</style>