|
|
@@ -1,203 +1,203 @@
|
|
|
-<template>
|
|
|
- <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
|
|
|
- <div v-else class="w1000 category">
|
|
|
- <div class="header_list">
|
|
|
- <div class="top_type">
|
|
|
- <div class="type df aic">
|
|
|
- <div class="left_title">类型</div>
|
|
|
- <div class="right_type f1 df fw">
|
|
|
- <span v-for="item in typeArr" :key="item.id" class="cont"
|
|
|
- :class="{ active: typeIndex === item.id }" @click="selectType('type', item.id)">
|
|
|
- {{ item.name }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="size df aic">
|
|
|
- <div class="left_title">标签</div>
|
|
|
- <div class="right_type f1 df fw">
|
|
|
- <span v-for="item in tagArr" :key="item.id" class="cont"
|
|
|
- :class="{ active: tag_idIndex === item.id }" @click="selectType('tag_id', item.id)">
|
|
|
- {{ item.name }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 按最xxx排序 -->
|
|
|
- <!-- <el-button :plain="true" round v-for="(item, index) in categoryList" :key="index"
|
|
|
- @click="selectType('order', index)">
|
|
|
- <span :class="{ active: orderIndex === index }">{{ item.title }}</span>
|
|
|
- </el-button> -->
|
|
|
- </div>
|
|
|
- <!-- 游戏列表 -->
|
|
|
- <div v-if="(gameLis.length > 0)">
|
|
|
- <RankList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" />
|
|
|
- <div class="more df aic jcc" v-if="params.page * params.pagesize <= gameLis.length">
|
|
|
- <el-button class="df aic jcc" @click="loadMore">更多</el-button>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-empty v-else></el-empty>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted } from 'vue';
|
|
|
-import { getGameType, getGameTag, getGameList } from '@/api/index'
|
|
|
-import RankList from '@/components/RankList.vue';
|
|
|
-import Message from '@/utils/Message'
|
|
|
-
|
|
|
-const typeIndex = ref<number>(0)
|
|
|
-const tag_idIndex = ref<number>(0)
|
|
|
-const gameLis: any = ref([])
|
|
|
-const typeArr: any = ref([])
|
|
|
-const tagArr: any = ref([])
|
|
|
-const prefix = ref<string>('')
|
|
|
-const isLoading = ref<boolean>(true)
|
|
|
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
|
|
|
-const total = ref<number>(0)
|
|
|
-interface Params {
|
|
|
- type: number,
|
|
|
- tag_id: number,
|
|
|
- page: number,
|
|
|
- pagesize: number
|
|
|
-}
|
|
|
-const params = reactive<Params>({
|
|
|
- type: 0,
|
|
|
- tag_id: 0,
|
|
|
- page: 1,
|
|
|
- pagesize: 15
|
|
|
-})
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- await getGameType().then(res => {
|
|
|
- // console.log('类型', res);
|
|
|
- typeArr.value = res.data.data
|
|
|
- typeArr.value.unshift({ id: 0, name: '全部' })
|
|
|
- })
|
|
|
- await getGameTag().then(res => {
|
|
|
- // console.log('标签', res);
|
|
|
- tagArr.value = res.data.data
|
|
|
- tagArr.value.unshift({ id: 0, name: '全部' })
|
|
|
- })
|
|
|
- getGameLists(params)
|
|
|
-})
|
|
|
-
|
|
|
-// 初始化列表数据
|
|
|
-const getGameLists = async (params) => {
|
|
|
- // console.log('参数', params);
|
|
|
-
|
|
|
- await getGameList(params).then(res => {
|
|
|
- // console.log('数据', res);
|
|
|
- if (res.data.code === 200 && res.data.data) {
|
|
|
- gameLis.value = gameLis.value.concat(res.data.data.lists)
|
|
|
- total.value = res.data.data.total
|
|
|
- prefix.value = res.data.data.prefix
|
|
|
- isLoading.value = false
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- Message.error(err.data.msg)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 点击类型、标签、排序
|
|
|
-const selectType = (type: any, index: any) => {
|
|
|
- gameLis.value = []
|
|
|
- params.page = 1
|
|
|
-
|
|
|
- if (type === 'type') {
|
|
|
- typeIndex.value = index
|
|
|
- params.type = index
|
|
|
- }
|
|
|
- if (type === 'tag_id') {
|
|
|
- tag_idIndex.value = index
|
|
|
- params.tag_id = index
|
|
|
- }
|
|
|
- // 如果都为 全部 则发起请求 页面显示15条数据
|
|
|
- if (params.type === 0 && params.tag_id === 0) {
|
|
|
- params.pagesize = 15
|
|
|
- getGameLists(params)
|
|
|
- } else {
|
|
|
- allData()
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-// 全部数据
|
|
|
-const allData = async () => {
|
|
|
- params.pagesize = total.value
|
|
|
- // console.log('params', params);
|
|
|
- await getGameList(params).then(resp => {
|
|
|
- // console.log('resp===>', resp);
|
|
|
- if (resp.data.code === 200 && resp.data.data) {
|
|
|
- gameLis.value = resp.data.data.lists.filter(item => {
|
|
|
- // 如果标签为全部 类型不为全部 返回匹配的类型数据
|
|
|
- if (params.tag_id === 0) {
|
|
|
- return item.type === params.type
|
|
|
- }
|
|
|
- // 如果类型为全部 标签不为全部 返回匹配的标签数据
|
|
|
- else if (params.type === 0) {
|
|
|
- return item.tags.includes(params.tag_id)
|
|
|
- }
|
|
|
- // 否则返回匹配的标签和类型数据
|
|
|
- else return item.type === params.type && item.tags.includes(params.tag_id)
|
|
|
- })
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- Message.error(err.data.msg)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 加载更多
|
|
|
-const loadMore = () => {
|
|
|
- params.page += 1
|
|
|
- getGameLists(params)
|
|
|
-}
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.header_list {
|
|
|
- .top_type {
|
|
|
- margin: 10px 0;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px 50px 20px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .left_title {
|
|
|
- width: 50px;
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .right_type {
|
|
|
-
|
|
|
- // background-color: #ed8c0f;
|
|
|
- .cont {
|
|
|
- margin-right: 20px;
|
|
|
- padding: 3px 5px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #ed8c0f;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .type {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-button {
|
|
|
- margin: 5px 20px 15px 0;
|
|
|
- padding: 0 20px;
|
|
|
- border: 0;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.active {
|
|
|
- color: #ed8c0f
|
|
|
-}
|
|
|
+<template>
|
|
|
+ <loading v-if="isLoading" :style="{ height: viewWidth + 'px' }" />
|
|
|
+ <div v-else class="w1000 category">
|
|
|
+ <div class="header_list">
|
|
|
+ <div class="top_type">
|
|
|
+ <div class="type df aic">
|
|
|
+ <div class="left_title">类型</div>
|
|
|
+ <div class="right_type f1 df fw">
|
|
|
+ <span v-for="item in typeArr" :key="item.id" class="cont"
|
|
|
+ :class="{ active: typeIndex === item.id }" @click="selectType('type', item.id)">
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="size df aic">
|
|
|
+ <div class="left_title">标签</div>
|
|
|
+ <div class="right_type f1 df fw">
|
|
|
+ <span v-for="item in tagArr" :key="item.id" class="cont"
|
|
|
+ :class="{ active: tag_idIndex === item.id }" @click="selectType('tag_id', item.id)">
|
|
|
+ {{ item.name }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 按最xxx排序 -->
|
|
|
+ <!-- <el-button :plain="true" round v-for="(item, index) in categoryList" :key="index"
|
|
|
+ @click="selectType('order', index)">
|
|
|
+ <span :class="{ active: orderIndex === index }">{{ item.title }}</span>
|
|
|
+ </el-button> -->
|
|
|
+ </div>
|
|
|
+ <!-- 游戏列表 -->
|
|
|
+ <div v-if="(gameLis.length > 0)">
|
|
|
+ <RankList :gameLis="gameLis" :prefix="prefix" :rank="false" :tagArr="tagArr" />
|
|
|
+ <div class="more df aic jcc" v-if="params.page * params.pagesize <= gameLis.length">
|
|
|
+ <el-button class="df aic jcc" @click="loadMore">更多</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="df aic jcc" style="color: #999;height: 200px;font-size: 18px;">----- 没有更多数据了 -----</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else></el-empty>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, onMounted } from 'vue';
|
|
|
+import { getGameType, getGameTag, getGameList } from '@/api/index'
|
|
|
+import RankList from '@/components/RankList.vue';
|
|
|
+import Message from '@/utils/Message'
|
|
|
+
|
|
|
+const typeIndex = ref<number>(0)
|
|
|
+const tag_idIndex = ref<number>(0)
|
|
|
+const gameLis: any = ref([])
|
|
|
+const typeArr: any = ref([])
|
|
|
+const tagArr: any = ref([])
|
|
|
+const prefix = ref<string>('')
|
|
|
+const isLoading = ref<boolean>(true)
|
|
|
+const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
|
|
|
+const total = ref<number>(0)
|
|
|
+interface Params {
|
|
|
+ type: number,
|
|
|
+ tag_id: number,
|
|
|
+ page: number,
|
|
|
+ pagesize: number
|
|
|
+}
|
|
|
+const params = reactive<Params>({
|
|
|
+ type: 0,
|
|
|
+ tag_id: 0,
|
|
|
+ page: 1,
|
|
|
+ pagesize: 15
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await getGameType().then(res => {
|
|
|
+ // console.log('类型', res);
|
|
|
+ typeArr.value = res.data.data
|
|
|
+ typeArr.value.unshift({ id: 0, name: '全部' })
|
|
|
+ })
|
|
|
+ await getGameTag().then(res => {
|
|
|
+ // console.log('标签', res);
|
|
|
+ tagArr.value = res.data.data
|
|
|
+ tagArr.value.unshift({ id: 0, name: '全部' })
|
|
|
+ })
|
|
|
+ getGameLists(params)
|
|
|
+})
|
|
|
+
|
|
|
+// 初始化列表数据
|
|
|
+const getGameLists = async (params) => {
|
|
|
+ // console.log('参数', params);
|
|
|
+
|
|
|
+ await getGameList(params).then(res => {
|
|
|
+ // console.log('数据', res);
|
|
|
+ if (res.data.code === 200 && res.data.data) {
|
|
|
+ gameLis.value = gameLis.value.concat(res.data.data.lists)
|
|
|
+ total.value = res.data.data.total
|
|
|
+ prefix.value = res.data.data.prefix
|
|
|
+ isLoading.value = false
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Message.error(err.data.msg)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 点击类型、标签、排序
|
|
|
+const selectType = (type: any, index: any) => {
|
|
|
+ gameLis.value = []
|
|
|
+ params.page = 1
|
|
|
+
|
|
|
+ if (type === 'type') {
|
|
|
+ typeIndex.value = index
|
|
|
+ params.type = index
|
|
|
+ }
|
|
|
+ if (type === 'tag_id') {
|
|
|
+ tag_idIndex.value = index
|
|
|
+ params.tag_id = index
|
|
|
+ }
|
|
|
+ // 如果都为 全部 则发起请求 页面显示15条数据
|
|
|
+ if (params.type === 0 && params.tag_id === 0) {
|
|
|
+ params.pagesize = 15
|
|
|
+ getGameLists(params)
|
|
|
+ } else {
|
|
|
+ allData()
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+// 全部数据
|
|
|
+const allData = async () => {
|
|
|
+ params.pagesize = total.value
|
|
|
+ // console.log('params', params);
|
|
|
+ await getGameList(params).then(resp => {
|
|
|
+ // console.log('resp===>', resp);
|
|
|
+ if (resp.data.code === 200 && resp.data.data) {
|
|
|
+ gameLis.value = resp.data.data.lists.filter(item => {
|
|
|
+ // 如果标签为全部 类型不为全部 返回匹配的类型数据
|
|
|
+ if (params.tag_id === 0) {
|
|
|
+ return item.type === params.type
|
|
|
+ }
|
|
|
+ // 如果类型为全部 标签不为全部 返回匹配的标签数据
|
|
|
+ else if (params.type === 0) {
|
|
|
+ return item.tags.includes(params.tag_id)
|
|
|
+ }
|
|
|
+ // 否则返回匹配的标签和类型数据
|
|
|
+ else return item.type === params.type && item.tags.includes(params.tag_id)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Message.error(err.data.msg)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 加载更多
|
|
|
+const loadMore = () => {
|
|
|
+ params.page += 1
|
|
|
+ getGameLists(params)
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.header_list {
|
|
|
+ .top_type {
|
|
|
+ margin: 15px 0 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px 50px 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .left_title {
|
|
|
+ width: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_type {
|
|
|
+
|
|
|
+ // background-color: #ed8c0f;
|
|
|
+ .cont {
|
|
|
+ margin-right: 20px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #ed8c0f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .type {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ margin: 5px 20px 15px 0;
|
|
|
+ padding: 0 20px;
|
|
|
+ border: 0;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ color: #ed8c0f
|
|
|
+}
|
|
|
</style>
|
zhangxing