Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front

src/assets/icons/statement.svg

@@ -1,4 +1,5 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.32919 0C3.73406 0 0 3.7382 0 8.33333C0 12.9285 3.7382 16.6667 8.32919 16.6667C12.9202 16.6667 16.6584 12.9285 16.6584 8.33333C16.6584 3.7382 12.9243 0 8.32919 0ZM8.32919 15.7352C4.24739 15.7352 0.927306 12.4151 0.927306 8.33333C0.927306 4.25153 4.24739 0.931445 8.32919 0.931445C12.411 0.931445 15.7311 4.25153 15.7311 8.33333C15.7311 12.4151 12.411 15.7352 8.32919 15.7352Z" fill="#979797"/>
+<path d="M9.99326 1.66675C5.39812 1.66675 1.66406 5.40495 1.66406 10.0001C1.66406 14.5952 5.40226 18.3334 9.99326 18.3334C14.5842 18.3334 18.3224 14.5952 18.3224 10.0001C18.3224 5.40495 14.5884 1.66675 9.99326 1.66675ZM9.99326 17.402C5.91145 17.402 2.59137 14.0819 2.59137 10.0001C2.59137 5.91828 5.91145 2.59819 9.99326 2.59819C14.0751 2.59819 17.3951 5.91828 17.3951 10.0001C17.3951 14.0819 14.0751 17.402 9.99326 17.402Z" fill="#979797"/>
-<path d="M8.84744 7.50551C8.84744 7.21972 8.61576 6.98804 8.32997 6.98804C8.04418 6.98804 7.8125 7.21972 7.8125 7.50551V12.4732C7.8125 12.759 8.04418 12.9907 8.32997 12.9907C8.61576 12.9907 8.84744 12.759 8.84744 12.4732V7.50551Z" fill="#979797"/>
+<path d="M10.5115 9.17225C10.5115 8.88646 10.2798 8.65479 9.99403 8.65479C9.70824 8.65479 9.47656 8.88646 9.47656 9.17225V14.14C9.47656 14.4258 9.70824 14.6574 9.99403 14.6574C10.2798 14.6574 10.5115 14.4258 10.5115 14.14V9.17225Z" fill="#979797"/>
+<path d="M9.99592 6.68813C10.4513 6.68813 10.8239 6.31555 10.8239 5.86018C10.8239 5.4048 10.4513 5.03223 9.99592 5.03223C9.54055 5.03223 9.16797 5.4048 9.16797 5.86018C9.16797 6.31555 9.54055 6.68813 9.99592 6.68813Z" fill="#979797"/>
 </svg>

src/components/Footer.vue

@@ -1,21 +1,26 @@
 <template>
 	<section class="section-footer">
 		<div class="footer">
-			<div class="left">
+			<div class="left" v-show="!isHome">
-				<div>{{ $t('footer.About') }}</div>
+				<div @click="skip('about')">{{ $t('footer.About') }}</div>
-				<div>{{ $t('footer.PrivacyPolicy') }}</div>
+				<div @click="skip('privacy-policy')">{{ $t('footer.PrivacyPolicy') }}</div>
-				<div>{{ $t('footer.TermsOfUse') }}</div>
+				<div @click="skip('terms-of-use')">{{ $t('footer.TermsOfUse') }}</div>
-				<div>{{ $t('footer.Disclaimer') }}</div>	
+				<div @click="skip('disclaimer')">{{ $t('footer.Disclaimer') }}</div>
-				<div>{{ $t('footer.SiteMap') }}</div>
+				<div @click="skip('site-map')">{{ $t('footer.SiteMap') }}</div>
+			</div>
+			<div class="left" v-show="isHome">
+				<div class="text" @click="skip('code-create')">© Code-Create 2026</div>
 			</div>
 			<div class="right">
