322 lines
7.8 KiB
Vue
322 lines
7.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import myEvent from '@/utils/myEvent'
|
|
import scListNull from '@/views/shoppingCart/sc-list-null.vue'
|
|
import brandItem from '@/views/brand/brand-item.vue'
|
|
import { getDesignerList } from '@/api/brand'
|
|
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
const router = useRouter()
|
|
let data = reactive({
|
|
})
|
|
|
|
const searchBrand = ref('')
|
|
const merchantList = ref([
|
|
])
|
|
const getMerchantData = reactive({
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
isShowMark:false,
|
|
isNoData:false,
|
|
})
|
|
const searchHistory = ref([
|
|
|
|
])
|
|
|
|
let changeSearchBrandTime = null
|
|
const changeSearchBrand = () => {
|
|
clearTimeout(changeSearchBrandTime)
|
|
getDesignerList({
|
|
keyword: searchBrand.value,
|
|
}).then((res)=>{
|
|
merchantList.value = []
|
|
merchantList.value.push(...res)
|
|
})
|
|
// changeSearchBrandTime = setTimeout(()=>{
|
|
// getMerchantData.pageNum = 1
|
|
// getMerchantData.isShowMark = false
|
|
// getMerchantData.isNoData = false
|
|
// },300)
|
|
}
|
|
|
|
// const getBrandList = async () => {
|
|
// if(getMerchantData.isShowMark && !getMerchantData.isNoData)return
|
|
// getMerchantData.isShowMark = true
|
|
// let value = {
|
|
// pageSize: getMerchantData.pageSize,
|
|
// pageNum: getMerchantData.pageNum,
|
|
// status: 1,
|
|
// }
|
|
// setTimeout(()=>{
|
|
// if(merchantList.value.length >= 5){
|
|
// getMerchantData.isNoData = true
|
|
// merchantList.value = []
|
|
// return
|
|
// }
|
|
// getMerchantData.pageNum += 1
|
|
// merchantList.value.push({
|
|
// name:'Roaming Clouds',
|
|
// portrait: img,
|
|
// collectionsName:'by Lian Su ',
|
|
// collections:[
|
|
// img,img,img,
|
|
// ],
|
|
// })
|
|
// getMerchantData.isShowMark = false
|
|
// },1000)
|
|
// // await getPublishList(value).then((res)=>{
|
|
// // if(res.content.length == 0)getMerchantData.isNoData = true
|
|
// // getMerchantData.pageNum += 1
|
|
// // list.value.push(...res.content)
|
|
// // })
|
|
// }
|
|
// const vObserve = {
|
|
// mounted (el,binding) {
|
|
// getMerchantData.isShowMark = false
|
|
// getMerchantData.isNoData = false
|
|
// new IntersectionObserver(
|
|
// (entries, observer) => {
|
|
// // 如果不是相交，则直接返回
|
|
// // console.log(entries[0]);
|
|
// if (!entries[0].intersectionRatio) return;
|
|
// getMerchantData.pageNum += 1
|
|
// binding.value()
|
|
// },
|
|
// // { root:worksPage }
|
|
// ).observe(el);
|
|
// }
|
|
// }
|
|
|
|
const deleteHistory = (item) => {
|
|
searchHistory.value = searchHistory.value.filter((i) => i != item)
|
|
localStorage.setItem('brandSearchHistory', JSON.stringify(searchHistory.value));
|
|
}
|
|
const viewProfile = (item) => {
|
|
if(!searchHistory.value.includes(searchBrand.value))searchHistory.value.push(searchBrand.value)
|
|
localStorage.setItem('brandSearchHistory', JSON.stringify(searchHistory.value));
|
|
router.push({
|
|
path:'/brand/'+item.sellerId,
|
|
})
|
|
}
|
|
|
|
onMounted(()=>{
|
|
const value = localStorage.getItem('brandSearchHistory');
|
|
if(value)searchHistory.value = JSON.parse(value)
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="brand">
|
|
<div class="header-img" :class="{'active': searchBrand.length > 0}">
|
|
<img src="@/assets/images/brand/brandBg.png" alt="">
|
|
<div class="text-box">
|
|
<div class="title">Brand</div>
|
|
<span>Every brand, every story — discover who's behind the collections.</span>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="input">
|
|
<input type="text" v-model="searchBrand" @input="changeSearchBrand" placeholder="Search brand">
|
|
<div class="icon">
|
|
<SvgIcon name="brand-search" size="32" />
|
|
</div>
|
|
</div>
|
|
<div class="merchantList" v-if="searchBrand.length > 0">
|
|
<brand-item v-for="item in merchantList" :key="item.name" :item="item" @viewProfile="viewProfile"></brand-item>
|
|
<div class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
|
|
<!-- <div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
|
|
<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
|
|
<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
|
|
</div> -->
|
|
|
|
<div class="merchantListNull" v-if="getMerchantData.isNoData && searchBrand.length > 0">
|
|
<sc-list-null
|
|
nullImage="brand"
|
|
:showButton="false"
|
|
title="Brand No Found"
|
|
tip="Try using another keywords."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="null-input" v-if="searchBrand.length == 0">
|
|
<div class="title">
|
|
<div class="icon">
|
|
<SvgIcon name="brand-time" size="20" />
|
|
</div>
|
|
<span>Searching History</span>
|
|
</div>
|
|
<div class="history">
|
|
<div v-for="item in searchHistory" :key="item" @click.stop="searchBrand = item" class="item">
|
|
<span>{{item}}</span>
|
|
<div class="icon" @click.stop="deleteHistory(item)">
|
|
<SvgIcon name="brand-delete" size="18" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer></Footer>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.brand{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.header-img{
|
|
width: 100%;
|
|
position: relative;
|
|
height: 34.4rem;
|
|
transition: all .3s;
|
|
&.active{
|
|
height: 14.7rem;
|
|
}
|
|
>img{
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
> .text-box{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
> .title{
|
|
font-family: 'KaiseiOpti-Bold';
|
|
font-weight: 700;
|
|
font-size: 4rem;
|
|
line-height: 2.3rem;
|
|
letter-spacing: 0%;
|
|
color: #000;
|
|
}
|
|
> span{
|
|
display: block;
|
|
margin-top: 2.4rem;
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-weight: 400;
|
|
font-size: 1.6rem;
|
|
line-height: 140%;
|
|
}
|
|
}
|
|
}
|
|
>.content{
|
|
display: flex;
|
|
height: auto;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
> .input{
|
|
width: 66.6rem;
|
|
display: flex;
|
|
border-bottom: 2px solid #232323;
|
|
padding: 1.4rem 1.4rem 1.4rem 2.4rem;
|
|
background-color: #f9f9f9;
|
|
display: flex;
|
|
margin-top: 8rem;
|
|
> input{
|
|
width: 57.2rem;
|
|
line-height: 3.2rem;
|
|
padding: 0;
|
|
border: none;
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-weight: 400;
|
|
font-size: 1.6rem;
|
|
line-height: 100%;
|
|
margin-right: 2.4rem;
|
|
background-color: transparent;
|
|
outline: none;
|
|
}
|
|
> .icon{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
> .null-input{
|
|
margin-top: 8rem;
|
|
.title{
|
|
display: flex;
|
|
justify-content: center;
|
|
.icon{
|
|
margin-right: 2rem;
|
|
}
|
|
}
|
|
.history{
|
|
margin-top: 4rem;
|
|
width: 59rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
column-gap: 3.2rem;
|
|
row-gap: 1.2rem;
|
|
.item{
|
|
cursor: pointer;
|
|
display: flex;
|
|
> span{
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-weight: 400;
|
|
font-size: 1.4rem;
|
|
line-height: 100%;
|
|
margin-right: .4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .merchantList{
|
|
width: 121.8rem;
|
|
margin-top: 6rem;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
gap: 3.2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
.end{
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 140%;
|
|
height: 7rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
> .material_content_list_loding{
|
|
width: 100%;
|
|
height: 5rem;
|
|
aspect-ratio: 1/1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
> .page_loading{
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
> img{
|
|
width: 5rem;
|
|
height: 5rem;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
> .merchantListNull{
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |