Aida_Purchaser_Front/src/views/brand/index.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>