|
|
import React, { Component } from 'react';
|
|
|
|
|
|
import { SnackbarHOC, getImageUrl, WordsBtn } from 'educoder';
|
|
|
import { Form, Button, Input ,Modal } from 'antd'
|
|
|
import Modals from "../../modals/Modals";
|
|
|
import '../../courses/css/Courses.css'
|
|
|
import './common.css'
|
|
|
import axios from 'axios'
|
|
|
|
|
|
class AccountSecure extends Component {
|
|
|
constructor (props) {
|
|
|
super(props)
|
|
|
this.state = {
|
|
|
Modalstype:false,
|
|
|
list:[{
|
|
|
en_type: "wechat",
|
|
|
id: null,
|
|
|
nickname: "",
|
|
|
},{
|
|
|
en_type: "qq",
|
|
|
id: null,
|
|
|
nickname: "",
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
IsPC=()=>{
|
|
|
var userAgentInfo = navigator.userAgent;
|
|
|
var Agents = ["Android", "iPhone",
|
|
|
"SymbianOS", "Windows Phone",
|
|
|
"iPad", "iPod"];
|
|
|
var flag = true;
|
|
|
for (var v = 0; v < Agents.length; v++) {
|
|
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
|
|
flag = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
return flag;
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
let {basicInfo}=this.props;
|
|
|
let {list}=this.state;
|
|
|
let newlist=list;
|
|
|
if(basicInfo===undefined||JSON.stringify(basicInfo) == "{}"||basicInfo&&basicInfo.open_users.length===0){
|
|
|
|
|
|
}else{
|
|
|
basicInfo&&basicInfo.open_users.map((item,key)=>{
|
|
|
newlist.map((items,keys)=>{
|
|
|
if(item.en_type===items.en_type){
|
|
|
items.id=item.id;
|
|
|
items.nickname=item.nickname;
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
this.setState({
|
|
|
list:newlist
|
|
|
})
|
|
|
|
|
|
}
|
|
|
showModal=()=>{
|
|
|
this.setState({
|
|
|
visible: true,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
handleOk=(e)=> {
|
|
|
this.setState({
|
|
|
visible: false,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
handleCancel=()=>{
|
|
|
this.setState({
|
|
|
visible: false,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
Cancelundologins=()=>{
|
|
|
this.setState({
|
|
|
Modalstype:false,
|
|
|
ModalCancel:this.Cancelundologin,
|
|
|
ModalSave:this.Saveundologin,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
Saveundologin=(id)=>{
|
|
|
let {basicInfo}=this.props;
|
|
|
let url=`/users/accounts/${basicInfo.id}/open_users/${id}.json`;
|
|
|
axios.delete(url).then((result)=>{
|
|
|
if(result.data.status===0){
|
|
|
this.props.showNotification('解绑成功');
|
|
|
this.Cancelundologins()
|
|
|
this.props.getBasicInfo()
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
undologin=(type,id)=>{
|
|
|
this.setState({
|
|
|
Modalstype:true,
|
|
|
Modalstopval:type==="wechat"?"是否确定解绑微信账号？":"是否确定解绑QQ账号？",
|
|
|
ModalCancel:this.Cancelundologins,
|
|
|
ModalSave:()=>this.Saveundologin(id),
|
|
|
})
|
|
|
}
|
|
|
openqqlogin=()=>{
|
|
|
window.location.href=`https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2f${window.location.host}%2fotherloginqq&response_type=code`
|
|
|
}
|
|
|
|
|
|
openphoneqqlogin=()=>{
|
|
|
window.open(
|
|
|
`https://xui.ptlogin2.qq.com/cgi-bin/xlogin?appid=716027609&pt_3rd_aid=101508858&daid=383&pt_skey_valid=0&style=35&s_url=http%3A%2F%2Fconnect.qq.com&refer_cgi=authorize&which=&client_id=101508858&response_type=code&scope=get_user_info&redirect_uri=https%3a%2f%2ftest-newweb.educoder.net%2fotherloginqq&response_type=code`
|
|
|
)
|
|
|
}
|
|
|
render() {
|
|
|
let flag = this.IsPC(); //true为PC端，false为手机端
|
|
|
let {list}=this.state;
|
|
|
return (
|
|
|
<div>
|
|
|
<div className="basicForm settingForm">
|
|
|
{/*提示*/}
|
|
|
<Modals
|
|
|
modalsType={this.state.Modalstype}
|
|
|
modalsTopval={this.state.Modalstopval}
|
|
|
modalCancel={this.state.ModalCancel}
|
|
|
modalSave={this.state.ModalSave}
|
|
|
loadtype={this.state.loadtype}
|
|
|
/>
|
|
|
<style>{`
|
|
|
|
|
|
// .flexRow {
|
|
|
// padding: 15px 0;
|
|
|
// }
|
|
|
.flexRow .name {
|
|
|
margin-left: 20px;
|
|
|
color: #999999;
|
|
|
|
|
|
text-align: center;
|
|
|
flex: 0 0 100px;
|
|
|
}
|
|
|
.flexRow .description {
|
|
|
flex: 1;
|
|
|
color: #CDCDCD;
|
|
|
}
|
|
|
.description span {
|
|
|
color: #05101A;
|
|
|
}
|
|
|
.flexRow .status {
|
|
|
width: 100px;
|
|
|
color: #28AC7F;
|
|
|
text-align: right;
|
|
|
}
|
|
|
// .flexTable .flexTable {
|
|
|
// border-bottom: 1px solid #EBEBEB;
|
|
|
// }
|
|
|
|
|
|
|
|
|
.settingForm label{
|
|
|
color: #999999;
|
|
|
font-size: 14px !important ;
|
|
|
margin-left: 120px;
|
|
|
}
|
|
|
.settingForm input {
|
|
|
width: 340px;
|
|
|
}
|
|
|
.settingForm input.validateInput {
|
|
|
width: 220px;
|
|
|
}
|
|
|
.settingForm .formItemInline button {
|
|
|
width: 110px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.settingForm .ant-form-item-label {
|
|
|
width: 204px;
|
|
|
}
|
|
|
.formItemInline .ant-form-explain{
|
|
|
position:absolute;
|
|
|
bottom:-17px;
|
|
|
left:0px;
|
|
|
width:100%;
|
|
|
}
|
|
|
.weixinlogo{
|
|
|
font-size: 40px !important;
|
|
|
color: #4eaf2b;
|
|
|
}
|
|
|
.qqlogo{
|
|
|
font-size: 40px !important;
|
|
|
color: #29a1e6;
|
|
|
}
|
|
|
|
|
|
.lineheight60{
|
|
|
line-height: 60px;
|
|
|
}
|
|
|
.pt19{
|
|
|
padding-top: 19px;
|
|
|
}
|
|
|
`}</style>
|
|
|
<div className="title">绑定登录账号</div>
|
|
|
|
|
|
<Form>
|
|
|
|
|
|
{list.map((item,key)=>{
|
|
|
|
|
|
return(
|
|
|
<div className="flexTable" key={key}>
|
|
|
<div className="flexTable">
|
|
|
<div className="flexRow">
|
|
|
<div className="name">
|
|
|
{item.en_type!="qq"?<i className={"iconfont icon-weixin2 weixinlogo mr10"}></i>:<i className={"iconfont icon-qq qqlogo mr10"}></i>}
|
|
|
{item.en_type!="qq"?<span className={"color-ooo"}>微信</span>:<span className={"color-ooo"}>QQ</span>}
|
|
|
</div>
|
|
|
|
|
|
<div className="description lineheight60">
|
|
|
<span className={"color-grey-9 ml80"}>{item.nickname}</span>
|
|
|
</div>
|
|
|
|
|
|
<div className="status pt19">
|
|
|
{item.en_type!="qq"?<WordsBtn style={ item.id===null?"blue":"colorgrey9"} className={item.id===null?"borderBottom":""}
|
|
|
onClick={
|
|
|
item.id===null?() => this.showModal("wechat"):() => this.undologin("wechat",item.id)
|
|
|
}
|
|
|
>{item.id===null?"绑定":"解绑"}</WordsBtn>:<WordsBtn style={ item.id===null?"blue":"colorgrey9"} className={item.id===null?"borderBottom":""}
|
|
|
onClick={
|
|
|
item.id===null?flag===true?() => this.openphoneqqlogin():() => this.openqqlogin():() => this.undologin("qq",item.id)
|
|
|
}
|
|
|
>{item.id===null?"绑定":"解绑"}</WordsBtn>}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
</Form>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.ml70{
|
|
|
margin-left: 70px;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
<Modal
|
|
|
closable={false}
|
|
|
footer={null}
|
|
|
visible={this.state.visible}
|
|
|
onOk={this.handleOk}
|
|
|
onCancel={this.handleCancel}
|
|
|
>
|
|
|
<div>
|
|
|
<iframe
|
|
|
className={"weixinheight390 ml70"}
|
|
|
frameBorder="0"
|
|
|
sandbox="allow-scripts allow-same-origin allow-top-navigation"
|
|
|
scrolling="no"
|
|
|
src={`https://open.weixin.qq.com/connect/qrconnect?appid=wx6b119e2d829c13fa&redirect_uri=https%3a%2f%2f${window.location.host}%2fotherloginstart&response_type=code&scope=snsapi_login&state=account#wechat_redirect`}></iframe>
|
|
|
<p className="clearfix pagemancenter">
|
|
|
<a className={"startlogin color-blue"} onClick={()=>this.handleCancel()}>取消</a>
|
|
|
</p>
|
|
|
</div>
|
|
|
</Modal>
|
|
|
</div>
|
|
|
<div style={{color: '#989898', marginLeft: '20px'}}>* 我们确保你所提供的信息均处于严格保密状态，不会泄露</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
const WrappedAccountSecure = Form.create({ name: 'AccountSecure' })(AccountSecure);
|
|
|
|
|
|
export default WrappedAccountSecure;
|
