466 lines
11 KiB
Vue
466 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
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'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { AddShoppingCart } from '@/api/shoppingCart'
|
|
import { CreateOrder } from '@/api/shoppingCart'
|
|
|
|
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
const route = useRoute()
|
|
const { t } = useI18n()
|
|
|
|
const router = useRouter()
|
|
let detail:any = ref({
|
|
description: '',
|
|
title: '',
|
|
price: '',
|
|
shopName: '',
|
|
updateTime: '',
|
|
gender: '',
|
|
sellerId: '',
|
|
})
|
|
const sketchList = ref([])
|
|
const illustrationList = ref([])
|
|
const productList = ref([])
|
|
const editorialVisualList = ref([])
|
|
const addShopping = () => {
|
|
if(!detail.value.price) return ElMessage.warning(t('brandDetail.addShoppingTip'))
|
|
let data = {
|
|
cover: detail.value.images.cover[0],
|
|
price: detail.value.price,
|
|
shopName: detail.value.shopName,
|
|
title: detail.value.title,
|
|
id: detail.value.id,
|
|
}
|
|
AddShoppingCart({listingIds:[detail.value.id]}).then((res)=>{
|
|
myEvent.emit('addShopping', data)
|
|
})
|
|
}
|
|
|
|
|
|
const goShopping = () => {
|
|
if(!detail.value.price) return ElMessage.warning(t('brandDetail.addShoppingTip'))
|
|
CreateOrder(
|
|
[detail.value.id],true
|
|
).then((res)=>{
|
|
// if(res)router.push({path: '/shoppingCart')
|
|
})
|
|
// 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({
|
|
id:route.params.id + '',
|
|
}).then((res)=>{
|
|
if(res)detail.value = res
|
|
setImgList(res.images)
|
|
})
|
|
}
|
|
const gobrand = () => {
|
|
if(!detail.value.sellerId)return
|
|
router.push({path: `/brand/${detail.value.sellerId}`})
|
|
}
|
|
// const vObserve = {
|
|
// mounted (el,binding) {
|
|
// },
|
|
// unmounted (el,binding) {
|
|
// }
|
|
// }
|
|
onMounted(()=>{
|
|
getListingDetail()
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
</script>
|
|
<template>
|
|
<div class="digitalItemDetail">
|
|
<div class="center">
|
|
<div class="img-list">
|
|
<div class="left">
|
|
<div class="title">{{ $t('digitalDetail.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 illustration">
|
|
<div class="title">{{ $t('digitalDetail.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">{{ $t('digitalDetail.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 editorialVisual">
|
|
<div class="title">{{ $t('digitalDetail.EditorialVisual') }}</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()">
|
|
<div class="icon">
|
|
<svg-icon name="digital-back" size="28"></svg-icon>
|
|
</div>
|
|
<span>{{ $t('digitalDetail.Back') }}</span>
|
|
</div>
|
|
<div class="img-info">
|
|
<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" v-avatarLoad="detail.avatar" alt="">
|
|
<div class="detail">
|
|
<div class="name" @click="gobrand">{{ detail.shopName }}</div>
|
|
<div class="release-time">
|
|
<span>{{ $t('digitalDetail.ReleaseIn') }} {{ detail.updateTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="introduce">
|
|
{{ detail.description }}
|
|
</div>
|
|
</div>
|
|
<div class="notice">
|
|
<div class="title">{{ $t('digitalDetail.CopyrightLicenseNotice') }}</div>
|
|
<div class="conter">
|
|
<div class="contet-title">
|
|
<div class="icon">
|
|
<svg-icon name="digital-Info" size="24"></svg-icon>
|
|
</div>
|
|
<span>{{ $t('digitalDetail.LicenseIncludedInAsset') }}</span>
|
|
</div>
|
|
<div class="info">
|
|
{{ $t('digitalDetail.LicenseIncludedInAssetInfo') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<div class="buy-now" @click="goShopping">{{ $t('digitalDetail.BuyNow') }}</div>
|
|
<div class="add-cart" @click="addShopping()">
|
|
<div class="icon">
|
|
<svg-icon name="cart_0" size="24"></svg-icon>
|
|
</div>
|
|
{{ $t('digitalDetail.AddToCart') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer></Footer>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
:deep(.el-drawer__body){
|
|
--el-drawer-padding-primary: 2.4rem 3.4rem 2.4rem 6rem;
|
|
}
|
|
.digitalItemDetail{
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.center{
|
|
// flex: 1;
|
|
display: flex;
|
|
// overflow: hidden;
|
|
.img-list{
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
--row-width: 33.333%;
|
|
align-items: stretch;
|
|
// --row-width: 29.3rem;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
border-right: 0.5px solid #585858;
|
|
&::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
.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;
|
|
}
|
|
.box{
|
|
flex: 1;
|
|
.imgBox{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
img{
|
|
width: 100%;
|
|
// height: 51rem;
|
|
// margin: 0 auto;
|
|
}
|
|
}
|
|
&.sketch{
|
|
.imgBox{
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
padding: 5rem 0;
|
|
img{
|
|
height: 20.4rem;
|
|
width: auto;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
&.illustration{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.imgBox{
|
|
flex: 1;
|
|
> img{
|
|
aspect-ratio: 9 / 16;
|
|
object-fit: contain;
|
|
padding: 3.6rem;
|
|
}
|
|
}
|
|
}
|
|
&.editorialVisual{
|
|
.imgBox{
|
|
row-gap: 60px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
> .left{
|
|
border-right: 0.5px solid #C4C4C4;
|
|
.imgBox{
|
|
padding: 0 3rem;
|
|
}
|
|
}
|
|
> .right{
|
|
position: relative;
|
|
&::after{
|
|
content: '';
|
|
display: block;
|
|
border-right: 0.5px solid #C4C4C4;
|
|
position: absolute;
|
|
height: 100%;
|
|
left: 50%;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
> .top{
|
|
display: flex;
|
|
}
|
|
> .bottom{
|
|
margin-top: 10.5rem;
|
|
.imgBox{
|
|
display: flex;
|
|
img{
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.img-detail{
|
|
padding-left: 3.2rem;
|
|
width: 57rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
height: calc(var(--app-view-height) - var(--footer-height));
|
|
position: sticky;
|
|
top: 0;
|
|
// height: 100%;
|
|
&::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
.back{
|
|
display: flex;
|
|
margin-top: 2.8rem;
|
|
gap: 1.4rem;
|
|
align-items: center;
|
|
width: min-content;
|
|
cursor: pointer;
|
|
> span{
|
|
font-weight: 500;
|
|
font-size: 1.6rem;
|
|
line-height: 120%;
|
|
}
|
|
}
|
|
.img-info{
|
|
margin-top: 2.8rem;
|
|
.img-type{
|
|
font-weight: 500;
|
|
font-size: 1.2rem;
|
|
line-height: 120%;
|
|
color: #808080;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.img-name{
|
|
font-family: KaiseiOpti-Bold;
|
|
font-weight: 700;
|
|
font-size: 3rem;
|
|
line-height: 120%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.img-price{
|
|
font-family: KaiseiOpti-Bold;
|
|
font-weight: 700;
|
|
font-size: 3rem;
|
|
line-height: 120%;
|
|
> span{
|
|
font-weight: 500;
|
|
font-size: 2rem;
|
|
line-height: 120%;
|
|
color: #585858;
|
|
}
|
|
}
|
|
}
|
|
.commodity{
|
|
margin-top: 4rem;
|
|
.info{
|
|
display: flex;
|
|
gap: 1.4rem;
|
|
margin-bottom: 1.4rem;
|
|
> .profile{
|
|
width: 5.4rem;
|
|
height: 5.4rem;
|
|
object-fit: cover;
|
|
}
|
|
> .detail{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
.name{
|
|
text-decoration: underline;
|
|
font-weight: 500;
|
|
font-size: 1.8rem;
|
|
line-height: 100%;
|
|
margin-bottom: .8rem;
|
|
cursor: pointer;
|
|
}
|
|
.release-time{
|
|
font-family: KaiseiOpti-Regular;
|
|
font-weight: 400;
|
|
font-size: 1.4rem;
|
|
line-height: 140%;
|
|
color: #585858;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
.introduce{
|
|
font-family: KaiseiOpti-Regular;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 140%;
|
|
color: #585858;
|
|
width: 50.8rem;
|
|
}
|
|
}
|
|
.notice{
|
|
margin-top: 6rem;
|
|
.title{
|
|
margin-bottom: 1rem;
|
|
font-weight: 500;
|
|
font-size: 1.8rem;
|
|
line-height: 140%;
|
|
}
|
|
.conter{
|
|
width: 50.8rem;
|
|
background-color: #f6f6f6;
|
|
padding: 2rem;
|
|
.contet-title{
|
|
margin-bottom: 1.2rem;
|
|
display: flex;
|
|
gap: .8rem;
|
|
align-items: center;
|
|
> span{
|
|
font-family: KaiseiOpti-Regular;
|
|
font-weight: 400;
|
|
font-size: 1.4rem;
|
|
line-height: 140%;
|
|
}
|
|
}
|
|
.info{
|
|
font-family: KaiseiOpti-Regular;
|
|
font-weight: 400;
|
|
font-size: 1.2rem;
|
|
line-height: 140%;
|
|
color: #585858;
|
|
}
|
|
}
|
|
}
|
|
.button{
|
|
width: 50.8rem;
|
|
margin-top: auto;
|
|
> div{
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 1.6rem;
|
|
line-height: 120%;
|
|
letter-spacing: 3%;
|
|
border: 1px solid #232323;
|
|
line-height: 4.8rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.buy-now{
|
|
background-color: #232323;
|
|
color: #fff;
|
|
}
|
|
.add-cart{
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |