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

src/views/shoppingCart/order-summary.vue

@@ -1,33 +1,35 @@
 <template>
 	<div class="order-summary">
-		<div class="title">Order Summary</div>
+		<div class="title">{{ $t('ShoppingCart.orderSummary') }}</div>
 		<div class="count">
-			<span class="label">Selected</span>
+			<span class="label">{{ $t('ShoppingCart.selected') }}</span>
 			<span class="value">{{ brandsList.length }}</span>
 		</div>
 		<div class="hr"></div>
 		<div class="brands-header">
 			<span class="icon"><svg-icon name="order-shop" size="24" /></span>
-			<span class="text">Brands</span>
+			<span class="text">{{ $t('ShoppingCart.brands') }}</span>
 		</div>
 		<div class="brands-item" v-for="v in brandsList" :key="v.brand">
 			<span class="label">{{ v.brand }}</span>
 			<span class="value"
 				><span>{{ v.children.length }}</span
-				>item</span
+				>{{ $t('ShoppingCart.item') }}</span
 			>
 		</div>
 		<br />
 		<br />
 		<div class="total">
-			<span class="label">Total</span>
+			<span class="label">{{ $t('ShoppingCart.total') }}</span>
 			<span class="value"
 				><span>${{ totalAmount }}</span> HKD</span
 			>
 		</div>
 		<div class="hr"></div>
-		<button class="checkout-btn" custom="black" @click="handleCheckout">CHECKOUT SELECTED</button>
-		<div class="tip">Digital assets. Creator retains copyright.</div>
+		<button class="checkout-btn" custom="black" @click="handleCheckout">
+			{{ $t('ShoppingCart.checkoutSelected') }}
+		</button>
+		<div class="tip">{{ $t('ShoppingCart.digitalAssets') }}</div>
 	</div>
 </template>
 
@@ -162,6 +164,7 @@
 		> .checkout-btn {
 			width: 100%;
 			margin-top: 3rem;
+			text-transform: uppercase;
 		}
 		> .tip {
 			margin-top: 1rem;

src/views/shoppingCart/sc-item.vue

@@ -10,7 +10,7 @@
 		<img :src="info.cover" />
 		<div class="content">
 			<div class="title">{{ info.title }}</div>
-			<div class="brand" v-if="showBrand">
+			<div class="brand" v-if="showBrand" @click="handleBrandClick">
 				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
 				<span class="text">{{ info.brand }}</span>
 			</div>
@@ -19,7 +19,7 @@
 			</div>
 			<div class="date" v-if="showDate">
 				<div class="text">
-					{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
+					{{ FormatDate(info.date, $t('ShoppingCart.dateTimeFormat')) }}
 				</div>
 			</div>
 		</div>
@@ -27,9 +27,9 @@
 			<div class="unshelve" v-show="disabled">
 				<div class="title">
 					<span><svg-icon name="order-warning" size="20" /></span>
-					No Longer Available
+					{{ $t('ShoppingCart.noLongerAvailable') }}
 				</div>
-				<div class="tip">Delisted from marketplace</div>
+				<div class="tip">{{ $t('ShoppingCart.delistedFromMarketplace') }}</div>
 			</div>
 			<div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div>
 			<SvgIcon
@@ -41,7 +41,7 @@
 			/>
 			<div class="remove" v-if="showRemove" @click="onRemove">
 				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
-				<span class="text">Remove</span>
+				<span class="text">{{ $t('ShoppingCart.remove') }}</span>
 			</div>
 		</div>
 	</div>
@@ -49,7 +49,9 @@
 
 <script setup lang="ts">
 	import { computed, ref, onMounted } from 'vue'
-	import { FormatBytes, FormatDate } from '@/utils/tools'
+	import { FormatDate } from '@/utils/tools'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
 	const emit = defineEmits(['remove'])
 	const props = defineProps({
 		showTags: { type: Boolean, default: true },
@@ -67,6 +69,7 @@
 				date: string
 				amount: number
 				cover: string
+				sellerId: string
 			},
 			default: () => {}
 		},
@@ -79,6 +82,12 @@
 	const showDownload = computed(() => {
 		return props.isOrder ? props.info.status === 1 : props.orderActionsLayout
 	})
+	const handleBrandClick = () => {
+		router.push({
+			name: 'brand',
+			params: { id: props.info.sellerId }
+		})
+	}
 </script>
 
 <style lang="less" scoped>
@@ -111,6 +120,7 @@
 			> .brand {
 				display: flex;
 				align-items: center;
+				cursor: pointer;
 				> .icon {
 					width: 2.4rem;
 					height: 2.4rem;

src/views/shoppingCart/sc-list-null.vue

@@ -4,7 +4,9 @@
 		<img v-else-if="nullImage === 'brand'" src="@/assets/images/brand-null.png" />
 		<div class="title">{{ title }}</div>
 		<div class="tip">{{ tip }}</div>
-		<button custom v-show="showButton" @click="handleClick">{{ buttonText }}</button>
+		<button custom v-show="showButton" @click="handleClick">
+			{{ buttonText || $t('ShoppingCart.exploreDigitalItems') }}
+		</button>
 	</div>
 </template>
 
@@ -15,11 +17,10 @@
 		title: { type: String, default: '' },
 		tip: { type: String, default: '' },
 		showButton: { type: Boolean, default: true },
-		buttonText: { type: String, default: 'EXPLORE DIGITAL ITEMS' }
+		buttonText: { type: String, default: '' }
 	})
 	const emit = defineEmits(['explore'])
 	const handleClick = () => {
-		console.log('emit("explore")')
 		emit('explore')
 	}
 </script>
@@ -59,6 +60,7 @@
 			font-size: 1.6rem;
 			color: #979797;
 			margin-top: 3rem;
+			text-transform: uppercase;
 		}
 	}
 </style>

