赞
踩
<template> <view class=""> <view class="content"> <view class="login-item"> <view class="logo"><open-data type="userAvatarUrl"></open-data></view> </view> <view class="login-tip"> <view>申请获取以下权限</view> <view v-if="type==1">获得你的公开信息 (昵称、头像等)</view> </view> <view class="u-flex u-row-between"> <!-- #ifdef MP-WEIXIN --> <u-button hover-class="none" shape="circle" @click="handleRefuse" :custom-style="{ width: '90%',marginRight: '10px' }" v-if="type==1">拒绝</u-button> <u-button v-if="type==1" hover-class="none" type="primary" shape="circle" :custom-style="{ width: '90%'}" @click="getnickshow=true" > 允许 </u-button> <u-button v-if="type==2" hover-class="none" type="primary" shape="circle" open-type="getPhoneNumber" @getphonenumber='getphonenumber' :custom-style="{ width: '90%' }"> 获取手机号 </u-button> <!-- #endif --> </view> </view> <u-popup mode="bottom" :show="getnickshow" @close="getnickshow = false"> <view class="getnickbox"> <view class="flex_align_center"> <image :src="project.logo" class="logoimg" mode="aspectFit"></image> <view class="name"> {{project.name}} <text>申请</text> </view> </view> <view class="m1 mt30">获取你的头像、昵称</view> <view class="m2">展示个人信息</view> <view class="xin1"> <button type="default" class=" buttoncss" open-type="chooseAvatar" @chooseavatar="chooseavatar"> <view class=" toubox"> <view class="t1">头像</view> <view v-if="avatar == ''" class="avatarbox"> <u-icon name="account-fill" size="50" color="#999"></u-icon> </view> <image v-else :src="avatar" class="avatarimg"></image> </view> <u-icon name="arrow-right" size="25" color="#999"></u-icon> </button> </view> <view class="nick"> <view class="n1">昵称:</view> <input type="nickname" v-model="nickname" placeholder="请输入昵称"> </view> <view class="fixedBtn wan"> <button size="mini" open-type="getUserInfo" @click="getUserInfo" class="btn">完成</button> </view> </view> </u-popup> </view> </template> <script> import baseUrl from "@/api/baseUrl.js" export default { data() { return { getnickshow: false, type: 1, // 1获取昵称头像 2获取手机号 project: { name: '', logo: '', }, nickname: '', avatar: '', }; }, onShow() { // 获取项目的 logo 和 名称 uni.getSystemInfo({ success: (res) => { this.project.name = res.appName } }) this.project.logo = __wxConfig.accountInfo.icon }, methods: { handleRefuse() { this.$u.toast('未授权'); setTimeout(() => { uni.$u.route({ type: 'back' }) }, 1000); }, getCode: async function() { return new Promise((resolve, reject) => { uni.login({ // #ifdef MP-ALIPAY scopes: 'auth_user', // #endif success: function(res) { if (res.code) { resolve(res.code); } else { //login成功,但是没有取到code reject('未取得code'); } }, fail: function(res) { reject('用户授权失败wx.login'); } }); }); }, //用户授权得到用户的信息 微信授权 // #ifdef MP-WEIXIN // 选择用户头像, 重点, 得调用下上传图片接口 chooseavatar(e) { let that = this; uni.uploadFile({ url: baseUrl + 'upload', filePath: e.detail.avatarUrl, name: 'file', formData: { file: e.detail.avatarUrl }, header: {}, success: r => { let imgData = JSON.parse(r.data) that.avatar = imgData.url; } }); }, async getUserInfo() { let that = this; if (this.avatar == "") { uni.showToast({ title: '请选择头像', icon: 'none' }) return } if (this.nickname == "") { uni.showToast({ title: '请编辑用户昵称或昵称不能使用特殊字符', icon: 'none' }) return } this.getnickshow = false; this.type = 2; }, // 获取手机号 登录 getphonenumber(e) { console.log(e, '手机号') var detail = e.detail; let that = this; if (detail.errMsg == "getPhoneNumber:ok") { console.log("用户同意授权") uni.login({ scopes: 'weixin', success: function(res) { if (res.code) { let data = { nickName: that.nickname, avatarUrl: that.avatar, encryptedData:detail.encryptedData, iv:detail.iv, code:res.code, } uni.request({ url: baseUrl + 'login', //调用登录接口 method: 'POST', header: { 'Content-Type':'application/x-www-form-urlencoded' }, data: data, success(e) { if(e.data.code == 0){ uni.setStorageSync('id', e.data.data.id); // 存储用户id let pages = getCurrentPages(); //当从其它页面跳转到当前页面时,只跳转一次 let level = pages.length > 2 && (pages[pages.length - 2].route.indexOf("wxlogin") > -1) ? 2 : 1; uni.$u.route({ type: 'back', delta: level }) } else { that.$u.toast(e.data.msg); return; } }, fail(e) { uni.showToast({ icon: 'none', title: '网络错误!' }) } }) } } }); } else { console.log('拒绝获取手机号'); } }, // #endif } }; </script> <style lang="scss"> .content { background-color: #fff; height: 100vh; padding: 100rpx 60rpx 0; } .login-item { display: flex; justify-content: center; padding-bottom: 40rpx; border-bottom: 1rpx solid #dddddd; } .logo { display: block; width: 180rpx; height: 180rpx; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); } .login-tip { padding: 60rpx 0; &-big { font-size: 28rpx; line-height: 80rpx; } &-small { font-size: 12px; color: #9e9e9e; } } // 微信授权新规则 .getnickbox { padding: 40rpx 20rpx; .logoimg { width: 50rpx; height: 50rpx; } .name { margin-left: 20rpx; text { margin-left: 10rpx; } } .m1 { font-weight: 500; } .m2 { padding-bottom: 30rpx; border-bottom: 1rpx solid #f2f2f2; color: #999; padding-top: 10rpx; font-size: 24rpx; } .xin1 { border-bottom: 1rpx solid #f2f2f2; margin-bottom: 30rpx; .toubox { padding: 10rpx 0; display: flex; align-items: center; .t1 { font-size: 28rpx; margin-right: 30rpx; } .avatarbox { width: 100rpx; height: 100rpx; border-radius: 20rpx; } .avatarimg { width: 100rpx; height: 100rpx; border-radius: 20rpx; } } } .buttoncss { display: flex; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 0px; border: 0rpx solid transparent; } button::after { border: 0px solid rgba(0, 0, 0, .2); } .nick { padding-bottom: 30rpx; border-bottom: 2rpx solid #f2f2f2; display: flex; align-items: center; padding-left: 14px; padding-right: 14px; .n1 { font-size: 28rpx; margin-right: 30rpx; } } .wan { height: 80rpx; box-shadow: 0rpx 0rpx 0rpx 0rpx; width: 650rpx; border-radius: 38rpx; // border: 2rpx solid #FFF579; margin: 30rpx auto 0; .btn { width: 650rpx; height: 80rpx; line-height: 80rpx; border-radius: 38rpx; text-align: center; background: #3c9cff; font-size: 32rpx; font-family: Source Han Sans CN; color: #fff; // border: 2rpx solid #FFF579; } } .flex_align_center { display: flex; align-items: center; } .mt30 { margin-top: 30rpx; } } .u-flex-center, .flex_align_center, .u-flex{ display: flex; align-items: center; } .flex_jus_between,.u-row-between{ justify-content:space-between; } .u-flex-center, .flex_align_center, .u-flex{ display: flex; align-items: center; } </style>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。