新登录方式修改-1128

pages/login/login.vue

@@ -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({
+				uni.login({
-					desc: '登录',
+					provider: 'weixin',
-					lang: 'zh_CN',
+					success: (res)=> {
-					success: (res) => {
+						if (res.code) {
-						this.userInfo = res.userInfo;
+							this.updateUserInfo(res.code,status);
-						uni.login({
+						} else {
-							provider: 'weixin',
+							uni.showToast({
-							success: (res)=> {
+								title: '登录失败！',
-								if (res.code) {
+								duration: 2000
-									this.updateUserInfo(res.code);
+							});
-								} else {
+						}
-									uni.showToast({
-										title: '登录失败！',
-										duration: 2000
-									});
-								}
-							},
-						});
 					},
-					fail: (res) => {}
 				});
 			},
 			
 			//调用登录接口
-			updateUserInfo(code) {
+			updateUserInfo(code,status) {
-				uni.showToast({
+				if(status=='enter'){
-					title: '登录中...',
+					this.$requst.post('/api/v1/user/login',{code:code}).then(res => {
-					icon:'loading',
+						if(res.code == 0){
-					duration:10000
+							console.log(res,'进入登录信息');
-				})
+							if(res.data.is_active==1){
-				var params = {
+								this.isActive = true;
-					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'
-							})
 						}
+					},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>

unpackage/dist/dev/mp-weixin/pages/login/login.js

@@ -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({
+      uni.login({
-        desc: '登录',
+        provider: 'weixin',
-        lang: 'zh_CN',
         success: function success(res) {
-          _this3.userInfo = res.userInfo;
+          if (res.code) {
-          uni.login({
+            _this4.updateUserInfo(res.code, status);
-            provider: 'weixin',
+          } else {
-            success: function success(res) {
+            uni.showToast({
-              if (res.code) {
+              title: '登录失败！',
-                _this3.updateUserInfo(res.code);
+              duration: 2000 });
-              } else {
-                uni.showToast({
-                  title: '登录失败！',
-                  duration: 2000 });
 
-              }
+          }
-            } });
+        } });
-
-        },
-        fail: function fail(res) {} });
 
     },
 
     //调用登录接口
-    updateUserInfo: function updateUserInfo(code) {
+    updateUserInfo: function updateUserInfo(code, status) {var _this5 = this;
-      uni.showToast({
+      if (status == 'enter') {
-        title: '登录中...',
+        this.$requst.post('/api/v1/user/login', { code: code }).then(function (res) {
-        icon: 'loading',
+          if (res.code == 0) {
-        duration: 10000 });
+            console.log(res, '进入登录信息');
-
+            if (res.data.is_active == 1) {
-      var params = {
+              _this5.isActive = true;
-        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' });
-
           }
+        }, 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"]))
 

unpackage/dist/dev/mp-weixin/pages/login/login.wxml

@@ -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>

unpackage/dist/dev/mp-weixin/pages/login/login.wxss

@@ -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;
+}
+

unpackage/dist/dev/mp-weixin/project.private.config.json

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