cxyy-web2/src/views/five/index.vue

<template>
  <custom-layout class="main" v-loading="loading">
    <el-col :span="24" class="two">
      <div class="w_1300">
        <el-col :span="24" class="two_1">
          <el-row class="two_1_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 size="large" clearable v-model="searchForm.name" placeholder="请输入赛题名称搜索..." class="input">
                <template #append>
                  <el-button :icon="Search" @click="onSearch" />
                </template>
              </el-input>
            </el-col>
          </el-row>
          <el-row class="two_1_2">
            <el-col :span="1" class="left">状态:</el-col>
            <el-col :span="23" class="right">
              <div 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 }}
              </div>
            </el-col>
          </el-row>
          <el-row class="two_1_2">
            <el-col :span="1" class="left">技术:</el-col>
            <el-col :span="23" class="right">
              <div 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 }}
              </div>
            </el-col>
          </el-row>
          <el-row class="two_1_2">
            <el-col :span="1" class="left">行业:</el-col>
            <el-col :span="22" class="right" v-if="oneShow">
              <div 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 }}
              </div>
            </el-col>
            <el-col :span="22" class="right" v-else>
              <div class="title" v-for="(item, index) in industryList.slice(0, 14)" :key="index" type="link" size="samll" @click="toSelect(item, 'thr')" :class="[item.is_active ? 'show' : '']">
                {{ item.label }}
              </div>
            </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_2">
          <div class="list" v-for="(item, index) in list" :key="index">
            <el-image class="image" :src="getUrl(item.file)" fit="cover">
              <template v-slot:error>
                <el-image class="image" :src="match_3" fit="fill" />
              </template>
            </el-image>
            <div class="name">{{ item.name || '暂无' }}</div>
            <div class="other">
              <div class="time">
                <el-image class="image" :src="time1" fit="fill" />
                <div>{{ item.start_time || '暂无' }}~{{ item.end_time || '暂无' }}</div>
              </div>
              <div class="button" @click="toView(item)">查看 ></div>
            </div>
          </div>
        </el-col>
      </div>
    </el-col>
    <el-col :span="24" class="thr">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
    </el-col>
  </custom-layout>
</template>

<script setup>
import { onBeforeRouteLeave } from 'vue-router'
// 图片引入
import match_3 from '/images/match_3.jpg'
import time1 from '/images/time-dary.png'
const $checkRes = inject('$checkRes')
import { Search } from '@element-plus/icons-vue'
import { MatchStore } from '@/store/api/platform/match'
import { DictDataStore } from '@/store/api/system/dictData'
const store = MatchStore()
const dictDataStore = DictDataStore()
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
// 搜索
const searchForm = 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, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    ...searchForm.value,
    is_use: '0',
    status: '1',
    ...searchForm.value
  }
  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 toView = (item) => {
  router.push({ path: '/match/detail', query: { id: item.id || item._id } })
}
// 查询名称
const onSearch = () => {
  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 (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 (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 })
}
const getUrl = (item) => {
  if (item && item.length > 0) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
}
const scrollTop = ref(0)

onActivated(() => {
  // 配置参数依赖于浏览器
  document.documentElement.scrollTop = scrollTop.value
})
onBeforeRouteLeave((to, from, next) => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
  next()
})
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 350px;
    }
  }
  .two {
    .two_1 {
      background: #ffffff;
      border-radius: 10px;
      padding: 15px 0;
      .two_1_1 {
        border-bottom: 1px solid #e4e7ed;
        :deep(.el-tabs__nav-wrap:after) {
          background-color: transparent !important;
        }
        .oneList {
          .demo-tabs {
            :deep(.el-tabs__item) {
              font-size: $global-font-size-18 !important;
            }
          }
        }
      }
      .two_1_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;
          font-size: $global-font-size-20 !important;
        }

        .right {
          .show {
            color: #2374ff !important;
          }
          .title {
            color: #666;
            font-size: $global-font-size-18;
            line-height: 26px;
            margin: 0 10px;
            padding: 0 10px;
            display: inline-block;
            overflow: hidden;
            text-decoration: none;
            cursor: pointer;
          }

          .title:hover {
            color: #2374ff;
          }
        }
        .button {
          color: #2374ff;
          font-size: $global-font-size-14;
          cursor: pointer;
        }
      }
    }
    .two_ipunt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
      .input {
        margin: 0 5px 0 0;
      }
      .button {
        margin: 0 0 0 5px;
      }
    }
    .two_2 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .list {
        width: 433px;
        padding: 20px 10px;
        border-radius: 3px;

        transition: box-shadow 0.3s ease; /* 添加过渡效果，使阴影的出现更平滑 */
        .image {
          width: 410px;
          height: 250px;
          border-radius: 4px;
          overflow: hidden;
        }
        .name {
          margin: 5px 0;
          font-size: $global-font-size-18;
        }
        .other {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .time {
            display: flex;
            align-items: center;
            color: #858585;
            .image {
              width: 18px;
              height: 18px;
              margin: 0 5px 0 0;
            }
          }
          .button {
            color: $global-color-107;
            padding: 5px 15px;
          }
          .button:hover {
            color: $global-color-fff;
            background-color: $global-color-107;
            border-radius: 20px;
            cursor: default;
          }
        }
      }

      .list:hover {
        box-shadow: 0 0 10px rgb(186, 196, 240); /* 阴影效果 */
      }
    }
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>