hs_hzl_uniapp_ml/pageA/msg/userMsgList.vue

<template>
	<view>
		<!-- paddingTop不生效可换成marginTop -->
		<view class="tab_title" :style="{ paddingTop: statusBarHeight}">
			<!-- 左上角自定义样式 -->
			<view class="menu_btn flex-betwee box-sizing"
				:style="{ position: 'fixed', top: menuTop, left: menuRight, width: menuWidth, height: menuHeight, borderRadius: menuBorderRadius}">
				<!-- <image class="logo" src="/static/logo.png" @click="goStepPage"></image> -->
				<uni-row>
					<uni-col :span="8">
						<view @click="leftBack">
							<u-icon name="arrow-left" size="30" color="rgb(138, 138, 138)">
							</u-icon>
						</view>
					</uni-col>
					<uni-col :span="16">
						<view class="tit" @click="confirm">全部已读</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<scroll-list :style="{ paddingTop: statusBarHeight}" ref="list" :option="option" @load="load" @refresh="refresh"
			@loadSuccess="loadSuccess" @scrolltolower="scrolltolower">
			<view v-for="(item, index) in list" :key="index" @click="handleTest(item)">
				<view class="infoBody">
					<view>
						<view style="border-bottom: 1px #b8b8b8 solid;">
							<uni-row class="demo-uni-row">
								<uni-col :span="19">
									<view class="demo-uni-col dark"
										style="font-size: 36rpx;margin: -20rpx 0 0 0;font-weight: bold;letter-spacing:5rpx;">
										{{item.msgTitle}}
									</view>
								</uni-col>
								<uni-col v-if="item.msgIsRead === '0'" :span="5">
									<view class="demo-uni-col light"
										style="color: rgb(55,186,189);margin-bottom: 10rpx;">
										点击查看
									</view>
								</uni-col>
							</uni-row>
						</view>
						<uni-row class="demo-uni-row">
							<uni-col>
								<view class="demo-uni-col light" style="padding: 36rpx;color: #676767;">
									<view v-html="item.msgContent"></view>
								</view>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row">
							<uni-col :span="24">
								<view class="demo-uni-col light" style="color: #727272;">
									{{item.createTime}}
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</scroll-list>
	</view>
