mobile-official/src/views/service/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <!-- <el-col :span="12" class="btn">
            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '智慧推荐' } })" disabled>
              <el-image :src="onePic"></el-image>
              <p>智慧推荐</p>
            </el-link>
          </el-col>
          <el-col :span="12" class="btn">
            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '展会管理' } })">
              <el-image :src="twoPic"></el-image>
              <p>展会管理</p>
            </el-link>
          </el-col>
          <el-col :span="12" class="btn">
            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '科技评估' } })" disabled>
              <el-image :src="threePic"></el-image>
              <p>科技评估</p>
            </el-link>
          </el-col>
          <el-col :span="12" class="btn">
            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '合同在线' } })" disabled>
              <el-image :src="fourPic"></el-image>
              <p>合同在线</p>
            </el-link>
          </el-col>
          <el-col :span="12" class="btn">
            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '信用认证' } })" disabled>
              <el-image :src="fivePic"></el-image>
              <p>信用认证</p>
            </el-link>
          </el-col>
          <el-col :span="12" class="btn">
            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '绩效评价' } })" disabled>
              <el-image :src="sixPic"></el-image>
              <p>绩效评价</p>
            </el-link>
          </el-col> -->
          <!-- <el-col :span="24" class="topImage">
            <el-image :src="topImage"></el-image>
          </el-col>
          <el-col :span="24" class="info">
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '智慧推荐' } })" disabled>
                <el-image :src="onePic"></el-image>
                <p>智慧推荐</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '展会管理' } })">
                <el-image :src="twoPic"></el-image>
                <p>展会管理</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '动态监测' } })">
                <el-image :src="sevenPic"></el-image>
                <p>动态监测</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '科技评估' } })" disabled>
                <el-image :src="threePic"></el-image>
                <p>科技评估</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '合同在线' } })" disabled>
                <el-image :src="fourPic"></el-image>
                <p>合同在线</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '信用认证' } })" disabled>
                <el-image :src="fivePic"></el-image>
                <p>信用认证</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '绩效评价' } })" disabled>
                <el-image :src="sixPic"></el-image>
                <p>绩效评价</p>
              </el-link>
            </el-col>
            <el-col :span="6" class="btn">
              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '在线咨询' } })" disabled>
                <el-image :src="eightPic"></el-image>
                <p>在线咨询</p>
              </el-link>
            </el-col>
          </el-col> -->
        </el-col>
        <el-col :span="24" class="main1">
          <el-col :span="24" class="search">
            <el-col :span="6" class="type">
              <el-select v-model="type" placeholder="请选择" clearable @change="typeChange">
                <el-option v-for="(item, index) in typelist" :key="index" :label="item.name" :value="item.type"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="18" class="input">
              <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
            </el-col>
          </el-col>
          <el-col :span="24" class="main1info">
            <van-tabs v-model="active">
              <van-tab title="专家问诊">
                <technicallist type="1" :list="oneList"></technicallist>
              </van-tab>
              <van-tab title="行业研究">
                <technicallist type="2" :list="twoList"></technicallist>
              </van-tab>
              <van-tab title="嘉宾访谈">
                <technicallist type="3" :list="threeList"></technicallist>
              </van-tab>
              <van-tab title="项目路演">
                <technicallist type="4" :list="fourList"></technicallist>
              </van-tab>
            </van-tabs>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
