阅读量:4
流程：登录注册功能,通过uni.getUserProfile获取wxcode,通过wxcode传给后端获取openid,sessionkey,unionid。 通过<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>, 传到后端这些参数: 'session_key': $this.openidData.sessionKey, 'encryptedData': e.detail.encryptedData, 'iv': e.detail.iv 获取手机号, 再将手机号，unionid，openid传到后端进行登录 <template> <view class="page"> <!-- 自定义头部 navbar --> <u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack" :background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false" :is-back="pageStatus != 'home'"></u-navbar> <!-- logo --> <view class="logo-wrap" v-if="pageStatus == 'home' || pageStatus == 'getWxRole'"> <image class="logo" src="xxxxxxxxxxxxxx/static/login/login_logo.png"></image> <view class="app-name">欢迎登录</view> <view class="app-title">弘云艺术中心</view> </view> <!-- 默认登录页面显示 --> <view style="width: 100%;" v-if="pageStatus == 'home'"> <view class="text-area" @click="loginByWx">手机号快捷登录</view> </view> <!-- 微信授权登录，获取用户信息 --> <view style="width: 100%;" v-if="pageStatus == 'getWxRole'"> <view class="info">为提供优质服务,需要获取你的以下信息 :</view> <view class="public"> <view class="public-dot"></view> <view class="public-text">你的公开信息(头像、昵称等)</view> </view> <view class="text-enter" @click="getWxLoginRole">授权进入</view> </view> <!-- 微信登录小程序，再授权获取用户信息之后 --> <view class="loginWx" v-if="pageStatus == 'loginByWx'"> <view class="title">欢迎使用 弘云艺术中心</view> <view class="desc">立即登录享受优质服务</view> <view class="avatar"> <image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image> </view> <u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button> </view> <!-- 协议勾选 --> <view class="agree" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' "> <view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag"> <image src="xxxxxxxxxxx/static/mine/check.png"> </image> </view> <view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag"> <image src="xxxxxxxxxxxxxxxxx/static/operate/checked.png"> </image> </view> <view class="agree_text"> 登录代表您已同意 <span>《用户服务协议》《隐私权政策》</span> </view> </view> </view> </template> <script> import FunUniappTheme from '@/theme.scss'; export default { data() { return { // 页面状态，默认为 home // getWxRole：获取微信权限页，loginByWx：微信授权登录页 // loginByCode：手机号+验证码登录页，loginByPwd：手机号+密码登录 // forgetPwd：找回密码页面，resetPwd，重置密码页面 pageStatus: 'home', // 协议是否勾选 agree_flag: false, // 微信授权的用户信息 wxLoginUserInfo: {}, // openid openId: '', // 系统内用户信息 userInfo: {}, //openid openidData: {} }; }, onShow() { }, onLoad(ops) { if (ops && ops.interceptcard && ops.interceptcard === "true") { uni.showToast({ title: '购买商品,请先登录注册。', icon: 'none', duration: 4000, }); } if (ops && ops.goods_id_detail) { console.log(ops.goods_id_detail, '二维码商品详情') uni.setStorageSync('goods_id_detail', ops.goods_id_detail) } console.log(FunUniappTheme); }, onReady() { }, methods: { // 勾选/取消用于协议 changeAgreeFlag() { this.agree_flag = !this.agree_flag; }, // 微信登录 loginByWx() { if (!this.agree_flag) { uni.showToast({ icon: 'none', title: '请先阅读并勾选协议' }); return; } this.getUserInfoByWx(() => { this.getWxCode(code => { let $this = this; console.log('执行了吗', code) uni.request({ url: "xxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2", method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'wxcode': code, 'parent_unionid': uni.getStorageSync('unionid') }, success(res) { $this.openidData = res.data.data; console.log(res.data.data, 9999, $this.openidData); uni.setStorageSync('OPEN_ID', res.data.data.openid) } }); }); }); }, // 自定义navbar的返回方法 navbarBack() { if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' ) { this.pageStatus = 'home'; } else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') { this.pageStatus = 'loginByPwd'; } else if (this.pageStatus == 'loginByPwd') { this.pageStatus = 'loginByCode'; } }, // 微信授权 getWxLoginRole() { if (!this.agree_flag) { uni.showToast({ icon: 'none', title: '请先阅读并勾选协议' }); return; } this.getUserInfoByWx(() => { this.getWxCode(code => { let $this = this; console.log('执行了吗', code) uni.request({ url: "xxxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2", method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'wxcode': code, 'parent_unionid': uni.getStorageSync('unionid') }, success(res) { $this.openidData = res.data.data; console.log(res.data.data, 9999, $this.openidData); uni.setStorageSync('OPEN_ID', res.data.data.openid) } }); }); }); }, //个人中心 userinfo() { uni.request({ url: "xxxxxxxxxxxxxindex.php?m=user&c=indexapi&a=userinfo", method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'open_id': uni.getStorageSync('OPEN_ID') }, success(res) { console.log(res.data.data, '个人中心222'); uni.setStorageSync('USER_ID', res.data.data.info.user_id) uni.setStorageSync('user_rank', res.data.data.info.user_rank) if (uni.getStorageSync('goods_id_detail')) { uni.reLaunch({ url: '/pages-mall/pages/goods/detail?goods_id_detail=' + uni .getStorageSync('goods_id_detail') }); } else { uni.reLaunch({ url: '/pages/home/index' }); } } }); }, // 基于uni的获取code方法 getWxCode(callBack) { uni.login({ provider: 'weixin', onlyAuthorize: true, success: loginRes => { console.log(loginRes, '获取信息') callBack(loginRes.code); }, fail(e) {} }); }, // 获取openId getOpenId(code, callBack) { this.$u.api.getOpenId(code).then(res => { // uni.setStorageSync('OPEN_ID', res.openid); callBack(res); }); }, // 获取个人信息 getUserInfoByWx(callBack) { let $this = this; uni.getUserProfile({ desc: '获取你的昵称、头像', success: function(data) { console.log(data, '用户信息') uni.setStorageSync({ key: 'APP_WX_USERINFO', data: data }); $this.wxLoginUserInfo = data; $this.pageStatus = 'loginByWx'; callBack(); }, fail: function(error) {} }); }, // 获取手机号回调 decryptPhoneNumber(e) { let $this = this; console.log(e.detail, 9898) uni.request({ url: "xxxxxxxxxxxxxxx/index.php?m=user&c=indexapi&a=decryptwechatdata", method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'session_key': $this.openidData.sessionKey, 'encryptedData': e.detail.encryptedData, 'iv': e.detail.iv }, success(res) { console.log(res.data, '手机号'); uni.request({ url: "xxxxxxxxxxxxxxxxxxxxxx/index.php?m=oauth&c=indexapi&a=bind_register", method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'mobile': res.data.data.phoneNumber, 'unionid': $this.openidData.unionid, 'openid': $this.openidData.openid }, success(res) { console.log(res.data, '登录成功'); if (res.data.code === 0) { $this.userinfo() uni.setStorageSync('IS_LOGIN', true); uni.setStorageSync('fh_type',0) console.log(uni.getStorageSync('IS_LOGIN'), '成功了？', uni.getStorageSync( 'USER_ID')) } } }); } }); }, // 微信小程序手机号登录 loginByOpenId() { const openid = uni.getStorageSync('OPEN_ID'); this.$u.api.loginByOpenId(openid).then(res => { this.userInfo = res; }); }, } }; </script> <style lang="scss" scoped> .page { padding: 0 40rpx; background-color: $app-theme-bg-color; } .logo-wrap { display: flex; // justify-content: center; padding-top: 100rpx; padding-bottom: 52rpx; flex-wrap: wrap; .logo { height: 168rpx; width: 166rpx; margin-left: 76rpx; margin-top: 50rpx; } .app-name { width: 100%; padding-top: 80rpx; margin-left: 78rpx; font-size: 38rpx; font-weight: 600; color: #333333; line-height: 52rpx; } .app-title { width: 100%; padding-top: 16rpx; margin-left: 78rpx; font-size: 38rpx; font-weight: 600; color: #333333; line-height: 52rpx; } } .text-area { width: 100%; height: 96rpx; background: #19be6b; font-weight: 400; border-radius: 56rpx; color: $app-theme-text-white-color; line-height: 16px; font-size: 32rpx; text-align: center; line-height: 96rpx; /* background: url(../../static/img/logo_newhope.png); */ } .info { font-size: 28rpx; font-weight: 400; color: $app-theme-text-black-color; line-height: 28rpx; margin-top: 180rpx; } .public { display: flex; align-items: center; margin-top: 30rpx; .public-dot { width: 6rpx; height: 6rpx; background: #999999; margin-right: 10rpx; } .public-text { font-size: 24rpx; font-weight: 400; color: #8f92a1; line-height: 24rpx; } } .text-enter { width: 100%; margin-top: 50rpx; height: 96rpx; background: $app-theme-color; font-weight: 400; border-radius: 56rpx; color: #ffffff; line-height: 16px; font-size: 32rpx; text-align: center; line-height: 96rpx; } .head { margin-top: 70rpx; width: 100%; display: flex; justify-content: space-between; } .back { width: 40rpx; height: 40rpx; } .agree { position: fixed; left: 50%; transform: translate(-50%, 0); bottom: 66rpx; width: 100vw; display: flex; align-items: center; justify-content: center; } .agree_img image { width: 32rpx; height: 32rpx; display: flex; align-items: center; } .agree_text { margin-left: 8rpx; font-size: 24rpx; font-weight: 400; color: #8f92a1; line-height: 24rpx; display: flex; align-items: center; span { color: $app-theme-color; } } .loginWx { width: 100%; padding-top: 64rpx; .title { text-align: left; font-size: 22px; font-family: PingFang-SC-Regular, PingFang-SC; font-weight: 400; color: #171717; line-height: 30px; margin-bottom: 12rpx; } .desc { text-align: left; font-size: 14px; font-family: PingFang-SC-Regular, PingFang-SC; font-weight: 400; color: #8f92a1; line-height: 14px; } .avatar { width: 160rpx; height: 160rpx; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 128rpx auto 160rpx auto; image { width: 100%; height: 100%; } } } </style> 