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">Bind Wechat</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>
					<div v-if="!userDetail.accountExtendList?.WeChat" class="gallery_btn" @click="openWeiXinModel">Bind Now</div>
					<div v-else class="gallery_btn" @click="ungroupWeiXinModel">Ungroup</div>
				</div>
			</div>
			<div class="bind_item">
				<div class="title">Bind Gmail</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>
					<div class="gmail_btn">
						<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn">Bind Now</div>
						<div v-else class="gallery_btn" @click="ungroupGoogleModel">Ungroup</div>
						<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
					</div>
				</div>
				
			</div>
		</div>
		<div class="mark_loading" v-show="loadingShow">
			<a-spin size="large" />
		</div>
		<weiXinModel ref="weiXinModel"></weiXinModel>
    </div>
</template>
<script>
import { defineComponent,computed,ref,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'
export default defineComponent({
    components:{
		weiXinModel
    },
    setup() {
		const route = useRoute();
		const router = useRouter();
        const store = useStore();
		let accountHomeData = reactive({
			router:null,
			loadingShow:false,
			userDetail:computed(()=>{
				return store.state.UserHabit.userDetail
			})
		})
		let bindPageDom = reactive({
			weiXinModel: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
			})
			.catch((res) => {accountHomeData.loadingShow = false});
		}
		const ungroupWeiXinModel = ()=>{
			Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
				message.success('Successful discharge');
				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('Successful discharge');
			})
		}
		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=()=>{
						resolve()
					}
					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,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.bindPage_page{
	.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;
					}
				}
				>.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>