feat：新增解绑换在个人资料位置

fengtao
1 parent 11d82dba
Showing 5 changed files with 124 additions and 58 deletions
pages/personal/personal.vue
publicLoginSubPage/other/set.vue
publicLoginSubPage/other/static/set.scss
publicLoginSubPage/public/login.vue
style/common.scss
--- a/pages/personal/personal.vue
View file @c381700
+++ b/pages/personal/personal.vue
View file @c381700
@@ -3,7 +3,7 @@
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
 		<view class="headBox">
-			<!-- #ifdef MP -->
+			<!-- #ifdef MP || APP-PLUS -->
 			<!-- 登录 -->
 			<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
 				<block v-if="userInfo.isToken">
@@ -17,8 +17,6 @@
 							</view>
 						</view>
 						<view @click="openPersonalInfo" style="color:#FFFFFF;font-size: 14px;" v-if="userInfo.phoneNumber">{{ userInfo.phoneNumber | phone }}</view>
-						<view v-else><text style="color:#FFFFFF;font-size: 14px;">手机号:未绑定</text></view>
-						<view v-if="userInfo.isToken" @click="clearAccountFunc(userInfo)" class="detail"><text class="text">解绑</text></view>
 					</view>
 				</block>
 				<block v-else>
@@ -30,37 +28,9 @@
 						<view v-if="!userInfo.isToken" @click="clickAccountFunc" class="detail"><text class="text">绑定账号</text></view>
 					</view>
 				</block>
-				<view v-if="userInfo.isToken"><u-icon name="arrow-right" color="white" size="13"></u-icon></view>
+				<view v-if="userInfo.isToken" @click="openPersonalInfo"><u-icon name="arrow-right" color="white" size="13"></u-icon></view>
 			</view>
-			<!-- #endif -->
-			<!-- #ifndef MP -->
 			<!-- 登录 -->
-			<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
-				<block v-if="userInfo.isToken">
-					<view @click="openPersonalInfo" class="u-m-r-20">
-						<image class="avatar" mode="aspectFill" :src="userInfo.avatar || userInfo.avatarUrl || '/static/default.png'"></image>
-					</view>
-					<view @click="openPersonalInfo" class="u-flex-1">
-						<view class="nickName u-flex">
-							<view class="name u-m-r-10" v-if="userInfo.realName || userInfo.nickName">
-								<text style="#FFFFFF;font-size: 18px;">{{ userInfo.realName || userInfo.nickName }}</text>
-							</view>
-						</view>
-						<view style="color:#FFFFFF;font-size: 14px;" v-if="userInfo.phoneNumber">{{ userInfo.phoneNumber | phone }}</view>
-						<view v-else><text style="color:#FFFFFF;font-size: 14px;">手机号:未绑定</text></view>
-					</view>
-				</block>
-				<block v-else>
-					<view class="u-m-r-20" @click="openLoginFunc">
-						<view class="avatar u-flex" style="justify-content: center"><u-icon name="account-fill" color="black" size="30"></u-icon></view>
-					</view>
-					<view class="u-flex-1">
-						<view @click="openLoginFunc" class="u-font-lg login-btn">登录</view>
-						<view v-if="userInfo.isToken == '' || userInfo.isToken == null" @click="clickAccountFunc" style="color: black" class="detail">绑定账号</view>
-					</view>
-				</block>
-				<view><u-icon name="arrow-right" color="black" size="13"></u-icon></view>
-			</view>
 			<!-- #endif -->
 		</view>
 		<view class="u-flex my-nav">
@@ -195,7 +165,6 @@ export default {
 		if (e.obj != null) {
 			const params = JSON.parse(decodeURIComponent(e.obj));
 			this.thirdObj = params;
-			console.log(this.thirdObj);
 		}
 	},
 	computed: {
@@ -223,7 +192,8 @@ export default {
 		},
 		openPersonalInfo() {
 			let obj = {
-				data: this.userInfo
+				data: this.userInfo,
+				third: this.thirdObj
 			};
 			uni.navigateTo({
 				url: '/publicLoginSubPage/other/set?data=' + JSON.stringify(obj)
@@ -290,7 +260,8 @@ export default {
 						}
 					})
 					.catch(e => {
-						uni.$u.toast(e.data?.message);
+						uni.$u.toast(e.data?.msg || e.data?.message);
+						this.show = false;
 					});
 			} else {
 				const phoneRegular = /^1\d{10}$/;
@@ -349,7 +320,8 @@ export default {
 						this.saveUserInfo();
 					})
 					.catch(e => {
-						uni.$u.toast(e.data?.message);
+						uni.$u.toast(e.data?.msg || e.data?.message);
+						this.show = false;
 					});
 			}
 		},
