简柏林 / thingskit-app · Commits

Commit 388fbf63306ed8c29f3e48d0c5e207aba727545b

Authored by xp.Huang
2 parents 7846a407 4b096572

Merge branch 'sqy_dev' into 'main' 

Sqy dev

See merge request huang/thingskit-app!42
Inline Side-by-side
Showing 8 changed files with 607 additions and 478 deletions
@@ -26,18 +26,17 @@ export default { @@ -26,18 +26,17 @@ export default {
26 </script> 26 </script>
27 27
28 <style lang="scss"> 28 <style lang="scss">
29 -/* #ifndef APP-NVUE */  
30 @import '@/uni_modules/uview-ui/index.scss'; 29 @import '@/uni_modules/uview-ui/index.scss';
31 @import './style/iconfont.scss'; 30 @import './style/iconfont.scss';
32 @import './style/common.scss'; 31 @import './style/common.scss';
33 page { 32 page {
34 background-color: #f5f5f5; 33 background-color: #f5f5f5;
  34 +}
  35 +::-webkit-scrollbar {
  36 + display: none;
  37 + width: 0 !important;
  38 + height: 0 !important;
  39 + -webkit-appearance: none;
  40 + background: transparent;
35 } 41 }
36 -// 隐藏滚动条  
37 -::-webkit-scrollbar {  
38 - width: 0;  
39 - height: 0;  
40 - color: transparent;  
41 -}  
42 -/* #endif */  
43 </style> 42 </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: 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>
@@ -47,8 +47,10 @@ import historyData from './tabDetail/historyData.vue'; @@ -47,8 +47,10 @@ import historyData from './tabDetail/historyData.vue';
47 import commondRecord from './tabDetail/CommandRecord.vue'; 47 import commondRecord from './tabDetail/CommandRecord.vue';
48 import { getDeviceKeys, getHistoryData } from './api/index.js'; 48 import { getDeviceKeys, getHistoryData } from './api/index.js';
49 import { formatToDate } from '@/plugins/utils.js'; 49 import { formatToDate } from '@/plugins/utils.js';
  50 +import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
50 import moment from 'moment'; 51 import moment from 'moment';
51 export default { 52 export default {
  53 + mixins: [MescrollCompMixin],
52 components: { 54 components: {
53 fTabbar, 55 fTabbar,
54 basicInfo, 56 basicInfo,
@@ -49,18 +49,19 @@ @@ -49,18 +49,19 @@
49 </view> 49 </view>
50 50
51 <!-- 下发命令 --> 51 <!-- 下发命令 -->
52 - <u-modal :show="showModel" closeOnClickOverlay :showConfirmButton="false" width="350px" @close="hiddenModal"> 52 + <u-modal :show="showModel" closeOnClickOverlay :showConfirmButton="false" width="720rpx" @close="hiddenModal" @touchmove.stop.prevent="disabledScroll">
53 <view style="width: 100%; padding: 0 30rpx;"> 53 <view style="width: 100%; padding: 0 30rpx;">
54 <view style="text-align: center; font-weight:700;margin-bottom: 40rpx;">命令下发</view> 54 <view style="text-align: center; font-weight:700;margin-bottom: 40rpx;">命令下发</view>
55 <view class="u-flex"> 55 <view class="u-flex">
56 <text style="color: #333; font-size: 28rpx;font-weight:700;margin-right: 30rpx;">下发类型:</text> 56 <text style="color: #333; font-size: 28rpx;font-weight:700;margin-right: 30rpx;">下发类型:</text>
57 - <u-radio-group v-model="commandType" placement="row" size="14"> 57 +
  58 + <u-radio-group v-model="commandType" placement="row">
58 <u-radio activeColor="#3388FF" label="OneWay" name="OneWay"></u-radio> 59 <u-radio activeColor="#3388FF" label="OneWay" name="OneWay"></u-radio>
59 <view style="margin: 0 20rpx;"></view> 60 <view style="margin: 0 20rpx;"></view>
60 <u-radio activeColor="#3388FF" label="TwoWay" name="TwoWay"></u-radio> 61 <u-radio activeColor="#3388FF" label="TwoWay" name="TwoWay"></u-radio>
61 </u-radio-group> 62 </u-radio-group>
62 </view> 63 </view>
63 - <view style="margin-top: 28rpx;"><u--textarea placeholder="请输入命令内容" v-model="commandValue" /></view> 64 + <view style="margin-top: 28rpx;width: 100%;"><u--textarea placeholder="请输入命令内容" v-model="commandValue" /></view>
64 65
65 <view class="button-group"> 66 <view class="button-group">
66 <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消" @click="cancelCommand"></u-button></view> 67 <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消" @click="cancelCommand"></u-button></view>
@@ -122,6 +123,9 @@ export default { @@ -122,6 +123,9 @@ export default {
122 showModal() { 123 showModal() {
123 this.showModel = true; 124 this.showModel = true;
124 }, 125 },
  126 + disabledScroll() {
  127 + return;
  128 + },
125 hiddenModal() { 129 hiddenModal() {
126 this.showModel = false; 130 this.showModel = false;
127 }, 131 },
@@ -132,7 +136,7 @@ export default { @@ -132,7 +136,7 @@ export default {
132 commandValue.additionalInfo = { 136 commandValue.additionalInfo = {
133 cmdType: 'API' 137 cmdType: 'API'
134 }; 138 };
135 - await issueCommand(this.commandType, this.deviceDetail.tbDeviceId,commandValue); 139 + await issueCommand(this.commandType, this.deviceDetail.tbDeviceId, commandValue);
136 this.hiddenModal(); 140 this.hiddenModal();
137 } catch (e) { 141 } catch (e) {
138 uni.$u.toast('下发失败~'); 142 uni.$u.toast('下发失败~');
@@ -5,7 +5,8 @@ @@ -5,7 +5,8 @@
5 "pages": [{ 5 "pages": [{
6 "path": "pages/index/index", 6 "path": "pages/index/index",
7 "style": { 7 "style": {
8 - "navigationBarTitleText": "首页" 8 + "navigationBarTitleText": "首页",
  9 + "disableScroll": true
9 } 10 }
10 }, 11 },
11 { 12 {
@@ -146,7 +147,8 @@ @@ -146,7 +147,8 @@
146 "navigationBarTextStyle": "black", 147 "navigationBarTextStyle": "black",
147 "navigationBarTitleText": "云腾app", 148 "navigationBarTitleText": "云腾app",
148 "navigationBarBackgroundColor": "#FFFFFF", 149 "navigationBarBackgroundColor": "#FFFFFF",
149 - "backgroundColor": "#FFFFFF" 150 + "backgroundColor": "#FFFFFF",
  151 + "backgroundColorTop": "#FFFFFF"
150 }, 152 },
151 "tabBar": { 153 "tabBar": {
152 "color": "#ffffff", 154 "color": "#ffffff",
@@ -25,66 +25,66 @@ @@ -25,66 +25,66 @@
25 </view> 25 </view>
26 </view> 26 </view>
27 </u-sticky> 27 </u-sticky>
28 - <mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">  
29 - <view class="device-list">  
30 - <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime, item.tbDeviceId)" class="list-item" v-for="item in list" :key="item.id">  
31 - <view  
32 - class="u-flex item"  
33 - style="  
34 - justify-content: flex-start;  
35 - flex-direction: column;  
36 - align-items: center;  
37 - "  
38 - >  
39 - <view style="width: 450rpx; text-align: left">  
40 - <text style="color: #333; font-size: 30rpx;font-weight: bold;">{{ item.name }}</text>  
41 - </view>  
42 - <view style="width: 450rpx; text-align: left; margin-top: 10rpx">  
43 - <view style="color: #666; font-size: 14px;display: flex;">  
44 - 设备编号:  
45 - <view style="margin-left:16rpx">{{ item.sn }}</view> 28 + <mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
  29 + <view class="device-list">
  30 + <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime, item.tbDeviceId)" class="list-item" v-for="item in list" :key="item.id">
  31 + <view
  32 + class="u-flex item"
  33 + style="
  34 + justify-content: flex-start;
  35 + flex-direction: column;
  36 + align-items: center;
  37 + "
  38 + >
  39 + <view style="width: 450rpx; text-align: left">
  40 + <text style="color: #333; font-size: 30rpx;font-weight: bold;">{{ item.name }}</text>
46 </view> 41 </view>
47 - </view>  
48 - <view style="width: 450rpx; text-align: left; margin-top: 10rpx">  
49 - <view style="color: #666; font-size: 14px;display: flex;">  
50 - 所属组织:  
51 - <view style="margin-left:16rpx">{{ item.organizationDTO.name }}</view> 42 + <view style="width: 450rpx; text-align: left; margin-top: 10rpx">
  43 + <view style="color: #666; font-size: 14px;display: flex;">
  44 + 设备编号:
  45 + <view style="margin-left:16rpx">{{ item.sn }}</view>
  46 + </view>
  47 + </view>
  48 + <view style="width: 450rpx; text-align: left; margin-top: 10rpx">
  49 + <view style="color: #666; font-size: 14px;display: flex;">
  50 + 所属组织:
  51 + <view style="margin-left:16rpx">{{ item.organizationDTO.name }}</view>
  52 + </view>
52 </view> 53 </view>
53 </view> 54 </view>
54 - </view>  
55 - <view class="item">  
56 - <view class="u-flex" style="margin-top: -6rpx">  
57 - <image  
58 - style="  
59 - width: 30rpx;  
60 - height: 30rpx;  
61 - margin-top: 5rpx;  
62 - margin-right: 5rpx;  
63 - "  
64 - :src="item.deviceState === 'ONLINE' ? '../../static/online.png' : item.deviceState === 'INACTIVE' ? '../../static/unonline.png' : '../../static/baojing.png'"  
65 - />  
66 -  
67 - <view>  
68 - <text 55 + <view class="item">
  56 + <view class="u-flex" style="margin-top: -6rpx">
  57 + <image
69 style=" 58 style="
70 - color: #377dff;  
71 - font-size: 13px;  
72 - margin-left: 5rpx;  
73 - margin-top: 20rpx;  
74 - "  
75 - :style="{ color: item.deviceState === 'ONLINE' ? '#377DFF' : item.deviceState === 'INACTIVE' ? '#666666' : '#DE4437' }"  
76 - >  
77 - {{ item.deviceState === 'ONLINE' ? '在线' : item.deviceState === 'INACTIVE' ? '待激活' : '离线' }}  
78 - </text> 59 + width: 30rpx;
  60 + height: 30rpx;
  61 + margin-top: 5rpx;
  62 + margin-right: 5rpx;
  63 + "
  64 + :src="item.deviceState === 'ONLINE' ? '../../static/online.png' : item.deviceState === 'INACTIVE' ? '../../static/unonline.png' : '../../static/baojing.png'"
  65 + />
  66 +
  67 + <view>
  68 + <text
  69 + style="
  70 + color: #377dff;
  71 + font-size: 13px;
  72 + margin-left: 5rpx;
  73 + margin-top: 20rpx;
  74 + "
  75 + :style="{ color: item.deviceState === 'ONLINE' ? '#377DFF' : item.deviceState === 'INACTIVE' ? '#666666' : '#DE4437' }"
  76 + >
  77 + {{ item.deviceState === 'ONLINE' ? '在线' : item.deviceState === 'INACTIVE' ? '待激活' : '离线' }}
  78 + </text>
  79 + </view>
79 </view> 80 </view>
80 </view> 81 </view>
81 </view> 82 </view>
82 </view> 83 </view>
83 - </view>  
84 - </mescroll-body> 84 + </mescroll-body>
85 <!-- 设备筛选 --> 85 <!-- 设备筛选 -->
86 - <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20">  
87 - <view class="filter"> 86 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20" @touchmove.stop.prevent="disabledScroll">
  87 + <view class="filter" @touchmove.stop.prevent="disabledScroll">
88 <view class="filter-title"><text>筛选条件</text></view> 88 <view class="filter-title"><text>筛选条件</text></view>
89 <FilterItem :filterList="deviceStatus" title="设备状态" @clickTag="currentIndex => handleClickTag(currentIndex, deviceStatus)"></FilterItem> 89 <FilterItem :filterList="deviceStatus" title="设备状态" @clickTag="currentIndex => handleClickTag(currentIndex, deviceStatus)"></FilterItem>
90 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem> 90 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
@@ -116,6 +116,7 @@ export default { @@ -116,6 +116,7 @@ export default {
116 auto: false //是否在初始化后,自动执行downCallback; 默认true 116 auto: false //是否在初始化后,自动执行downCallback; 默认true
117 }, 117 },
118 upOption: { 118 upOption: {
  119 + isBounce: false,
119 auto: false // 不自动加载 120 auto: false // 不自动加载
120 }, 121 },
121 show: false, 122 show: false,
@@ -217,6 +218,9 @@ export default { @@ -217,6 +218,9 @@ export default {
217 } 218 }
218 }, 219 },
219 methods: { 220 methods: {
  221 + disabledScroll() {
  222 + return;
  223 + },
220 /*下拉刷新的回调 */ 224 /*下拉刷新的回调 */
221 downCallback() { 225 downCallback() {
222 //联网加载数据 226 //联网加载数据
@@ -379,4 +383,4 @@ export default { @@ -379,4 +383,4 @@ export default {
379 } 383 }
380 } 384 }
381 } 385 }
382 -</style> 386 +</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>  
10 - </view>  
11 - <view class="f__login">  
12 - <view class="loginPhone">  
13 - <view class="form-row u-flex">  
14 - <view class="v-input"><input type="text" v-model="loginForm.username" maxlength="32" placeholder="请输入登录账号" /></view>  
15 - <u-icon></u-icon>  
16 - </view>  
17 - <view class="form-row u-flex">  
18 - <view class="v-input"><input type="text" v-model="loginForm.password" maxlength="32" placeholder="请输入登录密码" :password="!showPassword" /></view>  
19 - <view class="v-password" @click="showPasswordMode">  
20 - <u-icon color="#9a9a9a" width="18" height="15" :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'"></u-icon>  
21 - </view>  
22 - <u-icon></u-icon>  
23 - </view>  
24 - <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>  
25 - <view class="u-flex row-item">  
26 - <view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view>  
27 - <view class="row-reset login-text-gray" @click="findPassrordFunc">忘记密码</view>  
28 - </view>  
29 - <view class="u-flex link-login">  
30 - <view class="link-text login-text-gray">第三方账号登录</view>  
31 - <view style="height:20rpx"></view>  
32 - <button class="link-image" @tap="onWenxinAuthorization"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></button>  
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 - };  
57 - },  
58 - onLoad() {  
59 - wx.login({  
60 - success: res => {  
61 - if (res.code) {  
62 - this.code = res.code;  
63 - //这里获取openid  
64 - } else {  
65 - return;  
66 - }  
67 - }  
68 - });  
69 - },  
70 - methods: {  
71 - ...mapMutations(['setUserInfo']),  
72 - ...mapActions(['updateBadgeTotal']),  
73 - //微信授权登录  
74 - //#ifdef MP-WEIXIN  
75 - onWenxinAuthorization() {  
76 - wx.getUserProfile({  
77 - desc: '微信第三方授权',  
78 - success: reswenxin => {  
79 - console.log('res=======>', reswenxin);  
80 - if (reswenxin.errMsg === 'getUserProfile:ok' && reswenxin.encryptedData) {  
81 - console.log('获取code', this.code);  
82 - //获取用户信息  
83 - let obj = {  
84 - avatarUrl: reswenxin.userInfo.avatarUrl,  
85 - thirdUserId: this.openid  
86 - };  
87 - //判断是否需要绑定  
88 - uni.$u.http  
89 - .get(`/yt/third/login/${this.code}`)  
90 - .then(res => {  
91 - console.log('Res', res);  
92 - //设置全局变量openId  
93 - // getApp().globalData.openId = res.data.openid;  
94 - if (res.token == '' || (res.token == null && res.refreshToken)) {  
95 - //需要绑定  
96 - let userInfo = {  
97 - isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号  
98 - avatar: obj.avatarUrl  
99 - };  
100 - this.setUserInfo(userInfo);  
101 - //设置全局变量openId  
102 - getApp().globalData.openId = res.refreshToken;  
103 - uni.reLaunch({  
104 - url: '../../pages/personal/personal'  
105 - });  
106 - } else {  
107 - // 不需要绑定,直接第三方登录使用  
108 - let resObj = {  
109 - refreshToken: res.refreshToken,  
110 - isToken: res.token  
111 - };  
112 - let userInfo = {  
113 - ...resObj,  
114 - token: true, //token用于判断是否登录  
115 - isThirdLoginAndNoDind: true //用于判断是否是第三方登录并且不需要绑定账号  
116 - };  
117 - if (userInfo.token) {  
118 - this.setUserInfo(userInfo);  
119 - }  
120 - uni.showToast({  
121 - title: '第三方账号登录成功~',  
122 - icon: 'none'  
123 - });  
124 - this.saveUserInfo();  
125 - this.getAlarmTotalData();  
126 - uni.reLaunch({  
127 - url: '../../pages/personal/personal'  
128 - });  
129 - }  
130 - })  
131 - .catch(e => {  
132 - uni.$u.toast(e.data?.message);  
133 - });  
134 - }  
135 - },  
136 - fail: res => {  
137 - //拒绝授权  
138 - return;  
139 - }  
140 - });  
141 - },  
142 - //#endif  
143 - saveUserInfo() {  
144 - //储存个人信息  
145 - uni.$u.http.get('/yt/user/me/info').then(res => {  
146 - if (res) {  
147 - this.setUserInfo(res);  
148 - }  
149 - });  
150 - },  
151 - getAlarmTotalData() {  
152 - uni.$u.http.get('/yt/homepage/app').then(res => {  
153 - if (res) {  
154 - //异步实时更新告警徽标数  
155 - this.updateBadgeTotal(res.totalAlarm.activedAlarm);  
156 - }  
157 - });  
158 - },  
159 - onSubmitFunc() {  
160 - if (this.loginForm.username == '') {  
161 - return uni.$u.toast('请输入登录账号~');  
162 - }  
163 - const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;  
164 - if (this.loginForm.password == '') {  
165 - uni.showToast({  
166 - title: '请输入登录密码~',  
167 - icon: 'none'  
168 - });  
169 - return;  
170 - } else if (!passReg.test(this.loginForm.password)) {  
171 - uni.showToast({  
172 - title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',  
173 - icon: 'none',  
174 - duration: 3000  
175 - });  
176 - return;  
177 - }  
178 - uni.$u.http  
179 - .post('/auth/login', this.loginForm)  
180 - .then(res => {  
181 - if (res) {  
182 - // 储存登录信息  
183 - let resObj = {  
184 - refreshToken: res.refreshToken,  
185 - isToken: res.token  
186 - };  
187 - let userInfo = {  
188 - ...resObj,  
189 - token: true, //token用于判断是否登录  
190 - isThirdLogin: false  
191 - };  
192 - if (userInfo.token) {  
193 - this.setUserInfo(userInfo);  
194 - }  
195 - uni.showToast({  
196 - title: '登录成功~',  
197 - icon: 'none'  
198 - }).then(res => {  
199 - /**  
200 - * 有些时候不起作用  
201 - */  
202 - // uni.navigateBack({  
203 - // delta: 1  
204 - // });  
205 - // #ifdef APP-PLUS||MP  
206 - uni.reLaunch({  
207 - url: '/pages/personal/personal'  
208 - });  
209 - // #endif  
210 - });  
211 - this.saveUserInfo();  
212 - this.getAlarmTotalData();  
213 - }  
214 - })  
215 - .catch(e => {  
216 - uni.$u.toast(e.data?.message);  
217 - });  
218 - },  
219 - openCodeFunc() {  
220 - uni.navigateTo({  
221 - url: '../other/code'  
222 - });  
223 - },  
224 - findPassrordFunc() {  
225 - uni.navigateTo({  
226 - url: '../other/findPassword'  
227 - });  
228 - },  
229 - showPasswordMode() {  
230 - this.showPassword = !this.showPassword;  
231 - }  
232 - }  
233 -};  
234 -</script>  
235 -  
236 -<style lang="scss" scoped>  
237 -@import './static/login.scss';  
238 -/deep/ button {  
239 - background: rgba(0, 0, 0, 0);  
240 -}  
241 -</style> 1 +<template>
  2 + <view class="login-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 +
  5 + <public-module></public-module>
  6 +
  7 + <view class="u-flex login-main">
  8 + <view class="content">
  9 + <view class="hello login-text-muted">您好,</view>
  10 +
  11 + <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view>
  12 + </view>
  13 + </view>
  14 +
  15 + <view class="f__login">
  16 + <view class="loginPhone">
  17 + <view class="form-row u-flex">
  18 + <view class="v-input"
  19 + ><input
  20 + type="text"
  21 + v-model="loginForm.username"
  22 + maxlength="32"
  23 + placeholder="请输入登录账号"
  24 + /></view>
  25 +
  26 + <u-icon></u-icon>
  27 + </view>
  28 +
  29 + <view class="form-row u-flex">
  30 + <view class="v-input"
  31 + ><input
  32 + type="text"
  33 + v-model="loginForm.password"
  34 + maxlength="32"
  35 + placeholder="请输入登录密码"
  36 + :password="!showPassword"
  37 + /></view>
  38 +
  39 + <view class="v-password" @click="showPasswordMode">
  40 + <u-icon
  41 + color="#9a9a9a"
  42 + width="18"
  43 + height="15"
  44 + :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'"
  45 + ></u-icon>
  46 + </view>
  47 +
  48 + <u-icon></u-icon>
  49 + </view>
  50 +
  51 + <button class="submit" size="default" @click="onSubmitFunc">
  52 + <text class="text">登录</text>
  53 + </button>
  54 +
  55 + <view class="u-flex row-item">
  56 + <view class="row-phone login-text-gray" @click="openCodeFunc"
  57 + >手机验证码登录</view
  58 + >
  59 +
  60 + <view class="row-reset login-text-gray" @click="findPassrordFunc"
  61 + >忘记密码</view
  62 + >
  63 + </view>
  64 +
  65 + <view class="u-flex link-login">
  66 + <view class="link-text login-text-gray">第三方账号登录</view>
  67 +
  68 + <view style="height: 20rpx"></view>
  69 +
  70 + <button class="link-image" @tap="onWenxinAuthorization">
  71 + <image
  72 + class="image"
  73 + src="../../static/weixin.png"
  74 + mode="aspectFill"
  75 + ></image>
  76 + </button>
  77 + </view>
  78 + </view>
  79 + </view>
  80 + </view>
  81 +</template>
  82 +
  83 +<script>
  84 +import { mapMutations, mapActions } from "vuex";
  85 +
  86 +import { loginApp } from "@/config/login";
  87 +
  88 +import baseUrl from "@/config/baseUrl.js";
  89 +
  90 +import WXBizDataCrypt from "@/config/WXBizDataCrypt.js";
  91 +
  92 +import { appId, appSecrect } from "@/config/constant.js";
  93 +
  94 +export default {
  95 + data() {
  96 + return {
  97 + loginForm: {
  98 + username: "",
  99 +
  100 + password: "",
  101 + },
  102 +
  103 + showPassword: false,
  104 +
  105 + code: "",
  106 +
  107 + openid: "",
  108 + };
  109 + },
  110 +
  111 + onLoad() {
  112 + wx.login({
  113 + success: (res) => {
  114 + if (res.code) {
  115 + this.code = res.code;
  116 +
  117 + //这里获取openid
  118 + } else {
  119 + return;
  120 + }
  121 + },
  122 + });
  123 + },
  124 +
  125 + methods: {
  126 + ...mapMutations(["setUserInfo"]),
  127 +
  128 + ...mapActions(["updateBadgeTotal"]),
  129 +
  130 + //微信授权登录
  131 +
  132 + //#ifdef MP-WEIXIN
  133 +
  134 + onWenxinAuthorization() {
  135 + wx.getUserProfile({
  136 + desc: "微信第三方授权",
  137 +
  138 + success: (reswenxin) => {
  139 + console.log("res=======>", reswenxin);
  140 +
  141 + if (
  142 + reswenxin.errMsg === "getUserProfile:ok" &&
  143 + reswenxin.encryptedData
  144 + ) {
  145 + console.log("获取code", this.code);
  146 +
  147 + //获取用户信息
  148 +
  149 + let obj = {
  150 + avatarUrl: reswenxin.userInfo.avatarUrl,
  151 +
  152 + thirdUserId: this.openid,
  153 + };
  154 +
  155 + //判断是否需要绑定
  156 +
  157 + uni.$u.http
  158 +
  159 + .get(`/yt/third/login/${this.code}`)
  160 +
  161 + .then((res) => {
  162 + console.log("Res", res);
  163 +
  164 + //设置全局变量openId
  165 +
  166 + // getApp().globalData.openId = res.data.openid;
  167 +
  168 + if (
  169 + res.token == "" ||
  170 + (res.token == null && res.refreshToken)
  171 + ) {
  172 + //需要绑定
  173 +
  174 + let userInfo = {
  175 + isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
  176 +
  177 + avatar: obj.avatarUrl,
  178 + };
  179 +
  180 + this.setUserInfo(userInfo);
  181 +
  182 + //设置全局变量openId
  183 +
  184 + getApp().globalData.openId = res.refreshToken;
  185 +
  186 + uni.reLaunch({
  187 + url: "../../pages/personal/personal",
  188 + });
  189 + } else {
  190 + // 不需要绑定,直接第三方登录使用
  191 +
  192 + let resObj = {
  193 + refreshToken: res.refreshToken,
  194 +
  195 + isToken: res.token,
  196 + };
  197 +
  198 + let userInfo = {
  199 + ...resObj,
  200 +
  201 + token: true, //token用于判断是否登录
  202 +
  203 + isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
  204 + };
  205 +
  206 + if (userInfo.token) {
  207 + this.setUserInfo(userInfo);
  208 + }
  209 +
  210 + uni.showToast({
  211 + title: "第三方账号登录成功~",
  212 +
  213 + icon: "none",
  214 + });
  215 +
  216 + this.saveUserInfo();
  217 +
  218 + this.getAlarmTotalData();
  219 +
  220 + uni.reLaunch({
  221 + url: "../../pages/personal/personal",
  222 + });
  223 + }
  224 + })
  225 +
  226 + .catch((e) => {
  227 + uni.$u.toast(e.data?.message);
  228 + });
  229 + }
  230 + },
  231 +
  232 + fail: (res) => {
  233 + //拒绝授权
  234 +
  235 + return;
  236 + },
  237 + });
  238 + },
  239 +
  240 + //#endif
  241 +
  242 + saveUserInfo() {
  243 + //储存个人信息
  244 +
  245 + uni.$u.http.get("/yt/user/me/info").then((res) => {
  246 + if (res) {
  247 + this.setUserInfo(res);
  248 + }
  249 + });
  250 + },
  251 +
  252 + async getAlarmTotalData() {
  253 + const res = await uni.$u.http.get("/yt/homepage/app");
  254 + if (res) {
  255 + //异步实时更新告警徽标数
  256 + this.updateBadgeTotal(res.totalAlarm.activedAlarm);
  257 + }
  258 + },
  259 +
  260 + onSubmitFunc() {
  261 + if (this.loginForm.username == "") {
  262 + return uni.$u.toast("请输入登录账号~");
  263 + }
  264 + const passReg =
  265 + /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
  266 +
  267 + if (this.loginForm.password == "") {
  268 + uni.showToast({
  269 + title: "请输入登录密码~",
  270 +
  271 + icon: "none",
  272 + });
  273 + return;
  274 + } else if (!passReg.test(this.loginForm.password)) {
  275 + uni.showToast({
  276 + title:
  277 + "密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~",
  278 +
  279 + icon: "none",
  280 +
  281 + duration: 3000,
  282 + });
  283 +
  284 + return;
  285 + }
  286 + uni.$u.http
  287 + .post("/auth/login", this.loginForm)
  288 +
  289 + .then((res) => {
  290 + if (res) {
  291 + // 储存登录信息
  292 +
  293 + let resObj = {
  294 + refreshToken: res.refreshToken,
  295 +
  296 + isToken: res.token,
  297 + };
  298 +
  299 + let userInfo = {
  300 + ...resObj,
  301 +
  302 + token: true, //token用于判断是否登录
  303 +
  304 + isThirdLogin: false,
  305 + };
  306 +
  307 + if (userInfo.token) {
  308 + this.setUserInfo(userInfo);
  309 + }
  310 +
  311 + uni
  312 + .showToast({
  313 + title: "登录成功~",
  314 +
  315 + icon: "none",
  316 + })
  317 + .then((res) => {
  318 + /**
  319 +
  320 + * 有些时候不起作用
  321 +
  322 + */
  323 +
  324 + // uni.navigateBack({
  325 +
  326 + // delta: 1
  327 +
  328 + // });
  329 +
  330 + // #ifdef APP-PLUS||MP
  331 +
  332 + uni.reLaunch({
  333 + url: "/pages/personal/personal",
  334 + });
  335 +
  336 + // #endif
  337 + });
  338 +
  339 + this.saveUserInfo();
  340 +
  341 + this.getAlarmTotalData();
  342 + }
  343 + })
  344 +
  345 + .catch((e) => {
  346 + uni.$u.toast(e.data?.message);
  347 + });
  348 + },
  349 +
  350 + openCodeFunc() {
  351 + uni.navigateTo({
  352 + url: "../other/code",
  353 + });
  354 + },
  355 +
  356 + findPassrordFunc() {
  357 + uni.navigateTo({
  358 + url: "../other/findPassword",
  359 + });
  360 + },
  361 +
  362 + showPasswordMode() {
  363 + this.showPassword = !this.showPassword;
  364 + },
  365 + },
  366 +};
  367 +</script>
  368 +
  369 +<style lang="scss" scoped>
  370 +@import "./static/login.scss";
  371 +
  372 +/deep/ button {
  373 + background: rgba(0, 0, 0, 0);
  374 +}
  375 +</style>
@@ -29,6 +29,9 @@ export const mutations = { @@ -29,6 +29,9 @@ export const mutations = {
29 uni.removeStorageSync('storagePre'); 29 uni.removeStorageSync('storagePre');
30 // #endif 30 // #endif
31 }, 31 },
  32 + setBadgeInfo(state,payload){
  33 + state.badgeInfo = payload;
  34 + }
32 }; 35 };
33 export const actions = { 36 export const actions = {
34 //更新告警徽标数 37 //更新告警徽标数
@@ -36,6 +39,7 @@ export const actions = { @@ -36,6 +39,7 @@ export const actions = {
36 state, 39 state,
37 commit 40 commit
38 }, data) { 41 }, data) {
39 - state.badgeInfo = data 42 + commit('setBadgeInfo',data)
  43 + console.log('Change total', data,state);
40 } 44 }
41 }; 45 };