import React from 'react' ; import { api , social } from '@config/index' ; import { useSelector , useStore } from 'react-redux' ; import { getUserInfo , getAccessToken } from '@app/redux/reducers/user' ; import { loadUserInfo } from '@app/redux/actions/user' ; import { oAuthUnbinding } from '@app/redux/actions/oauth' ; export default function ( ) { const me = useSelector ( ( state ) => getUserInfo ( state ) ) ; const accessToken = useSelector ( ( state ) => getAccessToken ( state ) ) ; const store = useStore ( ) ; const _loadUserInfo = ( args ) => loadUserInfo ( args ) ( store . dispatch , store . getState ) ; const _oAuthUnbinding = ( args ) => oAuthUnbinding ( args ) ( store . dispatch , store . getState ) ; const submit = async function ( name ) { if ( me [ name ] ) { if ( confirm ( `您确认解除 ${ name } 的绑定吗？` ) ) { let err , res ; let result = await _oAuthUnbinding ( { args : { name } } ) ; [ err , res ] = result ; await _loadUserInfo ( { } ) ; $ . toast ( { text : '解除成功' , position : 'top-center' , showHideTransition : 'slide' , icon : 'success' , loader : false , allowToastClose : false } ) ; } } else { if ( confirm ( `您确认绑定 ${ name } 吗？` ) ) { window . location . href = `${ api . domain }/oauth/${ name }?access_token=${ accessToken }` ; } } } ; let doms = [ ] ; if ( social . weibo ) { doms . push ( < > < div > 微博 < /div> < div > < span className = "a" onClick = { ( ) => { submit ( 'weibo' ) ; } } > { me . weibo ? '已绑定' : '未绑定' } < /span></div > < />); } if ( social . qq ) { doms . push ( < > < div > QQ < /div> < div > < span className = "a" onClick = { ( ) => { submit ( 'qq' ) ; } } > { me . qq ? '已绑定' : '未绑定' } < /span></div > < />); } if ( social . github ) { doms . push ( < > < div > GitHub < /div> < div > < span className = "a" onClick = { ( ) => { submit ( 'github' ) ; } } > { me . github ? '已绑定' : '未绑定' } < /span></div > < />); } if ( social . wechat ) { doms . push ( < > < div > 微信 < /div> < div > < span className = "a" onClick = { ( ) => { submit ( 'wechat' ) ; } } > { me . wechat ? '已绑定' : '未绑定' } < /span></div > < />); } return ( < div className = "card" > < div className = "card-header" > < div className = "card-title" > 第三方帐号 < /div></div > < div className = "card-body" style = { { overflow : 'hidden' } } > < div className = "row" > { doms . map ( ( item , index ) => { return ( < div key = { index } className = { `col-${ 12 / doms . length }` } > { item } < /div>); } ) } < /div> < /div> < /div>); }