调整支付交互

src/component/HomePage/renew.vue

@@ -31,11 +31,11 @@
 				{{ $t('Renew.title') }}
 			</div>
 			<div class="renew_detail">
-				<div class="name generalModelTitle">{{ current.title }}</div>
+				<div class="name generalModelTitle">{{ current?.title }}</div>
 				<div class="price_box">
 					<div class="price">
 						<sub>$</sub>
-						{{ current.price[current.type] }} <span>{{ current.unit[current.type] }}</span>
+						{{ current?.price[current?.type] }} <span>{{ current?.unit[current?.type] }}</span>
 					</div>
 					<div class="type" v-if="current.typeList.length > 1">
 						<label>
@@ -47,7 +47,30 @@
 							{{ $t('Renew.Yearly') }}
 						</label>
 					</div>
-					<div class="info">{{ current.info }}</div>
+					<div class="type payment">
+						<div class="text">{{ $t('Renew.Payment') }}:</div>
+						<label>
+							<input name="payment" type="radio" value="CreditCard" v-model="current.PaymentType" @change="setPaymentType('CreditCard')">
+							{{ $t('Renew.CreditCard') }}
+						</label>
+						<label>
+							<input name="payment" type="radio" value="Alipay" v-model="current.PaymentType" @change="setPaymentType('Alipay')">
+							{{ $t('Renew.Alipay') }}
+						</label>
+					</div>
+					<!-- <div class="autoRenewal">
+						<label>
+							{{ current.autoRenewal.text }} : 
+							<a-switch v-model:checked="current.autoRenewal.value" />
+						</label>
+					</div> -->
+					<div class="info">{{ current?.info }}</div>
+					<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
+						<label>
+							<input type="checkbox" v-model="clause">
+							<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
+						</label>
+					</div>
 				</div>
 				<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
 			</div>
@@ -68,6 +91,17 @@
 				Privacy Policy
 			</div>
 		</div>
+		<div class="mark_loading" v-show="isShowMark_">
+			<a-spin size="large" />
+		</div>
+		<div class="mark_loading" v-show="isShowMark" state="true">
+			<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
+			<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
+			<div class="mark_loading_title_box">
+				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
+				<div class="mark_loading_btn" @click="completePayment">OK</div>
+			</div>
+		</div>
 	</a-modal>
 	<payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
 </template>
@@ -78,6 +112,7 @@ import { message } from "ant-design-vue";
 import payMethod from "@/component/Pay/payMethod.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
