632 lines
16 KiB
Vue
632 lines
16 KiB
Vue
<template>
|
|
<!-- 如果需要套餐就78 -->
|
|
<a-modal class="modal_component UpgradePlan_modal"
|
|
v-model:visible="showUpgradePlan"
|
|
:footer="null"
|
|
width="35%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:destroyOnClose ='true'
|
|
>
|
|
<div class="UpgradePlan_closeIcon">
|
|
|
|
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
|
</div>
|
|
<div class="UpgradePlan_content">
|
|
<div>{{ $t('upgradePlan.BuyCredlts') }}</div>
|
|
</div>
|
|
<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
|
|
<div class="UpgradePlan_nav_content">
|
|
<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
|
|
<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
|
|
<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
|
|
</div>
|
|
</div> -->
|
|
<div v-show="stepNum == 0" class="UpgradePlan_payList">
|
|
<!-- <div v-show="planNum == 0" class="UpgradePlan_payList0">
|
|
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
|
<div class="UpgradePlan_payList-item-price">$99/month</div>
|
|
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
|
|
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
|
|
<ul class="UpgradePlan_payList-item-content">
|
|
<li>
|
|
<i class="fi fi-rr-cross-small"></i>
|
|
<span>22500 Images per month</span>
|
|
</li>
|
|
</ul>
|
|
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="planNum == 1" class="UpgradePlan_payList1">
|
|
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
|
<div class="UpgradePlan_payList-item-price">$99/month</div>
|
|
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
|
|
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
|
|
<ul class="UpgradePlan_payList-item-content">
|
|
<li>
|
|
<i class="fi fi-rr-cross-small"></i>
|
|
<span>22500 Images per month</span>
|
|
</li>
|
|
</ul>
|
|
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
|
|
|
|
</div>
|
|
</div> -->
|
|
|
|
<div v-show="planNum == 2" class="UpgradePlan_payList2">
|
|
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
|
<div class="UpgradePlan_payList2_img">
|
|
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
|
|
</div>
|
|
<div class="UpgradePlan_payList2_name">{{ item.credits * price.num }} {{ $t('upgradePlan.credits') }}</div>
|
|
<div class="UpgradePlan_payList2_unitPrice">${{ item.price * price.num }} <span @click="setUnit">HKD</span></div>
|
|
<div class="UpgradePlan_payList2_input">
|
|
<div class="UpgradePlan_payList2_input_remo" @click="removePriceNum">-</div>
|
|
<input type="number" v-model="price.num">
|
|
<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
|
|
</div>
|
|
<!-- <div class="UpgradePlan_payList2_describe">{{ $t('upgradePlan.organization') }}</div> -->
|
|
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">{{ $t('upgradePlan.Continue') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
|
|
<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
|
|
<div class="UpgradePlan_payAffirm_content">
|
|
<label>
|
|
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
|
<img src="../../assets/images/homePage/paypal.svg" alt="">
|
|
<span>PayPal</span>
|
|
</label>
|
|
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
|
|
|
|
</div>
|
|
<label>
|
|
<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
|
|
<img src="../../assets/images/homePage/bankCard.svg" alt="">
|
|
<span>{{ $t('upgradePlan.CreditCard') }}</span>
|
|
</label>
|
|
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'stripe'?'active':'']">
|
|
|
|
</div>
|
|
<label>
|
|
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
|
<img src="../../assets/images/homePage/alipay.svg" alt="">
|
|
<span>{{ $t('upgradePlan.Alipay') }}</span>
|
|
<div v-show="modeOfPayment == 'alipay'" class="UpgradePlan_payAffirm_content_detail">
|
|
<label>
|
|
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
|
|
<span>{{ $t('upgradePlan.HongKong') }}</span>
|
|
</label>
|
|
<label>
|
|
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
|
|
<span>{{ $t('upgradePlan.MainlandChina') }}</span>
|
|
</label>
|
|
</div>
|
|
</label>
|
|
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="UpgradePlan_payAffirm_clause" ref="labelDisclaimer">
|
|
<label>
|
|
<input type="checkbox" v-model="clause">
|
|
<span>{{ $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="UpgradePlan_payList_item_upgrade_btn">
|
|
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">{{ $t('upgradePlan.Cancel') }}</div>
|
|
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">{{ $t('upgradePlan.Payment') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading bgFFF" v-show="isShowMark">
|
|
<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="getTradeQuery">OK</div>
|
|
</div>
|
|
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
<script lang="ts">
|
|
import { message, Upload } from "ant-design-vue";
|
|
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import GO from "@/tool/GO";
|
|
import { useI18n } from "vue-i18n";
|
|
// import { forEach } from "jszip";
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
export default defineComponent({
|
|
components: {
|
|
scaleImage,
|
|
},
|
|
props: ["msg",'sketchCatecoryList'],
|
|
setup() {
|
|
// console.log(prop.msg);
|
|
let { t } = useI18n();
|
|
const store = useStore();
|
|
let showUpgradePlan = ref(false)
|
|
let planNum = ref(2)
|
|
let stepNum = ref(0)
|
|
let price = ref({
|
|
num:1,
|
|
price:2,
|
|
credits:45,
|
|
})
|
|
let modeOfPayment = ref('paypal')
|
|
let modeOfPaymentDetail = ref('ALIPAYHK')
|
|
let clause = ref(false)//同意条款
|
|
let productList:any = ref([])
|
|
let payIndex = ref(0)
|
|
let isShowMark = ref(false)
|
|
let newWindow:any = ref()
|
|
return {
|
|
t,
|
|
store,
|
|
showUpgradePlan,
|
|
planNum,
|
|
stepNum,
|
|
price,
|
|
modeOfPayment,
|
|
modeOfPaymentDetail,
|
|
clause,
|
|
productList,
|
|
payIndex,
|
|
isShowMark,
|
|
newWindow,
|
|
};
|
|
},
|
|
data(prop) {
|
|
return {
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.getProductList()
|
|
},
|
|
watch:{
|
|
// newWindowState:{
|
|
// handler(newVal,oldVal){
|
|
// console.log(newVal);
|
|
// if(newVal){
|
|
// this.newWindow?.close();
|
|
// }
|
|
// }
|
|
// },
|
|
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.showUpgradePlan = true
|
|
},
|
|
setPlan(num:any){
|
|
this.planNum = num
|
|
},
|
|
upgrade(index:any){
|
|
this.stepNum = 1
|
|
this.payIndex = index
|
|
},
|
|
getProductList(){
|
|
Https.axiosGet(Https.httpUrls.productList).then((rv) => {
|
|
if (rv) {
|
|
this.productList = rv
|
|
// this.disignTypeList = rv
|
|
}
|
|
})
|
|
},
|
|
addPriceNum(){//数量减减
|
|
this.price.num++
|
|
},
|
|
removePriceNum(){//数量加加
|
|
if(this.price.num > 1){
|
|
this.price.num--
|
|
}
|
|
},
|
|
payment(){//付款
|
|
let url = window.location.href
|
|
// url = url.replace(/\/[^/]+$/, '') + '/home';
|
|
// console.log(url);
|
|
let parsedUrl = new URL(url);
|
|
parsedUrl.pathname = '/';
|
|
url = parsedUrl.href + 'paySucceed';
|
|
if(!this.clause){
|
|
let labelDisclaimer:any = this.$refs.labelDisclaimer
|
|
if(!labelDisclaimer.classList.contains('animation')){
|
|
labelDisclaimer.classList.add('animation')
|
|
setTimeout(() => {
|
|
labelDisclaimer.classList.remove('animation')
|
|
}, 1000);
|
|
}
|
|
|
|
return
|
|
}
|
|
let httpsUrl
|
|
if(this.modeOfPayment == 'paypal'){
|
|
httpsUrl = Https.httpUrls.payPaypal+`/${this.price.num}?returnUrl=${url}`
|
|
}else if (this.modeOfPayment == 'stripe') {
|
|
httpsUrl = Https.httpUrls.payStripe+`/${this.price.num}?returnUrl=${url}`
|
|
}else{
|
|
httpsUrl = Https.httpUrls.payAlipayHK+`/${this.modeOfPaymentDetail}/${this.price.num}`
|
|
}
|
|
Https.axiosPost(httpsUrl).then(
|
|
(rv: any) => {
|
|
var width = 800;
|
|
var height = 600;
|
|
var left = (screen.width - width) / 2;
|
|
var top = (screen.height - height) / 2;
|
|
this.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
|
|
let herf
|
|
if(this.modeOfPayment == 'paypal'){
|
|
// 在新窗口中写入内容
|
|
herf = rv.approve;
|
|
// this.newWindow.location.href = rv.approve;
|
|
}else if(this.modeOfPayment == 'stripe'){
|
|
herf = rv
|
|
// this.newWindow.location.href = rv
|
|
}else{
|
|
let data = JSON.parse(rv)
|
|
herf = `${data.url}?${data.alipay_order_string}`
|
|
// this.newWindow.location.href = herf;
|
|
}
|
|
if(this.newWindow){
|
|
this.newWindow.location.href = herf
|
|
}else{
|
|
// window.open(herf, '_blank');
|
|
window.location.href=herf;
|
|
}
|
|
// this.isShowMark = true
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
|
|
},
|
|
//查询是否支付
|
|
getTradeQuery(){
|
|
this.isShowMark = false
|
|
this.newWindow.close();//关闭打开的窗口页面
|
|
this.store.dispatch('getCredits')
|
|
this.cancelDsign()
|
|
},
|
|
setPaidBack(){//点击返回
|
|
this.isShowMark = false
|
|
},
|
|
cancel(){//取消
|
|
this.stepNum = 0
|
|
this.modeOfPayment = 'alipay'
|
|
this.clause = false
|
|
},
|
|
//设置单位
|
|
setUnit(){
|
|
|
|
},
|
|
cancelDsign(){
|
|
this.showUpgradePlan = false
|
|
this.cancel()
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.UpgradePlan_modal {
|
|
flex: 1;
|
|
height: 30rem;
|
|
// overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid #e5e5e5;
|
|
position: relative;
|
|
.mark_loading{
|
|
position: absolute;
|
|
background: #fff;
|
|
}
|
|
.UpgradePlan_content{
|
|
font-size: var(--aida-fsize2);
|
|
font-weight: 900;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
}
|
|
.UpgradePlan_nav{
|
|
font-size: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
.UpgradePlan_nav_content{
|
|
background: #eaecf0;
|
|
display: flex;
|
|
padding: .5rem 2rem;
|
|
border-radius: 5rem;
|
|
margin: 2rem 0;
|
|
div{
|
|
border-radius: 2rem;
|
|
padding: .5rem 2rem;
|
|
margin: 0 1rem;
|
|
cursor: pointer;
|
|
&.active{
|
|
background: #fff;
|
|
}
|
|
}
|
|
div:hover{
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
.UpgradePlan_payList{
|
|
flex: 1;
|
|
.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
|
|
overflow-y: hidden;
|
|
height: 100%;
|
|
display: flex;
|
|
.UpgradePlan_payList-item{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.UpgradePlan_payList0,.UpgradePlan_payList1{
|
|
.UpgradePlan_payList-item{
|
|
width: 35rem;
|
|
padding: 3rem;
|
|
border: .5rem solid #edeff2;
|
|
border-radius: 2rem;
|
|
margin-right: 2rem;
|
|
&.UpgradePlan_payList-item:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.UpgradePlan_payList-item-price{
|
|
font-weight: 600;
|
|
font-size: var(--aida-fsize2);
|
|
margin-bottom: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.UpgradePlan_payList-item-plan{
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
}
|
|
.UpgradePlan_payList-item-content{
|
|
margin-top: 1.2rem;
|
|
flex: 1;
|
|
overflow-x: hidden;
|
|
}
|
|
.UpgradePlan_payList-item-upgrade{
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.UpgradePlan_payList2{
|
|
text-align: center;
|
|
flex-direction: column;
|
|
.UpgradePlan_payList-item{
|
|
justify-content: space-between;
|
|
padding: 3rem;
|
|
align-items: center;
|
|
margin-top: 5rem;
|
|
.UpgradePlan_payList2_img{
|
|
img{
|
|
border-radius: 50%;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
}
|
|
}
|
|
.UpgradePlan_payList2_name,.UpgradePlan_payList2_unitPrice{
|
|
font-size: 1.8rem;
|
|
font-weight: 900;
|
|
}
|
|
.UpgradePlan_payList2_name{
|
|
font-weight: 900;
|
|
}
|
|
.UpgradePlan_payList2_input{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
div{
|
|
font-size: 4rem;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
input{
|
|
width: 5rem;
|
|
height: 5rem;
|
|
border: .2rem solid #f4f4f7;
|
|
margin: 0 2rem;
|
|
text-align: center;
|
|
background: #fff;
|
|
border-radius: 1rem;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input {
|
|
-moz-appearance: textfield;
|
|
}
|
|
}
|
|
.UpgradePlan_payList2_describe{
|
|
background: #f2f2f4;
|
|
padding: 1rem 3rem;
|
|
border-radius: 1.2rem;
|
|
}
|
|
.UpgradePlan_payList-item-upgrade{
|
|
position: initial;
|
|
transform: translate(0,0);
|
|
// padding: 1rem 2rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.UpgradePlan_payAffirm{
|
|
width: 50rem;
|
|
margin: 0 auto;
|
|
margin-top: 5rem;
|
|
.UpgradePlan_payAffirm_title{
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.UpgradePlan_payAffirm_content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 3rem 0;
|
|
// height: 20rem;
|
|
// overflow-y: auto;
|
|
>label{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
cursor: pointer;
|
|
border: .5rem solid #efefef;
|
|
border-radius: 2rem;
|
|
img{
|
|
margin: 0rem 2rem;
|
|
// max-width: 4rem;
|
|
width: 4rem;
|
|
}
|
|
.UpgradePlan_payAffirm_content_detail{
|
|
margin-left: auto;
|
|
display: flex;
|
|
>label{
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 1rem;
|
|
span{
|
|
margin-left: .5rem;
|
|
}
|
|
}
|
|
>label:last-child{
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.UpgradePlan_payAffirm_clause{
|
|
margin-bottom: 1.5rem;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.UpgradePlan_payList_item_upgrade_btn{
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
>div{
|
|
position: relative;
|
|
left: 0;
|
|
transform: none;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.UpgradePlan_payList_item_upgrade1{
|
|
background: rgba(0, 0, 0, 0);
|
|
border: 2px solid;
|
|
color: #000;
|
|
}
|
|
}
|
|
.UpgradePlan_closeIcon{
|
|
top: calc(2rem*1.2);
|
|
right: calc(2rem*1.2);
|
|
cursor: pointer;
|
|
width: calc(4rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
.fi-rr-cross-small::before{
|
|
padding: calc(.2rem*1.2);
|
|
border-radius: 5px;
|
|
border: solid 2px rgba(0, 0, 0, 0.25);
|
|
transition: 1s all;
|
|
color: rgba(0, 0, 0, 0.55);
|
|
}
|
|
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
|
|
border: solid 2px rgba(0, 0, 0, 0.55);
|
|
color: rgba(0, 0, 0, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
<style lang="less">
|
|
.UpgradePlan_modal,.layout_modal{
|
|
.ant-modal-content{
|
|
border-radius: calc(1rem*1.2);
|
|
overflow: hidden;
|
|
.ant-modal-header{
|
|
background-color: #fff;
|
|
border-bottom: none;
|
|
}
|
|
.ant-modal-body{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
|
|
height: calc(55rem*1.2);
|
|
// height: calc(65rem*1.2);
|
|
}
|
|
//进度完成字体颜色
|
|
.ant-progress-circle.ant-progress-status-success .ant-progress-text{
|
|
color: #000;
|
|
}
|
|
.ant-progress-circle .ant-progress-text{
|
|
color:rgba(0, 0, 0, 0.55);
|
|
font-size: calc(1.6rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
.UpgradePlan_modal{
|
|
.ant-modal-content{
|
|
|
|
.ant-modal-body{
|
|
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
|
|
height: calc(55rem*1.2);
|
|
// height: calc(65rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
</style> |