登录优化

master
Lee 2022-11-21 16:03:37 +08:00
parent 2f2c7d6e3c
commit 52bf66a648
27 changed files with 363 additions and 57 deletions

View File

@ -771,3 +771,77 @@ page{
.agreement-box{
margin-top: 30rpx;
}
/* 授权弹窗 */
.user-info-box{
box-sizing: border-box;
width: calc(100% - 150rpx);
border-radius: 10rpx;
padding: 40rpx 45rpx 35rpx;
}
.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;
}

View File

@ -22,9 +22,9 @@ Vue.prototype.$requst = requst;
Vue.prototype.$hostHttp = 'https://building.scdxtc.cn';
//不显示console.log
if (uni.getSystemInfoSync().platform !== "devtools") {
console.log = () => {}
}
// if (uni.getSystemInfoSync().platform !== "devtools") {
// console.log = () => {}
// }
App.mpType = 'app';

View File

@ -5,20 +5,58 @@
<view class="logo-name font34 color-00">{{appletName}}</view>
</view>
<view class="login-footer">
<view class="login-btn color-white font34 bg-blue" type='primary' @tap="bindGetUserInfo"></view>
<view class="login-btn color-white font34 bg-blue" type='primary' @tap="empowerShow=true" v-if="!isActive"></view>
<view class="login-btn color-white font34 bg-blue" type='primary' @tap="getUserProfileEv" v-else></view>
<view class="agreement-box color-33 font28">点击授权登录表示您已阅读<text @tap="toAgreement" class="agreement color-blue">免责声明</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="userInfo.avatarUrl || 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="getUserProfileEv"></view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {}, //
userInfo: {
nickName:'',
avatarUrl:''
}, //
canIGetUserProfile: false,
imgSrc: '/static/logo.jpg', //logo
logoAvatar:'/static/logo-avatar.png', //
appletName:'工地打卡', //
isBindPhone: false, //
empowerShow:false, //
isActive:false, //
};
},
onLoad() {
@ -26,7 +64,27 @@
this.canIGetUserProfile = true;
}
},
onShow() {
if(uni.getStorageSync('token')){
//
this.getUserInfo();
}
},
methods: {
//
getUserInfo(){
this.$requst.post('/api/v1/user/info').then(res=>{
if(res.code==0){
console.log(res,'用户信息');
if(res.data.is_active == 1){
this.isActive = true;
this.userInfo.nickName = res.data.nickname;
this.userInfo.avatarUrl = res.data.headimgurl;
}
}
})
},
// logo
setLogo(){
this.$requst.get('/api/v1/index/base-config').then(res=>{
@ -73,14 +131,40 @@
})
},
//
bindGetUserInfo(e) {
//
chooseAvatar(e){
this.userInfo.avatarUrl = e.detail.avatarUrl;
},
//
nickNameInput(e){
this.userInfo.nickName = e.detail.value
},
//
refuseEv(){
this.$toolAll.tools.showToast('您已拒绝授权');
this.empowerShow = false;
},
//
getUserProfileEv(e) {
if(!this.isActive){
if(this.userInfo.avatarUrl==''){
this.$toolAll.tools.showToast('请选择您的头像!')
return false;
}
if(this.userInfo.nickName==''){
this.$toolAll.tools.showToast('请输入您的昵称!')
return false;
}
}
//
uni.getUserProfile({
desc: '登录',
lang: 'zh_CN',
success: (res) => {
this.userInfo = res.userInfo;
uni.login({
provider: 'weixin',
success: (res)=> {
@ -110,11 +194,6 @@
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 => {

View File

@ -207,7 +207,8 @@
//
getLocationEv(type){
uni.getLocation({
type: 'wgs84',
type: 'gcj02',
isHighAccuracy:'true',
success: (res)=>{
console.log(res,'位置信息');
if(type=='1'){

BIN
static/logo-avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(uni, createApp) {__webpack_require__(/*! uni-pages */ 5);
/* WEBPACK VAR INJECTION */(function(createApp) {__webpack_require__(/*! uni-pages */ 5);
var _vue = _interopRequireDefault(__webpack_require__(/*! vue */ 4));
var _App = _interopRequireDefault(__webpack_require__(/*! ./App */ 6));
@ -35,17 +35,17 @@ _vue.default.component('status-nav', statusNav); //全局注册头部组件
_vue.default.prototype.$toolAll = _tools.default; // 响应数据
_vue.default.prototype.$requst = _requst.default; //公共域名
_vue.default.prototype.$hostHttp = 'https://building.scdxtc.cn'; //不显示console.log
if (uni.getSystemInfoSync().platform !== "devtools") {console.log = function () {};}
// if (uni.getSystemInfoSync().platform !== "devtools") {
// console.log = () => {}
// }
_App.default.mpType = 'app';
var app = new _vue.default(_objectSpread({
store: _store.default },
_App.default));
createApp(app).$mount();
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 1)["default"], __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 1)["createApp"]))
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 1)["createApp"]))
/***/ }),
/* 1 */,

View File

@ -898,6 +898,72 @@ page{
.agreement-box{
margin-top: 30rpx;
}
/* 授权弹窗 */
.user-info-box{
box-sizing: border-box;
width: calc(100% - 150rpx);
border-radius: 10rpx;
padding: 40rpx 45rpx 35rpx;
}
.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;
}
/* 项目样式 end */
/* 加载中样式 start */
.loading-box {

View File

@ -97,6 +97,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 = []
@ -142,15 +147,53 @@ __webpack_require__.r(__webpack_exports__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var _default =
{
data: function data() {
return {
userInfo: {}, //用户信息
userInfo: {
nickName: '',
avatarUrl: '' },
//用户信息
canIGetUserProfile: false,
imgSrc: '/static/logo.jpg', //默认logo头像
logoAvatar: '/static/logo-avatar.png', //默认用户头像
appletName: '工地打卡', //小程序名称
isBindPhone: false //是否绑定手机号
isBindPhone: false, //是否绑定手机号
empowerShow: false, //是否显示授权弹窗
isActive: false //是否已授权
};
},
onLoad: function onLoad() {
@ -158,12 +201,32 @@ var _default =
this.canIGetUserProfile = true;
}
},
onShow: function onShow() {
if (uni.getStorageSync('token')) {
// 获取用户信息
this.getUserInfo();
}
},
methods: {
// 获取用户信息
getUserInfo: function getUserInfo() {var _this = this;
this.$requst.post('/api/v1/user/info').then(function (res) {
if (res.code == 0) {
console.log(res, '用户信息');
if (res.data.is_active == 1) {
_this.isActive = true;
_this.userInfo.nickName = res.data.nickname;
_this.userInfo.avatarUrl = res.data.headimgurl;
}
}
});
},
// 设置logo图
setLogo: function setLogo() {var _this = this;
setLogo: function setLogo() {var _this2 = this;
this.$requst.get('/api/v1/index/base-config').then(function (res) {
_this.imgSrc = _this.$http + res.data.logo;
_this.appletName = res.data.appletName;
_this2.imgSrc = _this2.$http + res.data.logo;
_this2.appletName = res.data.appletName;
});
},
@ -175,18 +238,18 @@ var _default =
},
// 授权绑定手机号
getphonenumber: function getphonenumber(e) {var _this2 = this;
getphonenumber: function getphonenumber(e) {var _this3 = this;
var ya = this;
wx.login({
success: function success(res) {
_this2.$requst.post('/api/v1/user/login', { code: res.code }).then(function (result) {
_this3.$requst.post('/api/v1/user/login', { code: res.code }).then(function (result) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
_this2.$requst.post('/api/v1/user/bind-phone', { openid: result.data.openid, session_key: result.data.session_key, iv: e.detail.iv, encryptedData: e.detail.encryptedData }).then(function (res) {
_this3.$requst.post('/api/v1/user/bind-phone', { openid: result.data.openid, session_key: result.data.session_key, iv: e.detail.iv, encryptedData: e.detail.encryptedData }).then(function (res) {
console.log('手机号信息:', res);
if (res.code == 0) {
_this2.$toolAll.tools.showToast('手机号绑定成功');
_this2.isBindPhone = true;
} else _this2.$toolAll.tools.showToast(res.msg);
_this3.$toolAll.tools.showToast('手机号绑定成功');
_this3.isBindPhone = true;
} else _this3.$toolAll.tools.showToast(res.msg);
}, function (error) {});
} else {
// console.log('取消授权手机号')
@ -205,19 +268,45 @@ var _default =
},
//调起登录授权
bindGetUserInfo: function bindGetUserInfo(e) {var _this3 = this;
// 获取头像
chooseAvatar: function chooseAvatar(e) {
this.userInfo.avatarUrl = e.detail.avatarUrl;
},
// 获取昵称
nickNameInput: function nickNameInput(e) {
this.userInfo.nickName = e.detail.value;
},
// 拒绝登录
refuseEv: function refuseEv() {
this.$toolAll.tools.showToast('您已拒绝授权');
this.empowerShow = false;
},
// 允许登录
getUserProfileEv: function getUserProfileEv(e) {var _this4 = this;
if (!this.isActive) {
if (this.userInfo.avatarUrl == '') {
this.$toolAll.tools.showToast('请选择您的头像!');
return false;
}
if (this.userInfo.nickName == '') {
this.$toolAll.tools.showToast('请输入您的昵称!');
return false;
}
}
//新版登录方式
uni.getUserProfile({
desc: '登录',
lang: 'zh_CN',
success: function success(res) {
_this3.userInfo = res.userInfo;
uni.login({
provider: 'weixin',
success: function success(res) {
if (res.code) {
_this3.updateUserInfo(res.code);
_this4.updateUserInfo(res.code);
} else {
uni.showToast({
title: '登录失败!',
@ -242,11 +331,6 @@ var _default =
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) {

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 font34 color-00 data-v-b237504c">{{appletName}}</view></view><view class="login-footer data-v-b237504c"><view class="login-btn color-white font34 bg-blue data-v-b237504c" type="primary" data-event-opts="{{[['tap',[['bindGetUserInfo',['$event']]]]]}}" bindtap="__e">微信授权</view><view class="agreement-box color-33 font28 data-v-b237504c">点击授权登录,表示您已阅读<text data-event-opts="{{[['tap',[['toAgreement',['$event']]]]]}}" class="agreement color-blue 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 font34 color-00 data-v-b237504c">{{appletName}}</view></view><view class="login-footer data-v-b237504c"><block wx:if="{{!isActive}}"><view class="login-btn color-white font34 bg-blue data-v-b237504c" type="primary" data-event-opts="{{[['tap',[['e0',['$event']]]]]}}" bindtap="__e">微信授权</view></block><block wx:else><view class="login-btn color-white font34 bg-blue data-v-b237504c" type="primary" data-event-opts="{{[['tap',[['getUserProfileEv',['$event']]]]]}}" bindtap="__e">微信授权</view></block><view class="agreement-box color-33 font28 data-v-b237504c">点击授权登录,表示您已阅读<text data-event-opts="{{[['tap',[['toAgreement',['$event']]]]]}}" class="agreement color-blue 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="{{userInfo.avatarUrl||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',[['getUserProfileEv',['$event']]]]]}}" class="btn color-blue data-v-b237504c" bindtap="__e">允许</view></view></view></view></block></view>

View File

@ -383,7 +383,8 @@ __webpack_require__.r(__webpack_exports__);
// 授权位置信息
getLocationEv: function getLocationEv(type) {var _this2 = this;
uni.getLocation({
type: 'wgs84',
type: 'gcj02',
isHighAccuracy: 'true',
success: function success(res) {
console.log(res, '位置信息');
if (type == '1') {

View File

@ -18,7 +18,7 @@
}
},
"compileType": "miniprogram",
"libVersion": "2.25.4",
"libVersion": "",
"appid": "wxcd693ca907f801b3",
"projectname": "工地打卡",
"condition": {

View File

@ -75,5 +75,6 @@
}
]
}
}
},
"libVersion": "2.27.3"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB