简柏林 / thingskit-app · Commits

Commit f51c6473083088776d36e6f3506a64f680a65a7c

Authored by xp.Huang
2 parents fd55c9f6 7caf684d

Merge branch 'local_dev_ft' into 'main_dev' 

feat: mp和android app两端，首页新增下拉刷新，告警详情新增所属场景，和优化部分代码；

See merge request yunteng/thingskit-app!112
Inline Side-by-side
Showing 10 changed files with 384 additions and 376 deletions
... ... @@ -36,6 +36,11 @@
36 36 class="text-device-muted text-clip">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text>
37 37 </view>
38 38 <view class="column">
  39 + <text class="text-org-bold">告警场景：</text>
  40 + <text
  41 + class="text-device-muted text-clip">{{ list.type == null ? '暂无数据' : list.type }}</text>
  42 + </view>
  43 + <view class="column">
39 44 <text class="text-org-bold">告警时间：</text>
40 45 <text class="text-device-muted">{{ list.createdTime }}</text>
41 46 </view>
... ... @@ -169,7 +174,7 @@
169 174 const jsonStr = JSON.stringify(e);
170 175 const str = jsonStr.substring(1, jsonStr.length - 1);
171 176 const newStr = str.replace(/\"/g, '');
172   - return newStr;
  177 + return newStr.slice(0,26);
173 178 }
174 179 }
175 180 };
... ...
... ... @@ -12,8 +12,8 @@
12 12 {{ deviceDetail.alias? deviceDetail.alias: deviceDetail.name }}
13 13 </view>
14 14 <view style="margin-left: 20rpx; font-size: 14px;"
15   - :style="{ color: deviceDetail.deviceState === 'INACTIVE' ? '#666' : deviceDetail.deviceState === 'ONLINE' ? '#377DFF' : '#DE4437' }">
16   - {{ deviceDetail.deviceState === 'INACTIVE' ? '待激活' : deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线' }}
  15 + :style="{ color: deviceDetail.deviceState === 'INACTIVE' ? '#666' : deviceDetail.deviceState === 'ONLINE' ? '#377DFF' : '#DE4437' }">
  16 + {{ deviceStatus }}
17 17 </view>
18 18 </view>
19 19 <view style="margin-right: 20rpx;"
... ... @@ -191,6 +191,9 @@
191 191 };
192 192 },
193 193 computed: {
  194 + deviceStatus(){
  195 + return this.deviceDetail.deviceState === 'INACTIVE' ? '待激活' : this.deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线'
  196 + },
194 197 deviceType() {
195 198 return this.deviceDetail.deviceType === 'DIRECT_CONNECTION' ?
196 199 '直连设备' :
... ... @@ -218,18 +221,20 @@
218 221 methods: {
219 222 handleCopy(value) {
220 223 uni.showModal({
221   - content: JSON.stringify(value), //模板中提示的内容
  224 + content: JSON.stringify(value),
222 225 confirmText: '复制内容',
223   - success: () => { //点击复制内容的后调函数
  226 + showCancel:false,
  227 + success: () => {
224 228 uni.setClipboardData({
225   - data: JSON.stringify(value), //要被复制的内容
226   - success: () => { //复制成功的回调函数
227   - uni.showToast({ //提示
  229 + data: JSON.stringify(value),
  230 + success: () => {
  231 + uni.showToast({
228 232 title: '复制成功'
229 233 })
230 234 }
231 235 });
232   - }
  236 + },
  237 +
233 238 });
234 239 },
235 240 radioChange: function(evt) {
... ...
... ... @@ -16,7 +16,7 @@
16 16 "path": "pages/index/index",
17 17 "style": {
18 18 "navigationBarTitleText": "首页",
19   - "disableScroll": true
  19 + "enablePullDownRefresh": true
20 20 }
21 21 },
22 22 {
... ...
... ... @@ -487,7 +487,8 @@
487 487 organizationName: e.organizationName,
488 488 details: e.details,
489 489 createdTime: e.createdTime,
490   - status: e.status
  490 + status: e.status,
  491 + type: e.type
491 492 };
492 493 uni.navigateTo({
493 494 url: '/alarmSubPage/alarmDetailPage/alarmDetail?data=' + JSON.stringify(obj)
... ...
... ... @@ -21,13 +21,13 @@
21 21 </view>
22 22 <view @click="navigatorDeviceStatus('OFFLINE')" class="u-flex sigle-child">
23 23 <view class="sigle-text">
24   - <text class="home-text-total">{{ deviceData.unLine }}</text>
  24 + <text class="home-text-total">{{ deviceData.offLine }}</text>
25 25 </view>
26 26 <view class="sigle-value"><text class="home-text-total-bottom">离线</text></view>
27 27 </view>
28 28 <view @click="navigatorDeviceStatus('INACTIVE')" class="u-flex sigle-child">
29 29 <view class="sigle-text">
30   - <text class="home-text-total">{{ deviceData.noActive }}</text>
  30 + <text class="home-text-total">{{ deviceData.inActive }}</text>
31 31 </view>
32 32 <view class="sigle-value"><text class="home-text-total-bottom">待激活</text></view>
33 33 </view>
... ... @@ -39,22 +39,22 @@
39 39 <text class="item-text home-text-muted">告警统计</text>
40 40 </view>
41 41 <view class="item-child-bottom u-flex">
42   - <view @click="navigatorAlarmStatus(['ACTIVE_UNACK', 'ACTIVE_ACK'])"
  42 + <view @click="navigatorAlarmStatus(['ACTIVE_UNACK'])"
43 43 class="u-flex sigle-child">
44 44 <view class="sigle-text">
45   - <text class="home-text-total">{{ alertData.noHandle }}</text>
  45 + <text class="home-text-total">{{ alertData.activedAlarm }}</text>
46 46 </view>
47 47 <view class="sigle-value"><text class="home-text-total-bottom">未处理</text></view>
48 48 </view>
49 49 <view @click="navigatorAlarmStatus('CLEARED_ACK')" class="u-flex sigle-child">
50 50 <view class="sigle-text">
51   - <text class="home-text-total">{{ alertData.doneHandle }}</text>
  51 + <text class="home-text-total">{{ alertData.clearedAck }}</text>
52 52 </view>
53 53 <view class="sigle-value"><text class="home-text-total-bottom">已处理</text></view>
54 54 </view>
55 55 <view @click="navigatorAlarmStatus('CLEARED_UNACK')" class="u-flex sigle-child">
56 56 <view class="sigle-text">
57   - <text class="home-text-total">{{ alertData.errorReport }}</text>
  57 + <text class="home-text-total">{{ alertData.clearedUnack }}</text>
58 58 </view>
59 59 <view class="sigle-value"><text class="home-text-total-bottom">误报</text></view>
60 60 </view>
... ... @@ -105,7 +105,8 @@
105 105 import {
106 106 mapActions
107 107 } from 'vuex';
108   - import api from '@/api/index.js'
  108 + import api from '@/api/index.js'
  109 + import { useNavigateTo } from '@/plugins/utils.js'
109 110
110 111 export default {
111 112 components: {
... ... @@ -115,13 +116,13 @@
115 116 return {
116 117 deviceData: {
117 118 onLine: 0,
118   - unLine: 0,
119   - noActive: 0
  119 + offLine: 0,
  120 + inActive: 0
120 121 },
121 122 alertData: {
122   - noHandle: 0,
123   - doneHandle: 0,
124   - errorReport: 0
  123 + activedAlarm: 0,
  124 + clearedAck: 0,
  125 + clearedUnack: 0
125 126 }
126 127 };
127 128 },
... ... @@ -136,18 +137,21 @@
136 137 isConfiguration: false
137 138 });
138 139 uni.removeStorageSync('getConfiguration');
  140 + },
  141 + onPullDownRefresh() {
  142 + this.getDeviceTotalData();
  143 + setTimeout(function () {
  144 + uni.stopPullDownRefresh();
  145 + uni.$u.toast('下拉刷新成功...');
  146 + }, 1000);
139 147 },
140 148 methods: {
141 149 ...mapActions(['updateBadgeTotal']),
142 150 async getDeviceTotalData() {
143 151 const res = await api.homeApi.getHomeStatisticsApi()
144   - if (res) {
145   - this.deviceData.onLine = res.totalDevice?.onLine;
146   - this.deviceData.unLine = res.totalDevice?.offLine;
147   - this.deviceData.noActive = res.totalDevice?.inActive;
148   - this.alertData.noHandle = res.totalAlarm?.activedAlarm;
149   - this.alertData.doneHandle = res.totalAlarm?.clearedAck;
150   - this.alertData.errorReport = res.totalAlarm?.clearedUnack;
  152 + if (res) {
  153 + for(let i in this.deviceData) Reflect.set(this.deviceData,i,res.totalDevice[i])
  154 + for(let i in this.alertData) Reflect.set(this.alertData,i,res.totalAlarm[i])
151 155 //异步实时更新告警徽标数
152 156 this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
153 157 }
... ... @@ -155,15 +159,11 @@
155 159 showToastWip() {
156 160 uni.$u.toast('拼命开发中 ...');
157 161 },
158   - openCamera() {
159   - uni.navigateTo({
160   - url: 'camera/camera'
161   - });
  162 + openCamera() {
  163 + useNavigateTo('camera/camera')
162 164 },
163   - openOrgStatus() {
164   - uni.navigateTo({
165   - url: 'configuration/configuration'
166   - });
  165 + openOrgStatus() {
  166 + useNavigateTo('configuration/configuration')
167 167 },
168 168 //告警状态查询
169 169 navigatorAlarmStatus(e) {
... ...
... ... @@ -143,3 +143,17 @@ export const getAppLatLon = function (
143 143 export function formatToDate(date = undefined, format = DATE_TIME_FORMAT) {
144 144 return moment(date).format(format);
145 145 }
  146 +
  147 +//封装uniapp跳转 navigateTo
  148 +export const useNavigateTo=(path,param)=>{
  149 + if (!path) return
  150 + if(param){
  151 + uni.navigateTo({
  152 + url: path + encodeURIComponent(JSON.stringify(param))
  153 + });
  154 + }else{
  155 + uni.navigateTo({
  156 + url:path
  157 + });
  158 + }
  159 +}
\ No newline at end of file
... ...
1   -<template>
2   - <view class="notify-detail-page">
3   - <!-- 公共组件-每个页面必须引入 -->
4   - <public-module></public-module>
5   - <view class="notify-column">
6   - <view class="column-list">
7   - <view style="margin-left: 36rpx;position: relative;top: 21rpx;">
8   - <view class="text-clip" style="width:500rpx">
9   - <text class="notify-detail-text ">{{ notifyList.title }}</text>
10   - </view>
11   - </view>
12   - <view style="height: 25rpx;"></view>
13   - <u-list height="140rpx">
14   - <u-list-item>
15   - <u-cell :value="`${notifyList.senderDate}`" :title="`${notifyList.senderName}`">
16   - <u-avatar slot="icon" shape="circle" size="35" :src="notifyList.avatar"></u-avatar>
17   - </u-cell>
18   - </u-list-item>
19   - </u-list>
20   - <view class="bottom-text">
21   - <view class="u-flex column"></view>
22   - <view style="margin-top: 21rpx;">
23   - <!-- 富文本解析 -->
24   - <u-parse :content="notifyList.content"></u-parse>
25   - <!-- 富文本解析 -->
26   - </view>
27   - </view>
28   - </view>
29   - </view>
30   - </view>
31   -</template>
32   -
33   -<script>
34   -export default {
35   - data() {
36   - return {
37   - notifyList: {}
38   - };
39   - },
40   - onLoad(e) {
41   - // 隐藏原生的tabbar
42   - uni.hideTabBar();
43   - if (e.data !== null) {
44   - let params = JSON.parse(decodeURIComponent(e.data));
45   - if (params) this.notifyList = params;
46   - uni.setStorageSync('storagePre', true);
47   - }
48   - },
49   - onHide() {
50   - uni.setStorageSync('storagePre', false);
51   - }
52   -};
53   -</script>
54   -
55   -<style lang="scss" scoped>
56   -@import './static/notifyDetail.scss';
57   -/deep/ .u-line {
58   - position: relative !important;
59   - width: 640rpx !important;
60   - left: 31rpx !important;
61   -}
62   -</style>
  1 +<template>
  2 + <view class="notify-detail-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="notify-column">
  6 + <view class="column-list">
  7 + <view class="column-title">
  8 + <view class="text-clip" style="width:500rpx">
  9 + <text class="notify-detail-text ">{{ notifyList.title }}</text>
  10 + </view>
  11 + </view>
  12 + <view style="height: 25rpx;"></view>
  13 + <u-list height="140rpx">
  14 + <u-list-item>
  15 + <u-cell :value="`${notifyList.senderDate}`" :title="`${notifyList.senderName}`">
  16 + <u-avatar slot="icon" shape="circle" size="35" :src="notifyList.avatar"></u-avatar>
  17 + </u-cell>
  18 + </u-list-item>
  19 + </u-list>
  20 + <view class="bottom-text">
  21 + <view class="u-flex column"></view>
  22 + <view style="margin-top: 21rpx;">
  23 + <!-- 富文本解析 -->
  24 + <u-parse :content="notifyList.content"></u-parse>
  25 + <!-- 富文本解析 -->
  26 + </view>
  27 + </view>
  28 + </view>
  29 + </view>
  30 + </view>
  31 +</template>
  32 +
  33 +<script>
  34 +export default {
  35 + data() {
  36 + return {
  37 + notifyList: {}
  38 + };
  39 + },
  40 + onLoad(e) {
  41 + // 隐藏原生的tabbar
  42 + uni.hideTabBar();
  43 + if (e.data !== null) {
  44 + let params = JSON.parse(decodeURIComponent(e.data));
  45 + if (params) this.notifyList = params;
  46 + }
  47 + }
  48 +};
  49 +</script>
  50 +
  51 +<style lang="scss" scoped>
  52 +@import './static/notifyDetail.scss';
  53 +/deep/ .u-line {
  54 + position: relative !important;
  55 + width: 640rpx !important;
  56 + left: 31rpx !important;
  57 +}
  58 +</style>
... ...
1   -.notify-detail-page {
2   - min-height: 100vh;
3   - background-color: #f8f9fa;
4   - padding-top: 10rpx;
5   - padding-left: 27rpx;
6   -}
7   -.notify-column {
8   - .column-list {
9   - border-radius: 10px;
10   - margin-top: 20rpx;
11   - width: 696rpx;
12   - height: 1000rpx;
13   - background-color: #ffffff;
14   - .bottom-text {
15   - margin-left: 33rpx;
16   - .text {
17   - color: #2e384d;
18   - font-size: 15px;
19   - }
20   - .column {
21   - margin-top: 20rpx;
22   - .text {
23   - font-size: 16px;
24   - font-family: PingFangSC-Medium, PingFang SC;
25   - font-weight: 500;
26   - color: #2e384d;
27   - }
28   - }
29   - }
30   - }
31   -}
  1 +.notify-detail-page {
  2 + min-height: 100vh;
  3 + background-color: #f8f9fa;
  4 + padding-top: 10rpx;
  5 + padding-left: 27rpx;
  6 +}
  7 +.notify-column {
  8 + .column-list {
  9 + border-radius: 10px;
  10 + margin-top: 20rpx;
  11 + width: 696rpx;
  12 + height: 1000rpx;
  13 + background-color: #ffffff;
  14 + .column-title{
  15 + margin-left: 36rpx;
  16 + position: relative;
  17 + top: 21rpx;
  18 + }
  19 + .bottom-text {
  20 + margin-left: 33rpx;
  21 + .text {
  22 + color: #2e384d;
  23 + font-size: 15px;
  24 + }
  25 + .column {
  26 + margin-top: 20rpx;
  27 + .text {
  28 + font-size: 16px;
  29 + font-family: PingFangSC-Medium, PingFang SC;
  30 + font-weight: 500;
  31 + color: #2e384d;
  32 + }
  33 + }
  34 + }
  35 + }
  36 +}
... ...
1   -.notify-page {
2   - min-height: 100vh;
3   - background-color: #f8f9fa;
4   - padding-top: 10rpx;
5   - padding-left: 27rpx;
6   -}
7   -/deep/.u-list-item {
8   - background: #ffffff;
9   - width: 695rpx;
10   - border-radius: 10px;
11   - margin-top: 20rpx;
12   -}
13   -.notify-main {
14   - .main {
15   - flex-direction: column;
16   - margin-left: -22rpx;
17   - .main-item {
18   - justify-content: space-between;
19   - flex-direction: row;
20   - margin: 15rpx;
21   - width: 700rpx;
22   - height: 136rpx;
23   - background: #ffffff;
24   - border-radius: 10px;
25   - .item {
26   - justify-content: space-between;
27   - flex-direction: row;
28   - .item-avatar {
29   - margin-left: 30rpx;
30   - .avatar {
31   - margin-left: 30rpx;
32   - }
33   - }
34   - .item-content {
35   - margin-left: 30rpx;
36   - text-align: left;
37   - justify-content: space-between;
38   - flex-direction: column;
39   - .text-top {
40   - width: 400rpx;
41   - color: #2e384d;
42   - font-size: 15px;
43   - }
44   - .text-bottom {
45   - width: 400rpx;
46   - color: #999999;
47   - font-size: 13px;
48   - }
49   - }
50   - }
51   - .item-right {
52   - .text {
53   - margin-right: 30rpx;
54   - color: #999999;
55   - font-size: 13px;
56   - }
57   - }
58   - }
59   - }
60   -}
  1 +.notify-page {
  2 + min-height: 100vh;
  3 + background-color: #f8f9fa;
  4 + padding-top: 10rpx;
  5 + padding-left: 27rpx;
  6 + .notify-page-top-select{
  7 + width: 750rpx;
  8 + height:53rpx;
  9 + background-color: #f8f9fa;
  10 + position:fixed;
  11 + top:0;
  12 + z-index: 99999;
  13 + }
  14 + .top-select{
  15 + background-color: #f8f9fa;
  16 + width: 700rpx;
  17 + position: relative;
  18 + top: 35rpx;
  19 + }
  20 +}
  21 +/deep/.u-list-item {
  22 + background: #ffffff;
  23 + width: 695rpx;
  24 + border-radius: 10px;
  25 + margin-top: 20rpx;
  26 +}
  27 +.notify-main {
  28 + .main {
  29 + flex-direction: column;
  30 + margin-left: -22rpx;
  31 + .main-item {
  32 + justify-content: space-between;
  33 + flex-direction: row;
  34 + margin: 15rpx;
  35 + width: 700rpx;
  36 + height: 136rpx;
  37 + background: #ffffff;
  38 + border-radius: 10px;
  39 + .item {
  40 + justify-content: space-between;
  41 + flex-direction: row;
  42 + .item-avatar {
  43 + margin-left: 30rpx;
  44 + .avatar {
  45 + margin-left: 30rpx;
  46 + }
  47 + }
  48 + .item-content {
  49 + margin-left: 30rpx;
  50 + text-align: left;
  51 + justify-content: space-between;
  52 + flex-direction: column;
  53 + .text-top {
  54 + width: 400rpx;
  55 + color: #2e384d;
  56 + font-size: 15px;
  57 + }
  58 + .text-bottom {
  59 + width: 400rpx;
  60 + color: #999999;
  61 + font-size: 13px;
  62 + }
  63 + }
  64 + }
  65 + .item-right {
  66 + .text {
  67 + margin-right: 30rpx;
  68 + color: #999999;
  69 + font-size: 13px;
  70 + }
  71 + }
  72 + }
  73 + }
  74 +}
... ...
1   -<template>
2   - <view class="notify-page">
3   - <!-- 公共组件-每个页面必须引入 -->
4   - <public-module></public-module>
5   - <view style="width: 750rpx;height:53rpx;background-color: #f8f9fa;position:fixed;top:0;z-index: 99999;">
6   - <view @click="openTypeClick" style="background-color: #f8f9fa;width: 700rpx;position: relative;top: 35rpx;">
7   - <u--input suffixIcon="arrow-down" shape="circle" disabled v-model="model1.userInfo.type"
8   - placeholder="请选择类型" border="surround"></u--input>
9   - <u-action-sheet :show="showType" :actions="actions" title="请选择类型" @close="showType = false"
10   - @select="typeSelect"></u-action-sheet>
11   - </view>
12   - </view>
13   - <view style="height: 110rpx;"></view>
14   - <view class="notify-main">
15   - <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
16   - @up="upCallback">
17   - <view class="u-flex main">
18   - <view @click="clickNotifyDetail(item, index)" class="u-flex main-item" v-for="(item, index) in list"
19   - :key="index">
20   - <view class="u-flex item">
21   - <view class="item-avatar">
22   - <u-avatar class="avatar" shape="circle" size="40" :src="item.sysNotice.avatar">
23   - </u-avatar>
24   - </view>
25   - <view class="u-flex item-content">
26   - <text class="text-top text-clip">{{ item.sysNotice.title }}</text>
27   - <text class="text-bottom text-clip">{{ item.sysNotice.createTime }}</text>
28   - </view>
29   - </view>
30   - <view class="item-right u-flex" style="justify-content: space-between;">
31   - <text class="text">{{ formatType(item.sysNotice) }}</text>
32   - <u-badge style="margin-right: 10rpx;" v-if="item.readStatus == '0'" numberType="overflow"
33   - isDot />
34   - </view>
35   - </view>
36   - </view>
37   - </mescroll-body>
38   - </view>
39   - </view>
40   -</template>
41   -
42   -<script>
43   - import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
44   - import api from '@/api/index.js'
45   -
46   - export default {
47   - mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
48   - data() {
49   - return {
50   - model1: {
51   - userInfo: {
52   - type: ''
53   - }
54   - },
55   - showType: false,
56   - actions: [{
57   - name: '全部',
58   - value: ''
59   - },
60   - {
61   - name: '会议',
62   - value: 'MEETING'
63   - },
64   - {
65   - name: '公告',
66   - value: 'NOTICE'
67   - },
68   - {
69   - name: '其他',
70   - value: 'OTHER'
71   - }
72   - ],
73   - page: {
74   - num: 0,
75   - size: 10
76   - },
77   - downOption: {
78   - auto: false //是否在初始化后,自动执行downCallback; 默认true
79   - },
80   - list: [],
81   - pre: false,
82   - isJudgeNextPage: '',
83   - distance: 0,
84   - scrollDistance: 0
85   - };
86   - },
87   - onLoad(e) {
88   - // 隐藏原生的tabbar
89   - uni.hideTabBar();
90   - this.pre = false;
91   - uni.removeStorageSync('storagePre');
92   - },
93   - onShow() {
94   - this.pre = uni.getStorageSync('storagePre');
95   - if (this.pre) {}
96   - },
97   - onHide() {
98   - uni.removeStorageSync('storagePre');
99   - },
100   - methods: {
101   - formatType(e) {
102   - return e?.type == 'OTHER' ? '其他' : e?.type == 'MEETING' ? '会议' : '公告';
103   - },
104   - openTypeClick() {
105   - this.showType = true;
106   - uni.hideKeyboard();
107   - },
108   - typeSelect(e) {
109   - this.isJudgeNextPage = e.value;
110   - this.page.num = 1;
111   - this.model1.userInfo.type = e.name;
112   - this.loadData(1, this.isJudgeNextPage == '' ? null : this.isJudgeNextPage);
113   - uni.pageScrollTo({
114   - scrollTop: this.scrollDistance + 20,
115   - duration: 50
116   - });
117   - uni.pageScrollTo({
118   - scrollTop: this.scrollDistance - 20,
119   - duration: 50
120   - });
121   - },
122   - onPageScroll(e) {
123   - this.scrollDistance = e.scrollTop;
124   - },
125   - /*下拉刷新的回调 */
126   - downCallback() {
127   - //联网加载数据
128   - this.list.length = 0;
129   - this.page.num = 1;
130   - this.loadData(1);
131   - this.isJudgeNextPage = '';
132   - this.model1.userInfo.type = '';
133   - },
134   - /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
135   - upCallback() {
136   - if (this.isJudgeNextPage != '') {
137   - //联网加载数据
138   - this.page.num += 1;
139   - this.loadData(this.page.num, this.isJudgeNextPage);
140   - } else {
141   - //联网加载数据
142   - this.page.num += 1;
143   - this.loadData(this.page.num);
144   - }
145   - },
146   -
147   - async loadData(pageNo, t) {
148   - let httpData = {
149   - page: pageNo,
150   - pageSize: 10,
151   - type: t
152   - };
153   - const res = await api.notifyApi.getNotifyApi({
154   - params: httpData,
155   - custom: {
156   - load: false
157   - }
158   - })
159   - uni.stopPullDownRefresh();
160   - this.mescroll.endByPage(res.items.length, res.total);
161   - if (pageNo == 1) {
162   - this.list = res.items;
163   - } else {
164   - this.list = this.list.concat(res.items);
165   - }
166   - },
167   - async clickNotifyDetail(e, i) {
168   - this.list[i].readStatus = 1;
169   - await api.notifyApi.byNotifyIdGetDetailApi(e.sysNotice.id)
170   - uni.navigateTo({
171   - url: './notifyDetail?data=' + encodeURIComponent(JSON.stringify(e.sysNotice))
172   - });
173   - }
174   - }
175   - };
176   -</script>
177   -
178   -<style lang="scss" scoped>
179   - @import './static/systemNotify.scss';
180   -
181   - /deep/ .u-badge--error {
182   - position: relative;
183   - right: 11rpx;
184   - }
185   -</style>
  1 +<template>
  2 + <view class="notify-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="notify-page-top-select">
  6 + <view @click="handleTypeClick" class="top-select">
  7 + <u--input suffixIcon="arrow-down" shape="circle" disabled v-model="notifyType"
  8 + placeholder="请选择类型" border="surround"></u--input>
  9 + <u-action-sheet safe-area-inset-bottom :show="showType" :actions="actions" title="请选择类型" @close="showType = false"
  10 + @select="handleTypeSelect"></u-action-sheet>
  11 + </view>
  12 + </view>
  13 + <view style="height: 110rpx;"></view>
  14 + <view class="notify-main">
  15 + <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
  16 + @up="upCallback">
  17 + <view class="u-flex main">
  18 + <view @click="handleNotifyDetail(item, index)" class="u-flex main-item" v-for="(item, index) in list"
  19 + :key="index">
  20 + <view class="u-flex item">
  21 + <view class="item-avatar">
  22 + <u-avatar class="avatar" shape="circle" size="40" :src="item.sysNotice.avatar">
  23 + </u-avatar>
  24 + </view>
  25 + <view class="u-flex item-content">
  26 + <text class="text-top text-clip">{{ item.sysNotice.title }}</text>
  27 + <text class="text-bottom text-clip">{{ item.sysNotice.senderDate }}</text>
  28 + </view>
  29 + </view>
  30 + <view class="item-right u-flex" style="justify-content: space-between;">
  31 + <text class="text">{{ formatType(item.sysNotice.type) }}</text>
  32 + <!-- readStatus===0则阅读状态表示未阅读 -->
  33 + <u-badge style="margin-right: 10rpx;" v-if="item.readStatus == '0'" numberType="overflow"
  34 + isDot />
  35 + </view>
  36 + </view>
  37 + </view>
  38 + </mescroll-body>
  39 + </view>
  40 + </view>
  41 +</template>
  42 +
  43 +<script>
  44 + import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
  45 + import api from '@/api/index.js'
  46 + import { useNavigateTo } from '@/plugins/utils.js'
  47 +
  48 + export default {
  49 + mixins: [MescrollMixin],
  50 + data() {
  51 + return {
  52 + notifyType:'',
  53 + showType: false,
  54 + actions: [{
  55 + name: '全部',
  56 + value: ''
  57 + },
  58 + {
  59 + name: '会议',
  60 + value: 'MEETING'
  61 + },
  62 + {
  63 + name: '公告',
  64 + value: 'NOTICE'
  65 + },
  66 + {
  67 + name: '其他',
  68 + value: 'OTHER'
  69 + }
  70 + ],
  71 + page: {
  72 + page: 0,
  73 + pageSize: 10
  74 + },
  75 + downOption: {
  76 + auto: false //是否在初始化后,自动执行downCallback; 默认true
  77 + },
  78 + list: [],
  79 + selectType: '',
  80 + distance: 0,
  81 + };
  82 + },
  83 + onLoad(e) {
  84 + // 隐藏原生的tabbar
  85 + uni.hideTabBar();
  86 + },
  87 + methods: {
  88 + formatType(e) {
  89 + return this.actions.find((item)=>item.value===e && item.value!=='').name
  90 + },
  91 + handleTypeClick() {
  92 + this.showType = true;
  93 + uni.hideKeyboard();
  94 + },
  95 + handleTypeSelect(e) {
  96 + this.selectType = e.value;
  97 + this.page.page = 1;
  98 + this.notifyType = e.name;
  99 + this.loadData(1, !this.selectType ? null : this.selectType);
  100 + },
  101 + downCallback() {
  102 + this.list.length = 0;
  103 + this.page.page = 1;
  104 + this.loadData(1);
  105 + this.selectType = '';
  106 + this.notifyType = '';
  107 + },
  108 + upCallback() {
  109 + if (this.selectType) {
  110 + this.page.page += 1;
  111 + this.loadData(this.page.page, this.selectType);
  112 + } else {
  113 + this.page.page += 1;
  114 + this.loadData(this.page.page);
  115 + }
  116 + },
  117 + async loadData(page, type) {
  118 + let params = {
  119 + page,
  120 + pageSize: 10,
  121 + type
  122 + };
  123 + const res = await api.notifyApi.getNotifyApi({
  124 + params,
  125 + custom: {
  126 + load: false
  127 + }
  128 + })
  129 + uni.stopPullDownRefresh();
  130 + this.mescroll.endByPage(res.items.length, res.total);
  131 + if (page == 1) {
  132 + this.list = res.items;
  133 + } else {
  134 + this.list = this.list.concat(res.items);
  135 + }
  136 + },
  137 + async handleNotifyDetail(item, index) {
  138 + this.list[index].readStatus = 1;//点击了则说明阅读了
  139 + await api.notifyApi.byNotifyIdGetDetailApi(item.sysNotice.id)
  140 + useNavigateTo('./notifyDetail?data=', item.sysNotice)
  141 + }
  142 + }
  143 + };
  144 +</script>
  145 +
  146 +<style lang="scss" scoped>
  147 + @import './static/systemNotify.scss';
  148 +
  149 + /deep/ .u-badge--error {
  150 + position: relative;
  151 + right: 11rpx;
  152 + }
  153 +</style>
... ...