newEdition/pages/center/warningList/warningList.vue

<template>
	<view class="pages">
		<block v-for="(data, index) in list">

			<view class="page-box" v-if="data.list.length  > 0" :key="index">
				<view class="title">
					<text class="a1">
						{{ data.houseName || '' }}
					</text>

					<text :style="{color: 'blue'}" @click="updateShowStatus(data)">已了解</text>
				</view>
				<u-checkbox-group @change="checkboxGroupChange" shape="circle">
					<block v-for="item in data.list" :key="item.id">
						<u-checkbox :disabled="item.showStatus == 0" @change="checkboxChange" v-model="item.checked">
							<view :style="{ textDecoration: item.showStatus == 0 ? 'line-through' : 'none'}">
								{{ item.createTime }}
							</view>
							<rich-text :style="{ textDecoration: item.showStatus == 0 ? 'line-through' : 'none'}" :nodes="item.message"></rich-text>
						</u-checkbox>
					</block>
				</u-checkbox-group>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [], // 
			}
		},

		onLoad() {
			this.getWarningList()
		},

		methods: {
			// 
			updateShowStatus(data) {
				let arr = data.list.filter(item => item.checked).map(items => {return items.id})
				console.log(arr)
				if (arr.length == 0) {
					uni.showToast({
						title: '请选择已了解的消息~',
						icon: "none",
						duration: 2000,
					})
					return
				}
				this.$u.get('/customer/updateShowStatus', {
					ids: arr.join(',')
				}).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						duration: 2000,
					})
					this.list = []
					this.$forceUpdate()
					setTimeout(() => {
						this.getWarningList()
					}, 1000)
				})
			},

			// 项目预警列表
			getWarningList() {
				this.$u.get('/customer/warningList').then(res => {
					if (res) {
						this.list = res.records.map(item => {
							item.list.forEach(items => {
								items.checked = items.showStatus == 0 ? true : false
							})
							return item
						})
						this.$forceUpdate()
					}
				})
			},

			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding: 20rpx 0;
		width: 100vw;
		min-height: 100vh;
		background: #f2f2f2;
		display: flex;
		flex-direction: column;

		.page-box {
			margin: 0 auto 20rpx;
			padding: 20rpx;
			width: 686rpx;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0rpx 0rpx 7rpx #82848A;

			.title {
				display: flex;
				justify-content: space-between;

				.a1 {
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>