Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front
This commit is contained in:
李志鹏
6
src/assets/icons/Invoice.svg
Normal file
6
src/assets/icons/Invoice.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.75 5.41675H6.25V6.25008H13.75V5.41675Z" fill="currentColor"/>
|
||||
<path d="M13.75 8.75H6.25V9.58333H13.75V8.75Z" fill="currentColor"/>
|
||||
<path d="M10.4167 12.0833H6.25V12.9166H10.4167V12.0833Z" fill="currentColor"/>
|
||||
<path d="M2.5 18.3334L6.25 16.6667L10 18.3334L13.75 16.6667L17.5 18.3334V1.66675H2.5V18.3334ZM3.33333 2.50008H16.6667V17.0509L14.0883 15.9051L13.75 15.7547L13.4117 15.9051L10 17.4213L6.58833 15.9051L6.25 15.7547L5.91167 15.9051L3.33333 17.0509V2.50008Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 602 B |
BIN
src/assets/images/account/account-bg.png
Normal file
BIN
src/assets/images/account/account-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/images/account/designer-lian-su.png
Normal file
BIN
src/assets/images/account/designer-lian-su.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/images/account/item-01.png
Normal file
BIN
src/assets/images/account/item-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/images/account/item-02.png
Normal file
BIN
src/assets/images/account/item-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/images/account/item-03.png
Normal file
BIN
src/assets/images/account/item-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
src/assets/images/account/item-04.png
Normal file
BIN
src/assets/images/account/item-04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
src/assets/images/account/item-05.png
Normal file
BIN
src/assets/images/account/item-05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/images/account/item-06.png
Normal file
BIN
src/assets/images/account/item-06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/images/account/item-07.png
Normal file
BIN
src/assets/images/account/item-07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/account/item-08.png
Normal file
BIN
src/assets/images/account/item-08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/account/item-09.png
Normal file
BIN
src/assets/images/account/item-09.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/images/background.png
Normal file
BIN
src/assets/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
@@ -40,4 +40,93 @@ export default {
|
||||
sendCodeError: 'Send code error',
|
||||
retrievePassword: 'Retrieve password'
|
||||
},
|
||||
Settings: {
|
||||
title: 'Settings',
|
||||
slogan: 'Manage your account settings and preferences',
|
||||
profile: {
|
||||
title: 'Profile',
|
||||
description: 'Update your display name, avatar, social links and account security.',
|
||||
firstName: 'FIRST NAME',
|
||||
lastName: 'LAST NAME',
|
||||
firstNamePlaceholder: 'First Name',
|
||||
lastNamePlaceholder: 'Last Name',
|
||||
username: 'USERNAME',
|
||||
usernamePlaceholder: 'Username',
|
||||
usernameTip: 'Your public username on Stylish Parade.',
|
||||
role: 'ROLE',
|
||||
roleTip: 'Select up to 2 labels that suit you.',
|
||||
},
|
||||
security: {
|
||||
title: 'Security',
|
||||
description: 'Manage your login email and password.',
|
||||
email: 'EMAIL',
|
||||
newEmail: 'NEW EMAIL ADDRESS',
|
||||
newEmailPlaceholder: 'Enter new email',
|
||||
verify: 'Verify',
|
||||
verified: 'Verified',
|
||||
verifiedTip: 'Your new email has been verified and is ready to save.',
|
||||
password: 'PASSWORD',
|
||||
newPassword: 'NEW PASSWORD',
|
||||
newPasswordPlaceholder: 'Enter new password',
|
||||
passwordTip: 'You must satisfy ALL password conditions to register.',
|
||||
currentPassword: 'CURRENT PASSWORD',
|
||||
currentPasswordPlaceholder: 'Confirm with your password'
|
||||
},
|
||||
region: {
|
||||
title: 'Language & Region',
|
||||
description: 'Set your preferred language, region and currency display.',
|
||||
displayLanguage: 'DISPLAY LANGUAGE',
|
||||
selectLanguage: 'Select language',
|
||||
region: 'REGION',
|
||||
selectRegion: 'Select region'
|
||||
},
|
||||
buttons: {
|
||||
cancel: 'CANCEL',
|
||||
discard: 'DISCARD',
|
||||
edit: 'EDIT',
|
||||
saveChange: 'SAVE CHANGE',
|
||||
saving: 'SAVING...'
|
||||
},
|
||||
dialog: {
|
||||
title: 'Check your new email',
|
||||
subtitle: 'Enter the 6-digit code sent to',
|
||||
submit: 'Submit',
|
||||
resendCode: 'Resend Code',
|
||||
resendCodeIn: 'Resend Code in {time}'
|
||||
},
|
||||
messages: {
|
||||
enterNewEmailFirst: 'Please enter your new email address first',
|
||||
invalidEmail: 'Please enter a valid email address',
|
||||
sameEmail: 'Please enter a different email address',
|
||||
alreadyVerified: 'This email has already been verified',
|
||||
verificationCodeSent: 'Verification code sent',
|
||||
enterVerificationCode: 'Please enter the 6-digit verification code',
|
||||
verificationCompleted: 'Email verification completed',
|
||||
verifyEmailBeforeSave: 'Please verify your new email before saving',
|
||||
settingsUpdated: 'Settings updated'
|
||||
},
|
||||
roles: {
|
||||
fashionEnthusiast: 'Fashion Enthusiast',
|
||||
contentCreator: 'Content Creator',
|
||||
student: 'Student',
|
||||
retailBuyer: 'Retail / Buyer',
|
||||
fashionDesigner: 'Fashion Designer',
|
||||
brandBusiness: 'Brand / Business',
|
||||
prCommunications: 'PR & Communications',
|
||||
stylist: 'Stylist',
|
||||
graphicDesigner: 'Graphic Designer',
|
||||
artist3d: '3D Artist',
|
||||
other: 'Other'
|
||||
},
|
||||
languages: {
|
||||
english: 'English',
|
||||
chinese: 'Chinese',
|
||||
},
|
||||
regions: {
|
||||
hongKongSar: 'Hong Kong SAR',
|
||||
mainlandChina: 'Mainland China',
|
||||
singapore: 'Singapore',
|
||||
unitedKingdom: 'United Kingdom'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,4 +41,93 @@ export default {
|
||||
sendCodeError: '发送验证码失败',
|
||||
retrievePassword: '找回密码'
|
||||
},
|
||||
Settings: {
|
||||
title: '设置',
|
||||
slogan: '管理你的账户设置和偏好',
|
||||
profile: {
|
||||
title: '个人资料',
|
||||
description: '更新你的显示名称、头像、社交链接和账户安全信息。',
|
||||
firstName: '名字',
|
||||
lastName: '姓氏',
|
||||
firstNamePlaceholder: '请输入名字',
|
||||
lastNamePlaceholder: '请输入姓氏',
|
||||
username: '用户名',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
usernameTip: '这是你在 Stylish Parade 上公开显示的用户名。',
|
||||
role: '身份标签',
|
||||
roleTip: '最多选择 2 个符合你的标签。',
|
||||
},
|
||||
security: {
|
||||
title: '安全',
|
||||
description: '管理你的登录邮箱和密码。',
|
||||
email: '邮箱',
|
||||
newEmail: '新邮箱地址',
|
||||
newEmailPlaceholder: '请输入新邮箱',
|
||||
verify: '验证',
|
||||
verified: '已验证',
|
||||
verifiedTip: '你的新邮箱已验证成功，可以保存。',
|
||||
password: '密码',
|
||||
newPassword: '新密码',
|
||||
newPasswordPlaceholder: '请输入新密码',
|
||||
passwordTip: '你必须满足所有密码条件才能注册。',
|
||||
currentPassword: '当前密码',
|
||||
currentPasswordPlaceholder: '请输入当前密码确认'
|
||||
},
|
||||
region: {
|
||||
title: '语言与地区',
|
||||
description: '设置你偏好的语言、地区和货币显示方式。',
|
||||
displayLanguage: '显示语言',
|
||||
selectLanguage: '请选择语言',
|
||||
region: '地区',
|
||||
selectRegion: '请选择地区'
|
||||
},
|
||||
buttons: {
|
||||
cancel: '取消',
|
||||
discard: '放弃',
|
||||
edit: '编辑',
|
||||
saveChange: '保存更改',
|
||||
saving: '保存中...'
|
||||
},
|
||||
dialog: {
|
||||
title: '检查你的新邮箱',
|
||||
subtitle: '请输入发送到以下邮箱的 6 位验证码',
|
||||
submit: '提交',
|
||||
resendCode: '重新发送验证码',
|
||||
resendCodeIn: '{time} 后可重新发送验证码'
|
||||
},
|
||||
messages: {
|
||||
enterNewEmailFirst: '请先输入新的邮箱地址',
|
||||
invalidEmail: '请输入有效的邮箱地址',
|
||||
sameEmail: '请输入不同的邮箱地址',
|
||||
alreadyVerified: '该邮箱已完成验证',
|
||||
verificationCodeSent: '验证码已发送',
|
||||
enterVerificationCode: '请输入 6 位验证码',
|
||||
verificationCompleted: '邮箱验证完成',
|
||||
verifyEmailBeforeSave: '请先完成新邮箱验证再保存',
|
||||
settingsUpdated: '设置已更新'
|
||||
},
|
||||
roles: {
|
||||
fashionEnthusiast: '时尚爱好者',
|
||||
contentCreator: '内容创作者',
|
||||
student: '学生',
|
||||
retailBuyer: '零售 / 买手',
|
||||
fashionDesigner: '服装设计师',
|
||||
brandBusiness: '品牌 / 商业',
|
||||
prCommunications: '公关与传播',
|
||||
stylist: '造型师',
|
||||
graphicDesigner: '平面设计师',
|
||||
artist3d: '3D 艺术家',
|
||||
other: '其他'
|
||||
},
|
||||
languages: {
|
||||
english: '英文',
|
||||
chinese: '中文',
|
||||
},
|
||||
regions: {
|
||||
hongKongSar: '中国香港特别行政区',
|
||||
mainlandChina: '中国大陆',
|
||||
singapore: '新加坡',
|
||||
unitedKingdom: '英国'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,17 +23,17 @@ const router = createRouter({
|
||||
name: 'brand',
|
||||
component: () => import('../views/brand/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/digitalItem',
|
||||
name: 'digitalItem',
|
||||
component: () => import('../views/digitalItem/index.vue'),
|
||||
meta: { cache: true }
|
||||
},
|
||||
{
|
||||
path: '/digitalItem/:id',
|
||||
name: 'digitalItemDetail',
|
||||
component: () => import('../views/digitalDetail/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/digitalItem',
|
||||
name: 'digitalItem',
|
||||
component: () => import('../views/digitalItem/index.vue'),
|
||||
meta: { cache: true }
|
||||
},
|
||||
{
|
||||
path: '/digitalItem/:id',
|
||||
name: 'digitalItemDetail',
|
||||
component: () => import('../views/digitalDetail/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
@@ -41,7 +41,7 @@ const router = createRouter({
|
||||
meta: { cache: true }
|
||||
},
|
||||
{
|
||||
path: '/shoppingCart',// 购物车
|
||||
path: '/shoppingCart', // 购物车
|
||||
name: 'shoppingCart',
|
||||
component: () => import('@/views/shoppingCart/index.vue')
|
||||
},
|
||||
@@ -55,6 +55,11 @@ const router = createRouter({
|
||||
name: 'wardrobe',
|
||||
component: () => import('@/views/wardrobe/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/account',
|
||||
name:'account',
|
||||
component:()=>import('@/views/account/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
name: '404',
|
||||
|
||||
505
src/views/account/index.vue
Normal file
505
src/views/account/index.vue
Normal file
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<div class="account-container">
|
||||
<img src="@/assets/images/account/account-bg.png" alt="" class="banner" />
|
||||
|
||||
<div class="account-main">
|
||||
<aside class="designer-panel">
|
||||
<div class="designer-avatar">
|
||||
<img :src="designerPortrait" alt="Lian Su" />
|
||||
</div>
|
||||
|
||||
<div class="designer-content">
|
||||
<section class="designer-heading">
|
||||
<div class="designer-name">Lian Su</div>
|
||||
<h1 class="designer-title">Roaming Clouds</h1>
|
||||
</section>
|
||||
|
||||
<section class="designer-section">
|
||||
<h2 class="section-title">Contact</h2>
|
||||
<div class="contact-list">
|
||||
<div class="contact-item">
|
||||
<SvgIcon name="brand-email" size="24" />
|
||||
<span>lian.su.studio@mail.com</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<SvgIcon name="brand-call" size="24" />
|
||||
<span>+86 139 4829 7710</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<SvgIcon name="brand-link" size="24" />
|
||||
<span>746312432</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<SvgIcon name="brand-link" size="24" />
|
||||
<span>https://urieworweoo.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="designer-section">
|
||||
<h2 class="section-title">About</h2>
|
||||
<p class="designer-about">
|
||||
Lian Su's work weaves understated ethnic influences into contemporary minimalism.
|
||||
She explores materials and silhouettes that bridge heritage and modern sensibilities.
|
||||
Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="items-section">
|
||||
<header class="items-header">
|
||||
<h2 class="items-title">Items</h2>
|
||||
<div class="items-tabs" role="tablist" aria-label="Item gender filters">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
type="button"
|
||||
class="items-tab"
|
||||
:class="{ active: activeTab === tab }"
|
||||
:aria-selected="activeTab === tab"
|
||||
role="tab"
|
||||
@click="activeTab = tab"
|
||||
>
|
||||
{{ tab }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="items-grid">
|
||||
<article v-for="item in visibleItems" :key="item.id" class="product-card">
|
||||
<div class="product-image">
|
||||
<img
|
||||
:src="item.url"
|
||||
:alt="item.title"
|
||||
:style="{ transform: `translateY(${item.imageOffset})` }"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-copy">
|
||||
<h3 class="product-name">{{ item.title }}</h3>
|
||||
<div class="product-price">{{ item.price }}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="add-button"
|
||||
:aria-label="`Add ${item.title} to cart`"
|
||||
@click="addShopping(item)"
|
||||
>
|
||||
<SvgIcon name="add" size="24" color="#232323" />
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import myEvent from '@/utils/myEvent'
|
||||
import designerPortrait from '@/assets/images/account/designer-lian-su.png'
|
||||
import item01 from '@/assets/images/account/item-01.png'
|
||||
import item02 from '@/assets/images/account/item-02.png'
|
||||
import item03 from '@/assets/images/account/item-03.png'
|
||||
import item04 from '@/assets/images/account/item-04.png'
|
||||
import item05 from '@/assets/images/account/item-05.png'
|
||||
import item06 from '@/assets/images/account/item-06.png'
|
||||
import item07 from '@/assets/images/account/item-07.png'
|
||||
import item08 from '@/assets/images/account/item-08.png'
|
||||
import item09 from '@/assets/images/account/item-09.png'
|
||||
|
||||
type Gender = 'Male' | 'Female'
|
||||
type Tab = 'All' | Gender
|
||||
|
||||
interface AccountItem {
|
||||
id: number
|
||||
title: string
|
||||
price: string
|
||||
url: string
|
||||
gender: Gender
|
||||
imageOffset: string
|
||||
}
|
||||
|
||||
const tabs: Tab[] = ['All', 'Male', 'Female']
|
||||
const activeTab = shallowRef<Tab>('All')
|
||||
|
||||
const items: AccountItem[] = [
|
||||
{ id: 1, title: 'Item Name', price: '$430', url: item01, gender: 'Female', imageOffset: '0rem' },
|
||||
{ id: 2, title: 'Item Name', price: '$392', url: item02, gender: 'Female', imageOffset: '0rem' },
|
||||
{ id: 3, title: 'Item Name', price: '$211', url: item03, gender: 'Male', imageOffset: '0rem' },
|
||||
{ id: 4, title: 'Item Name', price: '$187', url: item04, gender: 'Female', imageOffset: '0rem' },
|
||||
{ id: 5, title: 'Item Name', price: '$325', url: item05, gender: 'Male', imageOffset: '-1.4rem' },
|
||||
{ id: 6, title: 'Item Name', price: '$458', url: item06, gender: 'Female', imageOffset: '-0.4rem' },
|
||||
{ id: 7, title: 'Item Name', price: '$192', url: item07, gender: 'Male', imageOffset: '-3.6rem' },
|
||||
{ id: 8, title: 'Item Name', price: '$93', url: item08, gender: 'Female', imageOffset: '0rem' },
|
||||
{ id: 9, title: 'Item Name', price: '$198', url: item09, gender: 'Male', imageOffset: '-3.8rem' }
|
||||
]
|
||||
|
||||
const visibleItems = computed(() => {
|
||||
if (activeTab.value === 'All') return items
|
||||
return items.filter((item) => item.gender === activeTab.value)
|
||||
})
|
||||
|
||||
const addShopping = (item: AccountItem) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.account-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
background-color: #ffffff;
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 27.6rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.account-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 0 9rem;
|
||||
min-height: 170.3rem;
|
||||
border-top: 0.5px solid #585858;
|
||||
}
|
||||
|
||||
.designer-panel {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 29.7rem;
|
||||
height: var(--app-view-height);
|
||||
padding-top: 4rem;
|
||||
overflow-y: auto;
|
||||
flex: 0 0 29.7rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.designer-avatar {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-left: 5.5rem;
|
||||
border: 0.1rem solid #d2d2d7;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.designer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rem;
|
||||
width: 24.6rem;
|
||||
margin-top: 4rem;
|
||||
margin-left: 3.7rem;
|
||||
}
|
||||
|
||||
.designer-heading,
|
||||
.designer-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.designer-name {
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.designer-title,
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-weight: 700;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
.designer-title {
|
||||
width: 23.1rem;
|
||||
font-size: 3.4rem;
|
||||
line-height: 3.6rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 3.4rem;
|
||||
line-height: 3.1rem;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
min-width: 0;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
|
||||
> :first-child {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
flex: 0 0 2.4rem;
|
||||
}
|
||||
|
||||
> span {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
.designer-about {
|
||||
width: 22rem;
|
||||
margin: 0;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.3rem;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.items-section {
|
||||
flex: 1;
|
||||
min-height: 170.3rem;
|
||||
border-left: 0.5px solid #585858;
|
||||
border-right: 0.5px solid #585858;
|
||||
}
|
||||
|
||||
.items-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.items-title {
|
||||
margin: 0;
|
||||
padding: 4rem 0 3.6rem 1.2rem;
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 700;
|
||||
line-height: 6rem;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
.items-tabs {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
padding: 0 1.2rem;
|
||||
margin-bottom: 5.9rem;
|
||||
}
|
||||
|
||||
.items-tab {
|
||||
position: relative;
|
||||
min-width: 6rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.988rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.6rem;
|
||||
text-align: center;
|
||||
color: #7b7b7b;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.1rem;
|
||||
display: none;
|
||||
width: 100%;
|
||||
border-bottom: 0.1rem solid #232323;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-weight: 700;
|
||||
color: #232323;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
align-content: start;
|
||||
border-top: 0.5px solid #585858;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
position: relative;
|
||||
min-height: 44.7rem;
|
||||
padding: 1.2rem;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
border-right: 0.5px solid #585858;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-bottom: 0.5px solid #585858;
|
||||
}
|
||||
|
||||
&:nth-child(3n)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 37.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
overflow: hidden;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.product-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin: 0;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.3rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.3rem;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
flex: 0 0 2.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.account-main {
|
||||
display: block;
|
||||
margin: 0 2.4rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.designer-panel {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 4rem 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.designer-avatar {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.designer-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.items-section {
|
||||
min-height: auto;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.items-header {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.items-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.product-card:nth-child(3n)::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-card:nth-child(2n)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.account-main {
|
||||
margin: 0 1.6rem;
|
||||
}
|
||||
|
||||
.items-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-card::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -100,7 +100,7 @@
|
||||
{
|
||||
icon: 'user_0',
|
||||
active_icon: 'user_1',
|
||||
path: '/user'
|
||||
path: '/account'
|
||||
}
|
||||
])
|
||||
const onNavItemClick = (path: string) => {
|
||||
|
||||
263
src/views/setting/components/EmailVerificationDialog.vue
Normal file
263
src/views/setting/components/EmailVerificationDialog.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div v-if="visible" class="verification-dialog" @click.self="handleClose">
|
||||
<div class="verification-dialog__panel">
|
||||
<button type="button" class="verification-dialog__close" @click="handleClose">
|
||||
<SvgIcon name="close" size="24" />
|
||||
</button>
|
||||
|
||||
<div class="verification-dialog__title">{{ t('Settings.dialog.title') }}</div>
|
||||
<div class="verification-dialog__subtitle">{{ t('Settings.dialog.subtitle') }}</div>
|
||||
<div class="verification-dialog__email">{{ email }}</div>
|
||||
|
||||
<InputCode
|
||||
ref="verificationCodeRef"
|
||||
class="verification-code"
|
||||
@update:model-value="handleVerificationCodeChange"
|
||||
@submit="handleVerificationCodeChange"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="verification-dialog__submit"
|
||||
:disabled="saving || verificationCode.length !== 6"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ t('Settings.dialog.submit') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="verification-dialog__resend"
|
||||
:disabled="resendCountdown > 0"
|
||||
@click="handleResend"
|
||||
>
|
||||
{{ resendButtonText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import InputCode from '@/components/input-code.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
visible: boolean
|
||||
email: string
|
||||
saving?: boolean
|
||||
}>(),
|
||||
{
|
||||
saving: false
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
resend: []
|
||||
submit: [code: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const RESEND_COUNTDOWN_SECONDS = 60
|
||||
|
||||
const verificationCode = ref('')
|
||||
const resendCountdown = ref(RESEND_COUNTDOWN_SECONDS)
|
||||
const verificationCodeRef = ref<{ resetCode: (size?: number) => void } | null>(null)
|
||||
let resendCountdownTimer: ReturnType<typeof window.setInterval> | null = null
|
||||
|
||||
const formattedResendCountdown = computed(
|
||||
() => `00:${String(resendCountdown.value).padStart(2, '0')}`
|
||||
)
|
||||
|
||||
const resendButtonText = computed(() =>
|
||||
resendCountdown.value > 0
|
||||
? t('Settings.dialog.resendCodeIn', { time: formattedResendCountdown.value })
|
||||
: t('Settings.dialog.resendCode')
|
||||
)
|
||||
|
||||
const clearResendCountdownTimer = () => {
|
||||
if (resendCountdownTimer) {
|
||||
window.clearInterval(resendCountdownTimer)
|
||||
resendCountdownTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const startResendCountdown = () => {
|
||||
clearResendCountdownTimer()
|
||||
resendCountdown.value = RESEND_COUNTDOWN_SECONDS
|
||||
resendCountdownTimer = window.setInterval(() => {
|
||||
if (resendCountdown.value <= 1) {
|
||||
resendCountdown.value = 0
|
||||
clearResendCountdownTimer()
|
||||
return
|
||||
}
|
||||
|
||||
resendCountdown.value -= 1
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const resetVerificationCodeInput = async () => {
|
||||
verificationCode.value = ''
|
||||
await nextTick()
|
||||
verificationCodeRef.value?.resetCode?.()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleVerificationCodeChange = (value: string) => {
|
||||
verificationCode.value = value
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (verificationCode.value.length !== 6) return
|
||||
|
||||
emit('submit', verificationCode.value)
|
||||
}
|
||||
|
||||
const handleResend = async () => {
|
||||
if (resendCountdown.value > 0) return
|
||||
|
||||
emit('resend')
|
||||
startResendCountdown()
|
||||
await resetVerificationCodeInput()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (!visible) {
|
||||
clearResendCountdownTimer()
|
||||
verificationCode.value = ''
|
||||
resendCountdown.value = RESEND_COUNTDOWN_SECONDS
|
||||
return
|
||||
}
|
||||
|
||||
await resetVerificationCodeInput()
|
||||
startResendCountdown()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.email,
|
||||
async () => {
|
||||
if (!props.visible) return
|
||||
|
||||
await resetVerificationCodeInput()
|
||||
startResendCountdown()
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearResendCountdownTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.verification-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.verification-dialog__panel {
|
||||
width: 60rem;
|
||||
padding: 4.8rem 7.2rem 5rem;
|
||||
position: relative;
|
||||
background: #efefef;
|
||||
box-shadow: 0 2rem 6rem rgba(35, 35, 35, 0.14);
|
||||
}
|
||||
|
||||
.verification-dialog__close {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verification-dialog__title {
|
||||
color: #232323;
|
||||
text-align: center;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.verification-dialog__subtitle {
|
||||
margin-top: 2rem;
|
||||
color: #585858;
|
||||
text-align: center;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.8rem;
|
||||
}
|
||||
|
||||
.verification-dialog__email {
|
||||
margin-top: 0.8rem;
|
||||
color: #232323;
|
||||
text-align: center;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-top: 4.8rem;
|
||||
--input-code-justify-content: center;
|
||||
--input-code-input-gap: 1.4rem;
|
||||
--input-code-input-width: 6rem;
|
||||
--input-code-input-height: 6rem;
|
||||
}
|
||||
|
||||
.verification-dialog__submit {
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
margin-top: 5rem;
|
||||
border: 0.1rem solid #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.verification-dialog__resend {
|
||||
margin: 2rem auto 0;
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #7c7c7c;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="setting-wrapper mini-scrollbar">
|
||||
<div class="banner flex flex-center flex-col">
|
||||
<div class="title">Settings</div>
|
||||
<div class="slogan">Manage your account settings and preferences</div>
|
||||
<div class="title">{{ t('Settings.title') }}</div>
|
||||
<div class="slogan">{{ t('Settings.slogan') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-content">
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Profile</div>
|
||||
<div class="label">{{ t('Settings.profile.title') }}</div>
|
||||
<div class="label-desc">
|
||||
Update your display name, avatar, social links and account security.
|
||||
{{ t('Settings.profile.description') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,62 +29,46 @@
|
||||
<div class="read-section">
|
||||
<div class="read-row two-column">
|
||||
<div class="read-item">
|
||||
<div class="read-label">FIRST NAME</div>
|
||||
<div class="read-label">{{ t('Settings.profile.firstName') }}</div>
|
||||
<div v-show="!isEditing" class="read-box">{{ displayData.firstName }}</div>
|
||||
<div v-show="isEditing" class="form-item-value name">
|
||||
<el-input v-model="draftData.firstName" placeholder="First Name" />
|
||||
<el-input
|
||||
v-model="draftData.firstName"
|
||||
:placeholder="t('Settings.profile.firstNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-item">
|
||||
<div class="read-label">LAST NAME</div>
|
||||
<div class="read-label">{{ t('Settings.profile.lastName') }}</div>
|
||||
<div v-show="!isEditing" class="read-box">{{ displayData.lastName }}</div>
|
||||
<div v-show="isEditing" class="form-item-value name">
|
||||
<el-input v-model="draftData.lastName" placeholder="Last Name" />
|
||||
<el-input
|
||||
v-model="draftData.lastName"
|
||||
:placeholder="t('Settings.profile.lastNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-row">
|
||||
<div class="read-label">USERNAME</div>
|
||||
<div class="read-label">{{ t('Settings.profile.username') }}</div>
|
||||
<div v-show="!isEditing" class="read-box">{{ displayData.username }}</div>
|
||||
<div v-show="isEditing" class="form-item-value">
|
||||
<el-input v-model="draftData.username" placeholder="Username" />
|
||||
<el-input
|
||||
v-model="draftData.username"
|
||||
:placeholder="t('Settings.profile.usernamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">Your public username on Stylish Parade.</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.usernameTip') }}</div>
|
||||
|
||||
<div class="read-row role-row">
|
||||
<div class="read-label">ROLE</div>
|
||||
<div class="read-label">{{ t('Settings.profile.role') }}</div>
|
||||
<div :class="{ 'readonly-radio-group': !isEditing }">
|
||||
<Radio multiple :max="2" v-model="roleModel" :options="roleList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">Select up to 2 labels that suit you.</div>
|
||||
|
||||
<div class="social-links read-social-links">
|
||||
<div class="title">SOCIAL LINKS</div>
|
||||
<div class="links-list flex flex-col">
|
||||
<div
|
||||
class="links-item flex align-center"
|
||||
v-for="(item, index) in displayData.links"
|
||||
:key="`view-${index}`"
|
||||
>
|
||||
<div class="link-index">Link {{ index + 1 }}</div>
|
||||
<div v-show="!isEditing" class="link-href flex-1 readonly">{{ item }}</div>
|
||||
<div v-show="isEditing" class="link-href flex-1">
|
||||
<el-input v-model="draftData.links[index]" />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
type="button"
|
||||
class="add-link-btn"
|
||||
@click="handleAddLink"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">{{ t('Settings.profile.roleTip') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,15 +77,15 @@
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Security</div>
|
||||
<div class="label-desc">Manage your login email and password.</div>
|
||||
<div class="label">{{ t('Settings.security.title') }}</div>
|
||||
<div class="label-desc">{{ t('Settings.security.description') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container security-container">
|
||||
<div class="inner-divider" />
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row flex align-center">
|
||||
<div class="security-label inline">EMAIL</div>
|
||||
<div class="security-label inline">{{ t('Settings.security.email') }}</div>
|
||||
<div class="security-static flex-1">{{ displayData.email }}</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
@@ -109,16 +93,31 @@
|
||||
class="small-btn"
|
||||
@click="resetSecurityEmail"
|
||||
>
|
||||
CANCEL
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">NEW EMAIL ADDRESS</div>
|
||||
<div class="security-label">{{ t('Settings.security.newEmail') }}</div>
|
||||
<div class="outlined-field verify-field align-center">
|
||||
<el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
|
||||
<div class="verify-btn">Verify</div>
|
||||
<el-input
|
||||
v-model="securityDraft.newEmail"
|
||||
:placeholder="t('Settings.security.newEmailPlaceholder')"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="verify-btn"
|
||||
:class="{ verified: isEmailVerified }"
|
||||
@click="handleVerifyEmail"
|
||||
>
|
||||
{{
|
||||
isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify')
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isEmailVerified" class="security-tip verified-tip">
|
||||
{{ t('Settings.security.verifiedTip') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -126,7 +125,7 @@
|
||||
|
||||
<div class="security-row">
|
||||
<div class="security-inline-row flex align-center">
|
||||
<div class="security-label inline">PASSWORD</div>
|
||||
<div class="security-label inline">{{ t('Settings.security.password') }}</div>
|
||||
<div class="security-static password-mask flex-1">.........</div>
|
||||
<button
|
||||
v-show="isEditing"
|
||||
@@ -134,32 +133,32 @@
|
||||
class="small-btn"
|
||||
@click="resetSecurityPassword"
|
||||
>
|
||||
CANCEL
|
||||
{{ t('Settings.buttons.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">NEW PASSWORD</div>
|
||||
<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="Enter new password"
|
||||
:placeholder="t('Settings.security.newPasswordPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="security-tip">You must satisfy ALL password conditions to register.</div>
|
||||
<div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
|
||||
</div>
|
||||
|
||||
<div v-show="isEditing" class="security-row">
|
||||
<div class="security-label">CURRENT PASSWORD</div>
|
||||
<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.currentPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="Confirm with your password"
|
||||
:placeholder="t('Settings.security.currentPasswordPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,31 +170,47 @@
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Language & Region</div>
|
||||
<div class="label-desc">Set your preferred language, region and currency display.</div>
|
||||
<div class="label">{{ t('Settings.region.title') }}</div>
|
||||
<div class="label-desc">{{ t('Settings.region.description') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container region-container">
|
||||
<div class="region-row">
|
||||
<div class="security-label">DISPLAY LANGUAGE</div>
|
||||
<div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayData.language }}
|
||||
{{ displayLanguageLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select v-model="draftData.language" placeholder="Select language">
|
||||
<el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
|
||||
<el-select
|
||||
v-model="draftData.language"
|
||||
:placeholder="t('Settings.region.selectLanguage')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in languageList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="region-row">
|
||||
<div class="security-label">REGION</div>
|
||||
<div class="security-label">{{ t('Settings.region.region') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayData.region }}
|
||||
{{ displayRegionLabel }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select v-model="draftData.region" placeholder="Select region">
|
||||
<el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
|
||||
<el-select
|
||||
v-model="draftData.region"
|
||||
:placeholder="t('Settings.region.selectRegion')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in regionList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,34 +222,68 @@
|
||||
<div class="action-container flex">
|
||||
<template v-if="isEditing">
|
||||
<button type="button" class="primary-btn" :disabled="saving" @click="handleSave">
|
||||
{{ saving ? 'SAVING...' : 'SAVE CHANGE' }}
|
||||
{{ saving ? t('Settings.buttons.saving') : t('Settings.buttons.saveChange') }}
|
||||
</button>
|
||||
<button type="button" class="secondary-btn" :disabled="saving" @click="handleDiscard">
|
||||
DISCARD
|
||||
{{ t('Settings.buttons.discard') }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button type="button" class="primary-btn edit-btn" @click="handleEdit">EDIT</button>
|
||||
<button type="button" class="primary-btn edit-btn" @click="handleEdit">
|
||||
{{ t('Settings.buttons.edit') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
<EmailVerificationDialog
|
||||
:visible="isVerificationDialogVisible"
|
||||
:email="verificationTargetEmail"
|
||||
:saving="saving"
|
||||
@close="closeVerificationDialog"
|
||||
@resend="handleSendVerifyCode"
|
||||
@submit="handleVerificationSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
|
||||
import Radio from './components/Radio.vue'
|
||||
|
||||
const roleValues = [
|
||||
'fashionEnthusiast',
|
||||
'contentCreator',
|
||||
'student',
|
||||
'retailBuyer',
|
||||
'fashionDesigner',
|
||||
'brandBusiness',
|
||||
'prCommunications',
|
||||
'stylist',
|
||||
'graphicDesigner',
|
||||
'artist3d',
|
||||
'other'
|
||||
] as const
|
||||
|
||||
const languageValues = ['english', 'chinese'] as const
|
||||
const regionValues = ['hongKongSar', 'mainlandChina', 'singapore', 'unitedKingdom'] as const
|
||||
|
||||
type RoleValue = (typeof roleValues)[number]
|
||||
type LanguageValue = (typeof languageValues)[number]
|
||||
type RegionValue = (typeof regionValues)[number]
|
||||
|
||||
interface SettingsData {
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
username: string
|
||||
role: string[]
|
||||
links: string[]
|
||||
language: string
|
||||
region: string
|
||||
role: RoleValue[]
|
||||
language: LanguageValue
|
||||
region: RegionValue
|
||||
}
|
||||
|
||||
interface SecurityDraft {
|
||||
@@ -243,32 +292,42 @@ interface SecurityDraft {
|
||||
currentPassword: string
|
||||
}
|
||||
|
||||
const roleList = [
|
||||
'Fashion Enthusiast',
|
||||
'Content Creator',
|
||||
'Student',
|
||||
'Retail / Buyer',
|
||||
'Fashion Designer',
|
||||
'Brand / Business',
|
||||
'PR & Communications',
|
||||
'Stylist',
|
||||
'Graphic Designer',
|
||||
'3D Artist',
|
||||
'Other'
|
||||
].map((item) => ({ name: item, value: item }))
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
const languageList = ['English', 'Chinese', 'Japanese']
|
||||
const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
|
||||
const languageLocaleMap: Record<LanguageValue, 'ENGLISH' | 'CHINESE_SIMPLIFIED'> = {
|
||||
english: 'ENGLISH',
|
||||
chinese: 'CHINESE_SIMPLIFIED'
|
||||
}
|
||||
|
||||
const roleList = computed(() =>
|
||||
roleValues.map((value) => ({
|
||||
name: t(`Settings.roles.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const languageList = computed(() =>
|
||||
languageValues.map((value) => ({
|
||||
label: t(`Settings.languages.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const regionList = computed(() =>
|
||||
regionValues.map((value) => ({
|
||||
label: t(`Settings.regions.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const createDefaultData = (): SettingsData => ({
|
||||
firstName: 'Alexandra',
|
||||
lastName: 'Chen',
|
||||
email: 'alex.chen@gmail.com',
|
||||
username: '@alexandra_chen',
|
||||
role: ['Student', 'Graphic Designer'],
|
||||
links: ['https://instagram.com/username', 'https://...'],
|
||||
language: 'English',
|
||||
region: 'Hong Kong SAR'
|
||||
role: ['student', 'graphicDesigner'],
|
||||
language: 'english',
|
||||
region: 'hongKongSar'
|
||||
})
|
||||
|
||||
const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
@@ -277,7 +336,6 @@ const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
email: data.email,
|
||||
username: data.username,
|
||||
role: [...data.role],
|
||||
links: [...data.links],
|
||||
language: data.language,
|
||||
region: data.region
|
||||
})
|
||||
@@ -293,8 +351,20 @@ const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = ref(false)
|
||||
const saving = ref(false)
|
||||
const isVerificationDialogVisible = ref(false)
|
||||
const verificationTargetEmail = ref('')
|
||||
const verifiedEmail = ref('')
|
||||
|
||||
const displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
|
||||
const normalizedNewEmail = computed(() => securityDraft.value.newEmail.trim())
|
||||
const hasNewEmailChange = computed(
|
||||
() => normalizedNewEmail.value.length > 0 && normalizedNewEmail.value !== sourceData.value.email
|
||||
)
|
||||
const isEmailVerified = computed(
|
||||
() => hasNewEmailChange.value && verifiedEmail.value === normalizedNewEmail.value
|
||||
)
|
||||
const displayLanguageLabel = computed(() => t(`Settings.languages.${displayData.value.language}`))
|
||||
const displayRegionLabel = computed(() => t(`Settings.regions.${displayData.value.region}`))
|
||||
|
||||
const fullName = computed(() => {
|
||||
const data = displayData.value
|
||||
@@ -303,7 +373,7 @@ const fullName = computed(() => {
|
||||
|
||||
const roleModel = computed({
|
||||
get: () => displayData.value.role,
|
||||
set: (value: string[]) => {
|
||||
set: (value: RoleValue[]) => {
|
||||
if (isEditing.value) {
|
||||
draftData.value.role = value
|
||||
return
|
||||
@@ -312,9 +382,24 @@ const roleModel = computed({
|
||||
}
|
||||
})
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
const resetEmailVerificationState = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
const syncAppLanguage = (language: LanguageValue) => {
|
||||
const nextLocale = languageLocaleMap[language]
|
||||
locale.value = nextLocale
|
||||
localStorage.setItem('language', nextLocale)
|
||||
}
|
||||
|
||||
const resetDraftState = () => {
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
@@ -322,12 +407,9 @@ const handleEdit = () => {
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
const handleAddLink = () => {
|
||||
draftData.value.links.push('')
|
||||
}
|
||||
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const resetSecurityPassword = () => {
|
||||
@@ -340,6 +422,54 @@ const handleDiscard = () => {
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const closeVerificationDialog = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
|
||||
const handleVerifyEmail = () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning(t('Settings.messages.invalidEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning(t('Settings.messages.sameEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success(t('Settings.messages.alreadyVerified'))
|
||||
return
|
||||
}
|
||||
|
||||
verificationTargetEmail.value = nextEmail
|
||||
handleSendVerifyCode()
|
||||
isVerificationDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSendVerifyCode = () => {
|
||||
ElMessage.success(t('Settings.messages.verificationCodeSent'))
|
||||
}
|
||||
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning(t('Settings.messages.enterVerificationCode'))
|
||||
return
|
||||
}
|
||||
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success(t('Settings.messages.verificationCompleted'))
|
||||
}
|
||||
|
||||
const buildNextData = () => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
return {
|
||||
@@ -348,30 +478,59 @@ const buildNextData = () => {
|
||||
username: draftData.value.username.trim(),
|
||||
email: nextEmail,
|
||||
role: draftData.value.role,
|
||||
links: draftData.value.links.map((item) => item.trim()).filter(Boolean),
|
||||
language: draftData.value.language,
|
||||
region: draftData.value.region
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
|
||||
return
|
||||
}
|
||||
|
||||
const nextData = buildNextData()
|
||||
const previousLanguage = sourceData.value.language
|
||||
saving.value = true
|
||||
try {
|
||||
sourceData.value = cloneSettingsData({
|
||||
...nextData,
|
||||
links: nextData.links.length ? nextData.links : ['']
|
||||
...nextData
|
||||
})
|
||||
|
||||
if (nextData.language !== previousLanguage) {
|
||||
syncAppLanguage(nextData.language)
|
||||
}
|
||||
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success('Settings updated')
|
||||
ElMessage.success(t('Settings.messages.settingsUpdated'))
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => securityDraft.value.newEmail,
|
||||
(value) => {
|
||||
const trimmedValue = value.trim()
|
||||
|
||||
if (verifiedEmail.value && trimmedValue !== verifiedEmail.value) {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
if (
|
||||
isVerificationDialogVisible.value &&
|
||||
verificationTargetEmail.value &&
|
||||
trimmedValue !== verificationTargetEmail.value
|
||||
) {
|
||||
closeVerificationDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -590,71 +749,6 @@ const handleSave = async () => {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin-top: 5.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
|
||||
.title {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
&.read-social-links {
|
||||
margin-top: 4.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.links-list {
|
||||
row-gap: 0.8rem;
|
||||
}
|
||||
|
||||
.links-item {
|
||||
column-gap: 3.4rem;
|
||||
}
|
||||
|
||||
.link-index {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.link-href {
|
||||
color: #979797;
|
||||
|
||||
&.readonly {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem 2rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
}
|
||||
|
||||
.add-link-btn {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: 0.1rem solid #f0ebe5;
|
||||
background: #f6f6f6;
|
||||
color: #b4aea6;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.security-container {
|
||||
.security-row + .security-row {
|
||||
margin-top: 2.8rem;
|
||||
@@ -696,6 +790,7 @@ const handleSave = async () => {
|
||||
|
||||
.verify-btn {
|
||||
border: none;
|
||||
min-width: 11rem;
|
||||
height: 2.8rem;
|
||||
line-height: 2.8rem;
|
||||
border-left: 0.1rem solid #979797;
|
||||
@@ -705,6 +800,12 @@ const handleSave = async () => {
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
padding: 0 2rem;
|
||||
|
||||
&.verified {
|
||||
color: #ffffff;
|
||||
background: #232323;
|
||||
border-left-color: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
.password-mask {
|
||||
@@ -789,6 +890,10 @@ const handleSave = async () => {
|
||||
.edit-btn {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.verified-tip {
|
||||
color: #6f7f68;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,164 +1,200 @@
|
||||
<template>
|
||||
<div class="sc-item">
|
||||
<slot name="checkbox" />
|
||||
<img :src="info.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="showTags">
|
||||
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="size" v-if="showSize">
|
||||
<div class="icon"><svg-icon name="order-file" size="18" /></div>
|
||||
<div class="text">
|
||||
<span>{{ FormatBytes(info.fileSize) }}</span>
|
||||
<span v-if="showSizeDate"
|
||||
> | {{
|
||||
FormatDate(info.date, 'SM D, YYYY, h:mm A')
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ info.amount }}<span> HKD</span></div>
|
||||
<div class="remove" v-if="showRemove" @click="onRemove">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
|
||||
<slot name="checkbox" />
|
||||
<img :src="info.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="showTags">
|
||||
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="size" v-if="showSize">
|
||||
<div class="icon"><svg-icon name="order-file" size="18" /></div>
|
||||
<div class="text">
|
||||
<span>{{ FormatBytes(info.fileSize) }}</span>
|
||||
<span v-if="showSizeDate"
|
||||
> | {{
|
||||
FormatDate(info.date, 'SM D, YYYY, h:mm A')
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ info.amount }}<span> HKD</span></div>
|
||||
<SvgIcon v-if="orderActionsLayout" class="download" name="download" size="32" color="#232323" />
|
||||
<div class="remove" v-if="showRemove" @click="onRemove">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['remove'])
|
||||
const props = defineProps({
|
||||
showTags: { type: Boolean, default: true },
|
||||
showSize: { type: Boolean, default: true },
|
||||
showSizeDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
info: { type: Object, default: () => {} }
|
||||
})
|
||||
const onRemove = () => {
|
||||
emit('remove', props.info.id)
|
||||
}
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['remove'])
|
||||
const props = defineProps({
|
||||
showTags: { type: Boolean, default: true },
|
||||
showSize: { type: Boolean, default: true },
|
||||
showSizeDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
orderActionsLayout: { type: Boolean, default: false },
|
||||
info: { type: Object, default: () => {} }
|
||||
})
|
||||
const onRemove = () => {
|
||||
emit('remove', props.info.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sc-item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-item-img-width, 14.8rem);
|
||||
height: var(--sc-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-item-content-margin, 0 4rem);
|
||||
align-self: var(--sc-item-content-align-self);
|
||||
> * {
|
||||
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: var(--sc-item-tag-min-width, 8.8rem);
|
||||
height: var(--sc-item-tag-height, 2.4rem);
|
||||
line-height: var(--sc-item-tag-height, 2.4rem);
|
||||
border-radius: var(--sc-item-tag-radius, 2.4rem);
|
||||
font-size: var(--sc-item-tag-font-size, 1.4rem);
|
||||
padding: var(--sc-item-tag-padding, 0 1rem);
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
.sc-item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-item-img-width, 14.8rem);
|
||||
height: var(--sc-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-item-content-margin, 0 4rem);
|
||||
align-self: var(--sc-item-content-align-self);
|
||||
> * {
|
||||
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: var(--sc-item-tag-min-width, 8.8rem);
|
||||
height: var(--sc-item-tag-height, 2.4rem);
|
||||
line-height: var(--sc-item-tag-height, 2.4rem);
|
||||
border-radius: var(--sc-item-tag-radius, 2.4rem);
|
||||
font-size: var(--sc-item-tag-font-size, 1.4rem);
|
||||
padding: var(--sc-item-tag-padding, 0 1rem);
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: var(--sc-item-right-align-self, end);
|
||||
display: var(--sc-item-right-display);
|
||||
flex-direction: var(--sc-item-right-flex-direction);
|
||||
justify-content: var(--sc-item-right-justify-content);
|
||||
align-items: var(--sc-item-right-align-items);
|
||||
height: var(--sc-item-right-height);
|
||||
margin-top: var(--sc-item-right-margin-top);
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: var(--sc-item-right-align-self, end);
|
||||
display: var(--sc-item-right-display);
|
||||
flex-direction: var(--sc-item-right-flex-direction);
|
||||
justify-content: var(--sc-item-right-justify-content);
|
||||
align-items: var(--sc-item-right-align-items);
|
||||
height: var(--sc-item-right-height);
|
||||
margin-top: var(--sc-item-right-margin-top);
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-order-actions-layout {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--sc-item-img-width, 14.8rem)
|
||||
minmax(0, 1fr)
|
||||
var(--sc-item-order-amount-width, 12rem)
|
||||
var(--sc-item-order-action-width, 18rem);
|
||||
column-gap: var(--sc-item-order-column-gap, 2rem);
|
||||
|
||||
> .content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .right {
|
||||
display: contents;
|
||||
|
||||
> .amount {
|
||||
grid-column: 3;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
transform: translateX(var(--sc-item-order-actions-offset, 0));
|
||||
}
|
||||
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
> .download {
|
||||
grid-column: 4;
|
||||
cursor: pointer;
|
||||
transform: translateX(var(--sc-item-order-actions-offset, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -99,17 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="assets-empty flex flex-col flex-center">
|
||||
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="empty-img" alt="" />
|
||||
|
||||
<h2 class="assets-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="assets-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<div class="assets-empty__button" type="button" @click="goToDigitalItems">
|
||||
Explore Digital Items
|
||||
</div>
|
||||
</div>
|
||||
<Empty v-else @explore="goToDigitalItems" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -117,6 +107,7 @@
|
||||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import img from '@/assets/images/collectionStory/Rectangle.png'
|
||||
import Empty from './Empty.vue'
|
||||
|
||||
interface FilterOption {
|
||||
label: string
|
||||
@@ -553,39 +544,6 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.assets-empty {
|
||||
flex: 1;
|
||||
|
||||
color: #979797;
|
||||
.empty-img {
|
||||
width: 14.2rem;
|
||||
height: 18.8rem;
|
||||
}
|
||||
|
||||
.assets-empty__title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
margin: 2.4rem 0 0.8rem;
|
||||
}
|
||||
|
||||
.assets-empty__description {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.assets-empty__button {
|
||||
margin-top: 3rem;
|
||||
height: 4.4rem;
|
||||
line-height: 4.4rem;
|
||||
padding: 0 3.8rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
56
src/views/wardrobe/Empty.vue
Normal file
56
src/views/wardrobe/Empty.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
(event: 'explore'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wardrobe-empty flex flex-col flex-center">
|
||||
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />
|
||||
|
||||
<h2 class="wardrobe-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="wardrobe-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<button class="wardrobe-empty__button" type="button" @click="emit('explore')">
|
||||
Explore Digital Items
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-empty {
|
||||
flex: 1;
|
||||
color: #979797;
|
||||
|
||||
> .wardrobe-empty__image {
|
||||
width: 14.2rem;
|
||||
height: 18.8rem;
|
||||
}
|
||||
|
||||
> .wardrobe-empty__title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
margin: 2.4rem 0 0.8rem;
|
||||
}
|
||||
|
||||
> .wardrobe-empty__description {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
> .wardrobe-empty__button {
|
||||
margin-top: 3rem;
|
||||
height: 4.4rem;
|
||||
line-height: 4.4rem;
|
||||
padding: 0 3.8rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
text-transform: uppercase;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,257 +1,426 @@
|
||||
<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 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="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__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">
|
||||
+{{ getExtraCount(order) }} more
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="order-card__status" :class="`is-${order.status}`">
|
||||
{{ order.status.toUpperCase() }}
|
||||
</div>
|
||||
|
||||
<div class="order-card__amount">
|
||||
<span>${{ order.amount }}</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 v-if="order.status === 'paid'">Invoice</span>
|
||||
<span v-else-if="order.status === 'unpaid'">Complete Payment</span>
|
||||
<span v-else>Buy Again</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-size="false"
|
||||
:show-size-date="false"
|
||||
:show-remove="false"
|
||||
order-actions-layout
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import ScItem from '@/views/shoppingCart/sc-item.vue'
|
||||
|
||||
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
|
||||
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
|
||||
|
||||
interface StatusOption {
|
||||
key: OrderStatus
|
||||
label: string
|
||||
key: OrderStatus
|
||||
label: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
interface OrderItem {
|
||||
id: number
|
||||
url: string
|
||||
title: string
|
||||
brand: string
|
||||
fileSize: number
|
||||
date: string
|
||||
amount: number
|
||||
tags: string[]
|
||||
checked: boolean
|
||||
color: string
|
||||
}
|
||||
|
||||
interface OrderRecord {
|
||||
id: string
|
||||
date: string
|
||||
status: ActualOrderStatus
|
||||
amount: number
|
||||
items: OrderItem[]
|
||||
}
|
||||
|
||||
const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
|
||||
|
||||
const statusOptions: StatusOption[] = [
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'paid', label: 'Paid' },
|
||||
{ key: 'unpaid', label: 'Unpaid' },
|
||||
{ key: 'cancelled', label: 'Cancelled' }
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'paid', label: 'Paid' },
|
||||
{ key: 'unpaid', label: 'Unpaid' },
|
||||
{ key: 'cancelled', label: 'Canceled' }
|
||||
]
|
||||
|
||||
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 activeStatus = shallowRef<OrderStatus>('all')
|
||||
const expandedOrderId = shallowRef('SP897262698')
|
||||
|
||||
const goToDigitalItems = () => {
|
||||
router.push('/digitalItem')
|
||||
const filteredOrders = computed(() => {
|
||||
if (activeStatus.value === 'all') return orders
|
||||
return orders.filter((order) => order.status === activeStatus.value)
|
||||
})
|
||||
|
||||
const toggleOrder = (orderId: string) => {
|
||||
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
|
||||
}
|
||||
|
||||
const getExtraCount = (order: OrderRecord) => {
|
||||
return Math.max(order.items.length - 2, 0)
|
||||
}
|
||||
</script>
|
||||
|
||||
<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 class="orders-empty">
|
||||
<div class="orders-empty__illustration" aria-hidden="true">
|
||||
<div class="orders-empty__hook"></div>
|
||||
<div class="orders-empty__hanger"></div>
|
||||
<div class="orders-empty__body"></div>
|
||||
<div class="orders-empty__hem"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="orders-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<button class="orders-empty__button" type="button" @click="goToDigitalItems">
|
||||
Explore Digital Items
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-orders {
|
||||
--wardrobe-border-color: #d9d4cd;
|
||||
--wardrobe-border-dark: #c8c0b4;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fffdf8;
|
||||
.c-svg {
|
||||
width: initial;
|
||||
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: 1rem;
|
||||
padding: 2.2rem 3rem 0;
|
||||
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: 3rem;
|
||||
padding: 0 1.4rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-color);
|
||||
border-radius: 999rem;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
color: #8b8277;
|
||||
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-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem 7rem;
|
||||
text-align: center;
|
||||
.orders-list {
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty__illustration {
|
||||
position: relative;
|
||||
width: 8.8rem;
|
||||
height: 10.4rem;
|
||||
margin-bottom: 2.4rem;
|
||||
opacity: 0.55;
|
||||
.order-card {
|
||||
position: relative;
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
|
||||
> .orders-empty__hook {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-10%) rotate(-18deg);
|
||||
}
|
||||
.order-card__toggle {
|
||||
position: absolute;
|
||||
top: 5.8rem;
|
||||
left: 4.2rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
> .orders-empty__hanger {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 1.2rem;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
border-top: 0.14rem solid #b8b1a5;
|
||||
border-left: 0.14rem solid #b8b1a5;
|
||||
border-right: 0.14rem solid #b8b1a5;
|
||||
transform: translateX(-50%) skewY(-12deg);
|
||||
}
|
||||
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;
|
||||
|
||||
> .orders-empty__body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 3.2rem;
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-top: 0;
|
||||
transform: translateX(-50%);
|
||||
&.is-expanded {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
width: 1.7rem;
|
||||
height: 2.6rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.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;
|
||||
|
||||
&::before {
|
||||
left: -1.2rem;
|
||||
transform: skewY(22deg);
|
||||
}
|
||||
.order-card__meta {
|
||||
.order-card__id {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -1.2rem;
|
||||
transform: skewY(-22deg);
|
||||
}
|
||||
}
|
||||
.order-card__date {
|
||||
margin: 0.8rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty__hem {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0.8rem;
|
||||
width: 4.6rem;
|
||||
height: 2rem;
|
||||
border-left: 0.14rem solid #b8b1a5;
|
||||
border-right: 0.14rem solid #b8b1a5;
|
||||
border-bottom: 0.14rem solid #b8b1a5;
|
||||
transform: translateX(-50%);
|
||||
.order-card__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1.3rem;
|
||||
height: 100%;
|
||||
border-bottom: 0.14rem solid #b8b1a5;
|
||||
}
|
||||
.order-card__thumb {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
display: block;
|
||||
margin-right: 1.2rem;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -0.1rem;
|
||||
transform: skewX(24deg);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
.order-card__extra {
|
||||
margin-left: 1.2rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -0.1rem;
|
||||
transform: skewX(-24deg);
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
> .orders-empty__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3;
|
||||
color: #8c8479;
|
||||
}
|
||||
&.is-paid {
|
||||
background: #e8f2ec;
|
||||
color: #769591;
|
||||
}
|
||||
|
||||
> .orders-empty__description {
|
||||
max-width: 32rem;
|
||||
margin: 1rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.7;
|
||||
color: #b1a99e;
|
||||
}
|
||||
&.is-unpaid {
|
||||
background: #fef3e2;
|
||||
color: #b48230;
|
||||
}
|
||||
|
||||
> .orders-empty__button {
|
||||
margin-top: 2rem;
|
||||
height: 3.8rem;
|
||||
padding: 0 2.4rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-color);
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06rem;
|
||||
text-transform: uppercase;
|
||||
color: #6d655b;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
&.is-cancelled {
|
||||
background: #fff2f2;
|
||||
color: #c65f5a;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f8f3ea;
|
||||
border-color: var(--wardrobe-border-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-card__amount {
|
||||
white-space: nowrap;
|
||||
color: #232323;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.wardrobe-orders {
|
||||
> .orders-toolbar {
|
||||
padding: 2rem 2rem 0;
|
||||
}
|
||||
span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
> .orders-empty {
|
||||
padding: 5rem 2rem 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
|
||||
&.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;
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="wardrobe-page">
|
||||
<section class="wardrobe-hero flex flex-col flex-center">
|
||||
<div class="wardrobe-hero flex flex-col flex-center">
|
||||
<div class="wardrobe-hero__title">My Wardrobe</div>
|
||||
<div class="wardrobe-hero__subtitle">Your digital pieces, all in one place</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="wardrobe-shell">
|
||||
<div class="wardrobe-shell">
|
||||
<div class="wardrobe-tabs">
|
||||
<div class="wardrobe-tabs__nav" role="tablist" aria-label="Wardrobe tabs">
|
||||
<button
|
||||
@@ -36,7 +36,8 @@
|
||||
</div>
|
||||
|
||||
<component :is="activePanel" class="wardrobe-shell__panel" />
|
||||
</section>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -104,7 +105,18 @@ const activePanel = computed(() => {
|
||||
|
||||
.wardrobe-hero {
|
||||
height: 14.8rem;
|
||||
background-color: #f5f5f5;
|
||||
// background-color: #f5f5f5;
|
||||
background: url('@/assets/images/background.png') no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// background-color: rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
.wardrobe-hero__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
|
||||
@@ -61,7 +61,7 @@ export default defineConfig(({ mode }) => {
|
||||
host: '0.0.0.0', // 允许局域网内的IP访问
|
||||
port: 8060, // 根据环境设置端口
|
||||
open: false, // 自动打开浏览器
|
||||
strictPort: true, // 如果端口已被占用，则尝试下一个可用端口
|
||||
strictPort: false, // 如果端口已被占用，则尝试下一个可用端口
|
||||
hmr: {
|
||||
overlay: true
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user