|
@@ -3,18 +3,40 @@
|
|
|
<div class="slebar">
|
|
|
<div>分类:</div>
|
|
|
<ul>
|
|
|
- <li @click="menuActive = item.id" :class="{ active: menuActive == item.id }" v-for="(item, i) in menu" :key="i">
|
|
|
+ <li
|
|
|
+ @click="menuActive = item.id"
|
|
|
+ :class="{ active: menuActive == item.id }"
|
|
|
+ v-for="(item, i) in menu"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
{{ item.name }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="masonrycon">
|
|
|
- <div v-if="list && list.length > 0" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
|
|
|
- :infinite-scroll-immediate-check="true" infinite-scroll-distance="30" v-masonry="containerId" fit-width="true"
|
|
|
- gutter="10" initLayout="true" transition-duration="0.3s" item-selector=".item">
|
|
|
- <div @click="onClickCollection(item)" v-masonry-tile class="item" :class="{ odd: index % 2 != 0 }"
|
|
|
- v-for="(item, index) in list" :key="index">
|
|
|
+ <div
|
|
|
+ v-if="list && list.length > 0"
|
|
|
+ class="masonry"
|
|
|
+ v-infinite-scroll="getData"
|
|
|
+ infinite-scroll-disabled="busy"
|
|
|
+ :infinite-scroll-immediate-check="true"
|
|
|
+ infinite-scroll-distance="30"
|
|
|
+ v-masonry="containerId"
|
|
|
+ fit-width="true"
|
|
|
+ gutter="10"
|
|
|
+ initLayout="true"
|
|
|
+ transition-duration="0.3s"
|
|
|
+ item-selector=".item"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ @click="onClickCollection(item)"
|
|
|
+ v-masonry-tile
|
|
|
+ class="item"
|
|
|
+ :class="{ odd: index % 2 != 0 }"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<div class="itemimg">
|
|
|
<div :style="`background-image:url(${item.thumb})`"></div>
|
|
|
</div>
|
|
@@ -29,75 +51,120 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <teleport to='body'>
|
|
|
+ <teleport to="body">
|
|
|
<div class="fnbar">
|
|
|
<div class="barsub">
|
|
|
- <mb_select :noradius="true" class="mb_select" @handleOption="handleTab" :value="activeId" :options="yearlist" />
|
|
|
+ <mb_select
|
|
|
+ :noradius="true"
|
|
|
+ class="mb_select"
|
|
|
+ @handleOption="handleTab"
|
|
|
+ :value="activeId"
|
|
|
+ :options="yearlist"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<div class="barsub">
|
|
|
- <mb_select :noradiusAll="true" class="mb_select" @handleOption="handleTab" :value="activeId"
|
|
|
- :options="yearlist" />
|
|
|
+ <mb_select
|
|
|
+ :noradiusAll="true"
|
|
|
+ class="mb_select"
|
|
|
+ @handleOption="handleTab"
|
|
|
+ :value="activeId"
|
|
|
+ :options="yearlist"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<div class="searchimg" v-show="!showInput">
|
|
|
- <img @click="showInput=true" :src="require('@/assets/images/icon/label_search.png')" alt="">
|
|
|
+ <img
|
|
|
+ @click="showInput = true"
|
|
|
+ :src="require('@/assets/images/icon/label_search.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<transition name="fade">
|
|
|
<div class="searchcon" v-if="showInput">
|
|
|
- <img :src="require('@/assets/images/icon/label_search.png')" alt="">
|
|
|
- <input v-model="searchKey" type="text" placeholder="请输入藏品名称">
|
|
|
- <span @click="showInput=false">取消</span>
|
|
|
+ <img :src="require('@/assets/images/icon/label_search.png')" alt="" />
|
|
|
+ <input v-model="searchKey" type="text" placeholder="请输入藏品名称" />
|
|
|
+ <span @click="showInput = false">取消</span>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</teleport>
|
|
|
|
|
|
- <teleport to='body'>
|
|
|
+ <teleport to="body">
|
|
|
<div class="fnbar">
|
|
|
<div class="barsub">
|
|
|
- <mb_select :noradius="true" class="mb_select" @handleOption="data=>currentMuseum=data.id" :value="currentMuseum"
|
|
|
- :options="museumList" />
|
|
|
+ <mb_select
|
|
|
+ :noradius="true"
|
|
|
+ class="mb_select"
|
|
|
+ @handleOption="(data) => (currentMuseum = data.id)"
|
|
|
+ :value="currentMuseum"
|
|
|
+ :options="museumList"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<div class="barsub">
|
|
|
- <mb_select :noradiusAll="true" class="mb_select" @handleOption="data=>currentAge=data.id" :value="currentAge"
|
|
|
- :options="ages" />
|
|
|
+ <mb_select
|
|
|
+ :noradiusAll="true"
|
|
|
+ class="mb_select"
|
|
|
+ @handleOption="(data) => (currentAge = data.id)"
|
|
|
+ :value="currentAge"
|
|
|
+ :options="ages"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<div class="barsub">
|
|
|
- <mb_select :noradiusAll="true" class="mb_select" @handleOption="data=>currentType=data.id" :value="currentType"
|
|
|
- :options="types" />
|
|
|
+ <mb_select
|
|
|
+ :noradiusAll="true"
|
|
|
+ class="mb_select"
|
|
|
+ @handleOption="(data) => (currentType = data.id)"
|
|
|
+ :value="currentType"
|
|
|
+ :options="types"
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<div class="searchimg" v-show="!showInput">
|
|
|
- <img @click="showInput=true" :src="require('@/assets/images/icon/label_search.png')" alt="">
|
|
|
+ <img
|
|
|
+ @click="showInput = true"
|
|
|
+ :src="require('@/assets/images/icon/label_search.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
|
|
|
<transition name="fade">
|
|
|
<div class="searchcon" v-if="showInput">
|
|
|
- <img :src="require('@/assets/images/icon/label_search.png')" alt="">
|
|
|
- <input v-model="searchKey" type="text" placeholder="请输入展览名称">
|
|
|
- <span @click="showInput=false,searchKey=''">取消</span>
|
|
|
+ <img :src="require('@/assets/images/icon/label_search.png')" alt="" />
|
|
|
+ <input v-model="searchKey" type="text" placeholder="请输入展览名称" />
|
|
|
+ <span @click="(showInput = false), (searchKey = '')">取消</span>
|
|
|
</div>
|
|
|
</transition>
|
|
|
-
|
|
|
</div>
|
|
|
</teleport>
|
|
|
|
|
|
<transition name="fade">
|
|
|
- <teleport to='body'>
|
|
|
+ <teleport to="body">
|
|
|
<showCollection v-if="activeCollection" :item="activeCollection" />
|
|
|
</teleport>
|
|
|
</transition>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { defineProps, getCurrentInstance, onMounted, watch, nextTick, ref } from "vue";
|
|
|
+import {
|
|
|
+ defineProps,
|
|
|
+ getCurrentInstance,
|
|
|
+ onMounted,
|
|
|
+ watch,
|
|
|
+ nextTick,
|
|
|
+ ref,
|
|
|
+} from "vue";
|
|
|
import mb_select from "@/components/mb_select";
|
|
|
-import { getCollectionList, getMuseumList, getAge, getType } from "@/config/api";
|
|
|
+import {
|
|
|
+ getCollectionList,
|
|
|
+ getMuseumList,
|
|
|
+ getAge,
|
|
|
+ getType,
|
|
|
+ getMuseumListOrInfoAPI,
|
|
|
+} from "@/config/api";
|
|
|
import showCollection from "@/components/showCollection/index.vue";
|
|
|
import emitter from "@/mitt/index";
|
|
|
|
|
@@ -110,13 +177,11 @@ export default {
|
|
|
const currentType = ref("");
|
|
|
const currentMuseum = ref("");
|
|
|
|
|
|
-
|
|
|
- const busy = ref(false)
|
|
|
+ const busy = ref(false);
|
|
|
const ages = ref([]);
|
|
|
const types = ref([]);
|
|
|
const museumList = ref([]);
|
|
|
|
|
|
-
|
|
|
const menu = ref([
|
|
|
{
|
|
|
id: "",
|
|
@@ -142,46 +207,72 @@ export default {
|
|
|
|
|
|
const menuActive = ref("");
|
|
|
|
|
|
+ const getMuseumListOrInfoFu = async () => {
|
|
|
+ let res = await getMuseumListOrInfoAPI("goods");
|
|
|
+ museumList.value = res.data.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ if (!currentMuseum.value) {
|
|
|
+ currentMuseum.value = museumList.value[0].value;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- getAge(data => {
|
|
|
- ages.value = data.data.data.map(item => {
|
|
|
+ getAge((data) => {
|
|
|
+ ages.value = data.data.data.map((item) => {
|
|
|
return {
|
|
|
...item,
|
|
|
label: item.name,
|
|
|
- value: item.id
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
- getType(data => {
|
|
|
- types.value = data.data.data.map(item => {
|
|
|
+ getType((data) => {
|
|
|
+ types.value = data.data.data.map((item) => {
|
|
|
return {
|
|
|
...item,
|
|
|
label: item.name,
|
|
|
- value: item.id
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- getMuseumList({
|
|
|
- "cityId": '',
|
|
|
- "pageNum": 1,
|
|
|
- "pageSize": 1000,
|
|
|
- }, data => {
|
|
|
- museumList.value = data.data.records.map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- label: item.name,
|
|
|
- value: item.id
|
|
|
- }
|
|
|
- })
|
|
|
- if (!currentMuseum.value) {
|
|
|
- currentMuseum.value = museumList.value[0].value
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ getMuseumListOrInfoFu();
|
|
|
+ // getMuseumList({
|
|
|
+ // "cityId": '',
|
|
|
+ // "pageNum": 1,
|
|
|
+ // "pageSize": 1000,
|
|
|
+ // }, data => {
|
|
|
+ // museumList.value = data.data.records.map(item => {
|
|
|
+ // return {
|
|
|
+ // ...item,
|
|
|
+ // label: item.name,
|
|
|
+ // value: item.id
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // if (!currentMuseum.value) {
|
|
|
+ // currentMuseum.value = museumList.value[0].value
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ });
|
|
|
|
|
|
- return { ages, types, currentMuseum, museumList, menu, currentAge, menuActive, currentType, searchKey, busy }
|
|
|
+ return {
|
|
|
+ ages,
|
|
|
+ types,
|
|
|
+ currentMuseum,
|
|
|
+ museumList,
|
|
|
+ menu,
|
|
|
+ currentAge,
|
|
|
+ menuActive,
|
|
|
+ currentType,
|
|
|
+ searchKey,
|
|
|
+ busy,
|
|
|
+ };
|
|
|
},
|
|
|
components: { showCollection, mb_select },
|
|
|
|
|
@@ -195,57 +286,61 @@ export default {
|
|
|
pageNum: 1,
|
|
|
showSize: 4,
|
|
|
current: 1,
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
watch: {
|
|
|
searchKey() {
|
|
|
- this.getData(true)
|
|
|
+ this.getData(true);
|
|
|
},
|
|
|
currentAge() {
|
|
|
- this.getData(true)
|
|
|
+ this.getData(true);
|
|
|
},
|
|
|
currentMuseum() {
|
|
|
- this.getData(true)
|
|
|
- this.$emit('updateMuseum', this.museumList.find((item => item.id == this.currentMuseum)))
|
|
|
+ this.getData(true);
|
|
|
+ this.$emit(
|
|
|
+ "updateMuseum",
|
|
|
+ this.museumList.find((item) => item.id == this.currentMuseum)
|
|
|
+ );
|
|
|
},
|
|
|
currentType() {
|
|
|
- this.getData(true)
|
|
|
+ this.getData(true);
|
|
|
},
|
|
|
menuActive() {
|
|
|
- this.getData(true)
|
|
|
- }
|
|
|
+ this.getData(true);
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
- handleTab() {
|
|
|
-
|
|
|
- },
|
|
|
+ handleTab() {},
|
|
|
getData(reset) {
|
|
|
if (reset) {
|
|
|
- this.list = []
|
|
|
+ this.list = [];
|
|
|
}
|
|
|
- this.busy = true
|
|
|
- getCollectionList({
|
|
|
- "ageId": this.currentAge,
|
|
|
- "museumId": this.currentMuseum,
|
|
|
- "type": this.menuActive,
|
|
|
- "pageNum": this.paging.pageNum,
|
|
|
- "pageSize": this.paging.pageSize,
|
|
|
- "searchKey": this.searchKey,
|
|
|
- "textureId": this.currentType,
|
|
|
- }, data => {
|
|
|
- this.busy = false
|
|
|
- if (data.data.total <= this.list.length) {
|
|
|
- this.busy = true
|
|
|
- return
|
|
|
- }
|
|
|
- this.list = this.list.concat(data.data.records)
|
|
|
- this.paging.pageNum += 1
|
|
|
+ this.busy = true;
|
|
|
+ getCollectionList(
|
|
|
+ {
|
|
|
+ ageId: this.currentAge,
|
|
|
+ museumId: this.currentMuseum,
|
|
|
+ type: this.menuActive,
|
|
|
+ pageNum: this.paging.pageNum,
|
|
|
+ pageSize: this.paging.pageSize,
|
|
|
+ searchKey: this.searchKey,
|
|
|
+ textureId: this.currentType,
|
|
|
+ },
|
|
|
+ (data) => {
|
|
|
+ this.busy = false;
|
|
|
+ if (data.data.total <= this.list.length) {
|
|
|
+ this.busy = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.list = this.list.concat(data.data.records);
|
|
|
+ this.paging.pageNum += 1;
|
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$redrawVueMasonry(this.containerId);
|
|
|
- });
|
|
|
- })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$redrawVueMasonry(this.containerId);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
// console.log(this);
|
|
|
// this.list = this.list.concat([]);
|
|
@@ -255,13 +350,13 @@ export default {
|
|
|
// });
|
|
|
},
|
|
|
onClickCollection(data) {
|
|
|
- this.activeCollection = data
|
|
|
- }
|
|
|
+ this.activeCollection = data;
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- emitter.on('closeCollection', () => {
|
|
|
- this.activeCollection = ''
|
|
|
- })
|
|
|
+ emitter.on("closeCollection", () => {
|
|
|
+ this.activeCollection = "";
|
|
|
+ });
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -281,11 +376,11 @@ export default {
|
|
|
font-size: 14px;
|
|
|
padding-bottom: 20px;
|
|
|
|
|
|
- >ul {
|
|
|
+ > ul {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
text-align: center;
|
|
|
margin: 0 6px;
|
|
|
cursor: pointer;
|
|
@@ -325,7 +420,7 @@ export default {
|
|
|
height: calc(100% - 40px);
|
|
|
width: 100%;
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
background-repeat: no-repeat;
|
|
@@ -354,7 +449,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.fnbar {
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
@@ -376,7 +470,7 @@ export default {
|
|
|
position: absolute;
|
|
|
right: 5%;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
}
|
|
@@ -397,23 +491,23 @@ export default {
|
|
|
padding: 0 10px;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
|
|
|
- >input {
|
|
|
+ > input {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding-left: 16px;
|
|
|
color: #fff;
|
|
|
|
|
|
&::placeholder {
|
|
|
- color: #D2D2D2;
|
|
|
+ color: #d2d2d2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
display: inline-block;
|
|
|
color: var(--font-active);
|
|
|
width: 30px;
|