vue移动端app开发实现微信,QQ,新浪微博登录

export default { name: 'Login', data() { return { username: '', password: "", auths:null,//初始化 headerimg:require("../../assets/images/logoleyi.png") } }, computed: { ...mapState({ items: state => store.state.autoLogin.item, }) }, created: function() { this.huocode() }, methods: { ...mapActions("user",["loginuser"]), ...mapActions("autoLogin",["authLogin"]), ...mapMutations("autoLogin",["getAuths"]), async login() { if (this.username == "" || this.password == "") { Toast("输入框不能为空") return } let payload = { body: { umobile:this.username, upassword:this.password, }, callback:this.completed } this.loginuser(payload) }, completed(){ this.$router.push('/main') }, huocode(){ // this.getAuths() let that=this; document.addEventListener('plusready', function() { plus.oauth.getServices(function(services) { console.log(services) that.auths = services; }, function(e) { alert("获取登录服务列表失败:" + e.message + " - " + e.code); }); }) }, loginclick(name){ this.authLogin(name); }, authLogin(type){ let that=this; let s; for (var i = 0; i < that.auths.length; i++) { if (that.auths[i].id == type) { s = that.auths[i]; break; } } if (!s.authResult) { s.login(function(e) { Toast("登录认证成功!"); that.authUserInfo(type); }, function(e) { Toast("登录认证失败!"); }); } else { Toast("已经登录认证!"); } }, authUserInfo(type) { let that=this; var s; for (var i = 0; i < that.auths.length; i++) { if (that.auths[i].id == type) { s = that.auths[i]; break; } } if (!s.authResult) { Toast("未授权登录!"); } else { s.getUserInfo(function(e) { var josnStr = JSON.stringify(s.userInfo); var jsonObj = s.userInfo; console.log("获取用户信息成功:" + josnStr); that.showData(type,jsonObj); that.authLogout(); }, function(e) { alert("获取用户信息失败:" + e.message + " - " + e.code); }); } }, authLogout() { for (var i in that.auths) { var s = that.auths[i]; if (s.authResult) { s.logout(function(e) { console.log("注销登录认证成功!"); }, function(e) { console.log("注销登录认证失败!"); }); } } }, showData(type,data) { let that=this; switch (type){ case 'weixin': that.headImage= data.headimgurl; break; case 'qq': that.headImage = data.figureurl_qq_2; break; case 'sinaweibo': that.headImage = data.avatar_large; break; default: break; } } }, watch:{ items(){ console.log("获取内容"+this.items) } } };

源码视图做配置

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容