src/views/shoppingCart/sc-list.vue

@@ -3,7 +3,7 @@
 	<div class="sc-list" :class="{ mini: isMini, view: isView }">
 		<div class="header">
 			<div class="title">
-				<span class="text">{{ title || 'Shopping Cart' }}</span>
+				<span class="text">{{ title || $t('ShoppingCart.title') }}</span>
 				<span class="close" v-if="isMini && !isView" @click="onClose"
 					><svg-icon name="close" size="13"
 				/></span>
@@ -15,22 +15,32 @@
 						:indeterminate="selectedCount === 0 ? false : selectedCount < maxLength"
 						@click="handleAllAllClick"
 					/>
-					<span class="count">{{ selectedCount }}&nbsp;&nbsp;Selected</span>
+					<span class="count">{{
+						$t('Wardrobe.assets.selectedCount', { count: selectedCount })
+					}}</span>
 					<div class="hr"></div>
-					<div class="btn" @click="handleAllAllClick(true)">Select All</div>
-					<div class="btn" @click="handleAllAllClick(false)">Deselect All</div>
+					<div class="btn" @click="handleAllAllClick(true)">
+						{{ $t('Wardrobe.assets.selectAll') }}
+					</div>
+					<div class="btn" @click="handleAllAllClick(false)">
+						{{ $t('Wardrobe.assets.deselectAll') }}
+					</div>
 				</div>
 				<div class="right">
-					<el-select v-model="sortBy" placeholder="Sort By" :teleported="false">
+					<el-select
+						v-model="sortBy"
+						:placeholder="$t('Wardrobe.sort.label')"
+						:teleported="false"
+					>
 						<template #label="{ label }">
-							<span class="header-label">Sort By</span>
-							<span class="header-value">{{ label }}</span>
+							<span class="header-label">{{ $t('Wardrobe.sort.label') }}</span>
+							<span class="header-value">{{ $t(label) }}</span>
 						</template>
 						<el-option
 							v-for="item in sortByOptions"
 							:key="item.label"
 							:value="item.value"
