语言适配

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

@@ -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>

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,7 +17,7 @@
 		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 = () => {
@@ -58,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,8 @@
 			<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
@@ -66,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>
@@ -85,6 +95,8 @@
 	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({
@@ -103,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'
 		}
 	])
@@ -177,7 +189,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()
@@ -365,6 +377,7 @@
 				height: 4.6rem;
 				--button-font-size: 1.4rem;
 				margin-top: 2rem;
+				text-transform: uppercase;
 			}
 		}
 	}