Lee
/
leave-unused
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新登录方式修改-1128

master
Lee 2022-11-28 15:58:25 +08:00
parent 67e36a2629
commit fb63c994ed
8 changed files with 481 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
pages/login/login.vue
View File

@ -6,21 +6,59 @@
<view class="logo-title font24 color-99 mar-s20" style="text-align: center;">{{appleSubtitle}}</view>
</view>
<view class="login-footer">
<view class="login-btn radius20 color-ff background-blue font36" type='primary' @tap="bindGetUserInfo">微信授权</view>
<view class="login-btn radius20 color-ff background-blue font36" type='primary' @tap="empowerShow=true" v-if="!isActive">微信授权</view>
<view class="login-btn radius20 color-ff background-blue font36" type='primary' @tap="bindGetUserInfo('other')" v-else>微信授权</view>
<view class="agreement-box font30">如您点击授权，则表示已阅读<text @tap="toAgreement" class="agreement color-orange">《免责声明》</text></view>
</view>
<!-- 获取头像&昵称 -->
<view class="pop-up-bg" v-if="empowerShow">
<view class="user-info-box bg-white">
<view class="info">
<view class="cover">
<image :src="imgSrc" mode="aspectFit"></image>
</view>
<view class="name color-99 font24">{{appletName}}</view>
<view class="tips">
<view class="font26">邀请您补全个人信息</view>
<view class="font24 color-blue">(昵称、头像)</view>
</view>
</view>
<view class="msg">
<view class="item font26">
<text>头像</text>
<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
<image :src="userInfo.avatarUrl || logoAvatar" mode="aspectFit"></image>
</button>
</view>
<view class="item font26">
<text>昵称</text>
<input class="nick-name" type="nickname" @blur="nickNameInput" v-model="userInfo.nickName" placeholder="请输入昵称" placeholder-style="color:#999"/>
</view>
</view>
<view class="empower-btns font30">
<view class="btn color-99" @tap="refuseEv">拒绝</view>
<view class="btn color-blue" @tap="bindGetUserInfo('other')">允许</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {}, //用户信息
userInfo: {
nickName:'',
avatarUrl:''
}, //用户信息
canIGetUserProfile: false,
imgSrc: '/static/logo.png', //默认logo头像
logoAvatar:'/static/logo-avatar.png', //默认用户头像
appletName:'闲置商品', //小程序名称
appleSubtitle:'发布、购买闲置商品平台',
isShowP:false,
empowerShow:false, //是否显示授权弹窗
isActive:false, //是否已授权
};
},
onLoad() {
@ -28,6 +66,10 @@
this.canIGetUserProfile = true;
}
},
onShow() {
// 进入登录
this.bindGetUserInfo('enter');
},
methods: {
// 设置logo图
setLogo(){
@ -75,69 +117,119 @@
})
},
//调起登录授权
bindGetUserInfo(e) {
// 头像上传
uploadImg(url){
uni.showLoading({
title: '上传中'
});
this.$requst.upload('/api/v1/file/upload/image',{path:url}).then(res=>{
if(res.code==0) {
this.userInfo.avatarUrl = this.$hostHttp+res.data.src;
}
uni.hideLoading();
})
},
// 获取头像
chooseAvatar(e){
// 上传头像
this.uploadImg(e.detail.avatarUrl)
},
// 获取昵称
nickNameInput(e){
this.userInfo.nickName = e.detail.value
},
// 拒绝登录
refuseEv(){
this.$toolAll.tools.showToast('您已拒绝授权');
this.empowerShow = false;
},
// 验证登录信息
checkForm(){
if(!this.isActive){
if(this.userInfo.avatarUrl==''){
this.$toolAll.tools.showToast('请选择头像！')
return false;
}else if(this.userInfo.nickName==''){
this.$toolAll.tools.showToast('请输入昵称！')
return false;
}else{
return true;
}
}else{
return true;
}
},
//允许登录
bindGetUserInfo(status) {
//新版登录方式
uni.getUserProfile({
desc: '登录',
lang: 'zh_CN',
success: (res) => {
this.userInfo = res.userInfo;
uni.login({
provider: 'weixin',
success: (res)=> {
if (res.code) {
this.updateUserInfo(res.code);
} else {
uni.showToast({
title: '登录失败！',
duration: 2000
});
}
},
});
uni.login({
provider: 'weixin',
success: (res)=> {
if (res.code) {
this.updateUserInfo(res.code,status);
} else {
uni.showToast({
title: '登录失败！',
duration: 2000
});
}
},
fail: (res) => {}
});
},
//调用登录接口
updateUserInfo(code) {
uni.showToast({
title: '登录中...',
icon:'loading',
duration:10000
})
var params = {
code:code,
nickname: this.userInfo.nickName,//用户昵称
headimgurl: this.userInfo.avatarUrl,//用户头像
country: this.userInfo.country,//用户所在国家
province: this.userInfo.province,//用户所在省份
city: this.userInfo.city,//用户所在城市
gender: this.userInfo.gender,//用户性别
language:this.userInfo.language,//语言
is_active:1
}
this.$requst.post('/api/v1/user/login',params).then(res => {
if(res.code == 0){
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)//是否授权头像和昵称
if(uni.getStorageSync('page-path-options')) {
uni.reLaunch({ // 重新进入当前页面
url:uni.getStorageSync('page-path-options')
})
} else {
uni.reLaunch({
url:'/pages/idle/idle'
})
updateUserInfo(code,status) {
if(status=='enter'){
this.$requst.post('/api/v1/user/login',{code:code}).then(res => {
if(res.code == 0){
console.log(res,'进入登录信息');
if(res.data.is_active==1){
this.isActive = true;
}
}
},error => {
})
}
if(status=='other'){
if(this.checkForm()){
uni.showToast({
title: '登录中...',
icon:'loading',
duration:10000
})
var params = {
code:code,
nickname: this.userInfo.nickName,//用户昵称
headimgurl: this.userInfo.avatarUrl,//用户头像
is_active:1
}
this.$requst.post('/api/v1/user/login',params).then(res => {
if(res.code == 0){
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)//是否授权头像和昵称
if(uni.getStorageSync('page-path-options')) {
uni.reLaunch({ // 重新进入当前页面
url:uni.getStorageSync('page-path-options')
})
} else {
uni.reLaunch({
url:'/pages/idle/idle'
})
}
}
},error => {})
}
},error => {})
}
}
}
}
@ -187,4 +279,92 @@
.agreement-box{
margin-top: 30rpx;
}
/* 授权弹窗 */
.pop-up-bg{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.7);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.user-info-box{
box-sizing: border-box;
width: calc(100% - 150rpx);
border-radius: 10rpx;
padding: 40rpx 45rpx 35rpx;
background-color: #ffffff;
}
.user-info-box .info{
text-align: center;
}
.user-info-box .cover{
width: 150rpx;
height: 150rpx;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
.user-info-box .cover image{
width: 100%;
height: 100%;
}
.user-info-box .name{
line-height: 1.5;
margin: 12rpx 0 8rpx;
}
.user-info-box .tips{
line-height: 1.6;
}
.user-info-box .item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 15rpx 0;
border-bottom: 2rpx solid #f1f5f9;
}
.user-info-box .item text{
line-height: 1.8;
}
.user-info-box .avatar{
width: 100rpx;
height: 100rpx;
padding: 0;
border: 0;
margin: 0;
border-radius: 100%;
background: none;
}
.user-info-box .avatar image{
width: 100%;
height: 100%;
}
.user-info-box .nick-name{
height: 60rpx;
text-align: right;
}
.user-info-box .empower-btns{
display: flex;
align-items: center;
margin-top: 20rpx;
}
.user-info-box .empower-btns .btn{
width: 50%;
text-align: center;
align-items: 1.5;
padding-top: 20rpx;
}
</style>

BIN
static/logo-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/login/login.js.map vendored
View File

File diff suppressed because one or more lines are too long

211
unpackage/dist/dev/mp-weixin/pages/login/login.js vendored
View File

@ -99,6 +99,11 @@ var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
if (!_vm._isMounted) {
_vm.e0 = function($event) {
_vm.empowerShow = true
}
}
}
var recyclableRender = false
var staticRenderFns = []
@ -145,23 +150,65 @@ __webpack_require__.r(__webpack_exports__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var _default =
{
data: function data() {
return {
userInfo: {}, //用户信息
userInfo: {
nickName: '',
avatarUrl: '' },
//用户信息
canIGetUserProfile: false,
imgSrc: '/static/logo.png', //默认logo头像
logoAvatar: '/static/logo-avatar.png', //默认用户头像
appletName: '闲置商品', //小程序名称
appleSubtitle: '发布、购买闲置商品平台',
isShowP: false };
isShowP: false,
empowerShow: false, //是否显示授权弹窗
isActive: false //是否已授权
};
},
onLoad: function onLoad() {
if (uni.getUserProfile) {
this.canIGetUserProfile = true;
}
},
onShow: function onShow() {
// 进入登录
this.bindGetUserInfo('enter');
},
methods: {
// 设置logo图
setLogo: function setLogo() {var _this = this;
@ -209,69 +256,119 @@ var _default =
},
//调起登录授权
bindGetUserInfo: function bindGetUserInfo(e) {var _this3 = this;
// 头像上传
uploadImg: function uploadImg(url) {var _this3 = this;
uni.showLoading({
title: '上传中' });
this.$requst.upload('/api/v1/file/upload/image', { path: url }).then(function (res) {
if (res.code == 0) {
_this3.userInfo.avatarUrl = _this3.$hostHttp + res.data.src;
}
uni.hideLoading();
});
},
// 获取头像
chooseAvatar: function chooseAvatar(e) {
// 上传头像
this.uploadImg(e.detail.avatarUrl);
},
// 获取昵称
nickNameInput: function nickNameInput(e) {
this.userInfo.nickName = e.detail.value;
},
// 拒绝登录
refuseEv: function refuseEv() {
this.$toolAll.tools.showToast('您已拒绝授权');
this.empowerShow = false;
},
// 验证登录信息
checkForm: function checkForm() {
if (!this.isActive) {
if (this.userInfo.avatarUrl == '') {
this.$toolAll.tools.showToast('请选择头像！');
return false;
} else if (this.userInfo.nickName == '') {
this.$toolAll.tools.showToast('请输入昵称！');
return false;
} else {
return true;
}
} else {
return true;
}
},
//允许登录
bindGetUserInfo: function bindGetUserInfo(status) {var _this4 = this;
//新版登录方式
uni.getUserProfile({
desc: '登录',
lang: 'zh_CN',
uni.login({
provider: 'weixin',
success: function success(res) {
_this3.userInfo = res.userInfo;
uni.login({
provider: 'weixin',
success: function success(res) {
if (res.code) {
_this3.updateUserInfo(res.code);
} else {
uni.showToast({
title: '登录失败！',
duration: 2000 });
if (res.code) {
_this4.updateUserInfo(res.code, status);
} else {
uni.showToast({
title: '登录失败！',
duration: 2000 });
}
} });
},
fail: function fail(res) {} });
}
} });
},
//调用登录接口
updateUserInfo: function updateUserInfo(code) {
uni.showToast({
title: '登录中...',
icon: 'loading',
duration: 10000 });
var params = {
code: code,
nickname: this.userInfo.nickName, //用户昵称
headimgurl: this.userInfo.avatarUrl, //用户头像
country: this.userInfo.country, //用户所在国家
province: this.userInfo.province, //用户所在省份
city: this.userInfo.city, //用户所在城市
gender: this.userInfo.gender, //用户性别
language: this.userInfo.language, //语言
is_active: 1 };
this.$requst.post('/api/v1/user/login', params).then(function (res) {
if (res.code == 0) {
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); //是否授权头像和昵称
if (uni.getStorageSync('page-path-options')) {
uni.reLaunch({ // 重新进入当前页面
url: uni.getStorageSync('page-path-options') });
} else {
uni.reLaunch({
url: '/pages/idle/idle' });
updateUserInfo: function updateUserInfo(code, status) {var _this5 = this;
if (status == 'enter') {
this.$requst.post('/api/v1/user/login', { code: code }).then(function (res) {
if (res.code == 0) {
console.log(res, '进入登录信息');
if (res.data.is_active == 1) {
_this5.isActive = true;
}
}
}, function (error) {
});
}
if (status == 'other') {
if (this.checkForm()) {
uni.showToast({
title: '登录中...',
icon: 'loading',
duration: 10000 });
var params = {
code: code,
nickname: this.userInfo.nickName, //用户昵称
headimgurl: this.userInfo.avatarUrl, //用户头像
is_active: 1 };
this.$requst.post('/api/v1/user/login', params).then(function (res) {
if (res.code == 0) {
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); //是否授权头像和昵称
if (uni.getStorageSync('page-path-options')) {
uni.reLaunch({ // 重新进入当前页面
url: uni.getStorageSync('page-path-options') });
} else {
uni.reLaunch({
url: '/pages/idle/idle' });
}
}
}, function (error) {});
}
}, function (error) {});
}
} } };exports.default = _default;
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 1)["default"]))

