aida_front/src/component/Account/frontPage.vue

<template>
    <div class="account_frontPage">
		<a-tabs class="account_frontPage_body" v-model:activeKey="activeKey" @change="changeTabs">
			<a-tab-pane v-for="item in frontPageList" :key="item.key">
				<myInformation v-if="item.key == 'myInformation' && activeKey == 'myInformation'" :ref="item.key"></myInformation>
				<bind v-if="item.key == 'bind' && activeKey == 'bind'" :ref="item.key"></bind>
				<cancelRenewal v-if="item.key == 'cancelRenewal' && activeKey == 'cancelRenewal'" :ref="item.key"></cancelRenewal>
				<template #tab>
					<a-badge :count="0" >
						<span>{{item.title}}</span>
					</a-badge>
				</template>
			</a-tab-pane>
		</a-tabs>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import myInformation from '@/component/Account/frontPage/mylnformation.vue';
import bind from '@/component/Account/frontPage/bindPage.vue';
import cancelRenewal from '@/component/Account/frontPage/cancelRenewal.vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		myInformation,
		bind,
		cancelRenewal,
    },
    setup() {
		const {t} = useI18n()
		const route = useRoute();
		const router = useRouter();
        const store = useStore();
		let accountfrontPage = reactive({
			frontPageList:[
				{
					title:t('account.myInfor'),
					key:'myInformation',
				},{
					title:t('account.bindWeChat'),
					key:'bind',
				},{
					title:t('account.cancel'),
					key:'cancelRenewal',
				}
			],
			loadingShow:false,
			activeKey: '',
			userDetail:computed(()=>{
				return store.state.UserHabit.userDetail
			})
		})
		let domRefs:any = reactive({
			myInformation:ref(null),
			bind:ref(null),
			cancelRenewal:ref(null),
		})
		let changeTabs = (key:any)=>{
			console.log(key);
			
			// if(accountfrontPage.activeKey == 'service')return
		}
		let setReadStatus = (value:any)=>{
			return new Promise((resolve,reject)=>{
				if(value.isRead == 1)return reject('')
				let data = {
					type:accountfrontPage.activeKey,
					notificationIdList:value.id
				}
				Https.axiosPost(Https.httpUrls.setReadStatus,'',{params:data}).then((rv)=>{
					if(rv){
						resolve(rv)
						// store.commit('setfrontPageSystem',rv)
					}
				}).catch((err)=>{
					reject(err)
				})
			})
		}
		const wechatLogin = (value:any)=> {
			let data = {
				code : value.code
			}
			accountfrontPage.loadingShow = true
		    Https.axiosGet(Https.httpUrls.bindWeChat, {params:data})
                .then((rv) => {
					accountfrontPage.loadingShow = false
					let value = {
					accountExtendList:{
							WeChat:rv,
							Google:accountfrontPage.userDetail.accountExtendList?.Google
						}
					}
				store.commit("upUserDetail", value)
					router.push({ query: {} });
                })
                .catch((res) => {accountfrontPage.loadingShow = false});
		}
		onMounted(()=>{
			let key = accountfrontPage.frontPageList[0].key
			accountfrontPage.activeKey = key
			const data = route.query
			if(data?.state == 'weiXin'){
				accountfrontPage.activeKey = 'bind'
				wechatLogin(data)
			}
		})
        return{
           ...toRefs(accountfrontPage),
           ...toRefs(domRefs),
		   setReadStatus,
		   changeTabs,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<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-fsize1-8);
		}
		:deep(.ant-tabs-content){
			height: 100%;
		}
		:deep(.ant-tabs-tabpane){
			padding: 0 5rem;
		}
		:deep(.ant-tabs-nav){
			padding: 0rem 5rem;
			margin-bottom: 3rem;
			&::before{
			    display: none;
			}
			.ant-tabs-nav-wrap{
				.ant-tabs-tab-btn{
					font-size: var(--aida-fsize1-6);
				}
				.ant-tabs-tab-active{
					.ant-tabs-tab-btn{
						font-weight: 900;
					}
				}
			}
			.ant-tabs-ink-bar{
				background: #000;
			}
		}
		
	}
}
</style>