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="info">{{ current.info }}</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>
	</a-modal>
	<payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
</template>

<script lang="ts">
import { defineComponent,ref,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";
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 renewData = reactive({
			personage:{
				title:t('Renew.PersonalVersion'),
				price:{
					monthly:'500',
					year:'5,000',
				},
				unit:{
					monthly:t('Renew.HKDMonth'),
					year:t('Renew.HKDYear'),
				},
				type:'monthly',
				typeList:['monthly','year'],
				info:'Tax, VAT not included.',
			},
			firm:{
				title:'Education Edition',
				price:{
					year:'500',
				},
				unit:{
					year:'HKD / Year',
				},
				type:'year',
				typeList:['year'],
				info:'Customised plan',
			},
			education:{
				title:'Enterprise Edition',
				price:{
					year:'500',
				},
				unit:{
					year:'HKD / Year',
				},
				type:'year',
				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 payment = ()=>{
			let subscribeType = 'Year'
			if(renewData.current.type == 'monthly')subscribeType= 'Month'
			let data = {
				autoRenewal:true,//one_time为不自动续费
				productName:'Subscription',
				subscribeType,//yearly为年费，monthly为月费
			}
			renewData.payMethod.init(data)
		}
        return{
			store,
			...toRefs(renew),
			...toRefs(renewData),
			init,
			cancelDsign,
			setPricType,
			payment,
        }
    },
    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: 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;
				label{
					display: flex;
					align-items: center;
					margin-right: 3rem;
					input{
						margin-right: 1rem;
					}
				}
				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;
		}
   }
       
}

</style>