@@ -439,18 +411,6 @@ export default {
 					}
 				}
 			});
-		},
-		clearAccountFunc(e) {
-			//解绑
-			let httpData = {
-				appUserId: e.userId,
-				thirdUserId: this.thirdObj.thirdUserId
-			};
-			uni.$u.http.delete('/yt/third', httpData).then(res => {
-				if (res) {
-					this.getCodeState(); //开始倒计时
-				}
-			});
 		}
 	}
 };
--- a/publicLoginSubPage/other/set.vue
View file @c381700
+++ b/publicLoginSubPage/other/set.vue
View file @c381700
@@ -45,10 +45,24 @@
 				</u-form-item>
 			</u--form>
 		</view>
-		<view class="basic-bottom"><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
+		<view class="basic-bottom u-flex">
+			<view class="item" v-if="info.data.isToken"><button class="submit" size="default" @click="clearAccountFunc" :style="{ background: InfoColor }">解绑</button></view>
+			<view class="item" style="margin-right: 60rpx;"><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
+		</view>
 		<!-- #ifdef MP -->
 		<view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
 		<!-- #endif -->
+		<!-- 解绑账号 -->
+		<view>
+			<u-popup bgColor="transparent" :overlay="true" :show="showBind" mode="bottom">
+				<view class="u-flex logout-main">
+					<view class="main"><text style="color: #999999">是否需要解绑？</text></view>
+					<view @click="confrimBind(info)" class="main"><text style="color: #f95e5a">是</text></view>
+					<view class="main1"><text @click="showBind = false" style="color: #3478f7">否</text></view>
+				</view>
+			</u-popup>
+		</view>
+		<!-- 解绑账号 -->
 	</view>
 </template>
