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: 50px !important; //这个是固定的44px（所有小程序顶部高度都是 = 44px + 手机系统状态栏高度）
			line-height: 44px;
			text-align: center;
			// background-color: #d00;
			background: #eeeeee;
			position: fixed;
			top: 0;
			z-index: 9999;
			color: #ffff00;
			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: '', //状态栏的高度（可以设置为顶部导航条的padding-top）
				menuInfo: {},
				menuWidth: '',
				menuHeight: '',
				menuBorderRadius: '',
				menuRight: '',
				menuTop: '',
				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')
			let that = this
			uni.getSystemInfo({
				success: (result) => {
					// 获取手机系统的状态栏高度（不同手机的状态栏高度不同）  （ 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px  不对的 ）
					// console.log('当前手机的状态栏高度',result.statusBarHeight)
					let statusBarHeight = result.statusBarHeight + 'px'
					// 获取右侧胶囊的信息 单位px
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					//bottom: 胶囊底部距离屏幕顶部的距离
					//height: 胶囊高度
					//left:   胶囊左侧距离屏幕左侧的距离
					//right:  胶囊右侧距离屏幕左侧的距离
					//top:    胶囊顶部距离屏幕顶部的距离
					//width:  胶囊宽度
					// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
					// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
					let menuWidth = menuButtonInfo.width + 60 + 'px'
					let menuHeight = menuButtonInfo.height + 'px'
					let menuBorderRadius = menuButtonInfo.height / 2 + 'px'
					let menuRight = result.screenWidth - menuButtonInfo.right + 'px'
					let menuTop = menuButtonInfo.top + 'px'
					let contentTop = result.statusBarHeight + 64 + 'px'
					let menuInfo = {
						statusBarHeight: statusBarHeight, //状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用：目的留出系统的状态栏区域
						menuWidth: menuWidth, //右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用
						menuHeight: menuHeight, //右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用
						menuBorderRadius: menuBorderRadius, //一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用
						menuRight: menuRight, //右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用
						menuTop: menuTop, //右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用
						contentTop: contentTop, //内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用
					}
					that.statusBarHeight = menuInfo.statusBarHeight //状态栏的高度（可以设置为顶部导航条的padding-top）
					that.menuWidth = menuInfo.menuWidth
					that.menuHeight = menuInfo.menuHeight
					that.menuBorderRadius = menuInfo.menuBorderRadius
					that.menuRight = menuInfo.menuRight
					that.menuTop = menuInfo.menuTop
					that.contentTop = menuInfo.contentTop
					uni.setStorageSync('menuInfo', menuInfo)
					that.$forceUpdate()
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		onShow() {
			this.$refs.list.refresh()
		},
		methods: {
			leftBack() {
				let that = this
				uni.navigateBack({
					url: '../../pages/home/index',
					success: function(res) {

					},
					fail: function(res) {
						that.$goto('../../pages/home/index')
					},
				})

				// 
			},
			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')) {
							this.$goto("../../pageApp/ge/geDeviceRepairs")
						} else if (res.data[0].examplesId === uni.getStorageSync(
								'device_scrap_approval_flow_run_key')) {
							this.$goto('../../pageApp/ge/geDeviceScrap')
						} else if (res.data[0].examplesId === uni.getStorageSync('purchase_approval_flow_run_key')) {
							this.$goto('../../pageApp/ge/gePurchase')
						} else if (res.data[0].examplesId === uni.getStorageSync('contract_approval_flow_run_key')) {
							this.$goto('../../pageApp/ge/geContract')
						}
						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>