406 lines
12 KiB
Vue
406 lines
12 KiB
Vue
<template>
|
|
<div class="upgradePlan" ref="upgradePlan">
|
|
<!-- 如果需要套餐就78 -->
|
|
<a-modal class="generalModel UpgradePlan_modal"
|
|
v-model:visible="showUpgradePlan"
|
|
:footer="null"
|
|
:get-container="() => $refs.upgradePlan"
|
|
width="35%"
|
|
height="auto"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:destroyOnClose ='true'
|
|
>
|
|
<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="UpgradePlan_content">
|
|
<div>{{ $t('upgradePlan.BuyCredlts') }}</div>
|
|
</div>
|
|
<div v-show="stepNum == 0" class="UpgradePlan_payList">
|
|
<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>
|
|
<payMethod ref="payMethod" @completePayment="cancelDsign" type="credits"></payMethod>
|
|
|
|
<!-- <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>
|
|
</div>
|
|
</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 { useI18n } from "vue-i18n";
|
|
import payMethod from "@/component/Pay/payMethod.vue";
|
|
// import { forEach } from "jszip";
|
|
export default defineComponent({
|
|
components: {
|
|
payMethod,
|
|
},
|
|
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 payMethod:any = ref(null)
|
|
let modeOfPayment = ref('paypal')
|
|
let modeOfPaymentDetail = ref('ALIPAYHK')
|
|
let clause = ref(false)//同意条款
|
|
let productList:any = ref([])
|
|
let isShowMark = ref(false)
|
|
let newWindow:any = ref()
|
|
return {
|
|
t,
|
|
store,
|
|
showUpgradePlan,
|
|
planNum,
|
|
stepNum,
|
|
payMethod,
|
|
price,
|
|
modeOfPayment,
|
|
modeOfPaymentDetail,
|
|
clause,
|
|
productList,
|
|
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){
|
|
let data = {
|
|
autoRenewal:true,//one_time为不自动续费
|
|
productName:'CreditsPurchase',
|
|
quantity:this.price.num,
|
|
}
|
|
this.payMethod.init(data)
|
|
},
|
|
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
|
|
let url = window.location.origin+'/paySucceed'
|
|
// 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_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;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|