修改创新大赛

src/router/index.js

@@ -71,6 +71,11 @@ const router = createRouter({
           meta: { title: '吉林省重点领域技术转移平台' },
           component: () => import('@/views/news/detail.vue')
         },
+        {
+          path: '/innovation/detail',
+          meta: { title: '吉林省重点领域技术转移平台' },
+          component: () => import('@/views/innovation/detail.vue')
+        },
         {
           path: '/login',
           meta: { title: '吉林省信息技术孵化平台-用户登录' },

src/views/achievement/index.vue

@@ -235,6 +235,16 @@ const getDict = (data, model) => {
 const getArea = (data) => {
   if (data) return data.join(',')
 }
+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 lang="scss" scoped>
 .main {

src/views/demand/index.vue

@@ -200,6 +200,16 @@ const getDict = (data, model) => {
 const getArea = (data) => {
   if (data) return data.join(',')
 }
+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 lang="scss" scoped>
 .main {

src/views/innovation/detail.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one"> 详情 </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 加载中
+const loading = ref(false)
+const info = ref({})
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  search()
+  loading.value = false
+})
+const search = async () => {}
+</script>
+<style scoped lang="scss">
+.main {
+}
+</style>

src/views/innovation/index.vue

@@ -2,46 +2,222 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">
+        <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="first"></el-tab-pane>
+                  <el-tab-pane label="大奖赛" name="second"></el-tab-pane>
+                  <el-tab-pane label="经典赛" name="third"></el-tab-pane>
+                  <el-tab-pane label="训练赛" name="fourth"></el-tab-pane>
+                </el-tabs>
+              </el-col>
+              <el-col :span="12" class="oneRight">
+                <el-input v-model="input" placeholder="请输入赛题名称搜索..." class="input">
+                  <template #append>
+                    <el-button :icon="Search" />
+                  </template>
+                </el-input>
+              </el-col>
+            </el-row>
+            <el-row class="one_2" v-for="(val, indexs) in searchList" :key="indexs">
+              <el-col :span="1" class="left">{{ val.title }}：</el-col>
+              <el-col :span="23" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in val.list"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                >
+                  {{ item.label }}
+                </a-button>
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col
+              :span="24"
+              class="list"
+              v-for="(item, index) in list"
+              :key="index"
+              @click="toView(item)"
+            >
+              {{ item }}
+            </el-col>
+          </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 { 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 { ToolsStore } from '@/stores/tool';
-// import type { IQueryResult } from '@/util/types.util';
-// const toolsAxios = ToolsStore();
-
+// 路由
+const router = useRouter()
 // 加载中
 const loading = ref(false)
-const info = ref({})
+const searchForm = ref({})
+const searchList = ref([
+  {
+    title: '状态',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '可报名' },
+      { value: '2', label: '已报名' },
+      { value: '3', label: '不可报名' }
+    ]
+  },
+  {
+    title: '类别',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '智能算法' },
+      { value: '2', label: '方案应用' }
+    ]
+  },
+  {
+    title: '技术',
+    list: [
+      { value: '0', label: '数据挖掘' },
+      { value: '1', label: '自然语言处理' },
+      { value: '2', label: '计算机视觉' },
+      { value: '3', label: 'AI其他' }
+    ]
+  }
+])
+// 搜索
+const input = ref('')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = inject('limit')
+const total = ref(20)
 
 // 请求
 onMounted(async () => {
   loading.value = true
-  search()
+  await searchOther()
+  await search({ skip, limit })
   loading.value = false
 })
-const search = async () => {
-  //   let res: IQueryResult = await toolsAxios.dataCount();
-  //   if (res.errcode == '0') {
-  //     info.value = res.data;
-  //   }
+const searchOther = async () => {
+  // let result
+  // // 技术领域
+  // result = await dictDataStore.query({ code: 'field', is_use: '0' })
+  // if ($checkRes(result)) fieldList.value = result.data
+}
+const search = async (query = { skip: 0, limit }) => {
+  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
+  const res = await store.query(info)
+  if (res.errcode == '0') {
+    list.value = res.data
+    total.value = res.total
+  }
+}
+const activeName = ref('first')
+
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
+// 查看
+const toView = (item) => {
+  router.push({ path: '/innovation/detail', query: { id: item.id || item._id } })
 }
 </script>
 <style scoped lang="scss">
 .main {
-  .one {
+  background: rgb(248, 248, 248);
+  .innovation {
     .image {
       width: 100%;
       height: 250px;
     }
   }
+  .one {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0;
+    .one_1 {
+      border-bottom: 2px 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 {
+        .title {
+          color: #666;
+          font-size: 14px;
+          line-height: 15px;
+          display: inline-block;
+          overflow: hidden;
+          text-decoration: none;
+        }
+
+        .title:hover {
+          color: #2374ff;
+        }
+      }
+    }
+  }
+  .two {
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+
+    .list {
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 10px;
+    }
+  }
+
+  .thr {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px;
+  }
 }
 </style>