Refactor code structure and remove redundant changes
This commit is contained in:
wangqiao
48
pages/drawe/components/FeaturedSpecials.vue
Normal file
48
pages/drawe/components/FeaturedSpecials.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="box-border w-100% border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-26px py-30px">
|
||||
<div class="flex items-center">
|
||||
<div class="text-28px text-[#333333] font-normal">精选专题</div>
|
||||
<div class="ml-50px text-21px text-[#999999] font-normal">了解最新趋势发展</div>
|
||||
</div>
|
||||
<div class="mt-36px flex justify-between">
|
||||
<div v-for="item in 4" :key="item" class="flex flex-col items-center">
|
||||
<img :src="`https://picsum.photos/320/190?_t${new Date().getTime()}`" alt="" srcset="" class="h-190px w320 rounded-4px" />
|
||||
<div class="mt-10px text-18px text-[#333333] font-normal">机器人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, ref, watch } from 'vue'
|
||||
import { recommendTop } from '@/api/upnew/index'
|
||||
import { recommendTopRes } from '@/api/upnew/types'
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number as PropType<1 | 2 | 3>,
|
||||
default: 1,
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* 这个接口调用错了 后续修改
|
||||
*/
|
||||
const list = ref<recommendTopRes[]>([])
|
||||
watch(
|
||||
() => props.type,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
recommendTop({
|
||||
type: newVal,
|
||||
projectType: 0,
|
||||
isDomestic: 1,
|
||||
}).then((res) => {
|
||||
list.value = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
</script>
|
||||
50
pages/drawe/components/RecommendedColumnsV2.vue
Normal file
50
pages/drawe/components/RecommendedColumnsV2.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="relative mt-34px w-100%">
|
||||
<KlTabBar v-model="query.source" :data="tabBar" />
|
||||
<div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
|
||||
>共<span class="color-#1A65FF">{{ result.total }}</span
|
||||
>个筛选结果</div
|
||||
>
|
||||
<div class="content mt-10px">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(item, index) in result.list" :key="index" :span="6">
|
||||
<CardPicture :item-info="item" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty v-if="!result.list.length" :image="emptyImg"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import KlTabBar from '@/components/kl-tab-bar/index.vue'
|
||||
import CardPicture from '@/components/kl-card-picture/index.vue'
|
||||
import { ref } from 'vue'
|
||||
import { pageRes, pageReq } from '@/api/upnew/types'
|
||||
import emptyImg from '@/assets/images/empty.png'
|
||||
|
||||
const query = defineModel<pageReq>('modelValue', {
|
||||
required: true,
|
||||
})
|
||||
|
||||
const result = defineModel<pageRes>('result', {
|
||||
required: true,
|
||||
})
|
||||
|
||||
const tabBar = ref([
|
||||
{
|
||||
label: '图纸推荐',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
label: '原创图纸',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '最新上传',
|
||||
value: 2,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
101
pages/drawe/index.vue
Normal file
101
pages/drawe/index.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<!-- 导航 -->
|
||||
<KlNavTab active="图纸" :type="1" />
|
||||
<div class="ma-auto w-1440px">
|
||||
<!-- 图纸分类 -->
|
||||
<KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
|
||||
<!-- 推荐栏目 -->
|
||||
<RecommendedColumnsV2 v-model="query" v-model:result="result"></RecommendedColumnsV2>
|
||||
<!-- 精选专题 -->
|
||||
<!-- <FeaturedSpecials></FeaturedSpecials> -->
|
||||
<!-- 分页 -->
|
||||
<div class="mt-10px flex justify-center">
|
||||
<el-pagination
|
||||
v-model:current-page="query.pageNo"
|
||||
v-model:page-size="query.pageSize"
|
||||
:page-sizes="[12, 24, 48]"
|
||||
:total="result.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleClickSize"
|
||||
@current-change="handeClickCurrent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import KlNavTab from '@/components/kl-nav-tab/index.vue'
|
||||
import KlWallpaperCategory from '@/components/kl-wallpaper-category/index.vue'
|
||||
import RecommendedColumnsV2 from './components/RecommendedColumnsV2.vue'
|
||||
// import FeaturedSpecials from './components/FeaturedSpecials.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { reactive, watch, ref } from 'vue'
|
||||
import { page } from '@/api/upnew/index'
|
||||
import { pageRes, pageReq } from '@/api/upnew/types'
|
||||
const route = useRoute()
|
||||
const level = ref(
|
||||
route.query.level
|
||||
? JSON.parse(route.query.level as string)
|
||||
: [
|
||||
{
|
||||
id: '0',
|
||||
name: '图纸库',
|
||||
isChildren: false,
|
||||
},
|
||||
]
|
||||
)
|
||||
const keywords = ref(route.query.keywords as string)
|
||||
|
||||
const query = reactive<pageReq>({
|
||||
pageNo: 1,
|
||||
pageSize: 12,
|
||||
projectType: '',
|
||||
editions: '',
|
||||
source: '',
|
||||
type: 1,
|
||||
title: keywords.value,
|
||||
})
|
||||
const result = reactive<pageRes>({
|
||||
list: [],
|
||||
total: 0,
|
||||
})
|
||||
|
||||
// 如果id存在，则设置projectType
|
||||
if (level.value.length) {
|
||||
query.projectType = level.value[level.value.length - 1].id || ''
|
||||
}
|
||||
|
||||
const handleClickSize = (val: number) => {
|
||||
query.pageSize = val
|
||||
getPage()
|
||||
}
|
||||
|
||||
const handeClickCurrent = (val: number) => {
|
||||
query.pageNo = val
|
||||
getPage()
|
||||
}
|
||||
|
||||
const getPage = () => {
|
||||
page(query).then((res) => {
|
||||
const { data, code } = res
|
||||
if (code === 0) {
|
||||
result.list = data.list
|
||||
result.total = data.total
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getPage()
|
||||
|
||||
watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
|
||||
if (val) {
|
||||
getPage()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-pagination) {
|
||||
.el-input__inner {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user