</template>
<style lang="scss">
	.page-wrap {}

	.infoBody {
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 20rpx;
		margin: 20rpx;
		box-shadow: 0px 2px 10px #cccccc;
	}

	.tit {
		margin: 0 10rpx;
		text-align: center;
		color: #999999;
		border: 1px #cccccc solid;
		border-radius: 20rpx;
	}

	.tit:active {
		background: #d4d4d4;
	}

	.box-sizing {
		box-sizing: border-box;
	}

	.index-page {
		width: 100vw;
		height: calc(100vh - 64px); // 解决页面无内容时上下滚动问题 高度默认44px + padding-top 20px
		// padding: 32rpx;

		.tab_title {
			width: 100%;
			height: 44px !important; //这个是固定的44px（所有小程序顶部高度都是 = 44px + 手机系统状态栏高度）
			line-height: 44px;
			text-align: center;
			// background-color: #d00;
			background-color: #f8f8f8 !important;
			position: fixed;
			top: 0;
			z-index: 9999;
			color: #000;
			font-weight: 500;

			.menu_btn {
				width: 414rpx !important;
				// background-color: #ffffff; //这个是小程序默认的标题栏背景色
				overflow: hidden;

			}
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				option: {
					page: 1,
					size: 5,
					auto: true
				},
				msgTypes: uni.getStorageSync('app_msg_type'),
				page: 1,
				list: [],
				scrollList: [],
				total: 0,
				status: '',
				tabType: uni.getStorageSync('tabType'),
				file_approval_flow_run_key: '',
				biz_leave_flow_run_key: '',
				reserve_consuming_flow_run_key: '',
				reserve_return_flow_run_key: '',
				reserve_register_flow_run_key: '',
				personnel_hire_approval_flow_run_key: '',
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight, //状态栏的高度（可以设置为顶部导航条的padding-top）
				menuWidth: uni.getStorageSync('menuInfo').menuWidth,
				menuHeight: uni.getStorageSync('menuInfo').menuHeight,
				menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,
				menuRight: uni.getStorageSync('menuInfo').menuRight,
				menuTop: uni.getStorageSync('menuInfo').menuTop,
				contentTop: uni.getStorageSync('menuInfo').contentTop

			}
		},
		onLoad() {
			this.file_approval_flow_run_key = uni.getStorageSync('file_approval_flow_run_key')
			this.biz_leave_flow_run_key = uni.getStorageSync('biz_leave_flow_run_key')
			this.reserve_consuming_flow_run_key = uni.getStorageSync('reserve_consuming_flow_run_key')
			this.reserve_return_flow_run_key = uni.getStorageSync('reserve_return_flow_run_key')
			this.reserve_register_flow_run_key = uni.getStorageSync('reserve_register_flow_run_key')
			this.personnel_hire_approval_flow_run_key = uni.getStorageSync('personnel_hire_approval_flow_run_key')
			this.personnel_dimission_approval_flow_run_key = uni.getStorageSync(
				'personnel_dimission_approval_flow_run_key')
		},
		onShow() {
			this.$refs.list.refresh()
		},
		methods: {
			leftBack() {
				uni.navigateBack()
			},
			confirm() {
				this.$httpRequest({
					url: '/app/doAllRead',
					method: 'get',
					urlType: this.$getUrlType()
				}).then(res => {
					this.$refs.list.refresh()
				})
			},
			handleTest(item) {
				this.readTask(item)
				if (this.tabType === 2) {
					if (item.msgType === '1') {
						this.orderInfo(item.remark, 1, '1')
					}
					if (item.msgType === '2') {
						this.orderInfo(item.remark, 1, '2')
					}
					if (item.msgType === '3') {
						uni.navigateTo({
							url: "../salary/salary"
						})
					}
				} else if (this.tabType === 3) {
					if (item.msgType) {
						if (item.msgType === '1') {
							this.gtdToId(item.remark, 1, '1')
						}
						if (item.msgType === '2') {
							uni.switchTab({
								url: "/pages/orderFood/index"
							})
						}
						if (item.msgType === '3') {
							uni.navigateTo({
								url: "../salary/salary"
							})
						}
						if (item.msgType === '4') {
							this.gtdToId(item.remark, 3, '4')
						}
						if (item.msgType === '5') {
							this.gtdToId(item.remark, 1, '5')
						}
						if (item.msgType === '6') {
							this.orderInfo(item.remark, 1, '6')
						}
						if (item.msgType === '7') {
							this.gtdToId(item.remark, 3, '7')
						}
					}
				}
			},
			async gtdToId(id, pageType, msgType) {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/gtdToId?taskId=' + id + '&type=' + msgType,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					if (res.data[0]) {
						res.data[0].pageType = pageType
						uni.setStorageSync("approval", res.data[0])
						if (res.data[0].examplesId === this.file_approval_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geNewsApproval"
							})
						} else if (res.data[0].examplesId === this.biz_leave_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geApproval"
							})
						} else if (res.data[0].examplesId === this.reserve_consuming_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geReserveApproval"
							})
						} else if (res.data[0].examplesId === this.reserve_return_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geReserveApproval"
							})
						} else if (res.data[0].examplesId === this.reserve_register_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geReserveApproval"
							})
						} else if (res.data[0].examplesId === this.personnel_hire_approval_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geEntry"
							})
						} else if (res.data[0].examplesId === this.personnel_dimission_approval_flow_run_key) {
							uni.navigateTo({
								url: "../../pageApp/ge/geDimission"
							})
						} else if (res.data[0].examplesId === uni.getStorageSync(
								'device_repairs_approval_flow_run_key')) {
							uni.navigateTo({
								url: "../../pageApp/ge/geDeviceRepairs"
							})
						}
						uni.hideLoading({
							mask: true
						})
					}
				}
			},
			async orderInfo(id, pageType, msgType) {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/orderInfo?on=' + id,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					if (res.data) {
						uni.setStorageSync("order", res.data)
						if (msgType === '1') {
							uni.navigateTo({
								url: "../card/expense/details"
							})
						} else if (msgType === '2') {
							uni.navigateTo({
								url: "../card/orderProcess"
							})
						} else if (msgType === '6') {
							uni.navigateTo({
								url: "../integral/details"
							})
						}
						uni.hideLoading({
							mask: true
						})
					}
				}
			},
			async readTask(item) {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/rm?id=' + item.id,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					let msgData = uni.getStorageSync("msgData")
					if (msgData) {
						if (msgData["m" + item.msgType] > 0) {
							--msgData["m" + item.msgType];
							uni.setStorageSync("msgData", msgData)
						}
					}
				}
			},
			async taskList(paging) {
				// 发送请求
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/gum?pageNum=' + paging.page + '&pageSize=' + paging.size,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					if (paging.page === 1) {
						this.scrollList = res.rows
						this.total = res.total
						this.$refs.list.loadSuccess({
							list: res.rows,
							total: this.total
						});
					} else if (paging.page > 1) {
						for (var i = 0; i < res.rows.length; i++) {
							this.scrollList.push(res.rows[i])
						}
						this.$refs.list.loadSuccess({
							list: this.scrollList,
							total: this.total
						});
					}
				}
			},
			// 刷新刷剧
			refresh(paging) {
				this.taskList(paging)
			},
			scrolltolower(e) {

			},
			load(paging) {
				this.taskList(paging)
			},
			loadSuccess(list) {
				this.list = list
			}
		}
	}
</script>