fix
This commit is contained in:
X1627315083
@@ -5,43 +5,148 @@
|
||||
<div class="title">Bind Wechat</div>
|
||||
<div class="box">
|
||||
<div class="type">
|
||||
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
|
||||
<div class="text">Unbound</div>
|
||||
<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 class="gallery_btn">Bind Now</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 lang="ts">
|
||||
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||
<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 { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
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 userInfo:any= computed(()=>{
|
||||
return store.state.UserHabit.userInfo
|
||||
let accountHomeData = reactive({
|
||||
router:null,
|
||||
loadingShow:false,
|
||||
userDetail:computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
})
|
||||
})
|
||||
let cookieUserInfo = JSON.parse(getCookie('userInfo') as any)
|
||||
let accountHomeData:any = reactive({
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
uploadUrl:userInfo.value?.avatar,
|
||||
uploadFile:undefined,
|
||||
token:'',
|
||||
fileList:[]
|
||||
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),
|
||||
userInfo,
|
||||
cookieUserInfo,
|
||||
...toRefs(bindPageDom),
|
||||
openWeiXinModel,
|
||||
ungroupGoogleModel,
|
||||
ungroupWeiXinModel,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -79,9 +184,24 @@ export default defineComponent({
|
||||
>.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{
|
||||
|
||||
Reference in New Issue
Block a user