mobile-official/src/views/dockCenter/statisInfo/parts/technology.vue

<template>
  <div id="technology">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="shaixuan">
          技术领域：
          <el-select v-model="field" filterable clearable placeholder="请选择所属领域" @change="changeField">
            <el-option label="先进制造" value="0"></el-option>
            <el-option label="新材料" value="1"></el-option>
            <el-option label="光电子" value="2"></el-option>
            <el-option label="信息技术" value="3"></el-option>
            <el-option label="文化和科技融合" value="4"></el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
            <el-col :span="24" class="name">
              {{ item.name }}
            </el-col>
            <el-col :span="24" class="text">
              技术领域
              <span>
                {{
                  item.field == '0'
                    ? '先进制造'
                    : item.field == '1'
                    ? '新材料'
                    : item.field == '2'
                    ? '光电子'
                    : item.field == '3'
                    ? '信息技术'
                    : item.field == '4'
                    ? '文化和科技融合'
                    : '暂无'
                }}
              </span>
            </el-col>
            <el-col :span="24" class="text">
              合作方式
              <span>
                {{
                  item.coopermode == '0'
                    ? '技术转让'
                    : item.coopermode == '1'
                    ? '技术服务'
                    : item.coopermode == '2'
                    ? '技术许可'
                    : item.coopermode == '3'
                    ? '技术融资'
                    : item.coopermode == '4'
                    ? '其他'
                    : '暂无'
                }}
              </span>
            </el-col>
            <el-col :span="24" class="text">
              交易方式：
              <span>
                {{ item.business == '0' ? '公用' : item.business == '1' ? '竞价' : item.business == '2' ? '转让' : '暂无' }}
              </span>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
export default {
  name: 'technology',
  props: {},
  components: {},
  data: function() {
    return {
      // 筛选
      field: '',
      list: [ ],
      newArr:[]
    };
  },
  created() {
    this.search();
  },
  methods: {
        ...dock({ dockQuery: 'query', dockfetch: 'fetch',dockupdate:'update' }),
        async search() {
          let res = await this.dockfetch(this.user.uid);
          let arr = res.data.apply.map(item => item.goodsList);
          arr = _.flattenDeep(arr);
          var newArr = arr.filter(item => item.totaltype === '0');
                this.$set(this, `newArr`, newArr);
          this.$set(this, `list`, newArr);
    },
    // 筛选技术领域
    changeField(value) {
      var arr = this.newArr.filter(item => item.field === value);
      this.$set(this, `list`, arr);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.shaixuan {
  padding: 0 0 10px 10px;
}
.list {
  margin: 0 5px 10px 5px;
  width: 97%;
  padding: 0 10px;
  border-radius: 10px;
  background: #f9fafc;
  .name {
    padding: 5px 0px;
    font-size: 16px;
  }
  .text {
    padding: 5px 0;
    font-size: 14px;
    color: #ccc;
    span {
      color: #000;
    }
  }
}
</style>