<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 rgba(0,0,0,.8)'}" mode="aspectFill" :src="userInfo.avatarUrl || imgSrc"></image> <view class="logo-name">{{appletName}}</view> </view> <view class="login-box"> <button class='login-btn' :style="{background:publicColor || 'linear-gradient(to right, #ff3772 0%,#fd5548 100%)'}" type='primary' @click="bindGetUserInfo">微信授权</button> <view class="xie-box">登录代表您已同意<text @tap="goXie" class="xieCon" style="color: #ff3772;">《用户服务协议》</text></view> </view> <!-- <view v-if="isShowP" class="disjcac posAll"> <view class="bacf radius20 width100 tank-box"> <view class="tc tank-box-itemone">请授权绑定手机号</view> <view class="fon28 colf pad-x30 pad-zy30 tc disjb"> <view class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view> <view :style="{background:publicColor}" class="pad-sx10 radius10 tank-btn posir"> 立即绑定 <button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button> </view> </view> </view> </view> --> <!-- <view class='login-header'> <image class="infoImg" :style="{boxShadow: '0px 0px 20px rgba(0,0,0,.8)'}" mode="aspectFill" :src="userInfo.avatarUrl || imgSrc"></image> <view class="logo-name">{{appletName}}</view> </view> <view class="login-box"> <view> <button class='login-btn' open-type="getPhoneNumber" @getphonenumber="getphonenumber" :style="{background:publicColor || 'linear-gradient(to right, #ff3772 0%,#fd5548 100%)'}" type='primary'>手机号授权登录</button> </view> <view class="xie-box">登录代表您已同意<text @tap="goXie" class="xieCon">《用户服务协议》</text></view> </view> <view v-if="isShowP" class="disjcac posAll"> <view class="bacf radius20 width100 tank-box"> <view class="tc tank-box-itemone">微信授权</view> <view class="fon28 colf pad-x30 pad-zy30 tc disjb"> <view class="pad-sx20 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view> <view :style="{background:publicColor}" class="pad-sx20 radius10 tank-btn posir"> 立即授权 <button @click="bindGetUserInfo" class="posia syxzo">立即授权</button> </view> </view> </view> </view> --> </view> </template> <script> export default { data() { return { userInfo: {},//用户信息 canIGetUserProfile: false, imgSrc: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',//默认logo头像 appletName:'商城小程序',//小程序名称 isShowP:false, }; }, onLoad() { if (uni.getUserProfile) { this.canIGetUserProfile = true; } // this.setLogo(); }, methods: { // 设置logo图 setLogo(){ this.$requst.get('index/base-config').then(res=>{ this.imgSrc = this.$http + res.data.logo; this.appletName = res.data.appletName; }) }, refuse(){//暂不绑定事件 this.isShowP=false; this.$toolAll.tools.showToast('登录成功','success') uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'}) }, getphonenumber(e){//授权绑定手机号 let ya = this; wx.login({ success:(res)=>{ this.$requst.post('/api/user/login',{code:res.code}).then(result => { if(e.detail.errMsg=="getPhoneNumber:ok"){ this.$requst.post('user/bind-phone',{openid: result.data.openid,session_key:result.data.session_key, iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{ console.log('手机号信息:',res); if(res.code==0){ this.$toolAll.tools.showToast('手机号绑定成功'); this.isShowP = true; // uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'}) } else this.$toolAll.tools.showToast(res.msg); },error=>{}) } else { // console.log('取消授权手机号') } }).catch(err=>{ console.log(err); }) } }) }, goXie(){ uni.navigateTo({ url:'/pagesB/login/xiey' }) }, //调起登录授权 bindGetUserInfo(e) { let ya = this; //新版登录方式 uni.getUserProfile({ desc: '登录', lang: 'zh_CN', success: (res) => { ya.userInfo = res.userInfo; uni.login({ provider: 'weixin', success: (res)=> { if (res.code) { ya.updateUserInfo(res.code); } else { uni.showToast({ title: '登录失败!', duration: 2000 }); } }, }); }, fail: (res) => {} }); }, //调用登录接口 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,//语言 is_active:1 } this.$requst.post('/api/user/login',params).then(res => { if(res.data.token!=''){ uni.setStorageSync('userId',res.data.account_id) uni.setStorageSync('token',res.data.token)//缓存token uni.setStorageSync('openid',res.data.openid)//缓存openid uni.setStorageSync('expire',res.data.expire)//缓存失效时间(时间戳格式) uni.setStorageSync('phone_active',res.data.phone_active)//是否授权手机号 uni.setStorageSync('is_active',res.data.is_active)//是否授权头像和昵称 uni.setStorageSync('invite_code',res.data.invite_code)//缓存邀请码 if(uni.getStorageSync('page-path-options')) { uni.reLaunch({ // 重新进入当前页面 url:uni.getStorageSync('page-path-options') }) } else { uni.reLaunch({ url:'/pages/tabbar/pagehome/pagehome' }) } } },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: 30rpx;color: @tcolor;} .login-box {margin-top: 60rpx;text-align: center;} .login-btn {width: 80%;margin-top: 50%;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);} .xie-box{display: flex;justify-content: center;align-items: center;color: @tcolor;margin-top: 30rpx;} .xieCon{color: @tcolorp;} </style>