aida_front/src/component/Account/frontPage/bindPage.vue

<template>
    <div class="bindPage_page">
		<div class="bindPage_page_body">
			<div class="bind_item">
				<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:$t('frontPage.Unbound') }}</div>
					</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">{{ $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:$t('frontPage.Unbound') }}</div>
					</div>
					<div class="gmail_btn">
						<div v-if="!userDetail.accountExtendList?.Google && googleLoad" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
						<div v-else-if="!userDetail.accountExtendList?.Google" 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,createVNode,reactive,nextTick,toRefs,onBeforeUnmount, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
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,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,
			bindEmail:null,
		})
		let data = reactive({
			scriptSrc:'https://accounts.google.com/gsi/client',
		})
		const openWeiXinModel = ()=>{
			bindPageDom.weiXinModel.init()
		}
		const handleCredentialResponse = (response)=>{
			let code = response.credential
			accountHomeData.loadingShow = true
			let data = {credential : code}
		    Https.axiosGet(Https.httpUrls.bindGoogle, {params:data})
			.then((rv) => {
				accountHomeData.loadingShow = false
				let value = {
					accountExtendList:{
						WeChat:accountHomeData.userDetail.accountExtendList?.WeChat,
						Google:rv,
						}
					}
				store.commit("upUserDetail", value)
			})
			.catch((res) => {accountHomeData.loadingShow = false});
		}
		const ungroupWeiXinModel = ()=>{
			Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
				message.success(t('frontPage.jsContent1'));
				let value = {
					accountExtendList:{
						WeChat:undefined,
						Google:accountHomeData.userDetail.accountExtendList?.Google
					}
				}
				store.commit("upUserDetail", value)
			})
		}
		const ungroupGoogleModel = ()=>{
			Https.axiosGet(Https.httpUrls.unbindGoogle,).then((rv)=>{
				let value = {
					accountExtendList:{
						WeChat:accountHomeData.userDetail.accountExtendList?.WeChat,
						Google:undefined,
					}
				}
				store.commit("upUserDetail", value)
				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){
				await new Promise((resolve, reject) => {
					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);
				})
			}
			window.google.accounts.id.initialize({
			// 主要就是填写client_id
				client_id: GOOGLE_CLIENT_ID,
				auto_select: false,
				callback: handleCredentialResponse,
				// context:"signin",
				ux_mode:"popup",
				itp_support:true,
			});
			window.google.accounts.id.renderButton(
				document.getElementById("g_id_bind"),
				{
					type:"icon",//icon为只有一个icon
					shape:"circle",
					theme:"outline",
					size:"large",
					logo_alignment:"center",
				}
			);
		})
		onBeforeUnmount(()=>{
			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
			if(existingScript)existingScript.remove()
		})
        return{
           ...toRefs(accountHomeData),
           ...toRefs(bindPageDom),
		   openWeiXinModel,
		   ungroupGoogleModel,
		   ungroupWeiXinModel,
		   modifyEmail,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.bindPage_page{
	height: 100%;
	overflow-y: auto;
	.bindPage_page_body{
		.bind_item{
			margin-bottom: 4rem;
			>.title{
				font-size: 2rem;
				margin-bottom: 2rem;
				font-weight: 600;
			}
			>.box{
				width: 100%;
				border: 2px solid #000;
				border-radius: 2rem;
				padding: 3rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.type{
					display: flex;
					>img{
						margin-right: 3rem;
						width: 5rem;
						height: 5rem;
					}
					>.text{
						display: flex;
						align-items: center;
						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{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						z-index: 2;
						:deep(.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe){
							width: 100%;
						}
					}
				}
			}
		}
		.bind_item:last-child{
		    margin-bottom: 0;
		}
	}
}
</style>