支付

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">
-						I agree to the <span>Terms & Conditions</span> and
-						<span>Privacy Policy</span>. All digital item sales are final and
-						non-refundable.
-					</div></el-checkbox
-				>
+					<div class="text" v-html="$t('Pay.AgreementText')"></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">
-					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="tip">{{ $t('Pay.PayTip1') }}</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">
-					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.
+				<div class="tip">{{ $t('Pay.PayTip2') }}</div>
+				<div class="buttons">
+					<button custom="black" @click="getOrderStatus">
+						{{ $t('Pay.IHaveCompletedPayment') }}
+					</button>
 				</div>
 				<div class="buttons">
-					<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
-				</div>
-				<div class="buttons">
-					<span class="text" @click="onBack">Back</span>
+					<span class="text" @click="onBack">{{ $t('Pay.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="tip">
-					Your digital items are now available and have been saved in Personal Center → My
-					Wardrobe.
-				</div>
+				<div class="title">{{ $t('Pay.PurchaseSuccessful') }}</div>
+				<div class="tip">{{ $t('Pay.PurchaseSuccessfulTip') }}</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>