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

语言适配加部分布局修改

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/component/Account/frontPage.vue
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;
}

87
src/component/Account/frontPage/bindPage.vue
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{

17
src/component/Account/frontPage/cancelRenewal.vue
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>You’re 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>Don’t 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">Yes，cancel 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" />