简柏林 / thingskit-app · Commits

Commit e76578589db4eb84cfea7b329ed9c33d39ade75b

Authored by sqy
1 parent 61739d8a

fix:[DEFECT-370]:修复徽标不正确显示

Inline Side-by-side
Showing 3 changed files with 422 additions and 444 deletions
1 -<template>  
2 - <view>  
3 - <view :class="[isFixed ? 'f-fixed' : '']">  
4 - <!-- 二次封装tabbar -->  
5 - <u-tabbar  
6 - :value="tabIndex"  
7 - @change="onTabbar"  
8 - :fixed="false"  
9 - :placeholder="false"  
10 - :safeAreaInsetBottom="false"  
11 - :activeColor="activeColor"  
12 - :inactiveColor="inactiveColor"  
13 - :border="border"  
14 - >  
15 - <block v-for="(item, index) in list" :key="index">  
16 - <!-- 自定义icon -->  
17 - <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">  
18 - <view slot="active-icon"><image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image></view>  
19 - <view slot="inactive-icon"><image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image></view>  
20 - </u-tabbar-item>  
21 - </block>  
22 - </u-tabbar>  
23 - <!-- 苹果安全距离-默认20px -->  
24 - <view :style="{ paddingBottom: systemInfo.tabbarPaddingB + 'px', background: '#fff' }"></view>  
25 - </view>  
26 - <!-- 防止塌陷高度 -->  
27 - <view v-if="isFixed && isFillHeight" :style="{ height: systemInfo.tabbarH + 'px' }"></view>  
28 - </view>  
29 -</template>  
30 -  
31 -<script>  
32 -import base from '@/config/baseUrl.js';  
33 -import { mapState } from 'vuex';  
34 -  
35 -export default {  
36 - name: 'f-tabbar',  
37 - props: {  
38 - // 是否固定在底部  
39 - isFixed: {  
40 - type: Boolean,  
41 - default: true  
42 - },  
43 - // 是否设置防止塌陷高度  
44 - isFillHeight: {  
45 - type: Boolean,  
46 - default: true  
47 - },  
48 - // 选中的颜色  
49 - activeColor: {  
50 - type: String,  
51 - default: '#377dff'  
52 - },  
53 - // 未选中颜色  
54 - inactiveColor: {  
55 - type: String,  
56 - default: '#606266'  
57 - },  
58 - // 是否显示边框色  
59 - border: {  
60 - type: Boolean,  
61 - default: function() {  
62 - return true;  
63 - }  
64 - },  
65 - // 右上角的角标提示信息  
66 - badge: {  
67 - type: [String, Number, null],  
68 - default: uni.$u.props.tabbarItem.badge  
69 - },  
70 - // 是否显示圆点，将会覆盖badge参数  
71 - dot: {  
72 - type: Boolean,  
73 - default: uni.$u.props.tabbarItem.dot  
74 - },  
75 - // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性  
76 - badgeStyle: {  
77 - type: [Object, String],  
78 - default: uni.$u.props.tabbarItem.badgeStyle  
79 - }  
80 - },  
81 - data() {  
82 - return {  
83 - systemInfo: base.systemInfo,  
84 - tabIndex: 0,  
85 - path: '', //当前路径  
86 - list: [  
87 - {  
88 - name: '首页',  
89 - url: 'pages/index/index',  
90 - icon: '../../../static/home-un.png',  
91 - iconFill: '../../../static/home-yes.png'  
92 - },  
93 - {  
94 - name: '设备',  
95 - url: 'pages/device/device',  
96 - icon: '../../../static/device-un.png',  
97 - iconFill: '../../../static/device-yes.png'  
98 - },  
99 - {  
100 - name: '告警',  
101 - url: 'pages/alarm/alarm',  
102 - icon: '../../../static/alert-un.png',  
103 - iconFill: '../../../static/alert-yes.png',  
104 - badge: 0  
105 - },  
106 - {  
107 - name: '我的',  
108 - url: 'pages/personal/personal',  
109 - icon: '../../../static/my-un.png',  
110 - iconFill: '../../../static/my-yes.png'  
111 - }  
112 - ],  
113 - badgeTotal: {  
114 - t1: 0,  
115 - t2: 0,  
116 - t3: 0  
117 - }  
118 - };  
119 - },  
120 - onLoad() {  
121 - console.log('Onload the dofunc');  
122 - },  
123 - created() {  
124 - this.loadData();  
125 - //获取页面路径  
126 - let currentPages = getCurrentPages();  
127 - let page = currentPages[currentPages.length - 1];  
128 - this.path = page.route;  
129 - if (this.list.length > 0) {  
130 - this.list?.forEach((item, index) => {  
131 - if (this.path == item.url) {  
132 - this.tabIndex = index;  
133 - }  
134 - });  
135 - }  
136 - },  
137 - computed: {  
138 - ...mapState({  
139 - info: state => state.badgeInfo  
140 - })  
141 - },  
142 - methods: {  
143 - loadData() {  
144 - this.list[2].badge = this.info;  
145 - },  
146 - onTabbar(index) {  
147 - setTimeout(() => {  
148 - this.loadData();  
149 - }, 100);  
150 - if (this.list[index].url) {  
151 - if (this.path !== this.list[index].url) {  
152 - uni.switchTab({  
153 - url: '/' + this.list[index].url  
154 - });  
155 - }  
156 - }  
157 - }  
158 - }  
159 -};  
160 -</script>  
161 -  
162 -<style lang="scss" scoped>  
163 -.f-fixed {  
164 - position: fixed;  
165 - bottom: 0;  
166 - left: 0;  
167 - right: 0;  
168 - z-index: 1000;  
169 -}  
170 -</style> 1 +<template>
  2 + <view>
  3 + <view :class="[isFixed ? 'f-fixed' : '']">
  4 + <!-- 二次封装tabbar -->
  5 + <u-tabbar
  6 + :value="tabIndex"
  7 + @change="onTabbar"
  8 + :fixed="false"
  9 + :placeholder="false"
  10 + :safeAreaInsetBottom="false"
  11 + :activeColor="activeColor"
  12 + :inactiveColor="inactiveColor"
  13 + :border="border"
  14 + >
  15 + <block v-for="(item, index) in list" :key="index">
  16 + <!-- 自定义icon -->
  17 + <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
  18 + <view slot="active-icon"><image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image></view>
  19 + <view slot="inactive-icon"><image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image></view>
  20 + </u-tabbar-item>
  21 + </block>
  22 + </u-tabbar>
  23 + <!-- 苹果安全距离-默认20px -->
  24 + <view :style="{ paddingBottom: systemInfo.tabbarPaddingB + 'px', background: '#fff' }"></view>
  25 + </view>
  26 + <!-- 防止塌陷高度 -->
  27 + <view v-if="isFixed && isFillHeight" :style="{ height: systemInfo.tabbarH + 'px' }"></view>
  28 + </view>
  29 +</template>
  30 +
  31 +<script>
  32 +import base from '@/config/baseUrl.js';
  33 +import { mapState } from 'vuex';
  34 +
  35 +export default {
  36 + name: 'f-tabbar',
  37 + props: {
  38 + // 是否固定在底部
  39 + isFixed: {
  40 + type: Boolean,
  41 + default: true
  42 + },
  43 + // 是否设置防止塌陷高度
  44 + isFillHeight: {
  45 + type: Boolean,
  46 + default: true
  47 + },
  48 + // 选中的颜色
  49 + activeColor: {
  50 + type: String,
  51 + default: '#377dff'
  52 + },
  53 + // 未选中颜色
  54 + inactiveColor: {
  55 + type: String,
  56 + default: '#606266'
  57 + },
  58 + // 是否显示边框色
  59 + border: {
  60 + type: Boolean,
  61 + default: true
  62 + },
  63 + // 右上角的角标提示信息
  64 + badge: {
  65 + type: [String, Number, null],
  66 + default: uni.$u.props.tabbarItem.badge
  67 + },
  68 + // 是否显示圆点，将会覆盖badge参数
  69 + dot: {
  70 + type: Boolean,
  71 + default: uni.$u.props.tabbarItem.dot
  72 + },
  73 + // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
  74 + badgeStyle: {
  75 + type: [Object, String],
  76 + default: uni.$u.props.tabbarItem.badgeStyle
  77 + }
  78 + },
  79 + data() {
  80 + return {
  81 + systemInfo: base.systemInfo,
  82 + tabIndex: 0,
  83 + path: '', //当前路径
  84 + list: [
  85 + {
  86 + name: '首页',
  87 + url: 'pages/index/index',
  88 + icon: '../../../static/home-un.png',
  89 + iconFill: '../../../static/home-yes.png'
  90 + },
  91 + {
  92 + name: '设备',
  93 + url: 'pages/device/device',
  94 + icon: '../../../static/device-un.png',
  95 + iconFill: '../../../static/device-yes.png'
  96 + },
  97 + {
  98 + name: '告警',
  99 + url: 'pages/alarm/alarm',
  100 + icon: '../../../static/alert-un.png',
  101 + iconFill: '../../../static/alert-yes.png',
  102 + badge: this.$store.state.badgeInfo
  103 + },
  104 + {
  105 + name: '我的',
  106 + url: 'pages/personal/personal',
  107 + icon: '../../../static/my-un.png',
  108 + iconFill: '../../../static/my-yes.png'
  109 + }
  110 + ]
  111 + };
  112 + },
  113 + created() {
  114 + //获取页面路径
  115 + let currentPages = getCurrentPages();
  116 + let page = currentPages[currentPages.length - 1];
  117 + this.path = page.route;
  118 + if (this.list.length > 0) {
  119 + this.list.forEach((item, index) => {
  120 + if (this.path == item.url) {
  121 + this.tabIndex = index;
  122 + }
  123 + });
  124 + }
  125 + },
  126 + methods: {
  127 + onTabbar(index) {
  128 + this.list[2].badge =this.$store.state.badgeInfo
  129 +
  130 + if (this.list[index].url) {
  131 + if (this.path !== this.list[index].url) {
  132 + uni.switchTab({
  133 + url: '/' + this.list[index].url
  134 + });
  135 + }
  136 + }
  137 + }
  138 + }
  139 +};
  140 +</script>
  141 +
  142 +<style lang="scss" scoped>
  143 +.f-fixed {
  144 + position: fixed;
  145 + bottom: 0;
  146 + left: 0;
  147 + right: 0;
  148 + z-index: 1000;
  149 +}
  150 +</style>
