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="pageWidth"
		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="generalModelTitle">
				{{ $t('Renew.title') }}
			</div>
			<div class="renew_detail">
				<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>
					</div>
					<div class="type" v-if="current.typeList.length > 1">
						<label>
							<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
							{{ $t('Renew.Monthly') }}
						</label>
						<label>
							<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
							{{ $t('Renew.Yearly') }}
						</label>
					</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>
			<div
				class="login_footer_item_text"
				@click="turnToWindow(
					'https://code-create.com.hk/aida-terms-and-conditions/'
				)"
			>
				Terms&Conditions
			</div>
			<div
				class="login_footer_item_text"
				@click="turnToWindow(
					'https://code-create.com.hk/aida-subscription-agreement/'
				)"
			>
				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>

<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,
			newWindow:null as any,
			isShowMark:false,
			isShowMark_:false,
		})
		let renewData = reactive({
			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
		}
		const cancelDsign = () => {
			renew.renewModel = false
		}
		const setPricType=(str:any)=>{
			renewData.current.type = str
		}
		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
			}

			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() {
        return {
			
        };
    },
    methods: {
		turnToWindow(url:any) {
            window.open(url);
        },
    },
});
</script>
<style lang="less" scoped>
.renew {
   .renewContent{
	display: flex;
    flex-direction: column;
    align-items: center;
		.generalModelTitle{
			text-align: center;
		}
		.renew_detail{
			width: 58rem;
			height: 60rem;
			// height: 53rem;
			border-radius: 3rem;
			margin-bottom: 5rem;
			border: 2px solid #000;
			padding: 6rem 3rem 5rem;
			display: flex;
			flex-direction: column;
			.price_box{
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				justify-content: space-between;
				margin-bottom: 3rem;
			}
			.price{
				font-size: 6rem;
				sub{
					font-size: 2rem;
					top: -3rem;
				}
				span{
					font-size: 2rem;
				}
			}
			.type{
				display: flex;
				> .text{
					margin-right: 2rem;
					// font-weight: 600;
				}
				
				label{
					display: flex;
					align-items: center;
					margin-right: 3rem;
					input{
						margin-right: 1rem;
					}
				}
				&.payment{
					label{
						margin-right: 1rem;
						input{
							margin-right: .5rem;
						}
					}
				}
				label:last-child{
				    margin-right: 0rem;
				}
			}
		}
		.login_footer_item_text{
			text-align: center;
			margin-bottom: 1.5rem;
			text-decoration: underline;
		}
		.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>