check-work/src/views/NewPlatform/Children/Transfer.vue

<template>
  <div>
    <sen-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <div>
      <div class="search-background">
        <div class="d-flex">
          <div class="flex-3 flex-wrap">
            <span class="ins-title">技术领域：</span>
            <span
              :class="item.isActive ? 'act-color' : ''"
              :key="index"
              @click="choose(index)"
              class="ins-name"
              v-for="(item, index) in list"
            >{{ item.name }}</span>
          </div>
          <div class="flex-1 align-center">
            <a-input-search
              @search="searchFruit"
              class="item-search"
              enter-button="搜索"
              placeholder="搜索成果"
              v-model="fruitIpt"
            />
          </div>
        </div>
      </div>
    </div>
    <fruit />
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { selModel } from 'config/api';
import Fruit from 'components/PlatformList/Fruit.vue';
import SenNav from './components/SenNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
export default {
  name: 'Transfer',
  components: { SenNav, Fruit, BreadCrumb },
  data() {
    return {
      str: '这是知识产权与技术转移转化服务平台',
      title: '知识产权与技术转移转化服务平台',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '/NewPlatform/News' },
        { name: '知识产权与技术转移转化服务平台', url: '' },
      ],
      list: [],
      achList: [],
      fruitIpt: '',
    };
  },
  watch: {
    fruitIpt(val) {
      const obj = {
        content: this.fruitIpt,
        isBtn: 0,
      };
      this.setAchIpt(obj);
    },
  },
  created() {
    this.getType();
    this.setAchList([]);
  },
  methods: {
    ...mapMutations('home', ['setAchList', 'setAchIpt']),
    // 获取类型列表
    async getType() {
      try {
        const params = { param: { model: 0 } };
        const res = await selModel(params);
        const { code, mst, data } = res.data;
        if (code === 200) {
          this.list = data;
          for (var i = 0; i < this.list.length; i++) {
            this.list[i].isActive = false;
          }
          console.log(this.list);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 点击搜索
    searchFruit() {
      const obj = {
        content: this.fruitIpt,
        isBtn: 1,
      };
      this.setAchIpt(obj);
    },
    // 选中类型时触发
    choose(index) {
      const that = this;
      that.achList = [];
      const { list } = this;
      list[index].isActive = !list[index].isActive;
      this.list = [...list];
      for (let i = 0; i < list.length; i++) {
        if (list[i].isActive) {
          this.achList.push(list[i].id);
        }
      }
      this.setAchList(this.achList);
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 10px auto 15px;
}

.search-background {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  height: auto;
  padding: 0 20px;
  width: 82%;
  margin: 40px auto;
  line-height: 44px;
}

.item-search {
  width: 100%;
  height: 32px;
}

.ins-title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
}

.ins-name {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  padding: 0 10px;
  cursor: pointer;
}

.act-color {
  color: #13ACC4 !important;
}
</style>