aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

digital item页面

Browse Source
This commit is contained in:
X1627315083@163.com
2026-05-22 11:11:38 +08:00
parent 2d95c3c976
commit 3ae774bc6b
7 changed files with 278 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/views/digitalDetail/index.vue
View File

@@ -5,6 +5,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
import myEvent from '@/utils/myEvent'
import { getListingDetailApi } from '@/api/listing'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
//const props = defineProps({
//})
@@ -21,8 +23,40 @@ let detail:any = ref({
updateTime: '',
gender: '',
})
const addShopping = (item) => {
myEvent.emit('addShopping', item)
const sketchList = ref([])
const illustrationList = ref([])
const productList = ref([])
const editorialVisualList = ref([])
const addShopping = () => {
console.log(detail.value)
if(!detail.value.price) return ElMessage.warning('Please log in first.')
let data = {
cover: detail.value.images.cover[0],
price: detail.value.price,
shopName: detail.value.shopName,
title: detail.value.title,
}
myEvent.emit('addShopping', data)
}
const goShopping = () => {
if(!detail.value.price) return ElMessage.warning('Please log in first.')
router.push({path: '/shoppingCart'})
}
const setImgList = (list)=>{
sketchList.value = list.apparel.map((item:any) => {return {imgUrl:item}})
illustrationList.value = list.sketch.map((item:any) => {return {imgUrl:item}})
productList.value = list.main_product.map((item:any) => {return {imgUrl:item}})
editorialVisualList.value = list.product.map((item:any) => {return {imgUrl:item}})
if(list.firstFrame){
list.firstFrame.forEach((item:any,index) => {
editorialVisualList.value.push({
imgUrl:item,
gif: list.gif[index],
video: list.video[index],
})
})
}
}
const getListingDetail = ()=>{
getListingDetailApi({
@@ -30,8 +64,15 @@ const getListingDetail = ()=>{
}).then((res)=>{
console.log(res)
if(res)detail.value = res
setImgList(res.images)
})
}
// const vObserve = {
// mounted (el,binding) {
// },
// unmounted (el,binding) {
// }
// }
onMounted(()=>{
getListingDetail()
})
@@ -43,23 +84,38 @@ defineExpose({})
<div class="digitalItemDetail">
<div class="center">
<div class="img-list">
<div class="title">
<div>Sketch</div>
<div>Illustration</div>
<div>Product</div>
</div>
<div class="img">
<div class="sketch">
<img :src="img" v-for="item in 4" :key="item" alt="">
</div>
<div class="illustration">
<img :src="img" v-for="item in 4" :key="item" alt="">
</div>
<div class="product">
<img :src="img" v-for="item in 4" :key="item" alt="">
<div class="left">
<div class="title">Sketch</div>
<div class="box sketch">
<div class="imgBox">
<img :src="item?.imgUrl" v-for="item in sketchList" :key="item" alt="">
</div>
</div>
</div>
<div class="right">
<div class="top">
<div class="box">
<div class="title">Illustration</div>
<div class="imgBox">
<img :src="item?.imgUrl" v-for="item in illustrationList" :key="item" alt="">
</div>
</div>
<div class="box">
<div class="title">Product</div>
<div class="imgBox">
<img :src="item?.imgUrl" v-for="item in productList" :key="item" alt="">
</div>
</div>
</div>
<div class="bottom">
<div class="box aa">
<div class="title">Editorial Visual</div>
<div class="imgBox">
<img :src="item?.gif||item?.imgUrl" v-for="item in editorialVisualList" :key="item" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="img-detail">
<div class="back" @click="router.back()">
@@ -69,13 +125,13 @@ defineExpose({})
<span>Back</span>
</div>
<div class="img-info">
<div class="img-type">{{ detail.gender.toUpperCase() }} / skirt, blouse, Outwear</div>
<div class="img-type">{{ detail.designFor?.toUpperCase() || ''}} / {{ detail.productCategory?.join(',')?.toUpperCase() || '' }}</div>
<div class="img-name">{{ detail.title }}</div>
<div class="img-price" v-if="detail.price">¥{{ detail.price }} <span class="mini-scrollbar">HKD</span></div>
</div>
<div class="commodity">
<div class="info">
<img class="profile" :src="img" alt="">
<img class="profile" :src="detail.avatar" alt="">
<div class="detail">
<div class="name">{{ detail.shopName }}</div>
<div class="release-time">
@@ -102,8 +158,8 @@ defineExpose({})
</div>
</div>
<div class="button">
<div class="buy-now">Buy Now</div>
<div class="add-cart" @click="addShopping(item)">
<div class="buy-now" @click="goShopping">Buy Now</div>
<div class="add-cart" @click="addShopping()">
<div class="icon">
<svg-icon name="cart_0" size="24"></svg-icon>
</div>
@@ -130,42 +186,66 @@ defineExpose({})
display: flex;
overflow: hidden;
.img-list{
display: flex;
flex: 1;
flex-direction: column;
display: grid;
grid-template-columns: 1fr 2fr;
--row-width: 33.333%;
align-items: stretch;
// --row-width: 29.3rem;
overflow-y: auto;
position: relative;
&::-webkit-scrollbar{
display: none;
}
> .title{
display: flex;
.title{
width: 100%;
line-height: 8.6rem;
padding-left: 2.4rem;
font-weight: 500;
font-size: 1.6rem;
background-color: #f5f5f5;
position: sticky;
top: 0;
> div{
width: var(--row-width);
line-height: 8.6rem;
padding-left: 2.4rem;
border-right: 0.5px solid #C4C4C4;
font-weight: 500;
font-size: 1.6rem;
background-color: #f5f5f5;
&:last-child{
border: none;
}
.box{
flex: 1;
.imgBox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
img{
width: 100%;
}
}
}
> .img{
display: flex;
> div{
display: flex;
width: var(--row-width);
}
> .left{
border-right: 0.5px solid #C4C4C4;
.imgBox{
padding: 0 30px;
}
}
> .right{
position: relative;
&::after{
content: '';
display: block;
border-right: 0.5px solid #C4C4C4;
flex-direction: column;
&:last-child{
border: none;
position: absolute;
height: 100%;
left: 50%;
top: 0;
z-index: 2;
}
> .top{
display: flex;
}
> .bottom{
.imgBox{
display: flex;
img{
width: 50%;
}
}
}
}