fix
This commit is contained in:
X1627315083
240
src/component/HomePage/renew.vue
Normal file
240
src/component/HomePage/renew.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<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">
|
||||
Select The Best Plan For Your Needs
|
||||
</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')">
|
||||
Monthly
|
||||
</label>
|
||||
<label>
|
||||
<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
|
||||
Yearly
|
||||
</label>
|
||||
</div>
|
||||
<div class="info">{{ current.info }}</div>
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">Subscribe Now</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"></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";
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
payMethod,
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
let renew = reactive({
|
||||
renewModel:false,
|
||||
renewModelMask:true,
|
||||
pageWidth:'50%'
|
||||
})
|
||||
let renewData = reactive({
|
||||
personage:{
|
||||
title:'Personal version',
|
||||
price:{
|
||||
monthly:'500',
|
||||
year:'5,000',
|
||||
},
|
||||
unit:{
|
||||
monthly:'HKD / Month',
|
||||
year:'HKD / Year',
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user