2
unpackage/dist/dev/mp-weixin/pages/login/login.wxml vendored
View File

@ -1 +1 @@
<view class="data-v-b237504c"><view class="login-header data-v-b237504c"><image class="infoImg data-v-b237504c" mode="aspectFill" src="{{userInfo.avatarUrl||imgSrc}}"></image><view class="logo-name data-v-b237504c">{{appletName}}</view><view class="logo-title font24 color-99 mar-s20 data-v-b237504c" style="text-align:center;">{{appleSubtitle}}</view></view><view class="login-footer data-v-b237504c"><view class="login-btn radius20 color-ff background-blue font36 data-v-b237504c" type="primary" data-event-opts="{{[['tap',[['bindGetUserInfo',['$event']]]]]}}" bindtap="__e">微信授权</view><view class="agreement-box font30 data-v-b237504c">如您点击授权，则表示已阅读<text data-event-opts="{{[['tap',[['toAgreement',['$event']]]]]}}" class="agreement color-orange data-v-b237504c" bindtap="__e">《免责声明》</text></view></view></view>
<view class="data-v-b237504c"><view class="login-header data-v-b237504c"><image class="infoImg data-v-b237504c" mode="aspectFill" src="{{userInfo.avatarUrl||imgSrc}}"></image><view class="logo-name data-v-b237504c">{{appletName}}</view><view class="logo-title font24 color-99 mar-s20 data-v-b237504c" style="text-align:center;">{{appleSubtitle}}</view></view><view class="login-footer data-v-b237504c"><block wx:if="{{!isActive}}"><view class="login-btn radius20 color-ff background-blue font36 data-v-b237504c" type="primary" data-event-opts="{{[['tap',[['e0',['$event']]]]]}}" bindtap="__e">微信授权</view></block><block wx:else><view class="login-btn radius20 color-ff background-blue font36 data-v-b237504c" type="primary" data-event-opts="{{[['tap',[['bindGetUserInfo',['other']]]]]}}" bindtap="__e">微信授权</view></block><view class="agreement-box font30 data-v-b237504c">如您点击授权，则表示已阅读<text data-event-opts="{{[['tap',[['toAgreement',['$event']]]]]}}" class="agreement color-orange data-v-b237504c" bindtap="__e">《免责声明》</text></view></view><block wx:if="{{empowerShow}}"><view class="pop-up-bg data-v-b237504c"><view class="user-info-box bg-white data-v-b237504c"><view class="info data-v-b237504c"><view class="cover data-v-b237504c"><image src="{{imgSrc}}" mode="aspectFit" class="data-v-b237504c"></image></view><view class="name color-99 font24 data-v-b237504c">{{appletName}}</view><view class="tips data-v-b237504c"><view class="font26 data-v-b237504c">邀请您补全个人信息</view><view class="font24 color-blue data-v-b237504c">(昵称、头像)</view></view></view><view class="msg data-v-b237504c"><view class="item font26 data-v-b237504c"><text class="data-v-b237504c">头像</text><button class="avatar data-v-b237504c" open-type="chooseAvatar" data-event-opts="{{[['chooseavatar',[['chooseAvatar',['$event']]]]]}}" bindchooseavatar="__e"><image src="{{userInfo.avatarUrl||logoAvatar}}" mode="aspectFit" class="data-v-b237504c"></image></button></view><view class="item font26 data-v-b237504c"><text class="data-v-b237504c">昵称</text><input class="nick-name data-v-b237504c" type="nickname" placeholder="请输入昵称" placeholder-style="color:#999" data-event-opts="{{[['blur',[['nickNameInput',['$event']]]],['input',[['__set_model',['$0','nickName','$event',[]],['userInfo']]]]]}}" value="{{userInfo.nickName}}" bindblur="__e" bindinput="__e"/></view></view><view class="empower-btns font30 data-v-b237504c"><view data-event-opts="{{[['tap',[['refuseEv',['$event']]]]]}}" class="btn color-99 data-v-b237504c" bindtap="__e">拒绝</view><view data-event-opts="{{[['tap',[['bindGetUserInfo',['other']]]]]}}" class="btn color-blue data-v-b237504c" bindtap="__e">允许</view></view></view></view></block></view>

