Files
aida_front/src/component/HomePage/UpgradePlan.vue
X1627315083 938a30cd72 fix
2024-07-10 09:49:16 +08:00

611 lines
17 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="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
<span>PayPal</span>
</label>
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
</div>
<label>
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
<span>支付宝</span>
<div v-show="modeOfPayment == 'alipay'" class="UpgradePlan_payAffirm_content_detail">
<label>
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
<span>Hong Kong</span>
</label>
<label>
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
<span>Mainland China</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>I acknowledge that I have read, understand, and agree with the <a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">Terms and Conditions</a> (including the Scope of service) and the <a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">Subscription Agreement</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{
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);
if(this.modeOfPayment == 'paypal'){
// 在新窗口中写入内容
this.newWindow.location.href = rv.approve;
}else{
let data = JSON.parse(rv)
let herf = `${data.url}?${data.alipay_order_string}`
this.newWindow.location.href = herf;
// this.newWindow.document.write(herf);
}
this.isShowMark = true
// 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;
>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(50rem*1.2);
// height: calc(65rem*1.2);
}
}
}
</style>