PropertyApp/pages/notice/notice.vue

<template>
	<view>
		<!-- 添加公告 -->
		<u-popup v-model="popupShow" mode="center" width="650" :closeable="true" border-radius="10">
			<view style="padding: 60rpx 40rpx 10rpx;">
				<u-form label-width="150" :model="form">
					<u-form-item label="标题" :required="true"><u-input  v-model="form.title" /></u-form-item>
					<u-form-item label="内容" >
						<u-input v-model="form.notice" />
					</u-form-item>
					<u-form-item label="下发小区" :required="true">
						<u-input :placeholder="residentialPlaceholder"  type="select" disabled @click="showResidential" v-model="residentialNames" />
					</u-form-item>
				</u-form>
				<view @click="submit" class="flex cu-btn bg-blue" style="margin: 60rpx 0 10rpx;padding: 40rpx;">
					提交
				</view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"/>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view @click="goDetail(item)" class="card" v-for="(item,index) in dataList" :key="index">
				<view class="title">
					<view>
						<text class="text-bold">标题：</text>
						<text class="">{{item.title}}</text>
					</view>
					<view class="time">
						<text class="cuIcon-time padding-right-10"></text>
						<text>{{new Date(item.createDate).getTime() | date('yyyy-mm-dd') }}</text>
					</view>
				</view>
				<view class="content  ">
					<text class="text-cut-2">{{item.notice}}</text>
				</view>
				<view class="bottom">
					<view @click.stop="delItem(item)" class="cu-btn bg-red round sm">
						<u-icon top="-1" name="trash-fill" size="25"></u-icon>
						<text class="padding-left-10">删除</text>
					</view>
					<view @click.stop="edit(item)" class="cu-btn bg-blue round sm margin-left-20">
						<u-icon top="-1" name="edit-pen-fill" size="25"></u-icon>
						<text class="padding-left-10">编辑</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<wm-list-add bgColor="#7fc6ac"  ref="add" @clickAdd="add"/>
		
		<!-- 小区列表 -->
		<u-popup  border-radius="20" height="70%"  mode="bottom" v-model="residentialShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="keyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view  @scrolltolower="scrolltolower" v-if="!$isEmpty(residentialList)"  style="padding: 0rpx 0 88rpx;height: 100%;" :scroll-y="true" >
				<view style="padding: 110rpx 30rpx 20rpx;">
					<u-checkbox-group width ="50%" size="40" >
						<u-checkbox
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="(item, index) in residentialList" :key="index" 
							:name="item.name"
						>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="padding-top-20">
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
			<view @click="confirmChecked" class="cu-btn bg-blue" style="position: fixed;bottom: 0;right: 0;left: 0;padding: 40rpx;">
				确认选择
			</view>
		</u-popup>
	</view>
</template>
<script>
	import wmListAdd from '@/components/wm-list-add/wm-list-add';
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		components:{
			wmListAdd
		},
		data() {
			return {
				residentialNames:'',
				
				agencyId:'',
				isFirst:false,
				
				dataList:[],
				
				popupShow:false,
				residentialShow:false,
				residentialList:[],
				residentialPlaceholder:'请选择要下发的小区',
				status:'',
				current:1,
				total:0,
				keyword:'',
				
				form:{}
			}
		},
		onShow() {
			this.mescroll.resetUpScroll()
		},
		onLoad() {
			this.getResidentailList()
		},
		watch:{
			keyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					this.residentialList=[]
					this.current=1
					this.getResidentailList()
				}, 500)
			}
			
		},
		
		methods: {
			add(){
				this.form={}
				this.popupShow=true
			},
			submit(){
				if (this.$isEmpty(this.form.title)) {
					this.$u.toast('请输入标题')
				}
				if (this.$isEmpty(this.form.notice)) {
					this.$u.toast('请输入内容')
					return
				}
				
				if (this.$isEmpty(this.form.residentialIds)) {
					this.$u.toast('请选择要下发的小区')
				}
				this.$api.notice.submit(this.form).then(res=>{
					if (res.data==true) {
						this.$u.toast('操作成功')
						this.popupShow=false
						this.mescroll.resetUpScroll()
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			scrolltolower(e){
				 if(this.residentialList.length==this.total){
					 this.status='nomore'
				   return
				}else{
					this.status='loading'
					this.current++
					this.getResidentailList()
				}
				
			},
			checkboxChange(e) {
				console.log(e);
			},
			confirmChecked(){
				let tmpNames=[]
				let tmpIds=[]
				this.residentialList.forEach(item=>{
					if (item.checked==true) {
						tmpNames.push(item.name)
						tmpIds.push(item.id)
					}
				})
				this.residentialNames=tmpNames.join(",")
				this.form.residentialIds=tmpIds.join(",")
				this.residentialShow=false
			},
			showResidential(){
				if (this.$isEmpty(this.form.id)) {
					this.residentialShow=true
				}
			},
			getResidentailList(){
				let params={
					current:this.current,
					size:50,
					name:this.keyword
				}
				let list=[]
				this.$api.residential.pageBycondition(params).then(res=>{
					res.data.records.forEach(item=>{
						let obj={
							name:item.name,
							id:item.id,
							checked:false
						}
						list.push(obj)
					})
					this.total=res.total
					this.residentialList=[...this.residentialList,...list]
				})
			},
			goDetail(item){
				getApp().globalData.noticeDetail=item
				uni.navigateTo({
					url:"./detail",
				})
			},
			delItem(item){
				let that=this
				this.$showModel('确定要删除该公告吗？').then(res=>{
					this.$api.notice.remove(item.id).then(res=>{
						if (res.data==true) {
							this.$u.toast('删除成功')
							setTimeout(()=>{
								that.mescroll.resetUpScroll()
							},500)
						}else{
							this.$u.toast(res.msg)
						}
					})
				})
			},
			edit(item){
				this.popupShow=true
				this.residentialPlaceholder='下发小区不可编辑'
				this.form.id=item.id
				this.form.title=item.title
				this.form.notice=item.notice
				this.form.residentialIds=item.residentialIds
			},
			/**
			 * 下拉回调
			 */
			downCallback(){
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},1500)
			},
			/**
			 * 上拉回调
			 * @param {Object} mescroll
			 */
			upCallback(mescroll) {
				try{
					let params={
						current:mescroll.num,
						size:mescroll.size
					}
					this.$api.notice.page(params).then(res=>{
						let data=res.data.records
						let length=data.length
						let total=res.data.total
						mescroll.endBySize(length, total);
						if(mescroll.num == 1) this.dataList = []; 
						this.dataList=this.dataList.concat(data); 
					})
				}catch(e){
					mescroll.endErr();
				}
			},
		}
	}
</script>

<style lang="scss">
	.line-red{
		border: 1rpx solid #dc0000;
		color: #dc0000;
	}
	
	.card{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx;
		.title{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 30rpx;
			border-bottom: 0.5rpx solid  #e6e5e8;
			
			.time{
				padding-top: 8rpx;
				font-size: 28rpx;
				color: #8d8d8d;
			}
		}
		.content{
			color: #737373;
			height: 150rpx;
			padding:30rpx 20rpx;
		}
		
		.bottom{
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>