siyu_app/pages_watch/message/detail.vue

<template>
	<view class="container">
		<uni-nav-bar fixed :border="false" backgroundColor="#fff" :title="title" :statusBar="true"
			left-icon="left" @clickLeft="$navBack()">
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:right>
				<image class="righticon" src="/static/image/readall.png" mode="aspectFill" @click="handleReadAll"></image>
				<view class="rightText" @click="clickRight">{{rightText}}</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #ifndef MP-WEIXIN -->
		<view class="allbtn-box" :style="{display: rightText=='取消' ? 'flex':'none'}">
			<view class="allbtn" @tap="handleAll()">全选</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view class="allbtn-box">
			<view class="allbtn" @tap="handleAll()" :style="{visibility: rightText=='取消' ? 'visible':'hidden'}">全选</view>
			<view style="display: flex;align-items: center;">
				<image class="righticon" src="/static/image/readall.png" mode="aspectFill" @click="handleReadAll"></image>
				<view class="rightText" @click="clickRight">{{rightText}}</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="container-body">
		 <mescroll-body :top="rightText=='取消' ? '100rpx' :'24rpx'" bottom="0" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		 	
			<view class="newslist" v-if="msgList&&msgList.length > 0">
				<view 
				class="newslist-item border-line"
				:style="{paddingLeft: rightText=='取消' ? '54rpx':'0'}"
				v-for="(item,index) in msgList" 
				:key="item.id">
					<view class="checkbox-icon" @click.stop="handleChoose(item)" :style="{display: rightText=='取消' ? 'flex':'none'}">
						<image src="@/static/images/pages_watch/icons/radio_default_icon.png" v-show="!item.checked"></image>
						<image src="@/static/images/pages_watch/icons/radio_choose_icon.png" v-show="item.checked"></image>
					</view>
					<view class="newslist-item-avatar">
						<image src="@/static/images/pages_watch/icons/watch_notification_icon.png" mode="aspectFill"></image>
					</view>
					<view class="newslist-item-msgbox" @click.stop="handleMsg(item)">
						<text class="newslist-item-time">{{item.dateTime}}</text>
						<view :class="item.appStatus == 1 ? 'newslist-item-msg':'newslist-item-msg isnew'"
							:style="{marginRight: item.extra == 'sos' ? '20rpx':'0'}">
							<view>
								<view>{{item.description}}</view>
								<!-- <view class="location" v-show="item.extra == 'sos'" @click="handleSOS(item)">{{item.location}}</view> -->
							</view>
							<view class="sosbox" v-show="item.extra == 'sos'" @click="handleSOS(item)">sos</view>
							<image class="phone_icon" v-show="item.extra == 'sos'" src="@/static/images/pages_watch/icons/phone_icon.png" mode="aspectFill" @click="getPhone"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		</view>
		<view class="footer" v-show="rightText=='取消'">
			<button class="savebtn" :loading="btnLoading" :disabled="btnLoading" @click="handleDel">
				删 除
			</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { queryAlarmPageByStatus,setAlarmStatusById,deleteByIds,setAlarmStatusByDeviceId } from "@/api/pages_watch/message.js"
	import {getSim} from "@/api/pages_watch/index.js"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 获取设备平台
				platform: uni.getSystemInfoSync().platform,
				title: "",
				rightText: '设置',
				allbtnHeight: 0,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				clientHeight: 0,
				btnLoading: false,
				queryParam: {
					deviceId: undefined,
					pageSize: 10,
					pageNum: 1,
				},
				msgList: [],
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll:false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				}
				
			}
		},
		onLoad(option) {
			this.title = option.title || ''
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		methods: {
			handleReadAll() {
				uni.showModal({
					title: '',
					content: '确定标记所有未读消息为已读吗？',
					success: (res)=> {
						if (res.confirm) {
							this.setReadAll()
						}
					}
				});
			},
			setReadAll() {
				setAlarmStatusByDeviceId({deviceId: uni.getStorageSync("deviceId") || ''}).then(res=>{
					if(res.code == 200) {
						this.msgList = this.msgList.map(item=>({
							...item,
							appStatus: 1,
						}))
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			clickRight() {
				this.rightText = this.rightText == '设置' ? '取消':'设置'
				if(this.rightText=='设置') {
					this.allbtnHeight = 0
					this.msgList = this.msgList.map(item=>({
						...item,
						checked: false,
					}))
				} else {
					this.allbtnHeight = 100
				}
			},
			handleChoose(item) {
				item.checked = !item.checked
			},
			handleDel() {
				const delList = this.msgList.filter(item=>item.checked).map(it=>it.id)
				if(delList && delList.length > 0) {
					this.btnLoading = true
					deleteByIds(delList).then(res=>{
						this.btnLoading = false
						if(res.code == 200) {
							this.rightText = '设置'
							this.allbtnHeight = 0
							this.mescroll.resetUpScroll()
							uni.showToast({
								title: '删除成功',
								icon: "none"
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					}).catch(err=>{
						this.btnLoading = false
					})
				}
			},
			handleAll() {
				this.msgList = this.msgList.map(item=>({
					...item,
					checked: true,
				}))
			},
			handleMsg(item) {
				if(item.appStatus == 0 ) {
					item.appStatus = 1
				}
				setAlarmStatusById([item.id]).then(res=>{
					if(res.code != 200) {
						item.appStatus = 0
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}).catch(()=>{
					item.appStatus = 0
				})
				if(item.extra == 'sos') {
					
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调*/
			upCallback(page) {   
				//联网加载数据
				var that = this;
				this.queryParam.deviceId = uni.getStorageSync("deviceId") || ''
				this.queryParam.pageNum =  page.num
				this.queryParam.pageSize = page.size
				queryAlarmPageByStatus(this.queryParam).then(res => {
					if(res.code==200){
						if (page.num == 1) {
							that.msgList = res.rows; 
							
						} else {
							that.msgList = that.msgList.concat(res.rows);
							 
						}
						that.mescroll.endBySize(res.rows.length, res.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.msgList = null;
						that.mescroll.endErr();
					}
				});
			},
			//  sos map
			handleSOS(item) {
				uni.navigateTo({
					url: '/pages_watch/message/sosMap?location='+item.location+'&dateTime=' +item.dateTime
				})
			},
			//  sos phone
			getPhone() {
				getSim({deviceId: uni.getStorageSync("deviceId") || ''}).then(res=>{
					if(res.code == 200) {
						let phone = res.msg
						console.log(this.platform)
						//#ifdef APP-PLUS
						uni.makePhoneCall({
							phoneNumber: phone
						});
						//#endif
						//#ifndef APP-PLUS
						uni.makePhoneCall({
							phoneNumber: phone
						});
						//#endif
					} else {
						if(res.msg == "该设备未设置手机号!") {
							uni.showModal({
								content: res.msg,
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages_watch/index/equipment/deviceInfo"
										})
									}
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.righticon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}
	.rightText {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
	}
	.location {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FF7700;
	}
	.allbtn-box {
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		left: 0;
		z-index: 99;
		width: 100%;
		height: 100rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;
		@include u-flex(row,center,space-between);
	}
	.allbtn {
		display: inline-block;
		padding: 10rpx 24rpx;
		border-radius: 10rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF7700;
	}
	.sosbox {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		margin-left: 18rpx;
		margin-right: 10rpx;
		border-radius: 12rpx;
		font-family: DIN, DIN;
		font-weight: bolder;
		font-size: 40rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background: rgba(216,30,6,0.5);
		box-shadow: -12rpx -12rpx 16rpx 0 rgba(216,30,6, 1) inset, 
		14rpx 14rpx 24rpx 0 rgba(216,30,6, 0.6) inset;
		overflow: hidden;
	}
	.phone_icon {
		width: 47rpx;
		height: 47rpx;
		background-color: #fff;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		right: -20rpx;
		top: 50%;
		transform: translateY(-50%);
	}
	.container-body {
		padding-bottom: calc(var(--window-bottom) + 24rpx);
		box-sizing: border-box;
		.checkbox-icon {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			@include u-flex(column,center,flex-start);
			padding-top: 64rpx;
			box-sizing: border-box;
			image {
				height: 30rpx;
				width: 30rpx;
			}
		}
		.newslist {
			margin: 0 24rpx 24rpx 24rpx;
			padding-bottom: 100rpx;
			&-item {
				width: 100%;
				overflow: hidden;
				margin-bottom: 40rpx;
				box-sizing: border-box;
				@include u-flex(row,flex-start, flex-start);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333;
				word-break: break-all;
				position: relative;
				&-avatar {
					flex-shrink: 0;
					border-radius: 50%;
					margin-right: 28rpx;
					margin-top: 38rpx;
					position: relative;
					image {
						width: 76rpx;
						height: 76rpx;
					}
				}
				&-msgbox {
					flex: 1;
				}
				&-time {
					width: 100%;
					margin-bottom: 8rpx;
					font-size: 28rpx;
					color: #999;
					text-align: center;
					display: inline-block;
				}
				&-msg {
					padding: 24rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					background-color: #fff;
					position: relative;
					@include u-flex(row,center, space-between);
				}
				.isnew {
					position: relative;
					&::after {
						content: "";
						height: 12rpx;
						width: 12rpx;
						border-radius: 50%;
						background-color: red;
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}
		}
	}
	.footer {
		width: 100%;
		padding: 50rpx 0;
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		bottom: var(--window-bottom);
		left: 0;
		.savebtn {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			background-color: #FF7700;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			&::after {
				border: none;
			}
		}
	}
</style>