卖家端多语言

src/views/SellerDashboard/Settings/index.vue

@@ -2,11 +2,11 @@
 	<div class="settings-index">
 		<div>
 			<div class="notification">
-				<div class="header">Notifications</div>
+				<div class="header">{{ $t("Seller.notifications") }}</div>
 				<div class="content">
 					<div class="left">
-						<div class="title">New order notification</div>
-						<div class="tip">Receive an inbox message when a new order is placed.</div>
+						<div class="title">{{ $t("Seller.notificationsTitle") }}</div>
+						<div class="tip">{{ $t("Seller.notificationsTip") }}</div>
 					</div>
 					<div class="right">
 						<a-switch v-model:checked="checked" />
@@ -14,29 +14,29 @@
 				</div>
 			</div>
 			<div class="payout">
-				<div class="header">Payout</div>
+				<div class="header">{{ $t("Seller.payout") }}</div>
 				<div class="content">
 					<div class="header">
-						<div class="title">Payment Providers</div>
-						<div class="tip">Select how you want to receive payments.</div>
+						<div class="title">{{ $t("Seller.payoutTitle") }}</div>
+						<div class="tip">{{ $t("Seller.payoutTip") }}</div>
 					</div>
 					<div class="pay-item" v-for="v in payList" :key="v.type">
 						<div class="left">
 							<img :src="v.icon" />
-							<div class="value">{{ v.value || "Unbound" }}</div>
+							<div class="value">{{ v.value || $t("Seller.unbound") }}</div>
 						</div>
 						<div class="right">
-							<button v-if="v.value" class="manage">Manage</button>
-							<button v-else class="bind-now">Bind Now</button>
+							<button v-if="v.value" class="manage">{{ $t("Seller.manage") }}</button>
+							<button v-else class="bind-now">{{ $t("Seller.bindNow") }}</button>
 						</div>
 					</div>
 					<div class="footer">
 						<div class="left">
-							<div class="title">Payment Currency</div>
-							<div class="tip">HKD - Hong Kong Dollar</div>
+							<div class="title">{{ $t("Seller.paymentCurrency") }}</div>
+							<div class="tip">{{ $t("Seller.HKD") }}</div>
 						</div>
 						<div class="right">
-							<button>Fixed</button>
+							<button>{{ $t("Seller.fixed") }}</button>
 						</div>
 					</div>
 				</div>
@@ -44,40 +44,32 @@
 		</div>
 		<div>
 			<div class="data-privacy">
-				<div class="header">Data & Privacy</div>
+				<div class="header">{{ $t("Seller.dataPrivacy") }}</div>
 				<div class="content">
-					<div class="title">Copyright licence</div>
-					<div class="tip">
-						A licence certificate is automatically included with every purchase
-						download. View the default licensing terms applied to your listings.
-					</div>
-					<div class="tip">
-						This licence is issued by Code-Create and is legally binding upon purchase.
-						It certifies the buyer's right to use the purchased design asset in
-						accordance with the terms below.
-					</div>
-					<div class="tip">
-						For custom licensing arrangements, <span>contact us</span>.
-					</div>
+					<div class="title">{{ $t("Seller.dataPrivacyTitle") }}</div>
+					<div class="tip">{{ $t("Seller.dataPrivacyTip1") }}</div>
+					<div class="tip">{{ $t("Seller.dataPrivacyTip2") }}</div>
+					<div
+						class="tip"
+						v-html="
+							$t('Seller.dataPrivacyTip3', { click: 'onSellerSettingsContactUs' })
+						"
+					></div>
 					<div class="btns">
-						<button>
+						<button @click="onDownloadDataPrivacy">
 							<span class="icon"><svg-icon name="seller-download" size="14" /></span>
-							<span class="label">Download to View</span>
+							<span class="label">{{ $t("Seller.downloadToView") }}</span>
 						</button>
 					</div>
 				</div>
 			</div>
 			<div class="stop">
-				<div class="header">Stop Selling</div>
+				<div class="header">{{ $t("Seller.stopSelling") }}</div>
 				<div class="content">
-					<div class="title">Deactivate seller account</div>
-					<div class="tip">
-						Permanently deactivate your seller account. All listings and invoice records
-						will be deleted. You may re-register as a seller in the future, but your
-						previous sales data cannot be recovered.
-					</div>
+					<div class="title">{{ $t("Seller.stopSellingTitle") }}</div>
+					<div class="tip">{{ $t("Seller.stopSellingTip") }}</div>
 					<div class="btns">
-						<button>Deactivate</button>
+						<button @click="onStopSelling">{{ $t("Seller.deactivate") }}</button>
 					</div>
 				</div>
 			</div>
@@ -87,10 +79,14 @@
 
 <script setup>
 	import { ref } from "vue"
+	import { Modal } from "ant-design-vue"
 	import paypal from "@/assets/images/seller/setting/paypal.png"
 	import stripe from "@/assets/images/seller/setting/stripe.png"
 	import alipayHk from "@/assets/images/seller/setting/alipay-hk.png"
 	import alipayChinese from "@/assets/images/seller/setting/alipay-chinese.png"
+	import { useI18n } from "vue-i18n"
+	const { t } = useI18n()
+
 	const checked = ref(true)
 	const payList = ref([
 		{
@@ -114,6 +110,24 @@
 			value: "123123"
 		}
 	])
+	window.onSellerSettingsContactUs = () => {
+		console.log("contact us")
+	}
+	const onDownloadDataPrivacy = () => {
+		console.log("download data privacy")
+	}
+	const onStopSelling = () => {
+		Modal.confirm({
+			title: t("Seller.stopSellingTitle"),
+			content: t("Seller.stopSellingTip"),
+			okText: t("Seller.confirm"),
+			cancelText: t("Seller.cancel"),
+			centered: true,
+			onOk() {
+				console.log("stop selling")
+			}
+		})
+	}
 </script>
 <style scoped lang="less">
 	.settings-index {
@@ -281,7 +295,7 @@
 					font-size: 1.4rem;
 					color: #999;
 					margin-bottom: 3rem;
-					> span {
+					&:deep(*) {
 						cursor: pointer;
 						text-decoration: underline;
 						color: #0080ed;