|
|
@@ -3,13 +3,27 @@
|
|
|
<div class="collbody">
|
|
|
<div class="collbody-top">
|
|
|
<div class="collbody-search">
|
|
|
- <van-search @search="reset" shape="round" v-model="keyword" placeholder="请输入关键词" />
|
|
|
- <van-button @click="reset" round size="small" type="default">搜索</van-button>
|
|
|
- <van-button @click="keyword = ''" round size="small" color="#ffffff" plain>重置</van-button>
|
|
|
+ <van-search
|
|
|
+ @search="reset"
|
|
|
+ shape="round"
|
|
|
+ v-model="keyword"
|
|
|
+ placeholder="请输入关键词"
|
|
|
+ />
|
|
|
+ <van-button @click="reset" round size="small" type="default"
|
|
|
+ >搜索</van-button
|
|
|
+ >
|
|
|
+ <van-button
|
|
|
+ @click="keyword = ''"
|
|
|
+ round
|
|
|
+ size="small"
|
|
|
+ color="#ffffff"
|
|
|
+ plain
|
|
|
+ >重置</van-button
|
|
|
+ >
|
|
|
</div>
|
|
|
|
|
|
<div class="collbody-tabs">
|
|
|
- <van-dropdown-menu style="width: 100%;">
|
|
|
+ <van-dropdown-menu style="width: 100%">
|
|
|
<van-dropdown-item v-model="value1" :options="menu1" />
|
|
|
<van-dropdown-item v-model="value2" :options="menu2" />
|
|
|
<van-dropdown-item v-model="value3" :options="menu3" />
|
|
|
@@ -19,23 +33,35 @@
|
|
|
|
|
|
<div class="list" ref="list$">
|
|
|
<van-skeleton :loading="isSkeleton" :row="30" />
|
|
|
- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
|
|
|
- <div @click="clickItem(item)" class="vitem" v-for="item in list" :key="item">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="getList"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ @click="clickItem(item)"
|
|
|
+ class="vitem"
|
|
|
+ v-for="item in list"
|
|
|
+ :key="item"
|
|
|
+ >
|
|
|
<!-- v-lazy="img" -->
|
|
|
- <img v-lazy="`${$config.MODELLINKPERFIX}${item.thumb}`" :src="`${$config.MODELLINKPERFIX}${item.thumb}`"
|
|
|
- alt="">
|
|
|
+ <img
|
|
|
+ v-lazy="`${$config.MODELLINKPERFIX}${item.thumb}`"
|
|
|
+ :src="`${$config.MODELLINKPERFIX}${item.thumb}`"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div class="van-ellipsis">{{ item.name }}</div>
|
|
|
</div>
|
|
|
</van-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { ref, shallowReactive, watch, onMounted } from 'vue';
|
|
|
-import http from '@/api/index.js'
|
|
|
+import { ref, shallowReactive, watch, onMounted } from "vue";
|
|
|
+import http from "@/api/index.js";
|
|
|
|
|
|
export default {
|
|
|
setup() {
|
|
|
@@ -46,28 +72,19 @@ export default {
|
|
|
const finished = ref(false);
|
|
|
const active = ref(0);
|
|
|
const list$ = ref(null);
|
|
|
- const keyword = ref('');
|
|
|
-
|
|
|
-
|
|
|
- const pageNum = ref(1)
|
|
|
- const pageSize = ref(14)
|
|
|
-
|
|
|
+ const keyword = ref("");
|
|
|
|
|
|
- const value1 = ref('');
|
|
|
- const value2 = ref('');
|
|
|
- const value3 = ref('');
|
|
|
+ const pageNum = ref(1);
|
|
|
+ const pageSize = ref(14);
|
|
|
|
|
|
+ const value1 = ref("");
|
|
|
+ const value2 = ref("");
|
|
|
+ const value3 = ref("");
|
|
|
|
|
|
const menuList = shallowReactive({
|
|
|
- option1: [
|
|
|
- { text: '文物类别', value: '' },
|
|
|
- ],
|
|
|
- option2: [
|
|
|
- { text: '质地', value: '' },
|
|
|
- ],
|
|
|
- option3: [
|
|
|
- { text: '年代', value: '' },
|
|
|
- ],
|
|
|
+ option1: [{ text: "文物类别", value: "" }],
|
|
|
+ option2: [{ text: "质地", value: "" }],
|
|
|
+ option3: [{ text: "年代", value: "" }],
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
@@ -75,42 +92,49 @@ export default {
|
|
|
*/
|
|
|
(async () => {
|
|
|
let result = (await http.get(`show/dict/getTree`)).data;
|
|
|
- result.data.forEach(item => {
|
|
|
+ result.data.forEach((item) => {
|
|
|
for (let i = 1; i <= 3; i++) {
|
|
|
- if (menuList['option' + i][0].text === item.name) {
|
|
|
- menuList['option' + i] = menuList['option' + i].concat((item.children.map(sub => { return { text: sub.name, value: sub.name } })))
|
|
|
+ if (menuList["option" + i][0].text === item.name) {
|
|
|
+ menuList["option" + i] = menuList["option" + i].concat(
|
|
|
+ item.children.map((sub) => {
|
|
|
+ return { text: sub.name, value: sub.name };
|
|
|
+ })
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
})();
|
|
|
|
|
|
const reset = () => {
|
|
|
- isSkeleton.value = true
|
|
|
+ isSkeleton.value = true;
|
|
|
finished.value = false;
|
|
|
- pageNum.value = 1
|
|
|
- list$.value && (list$.value.scrollTop = 0)
|
|
|
+ pageNum.value = 1;
|
|
|
+ list$.value && (list$.value.scrollTop = 0);
|
|
|
setTimeout(() => {
|
|
|
- list.value = []
|
|
|
- getList()
|
|
|
+ list.value = [];
|
|
|
+ getList();
|
|
|
}, 200);
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
const getList = async () => {
|
|
|
-
|
|
|
- let fixSearchType = [value1.value, value2.value, value3.value].filter(Boolean).join(',')
|
|
|
-
|
|
|
- let result = (await http.post(`show/ledger/pageList`, {
|
|
|
- "pageNum": pageNum.value,
|
|
|
- "pageSize": pageSize.value,
|
|
|
- "searchKey": keyword.value,
|
|
|
- "searchType": keyword.value ? 'name' : fixSearchType,
|
|
|
- })).data.data;
|
|
|
-
|
|
|
-
|
|
|
- list.value = list.value.concat(result.records)
|
|
|
+ // let fixSearchType = [value1.value, value2.value, value3.value].filter(Boolean).join(',')
|
|
|
+
|
|
|
+ let result = (
|
|
|
+ await http.post(`show/ledger/pageList`, {
|
|
|
+ pageNum: pageNum.value,
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ searchKey: keyword.value,
|
|
|
+ // "searchType": keyword.value ? 'name' : fixSearchType,
|
|
|
+ dictGoodsType: value1.value,
|
|
|
+ dictTexture: value2.value,
|
|
|
+ dictAge: value3.value,
|
|
|
+ })
|
|
|
+ ).data.data;
|
|
|
+
|
|
|
+ list.value = list.value.concat(result.records);
|
|
|
|
|
|
if (isSkeleton.value) {
|
|
|
- isSkeleton.value = false
|
|
|
+ isSkeleton.value = false;
|
|
|
}
|
|
|
|
|
|
// 加载状态结束
|
|
|
@@ -118,19 +142,17 @@ export default {
|
|
|
|
|
|
// 数据全部加载完成
|
|
|
|
|
|
- pageNum.value = result.current + 1
|
|
|
- pageSize.value = result.size
|
|
|
+ pageNum.value = result.current + 1;
|
|
|
+ pageSize.value = result.size;
|
|
|
|
|
|
if (list.value.length >= result.total) {
|
|
|
finished.value = true;
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ };
|
|
|
|
|
|
watch([value1, value2, value3], () => {
|
|
|
- console.log('result:watch', value1.value, value2.value, value3.value);
|
|
|
- reset()
|
|
|
+ console.log("result:watch", value1.value, value2.value, value3.value);
|
|
|
+ reset();
|
|
|
});
|
|
|
|
|
|
return {
|
|
|
@@ -147,32 +169,30 @@ export default {
|
|
|
value3,
|
|
|
menuList,
|
|
|
getList,
|
|
|
- reset
|
|
|
+ reset,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
menu1() {
|
|
|
- return this.menuList.option1
|
|
|
+ return this.menuList.option1;
|
|
|
},
|
|
|
menu2() {
|
|
|
- return this.menuList.option2
|
|
|
+ return this.menuList.option2;
|
|
|
},
|
|
|
menu3() {
|
|
|
- return this.menuList.option3
|
|
|
- }
|
|
|
+ return this.menuList.option3;
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
- return {
|
|
|
- };
|
|
|
+ return {};
|
|
|
},
|
|
|
methods: {
|
|
|
clickItem(item) {
|
|
|
- this.$router.push({ name: 'CulturalRelics', params: { id: item.id } })
|
|
|
- }
|
|
|
+ this.$router.push({ name: "CulturalRelics", params: { id: item.id } });
|
|
|
+ },
|
|
|
},
|
|
|
-
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -219,7 +239,6 @@ export default {
|
|
|
background-color: none;
|
|
|
width: 100%;
|
|
|
padding-top: 10px;
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -243,31 +262,27 @@ export default {
|
|
|
--rightmargin: 3%;
|
|
|
--divh: 40px;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
height: 140px;
|
|
|
font-size: 0;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
font-size: 14px;
|
|
|
padding: 0 4px;
|
|
|
height: var(--divh);
|
|
|
line-height: var(--divh);
|
|
|
}
|
|
|
|
|
|
- &:nth-child(2n+1) {
|
|
|
+ &:nth-child(2n + 1) {
|
|
|
margin-right: var(--rightmargin);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
&-swipe {
|
|
|
img {
|
|
|
width: 100%;
|
|
|
@@ -280,7 +295,6 @@ export default {
|
|
|
.van-tab--active {
|
|
|
color: var(--van-primary-color);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.van-overlay {
|
|
|
@@ -294,12 +308,12 @@ export default {
|
|
|
.sticky-tabs {
|
|
|
position: relative;
|
|
|
|
|
|
- >ul {
|
|
|
+ > ul {
|
|
|
flex-wrap: wrap;
|
|
|
display: flex;
|
|
|
padding: 0 10px 10px;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
margin: 10px;
|
|
|
color: #333333;
|
|
|
font-size: 14px;
|
|
|
@@ -332,7 +346,7 @@ export default {
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
|
|
border-radius: 50%;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
