Aida_Purchaser_Front/src/views/brandDetail/index.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue";
import { useRouter, useRoute } from "vue-router";
import myEvent from '@/utils/myEvent'
import { ElMessage } from 'element-plus'
import { getDesignerDetail } from '@/api/brand'
import { AddShoppingCart } from '@/api/shoppingCart'
import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'

//const props = defineProps({
//})
//const emit = defineEmits([
//])
const router = useRouter()
const route = useRoute()

const designerDetail = ref({
	avatar: '',
	brandBanner: '',
	description: '',
	email: '',
	mobile: '',
	ownerName: '',
	shopName: '',
	socialLinks: '[]',
})

const addShopping = (item) => {
	if(!item.price) return ElMessage.warning('Please log in first.')
	AddShoppingCart({listingIds:[item.id]}).then((res)=>{
		item.shopName = designerDetail.value.shopName
		myEvent.emit('addShopping', item)
	})
}
const openDetail = (item) => {	
	router.push({name: 'digitalItemDetail', params: {id: item.id}})
}
const getDetail = ()=>{
	let data = {
		sellerId: route.params.id,
	}
	getDesignerDetail(data,true).then((res)=>{
		designerDetail.value = res
	})
}
onMounted(()=>{
	getDetail()
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="brand">
		<div class="header-img">
			<img :src="designerDetail.brandBanner || brandDetailBg" alt="">
		</div>
		<div class="content">
			<div class="merchant-info">
				<MerchantInfo :designerDetail="designerDetail"></MerchantInfo>
			</div>
			<div class="commodity-list">
				<CommodityList :id="route.params.id" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	.brand{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.header-img{
			width: 100%;
			>img{
				width: 100%;
			}
		}
		.content{
			display: flex;
			height: auto;
			// align-items: flex-start;
			.merchant-info{
				width: 40rem;
				padding-left: 12.7rem;
				padding-right: 2.7rem;
				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;
			}
		}
	}
</style>