-				<img src="@/assets/images/icons/xiaohongshu.png" />
+				<img src="@/assets/images/icons/xiaohongshu.png" @click="skip('xiaohongshu')" />
-				<img src="@/assets/images/icons/linkedin.png" />
+				<img src="@/assets/images/icons/linkedin.png" @click="skip('linkedin')" />
-				<img src="@/assets/images/icons/instagram.png" />
+				<img src="@/assets/images/icons/instagram.png" @click="skip('instagram')" />
-				<img src="@/assets/images/icons/facebook.png" />
+				<img src="@/assets/images/icons/facebook.png" @click="skip('facebook')" />
-				<img src="@/assets/images/icons/douyin.png" />
+				<img src="@/assets/images/icons/douyin.png" @click="skip('tiktok')" />
-				<img src="@/assets/images/icons/wechat.png" />
+				<img src="@/assets/images/icons/youtube.png" @click="skip('youtube')" />
-				<div class="text">© Code-Create 2026</div>
+				<div v-show="!isHome" class="text" @click="skip('code-create')">
+					© Code-Create 2026
+				</div>
 			</div>
 		</div>
 	</section>
@@ -23,6 +28,29 @@
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	const props = defineProps({
+		isHome: {
+			type: Boolean,
+			default: false
+		}
+	})
+	let urlList = ref({
+		xiaohongshu: 'https://xhslink.com/m/5Ony2FapizV',
+		linkedin: 'https://www.linkedin.com/company/code-create-limited/posts?feedView=all',
+		instagram: 'https://www.instagram.com/aida_codecreate?igsh=MzRlODBiNWFlZA==  ',
+		facebook: 'https://www.facebook.com/CodeCreateAI',
+		tiktok: 'https://www.tiktok.com/@aida_codecreate',
+		youtube: 'https://www.youtube.com/@Code-Create_AiDA',
+		'code-create': 'https://www.code-create.com/',
+		about: 'https://code-create.com.hk/about-us/ ',
+		'privacy-policy': 'https://code-create.com.hk/privacy-policy/',
+		'terms-of-use': 'https://code-create.com.hk/terms-of-use/',
+		disclaimer: 'https://code-create.com.hk/disclaimer/',
+		'site-map': 'https://code-create.com.hk/site-map/'
+	})
+	const skip = (name: string) => {
+		window.open(urlList.value[name], '_blank')
+	}
 </script>
 
 <style lang="less">
@@ -41,6 +69,9 @@
 				color: #585858;
 				display: flex;
 				gap: 4.5rem;
+				> div {
+					cursor: pointer;
+				}
 			}
 			> .right {
 				display: flex;
@@ -49,8 +80,9 @@
 					width: 2rem;
 					height: 2rem;
 					margin-left: 2rem;
+					cursor: pointer;
 				}
