aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
src/component/HomePage/UpgradePlan.vue
View File

@@ -1,60 +1,32 @@
<template>
<div class="upgradePlan" ref="upgradePlan">
<!-- 如果需要套餐就78 -->
<a-modal class="modal_component UpgradePlan_modal"
<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="UpgradePlan_closeIcon">
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
<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_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">
@@ -72,7 +44,9 @@
</div>
</div>
</div>
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
<!-- <div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
<div class="UpgradePlan_payAffirm_content">
<label>
@@ -130,21 +104,21 @@
<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
</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 GO from "@/tool/GO";
import { useI18n } from "vue-i18n";
import payMethod from "@/component/Pay/payMethod.vue";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
components: {
scaleImage,
payMethod,
},
props: ["msg",'sketchCatecoryList'],
setup() {
@@ -159,11 +133,11 @@ export default defineComponent({
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 payIndex = ref(0)
let isShowMark = ref(false)
let newWindow:any = ref()
return {
@@ -172,12 +146,12 @@ export default defineComponent({
showUpgradePlan,
planNum,
stepNum,
payMethod,
price,
modeOfPayment,
modeOfPaymentDetail,
clause,
productList,
payIndex,
isShowMark,
newWindow,
};
@@ -209,8 +183,12 @@ export default defineComponent({
this.planNum = num
},
upgrade(index:any){
this.stepNum = 1
this.payIndex = index
let data = {
autoRenewal:true,//one_time为不自动续费
productName:'CreditsPurchase',
quantity:this.price.num,
}
this.payMethod.init(data)
},
getProductList(){
Https.axiosGet(Https.httpUrls.productList).then((rv) => {
@@ -315,7 +293,7 @@ export default defineComponent({
<style lang="less" scoped>
.UpgradePlan_modal {
flex: 1;
height: 30rem;
// height: 30rem;
// overflow-x: hidden;
display: flex;
flex-direction: column;
@@ -357,51 +335,7 @@ export default defineComponent({
}
.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;
@@ -465,168 +399,5 @@ export default defineComponent({
}
}
.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>