544 lines
14 KiB
Vue
544 lines
14 KiB
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 promotion">
|
||
<div class="text">{{ $t('Renew.promotionCode') }}:</div>
|
||
<div class="succeed" v-show="promotionData.error == 'true'">
|
||
{{promotionData.code}}
|
||
<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
|
||
</div>
|
||
<div class="input" v-show="!promotionData.error || promotionData.error == 'false'">
|
||
<input type="text" v-model="promotionData.code">
|
||
<div style="cursor: pointer;" @click="examine">{{ $t('Renew.use') }}</div>
|
||
</div>
|
||
<div class="error" v-show="promotionData.error == 'false'">{{promotionData.str}}</div>
|
||
</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({
|
||
promotionData:{
|
||
code:'',
|
||
error:'',
|
||
str:'',
|
||
oldPrice:'',
|
||
},
|
||
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',
|
||
promotionCode:renewData.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 = ()=>{
|
||
// renewData.promotionData.error
|
||
let price = renewData.current?.price[renewData.current?.type]
|
||
const normalNumber = Number(price.replace(/,/g, ''));
|
||
if(!renewData.promotionData.code){
|
||
return
|
||
}
|
||
let data = {
|
||
promotionCode:renewData.promotionData.code,
|
||
price:normalNumber,
|
||
}
|
||
Https.axiosGet(Https.httpUrls.checkCoupon,{params:data}).then((rv:any)=>{
|
||
if(rv){
|
||
if(rv.status == "valid"){
|
||
renewData.promotionData.error = 'true'
|
||
renewData.promotionData.oldPrice = renewData.current?.price[renewData.current?.type]
|
||
renewData.current.price[renewData.current.type] = (Number(rv.discountedPrice)).toLocaleString()
|
||
|
||
}else{
|
||
renewData.promotionData.error = 'false'
|
||
renewData.promotionData.str = rv.message
|
||
}
|
||
}else{
|
||
}
|
||
})
|
||
}
|
||
const clearPromotionCode = ()=>{
|
||
renewData.promotionData.error = '';
|
||
renewData.promotionData.code = ''
|
||
renewData.current.price[renewData.current.type] = renewData.promotionData.oldPrice
|
||
renewData.promotionData.oldPrice = ''
|
||
}
|
||
return{
|
||
store,
|
||
...toRefs(renew),
|
||
...toRefs(renewData),
|
||
...toRefs(payMethodData),
|
||
init,
|
||
cancelDsign,
|
||
setPricType,
|
||
setPaymentType,
|
||
payment,
|
||
setPaidBack,
|
||
completePayment,
|
||
examine,
|
||
clearPromotionCode,
|
||
}
|
||
},
|
||
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;
|
||
&.promotion{
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
> .succeed{
|
||
padding: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 1rem;
|
||
background: #eee;
|
||
> 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;
|
||
}
|
||
}
|
||
> .error{
|
||
color: red;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
> .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> |