@@ -56,7 +70,9 @@
 export default {
 	data() {
 		return {
-			PrimaryColor: '#0079fe', //主题色
+			showBind: false,
+			PrimaryColor: '#377DFF', //主题色
+			InfoColor: '#E3E4E5', //主题色
 			myInfoModel: {
 				userInfo: {
 					realName: '',
@@ -117,12 +133,14 @@ export default {
 						trigger: ['change', 'blur']
 					}
 				]
-			}
+			},
+			info: {}
 		};
 	},
 	onLoad(e) {
 		if (e.data !== null) {
 			let params = JSON.parse(e.data);
+			this.info = params;
 			this.myInfoModel.userInfo.realName = params.data.realName;
 			this.myInfoModel.userInfo.phoneNumber = params.data.phoneNumber;
 			this.myInfoModel.userInfo.username = params.data.username;
@@ -133,6 +151,31 @@ export default {
 		}
 	},
 	methods: {
+		confrimBind(e) {
+			if (e) {
+				//解绑
+				let httpData = {
+					appUserId: e.data?.userId,
+					thirdUserId: e.third?.thirdUserId
+				};
+				uni.$u.http.delete('/yt/third', httpData).then(res => {
+					if (res) {
+						uni.showToast({
+							title: '解绑成功'
+						});
+						this.showBind = false;
+					} else {
+						uni.showToast({
+							title: '解绑失败'
+						});
+						this.showBind = false;
+					}
+				});
+			}
+		},
+		clearAccountFunc() {
+			this.showBind = true;
+		},
 		// 修改头像
 		upAvatar() {
 			var that = this;
--- a/publicLoginSubPage/other/static/set.scss
View file @c381700
+++ b/publicLoginSubPage/other/static/set.scss
View file @c381700
@@ -46,6 +46,30 @@
 	padding-left: 15rpx;
 }
 .basic-bottom {
-	width: 500rpx;
-	margin-left: 86rpx;
+	width: 750rpx;
+	justify-content: space-between;
+	.item {
+		width: 318rpx;
+	}
+}
+
+.logout-main {
+	flex-direction: column;
+	height: 300rpx;
+	margin: 30rpx 40rpx;
+	background: #f5f5f5;
+	border-radius: 20rpx;
+	.main {
+		width: 669rpx;
+		height: 100rpx;
+		border-bottom: 1rpx solid #d6d6d6;
+		text-align: center;
+		line-height: 86rpx;
+	}
+	.main1 {
+		width: 669rpx;
+		height: 100rpx;
+		text-align: center;
+		line-height: 86rpx;
+	}
 }
--- a/publicLoginSubPage/public/login.vue
View file @c381700
+++ b/publicLoginSubPage/public/login.vue
View file @c381700
@@ -37,7 +37,7 @@
 </template>
 <script>
-import { mapMutations } from 'vuex';
+import { mapMutations, mapActions } from 'vuex';
 import { loginApp } from '@/config/login';
 import baseUrl from '@/config/baseUrl.js';
 import WXBizDataCrypt from '@/config/WXBizDataCrypt.js';
@@ -70,6 +70,12 @@ export default {
 								this.openid = res.data.openid;
 								this.session_key = res.data.session_key;
 							}
+						},
+						complete: e => {
+							if (e.data.errcode != null) {
+								return;
+								// return uni.$u.toast('获取用户唯一id失败');
+							}
 						}
 					});
 				} else {
@@ -80,14 +86,19 @@ export default {
 	},
 	methods: {
 		...mapMutations(['setUserInfo']),
+		...mapActions(['updateBadgeTotal']),
 		//微信授权登录
 		//#ifdef MP
 		onAuthorization(e) {
+			/**
+			 * 注意：通过wx.getUserProfile并不能获取用户的openid，openid是唯一识别用户的标识，
+			 * 所以最好在用户授权登录时就获取。调用wx.login()获取
+			 */
 			wx.getUserProfile({
-				desc: '获取用户信息',
+				desc: '获取用户授权信息',
 				success: res => {
 					if (res) {
-						//微信官方自带解密（node）
+						//微信官方自带解密（node.js实现）
 						let pc = new WXBizDataCrypt(appId, this.session_key);
 						let data = pc.decryptData(res.encryptedData, res.iv);
 						let obj = {
@@ -100,11 +111,12 @@ export default {
 							.get(`/yt/third/login/${this.openid}`)
 							.then(res => {
 								if (res.token == '' || res.token == null) {
-									//需要绑定，跳转我的页面
+									//需要绑定，跳转我的页面进行绑定,显示绑定按钮
 									uni.reLaunch({
 										url: '/pages/personal/personal'
 									});
 								} else {
+									// 不需要绑定
 									// 储存登录信息
 									let resObj = {
 										refreshToken: res.refreshToken,
@@ -122,12 +134,17 @@ export default {
 										icon: 'none'
 									});
 									this.saveUserInfo();
+									this.getAlarmTotalData();
 								}
 							})
 							.catch(e => {
 								uni.$u.toast(e.data?.message);
 							});
-						// #ifdef APP-PLUS||MP
+						/**
+						 * 有些时候uni.navigatorBack({})没有返回到上级页面
+						 * 才使用uni.reLaunch()进行跳转
+						 */
+						// #ifdef MP
 						setTimeout(() => {
 							uni.reLaunch({
 								url: '/pages/personal/personal?obj=' + encodeURIComponent(JSON.stringify(obj))
@@ -147,6 +164,14 @@ export default {
 				}
 			});
 		},
+		getAlarmTotalData() {
+			uni.$u.http.get('/yt/homepage/app').then(res => {
+				if (res) {
+					//异步实时更新告警徽标数
+					this.updateBadgeTotal(res.totalAlarm.activedAlarm);
+				}
+			});
+		},
 		onSubmitFunc() {
 			if (this.loginForm.username == '') {
 				return uni.$u.toast('请输入登录账号~');
@@ -199,6 +224,7 @@ export default {
 							// #endif
 						});
 						this.saveUserInfo();
+						this.getAlarmTotalData();
 					}
 				})
 				.catch(e => {
--- a/style/common.scss
View file @c381700
+++ b/style/common.scss
View file @c381700
@@ -172,6 +172,19 @@ button {
 	font-weight: 400;
 	color: #2f384e;
 }
+//筛选字体颜色
+.select-text {
+	font-size: 13px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #377dff !important;
+}
+.un-select-text {
+	font-size: 13px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #333333 !important;
+}
 // 定义flex等分
 @for $i from 0 through 12 {
 	.u-flex-#{$i} {