technique_web2/src/views/innovation/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="innovation">
          <el-image class="image" :src="innovation" fit="fill" />
        </el-col>
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-row class="one_1">
              <el-col :span="12" class="oneLeft">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="全部比赛" name="-1"></el-tab-pane>
                  <el-tab-pane label="大奖赛" name="0"></el-tab-pane>
                  <el-tab-pane label="经典赛" name="1"></el-tab-pane>
                  <el-tab-pane label="训练赛" name="2"></el-tab-pane>
                </el-tabs>
              </el-col>
              <el-col :span="12" class="oneRight">
                <el-input
                  clearable
                  v-model="input"
                  placeholder="请输入赛题名称搜索..."
                  class="input"
                >
                  <template #append>
                    <el-button :icon="Search" @click="onSearch" />
                  </template>
                </el-input>
              </el-col>
            </el-row>
            <el-row class="one_2">
              <el-col :span="1" class="left">状态：</el-col>
              <el-col :span="23" class="right">
                <a-button
                  class="title"
                  v-for="(item, index) in statusList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'one')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
            </el-row>
            <el-row class="one_2">
              <el-col :span="1" class="left">技术：</el-col>
              <el-col :span="23" class="right">
                <a-button
                  class="title"
                  v-for="(item, index) in typeList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'two')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
            </el-row>
            <el-row class="one_2">
              <el-col :span="1" class="left">行业：</el-col>
              <el-col :span="22" class="right" v-if="oneShow">
                <a-button
                  class="title"
                  v-for="(item, index) in industryList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'thr')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
              <el-col :span="22" class="right" v-else>
                <a-button
                  class="title"
                  v-for="(item, index) in industryList.slice(0, 12)"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'thr')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
              <el-col :span="1" class="button">
                <span v-if="!oneShow" @click="oneShow = true">
                  更多
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <span v-else @click="oneShow = false">
                  收起
                  <el-icon><ArrowUp /></el-icon>
                </span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" class="two">
            <el-row
              :span="24"
              class="list"
              v-for="(item, index) in list"
              :key="index"
              @click="toView(item)"
            >
              <div class="join" :class="[item.match_status == '0' ? 'join0' : 'join1']">
                {{ getDict(item.match_status, 'status') }}
              </div>
              <el-col :span="4" class="left">
                <el-image
                  v-if="item.file && item.file.length > 0"
                  class="image"
                  :src="item.file[0].url"
                  fit="fill"
                />
                <el-image v-else class="image" :src="news" fit="fill" />
              </el-col>
              <el-col :span="20" class="right">
                <el-col :span="24" class="right_1">
                  <span class="type">{{ getDict(item.form, 'form') }}</span>
                  <span class="title">{{ item.name || '暂无比赛名称' }}</span>
                </el-col>
                <el-col :span="24" class="right_2">
                  组织单位：{{ item.organization || '暂无组织单位' }}
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="20" class="right_3Left">
                    比赛日期：{{ getTime(item.time) }}
                  </el-col>
                  <el-col :span="4" class="right_3Right">
                    {{ item.money || '免费' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="right_4">
                  <el-tag type="primary">{{ getDict(item.type, 'type') }}</el-tag>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" class="thr">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :page-sizes="[10, 20, 50, 100, 200]"
              :total="total"
              :page-size="limit"
              v-model:current-page="currentPage"
              @current-change="changePage"
              @size-change="sizeChange"
            >
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const $checkRes = inject('$checkRes')
import { Search } from '@element-plus/icons-vue'
import { get } from 'lodash-es'
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
import { MatchStore } from '@/store/api/platform/match'
const store = MatchStore()
const dictDataStore = DictDataStore()
// 图片引入
import innovation from '@/assets/innovation.png'
import news from '@/assets/news.png'
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
const searchForm = ref({})
// 搜索
const input = ref('')
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const typeList = ref([])
const formList = ref([])
const statusList = ref([])
const industryList = ref([])
// 是否展开
const oneShow = ref(false)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // 类型
  result = await dictDataStore.query({ code: 'matchType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 类别
  result = await dictDataStore.query({ code: 'matchForm', is_use: '0' })
  if ($checkRes(result)) formList.value = result.data
  // 赛事行业
  result = await dictDataStore.query({ code: 'matchIndustry', is_use: '0' })
  if ($checkRes(result)) industryList.value = result.data
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  statusList.value.unshift({ value: '-1', label: '全部' })
  industryList.value.unshift({ value: '-1', label: '全部' })
  typeList.value.unshift({ value: '-1', label: '全部' })
}
const search = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    ...searchForm.value,
    is_use: '0',
    status: '1'
  }
  console.log(info)
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const activeName = ref('-1')

const handleClick = async (tab) => {
  if (tab.props.name != '-1') searchForm.value.form = tab.props.name
  else delete searchForm.value.form
  loading.value = true
  await search({ skip, limit })
  loading.value = false
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'form') res = formList.value.find((f) => f.value == data)
  else if (model == 'type') res = typeList.value.find((f) => f.value == data)
  else if (model == 'status') res = statusList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 查看
const toView = (item) => {
  router.push({ path: '/innovation/detail', query: { id: item.id || item._id } })
}
// 时间
const getTime = (data) => {
  if (data) return `${data[0]} - ${data[1]}`
}
// 查询名称
const onSearch = () => {
  if (input.value) searchForm.value.name = input.value
  else delete searchForm.value.name
  search({ skip, limit })
}
// 选择查询
const toSelect = async (item, num) => {
  if (num == 'one') {
    for (const val of statusList.value) {
      if (val.value == item.value) {
        if (item.value != '-1') searchForm.value.match_status = item.value
        else delete searchForm.value.match_status
        val.is_active = true
      } else val.is_active = false
    }
  }
  if (num == 'two') {
    for (const val of typeList.value) {
      if (val.value == item.value)
        if (val.value == item.value) {
          if (item.value != '-1') searchForm.value.type = item.value
          else delete searchForm.value.type
          val.is_active = true
        } else val.is_active = false
    }
  }
  if (num == 'thr') {
    for (const val of industryList.value) {
      if (val.value == item.value)
        if (val.value == item.value) {
          if (item.value != '-1') searchForm.value.industry = item.value
          else delete searchForm.value.industry
          val.is_active = true
        } else val.is_active = false
    }
  }
  loading.value = true
  await search({ skip, limit })
  loading.value = false
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  background: rgb(248, 248, 248);
  .innovation {
    .image {
      width: 100%;
      height: 200px;
    }
  }
  .one {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0;
    .one_1 {
      border-bottom: 1px solid #e4e7ed;
      :deep(.el-tabs__nav-wrap:after) {
        background-color: transparent !important;
      }
    }
    .one_2 {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: #9d9898 1px dashed;

      .left {
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: PingFangSC-Medium;
      }

      .right {
        .show {
          color: #2374ff !important;
        }
        .title {
          color: #666;
          font-size: 14px;
          line-height: 15px;
          margin: 0 10px;
          display: inline-block;
          overflow: hidden;
          text-decoration: none;
        }

        .title:hover {
          color: #2374ff;
        }
      }
      .button {
        color: #2374ff;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
  .two {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;

    .list {
      display: flex;
      align-items: center;
      min-height: 150px;
      width: 100%;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
      border: 1px solid #f5f5f5;
      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        .image {
          width: 180px;
          height: 120px;
        }
      }
      .right {
        .right_1 {
          padding: 10px 0 0 0;
          .type {
            padding-left: 4px;
            padding-right: 4px;
            height: 22px;
            line-height: 20px;
            background: #f8f9fc;
            border-radius: 1px;
            border: 1px solid #dde2e7;
            font-size: 12px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #a9b2c6;
            text-align: center;
            vertical-align: top;
            display: inline-block;
            margin-right: 8px;
          }
          .title {
            max-width: 88%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 16px;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #222;
            line-height: 22px;
          }
        }
        .right_2 {
          padding: 5px 0;
          font-size: 12px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #666;
        }
        .right_3 {
          padding: 5px 0;
          display: flex;
          justify-content: space-between;
          .right_3Left {
            font-size: 12px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #949fb8;
          }
          .right_3Right {
            text-align: right;
            font-size: 16px;
            font-family:
              PingFangSC-Semibold,
              PingFang SC;
            font-weight: 600;
            color: #ff5602;
          }
        }
        .right_4 {
          padding-top: 10px;
          border-top: 1px solid #f3f3f3;
        }
      }
      .join {
        position: absolute;
        right: -23px;
        top: 10px;
        font-size: 12px;
        font-family:
          PingFangSC-Normal,
          PingFang SC;
        color: #fff;
        line-height: 21px;
        height: 21px;
        width: 100px;
        text-align: center;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        padding-left: 9px;
      }
      .join0 {
        background: #e6f4fe;
        color: #638aa5;
      }
      .join1 {
        background: #ededed;
        color: #666c7d;
      }
    }
  }

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