-				.text{
+				.text {
 					margin-left: 4rem;
 					font-family: KaiseiOpti-Regular;
 					font-size: 1.2rem;

src/lang/en.ts

@@ -245,7 +245,7 @@ export default {
 	brand: {
 		title: 'Brand',
 		description: "Every brand, every story — discover who's behind the collections.",
-		search: 'Search brand',
+		search: 'Enter a brand name...',
 		noFound: 'Brand No Found',
 		noFoundTip: 'Try using another keywords.',
 		searchHistory: 'Searching History',
@@ -358,7 +358,7 @@ export default {
 	addShoppingCart: {
 		title: 'Added to your Shopping Cart',
 		statement: 'Digital Assets Only. No physical product included.',
-		button: 'Set Shopping Cart'
+		button: 'See Shopping Cart'
 	},
 	area: {
 		chinaMainland: 'China Mainland',
@@ -375,5 +375,23 @@ export default {
 		germany: 'Germany',
 		australia: 'Australia',
 		canada: 'Canada'
+	},
+	Pay: {
+		OrderSummary: 'Order Summary',
+		PaymentDetails: 'Payment Details',
+		CreditDebitCard: 'Credit / Debit Card',
+		AgreementText: 'I agree to the <span onclick="{onTermsClick}">Terms & Conditions</span> and <span onclick="{onPrivacyClick}">Privacy Policy</span>. All digital item sales are final and non-refundable.',
+		PayWithStripe: 'Pay with Stripe',
+		PayWith: 'Pay with',
+		Cancel: 'Cancel',
+		IHaveCompletedPayment: 'I Have Completed payment',
+		Back: 'Back',
+		PayTip1: "You'll be redirected to a Stripe popup to log in and confirm. No card details are shared with Stylish Parade — Stripe handles all payment security.",
+		PayTip2: "Please keep the window open until the payment is completed. If you are to open the payment window, please check your browser settings to see if pop-ups are being blocked. Points may be delayed after successful payment. Please wait 1-3 minutes and click the credits refresh button.",
+		PurchaseSuccessful: "Purchase Successful",
+		PurchaseSuccessfulTip: "Your digital items are now available and have been saved in Personal Center → My Wardrobe.",
+		DownloadAllAssets: "download all Assets",
+		ExportInvoice: "Export Invoice",
+		ContinueShopping: "Continue Shopping"
 	}
 }

src/lang/zh-cn.ts

@@ -242,7 +242,7 @@ export default {
 	brand: {
 		title: '品牌',
 		description: '每一个品牌，每一个故事 — 发现系列作品背后的缔造者。',
-		search: '搜索品牌',
+		search: '输入一个品牌名字',
 		noFound: '未找到品牌',
 		noFoundTip: '请尝试使用其他关键词。',
 		searchHistory: '搜索历史',
@@ -376,5 +376,23 @@ export default {
 		AboutUs: '关于我们',
 		Offices: '办公室',
 		JoinWithUs: '加入我们'
+	},
+	Pay: {
+		OrderSummary: '订单信息',
+		PaymentDetails: '支付详情',
+		CreditDebitCard: '信用卡/借记卡',
+		AgreementText: '我同意 <span onclick="{onTermsClick}">使用条款与条件</span> 和 <span onclick="{onPrivacyClick}">隐私政策</span>。所有数字资产销售均为最终销售，不可退款。',
+		PayWithStripe: '使用 Stripe 支付',
+		PayWith: '支付',
+		Cancel: '取消',
+		IHaveCompletedPayment: '我已完成支付',
+		Back: '返回',
+		PayTip1: "您将被重定向到 Stripe 弹窗以登录并确认支付。您的信用卡信息不会被 Stylish Parade 收集。Stripe 处理所有支付安全。",
+		PayTip2: "请保持窗口打开，直到支付完成。如果您打开支付窗口，请检查浏览器设置以查看是否已阻止弹窗。支付完成后，积分可能会有延迟。请等待 1-3 分钟并点击积分刷新按钮。",
+		PurchaseSuccessful: "购买成功",
+		PurchaseSuccessfulTip: "您的数字资产已保存在个人中心的我的衣橱中。",
+		DownloadAllAssets: "下载所有资产",
+		ExportInvoice: "导出发票",
+		ContinueShopping: "继续购物"
 	}
 }

src/utils/tools.ts

@@ -211,7 +211,3 @@ export function FormatBytes(bytes, options: { decimals?: number, unitBig?: boole
 	const value = bytes / Math.pow(k, i);
 	return `${Number(value.toFixed(decimals))} ${sizes[i]}`;
 }
-
-export const openAida = () => {
-	window.open('https://www.aida.com.hk/', '_blank')
-}

src/views/digitalDetail/index.vue

@@ -116,7 +116,7 @@ defineExpose({})
 			<div class="img-list">
 				<div class="left">
 					<div class="title">{{ $t('digitalDetail.Sketch') }}</div>
-					<div class="box sketch">
+					<div class="box sketch" :class="{'active': sketchList.length == 1}">
 						<div class="imgBox">
 							<img :src="item?.imgUrl" v-for="item in sketchList" :key="item" alt="">
 						</div>
@@ -137,7 +137,7 @@ defineExpose({})
 							</div>
 						</div>
 					</div>
-					<div class="bottom">
+					<div class="bottom" v-if="editorialVisualList.length > 0">
 						<div class="box editorialVisual">
 							<div class="title">{{ $t('digitalDetail.EditorialVisual') }}</div>
 							<div class="imgBox">
@@ -254,14 +254,27 @@ defineExpose({})
 					&.sketch{
 						.imgBox{
 							flex-direction: column;
-							gap: 2rem;
+							gap: 4rem;
 							padding: 5rem 0;
 							img{
-								height: 20.4rem;
+								height: 26.4rem;
+								object-fit: contain;
 								width: auto;
 								margin: auto;
 							}
 						}
+						&.active{
+							width: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							aspect-ratio: 9 / 16;
+							img{
+								height: auto;
+								width: 20.1rem;
+								aspect-ratio: 9 / 16;
+							}
+						}
 					}
 					&.illustration{
 						display: flex;

src/views/digitalItem/commodity-list.vue

@@ -114,6 +114,7 @@ const {} = toRefs(data);
 		position: relative;
 		display: flex;
 		flex-direction: column;
+		margin-top: -1px;
 		.list{
 			width: 100%;
 			flex: 1;

src/views/digitalItem/index.vue

@@ -74,7 +74,7 @@ onUnmounted(()=>{
 defineExpose({})
 </script>
 <template>
-	<div class="digitalItem" ref="digitalItemRef">
+	<div class="digitalItem" :class="{'active': commodityListRef?.commodityList?.length > 0}" ref="digitalItemRef">
 		<div class="header-img">
 			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
 			<div class="text">
@@ -130,9 +130,12 @@ defineExpose({})
 <style lang="less" scoped>
 	.digitalItem{
 		width: 100%;
-		height: 100%;
+		height: auto;
 		position: relative;
 		overflow-y: auto;
+		&.active{
+			height: 100%;
+		}
 		.header-img{
 			width: 100%;
 			position: relative;
@@ -158,7 +161,7 @@ defineExpose({})
 					color: #585858;
 					font-size: 1.6rem;
 					line-height: 140%;
-					margin-top: 1.2rem;
+					margin-top: 2.4rem;
 					text-align: center;
 				}
 			}

src/views/digitalItem/merchant-info.vue

@@ -47,7 +47,7 @@ defineExpose({})
 		</div>
 		<div class="categories">{{ $t('digitalItem.MerchantInfo.Gender') }}</div>	
 		<div class="line"></div>
-		<div class="multiple">{{ gender }}
+		<div class="multiple">
 			<checked-gender :list="genderList" @change="handleChange" v-model:selected="gender" />
 		</div>
 	</div>

src/views/home/UrlList.js

@@ -0,0 +1,8 @@
+export const UrlList = {
+	aida: 'https://www.aida.com.hk/',
+	codeCreate: 'https://www.code-create.com/',
+
+}
+export const openView = (url) => {
+	window.open(url, '_blank')
+}

src/views/home/section-aida.vue

@@ -5,14 +5,14 @@
 			<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
 			<div class="title">{{ $t('Home.AidaTitle') }}</div>
 			<div class="tip">{{ $t('Home.AidaTip') }}</div>
-			<button custom @click="openAida">{{ $t('Home.TryNow') }}</button>
+			<button custom @click="openView(UrlList.aida)">{{ $t('Home.TryNow') }}</button>
 		</div>
 	</section>
 </template>
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
-	import { openAida } from '@/utils/tools'
+	import { UrlList, openView } from './UrlList'
 </script>
 
 <style lang="less">

src/views/home/section-footer.vue

@@ -3,13 +3,21 @@
 		<div class="content">
 			<div class="mate">
 				<div class="logos">
-					<img src="@/assets/images/logos/code-create-black.png" />
+					<img
+						src="@/assets/images/logos/code-create-black.png"
+						@click="openView(UrlList.codeCreate)"
+					/>
 					<img src="@/assets/images/logos/stylish-parade-black.png" />
-					<img src="@/assets/images/logos/aida-black.png" />
+					<img
+						src="@/assets/images/logos/aida-black.png"
+						@click="openView(UrlList.aida)"
+					/>
 				</div>
 				<div class="tip">{{ $t('Home.FooterTip') }}</div>
 				<div class="link">
-					<span class="text" @click="openAida">{{ $t('Home.FooterAidaTip') }}</span>
+					<span class="text" @click="openView(UrlList.aida)">{{
+						$t('Home.FooterAidaTip')
+					}}</span>
 					<span class="icon"><svg-icon name="arrow_right" size="12" /></span>
 				</div>
 			</div>
@@ -35,25 +43,16 @@
 				<div class="item">{{ $t('Home.JoinWithUs') }}</div>
 			</div>
 		</div>
-		<div class="footer">
+		<HomeFooter class="footer" isHome />
-			<div class="left">© Code-Create 2026</div>
-			<div class="right">
-				<img src="@/assets/images/icons/xiaohongshu.png" />
-				<img src="@/assets/images/icons/linkedin.png" />
-				<img src="@/assets/images/icons/instagram.png" />
-				<img src="@/assets/images/icons/facebook.png" />
-				<img src="@/assets/images/icons/douyin.png" />
-				<img src="@/assets/images/icons/wechat.png" />
-			</div>
-		</div>
 	</section>
 </template>
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
-	import { openAida } from '@/utils/tools'
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
+	import HomeFooter from '@/components/Footer.vue'
+	import { UrlList, openView } from './UrlList'
 </script>
 
 <style lang="less">
@@ -135,24 +134,8 @@
 			}
 		}
 		> .footer {
-			padding: 0 8rem;
+			border: none;
-			height: 7rem;
+			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			> .left {
-				font-family: KaiseiOpti-Regular;
-				font-size: 1.2rem;
-				color: #585858;
-			}
-			> .right {
-				display: flex;
-				> img {
-					width: 2rem;
-					height: 2rem;
-					margin-left: 1.6rem;
-				}
-			}
 		}
 	}
 </style>

src/views/pay/index.vue

@@ -2,7 +2,7 @@
 	<div class="pay">
 		<div class="content">
 			<payment :ids="ids" />
-			<sc-list title="Order Summary" is-view is-mini :list="list" />
+			<sc-list :title="$t('Pay.OrderSummary')" is-view is-mini :list="list" />
 		</div>
 		<my-footer />
 	</div>

src/views/pay/payment.vue

@@ -2,57 +2,47 @@
 	<div class="payment">
 		<div class="header" @click="onBack">
 			<span class="icon"><svg-icon name="back" size="30" /></span>
-			<span class="text">Payment Details</span>
+			<span class="text">{{ $t('Pay.PaymentDetails') }}</span>
 		</div>
 		<!-- 未支付 -->
 		<template v-if="paymentStatus !== ORDER_STATUS.SUCCESS">
 			<div class="paylist">
 				<div class="item">
 					<img src="@/assets/images/pay/stripe.png" alt="" />
-					<span>Credit / Debit Card</span>
+					<span>{{ $t('Pay.CreditDebitCard') }}</span>
 				</div>
 			</div>
 			<div class="agreement">
 				<el-checkbox v-model="agreement">
-					<div class="text">
+					<div class="text" v-html="$t('Pay.AgreementText')"></div
-						I agree to the <span>Terms & Conditions</span> and
+				></el-checkbox>
-						<span>Privacy Policy</span>. All digital item sales are final and
-						non-refundable.
-					</div></el-checkbox
-				>
 			</div>
 			<div class="title">
 				<span class="icon"><svg-icon name="card" size="20" /></span>
-				<span class="text">Pay with Stripe</span>
+				<span class="text">{{ $t('Pay.PayWithStripe') }}</span>
 			</div>
 			<template v-if="!query.paymentId">
-				<div class="tip">
+				<div class="tip">{{ $t('Pay.PayTip1') }}</div>
-					You'll be redirected to a Stripe popup to log in and confirm. No card details
-					are shared with Stylish Parade — Stripe handles all payment security.
-				</div>
 				<div class="buttons">
 					<button custom="black" @click="onPayWith">
-						<span class="text">Pay with</span>
+						<span class="text">{{ $t('Pay.PayWith') }}</span>
 						<span class="icon pay"><svg-icon name="pay-stripe" /></span>
 					</button>
 				</div>
 				<div class="buttons">
-					<span class="text" @click="onBack">Cancel</span>
+					<span class="text" @click="onBack">{{ $t('Pay.Cancel') }}</span>
 				</div>
 			</template>
 			<!-- 已支付，等待确认 -->
 			<template v-if="query.paymentId">
-				<div class="tip">
+				<div class="tip">{{ $t('Pay.PayTip2') }}</div>
-					Please keep the window open until the payment is completed. If you are to open
+				<div class="buttons">
-					the payment window, please check your browser settings to see if pop-ups are
+					<button custom="black" @click="getOrderStatus">
-					being blocked. Points may be delayed after successful payment. Please wait 1-3
+						{{ $t('Pay.IHaveCompletedPayment') }}
-					minutes and click the credits refresh button.
+					</button>
 				</div>
 				<div class="buttons">
-					<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
+					<span class="text" @click="onBack">{{ $t('Pay.Back') }}</span>
-				</div>
-				<div class="buttons">
-					<span class="text" @click="onBack">Back</span>
 				</div>
 			</template>
 		</template>
@@ -60,11 +50,8 @@
 		<template v-if="paymentStatus === ORDER_STATUS.SUCCESS">
 			<div class="success">
 				<img src="@/assets/images/pay/success.png" alt="" />
-				<div class="title">Purchase Successful!</div>
+				<div class="title">{{ $t('Pay.PurchaseSuccessful') }}</div>
-				<div class="tip">
+				<div class="tip">{{ $t('Pay.PurchaseSuccessfulTip') }}</div>
-					Your digital items are now available and have been saved in Personal Center → My
-					Wardrobe.
-				</div>
 			</div>
 
 			<div class="progres" v-if="downloadInfo.status !== DOWNLOAD_STATUS.null">
@@ -81,14 +68,16 @@
 				</el-progress>
 			</div>
 			<div class="buttons">
-				<button custom="black" @click="handleDownloadAllAssets">download all Assets</button>
+				<button custom="black" @click="handleDownloadAllAssets">
+					{{ $t('Pay.DownloadAllAssets') }}
+				</button>
 				<button custom="black-box">
 					<span class="icon"><svg-icon name="order-file" size="18" /></span>
-					<span class="text">Export Invoice</span>
+					<span class="text">{{ $t('Pay.ExportInvoice') }}</span>
 				</button>
 			</div>
 			<div class="buttons">
-				<span class="text" @click="onBack">Continue Shopping</span>
+				<span class="text" @click="onBack">{{ $t('Pay.ContinueShopping') }}</span>
 			</div>
 		</template>
 	</div>
@@ -195,6 +184,9 @@
 		}
 	})
 	const handleDownloadAllAssets = () => {
+		if (downloadInfo.value.status === DOWNLOAD_STATUS.dowloading) {
+			return
+		}
 		const ids = props.ids as string[]
 		downloadInfo.value.status = DOWNLOAD_STATUS.dowloading
 		downloadInfo.value.progress = 0

src/views/shopping-drawer.vue

@@ -42,7 +42,7 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer"  :close-on-click-modal="false" title="I am the title" :with-header="false">
+	<el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer"  :close-on-click-modal="true" title="I am the title" :with-header="false">
 		<div class="addShoppingInfo">
 			<div class="header">
 				<div class="title">{{ $t('addShoppingCart.title') }}</div>
@@ -74,7 +74,7 @@ const {} = toRefs(data);
 				</div>
 				<div class="statement">
 					<div class="icon">
-						<SvgIcon name="statement" size="16.6" />
+						<SvgIcon name="statement" size="20" />
 					</div>
 					{{ $t('addShoppingCart.statement') }}
 				</div>