Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front
This commit is contained in:
李志鹏
@@ -1,8 +1,10 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"useTabs": true,
|
||||
"trailingComma": "none",
|
||||
"vueIndentScriptAndStyle": true
|
||||
}
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@@ -13,6 +13,7 @@
|
||||
"crypto-js": "^4.2.0",
|
||||
"element-plus": "^2.13.2",
|
||||
"gsap": "^3.13.0",
|
||||
"lodash-es": "^4.18.1",
|
||||
"markdown-it": "^14.1.0",
|
||||
"md5": "^2.3.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
@@ -4790,9 +4791,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.23",
|
||||
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
|
||||
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
|
||||
"version": "4.18.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
|
||||
"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-unified": {
|
||||
@@ -12111,9 +12112,9 @@
|
||||
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
|
||||
},
|
||||
"lodash-es": {
|
||||
"version": "4.17.23",
|
||||
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
|
||||
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
|
||||
"version": "4.18.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
|
||||
"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
|
||||
},
|
||||
"lodash-unified": {
|
||||
"version": "1.0.3",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"crypto-js": "^4.2.0",
|
||||
"element-plus": "^2.13.2",
|
||||
"gsap": "^3.13.0",
|
||||
"lodash-es": "^4.18.1",
|
||||
"markdown-it": "^14.1.0",
|
||||
"md5": "^2.3.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
|
||||
@@ -16,15 +16,19 @@ export const fetchMyWardrobe = (data: WardrobeItem): Promise<ApiResponse> => {
|
||||
}
|
||||
|
||||
export interface OrderItem {
|
||||
status: number // 0未支付 1已支付 2已取消 不穿查全部
|
||||
status?: number // 0未支付 1已支付 2已取消 不传查全部
|
||||
page: number
|
||||
size: number
|
||||
}
|
||||
export const fetchMyOrders = (data: OrderItem): Promise<ApiResponse> => {
|
||||
|
||||
export interface OrdersPageResponse {
|
||||
content: any[]
|
||||
}
|
||||
|
||||
export const fetchMyOrders = (data: OrderItem): Promise<OrdersPageResponse> => {
|
||||
return request({
|
||||
url: '/buyer/buyer/order/page',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
BIN
src/assets/images/avatar.png
Normal file
BIN
src/assets/images/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 713 KiB After Width: | Height: | Size: 121 KiB |
@@ -6,34 +6,42 @@ const props = defineProps({
|
||||
default:()=>[]
|
||||
},
|
||||
selected:{
|
||||
type:String,
|
||||
default:()=>''
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:selected','change'
|
||||
])
|
||||
const checkList = computed(()=>{
|
||||
if(props.selected[0] === ''){
|
||||
if(props.selected[0] === 'all'){
|
||||
return props.list.map(item => item.value)
|
||||
}else{
|
||||
return [...props.selected]
|
||||
}
|
||||
})
|
||||
const handleChange = (val) => {
|
||||
emit('update:selected', val)
|
||||
emit('change', val)
|
||||
let data = val.filter(item => item !== 'all')
|
||||
if(val.length == 0)return
|
||||
if(data.length == props.list.length){
|
||||
data = ['all']
|
||||
}else{
|
||||
data = [...val]
|
||||
}
|
||||
emit('update:selected', data)
|
||||
emit('change', data)
|
||||
}
|
||||
const checkAll = computed(()=>{
|
||||
return checkList.value.length === props.list.length
|
||||
})
|
||||
const handleCheckAllChange = (val) => {
|
||||
let data = []
|
||||
if(val){
|
||||
data = props.list.map(item => item.value)
|
||||
if(val && props.selected[0] !== 'all'){
|
||||
data = ['all']
|
||||
// data = props.list.map(item => item.value)
|
||||
emit('update:selected', data)
|
||||
emit('change', data)
|
||||
}
|
||||
emit('update:selected', data)
|
||||
emit('change', data)
|
||||
}
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
27
src/directives/avatarLoad.js
Normal file
27
src/directives/avatarLoad.js
Normal file
@@ -0,0 +1,27 @@
|
||||
// 加载图片
|
||||
import avatar from '@/assets/images/avatar.png'
|
||||
export default {
|
||||
name: 'avatarLoad',
|
||||
mmounted(el, binding) {
|
||||
loadImage(el, binding.value)
|
||||
},
|
||||
updated(el, binding) {
|
||||
// 当 binding.value 发生变化时重新加载
|
||||
if (binding.oldValue !== binding.value) {
|
||||
loadImage(el, binding.value)
|
||||
}
|
||||
},
|
||||
};
|
||||
function loadImage(el, src) {
|
||||
if (!src) return
|
||||
|
||||
const img = new Image()
|
||||
img.src = src
|
||||
img.onload = () => {
|
||||
el.src = src
|
||||
}
|
||||
img.onerror = () => {
|
||||
el.src = avatar // 默认头像
|
||||
console.log('图片加载失败:', src)
|
||||
}
|
||||
}
|
||||
@@ -133,7 +133,6 @@ export default {
|
||||
subtitle: 'Your digital pieces, all in one place',
|
||||
common: {
|
||||
all: 'All',
|
||||
currencyHkd: 'HKD'
|
||||
},
|
||||
tabs: {
|
||||
ariaLabel: 'Wardrobe tabs',
|
||||
@@ -187,7 +186,7 @@ export default {
|
||||
}
|
||||
},
|
||||
ClothesCategories: {
|
||||
blouses: 'Blouse',
|
||||
blouse: 'Blouse',
|
||||
dress: 'Dress',
|
||||
trousers: 'Trousers',
|
||||
skirt: 'Skirt',
|
||||
|
||||
@@ -133,7 +133,6 @@ export default {
|
||||
subtitle: '你的数字单品尽在此处',
|
||||
common: {
|
||||
all: '全部',
|
||||
currencyHkd: 'HKD'
|
||||
},
|
||||
tabs: {
|
||||
ariaLabel: '衣橱标签页',
|
||||
@@ -187,7 +186,7 @@ export default {
|
||||
}
|
||||
},
|
||||
ClothesCategories: {
|
||||
blouses: '衬衫',
|
||||
blouse: '衬衫',
|
||||
dress: '连衣裙',
|
||||
trousers: '裤子',
|
||||
skirt: '短裙',
|
||||
|
||||
@@ -6,8 +6,8 @@ type Translate = (key: string) => string
|
||||
|
||||
const clothesCategoryConfigs = [
|
||||
{
|
||||
key: 'blouses',
|
||||
value: 'blouses'
|
||||
key: 'blouse',
|
||||
value: 'blouse'
|
||||
},
|
||||
{
|
||||
key: 'dress',
|
||||
|
||||
@@ -25,7 +25,7 @@ const {} = toRefs(data);
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="portrait">
|
||||
<img :src="item.avatar" alt="">
|
||||
<img v-avatarLoad="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ item.shopName }}</div>
|
||||
|
||||
@@ -6,8 +6,6 @@ import scListNull from '@/views/shoppingCart/sc-list-null.vue'
|
||||
import brandItem from '@/views/brand/brand-item.vue'
|
||||
import { getDesignerList } from '@/api/brand'
|
||||
|
||||
|
||||
import img from '@/assets/images/collectionStory/Rectangle.png'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
import { getlistingListApi } from "@/api/listing";
|
||||
|
||||
const props = defineProps({
|
||||
@@ -150,10 +149,9 @@ defineExpose({})
|
||||
// align-content: start;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
|
||||
border-top: 0.5px solid #585858;
|
||||
padding: .5px 0 0 .5px;
|
||||
/* 垂直线（右边框） */
|
||||
|
||||
@@ -7,6 +7,7 @@ import myEvent from '@/utils/myEvent'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDesignerDetail } from '@/api/brand'
|
||||
import { AddShoppingCart } from '@/api/shoppingCart'
|
||||
import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -54,7 +55,7 @@ defineExpose({})
|
||||
<template>
|
||||
<div class="brand">
|
||||
<div class="header-img">
|
||||
<img :src="designerDetail.brandBanner || '@/assets/images/brand/brandDetailBg.png'" alt="">
|
||||
<img :src="designerDetail.brandBanner || brandDetailBg" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
|
||||
@@ -31,7 +31,7 @@ const {} = toRefs(data);
|
||||
<template>
|
||||
<div class="merchantInfo">
|
||||
<div class="profile">
|
||||
<img :src="designerDetail.avatar || '@/assets/images/collectionStory/Rectangle.png'" alt="">
|
||||
<img v-avatarLoad="designerDetail.avatar" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="detail">
|
||||
|
||||
@@ -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" v-avatarLoad="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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,68 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
import { getListingMallListApi } from '@/api/listing'
|
||||
|
||||
const props = defineProps({
|
||||
getListData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
designFor: '',
|
||||
categories: [],
|
||||
sortField: '',
|
||||
})
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'addShopping',
|
||||
'openDetail'
|
||||
'openDetail',
|
||||
'getListingMallList'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},
|
||||
])
|
||||
const type = ref('All')
|
||||
const addShopping = (item) => {
|
||||
emit('addShopping', item)
|
||||
}
|
||||
const openDetail = (item) => {
|
||||
emit('openDetail', item)
|
||||
}
|
||||
|
||||
const commodityList = ref([])
|
||||
|
||||
const getListingListData = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
})
|
||||
|
||||
const reset = () => {
|
||||
commodityList.value = []
|
||||
getListingListData.pageNum = 1
|
||||
getListingListData.isShowMark = false
|
||||
getListingListData.isNoData = false
|
||||
}
|
||||
|
||||
const getListingMallList = ()=>{
|
||||
getListingListData.isShowMark = true
|
||||
getListingListData.isNoData = false
|
||||
let data = {
|
||||
designFor: props.getListData.designFor,
|
||||
// categories: [all],
|
||||
categories: props.getListData.categories[0] == 'all' ? [] : props.getListData.categories,
|
||||
sortField: props.getListData.sortField,
|
||||
sortOrder: 'desc',
|
||||
pageSize: getListingListData.pageSize,
|
||||
pageNum: getListingListData.pageNum,
|
||||
|
||||
}
|
||||
getListingMallListApi(data).then(res => {
|
||||
if(res.content.length == 0)getListingListData.isNoData = true
|
||||
commodityList.value.push(...res.content)
|
||||
getListingListData.isShowMark = false
|
||||
}).catch(()=>{
|
||||
getListingListData.isNoData = true
|
||||
getListingListData.isShowMark = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const vObserve = {
|
||||
mounted (el,binding) {
|
||||
getListingListData.isShowMark = false
|
||||
getListingListData.isNoData = false
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
binding.value()
|
||||
getListingListData.pageNum += 1
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(el);
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
defineExpose({reset,commodityList,getListingListData})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="commodityList">
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in list" :key="item.url">
|
||||
<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
|
||||
<div class="item" v-for="item in commodityList" :key="item.url">
|
||||
<CommodityItem :url="item.cover" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
|
||||
</div>
|
||||
<div v-show="!getListingListData.isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!getListingListData.isShowMark" v-observe="getListingMallList"></span>
|
||||
<img v-if="getListingListData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,12 +116,12 @@ const {} = toRefs(data);
|
||||
// align-content: start;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
|
||||
border-top: 0.5px solid #585858;
|
||||
padding: .5px 0 0 .5px;
|
||||
|
||||
/* 垂直线（右边框） */
|
||||
.item{
|
||||
position: relative;
|
||||
@@ -96,6 +131,25 @@ const {} = toRefs(data);
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
> .material_content_list_loding{
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
aspect-ratio: 1/1;
|
||||
grid-column: 1 / -1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
> .page_loading{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
> img{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,47 +10,45 @@ import { getListingMallListApi } from '@/api/listing'
|
||||
defineOptions({
|
||||
name: 'digitalItem'
|
||||
})
|
||||
|
||||
const categories = ref([''])
|
||||
const gender = ref([''])
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const categories = ref(['all'])
|
||||
const gender = ref(['all'])
|
||||
const digitalItemRef = ref(null)
|
||||
const scrollTop = ref(0)
|
||||
const router = useRouter()
|
||||
const commodityListRef = ref(null)
|
||||
|
||||
const searechTypeList = ref([
|
||||
{
|
||||
value:'Best Selling',
|
||||
value:'salesVolume',
|
||||
label:'Best Selling'
|
||||
},{
|
||||
value:'Price: Low to High',
|
||||
value:'price',
|
||||
label:'Price: Low to High'
|
||||
},{
|
||||
value:'Newest First',
|
||||
value:'updateTime',
|
||||
label:'Newest First'
|
||||
},
|
||||
])
|
||||
const searechType = ref('Newest First')
|
||||
|
||||
const searechType = ref('updateTime')
|
||||
const addShopping = (item) => {}
|
||||
const openDetail = (item) => {
|
||||
scrollTop.value = digitalItemRef.value.scrollTop
|
||||
router.push({
|
||||
path: '/digitalItem/' + 123,
|
||||
path: '/digitalItem/' + item.id,
|
||||
})
|
||||
}
|
||||
const handleChange = (val) => {
|
||||
|
||||
categories.value = val.categories
|
||||
gender.value = val.gender
|
||||
commodityListRef.value.reset()
|
||||
}
|
||||
const getListingMallList = ()=>{
|
||||
let data = {
|
||||
// designFor
|
||||
}
|
||||
// getListingMallListApi().then(res => {
|
||||
|
||||
// })
|
||||
const updateSort = () => {
|
||||
commodityListRef.value.reset()
|
||||
}
|
||||
onActivated(()=>{
|
||||
digitalItemRef.value.scrollTop = scrollTop.value
|
||||
@@ -72,13 +70,13 @@ defineExpose({})
|
||||
</div>
|
||||
<div class="filters">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="categories" placeholder="Sort By" :teleported="false">
|
||||
<el-select v-model="searechType" @change="updateSort" placeholder="Sort By" :teleported="false">
|
||||
<template #label="{ label }">
|
||||
<span class="header-label">Sort By</span>
|
||||
<span class="header-value">{{ label }}</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in categoriesList"
|
||||
v-for="item in searechTypeList"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
@@ -91,8 +89,17 @@ defineExpose({})
|
||||
<MerchantInfo @change="handleChange"></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
|
||||
<div v-else class="null">
|
||||
<CommodityList
|
||||
v-show="commodityListRef?.commodityList?.length > 0 || !commodityListRef?.getListingListData.isNoData"
|
||||
ref="commodityListRef"
|
||||
:getListData="{
|
||||
designFor: gender[0],
|
||||
categories: categories,
|
||||
sortField: searechType,
|
||||
}"
|
||||
@addShopping="addShopping"
|
||||
@openDetail="openDetail"></CommodityList>
|
||||
<div v-show="commodityListRef?.commodityList?.length == 0" class="null">
|
||||
<sc-list-null
|
||||
nullImage="shopping-cart"
|
||||
:showButton="false"
|
||||
@@ -100,6 +107,7 @@ defineExpose({})
|
||||
tip="Try adjusting your filters or refreshing the page."
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
@@ -220,8 +228,13 @@ defineExpose({})
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: 9rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.null{
|
||||
flex: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,12 +16,12 @@ const genderList = computed(() => [
|
||||
{ label: t('Wardrobe.assets.genders.male'), value: 'male' },
|
||||
{ label: t('Wardrobe.assets.genders.female'), value: 'female' }
|
||||
])
|
||||
const categories = ref([''])
|
||||
const gender = ref([''])
|
||||
const categories = ref(['all'])
|
||||
const gender = ref(['all'])
|
||||
|
||||
const clearFilters = () => {
|
||||
categories.value = ['']
|
||||
gender.value = ['']
|
||||
categories.value = ['all']
|
||||
gender.value = ['all']
|
||||
handleChange()
|
||||
}
|
||||
const handleChange = () => {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<img :src="info.cover" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<div class="brand" v-if="showBrand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
@@ -56,6 +56,7 @@
|
||||
showDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
orderActionsLayout: { type: Boolean, default: false },
|
||||
showBrand: { type: Boolean, default: true },
|
||||
info: {
|
||||
type: Object as () => {
|
||||
status: number
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
301
src/views/wardrobe/FilterSidebar.vue
Normal file
301
src/views/wardrobe/FilterSidebar.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<aside class="wardrobe-assets__filters">
|
||||
<div class="filters-card">
|
||||
<div class="filters-card__heading">
|
||||
<h2 class="filters-card__title">{{ t('Wardrobe.assets.filters') }}</h2>
|
||||
<button class="filters-card__clear" type="button" @click="clearFilters">
|
||||
{{ t('Wardrobe.assets.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section class="filter-group">
|
||||
<h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
|
||||
<div class="filter-group__line"></div>
|
||||
<div class="filter-group__options">
|
||||
<button
|
||||
v-for="option in categories"
|
||||
:key="option.value"
|
||||
class="filter-option"
|
||||
type="button"
|
||||
:class="{ 'is-active': isCategoryActive(option.value) }"
|
||||
@click="toggleCategory(option.value)"
|
||||
>
|
||||
<span class="filter-option__box">
|
||||
<span class="filter-option__tick"></span>
|
||||
</span>
|
||||
<span class="filter-option__label">{{ option.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="filter-group">
|
||||
<h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
|
||||
<div class="filter-group__line"></div>
|
||||
<div class="filter-group__options">
|
||||
<button
|
||||
v-for="option in genders"
|
||||
:key="option.value"
|
||||
class="filter-option"
|
||||
type="button"
|
||||
:class="{ 'is-active': isGenderActive(option.value) }"
|
||||
@click="toggleGender(option.value)"
|
||||
>
|
||||
<span class="filter-option__box">
|
||||
<span class="filter-option__tick"></span>
|
||||
</span>
|
||||
<span class="filter-option__label">{{ option.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
interface FilterOption {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
interface FilterState {
|
||||
categories: string[]
|
||||
genders: string[]
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
categories: {
|
||||
type: Array as PropType<FilterOption[]>,
|
||||
required: true
|
||||
},
|
||||
genders: {
|
||||
type: Array as PropType<FilterOption[]>,
|
||||
required: true
|
||||
},
|
||||
filters: {
|
||||
type: Object as PropType<FilterState>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:filters', payload: FilterState): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
|
||||
const categoryValues = computed(() =>
|
||||
props.categories.filter((option) => option.value !== 'all').map((option) => option.value)
|
||||
)
|
||||
|
||||
const genderValues = computed(() =>
|
||||
props.genders.filter((option) => option.value !== 'all').map((option) => option.value)
|
||||
)
|
||||
|
||||
const allCategoriesSelected = computed(() => {
|
||||
return (
|
||||
props.filters.categories.length === categoryValues.value.length &&
|
||||
categoryValues.value.every((value) => props.filters.categories.includes(value))
|
||||
)
|
||||
})
|
||||
|
||||
const allGendersSelected = computed(() => {
|
||||
return (
|
||||
props.filters.genders.length === genderValues.value.length &&
|
||||
genderValues.value.every((value) => props.filters.genders.includes(value))
|
||||
)
|
||||
})
|
||||
|
||||
const currentFilters = computed<FilterState>(() => ({
|
||||
categories: [...props.filters.categories],
|
||||
genders: [...props.filters.genders]
|
||||
}))
|
||||
|
||||
const updateFilters = (updated: Partial<FilterState>) => {
|
||||
emit('update:filters', {
|
||||
categories: updated.categories ?? currentFilters.value.categories,
|
||||
genders: updated.genders ?? currentFilters.value.genders
|
||||
})
|
||||
}
|
||||
|
||||
const isCategoryActive = (value: string) => {
|
||||
if (value === 'all') {
|
||||
return allCategoriesSelected.value
|
||||
}
|
||||
|
||||
return props.filters.categories.includes(value)
|
||||
}
|
||||
|
||||
const toggleCategory = (value: string) => {
|
||||
if (value === 'all') {
|
||||
updateFilters({
|
||||
categories: allCategoriesSelected.value ? [] : [...categoryValues.value]
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (props.filters.categories.includes(value)) {
|
||||
updateFilters({
|
||||
categories: props.filters.categories.filter((item) => item !== value)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
updateFilters({
|
||||
categories: [...props.filters.categories, value]
|
||||
})
|
||||
}
|
||||
|
||||
const isGenderActive = (value: string) => {
|
||||
if (value === 'all') {
|
||||
return allGendersSelected.value
|
||||
}
|
||||
|
||||
return props.filters.genders.includes(value)
|
||||
}
|
||||
|
||||
const toggleGender = (value: string) => {
|
||||
if (value === 'all') {
|
||||
updateFilters({
|
||||
genders: allGendersSelected.value ? [] : [...genderValues.value]
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (props.filters.genders.includes(value)) {
|
||||
updateFilters({
|
||||
genders: props.filters.genders.filter((item) => item !== value)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
updateFilters({
|
||||
genders: [...props.filters.genders, value]
|
||||
})
|
||||
}
|
||||
|
||||
const clearFilters = () => {
|
||||
updateFilters({
|
||||
categories: [...categoryValues.value],
|
||||
genders: [...genderValues.value]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-assets__filters {
|
||||
width: 26.4rem;
|
||||
border-right: 0.1rem solid var(--wardrobe-border-color);
|
||||
overflow-y: auto;
|
||||
|
||||
.filters-card {
|
||||
padding: 3rem 2.4rem 4rem;
|
||||
|
||||
.filters-card__heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 3.2rem;
|
||||
|
||||
.filters-card__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.2;
|
||||
color: var(--wardrobe-text-main);
|
||||
}
|
||||
|
||||
.filters-card__clear {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.3;
|
||||
color: #9a9185;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
& + .filter-group {
|
||||
margin-top: 3.4rem;
|
||||
}
|
||||
|
||||
.filter-group__title {
|
||||
margin: 0 0 1rem;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3;
|
||||
color: #5e5851;
|
||||
}
|
||||
|
||||
.filter-group__line {
|
||||
width: 100%;
|
||||
height: 0.1rem;
|
||||
background: var(--wardrobe-border-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.filter-group__options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
|
||||
.filter-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
color: #6e665d;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
|
||||
> .filter-option__box {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-dark);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.filter-option__tick {
|
||||
width: 0.9rem;
|
||||
height: 0.5rem;
|
||||
border-left: 0.18rem solid #ffffff;
|
||||
border-bottom: 0.18rem solid #ffffff;
|
||||
transform: rotate(-45deg) translateY(-0.05rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: var(--wardrobe-text-main);
|
||||
|
||||
.filter-option__box {
|
||||
border-color: var(--wardrobe-text-main);
|
||||
background: var(--wardrobe-text-main);
|
||||
|
||||
.filter-option__tick {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,450 +1,516 @@
|
||||
<template>
|
||||
<div class="wardrobe-orders">
|
||||
<div class="orders-toolbar">
|
||||
<button
|
||||
v-for="status in statusOptions"
|
||||
:key="status.key"
|
||||
class="orders-toolbar__chip"
|
||||
type="button"
|
||||
:class="{ 'is-active': activeStatus === status.key }"
|
||||
@click="activeStatus = status.key"
|
||||
>
|
||||
{{ status.label }}
|
||||
</button>
|
||||
</div>
|
||||
<div ref="ordersScrollRef" class="wardrobe-orders" @scroll="handleOrdersScroll">
|
||||
<div class="orders-toolbar">
|
||||
<button
|
||||
v-for="status in statusOptions"
|
||||
:key="status.key"
|
||||
class="orders-toolbar__chip"
|
||||
type="button"
|
||||
:class="{ 'is-active': activeStatus === status.key }"
|
||||
@click="setActiveStatus(status.key)"
|
||||
>
|
||||
{{ status.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="orders-list">
|
||||
<article v-for="order in filteredOrders" :key="order.id" class="order-card">
|
||||
<button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
|
||||
<span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
|
||||
</button>
|
||||
<div class="orders-list">
|
||||
<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
|
||||
<button
|
||||
class="order-card__toggle"
|
||||
type="button"
|
||||
@click="toggleOrder(order.orderId)"
|
||||
>
|
||||
<span :class="{ 'is-expanded': expandedOrderId === order.orderId }"></span>
|
||||
</button>
|
||||
|
||||
<div class="order-card__summary">
|
||||
<div class="order-card__meta">
|
||||
<h3 class="order-card__id">{{ order.id }}</h3>
|
||||
<p class="order-card__date">{{ order.date }}</p>
|
||||
</div>
|
||||
<div class="order-card__summary">
|
||||
<div class="order-card__meta">
|
||||
<h3 class="order-card__id">{{ order.orderId }}</h3>
|
||||
<div class="brand flex align-center">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ order.shopName }}</span>
|
||||
</div>
|
||||
<p class="order-card__date">{{ order.formatUpdatetime }}</p>
|
||||
</div>
|
||||
|
||||
<div class="order-card__preview" aria-hidden="true">
|
||||
<span
|
||||
v-for="item in order.items.slice(0, 2)"
|
||||
:key="item.id"
|
||||
class="order-card__thumb"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
></span>
|
||||
<span v-if="getExtraCount(order)" class="order-card__extra">
|
||||
{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="order-card__preview" aria-hidden="true">
|
||||
<span
|
||||
v-for="item in order.items.slice(0, 2)"
|
||||
:key="item.id"
|
||||
class="order-card__thumb"
|
||||
:style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
|
||||
></span>
|
||||
<span v-if="getExtraCount(order)" class="order-card__extra">
|
||||
{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="order-card__status" :class="`is-${order.status}`">
|
||||
{{ getStatusBadgeLabel(order.status) }}
|
||||
</div>
|
||||
<div class="order-card__status" :class="`is-${getOrderStatus(order)}`">
|
||||
{{ getStatusBadgeLabel(getOrderStatus(order)) }}
|
||||
</div>
|
||||
|
||||
<div class="order-card__amount">
|
||||
<span>${{ order.amount }}</span>
|
||||
<small>{{ t('Wardrobe.common.currencyHkd') }}</small>
|
||||
</div>
|
||||
<div class="order-card__amount">
|
||||
<span>${{ order.totalPrice }}</span>
|
||||
<small>HKD</small>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="order-card__action"
|
||||
type="button"
|
||||
:class="{ 'is-primary': order.status === 'unpaid' }"
|
||||
>
|
||||
<svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
|
||||
<span>{{ getOrderActionLabel(order.status) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="order-card__action"
|
||||
type="button"
|
||||
:class="{ 'is-primary': getOrderStatus(order) === 'unpaid' }"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="getOrderStatus(order) === 'paid'"
|
||||
name="Invoice"
|
||||
size="20"
|
||||
color="#232323"
|
||||
/>
|
||||
<span>{{ getOrderActionLabel(getOrderStatus(order)) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="expandedOrderId === order.id" class="order-card__details">
|
||||
<ScItem
|
||||
v-for="item in order.items"
|
||||
:key="item.id"
|
||||
class="order-card__item"
|
||||
:style="{ '--order-item-placeholder': item.color }"
|
||||
:info="item"
|
||||
:show-date="false"
|
||||
:show-remove="false"
|
||||
order-actions-layout
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="expandedOrderId === order.orderId" class="order-card__details">
|
||||
<ScItem
|
||||
v-for="item in order.items"
|
||||
:key="item.id"
|
||||
class="order-card__item"
|
||||
:info="getOrderItemInfo(item, order)"
|
||||
:show-date="false"
|
||||
:show-remove="false"
|
||||
:show-brand="false"
|
||||
order-actions-layout
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, shallowRef, onMounted,ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { fetchMyOrders } from '@/api/user'
|
||||
import ScItem from '@/views/shoppingCart/sc-item.vue'
|
||||
import { computed, onMounted, ref, shallowRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { fetchMyOrders } from '@/api/user'
|
||||
import ScItem from '@/views/shoppingCart/sc-item.vue'
|
||||
|
||||
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
|
||||
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
|
||||
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
|
||||
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
|
||||
|
||||
interface StatusOption {
|
||||
key: OrderStatus
|
||||
label: string
|
||||
}
|
||||
interface StatusOption {
|
||||
key: OrderStatus
|
||||
label: string
|
||||
value?: number
|
||||
}
|
||||
|
||||
interface OrderItem {
|
||||
id: number
|
||||
url: string
|
||||
title: string
|
||||
brand: string
|
||||
fileSize: number
|
||||
date: string
|
||||
amount: number
|
||||
tags: string[]
|
||||
checked: boolean
|
||||
color: string
|
||||
}
|
||||
interface OrderItem {
|
||||
id: string
|
||||
listingName: string
|
||||
price: number
|
||||
productCategory: string[]
|
||||
thumbnailUrl: string
|
||||
orderId: string
|
||||
shopName: string
|
||||
status: number
|
||||
totalPrice: number
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
interface OrderRecord {
|
||||
id: string
|
||||
date: string
|
||||
status: ActualOrderStatus
|
||||
amount: number
|
||||
items: OrderItem[]
|
||||
}
|
||||
interface OrderRecord {
|
||||
orderId: string
|
||||
shopName: string
|
||||
totalPrice: number
|
||||
updateTime: string
|
||||
items: OrderItem[]
|
||||
}
|
||||
|
||||
const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
interface DisplayOrderRecord extends OrderRecord {
|
||||
formatUpdatetime: string
|
||||
}
|
||||
|
||||
const statusOptions = computed<StatusOption[]>(() => [
|
||||
{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
|
||||
{ key: 'paid', label: t('Wardrobe.orders.statuses.paid') },
|
||||
{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
|
||||
{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
|
||||
])
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
const createOrderItem = (
|
||||
id: number,
|
||||
title: string,
|
||||
brand: string,
|
||||
amount: number,
|
||||
color: string
|
||||
): OrderItem => {
|
||||
return {
|
||||
id,
|
||||
url: placeholderImage,
|
||||
title,
|
||||
brand,
|
||||
fileSize: 1024 * (id + 2),
|
||||
date: '2026-02-16 23:34',
|
||||
amount,
|
||||
color,
|
||||
checked: false,
|
||||
tags: ['female', 'dress', 'blouse', 'outwear']
|
||||
}
|
||||
}
|
||||
const orders: OrderRecord[] = [
|
||||
{
|
||||
id: 'SP897772698',
|
||||
date: 'Feb 23, 2026, 3:00 PM',
|
||||
status: 'paid',
|
||||
amount: 45,
|
||||
items: [
|
||||
createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
|
||||
createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
|
||||
createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'SP893872698',
|
||||
date: 'Feb 21, 2026, 10:20 AM',
|
||||
status: 'unpaid',
|
||||
amount: 15,
|
||||
items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
|
||||
},
|
||||
{
|
||||
id: 'SP897262698',
|
||||
date: 'Feb 16, 2026, 11:34 PM',
|
||||
status: 'paid',
|
||||
amount: 29,
|
||||
items: [
|
||||
createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
|
||||
createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
|
||||
createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'SP892072692',
|
||||
date: 'Feb 2, 2026, 9:34 PM',
|
||||
status: 'paid',
|
||||
amount: 15,
|
||||
items: [
|
||||
createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
|
||||
createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'SP892972603',
|
||||
date: 'Jan 4, 2026, 8:22 PM',
|
||||
status: 'cancelled',
|
||||
amount: 15,
|
||||
items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
|
||||
}
|
||||
]
|
||||
const statusOptions = computed<StatusOption[]>(() => [
|
||||
{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
|
||||
{ key: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
|
||||
{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
|
||||
{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
|
||||
])
|
||||
|
||||
const activeStatus = shallowRef<OrderStatus>('all')
|
||||
const expandedOrderId = shallowRef('SP897262698')
|
||||
const activeStatus = shallowRef<OrderStatus>('all')
|
||||
const expandedOrderId = shallowRef('')
|
||||
const orders = ref<OrderRecord[]>([])
|
||||
const ordersScrollRef = ref<HTMLElement | null>(null)
|
||||
const isLoadingOrders = shallowRef(false)
|
||||
const hasMoreOrders = shallowRef(true)
|
||||
const ordersRequestId = shallowRef(0)
|
||||
const orderParams = ref({
|
||||
page: 1,
|
||||
size: 10
|
||||
})
|
||||
|
||||
const filteredOrders = computed(() => {
|
||||
if (activeStatus.value === 'all') return orders
|
||||
return orders.filter((order) => order.status === activeStatus.value)
|
||||
})
|
||||
const filteredOrders = computed<DisplayOrderRecord[]>(() => {
|
||||
return orders.value.map((order) => ({
|
||||
...order,
|
||||
formatUpdatetime: formatOrderUpdateTime(order.updateTime)
|
||||
}))
|
||||
})
|
||||
|
||||
const toggleOrder = (orderId: string) => {
|
||||
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
|
||||
}
|
||||
const toggleOrder = (orderId: string) => {
|
||||
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
|
||||
}
|
||||
|
||||
const getExtraCount = (order: OrderRecord) => {
|
||||
return Math.max(order.items.length - 2, 0)
|
||||
}
|
||||
const getExtraCount = (order: OrderRecord) => {
|
||||
return Math.max(order.items.length - 2, 0)
|
||||
}
|
||||
|
||||
const getStatusBadgeLabel = (status: ActualOrderStatus) => {
|
||||
return t(`Wardrobe.orders.statusBadges.${status}`)
|
||||
}
|
||||
const getStatusBadgeLabel = (status: ActualOrderStatus) => {
|
||||
return t(`Wardrobe.orders.statusBadges.${status}`)
|
||||
}
|
||||
|
||||
const getOrderActionLabel = (status: ActualOrderStatus) => {
|
||||
if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
|
||||
if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
|
||||
return t('Wardrobe.orders.actions.buyAgain')
|
||||
}
|
||||
const getOrderActionLabel = (status: ActualOrderStatus) => {
|
||||
if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
|
||||
if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
|
||||
return t('Wardrobe.orders.actions.buyAgain')
|
||||
}
|
||||
|
||||
const orderParams =ref({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
status: ''
|
||||
})
|
||||
const fetchAllOrders = () => {
|
||||
fetchMyOrders(orderParams.value)
|
||||
}
|
||||
const getOrderStatusValue = (status: unknown): ActualOrderStatus => {
|
||||
if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
|
||||
if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
|
||||
return 'paid'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAllOrders()
|
||||
})
|
||||
const getOrderStatus = (order: OrderRecord) => {
|
||||
return getOrderStatusValue(order.items[0]?.status)
|
||||
}
|
||||
|
||||
const formatOrderUpdateTime = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
|
||||
const date = new Date(dateStr)
|
||||
if (Number.isNaN(date.getTime())) return dateStr
|
||||
|
||||
const isChinese = locale.value === 'CHINESE_SIMPLIFIED' || locale.value.startsWith('zh')
|
||||
const dateLocale = isChinese ? 'zh-CN' : 'en-US'
|
||||
const options: Intl.DateTimeFormatOptions = isChinese
|
||||
? {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
}
|
||||
: {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat(dateLocale, options).format(date)
|
||||
}
|
||||
|
||||
const getOrderItemInfo = (item: OrderItem, order: OrderRecord) => ({
|
||||
status: item.status,
|
||||
title: item.listingName,
|
||||
brand: order.shopName,
|
||||
tags: item.productCategory,
|
||||
date: item.updateTime,
|
||||
amount: item.price,
|
||||
cover: item.thumbnailUrl
|
||||
})
|
||||
|
||||
const fetchAllOrders = async () => {
|
||||
if (isLoadingOrders.value || !hasMoreOrders.value) return
|
||||
|
||||
const requestId = ordersRequestId.value
|
||||
isLoadingOrders.value = true
|
||||
|
||||
try {
|
||||
const params: { page: number; size: number; status?: number } = {
|
||||
page: orderParams.value.page,
|
||||
size: orderParams.value.size
|
||||
}
|
||||
const currentStatus = statusOptions.value.find((option) => option.key === activeStatus.value)
|
||||
|
||||
if (currentStatus?.value !== undefined) {
|
||||
params.status = currentStatus.value
|
||||
}
|
||||
|
||||
const res = await fetchMyOrders(params)
|
||||
if (requestId !== ordersRequestId.value) return
|
||||
|
||||
const content = res.content ?? []
|
||||
|
||||
orders.value = orderParams.value.page === 1 ? content : [...orders.value, ...content]
|
||||
hasMoreOrders.value = content.length >= orderParams.value.size
|
||||
|
||||
if (hasMoreOrders.value) {
|
||||
orderParams.value.page += 1
|
||||
}
|
||||
} finally {
|
||||
if (requestId === ordersRequestId.value) {
|
||||
isLoadingOrders.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const resetOrders = () => {
|
||||
ordersRequestId.value += 1
|
||||
orders.value = []
|
||||
expandedOrderId.value = ''
|
||||
isLoadingOrders.value = false
|
||||
hasMoreOrders.value = true
|
||||
orderParams.value.page = 1
|
||||
|
||||
if (ordersScrollRef.value) {
|
||||
ordersScrollRef.value.scrollTop = 0
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveStatus = (status: OrderStatus) => {
|
||||
activeStatus.value = status
|
||||
resetOrders()
|
||||
fetchAllOrders()
|
||||
}
|
||||
|
||||
const handleOrdersScroll = () => {
|
||||
const el = ordersScrollRef.value
|
||||
if (!el) return
|
||||
|
||||
const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 120
|
||||
if (reachBottom) {
|
||||
fetchAllOrders()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAllOrders()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
.wardrobe-orders {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 9rem;
|
||||
overflow-y: auto;
|
||||
.c-svg {
|
||||
width: fit-content;
|
||||
height: initial;
|
||||
}
|
||||
.wardrobe-orders {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 9rem;
|
||||
overflow-y: auto;
|
||||
|
||||
.orders-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
padding: 3.6rem 0 2.8rem;
|
||||
flex-wrap: wrap;
|
||||
.orders-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
padding: 3.6rem 0 2.8rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.orders-toolbar__chip {
|
||||
height: 4rem;
|
||||
min-width: 8rem;
|
||||
padding: 0 3rem;
|
||||
border: 0.1rem solid #232323;
|
||||
border-radius: 2rem;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
color: #585858;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
.orders-toolbar__chip {
|
||||
height: 4rem;
|
||||
min-width: 8rem;
|
||||
padding: 0 3rem;
|
||||
border: 0.1rem solid #232323;
|
||||
border-radius: 2rem;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
color: #585858;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
background: #232323;
|
||||
border-color: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
background: #232323;
|
||||
border-color: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orders-list {
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
.orders-list {
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card {
|
||||
position: relative;
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
.order-card {
|
||||
position: relative;
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
|
||||
.order-card__toggle {
|
||||
position: absolute;
|
||||
top: 5.8rem;
|
||||
left: 4.2rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
.order-card__toggle {
|
||||
position: absolute;
|
||||
top: 5.8rem;
|
||||
left: 4.2rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border-right: 0.1rem solid #585858;
|
||||
border-bottom: 0.1rem solid #585858;
|
||||
transform: rotate(-45deg);
|
||||
transition: transform 0.2s ease;
|
||||
span {
|
||||
display: block;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border-right: 0.1rem solid #585858;
|
||||
border-bottom: 0.1rem solid #585858;
|
||||
transform: rotate(-45deg);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.is-expanded {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-expanded {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-card__summary {
|
||||
min-height: 12.4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
|
||||
align-items: center;
|
||||
column-gap: 2rem;
|
||||
padding-left: 9rem;
|
||||
.order-card__summary {
|
||||
min-height: 12.4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
|
||||
align-items: center;
|
||||
column-gap: 2rem;
|
||||
padding-left: 9rem;
|
||||
|
||||
.order-card__meta {
|
||||
.order-card__id {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
}
|
||||
.order-card__meta {
|
||||
.order-card__id {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.order-card__date {
|
||||
margin: 0.8rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
.order-card__date {
|
||||
margin: 0.8rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
.brand {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.order-card__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.order-card__thumb {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
display: block;
|
||||
margin-right: 1.2rem;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.order-card__thumb {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
display: block;
|
||||
margin-right: 1.2rem;
|
||||
background-color: #f6f6f6;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.order-card__extra {
|
||||
margin-left: 1.2rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
.order-card__extra {
|
||||
margin-left: 1.2rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card__status {
|
||||
justify-self: start;
|
||||
min-width: 8.8rem;
|
||||
height: 2.4rem;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 2.4rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
.order-card__status {
|
||||
justify-self: start;
|
||||
min-width: 8.8rem;
|
||||
height: 2.4rem;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 2.4rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
text-align: center;
|
||||
|
||||
&.is-paid {
|
||||
background: #e8f2ec;
|
||||
color: #769591;
|
||||
}
|
||||
&.is-paid {
|
||||
background: #e8f2ec;
|
||||
color: #769591;
|
||||
}
|
||||
|
||||
&.is-unpaid {
|
||||
background: #fef3e2;
|
||||
color: #b48230;
|
||||
}
|
||||
&.is-unpaid {
|
||||
background: #fef3e2;
|
||||
color: #b48230;
|
||||
}
|
||||
|
||||
&.is-cancelled {
|
||||
background: #fff2f2;
|
||||
color: #c65f5a;
|
||||
}
|
||||
}
|
||||
&.is-cancelled {
|
||||
background: #fff2f2;
|
||||
color: #c65f5a;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card__amount {
|
||||
white-space: nowrap;
|
||||
color: #232323;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
.order-card__amount {
|
||||
white-space: nowrap;
|
||||
color: #232323;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
|
||||
span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
small {
|
||||
margin-left: 0.4rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
small {
|
||||
margin-left: 0.4rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card__action {
|
||||
justify-self: center;
|
||||
width: 14rem;
|
||||
height: 3.8rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #f6f6f6;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
.order-card__action {
|
||||
justify-self: center;
|
||||
width: 14rem;
|
||||
height: 3.8rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #f6f6f6;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-primary {
|
||||
width: 16rem;
|
||||
border-color: #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-primary {
|
||||
width: 16rem;
|
||||
border-color: #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .order-card__details {
|
||||
margin-left: 9rem;
|
||||
padding: 0 2.4rem;
|
||||
background: #fafafa;
|
||||
> .order-card__details {
|
||||
margin-left: 9rem;
|
||||
padding: 0 2.4rem;
|
||||
background: #fafafa;
|
||||
|
||||
:deep(.sc-item) {
|
||||
--sc-item-img-width: 9.5rem;
|
||||
--sc-item-img-height: 12rem;
|
||||
--sc-item-padding: 1.2rem 2.4rem;
|
||||
--sc-item-content-margin: 0 4rem;
|
||||
--sc-item-title-font-size: 2rem;
|
||||
--sc-item-brand-font-size: 1.4rem;
|
||||
--sc-item-amount-font-size: 2.2rem;
|
||||
--sc-item-currency-font-size: 1.2rem;
|
||||
--sc-item-tag-min-width: 8.8rem;
|
||||
--sc-item-tag-height: 2.4rem;
|
||||
--sc-item-tag-radius: 2.4rem;
|
||||
--sc-item-tag-font-size: 1.4rem;
|
||||
--sc-item-order-amount-width: 12rem;
|
||||
--sc-item-order-action-width: 18rem;
|
||||
--sc-item-order-column-gap: 2rem;
|
||||
--sc-item-order-actions-offset: 4.8rem;
|
||||
border-bottom-color: #e2e2e2;
|
||||
}
|
||||
:deep(.sc-item) {
|
||||
--sc-item-img-width: 9.5rem;
|
||||
--sc-item-img-height: 12rem;
|
||||
--sc-item-padding: 1.2rem 2.4rem;
|
||||
--sc-item-content-margin: 0 4rem;
|
||||
--sc-item-title-font-size: 2rem;
|
||||
--sc-item-brand-font-size: 1.4rem;
|
||||
--sc-item-amount-font-size: 2.2rem;
|
||||
--sc-item-currency-font-size: 1.2rem;
|
||||
--sc-item-tag-min-width: 8.8rem;
|
||||
--sc-item-tag-height: 2.4rem;
|
||||
--sc-item-tag-radius: 2.4rem;
|
||||
--sc-item-tag-font-size: 1.4rem;
|
||||
--sc-item-order-amount-width: 12rem;
|
||||
--sc-item-order-action-width: 18rem;
|
||||
--sc-item-order-column-gap: 2rem;
|
||||
--sc-item-order-actions-offset: 4.8rem;
|
||||
border-bottom-color: #e2e2e2;
|
||||
}
|
||||
|
||||
:deep(.sc-item:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.sc-item:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user