Aida_Purchaser_Front/src/views/digitalItem/index.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue";
import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue";
import { useRouter } from "vue-router";
import scListNull from '@/views/shoppingCart/sc-list-null.vue'

// 定义组件名称
defineOptions({
  name: 'digitalItem'
})
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const digitalItemRef = ref(null)
const scrollTop = ref(0)
const router = useRouter()
let data = reactive({
})

const categoriesList = ref([
	{
		value:'Best Selling',
		label:'Best Selling'
	},{
		value:'Price: Low to High',
		label:'Price: Low to High'
	},{
		value:'Newest First',
		label:'Newest First'
	},
])
const categories = ref('Newest First')
const addShopping = (item) => {}
const openDetail = (item) => {
	scrollTop.value = digitalItemRef.value.scrollTop
	router.push({
		path: '/digitalItem/' + 123,
	})
}
onActivated(()=>{
	digitalItemRef.value.scrollTop = scrollTop.value
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="digitalItem" ref="digitalItemRef">
		<div class="header-img">
			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
			<div class="text">
				<div class="title">Digital Item</div>
				<p class="info">Virtual fashion creations collected in your personal archive</p>
			</div>
		</div>
		<div class="filters">
			<div class="filter-item">
				<el-select v-model="categories" placeholder="Sort By" :teleported="false">
					<template #label="{ label }">
						<span class="header-label">Sort By</span>
						<span class="header-value">{{ label }}</span>
					</template>
					<el-option
						v-for="item in categoriesList"
						:key="item.label"
						:value="item.value"
						:label="item.label"
					/>
				</el-select>
			</div>
		</div>
		<div class="content">
			<div class="merchant-info">
				<MerchantInfo></MerchantInfo>
			</div>
			<div class="commodity-list">
				<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
				<div v-else class="null">
					<sc-list-null 
						nullImage="shopping-cart"
						:showButton="false" 
						title="Nothing in Digital Item"
						tip="Try adjusting your filters or refreshing the page."
					/>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	.digitalItem{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.header-img{
			width: 100%;
			position: relative;
			>img{
				width: 100%;
			}
			> .text{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				> .title{
					font-family: KaiseiOpti-Bold;
					color: #232323;
					font-weight: 700;
					font-size: 4rem;
					line-height: 2.3rem;
					letter-spacing: 0%;
					text-align: center;
				}
				> .info{
					font-family: KaiseiOpti-Regular;
					color: #585858;
					font-size: 1.6rem;
					line-height: 140%;
					margin-top: 1.2rem;
					text-align: center;
				}
			}
		}
		> .filters{
			width: 100%;
			height: 6rem;
			display: flex;
			align-items: center;
			padding: 0 9rem;
			justify-content: flex-end;
			> .filter-item{	
				:deep(.el-select) {
					width: 15rem;
					--el-border-radius-base: 0;
					--el-select-input-color: rgba(0, 0, 0, 0.5);
					--el-select-input-font-size: 1rem;
					.el-select__wrapper {
						font-size: 1.07rem;
						padding: 0 0.7rem;
						line-height: 1;
						min-height: 0;
						height: 2.2rem;

						.header-label {
							font-family: KaiseiOpti-Regular;
							color: rgba(0, 0, 0, 0.5);
							margin-right: 0.6rem;
						}
						.header-value {
							font-family: KaiseiOpti-Bold;
							color: #232323;
						}
					}
					.el-select__popper {
						--el-popper-border-radius: 0;
						border: 0.1rem solid #d0d0d0;
						.el-select-dropdown__list {
							padding: 0;
							> .el-select-dropdown__item {
								margin-bottom: 0.89rem;
								color: #232323;
								font-size: 1.069rem;
								height: 2.68rem;
								line-height: 2.68rem;
								padding: 0 1.4rem;
								&:last-child {
									margin-bottom: 0;
								}
								&.is-selected {
									font-family: KaiseiOpti-Bold;
									background-color: #f4f4f4;
								}
							}
						}
					}
				}

			}
		}
		> .content{
			display: flex;
			height: auto;
			// align-items: flex-start;
			border-top: 0.5px solid #585858;
			.merchant-info{
				width: 38.5rem;
				padding-left: 10.2rem;
				height: var(--app-view-height);
				overflow-y: auto;
				position: sticky;
				top: 0;
				&::-webkit-scrollbar{
					width: 0;
					height: 0;
				}
			}
			.commodity-list{
				flex: 1;
				border-left: 0.5px solid #585858;
				border-right: 0.5px solid #585858;
				margin-right: 9rem;
				display: flex;
				.null{
					flex: 1;
				}
			}
		}
	}
</style>