1 -<template>  
2 - <view class="login-page">  
3 - <!-- 公共组件-每个页面必须引入 -->  
4 - <public-module></public-module>  
5 - <view class="u-flex login-main">  
6 - <view class="content">  
7 - <view class="hello login-text-muted">您好,</view>  
8 - <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view>  
9 - <view class="circleStyle"></view>  
10 - </view>  
11 - </view>  
12 - <view class="f__login">  
13 - <view class="loginPhone">  
14 - <view class="form-row u-flex">  
15 - <view class="v-input"><input type="text" v-model="loginForm.username" maxlength="32" placeholder="请输入登录账号" /></view>  
16 - <u-icon></u-icon>  
17 - </view>  
18 - <view class="form-row u-flex">  
19 - <view class="v-input"><input type="text" v-model="loginForm.password" maxlength="32" placeholder="请输入登录密码" :password="!showPassword" /></view>  
20 - <view class="v-password" @click="showPasswordMode"><u-icon color="#9a9a9a" size="25" :name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon></view>  
21 - <u-icon></u-icon>  
22 - </view>  
23 - <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>  
24 - <view class="u-flex row-item">  
25 - <view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view>  
26 - <view class="row-reset login-text-gray" @click="findPassrordFunc">忘记密码</view>  
27 - </view>  
28 - <view class="u-flex link-login">  
29 - <view class="link-text login-text-gray">第三方账号登录</view>  
30 - <view style="height:20rpx"></view>  
31 - <view @click="onAuthorization" class="link-image"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></view>  
32 - <view class="circleStyleBottom"></view>  
33 - </view>  
34 - </view>  
35 - </view>  
36 - </view>  
37 -</template>  
38 -  
39 -<script>  
40 -import { mapMutations, mapActions } from 'vuex';  
41 -import { loginApp } from '@/config/login';  
42 -import baseUrl from '@/config/baseUrl.js';  
43 -import WXBizDataCrypt from '@/config/WXBizDataCrypt.js';  
44 -import { appId, appSecrect } from '@/config/constant.js';  
45 -  
46 -export default {  
47 - data() {  
48 - return {  
49 - loginForm: {  
50 - username: '',  
51 - password: ''  
52 - },  
53 - showPassword: false,  
54 - code: '',  
55 - openid: '',  
56 - session_key: ''  
57 - };  
58 - },  
59 - onLoad() {  
60 - //#ifdef MP-WEIXIN  
61 - wx.login({  
62 - success: res => {  
63 - if (res.code) {  
64 - this.code = res.code;  
65 - wx.request({  
66 - url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecrect}&js_code=${this.code}&grant_type=authorization_code`,  
67 - method: 'GET',  
68 - success: res => {  
69 - if (res.statusCode == 200) {  
70 - this.openid = res.data.openid;  
71 - this.session_key = res.data.session_key;  
72 - //设置全局变量openId  
73 - getApp().globalData.openId = res.data.openid;  
74 - }  
75 - },  
76 - complete: e => {  
77 - if (e.data.errcode != null) {  
78 - return;  
79 - // return uni.$u.toast('获取用户唯一id失败');  
80 - }  
81 - }  
82 - });  
83 - } else {  
84 - }  
85 - }  
86 - });  
87 - //#endif  
88 - },  
89 - methods: {  
90 - ...mapMutations(['setUserInfo']),  
91 - ...mapActions(['updateBadgeTotal']),  
92 - //微信授权登录  
93 - //#ifdef MP-WEIXIN  
94 - onAuthorization() {  
95 - /**  
96 - * 注意：通过wx.getUserProfile并不能获取用户的openid，openid是唯一识别用户的标识，  
97 - * 所以最好在用户授权登录时就获取。调用wx.login()获取  
98 - */  
99 - wx.getUserProfile({  
100 - desc: '获取用户授权信息',  
101 - success: res => {  
102 - if (res) {  
103 - //微信官方自带解密（node.js实现）  
104 - let pc = new WXBizDataCrypt(appId, this.session_key);  
105 - let data = pc.decryptData(res.encryptedData, res.iv);  
106 - let obj = {  
107 - avatarUrl: data.avatarUrl,  
108 - nickName: data.nickName,  
109 - thirdUserId: this.openid  
110 - };  
111 - //判断是否需要绑定  
112 - uni.$u.http  
113 - .get(`/yt/third/login/${this.openid}`)  
114 - .then(res => {  
115 - if (res.token == '' || res.token == null) {  
116 - //需要绑定，跳转我的页面进行绑定,显示绑定按钮  
117 - uni.reLaunch({  
118 - url: '../../pages/personal/personal'  
119 - });  
120 - let userInfo = {  
121 - isThirdLogin: true //token用于判断是否登录  
122 - };  
123 - this.setUserInfo(userInfo);  
124 - } else {  
125 - // 不需要绑定  
126 - // 储存登录信息  
127 - let resObj = {  
128 - refreshToken: res.refreshToken,  
129 - isToken: res.token  
130 - };  
131 - let userInfo = {  
132 - ...resObj,  
133 - token: true //token用于判断是否登录  
134 - };  
135 - if (userInfo.token) {  
136 - this.setUserInfo(userInfo);  
137 - }  
138 - uni.showToast({  
139 - title: '第三方账号登录成功~',  
140 - icon: 'none'  
141 - });  
142 - this.saveUserInfo();  
143 - this.getAlarmTotalData();  
144 - uni.reLaunch({  
145 - url: '../../pages/personal/personal'  
146 - });  
147 - }  
148 - })  
149 - .catch(e => {  
150 - uni.$u.toast(e.data?.message);  
151 - });  
152 - /**  
153 - * 有些时候uni.navigatorBack({})没有返回到上级页面  
154 - * 才使用uni.reLaunch()进行跳转  
155 - */  
156 - // #ifdef MP  
157 - setTimeout(() => {  
158 - uni.reLaunch({  
159 - url: '../../pages/personal/personal?obj=' + encodeURIComponent(JSON.stringify(obj))  
160 - });  
161 - }, 500);  
162 - // #endif  
163 - }  
164 - }  
165 - });  
166 - },  
167 - //#endif  
168 - saveUserInfo() {  
169 - //储存个人信息  
170 - uni.$u.http.get('/yt/user/me/info').then(res => {  
171 - if (res) {  
172 - this.setUserInfo(res);  
173 - }  
174 - });  
175 - },  
176 - getAlarmTotalData() {  
177 - uni.$u.http.get('/yt/homepage/app').then(res => {  
178 - if (res) {  
179 - //异步实时更新告警徽标数  
180 - this.updateBadgeTotal(res.totalAlarm.activedAlarm);  
181 - }  
182 - });  
183 - },  
184 - onSubmitFunc() {  
185 - if (this.loginForm.username == '') {  
186 - return uni.$u.toast('请输入登录账号~');  
187 - }  
188 - const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;  
189 - if (this.loginForm.password == '') {  
190 - uni.showToast({  
191 - title: '请输入登录密码~',  
192 - icon: 'none'  
193 - });  
194 - return;  
195 - } else if (!passReg.test(this.loginForm.password)) {  
196 - uni.showToast({  
197 - title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',  
198 - icon: 'none',  
199 - duration: 3000  
200 - });  
201 - return;  
202 - }  
203 - uni.$u.http  
204 - .post('/auth/login', this.loginForm)  
205 - .then(res => {  
206 - if (res) {  
207 - // 储存登录信息  
208 - let resObj = {  
209 - refreshToken: res.refreshToken,  
210 - isToken: res.token  
211 - };  
212 - let userInfo = {  
213 - ...resObj,  
214 - token: true, //token用于判断是否登录  
215 - isThirdLogin: false  
216 - };  
217 - if (userInfo.token) {  
218 - this.setUserInfo(userInfo);  
219 - }  
220 - uni.showToast({  
221 - title: '登录成功~',  
222 - icon: 'none'  
223 - }).then(res => {  
224 - /**  
225 - * 有些时候不起作用  
226 - */  
227 - // uni.navigateBack({  
228 - // delta: 1  
229 - // });  
230 - // #ifdef APP-PLUS||MP  
231 - uni.reLaunch({  
232 - url: '/pages/personal/personal'  
233 - });  
234 - // #endif  
235 - });  
236 - this.saveUserInfo();  
237 - this.getAlarmTotalData();  
238 - }  
239 - })  
240 - .catch(e => {  
241 - uni.$u.toast(e.data?.message);  
242 - });  
243 - },  
244 - saveUserInfo() {  
245 - //储存个人信息  
246 - uni.$u.http.get('/yt/user/me/info').then(res => {  
247 - if (res) {  
248 - this.setUserInfo(res);  
249 - }  
250 - });  
251 - },  
252 - openCodeFunc() {  
253 - uni.navigateTo({  
254 - url: '../other/code'  
255 - });  
256 - },  
257 - findPassrordFunc() {  
258 - uni.navigateTo({  
259 - url: '../other/findPassword'  
260 - });  
261 - },  
262 - showPasswordMode() {  
263 - this.showPassword = !this.showPassword;  
264 - }  
265 - }  
266 -};  
267 -</script>  
268 -  
269 -<style lang="scss" scoped>  
270 -@import './static/login.scss'; 1 +<template>
  2 + <view class="login-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="u-flex login-main">
  6 + <view class="content">
  7 + <view class="hello login-text-muted">您好,</view>
  8 + <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view>
  9 + <view class="circleStyle"></view>
  10 + </view>
  11 + </view>
  12 + <view class="f__login">
  13 + <view class="loginPhone">
  14 + <view class="form-row u-flex">
  15 + <view class="v-input"><input type="text" v-model="loginForm.username" maxlength="32" placeholder="请输入登录账号" /></view>
  16 + <u-icon></u-icon>
  17 + </view>
  18 + <view class="form-row u-flex">
  19 + <view class="v-input"><input type="text" v-model="loginForm.password" maxlength="32" placeholder="请输入登录密码" :password="!showPassword" /></view>
  20 + <view class="v-password" @click="showPasswordMode"><u-icon color="#9a9a9a" size="25" :name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon></view>
  21 + <u-icon></u-icon>
  22 + </view>
  23 + <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>
  24 + <view class="u-flex row-item">
  25 + <view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view>
  26 + <view class="row-reset login-text-gray" @click="findPassrordFunc">忘记密码</view>
  27 + </view>
  28 + <view class="u-flex link-login">
  29 + <view class="link-text login-text-gray">第三方账号登录</view>
  30 + <view style="height:20rpx"></view>
  31 + <view @click="onAuthorization" class="link-image"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></view>
  32 + <view class="circleStyleBottom"></view>
  33 + </view>
  34 + </view>
  35 + </view>
  36 + </view>
  37 +</template>
  38 +
  39 +<script>
  40 +import { mapMutations, mapActions } from 'vuex';
  41 +import { loginApp } from '@/config/login';
  42 +import baseUrl from '@/config/baseUrl.js';
  43 +import WXBizDataCrypt from '@/config/WXBizDataCrypt.js';
  44 +import { appId, appSecrect } from '@/config/constant.js';
  45 +
  46 +export default {
  47 + data() {
  48 + return {
  49 + loginForm: {
  50 + username: '',
  51 + password: ''
  52 + },
  53 + showPassword: false,
  54 + code: '',
  55 + openid: '',
  56 + session_key: ''
  57 + };
  58 + },
  59 + onLoad() {
  60 + //#ifdef MP-WEIXIN
  61 + wx.login({
  62 + success: res => {
  63 + if (res.code) {
  64 + this.code = res.code;
  65 + wx.request({
  66 + url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecrect}&js_code=${this.code}&grant_type=authorization_code`,
  67 + method: 'GET',
  68 + success: res => {
  69 + if (res.statusCode == 200) {
  70 + this.openid = res.data.openid;
  71 + this.session_key = res.data.session_key;
  72 + //设置全局变量openId
  73 + getApp().globalData.openId = res.data.openid;
  74 + }
  75 + },
  76 + complete: e => {
  77 + if (e.data.errcode != null) {
  78 + return;
  79 + // return uni.$u.toast('获取用户唯一id失败');
  80 + }
  81 + }
  82 + });
  83 + } else {
  84 + }
  85 + }
  86 + });
  87 + //#endif
  88 + },
  89 + methods: {
  90 + ...mapMutations(['setUserInfo']),
  91 + ...mapActions(['updateBadgeTotal']),
  92 + //微信授权登录
  93 + //#ifdef MP-WEIXIN
  94 + onAuthorization() {
  95 + /**
  96 + * 注意：通过wx.getUserProfile并不能获取用户的openid，openid是唯一识别用户的标识，
  97 + * 所以最好在用户授权登录时就获取。调用wx.login()获取
  98 + */
  99 + wx.getUserProfile({
  100 + desc: '获取用户授权信息',
  101 + success: res => {
  102 + if (res) {
  103 + //微信官方自带解密（node.js实现）
  104 + let pc = new WXBizDataCrypt(appId, this.session_key);
  105 + let data = pc.decryptData(res.encryptedData, res.iv);
  106 + let obj = {
  107 + avatarUrl: data.avatarUrl,
  108 + nickName: data.nickName,
  109 + thirdUserId: this.openid
  110 + };
  111 + //判断是否需要绑定
  112 + uni.$u.http
  113 + .get(`/yt/third/login/${this.openid}`)
  114 + .then(res => {
  115 + if (res.token == '' || res.token == null) {
  116 + //需要绑定，跳转我的页面进行绑定,显示绑定按钮
  117 + uni.reLaunch({
  118 + url: '../../pages/personal/personal'
  119 + });
  120 + let userInfo = {
  121 + isThirdLogin: true //token用于判断是否登录
  122 + };
  123 + this.setUserInfo(userInfo);
  124 + } else {
  125 + // 不需要绑定
  126 + // 储存登录信息
  127 + let resObj = {
  128 + refreshToken: res.refreshToken,
  129 + isToken: res.token
  130 + };
  131 + let userInfo = {
  132 + ...resObj,
  133 + token: true //token用于判断是否登录
  134 + };
  135 + if (userInfo.token) {
  136 + this.setUserInfo(userInfo);
  137 + }
  138 + uni.showToast({
  139 + title: '第三方账号登录成功~',
  140 + icon: 'none'
  141 + });
  142 + this.saveUserInfo();
  143 + this.getAlarmTotalData();
  144 + uni.reLaunch({
  145 + url: '../../pages/personal/personal'
  146 + });
  147 + }
  148 + })
  149 + .catch(e => {
  150 + uni.$u.toast(e.data?.message);
  151 + });
  152 + /**
  153 + * 有些时候uni.navigatorBack({})没有返回到上级页面
  154 + * 才使用uni.reLaunch()进行跳转
  155 + */
  156 + // #ifdef MP
  157 + setTimeout(() => {
  158 + uni.reLaunch({
  159 + url: '../../pages/personal/personal?obj=' + encodeURIComponent(JSON.stringify(obj))
  160 + });
  161 + }, 500);
  162 + // #endif
  163 + }
  164 + }
  165 + });
  166 + },
  167 + //#endif
  168 + saveUserInfo() {
  169 + //储存个人信息
  170 + uni.$u.http.get('/yt/user/me/info').then(res => {
  171 + if (res) {
  172 + this.setUserInfo(res);
  173 + }
  174 + });
  175 + },
  176 + async getAlarmTotalData() {
  177 + const res = await uni.$u.http.get('/yt/homepage/app');
  178 + if (res) {
  179 + //异步实时更新告警徽标数
  180 + this.updateBadgeTotal(res.totalAlarm.activedAlarm);
  181 + }
  182 + },
  183 + onSubmitFunc() {
  184 + if (this.loginForm.username == '') {
  185 + return uni.$u.toast('请输入登录账号~');
  186 + }
  187 + const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
  188 + if (this.loginForm.password == '') {
  189 + uni.showToast({
  190 + title: '请输入登录密码~',
  191 + icon: 'none'
  192 + });
  193 + return;
  194 + } else if (!passReg.test(this.loginForm.password)) {
  195 + uni.showToast({
  196 + title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
  197 + icon: 'none',
  198 + duration: 3000
  199 + });
  200 + return;
  201 + }
  202 + uni.$u.http
  203 + .post('/auth/login', this.loginForm)
  204 + .then(res => {
  205 + if (res) {
  206 + // 储存登录信息
  207 + let resObj = {
  208 + refreshToken: res.refreshToken,
  209 + isToken: res.token
  210 + };
  211 + let userInfo = {
  212 + ...resObj,
  213 + token: true, //token用于判断是否登录
  214 + isThirdLogin: false
  215 + };
  216 + if (userInfo.token) {
  217 + this.setUserInfo(userInfo);
  218 + }
  219 + uni
  220 + .showToast({
  221 + title: '登录成功~',
  222 + icon: 'none'
  223 + })
  224 + .then(async res => {
  225 + this.saveUserInfo();
  226 + await this.getAlarmTotalData();
  227 + // #ifdef APP-PLUS||MP
  228 + uni.reLaunch({
  229 + url: '/pages/personal/personal'
  230 + });
  231 + // #endif
  232 + });
  233 + }
  234 + })
  235 + .catch(e => {
  236 + uni.$u.toast(e.data?.message);
  237 + });
  238 + },
  239 + saveUserInfo() {
  240 + //储存个人信息
  241 + uni.$u.http.get('/yt/user/me/info').then(res => {
  242 + if (res) {
  243 + this.setUserInfo(res);
  244 + }
  245 + });
  246 + },
  247 + openCodeFunc() {
  248 + uni.navigateTo({
  249 + url: '../other/code'
  250 + });
  251 + },
  252 + findPassrordFunc() {
  253 + uni.navigateTo({
  254 + url: '../other/findPassword'
  255 + });
  256 + },
  257 + showPasswordMode() {
  258 + this.showPassword = !this.showPassword;
  259 + }
  260 + }
  261 +};
  262 +</script>
  263 +
  264 +<style lang="scss" scoped>
  265 +@import './static/login.scss';
271 </style> 266 </style>
@@ -26,15 +26,18 @@ export const mutations = { @@ -26,15 +26,18 @@ export const mutations = {
26 // #ifndef H5 26 // #ifndef H5
27 uni.removeStorageSync("userInfo"); 27 uni.removeStorageSync("userInfo");
28 // #endif 28 // #endif
29 - }, 29 + },
  30 + setBadgeInfo(state,payload){
  31 + state.badgeInfo = payload;
  32 + }
30 }; 33 };
31 export const actions = { 34 export const actions = {
32 //更新告警徽标数 35 //更新告警徽标数
33 updateBadgeTotal({ 36 updateBadgeTotal({
34 state, 37 state,
35 commit 38 commit
36 - }, data) {  
37 - state.badgeInfo = data  
38 - console.log('Change total', data); 39 + }, data) {
  40 + commit('setBadgeInfo',data)
  41 + console.log('Change total', data,state);
39 } 42 }
40 }; 43 };