Aida_Purchaser_Front/src/views/shopping-drawer.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import myEvent from '@/utils/myEvent'
// import scList from '@/views/shoppingCart/sc-list.vue'
import { useRouter } from "vue-router";
import img from '@/assets/images/brand-null.png'

//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
const router = useRouter()
const isShoppingShow = ref(false)
const shoppingClose = () => {
	isShoppingShow.value = false
}

const goShopping = () => {
	router.push({path: '/shoppingCart'})
	isShoppingShow.value = false
}

onMounted(()=>{
	myEvent.add('addShopping', (item) => {
		isShoppingShow.value = true
		console.log(item)
	})
})
onUnmounted(()=>{
	myEvent.remove('addShopping')
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer"  :close-on-click-modal="false" title="I am the title" :with-header="false">
		<div class="addShoppingInfo">
			<div class="header">
				<div class="title">Added to your Shopping Cart</div>
				<span class="close" @click="shoppingClose"
					><svg-icon name="close" size="13"
				/></span>
			</div>
			<div class="content">
				<div class="img-list">
					<div class="img-box">
						<img :src="img" alt="">
					</div>
					<div class="img-box">
						<img :src="img" alt="">
					</div>
					<div class="img-box">
						<img :src="img" alt="">
					</div>
				</div>
				<div class="inf-box">
					<div class="name">North Outfit Set</div>
					<div class="shopping-name">
						<div class="icon">
							<SvgIcon name="shop" size="24" />
						</div>
						Roaming Clouds
					</div>
					<div class="price">$15 <span class="currency">HKD</span></div>
				</div>
				<div class="statement">
					<div class="icon">
						<SvgIcon name="statement" size="16.6" />
					</div>
					Digital Assets Only. No physical product included.
				</div>
			</div>
			<div class="button" @click="goShopping">
				SeE Shopping Cart
			</div>
		</div>
		<!-- <sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/> -->
	</el-drawer>
</template>
<style lang="less">
	.el-drawer.addShoppingDrawer{
		--el-drawer-padding-primary: 2.4rem 3.4rem;
	}
</style>
<style lang="less" scoped>
	
	.addShoppingInfo{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> .header{
			border-bottom: 0.1rem solid #c4c4c4;
			display: flex;
			padding-bottom: 2.4rem;
			align-items: center;
			justify-content: space-between;
			> .title{
				font-family: KaiseiOpti-Bold;
				font-size: 2rem;
				line-height: 120%;
				color: #121212;
				font-weight: 400;
			}
			> .close{
				cursor: pointer;
			}
		}
		> .content{
			flex: 1;
			padding-top: 9.6rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			> .img-list{
				height: 37.5rem;
				width: 33.7rem;
				position: relative;
				> .img-box{
					position: absolute;
					overflow: hidden;
					width: 26.9rem;
					height: 34.1rem;
					border: 1px solid #EFEFEF;
					top: 1.7rem;
					right: 0;
					left: auto;
					transform-origin: bottom;
					box-shadow: 1rem .8rem 2.4rem 0px #4D4D4D0A;
					> img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					&:nth-child(1){
						transform: rotate(-8deg);
						background-color: #eaeaea;
						right: 2rem;
					}
					&:nth-child(2){
						transform: rotate(-4deg);
						background-color: #eeeeee;
						right: 1rem;
					}
					&:nth-child(3){
						transform: rotate(0);
						background-color: #fafafa;
					}
				}
			}
			> .inf-box{
				margin-top: 5.18rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				> .name{
					font-family: KaiseiOpti-Bold;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 140%;
				}
				> .shopping-name{
					margin-top: 1.3rem;
					font-weight: 500;
					font-size: 1.6rem;
					line-height: 140%;
					display: flex;
					align-items: center;
					> .icon{
						margin-right: 0.8rem;
					}
				}
				> .price{
					margin-top: 1.2rem;
					font-family: KaiseiOpti-Bold;
					font-weight: 700;
					font-style: Bold;
					font-size: 1.8rem;
					line-height: 140%;
					> .currency{
						font-size: 1.2rem;
						font-weight: 500;
						line-height: 140%;
					}
				}
			}
			> .statement{
				margin-top: 5rem;
				font-family: KaiseiOpti-Regular;
				color: #979797;
				display: flex;
				font-weight: 400;
				font-size: 1.2rem;
				line-height: 140%;
				> .icon{
					margin-right: 0.8rem;
				}
			}
		}
		> .button{
			font-family: KaiseiOpti-Regular;
			font-weight: 400;
			font-size: 14px;
			line-height: 4.6rem;
			letter-spacing: 3%;
			text-align: center;
			width: 100%;
			border: 1px solid #232323;
			margin-bottom: calc(6rem - 2.4rem);
			cursor: pointer;
		}
	}
</style>