-							:label="item.label"
+							:label="$t(item.label)"
 						/>
 					</el-select>
 				</div>
@@ -40,8 +50,9 @@
 			<sc-list-null
 				v-show="list.length === 0"
 				:show-button="!isMini"
-				title="Your Cart is empty"
-				tip="Discover new fashion assets and add them to your cart."
+				:title="$t('ShoppingCart.listNullTitle')"
+				:tip="$t('ShoppingCart.listNullTip')"
+				@explore="handleExplore"
 			/>
 			<sc-item
 				v-for="v in list"
@@ -65,12 +76,12 @@
 		</div>
 		<div class="footer" v-if="isMini">
 			<div class="total" v-show="list.length > 0 || isView">
-				<span class="label">Total</span>
+				<span class="label">{{ $t('ShoppingCart.total') }}</span>
 				<span class="value">${{ allAmount }}<span> HKD</span></span>
 			</div>
 
-			<div class="tip" v-if="isView">Digital assets. Creator retains copyright.</div>
-			<button custom="black" v-if="!isView">CHECKOUT</button>
+			<div class="tip" v-if="isView">{{ $t('ShoppingCart.digitalAssets') }}</div>
+			<button custom="black" v-if="!isView">{{ $t('ShoppingCart.checkout') }}</button>
 		</div>
 	</div>
 </template>
@@ -83,6 +94,10 @@
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	import scItem from './sc-item.vue'
 	import scListNull from './sc-list-null.vue'
+	import { useRouter } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	const { t } = useI18n()
+	const router = useRouter()
 	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
 		title: { type: String, default: '' },
@@ -100,19 +115,19 @@
 	const sortBy = ref('DateAdded')
 	const sortByOptions = ref([
 		{
-			label: 'Best Selling',
+			label: 'digitalItem.BestSelling',
 			value: 'BestSelling'
 		},
 		{
-			label: 'Price: Low to High',
+			label: 'digitalItem.Price',
 			value: 'PriceLowToHigh'
 		},
 		{
-			label: 'Selected First',
+			label: 'digitalItem.SelectedFirst',
 			value: 'SelectedFirst'
 		},
 		{
-			label: 'Date Added',
+			label: 'digitalItem.DateAdded',
 			value: 'DateAdded'
 		}
 	])
@@ -126,7 +141,9 @@
 			return list_.value.filter(() => true).sort((a, b) => a.amount - b.amount)
 		}
 		if (sortBy.value === 'SelectedFirst') {
-			return list_.value.filter(() => true).sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
+			return list_.value
+				.filter(() => true)
+				.sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
 		}
 		if (sortBy.value === 'DateAdded') {
 			return list_.value.filter(() => true).sort((a, b) => b.date - a.date)
@@ -142,6 +159,7 @@
 					listingId: v.listingId, //资产ID
 					title: v.title, //标题
 					brand: v.shopName, //店铺名称
+					sellerId: v.sellerId, //店铺ID
 					cover: v.cover, //封面
 					amount: v.price, //价格
 					status: v.status, //状态
@@ -172,7 +190,7 @@
 		handleSelectedChange()
 	})
 	const handleRemoveClick = (value: any) => {
-		ElMessageBox.confirm('Are you sure to remove this item?')
+		ElMessageBox.confirm(t('ShoppingCart.removeTip'))
 			.then(() => {
 				RemoveShoppingCartItem({ listingId: value.listingId }).then(() => {
 					GetList()
@@ -180,8 +198,8 @@
 			})
 			.catch(() => {})
 	}
-	const handleExploreClick = () => {
-		console.log('探索')
+	const handleExplore = () => {
+		router.push({ name: 'brand' })
 	}
 </script>
 
@@ -360,6 +378,7 @@
 				height: 4.6rem;
 				--button-font-size: 1.4rem;
 				margin-top: 2rem;
+				text-transform: uppercase;
 			}
 		}
 	}