调整添加购物车逻辑
This commit is contained in:
X1627315083@163.com
5
src/assets/icons/shop.svg
Normal file
5
src/assets/icons/shop.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 6.4C20 5.3 19.1 4 18 4H7.5C7.4 4 7.2 4 7.1 4C5.9 4.2 5 5.2 5 6.4L4 9C4 10.4 5.1 11.5 6.5 11.5C7.9 11.5 8.1 11.1 8.5 10.5C8.9 11.1 9.7 11.5 10.5 11.5C11.3 11.5 12.1 11.1 12.5 10.5C12.9 11.1 13.7 11.5 14.5 11.5C15.3 11.5 16.1 11.1 16.5 10.5C16.9 11.1 17.7 11.5 18.5 11.5C19.9 11.5 21 10.4 21 9M5.9 6.4C5.9 5.6 6.5 5 7.2 4.9C7.2 4.9 7.3 4.9 7.4 4.9H17.9C18.5 4.9 19 5.8 19 6.4C19 7 20 9.1 20 9.1C20 10 19.3 10.7 18.4 10.7C17.5 10.7 16.8 10 16.8 9.1V7.6H15.9V9.1C15.9 10 15.2 10.7 14.3 10.7C13.4 10.7 12.7 10 12.7 9.1V7.6H11.8V9.1C11.8 10 11.1 10.7 10.2 10.7C9.3 10.7 8.6 10 8.6 9.1V7.6H7.7V9.1C7.7 10 7.50938 10.7 6.60938 10.7C5.48438 10.7 4.9 9.9 4.9 9L5.9 6.4Z" fill="#232323"/>
|
||||
<path d="M6 11.2V19.3C6 19.9 6.4 20.3 7 20.3H18C18.6 20.3 19 19.9 19 19.3V13.5" stroke="#232323" stroke-width="0.75" stroke-linecap="round"/>
|
||||
<path d="M17 15.5V13.5C17 13.2239 16.7761 13 16.5 13C16.2239 13 16 13.2239 16 13.5V15.5C16 15.7761 16.2239 16 16.5 16C16.7761 16 17 15.7761 17 15.5Z" fill="#232323"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
4
src/assets/icons/statement.svg
Normal file
4
src/assets/icons/statement.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.32919 0C3.73406 0 0 3.7382 0 8.33333C0 12.9285 3.7382 16.6667 8.32919 16.6667C12.9202 16.6667 16.6584 12.9285 16.6584 8.33333C16.6584 3.7382 12.9243 0 8.32919 0ZM8.32919 15.7352C4.24739 15.7352 0.927306 12.4151 0.927306 8.33333C0.927306 4.25153 4.24739 0.931445 8.32919 0.931445C12.411 0.931445 15.7311 4.25153 15.7311 8.33333C15.7311 12.4151 12.411 15.7352 8.32919 15.7352Z" fill="#979797"/>
|
||||
<path d="M8.84744 7.50551C8.84744 7.21972 8.61576 6.98804 8.32997 6.98804C8.04418 6.98804 7.8125 7.21972 7.8125 7.50551V12.4732C7.8125 12.759 8.04418 12.9907 8.32997 12.9907C8.61576 12.9907 8.84744 12.759 8.84744 12.4732V7.50551Z" fill="#979797"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 756 B |
@@ -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