+import { Https } from "@/tool/https";
 const md5 = require("md5");
 export default defineComponent({
     components: {
@@ -91,6 +126,13 @@ export default defineComponent({
 			renewModelMask:true,
 			pageWidth:'50%'
 		})
+		let payMethodData = reactive({
+			clause:false,
+			labelDisclaimer:null,
+			newWindow:null as any,
+			isShowMark:false,
+			isShowMark_:false,
+		})
 		let renewData = reactive({
 			personage:computed(()=>{
 			    return {
@@ -104,6 +146,7 @@ export default defineComponent({
 						year:t('Renew.HKDYear'),
 					},
 					type:'monthly',
+					PaymentType:'',
 					typeList:['monthly','year'],
 					info:'Tax, VAT not included.',
 				}
@@ -151,24 +194,85 @@ export default defineComponent({
 		const setPricType=(str:any)=>{
 			renewData.current.type = str
 		}
+		const setPaymentType = (str:any)=>{
+			renewData.current.PaymentType = str
+		}
 		const payment = ()=>{
-			let subscribeType = 'Year'
+			if(!payMethodData.clause){
-			if(renewData.current.type == 'monthly')subscribeType= 'Month'
+				let labelDisclaimer:any = payMethodData.labelDisclaimer
-			let data = {
+				if(!labelDisclaimer.classList.contains('animation')){
-				autoRenewal:true,//one_time为不自动续费
+					labelDisclaimer.classList.add('animation')
-				productName:'Subscription',
+					setTimeout(() => {
-				subscribeType,//yearly为年费，monthly为月费
+						labelDisclaimer.classList.remove('animation')
+					}, 1000);
+				}
+				return
 			}
-			renewData.payMethod.init(data)
+
+			let subscribeType = 'Year'
+			if(!renewData.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
+			if(renewData.current.type == 'monthly')subscribeType= 'Month'
+			// let data = {
+			// 	autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
+			// 	productName:'Subscription',
+			// 	subscribeType,//yearly为年费，monthly为月费
+			// }
+			let url = window.location.origin+'/paySucceed' 
+			let data = {
+				autoRenewal:renewData.current.PaymentType != 'Alipay',//false为不自动续费
+				productName:'Subscription',
+				quantity:1,
+				returnUrl:url,
+				subscribeType:subscribeType,//yearly为年费，monthly为月费
+				wallet:'ALIPAYHK',
+			}
+			let httpsUrl = Https.httpUrls.payStripe
+			payMethodData.isShowMark_ = true
+			Https.axiosPost(httpsUrl,data).then(
+				(rv: any) => {
+					var width = 800;
+					var height = 600;
+					var left = (screen.width - width) / 2;
+					var top = (screen.height - height) / 2;
+					payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
+					let herf = rv
+					if(payMethodData.newWindow){
+						payMethodData.newWindow.location.href = herf
+					}else{
+						// window.open(herf, '_blank');
+						window.location.href=herf;  
+					}
+					payMethodData.newWindow = null
+					payMethodData.isShowMark = true
+					payMethodData.isShowMark_ = false
+				}
+			).catch(res=>{
+				payMethodData.isShowMark_ = false
+			});
+
+			// renewData.payMethod.init(data)
+		}
+		const setPaidBack = ()=>{
+			payMethod.payMethodModel = false
+			payMethodData.isShowMark = false
+			payMethodData.clause = false
+		}
+		const completePayment = ()=>{
+			renew.renewModel = false
+			setPaidBack()
 		}
         return{
 			store,
 			...toRefs(renew),
 			...toRefs(renewData),
+			...toRefs(payMethodData),
 			init,
 			cancelDsign,
 			setPricType,
+			setPaymentType,
 			payment,
+			setPaidBack,
+			completePayment,
         }
     },
     data() {
@@ -194,7 +298,8 @@ export default defineComponent({
 		}
 		.renew_detail{
 			width: 58rem;
-			height: 53rem;
+			height: 60rem;
+			// height: 53rem;
 			border-radius: 3rem;
 			margin-bottom: 5rem;
 			border: 2px solid #000;
@@ -221,6 +326,11 @@ export default defineComponent({
 			}
 			.type{
 				display: flex;
+				> .text{
+					margin-right: 2rem;
+					// font-weight: 600;
+				}
+				
 				label{
 					display: flex;
 					align-items: center;
@@ -229,6 +339,14 @@ export default defineComponent({
 						margin-right: 1rem;
 					}
 				}
+				&.payment{
+					label{
+						margin-right: 1rem;
+						input{
+							margin-right: .5rem;
+						}
+					}
+				}
 				label:last-child{
 				    margin-right: 0rem;
 				}
@@ -242,8 +360,89 @@ export default defineComponent({
 		.login_footer_item_text:last-child{
 			margin-bottom: 0rem;
 		}
+		.payMethod_payAffirm_clause{
+			label{
+				cursor: pointer;
+				input{
+					margin-right: 1rem;
+					cursor: pointer;
+					vertical-align: middle;
+				}
+				span{
+					vertical-align: top;
+					a{
+						color: #000;
+						text-decoration: underline;
+					}
+				}
+			}
+			&.animation{
+				animation: shake .3s linear;
+				@keyframes shake {
+					0%{
+						transform: translateX(0px);
+					}
+					25%{
+						transform: translateX(-10px);
+					}
+					50%{
+						transform: translateX(10px);
+					}
+					75%{
+						transform: translateX(-10px);
+					}
+					100%{
+						transform: translateX(0px);
+					}
+				}
+			}
+		}
    }
-       
+   .mark_loading{
+		position: absolute;
+		z-index: 2;
+		background: #fff;
+		.mark_loading_title{
+		font-size: 3rem;
+		// text-decoration: underline;
+		font-weight: 600;
+		margin-bottom: 2rem;
+		// color: #fff;
+	}
+	.mark_loading_intro{
+		color: rgba(0, 0, 0, 0.6);
+		font-size: 1.4rem;
+		margin-bottom: 2rem;
+		text-align: center;
+		width: 80%;
+	}
+	.mark_loading_title_box{
+		display: flex;
+	}
+
+	.mark_loading_btn,.mark_loading_btn2{
+		// border: #000;
+		// color: #fff;
+		display: flex;
+		margin-top: 10px;
+		text-align: center;
+		border: 2px solid;
+		padding: 0 20px;
+		border-radius: 10px;
+		cursor: pointer;
+		padding: .3rem 4rem;
+		background: #39215b;
+		color: #fff;
+		border: none;
+		margin: 0 2rem;
+		align-items: center;
+	}
+	.mark_loading_btn2{
+		border: 2px solid #000;
+		color: #000;
+		background: rgba(0,0,0,0);
+	}
+	} 
 }
 
 </style>

src/component/Pay/payMethod.vue

@@ -39,7 +39,7 @@
 				<label class="payMethod_item">
 					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
 					<img src="../../assets/images/homePage/stripe.svg" alt="">
-					 <span>Stripe (Credit Card)</span>
+					 <span>Stripe ({{ $t('Renew.CreditCard') }}、{{ $t('Renew.Alipay') }})</span>
 				</label>
 				<label class="payMethod_item" v-show="$props.type == 'credits'">
 					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
@@ -79,7 +79,6 @@
 				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
 				<div class="mark_loading_btn" @click="completePayment">OK</div>
 			</div>
-			
 		</div>
 	</a-modal>
 
@@ -114,7 +113,7 @@ export default defineComponent({
 			pageWidth:'50%'
 		})
 		let payMethodData = reactive({
-			modeOfPayment:'paypal',
+			modeOfPayment:prop.type == 'credits'?'paypal':'stripe',
 			modeOfPaymentDetail:'ALIPAYHK',
 			labelDisclaimer:null,//dom
 			payAffirmData:{} as any,
@@ -146,7 +145,7 @@ export default defineComponent({
 			let url = window.location.origin+'/paySucceed' 
 			let payAffirmData = payMethodData.payAffirmData
 			let data = {
-				autoRenewal:true,//false为不自动续费
+				autoRenewal:payAffirmData.autoRenewal,//false为不自动续费
 				productName:payAffirmData.productName,
 				quantity:payAffirmData.quantity?payAffirmData.quantity:1,
 				returnUrl:url,
@@ -186,6 +185,7 @@ export default defineComponent({
 						// window.open(herf, '_blank');
 						window.location.href=herf;  
 					}
+					payMethodData.newWindow = null
 					payMethodData.isShowMark = true
 					payMethodData.isShowMark_ = false
 				}
@@ -197,7 +197,7 @@ export default defineComponent({
 			payMethod.payMethodModel = false
 			payMethodData.isShowMark = false
 			payMethodData.clause = false
-			payMethodData.modeOfPayment = 'paypal'
+			payMethodData.modeOfPayment = prop.type == 'credits'?'paypal':'stripe'
 			payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
 		}
 		const completePayment = ()=>{

src/lang/cn.ts

@@ -671,8 +671,12 @@ export default {
 	},
 	Renew:{
 		title:'根据您的需求选择最佳计划',
-		Monthly:'月',
+		Monthly:'月付',
-		Yearly:'年',
+		Yearly:'年付',
+		CreditCard:'信用卡',
+		Alipay:'支付宝',
+		Payment:'付款方式',
+		PleaseSelectPayment:'请选择支付方式',
 		SubscribeNow:'立即订阅',
 		PersonalVersion:'个人版',
 		HKDMonth:'HKD / 月',

src/lang/en.ts

@@ -672,6 +672,10 @@ export default {
 		title:'Select The Best Plan For Your Needs',
 		Monthly:'Monthly',
 		Yearly:'Yearly',
+		CreditCard:'Credit Card',
+		Alipay:'Alipay',
+		Payment:'Payment method',
+		PleaseSelectPayment:'Please select a payment method',
 		SubscribeNow:'Subscribe Now',
 		PersonalVersion:'Personal version',
 		HKDMonth:'HKD / Month',

src/views/HomeView/library.vue

@@ -1967,7 +1967,9 @@ export default defineComponent({
 								}
 								.content_body_header_right{
 									display: flex;
-									width: 43rem;
+									// width: 43rem;
+									width: auto;
+									margin-right: 2rem;
 								}
                                 .check_all_block{
                                     display: flex;