语言适配加部分布局修改

This commit is contained in:
X1627315083
2024-12-23 16:23:18 +08:00
parent fd69caff94
commit 570b5f97e9
16 changed files with 505 additions and 188 deletions

View File

@@ -126,11 +126,16 @@ export default defineComponent({
<style lang="less" scoped>
.account_frontPage{
width: 100%;
height: 100%;
.account_frontPage_body{
padding-bottom: 3rem;
height: 100%;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-content){
height: 100%;
}
:deep(.ant-tabs-tabpane){
padding: 0 5rem;
}

View File

@@ -2,42 +2,55 @@
<div class="bindPage_page">
<div class="bindPage_page_body">
<div class="bind_item">
<div class="title">Bind Wechat</div>
<div class="title">{{ $t('frontPage.BindWechat') }}</div>
<div class="box">
<div class="type">
<img v-if="!userDetail.accountExtendList?.WeChat" src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
<img v-else :src="userDetail.accountExtendList?.WeChat.headImgUrl" alt="">
<div class="text">{{ userDetail.accountExtendList?.WeChat?userDetail.accountExtendList?.WeChat.name:'Unbound' }}</div>
<div class="text">{{ userDetail.accountExtendList?.WeChat?userDetail.accountExtendList?.WeChat.name:$t('frontPage.Unbound') }}</div>
</div>
<div v-if="!userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="openWeiXinModel">Bind Now</div>
<div v-else class="gallery_btn" @click="ungroupWeiXinModel">Unbind</div>
<div v-if="!userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="openWeiXinModel">{{ $t('frontPage.BindNow') }}</div>
<div v-if="userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="ungroupWeiXinModel">{{ $t('frontPage.Unbind') }}</div>
</div>
</div>
<div class="bind_item">
<div class="title">Bind Gmail</div>
<div class="title">{{ $t('frontPage.BindGmail') }}</div>
<div class="box">
<div class="type">
<img v-if="!userDetail.accountExtendList?.Google" src="@/assets/images/loginPage/gmailIcon.svg" alt="">
<img v-else :src="userDetail.accountExtendList?.Google?.headImgUrl" alt="">
<div class="text">{{ userDetail.accountExtendList?.Google?userDetail.accountExtendList?.Google.name:'Unbound' }}</div>
<div class="text">{{ userDetail.accountExtendList?.Google?userDetail.accountExtendList?.Google.name:$t('frontPage.Unbound') }}</div>
</div>
<div class="gmail_btn">
<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn">Bind Now</div>
<div v-else class="gallery_btn" @click="ungroupGoogleModel">Unbind</div>
<div v-if="!userDetail.accountExtendList?.Google && googleLoad" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
<div v-else class="gallery_btn loading"><i class="fi fi-br-loading"></i></div>
<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
</div>
</div>
</div>
<div class="bind_item">
<div class="title">{{ $t('frontPage.ModifyEmail') }}</div>
<div class="box">
<div class="type">
<img :src="userDetail.avatar" alt="">
<div class="text">{{ userDetail.email }}</div>
</div>
<div class="gmail_btn">
<div class="gallery_btn" @click="modifyEmail">{{ $t('frontPage.Modify') }}</div>
</div>
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<weiXinModel ref="weiXinModel"></weiXinModel>
<bindEmail ref="bindEmail" type="Modify"></bindEmail>
</div>
</template>
<script>
import { defineComponent,computed,ref,reactive,nextTick,toRefs,onBeforeUnmount, onMounted} from 'vue'
import { defineComponent,computed,createVNode,reactive,nextTick,toRefs,onBeforeUnmount, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
@@ -45,23 +58,28 @@ import weiXinModel from "@/component/LoginPage/weiXinModel.vue";
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import bindEmail from "@/component/HomePage/bindEmail.vue";
export default defineComponent({
components:{
weiXinModel
weiXinModel,bindEmail
},
setup() {
const route = useRoute();
const router = useRouter();
const t = useI18n().t;
const store = useStore();
let accountHomeData = reactive({
router:null,
loadingShow:false,
googleLoad:false,
userDetail:computed(()=>{
return store.state.UserHabit.userDetail
})
})
let bindPageDom = reactive({
weiXinModel:null
weiXinModel:null,
bindEmail:null,
})
let data = reactive({
scriptSrc:'https://accounts.google.com/gsi/client',
@@ -88,7 +106,7 @@ export default defineComponent({
}
const ungroupWeiXinModel = ()=>{
Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
message.success('Successful discharge');
message.success(t('frontPage.jsContent1'));
let value = {
accountExtendList:{
WeChat:undefined,
@@ -107,11 +125,14 @@ export default defineComponent({
}
}
store.commit("upUserDetail", value)
message.success('Successful discharge');
message.success(t('frontPage.jsContent1'));
})
}
const modifyEmail = ()=>{
bindPageDom.bindEmail.init()
}
onMounted(async ()=>{
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
if(!existingScript){
@@ -119,8 +140,22 @@ export default defineComponent({
const script = document.createElement("script");
script.src = data.scriptSrc
script.onload=()=>{
accountHomeData.googleLoad = true
resolve()
}
script.onerror = ()=>{
Modal.confirm({
title: t('frontPage.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
}
});
accountHomeData.googleLoad = true
}
document.body.appendChild(script);
})
}
@@ -154,6 +189,7 @@ export default defineComponent({
openWeiXinModel,
ungroupGoogleModel,
ungroupWeiXinModel,
modifyEmail,
}
},
data(){
@@ -165,6 +201,8 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.bindPage_page{
height: 100%;
overflow-y: auto;
.bindPage_page_body{
.bind_item{
margin-bottom: 4rem;
@@ -194,6 +232,25 @@ export default defineComponent({
font-size: 1.8rem;
}
}
.gallery_btn{
&.loading{
width: 10rem;
i{
&::before{
display: inline-block;
animation: loading 1s linear infinite;
@keyframes loading {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
}
}
}
}
>.gmail_btn{
position: relative;
#g_id_bind{

View File

@@ -3,35 +3,34 @@
<div v-if="userDetail.status != 'canceled'">
<div class="cancel_box_item">
<div class="modal_title_text">
<div>What is your reason for cancelling AiDA?</div>
<div>{{ $t('cancelRenewal.cancelling') }}</div>
</div>
<textarea v-model="textareaValue" placeholder="Share your feedback here..."></textarea>
</div>
<div class="cancel_box_item cancel_box_item2">
<div class="modal_title_text">
<div>Youre about to cancel your subscription</div>
<div>{{ $t('cancelRenewal.subscription') }}</div>
<div>
<i class="fi fi-sr-circle-xmark"></i>
<div class="modal_title_text_assistant">You will loose all your date</div>
<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseDate') }}</div>
</div>
<div>
<i class="fi fi-sr-circle-xmark"></i>
<div class="modal_title_text_assistant">You will loose your settings and customizations</div>
<div class="modal_title_text_assistant">{{ $t('cancelRenewal.looseCustomizations') }}</div>
</div>
</div>
<div class="tips">
<i class="fi fi-sr-triangle-warning"></i>
<div>Dont worry! The data you have in AiDA will be
safe.</div>
<div>{{ $t('cancelRenewal.DonWorry') }}</div>
</div>
<div class="button_box">
<div class="gallery_btn white" @click="subscribe">Continue to renew</div>
<div class="gallery_btn" @click="cancelSubscription">Yescancel it</div>
<div class="gallery_btn white" @click="subscribe">{{ $t('cancelRenewal.Continue') }}</div>
<div class="gallery_btn" @click="cancelSubscription">{{ $t('cancelRenewal.cancel') }}</div>
</div>
</div>
</div>
<div v-else class="no_renewal">
There are no subscription plans with automatic renewal.
{{ $t('cancelRenewal.subscriptionRenewal') }}
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />

View File

@@ -96,6 +96,13 @@ export default defineComponent({
dataIndex: "id",
key: "id",
fixed: "left",
},
{
title: 'User Name',
align: "center",
width: 100,
dataIndex: "username",
key: "username",
},
{
title: 'Create Time',
@@ -112,13 +119,6 @@ export default defineComponent({
dataIndex: "status",
key: "status",
},{
title: 'Updata Time',
align: "center",
width: 200,
dataIndex: "updateTime",
key: "updateTime",
},{
title: 'Total income',
align: "center",
@@ -135,6 +135,13 @@ export default defineComponent({
dataIndex: "monthlyEarnings",
key: "monthlyEarnings",
openType:'all',
},{
title: 'Unpaid amount',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "unpaidEarnings",
key: "unpaidEarnings",
},{
title: 'Invitation Link',
align: "center",
@@ -143,12 +150,12 @@ export default defineComponent({
dataIndex: "link",
key: "link",
},{
title: 'Unpaid amount',
title: 'Updata Time',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "unpaidEarnings",
key: "unpaidEarnings",
width: 200,
dataIndex: "updateTime",
key: "updateTime",
},
{
title: 'Operations',
@@ -263,7 +270,7 @@ export default defineComponent({
};
Https.axiosPost(Https.httpUrls.affiliateList, data).then(
(rv: any) => {
this.collectionList = rv.records;
this.collectionList = rv.content;
this.total=rv.total
}
);

View File

@@ -15,6 +15,16 @@
:destroyOnClose="true"
:zIndex="9999"
>
<div class="generalModel_btn" v-if="type == 'Modify'">
<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="login_page">
<div class="page_content">
<!-- 账号密码和邮箱登录 start-->
@@ -27,7 +37,8 @@
'login_active',
]"
>
Bind Email
<span v-if="type == 'Modify'">Modify Email</span>
<span v-else>Bind Email</span>
</div>
</div>
<!-- 账号密码登录 start -->
@@ -84,7 +95,8 @@
:state="emailStap"
@click="submitPerLogin()"
>
Bind Email
<span v-if="type == 'Modify'">Modify Email</span>
<span v-else>Bind Email</span>
</div>
</div>
<!-- 账号密码登录 end -->
@@ -114,6 +126,7 @@ export default defineComponent({
components: {
VerificationCodeInput,
},
props:['type'],
setup(){
let timer:any = 0;
const {locale} = useI18n()

View File

@@ -27,7 +27,7 @@
</div>
<div class="renewContent">
<div class="generalModelTitle">
Select The Best Plan For Your Needs
{{ $t('Renew.title') }}
</div>
<div class="renew_detail">
<div class="name generalModelTitle">{{ current.title }}</div>
@@ -39,16 +39,16 @@
<div class="type" v-if="current.typeList.length > 1">
<label>
<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
Monthly
{{ $t('Renew.Monthly') }}
</label>
<label>
<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
Yearly
{{ $t('Renew.Yearly') }}
</label>
</div>
<div class="info">{{ current.info }}</div>
</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">Subscribe Now</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
</div>
<div
class="login_footer_item_text"
@@ -76,6 +76,7 @@ import { defineComponent,ref,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";
const md5 = require("md5");
export default defineComponent({
components: {
@@ -83,6 +84,7 @@ export default defineComponent({
},
setup(){
const store = useStore();
const {t} = useI18n()
let renew = reactive({
renewModel:false,
renewModelMask:true,
@@ -90,14 +92,14 @@ export default defineComponent({
})
let renewData = reactive({
personage:{
title:'Personal version',
title:t('Renew.PersonalVersion'),
price:{
monthly:'500',
year:'5,000',
},
unit:{
monthly:'HKD / Month',
year:'HKD / Year',
monthly:t('Renew.HKDMonth'),
year:t('Renew.HKDYear'),
},
type:'monthly',
typeList:['monthly','year'],

View File

@@ -27,10 +27,10 @@
</div>
<div class="payMethodContent">
<div class="generalModelTitle">
Purchase points
{{ $t('upgradePlan.PurchasePoints') }}
</div>
<div class="generalModelInfo">
select a payment method
{{ $t('upgradePlan.paymentmethod') }}
</div>
<div class="payMethod_list">
<label class="payMethod_item">
@@ -66,8 +66,8 @@
</label>
</div>
<div class="payMethod_payAffirm_btn">
<div class="gallery_btn white" @click="cancelDsign">Cancel</div>
<div class="gallery_btn" @click="payAffirm">Payment</div>
<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div>
<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</div>
</div>
</div>

View File

@@ -1,21 +1,17 @@
<template>
<div class="signUp" v-if="signUp">
<div class="signUp">
<div class="selectSignUp" v-show="!isSelectSignUp">
<div class="back" @click="close">
&lt; BACK
</div>
<div class="title">Our Advantages</div>
<div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div>
<div class="gallery_list product_list">
<div class="gallery_item" v-for="item in productList" :key="item">
<div class="product_signUp_box">
<div class="title">{{ item.title }}</div>
<div class="info" v-if="item.title != '------------------'">{{ item.info }}</div>
<div class="info" v-else>-----</div>
<div class="info">{{ item.info }}</div>
<div class="detail">{{ item.detail }}</div>
<div class="highlight" v-if="item.highlight">{{ item.highlight }}</div>
<div class="gallery_btn gallery_btn_radius" v-if="item.title != '------------------'" :class="{active:item.title == '------------------'}" @click="createAccount">Create account</div>
<div class="gallery_btn gallery_btn_radius" v-else :class="{active:item.title == '------------------'}" @click="createAccount">Contact us</div>
<div class="gallery_btn gallery_btn_radius" v-if="item.info != '/'" @click="createAccount">Create account</div>
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a>
</div>
<ul class="product_detail">
<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
@@ -35,6 +31,7 @@
</div>
</div>
<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
<!-- <div class="gallery_btn" v-else style="width: 20rem;" @click="()=>isSelectSignUp=false">Contact us</div> -->
</div>
<registerModel ref="registerModel"></registerModel>
</div>
@@ -54,7 +51,6 @@
registerModel:null
})
let data = reactive({
signUp:false,
isSelectSignUp:false,
productList:[
{
@@ -70,59 +66,33 @@
'Support monthly/annual payment options',
'Suitable for individual creators and freelance designers to use'
]
},
{
title:"------------------",
info:"--- / Year",
detail:"---------------------------------------------",
// highlight:"---------------",
},{
title:"Education Edition",
info:"/",
detail:"Multi user management system for universities",
highlight:"",
detailList:[
'---------------------------------------',
'---------------------------------------',
'---------------------------------------',
'---------------------------------------',
'---------------------------------------',
'Multi user management system for universities',
'Credit limits are shared across the entire school',
'AI assisted design teaching function',
'Support sketch creativity and design inspiration teaching',
'Basic 3D design functions',
]
},{
title:"------------------",
info:"--- / Year",
detail:"---------------------------------------------",
// highlight:"---------------",
title:"Enterprise Edition",
info:"/",
detail:"Enterprise level multi person collaboration system",
highlight:"",
detailList:[
'---------------------------------------',
'---------------------------------------',
'---------------------------------------',
'---------------------------------------',
'---------------------------------------',
'Enterprise level multi person collaboration system',
'Internal Credit Sharing within Enterprises',
'Brand DNA management system, customizable brand Exclusive design preferences',
'Cloud based design generation and management',
'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
'Enterprise level data security assurance',
'Suitable for fashion design teams and brands to use',
]
},
// {
// title:"Education Edition",
// info:"XXX / Year",
// detail:"Multi user management system for universities",
// highlight:"Free 5-day trial",
// detailList:[
// 'Multi user management system for universities',
// 'Credit limits are shared across the entire school',
// 'AI assisted design teaching function',
// 'Support sketch creativity and design inspiration teaching',
// 'Basic 3D design functions',
// ]
// },{
// title:"Enterprise Edition",
// info:"XXX / Year",
// detail:"Enterprise level multi person collaboration system",
// highlight:"Free 5-day trial",
// detailList:[
// 'Enterprise level multi person collaboration system',
// 'Internal Credit Sharing within Enterprises',
// 'Brand DNA management system, customizable brand Exclusive design preferences',
// 'Cloud based design generation and management',
// 'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
// 'Enterprise level data security assurance',
// 'Suitable for fashion design teams and brands to use',
// ]
// },
],
introductList:[
{
@@ -152,12 +122,7 @@
},
]
})
const init = ()=>{
data.signUp = true
}
const close = ()=>{
data.signUp = false
emit('close')
}
const createAccount = ()=>{
if(window.innerWidth < 768){
@@ -171,7 +136,6 @@
return {
...toRefs(dom),
...toRefs(data),
init,
close,
createAccount,
}