调整添加购物车逻辑
This commit is contained in:
X1627315083@163.com
@@ -1,7 +1,9 @@
|
||||
<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 scList from '@/views/shoppingCart/sc-list.vue'
|
||||
import { useRouter } from "vue-router";
|
||||
import img from '@/assets/images/brand-null.png'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -9,11 +11,17 @@ import scList from '@/views/shoppingCart/sc-list.vue'
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const isShoppingShow = ref(false)
|
||||
const router = useRouter()
|
||||
const isShoppingShow = ref(true)
|
||||
const shoppingClose = () => {
|
||||
isShoppingShow.value = false
|
||||
}
|
||||
|
||||
const goShopping = () => {
|
||||
router.push({path: '/shoppingCart'})
|
||||
isShoppingShow.value = false
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
myEvent.add('addShopping', (item) => {
|
||||
isShoppingShow.value = true
|
||||
@@ -27,14 +35,182 @@ defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
|
||||
<sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/>
|
||||
<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>
|
||||
.homeNavBox{
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user