import footInfo from '@/layout/common/footInfo.vue';
import technicallist from './parts/technicallist.vue';
const { mapActions: column } = createNamespacedHelpers('column');
const { mapActions: news } = createNamespacedHelpers('news');
const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
export default {
  name: 'index',
  props: {},
  components: {
    NavBar,
    // footInfo,
    technicallist,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      topImage: require('@/assets/topImage.jpg'),
      onePic: require('@/assets/bendi1.png'),
      twoPic: require('@/assets/bendi2.png'),
      threePic: require('@/assets/bendi3.png'),
      fourPic: require('@/assets/bendi4.png'),
      fivePic: require('@/assets/bendi5.png'),
      sixPic: require('@/assets/bendi6.png'),
      sevenPic: require('@/assets/bendi7.png'),
      eightPic: require('@/assets/bendi8.png'),
      // 技术交流
      // 栏目列表
      columnList: [],
      active: 0,
      oneList: [],
      twoList: [],
      threeList: [],
      fourList: [],
      // 查询
      typelist: [
        { name: '专家问诊', type: '1' },
        { name: '行业研究', type: '2' },
        { name: '嘉宾访谈', type: '3' },
        { name: '项目路演', type: '4' },
      ],
      name: '',
      type: '',
    };
  },
  async created() {
    await this.searchCloumn();
    await this.search();
  },
  methods: {
    ...column({ columnquery: 'query', columnInfo: 'fetch' }),
    ...news({ newsList: 'query' }),
    ...newsguidance({ danceQuery: 'query' }),
    ...newsroadshow({ adshowQuery: 'query' }),
    // 技术交流
    async searchCloumn() {
      const res = await this.columnquery();
      if (this.$checkRes(res)) {
        this.$set(this, `columnList`, res.data);
      }
    },
    // 查询列表
    async search() {
      let column = this.columnList;
      for (const i of column) {
        if (i.name == '专家问诊') {
          const res = await this.newsList({ column_id: i._id });
          if (this.$checkRes(res)) this.$set(this, `oneList`, res.data);
        } else if (i.name == '行业研究') {
          const res = await this.newsList({ column_id: i._id });
          if (this.$checkRes(res)) this.$set(this, `twoList`, res.data);
        }
      }
      const jiabin = await this.danceQuery();
      if (this.$checkRes(jiabin)) this.$set(this, `threeList`, jiabin.data);
      const luyan = await this.adshowQuery();
      if (this.$checkRes(luyan)) this.$set(this, `fourList`, luyan.data);
    },
    // 输入框是搜索
    async searchList({ ...info } = {}) {
      if (this.name) {
        info.title = this.name;
        let type = this.type;
        if (type == 1) {
          let expertCol = this.columnList.find(i => i.name == '专家问诊');
          const res = await this.newsList({ column_id: expertCol._id, ...info });
          if (this.$checkRes(res)) this.$set(this, `oneList`, res.data);
        } else if (type == 2) {
          let workCol = this.columnList.find(i => i.name == '行业研究');
          const res = await this.newsList({ column_id: workCol._id, ...info });
          if (this.$checkRes(res)) this.$set(this, `twoList`, res.data);
        } else if (type == 3) {
          const jiabin = await this.danceQuery({ ...info });
          if (this.$checkRes(jiabin)) this.$set(this, `threeList`, jiabin.data);
        } else if (type == 4) {
          const luyan = await this.adshowQuery({ ...info });
          if (this.$checkRes(luyan)) this.$set(this, `fourList`, luyan.data);
        }
      } else {
        this.search();
      }
    },
    // 选择类型
    typeChange(value) {
      if (value) {
        this.active = '';
        this.$set(this, `type`, value);
        let index = this.typelist.findIndex(i => i.type == value);
        if (index) {
          this.$set(this, `active`, index);
        }
      }
    },
    // 输入框查询
    onSearch(data) {
      this.$set(this, `name`, data);
      if (this.type) {
        this.searchList();
      } else {
        this.$notify({
          message: '请选择信息类型',
          type: 'danger',
        });
      }
    },
    // 智慧推荐
    oneBtn() {},
    // 展会管理
    twoBtn() {
      console.log('智慧推荐');
    },
    // 科技评估
    threeBtn() {
      console.log('智慧推荐');
    },
    // 合同在线
    fourBtn() {
      console.log('智慧推荐');
    },
    // 信用认证
    fiveBtn() {
      console.log('智慧推荐');
    },
    // 绩效评价
    sixBtn() {
      console.log('智慧推荐');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #fff;
}
.top {
  height: 46px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}
.main {
  // min-height: 570px;
  .topImage {
    height: 160px;
    .el-image {
      width: 100%;
      height: 160px;
    }
  }
  .info {
    .btn {
      padding: 15px 0;
      text-align: center;
      border: 1px solid #f9f9f9;
      .el-image {
        width: 45px;
        height: 45px;
        overflow: hidden;
      }
      p {
        font-size: 15px;
        font-family: 楷体;
        padding: 5px 0 0 0;
        font-weight: bold;
      }
    }
    .btn:nth-child(2) .el-image {
      width: 45px;
      height: 40px;
      margin: 2px 0 3px 0;
    }
  }
  // .btn {
  //   text-align: center;
  //   background: #fff;
  //   margin: 10px 10px 0 10px;
  //   width: 44%;
  //   border-radius: 5px;
  //   padding: 15px 0;
  //   p {
  //     font-size: 17px;
  //     font-family: 楷体;
  //     padding: 5px 0 0 0;
  //     font-weight: bold;
  //   }
  // }
}
.main1 {
  position: relative;
  .search {
    position: fixed;
    width: 100%;
    z-index: 999;
    border-bottom: 1px solid #ccc;
    .type {
      /deep/.el-input__inner {
        border: none;
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      .el-select {
        padding: 10px 0px 0px 5px;
      }
      /deep/.el-input__icon {
        line-height: 30px;
      }
    }
    .input {
      .van-search {
        padding: 10px 12px 10px 0;
      }
    }
  }
  .main1info {
    position: absolute;
    width: 100%;
    top: 54px;
    background: #f9fafc;
  }
}
.foot {
  position: absolute;
  bottom: 0;
}
</style>