支付

src/lang/en.ts

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

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