<template> <view> <status-nav :titleVal="'登录'" :tabcolor="'rgba(244, 244, 244,1)'" :whereCome="1*1" :statusTitle="true" :backgroudColor="'rgba(244, 244, 244,1)'"></status-nav> <view class='login-header'> <image class="infoImg" :style="{boxShadow: '0px 0px 20px '+ publicColor}" mode="aspectFit" :src="userInfo.avatarUrl || imgSrc"></image> <view class="logo-name">恒美植发</view> </view> <view class="login-box"> <button class='login-btn' :style="{background:publicColor}" type='primary' @click="bindGetUserInfo">微信授权</button> <!--新版登录方式--> <!-- <button v-if="canIGetUserProfile" class='login-btn' type='primary' @click="bindGetUserInfo">授权登录</button> --> <!--旧版登录方式--> <!-- <button v-else class='login-btn' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo">授权登录</button> --> <view class="xie-box">登录代表您已同意<text @tap="goXie" class="xieCon">《用户服务协议》</text></view> </view> <!-- 弹框 --> <pu-po :isShowT="isShowT" :contentVal="'请完善个人资料'" :clearVal="'否'" :comfrimVal="'是'" @comfirmev="goInfo" @cancleev="quXiao"></pu-po> </view> </template> <script> export default { data() { return { userInfo: {},//用户信息 publicColor:uni.getStorageSync('publicColor'), canIGetUserProfile: false, imgSrc: '/static/public/logo.png',//默认logo头像 invite_code:'',//用户邀请码(选填)(恒美) channel:'',//来源渠道,二维码或分享链接中携带的来源渠道参数(恒美) invite_source:'',//邀请码来源[def默认|link分享注册|qr扫码注册] isShowT:false, infoObj:{} }; }, onLoad(options) { if(uni.getStorageSync('showPhone')!='') this.isShowT = uni.getStorageSync('showPhone') let ya = this; // 微信扫码后会自动编码,所以需要解码 if (options && options.q) { let arr = decodeURIComponent(options.q).split('?')[1].split('&') let obj = {} arr.forEach(item => { let brr = item.split('=') obj[brr[0]] = brr[1] }) // console.log(obj) //得到参数组成的对象 ya.invite_code = obj.invite_code } if (uni.getUserProfile) { this.canIGetUserProfile = true; } }, methods: { goInfo(){ uni.setStorageSync('firstInfo',this.infoObj) uni.navigateTo({ url:'/pagesA/nodifyData/nodifyData?whereNum=2' }) this.isShowT = false }, quXiao(){ this.$toolAll.tools.showToast('登录成功','success') setTimeout(()=>{ uni.reLaunch({ url:'/pages/tabbar/pagehome/pagehome' }) },1000) this.isShowT = false }, goXie(){ uni.navigateTo({ url:'/pages/login/xiey' }) }, //调起登录授权 bindGetUserInfo(e) { let ya = this; //新版登录方式 uni.getUserProfile({ desc: '登录', lang: 'zh_CN', success: (res) => { ya.userInfo = res.userInfo; // console.log('可用用户信息:',ya.userInfo); try { ya.login(); } catch (e) {} }, fail: (res) => {} }); }, login() { let ya = this; // 获取登录用户code uni.login({ provider: 'weixin', success: function(res) { if (res.code) { let code = res.code; ya.updateUserInfo(code); } else { uni.showToast({ title: '登录失败!', duration: 2000 }); } }, }); }, //调用登录接口 updateUserInfo(code) { let ya = this; uni.showToast({ title: '登录中...', icon:'loading', duration:10000 }) var params = { code:code, nickname: ya.userInfo.nickName,//用户昵称 headimgurl: ya.userInfo.avatarUrl,//用户头像 country: ya.userInfo.country,//用户所在国家 province: ya.userInfo.province,//用户所在省份 city: ya.userInfo.city,//用户所在城市 gender: ya.userInfo.gender,//用户性别 language:ya.userInfo.language,//语言 invite_code:ya.invite_code,//用户邀请码 invite_source:ya.invite_source,//邀请码来源[def默认|link分享注册|qr扫码注册] channel:ya.channel,//来源渠道,二维码或分享链接中携带的来源渠道参数 is_active:1 } this.$requst.post('user/login',params).then(res => { // console.log(res); if(res.data.token!=''){ let comeOn = { nickname: ya.userInfo.nickName,//用户昵称 headimgurl: ya.userInfo.avatarUrl,//用户头像 country: ya.userInfo.country,//用户所在国家 province: ya.userInfo.province,//用户所在省份 city: ya.userInfo.city,//用户所在城市 language:ya.userInfo.language,//语言 } uni.setStorageSync('params',params) uni.setStorageSync('comeOn',comeOn) uni.setStorageSync('userId',res.data.account_id) uni.setStorageSync('token',res.data.token)//缓存token uni.setStorageSync('expire',res.data.expire)//缓存失效时间(时间戳格式) uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权 this.isShowT = true this.infoObj = { headimgurl:ya.userInfo.avatarUrl, nickname:ya.userInfo.nickName, gender:ya.userInfo.gender } } },error => {}) } } } </script> <style lang="less"> @tcolor:#333333; @tcolorp:#3875F6; .login-header {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 40%;} .infoImg {width: 192rpx;height: 192rpx;border-radius: 100%;} .logo-name {font-size: 30rpx;font-weight: bold;margin-top: 20rpx;color: @tcolor;} .login-box {margin-top: 60rpx;text-align: center;} .login-btn {width: 80%;margin-top: 50%;} .xie-box{display: flex;justify-content: center;align-items: center;color: @tcolor;margin-top: 30rpx;} .xieCon{color: @tcolorp;} </style>