aida_front/src/component/HomePage/renew.vue

<template>
	<div class="renew" ref="renew"></div>
	<a-modal
		class="generalModel"
		:get-container="() => $refs.renew"
		v-model:visible="renewModel"
		:footer="null"
		width="130rem"
		height="auto"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="renewModelMask"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<!-- <i class="fi fi-rr-cross-small"></i> -->
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
		<div class="renewContent">
			<div class="left">
				<div class="title">Unlock the Pro Advantage</div>
				<div class="content">
					<div class="benefits">
						<div>Benefits</div>
						<div class="contrast">
							<div>Free</div>
							<div>PRO</div>
						</div>
					</div>
					<div class="benefitsItem">
						<div class="describe">
							<div class="icon">
								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
							</div>
							<div class="text">
								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
								<p class="info">More accurate answers with multiple latest AI models</p>
							</div>
						</div>
						<div class="contrast">
							<div>√</div>
							<div>×</div>
						</div>
					</div>
					<div class="benefitsItem">
						<div class="describe">
							<div class="icon">
								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
							</div>
							<div class="text">
								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
								<p class="info">More accurate answers with multiple latest AI models</p>
							</div>
						</div>
						<div class="contrast">
							<div>√</div>
							<div>×</div>
						</div>
					</div>
					<div class="benefitsItem">
						<div class="describe">
							<div class="icon">
								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
							</div>
							<div class="text">
								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
								<p class="info">More accurate answers with multiple latest AI models</p>
							</div>
						</div>
						<div class="contrast">
							<div>√</div>
							<div>×</div>
						</div>
					</div>
					<div class="benefitsItem">
						<div class="describe">
							<div class="icon">
								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
							</div>
							<div class="text">
								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
								<p class="info">More accurate answers with multiple latest AI models</p>
							</div>
						</div>
						<div class="contrast">
							<div>√</div>
							<div>×</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="title">
					{{ $t('Renew.title') }}
				</div>
				<div class="info">Get started today for unlimited access!</div>
				<div class="content">
					<div class="productItem" :class="{active:item.price == current.price,sellWell:item.sellWell}" v-for="item in personage" :key="item.price" @click="setPromotionData(item)">
						<div class="popular" v-show="item.sellWell">MOST POPULAR</div>
						<div class="priceBox">
							<div class="left">
								<p class="productType">1 {{ item.type.label }}</p>
								<p class="price">${{ item.price }}</p>
							</div>
							<div class="right">
								<div class="promotion">
									<div class="succeed" v-show="item.promotionData.error == 'true'">
										{{item.promotionData.code}}
										<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
									</div>
									<div class="input" @click.stop v-show="!item.promotionData.error || item.promotionData.error == 'false'">
										<input type="text" :placeholder="$t('Renew.promotionCode')" v-model="item.promotionData.code">
										<div style="cursor: pointer;" @click="examine(item)">{{ $t('Renew.use') }}</div>
									</div>
									<div class="error" v-show="item.promotionData.error == 'false'">{{item.promotionData.str}}</div>
								</div>
								<p class="discountsPrice" v-show="item.promotionData.price" style="text-align: center;">${{ item.promotionData.price }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="payment">
					<div class="allocation">
						<div class="selectType">
							<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>
					<div class="gallery_btn gallery_btn_radius" @click="payment">
						Continue
					</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 class="paySecure">
						<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
						<span>Pay safe & secure </span>
					</div> -->
				</div>
			</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>

<script lang="ts">
import { defineComponent,computed,reactive,toRefs ,onMounted} from "vue";
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: {
		payMethod,
    },
    setup(){
		const store = useStore();
		const {t} = useI18n()
		let renew = reactive({
			renewModel:false,
			renewModelMask:true,
			pageWidth:'50%'
		})
		let payMethodData = reactive({
			clause:false,
			labelDisclaimer:null as any,
			newWindow:null as any,
			isShowMark:false,
			isShowMark_:false,
		})
		let renewData = reactive({
			
			personage:[
					{
						price:'500',
						sellWell:true,
						activity:false,//活动打折
						type:{
							value:'Month',
							label:'Month',
						},
						PaymentType:'',
						promotionData:{
							code:'',
							error:'',
							str:'',
							price:'',
						},
					},
					{
						price:'5,000',
						sellWell:false,
						activity:false,//活动打折
						typeValue:'year',
						type:{
							value:'Year',
							label:'Year',
						},
						PaymentType:'',
						promotionData:{
							code:'',
							error:'',
							str:'',
							price:'',
						},
					},
				],
			// personage:computed(()=>{
			//     return {
			// 		title:t('Renew.PersonalVersion'),
			// 		price:{
			// 			monthly:'500',
			// 			year:'5,000',
			// 		},
			// 		unit:{
			// 			monthly:t('Renew.HKDMonth'),
			// 			year:t('Renew.HKDYear'),
			// 		},
			// 		type:'monthly',
			// 		PaymentType:'',
			// 		typeList:['monthly','year'],
			// 		info:'Tax, VAT not included.',
			// 	}
			// }),
			firm:computed(()=>{
			    return {
					title:'Education Edition',
					price:{
						year:'500',
					},
					unit:{
						year:'HKD / Year',
					},
					type:'year',
					autoRenewal:{
						text:t('Renew.automatically'),
						value:true,
					},
					typeList:['year'],
					info:'Customised plan',

				}
			}),
			education:computed(()=>{
			    return {
					title:'Enterprise Edition',
				price:{
					year:'500',
				},
				unit:{
					year:'HKD / Year',
				},
				type:'year',
				autoRenewal:{
					text:t('Renew.automatically'),
					value:true,
				},
				typeList:['year'],
				info:'Customised plan',
				}
			}),
			current:{

			} as any,	
			payMethod:null as any,
		})
		const init = ()=>{
			renew.renewModel = true
			renewData.current = renewData.personage[0]
		}
		const cancelDsign = () => {
			renew.renewModel = false
		}
		const setPaymentType = (str:any)=>{
			renewData.current.PaymentType = str
		}
		const payment = ()=>{
			if(!payMethodData.clause){
				let labelDisclaimer:any = payMethodData.labelDisclaimer
				if(!labelDisclaimer.classList.contains('animation')){
					labelDisclaimer.classList.add('animation')
					setTimeout(() => {
						labelDisclaimer.classList.remove('animation')
					}, 1000);
				}
				return
			}
			if(!renewData.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
			// 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:renewData.current.type.value,//yearly为年费，monthly为月费
				wallet:'ALIPAYHK',
				promotionCode:renewData.current.promotionData.code,				
			}
			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()
		}
		const examine = (item:any)=>{
			// renewData.promotionData.error
			let price = item?.price
			const normalNumber = Number(price.replace(/,/g, ''));
			if(!item.promotionData.code){
				return
			}
			let data = {
				promotionCode:item.promotionData.code,
				price:normalNumber,
			}
			Https.axiosGet(Https.httpUrls.checkCoupon,{params:data}).then((rv:any)=>{
				if(rv){
					renewData.personage.forEach((personageItem:any)=>{
						if(personageItem.price == item.price){
							if(rv.status == "valid"){
								item.promotionData.error = 'true'
								item.promotionData.price = (Number(rv.discountedPrice)).toLocaleString()
							}else{
								item.promotionData.error = 'false'
								item.promotionData.str = rv.message
							}
						}
					})
				}else{
				}
			})
		}
		const clearPromotionCode = ()=>{
			renewData.current.promotionData.error = '';
			renewData.current.promotionData.code = ''
			renewData.current.promotionData.price = ''
		}
		const setPromotionData = (item:any)=>{
			renewData.current = item
		}
        return{
			store,
			...toRefs(renew),
			...toRefs(renewData),
			...toRefs(payMethodData),
			init,
			cancelDsign,
			setPaymentType,
			payment,
			setPaidBack,
			completePayment,
			examine,
			clearPromotionCode,
			setPromotionData
        }
    },
    data() {
        return {
			
        };
    },
    methods: {
		turnToWindow(url:any) {
            window.open(url);
        },
    },
});
</script>
<style lang="less" scoped>
.renew {
	:deep(.ant-modal-body){
		padding: 0;
	}
   .renewContent{
		display: flex;
		border-radius: 3rem;
		overflow: hidden;
		> .left,> .right{
			> .title{
				text-align: center;
				font-size: 3.2rem;
				font-weight: 600;
				line-height: 4rem;
			}
			> .info{
				text-align: center;
				opacity: .6;
				font-weight: 400;
				margin-top: .8rem;
				font-size: 1.6rem;
			}
			> .content{
				margin-top: 2rem;
				display: flex;
				flex-direction: column;
			}
		}
		> .left{
			width: 60%;
			background: #0f0f0f;
			color: #fff;
			padding: 4rem 3.2rem;
			> .title{
				opacity: .6;
			}
			> .content{
				> .benefits,> .benefitsItem{
					display: flex;
					> .contrast{
						margin-left: auto;
						display: flex;
						align-items: center;
						> div{
							width: 8rem;
							text-align: center;
						}
						> div:nth-child(1){
							margin-right: 2.4rem;
							opacity: .5;
						}
						> div:nth-child(2){
							opacity: 1;
							color: #38c793;
							text-shadow: 0 4px 27.1px #38c793b3;
						}
					}
				}
				> .benefits{
					> div:nth-child(1){
						opacity: .5;
					}
					font-weight: 600;
					font-size: 2rem;
					margin: 1rem 0;
					padding: 0 1.6rem;
				}
				> .benefitsItem{
					border: 1px solid #27272a;
					border-radius: 2.4rem;
					margin-bottom: 1.6rem;
					padding: 1.6rem;
					> .describe{
						display: flex;
						align-items: center;
						> .icon{
							border: 1px solid #27272a;
							background: linear-gradient(#1d1d1d,#000);
							border-radius: 1.4rem;
							margin-right: 1.6rem;
							padding: 1.4rem;
							> img{
								width: 3.5rem;
								height: 3.5rem;
							}
						}
						> .text{
							> p{
								margin: 0;
							}
							> .title{
								font-size: 1.8rem;
								font-weight: 600;
							}
							> .info{
								font-weight: 400;	
								margin-top: .4rem;
								font-size: 1.6rem;
								opacity: .5;
							}
						}
					}
				}
			}
		}
		> .right{
			width: 40%;	
			flex-direction: column;
			align-items: center;
			padding: 4rem 3.2rem;
			> .content{
				margin-top: 2rem;
				> .productItem{
					margin-bottom: 1rem;
					border-radius: 1rem;
					overflow: hidden;
					border: 2px solid #eaecf0;
					
					> .popular{
						background: #2d9f75;
						font-weight: 600;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						padding: .8rem 1.2rem;
					}
					> .priceBox{
						height: 11rem;
						padding: 1rem 1.2rem;
						display: flex;
						justify-content: space-between;
						align-items: center;
						> .left,> .right{
							p{
								margin: 0;
							}
							> .discountsPrice ,> .price{
								font-size: 1.8rem;
								margin-top: .4rem;
								opacity: .4;
								font-weight: 500;
							}
						}
						> .left{
							> p:nth-child(1){
								font-size: 2rem;
								opacity: .7;
								font-weight: 700;
							}
						}
						> .right{
							> .promotion{
								display: flex;
								align-items: center;
								flex-direction: column;
								> .text{
									font-size: 1.4rem;
									font-weight: 600;
									margin-right: 2rem;
								}
								> .succeed{
									padding: 1rem;
									display: flex;
									align-items: center;
									border-radius: 1rem;
									background: #eee;
									// color: #fff;
									// font-weight: 600;
									> i{
										display: flex;
										margin-left: 1rem;
										cursor: pointer;
									}
								}
								> .input{
									display: flex;
									align-items: center;
									border-radius: 2rem;
									border: 2px solid #000;
									overflow: hidden;
									padding: 0 1rem;
									input{
										border: none;
										height: 3rem;
										width: 10rem;
										font-size: 1.2rem;
										background: rgba(0, 0, 0, 0);
									}
								}
								> .error{
									color: red;
									text-align: center;
									font-size: 1.2rem;
								}
							}
							> .discountsPrice{
								font-weight: 600;
								color: red;
							}
						}
					}
					&.active{
						background: #0ea98233;
						border: 2px solid #0ea982;
						> .priceBox{
							> .left{
								> p:nth-child(1){
									opacity: 1;
								}
							}
							> .right{
								> .discountsPrice{
									opacity: 1;
								}
							}
						}
					}
					&.sellWell{
						border: 2px solid #0ea982;
					}
				}
				> .productItem:last-child{
					margin-bottom: 2rem;
				}
			}
			> .payment{
				margin-top: auto;
				> .allocation{
					// border-radius: 1rem;
					// border: 2px solid #eaecf0;
					// padding: 1rem 1.2rem;
					
					> .selectType{
						display: flex;
						> .text{
							font-size: 1.4rem;
							font-weight: 600;
							margin-right: 2rem;
						}
						label{
							margin-right: 1rem;
							display: flex;
							cursor: pointer;
							input{
								margin-right: .5rem;
							}
						}
					}
				}
				
				> .gallery_btn{
					width: 100%;
					margin: 2rem 0;
					margin-top: 1rem;
				}
				> .payMethod_payAffirm_clause{
					label{
						input{
							margin-right: 1rem;
							cursor: pointer;
							vertical-align: middle;
						}
						span{
							vertical-align: top;
							font-size: 1.4rem;
							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);
							}
						}
					}
				}
				// > .paySecure{
				// 	display: flex;
				// 	margin-top: 1rem;
				// 	> svg{
				// 		width: 1.6rem;
				// 		height: 1.6rem;
				// 	}
				// 	> span{
				// 		font-weight: 600;
				// 		font-size: 1.4rem;
				// 	}
				// }
			}
		}
		// .login_footer_item_text{
		// 	text-align: center;
		// 	margin-bottom: 1.5rem;
		// 	text-decoration: underline;
		// }
		// .login_footer_item_text:last-child{
		// 	margin-bottom: 0rem;
		// }
   }
   .mark_loading{
		position: absolute;
		z-index: 2;
		background: #fff;
		border-radius: 3rem;
		.mark_loading_title{
		font-size: 3rem;
		// text-decoration: underline;
		font-weight: 600;
		margin-bottom: 2rem;
		overflow: hidden;
		// 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>