81
unpackage/dist/dev/mp-weixin/pages/login/login.wxss vendored
View File

@ -40,3 +40,84 @@
margin-top: 30rpx;
}
/* 授权弹窗 */
.pop-up-bg.data-v-b237504c{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.7);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.user-info-box.data-v-b237504c{
box-sizing: border-box;
width: calc(100% - 150rpx);
border-radius: 10rpx;
padding: 40rpx 45rpx 35rpx;
background-color: #ffffff;
}
.user-info-box .info.data-v-b237504c{
text-align: center;
}
.user-info-box .cover.data-v-b237504c{
width: 150rpx;
height: 150rpx;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
.user-info-box .cover image.data-v-b237504c{
width: 100%;
height: 100%;
}
.user-info-box .name.data-v-b237504c{
line-height: 1.5;
margin: 12rpx 0 8rpx;
}
.user-info-box .tips.data-v-b237504c{
line-height: 1.6;
}
.user-info-box .item.data-v-b237504c{
display: flex;
align-items: center;
justify-content: space-between;
padding: 15rpx 0;
border-bottom: 2rpx solid #f1f5f9;
}
.user-info-box .item text.data-v-b237504c{
line-height: 1.8;
}
.user-info-box .avatar.data-v-b237504c{
width: 100rpx;
height: 100rpx;
padding: 0;
border: 0;
margin: 0;
border-radius: 100%;
background: none;
}
.user-info-box .avatar image.data-v-b237504c{
width: 100%;
height: 100%;
}
.user-info-box .nick-name.data-v-b237504c{
height: 60rpx;
text-align: right;
}
.user-info-box .empower-btns.data-v-b237504c{
display: flex;
align-items: center;
margin-top: 20rpx;
}
.user-info-box .empower-btns .btn.data-v-b237504c{
width: 50%;
text-align: center;
align-items: 1.5;
padding-top: 20rpx;
}

7
unpackage/dist/dev/mp-weixin/project.private.config.json vendored
View File

@ -10,6 +10,13 @@
"query": "id=6&type=release",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/login/login",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

BIN
unpackage/dist/dev/mp-weixin/static/logo-avatar.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB