框架整理

api/message/index.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+import qs from 'qs'
+// 获得我的站内信分页
+export function getMyNotifyMessagePage(query) {
+  return request({
+    url: '/system/notify-message/my-page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 批量标记已读
+export function updateNotifyMessageRead(ids) {
+  return request({
+    url: '/system/notify-message/update-read?' + qs.stringify({ids: ids}, { indices: false }),
+    method: 'put'
+  })
+}
+
+// 标记所有站内信为已读
+export function updateAllNotifyMessageRead() {
+  return request({
+    url: '/system/notify-message/update-all-read',
+    method: 'put'
+  })
+}
+
+// 获得当前用户的未读站内信数量
+export function getUnreadNotifyMessageCount() {
+  return request({
+    url: '/system/notify-message/get-unread-count',
+    method: 'get'
+  })
+}

components/myTabs/myTabs.vue

@@ -41,6 +41,7 @@
 		height: 88upx;
 		font-size: 28upx;
 		display: flex;
+		position: sticky;
 		justify-content: space-around;
 		box-sizing: border-box;
 		border-top: 2upx solid #dddddd;

pages/index.vue

@@ -195,7 +195,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* #ifndef APP-NVUE */
 page {
   display: flex;

pages/login.vue

@@ -95,7 +95,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	page {
 		background-color: #ffffff;
 	}

pages/message/index.vue

@@ -1,183 +1,197 @@
 <template>
-  <view class="work-container">
-    <!-- 轮播图 -->
-    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
-      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
-        <swiper-item v-for="(item, index) in data" :key="index">
-          <view class="swiper-item" @click="clickBannerItem(item)">
-            <image :src="item.image" mode="aspectFill" :draggable="false" />
-          </view>
-        </swiper-item>
-      </swiper>
-    </uni-swiper-dot>
-
-    <!-- 宫格组件 -->
-    <uni-section title="系统管理" type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="person-filled" size="30"></uni-icons>
-            <text class="text">用户管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="staff-filled" size="30"></uni-icons>
-            <text class="text">角色管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="color" size="30"></uni-icons>
-            <text class="text">菜单管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="settings-filled" size="30"></uni-icons>
-            <text class="text">部门管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="heart-filled" size="30"></uni-icons>
-            <text class="text">岗位管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="bars" size="30"></uni-icons>
-            <text class="text">字典管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="gear-filled" size="30"></uni-icons>
-            <text class="text">参数设置</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="chat-filled" size="30"></uni-icons>
-            <text class="text">通知公告</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box">
-            <uni-icons type="wallet-filled" size="30"></uni-icons>
-            <text class="text">日志管理</text>
-          </view>
-        </uni-grid-item>
-      </uni-grid>
-    </view>
-  </view>
+	<view class='purchase-list'>
+		<view class="content-title">
+			<text class="text-bold" style="font-size: 40upx;">消息</text>
+			<text>({{unreadCount}})</text>
+			<text style="margin-left: 10upx;cursor: pointer;color: gray;" @click="handleUpdateAll">
+				<uni-icons type="paperclip" size="15"></uni-icons>
+				全部已读
+			</text>
+		</view>
+		<scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper"
+			@scroll="scroll" @touchstart="touchstart" @touchend="touchend">
+			<uni-list :border="false" style="margin-top: 10px;">
+				<uni-list-chat style="cursor: pointer;" v-for="item in listData" :avatar-circle="true" :key="item.id"
+					:title="item.templateNickname" avatar="https://img.36krcdn.com/20200410/v2_fb948f4c18de4b22927f0361d53f6caf_img_png" :note="item.templateParams.content"
+					:time="parseTime(item.createTime)" :clickable="true" badge-positon="left"
+					:badge-text="item.readStatus?'':'dot'" @click="toggle(item)">
+				</uni-list-chat>
+			</uni-list>
+		</scroll-view>
+		<view>
+			<!-- 普通弹窗 -->
+			<uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0 0">
+				<view class="popup-body">
+					<view class="popup-close">
+						<uni-icons type="closeempty" size="20" @click="popupClose"></uni-icons>
+					</view>
+					<view class="popup-content">
+						<uni-forms :model="itemData" label-position="top">
+							<uni-forms-item label="发送人">
+								<uni-easyinput disabled v-model="itemData.name"/>
+							</uni-forms-item>
+							<uni-forms-item label="创建时间">
+								<uni-easyinput disabled v-model="itemData.time"/>
+							</uni-forms-item>
+							<uni-forms-item label="内容">
+								<uni-easyinput disabled type="textarea" v-model="itemData.content"/>
+							</uni-forms-item>
+						</uni-forms>
+					</view>
+				</view>
+				
+			</uni-popup>
+		</view>
+		
+	</view>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        current: 0,
-        swiperDotIndex: 0,
-        data: [{
-            image: '/static/images/banner/banner01.jpg'
-          },
-          {
-            image: '/static/images/banner/banner02.jpg'
-          },
-          {
-            image: '/static/images/banner/banner03.jpg'
-          }
-        ]
-      }
-    },
-    methods: {
-      clickBannerItem(item) {
-        console.info(item)
-      },
-      changeSwiper(e) {
-        this.current = e.detail.current
-      },
-      changeGrid(e) {
-        this.$modal.showToast('模块建设中~')
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  /* #ifndef APP-NVUE */
-  page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    background-color: #fff;
-    min-height: 100%;
-    height: auto;
-  }
+	import {
+		getMyNotifyMessagePage,
+		updateNotifyMessageRead,
+		updateAllNotifyMessageRead,
+		getUnreadNotifyMessageCount,
+	} from "@/api/message/index"
+	import myPull from '@/static/js/myPull.js'
+	export default {
+		data() {
+			return {
+				unreadCount: 0,
+				pageNo: 1,
+				pageSize: 10,
+				listData: [],
+				itemData: {
+					name:'',
+					time:'',
+					content:'',
+				},
+			}
+		},
+		onLoad() {
+			this.refresh();
+		},
+		created() {
+			this.getUnreadCount();
+		},
+		methods: {
+			popupClose(){
+				this.$refs.popup.close();
+			},
+			toggle(item) {
+				this.itemData.name = item.templateNickname;
+				this.itemData.time = this.parseTime(item.createTime);
+				this.itemData.content = item.templateParams.content;
+				this.$refs.popup.open('bottom');
+				if(item.readStatus==false){
+					this.handleUpdate([item.id]);
+				}
+			},
+			handleUpdateSingle(row) {
+				this.handleUpdate([row.id])
+			},
+			handleUpdate(ids) {
+				updateNotifyMessageRead(ids).then(response => {
+					// this.$modal.msgSuccess("消息已读！")
+					this.getList(this.page, this.__pulldone)
+				});
+			},
+			handleUpdateAll() {
+				updateAllNotifyMessageRead().then(response => {
+					this.$modal.msgSuccess("全部已读！")
+					this.getList(this.page, this.__pulldone)
+				});
+			},
+			getUnreadCount() {
+				getUnreadNotifyMessageCount().then(response => {
+					this.unreadCount = response.data;
+				})
+			},
+			/**
+			 * @name 获取列表
+			 */
+			getList(page, done) {
+				getMyNotifyMessagePage({
+					pageNo: page,
+					pageSize: this.pageSize
+				}).then(response => {
+					let list = response.data.list;
+					done(list);
+				});
+			},
 
-  view {
-    font-size: 14px;
-    line-height: inherit;
-  }
+			/**
+			 * @name 触底加载
+			 */
+			scrolltolower(event) {
+				this.getList(this.page, this.__pulldone)
+			},
 
-  /* #endif */
+			scroll(e) {
+				// 重新设置pulldown
+				this.setPullDown(e.detail.scrollTop < 10)
+			},
 
-  .text {
-    text-align: center;
-    font-size: 26rpx;
-    margin-top: 10rpx;
-  }
+			scrolltoupper() {
 
-  .grid-item-box {
-    flex: 1;
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-  }
-
-  .uni-margin-wrap {
-    width: 690rpx;
-    width: 100%;
-    ;
-  }
+			},
+		},
+		mixins: [myPull({})],
+	}
+</script>
 
-  .swiper {
-    height: 300rpx;
-  }
+<style lang="scss" scoped>
+	.popup-body{
+		z-index: 99;
+		margin-bottom: 60px;
+	}
+	.popup-close{
+		cursor: pointer;
+		height: 40px;
+		line-height: 40px;
+		padding-left: 10px;
+		border-bottom: 1px solid #eaecef;
+	}
+	.popup-content{
+		margin: 20px;
+	}
+	.purchase-list {
+		background-color: #f5f5f5;
+		height: 100%;
+		overflow: hidden;
 
-  .swiper-box {
-    height: 150px;
-  }
+		.purchase-body {
+			height: calc(100% - 88upx);
+			overflow: auto
+		}
+	}
 
-  .swiper-item {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    height: 300rpx;
-    line-height: 300rpx;
-  }
+	.content-title {
+		background-color: #ffffff;
+		height: 88upx;
+		font-size: 28upx;
+		position: sticky;
+		box-sizing: border-box;
+		padding: 0 10px;
+		border-bottom: 2upx solid #dddddd;
+		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px;
+		min-width: 100%;
+		overflow-x: auto;
+		
+	}
 
-  @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
-      width: 400px;
-      /* #ifndef APP-NVUE */
-      margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
-    }
+	.chat-custom-right {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-end;
+	}
 
-    .image {
-      width: 100%;
-    }
-  }
-</style>
+	.chat-custom-text {
+		font-size: 12px;
+		color: #999;
+	}
+</style>

pages/mine/index.vue

@@ -20,6 +20,12 @@
 
     <view class="content-section">
       <view class="menu-list">
+		  <view class="list-cell list-cell-arrow" @click="handleBuilding">
+		    <view class="menu-item-box">
+		      <view class="iconfont icon-setting menu-icon"></view>
+		      <view>企业管理</view>
+		    </view>
+		  </view>
         <view class="list-cell list-cell-arrow" @click="handleHelp">
           <view class="menu-item-box">
             <view class="iconfont icon-help menu-icon"></view>
@@ -89,7 +95,7 @@
         this.$modal.showToast('微信搜索 naidaguo 后，添加好友后拉你进技术交流群')
       },
       handleBuilding() {
-        this.$modal.showToast('模块建设中~')
+        this.$modal.showToast('移动端暂不支持该功能，请到PC端处理~')
       }
     }
   }

pages/work/index.vue

@@ -81,7 +81,7 @@
 		
 	}
 </script>
-<style lang='scss'>
+<style lang='scss' scoped>
 	.purchase-list {
 		background-color: #f5f5f5;
 		height: 100%;

static/scss/index.scss

@@ -3,4 +3,7 @@
 // color-ui
 @import "@/static/scss/colorui.css";
 // iconfont
-@import "@/static/font/iconfont.css";
+@import "@/static/font/iconfont.css";
+html, body, uni-page, uni-page-body {
+	  height: 100%;
+}