technology_web1/src/views/demand/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch">
              <template #type>
                <el-option v-for="(i, index) in areaList" :key="index" :label="i.label" :value="i.value"></el-option>
              </template>
              <template #label>
                <el-option v-for="(i, index) in matureList" :key="index" :label="i.label" :value="i.value"></el-option>
              </template>
              <template #value>
                <el-option v-for="(i, index) in cityList" :key="index" :label="i.label" :value="i.value"></el-option>
              </template>
              <template #sort>
                <el-option v-for="(i, index) in statusList" :key="index" :label="i.label" :value="i.value"></el-option>
              </template>
            </cSearch>
          </el-col>
          <el-col :span="24" class="two">
            <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
              <template #renderItem="{ item }">
                <el-col :span="24" class="list" @click="toView(item)">
                  <el-col :span="24" class="name textOver">
                    <el-tooltip effect="dark" :content="item.name" placement="top">
                      {{ item.name || '暂无名称' }}
                    </el-tooltip>
                  </el-col>
                  <el-col :span="24" class="two_1"> <span>技术领域: </span>{{ item.area || '暂无技术领域' }} </el-col>
                  <el-col :span="24" class="two_1"> <span>需求地区: </span>{{ item.city || '暂无需求地区' }} </el-col>
                  <el-col :span="24" class="two_1"> <span>单位: </span>{{ item.unit || '暂无单位' }} </el-col>
                </el-col>
              </template>
            </a-list>
          </el-col>
          <el-col :span="24" class="thr">
            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';
// 接口
// import { ToolsStore } from '@/stores/tool';
// import type { IQueryResult } from '@/util/types.util';
// const toolsAxios = ToolsStore();
const { proxy } = getCurrentInstance() as any;

// 路由
const router = useRouter();
// 加载中
const loading: Ref<any> = ref(false);
let list: Ref<any> = ref([
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  },
  {
    name: '拉力均衡强稳定性无焊口锚链',
    area: '先进制造',
    city: '舟山市',
    unit: '浙江易丰安全科技有限公司'
  }
]);
let total: Ref<number> = ref(12);
let skip = 0;
let limit: number = proxy.$limit;
const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
// 查询数据
let searchForm: Ref<any> = ref({});
let fields: Ref<any[]> = ref([
  { label: '技术领域', model: 'type', isSearch: true, type: 'select' },
  { label: '合作方式', model: 'label', isSearch: true, type: 'select' },
  { label: '需求地区', model: 'value', isSearch: true, type: 'select' },
  { label: '需求状态', model: 'sort', isSearch: true, type: 'select' }
]);
// 字典表
const areaList: Ref<any> = ref([
  { value: '0', label: '全部' },
  { value: '1', label: '先进制造' },
  { value: '2', label: '地球、空间与海洋' },
  { value: '3', label: '新材料' },
  { value: '4', label: '新能源与节能' },
  { value: '5', label: '核应用技术' },
  { value: '6', label: '环境保护' },
  { value: '7', label: '现代交通' },
  { value: '8', label: '现代农业' },
  { value: '9', label: '生物医药与医疗器械' },
  { value: '10', label: '电子信息' },
  { value: '11', label: '航空航天' }
]);

const cityList: Ref<any> = ref([
  { value: '0', label: '北京市' },
  { value: '1', label: '天津市' },
  { value: '2', label: '河北省' },
  { value: '3', label: '山西省' },
  { value: '4', label: '内蒙古自治区' },
  { value: '5', label: '辽宁省' },
  { value: '6', label: '吉林省' },
  { value: '7', label: '上海市' },
  { value: '8', label: '江苏省' },
  { value: '9', label: '浙江省' },
  { value: '10', label: '安徽省' },
  { value: '11', label: '福建省' },
  { value: '0', label: '江西省' },
  { value: '1', label: '山东省' },
  { value: '2', label: '河南省' },
  { value: '3', label: '湖北省' },
  { value: '4', label: '湖南省' },
  { value: '5', label: '广东省' },
  { value: '6', label: '广西壮族自治区' },
  { value: '7', label: '海南省' },
  { value: '8', label: '重庆市' },
  { value: '9', label: '四川省' },
  { value: '10', label: '贵州省' },
  { value: '11', label: '云南省' }
]);

const matureList: Ref<any> = ref([
  { value: '0', label: '全部' },
  { value: '1', label: '技术开发' },
  { value: '2', label: '技术咨询' },
  { value: '3', label: '技术服务' },
  { value: '4', label: '许可转让' },
  { value: '4', label: '完全转让' },
  { value: '4', label: '技术入股' },
  { value: '4', label: '合作开发' },
  { value: '4', label: '其他' }
]);
const statusList: Ref<any> = ref([
  { value: '0', label: '全部' },
  { value: '1', label: '洽谈中' },
  { value: '2', label: '已结束' }
]);
// 请求
onMounted(async () => {
  loading.value = true;
  await searchOther();
  await search({ skip, limit });
  loading.value = false;
});
const search = async (e: { skip: number; limit: number }) => {
  const info = { skip: e.skip, limit: e.limit };
  //   const res: IQueryResult = await userCheckAxios.query(info);
  //   if (res.errcode == '0') {
  //     list.value = res.data;
  //     total.value = res.total;
  //   }
};
// 查询其他信息
const searchOther = async () => {
  //   let res: IQueryResult;
  //   // 性别
  //   res = await dictAxios.query({ type: 'common_gender' });
  //   if (res.errcode == '0') genderList.value = res.data;
};
const toSearch = (query) => {
  searchForm.value = query;
  search({ skip, limit });
};
// 需求大厅查看详情
const toView = (item) => {
  router.push({ path: '/demand/detail', query: { id: item.id || item._id } });
};
const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(current, pageSize);
  limit = pageSize;
};
</script>
<style scoped lang="scss">
.main {
  background: url(/src/assets/detail.png) right top no-repeat;
  background-size: 100%;

  .one {}

  .two {
    .list {
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
      border-radius: 2px;
      width: 282px;
      height: 194px;
      margin-bottom: 30px;
      cursor: pointer;
      transition: all 0.3s;
      padding: 20px;

      .name {
        font-size: 16px;
        color: #121834;
        height: 16px;
        line-height: 13px;
        font-weight: 500;
        margin: 10px 0;
      }

      .name:hover {
        color: #2374ff;
      }

      .two_1 {
        font-size: 12px;
        text-align: justify;
        line-height: 12px;
        font-weight: 400;
        letter-spacing: 0;
        color: #8f97a3;
        margin-top: 15px;

        span:last-child {
          color: #525a68;
        }
      }
    }

    .list:hover {
      background: #f0f7ff;
      box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
    }
  }

  .thr {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 0 10px 0;
  }
}
</style>