|
@@ -116,13 +116,19 @@
|
|
>
|
|
>
|
|
<div class="tool-card-content w-full px-4 flex flex-wrap md:max-w-[1440px] mx-auto">
|
|
<div class="tool-card-content w-full px-4 flex flex-wrap md:max-w-[1440px] mx-auto">
|
|
<div class="tool-card" v-for="item in toolsListRef" :key="item" @click="handleDetail(item)">
|
|
<div class="tool-card" v-for="item in toolsListRef" :key="item" @click="handleDetail(item)">
|
|
- <img class="tool-img" :src="`${devPath + item.picturePath}`"></img>
|
|
|
|
|
|
+ <el-image class="tool-img" :src="`${devPath + item.picturePath}`" fit="contain">
|
|
|
|
+ <template #error>
|
|
|
|
+ <div class="w-full h-full flex items-center justify-center">
|
|
|
|
+ <van-icon name="photo-fail" color="#dcdee0" size="32"/>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-image>
|
|
<div class="px-3 pt-2 flex-1 flex flex-col">
|
|
<div class="px-3 pt-2 flex-1 flex flex-col">
|
|
<div class="font-[PingFang-Heavy] truncate">{{ item.toolName }}</div>
|
|
<div class="font-[PingFang-Heavy] truncate">{{ item.toolName }}</div>
|
|
<div class="text-[#585F66] text-xs mt-1 line-clamp-2 break-all">
|
|
<div class="text-[#585F66] text-xs mt-1 line-clamp-2 break-all">
|
|
{{ item.describe }}
|
|
{{ item.describe }}
|
|
</div>
|
|
</div>
|
|
- <div class="flex-1 flex items-center justify-end">
|
|
|
|
|
|
+ <div class="flex-1 flex items-center justify-end" v-if="+item.toolNum">
|
|
<span class="text-2xl font-['DIN'] font-semibold text-[#004EA2]">{{
|
|
<span class="text-2xl font-['DIN'] font-semibold text-[#004EA2]">{{
|
|
item.toolNum
|
|
item.toolNum
|
|
}}</span>
|
|
}}</span>
|
|
@@ -176,44 +182,43 @@ const finished = ref(false)
|
|
const noneCardNum = ref(0)
|
|
const noneCardNum = ref(0)
|
|
const onLoad = (value) => {
|
|
const onLoad = (value) => {
|
|
listTools({
|
|
listTools({
|
|
- level: '3',
|
|
|
|
- parentId: value,
|
|
|
|
- toolName: searchValueRef.value,
|
|
|
|
- pageSize: totalPage.value,
|
|
|
|
- delFlag: 0
|
|
|
|
- }).then((res) => {
|
|
|
|
- toolsListRef.value = res.rows
|
|
|
|
- // 加载状态结束
|
|
|
|
- loadingRef.value = false
|
|
|
|
- if(totalPage.value >res.total){
|
|
|
|
- finished.value = true
|
|
|
|
- }else{
|
|
|
|
- totalPage.value +=5
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
- setTimeout(()=>{
|
|
|
|
|
|
+ level: '3',
|
|
|
|
+ parentId: value,
|
|
|
|
+ toolName: searchValueRef.value,
|
|
|
|
+ pageSize: totalPage.value,
|
|
|
|
+ delFlag: 0
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ toolsListRef.value = res.rows
|
|
|
|
+ // 加载状态结束
|
|
|
|
+ loadingRef.value = false
|
|
|
|
+ if (totalPage.value > res.total) {
|
|
|
|
+ finished.value = true
|
|
|
|
+ } else {
|
|
|
|
+ totalPage.value += 5
|
|
|
|
+ }
|
|
|
|
+ setTimeout(() => {
|
|
noneCardNum.value = getFillNums('.tool-card-content', toolsListRef.value, 220)
|
|
noneCardNum.value = getFillNums('.tool-card-content', toolsListRef.value, 220)
|
|
- },500 )
|
|
|
|
|
|
+ }, 200)
|
|
|
|
+ })
|
|
}
|
|
}
|
|
const init = () => {
|
|
const init = () => {
|
|
loadingRef.value = true
|
|
loadingRef.value = true
|
|
// 一级分类
|
|
// 一级分类
|
|
listTools({
|
|
listTools({
|
|
- level: '1',
|
|
|
|
|
|
+ level: '1'
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
typeOptions1Ref.value = res.rows
|
|
typeOptions1Ref.value = res.rows
|
|
})
|
|
})
|
|
- type1ValueRef.value = route.query.id ? Number(route.query.id) : ''
|
|
|
|
- type2ValueRef.value = ''
|
|
|
|
- // 二级分类
|
|
|
|
- listTools({
|
|
|
|
- level: '2',
|
|
|
|
- parentId: route.query.id?route.query.id:'',
|
|
|
|
- }).then((res) => {
|
|
|
|
- typeOptions2Ref.value = res.rows
|
|
|
|
- })
|
|
|
|
- onLoad(route.query.id)
|
|
|
|
|
|
+ type1ValueRef.value = route.query.id ? Number(route.query.id) : ''
|
|
|
|
+ type2ValueRef.value = ''
|
|
|
|
+ // 二级分类
|
|
|
|
+ listTools({
|
|
|
|
+ level: '2',
|
|
|
|
+ parentId: route.query.id ? route.query.id : ''
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ typeOptions2Ref.value = res.rows
|
|
|
|
+ })
|
|
|
|
+ onLoad(route.query.id)
|
|
}
|
|
}
|
|
init()
|
|
init()
|
|
|
|
|