subject_gxj/xj_project_app/pages/message/send/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		getPersonList,
		createMessage
	} from "@/api/work/message.js";

	let userNameList = ref(null);
	let pageForm = ref({
		content: null, //消息内容
		consumes: [], //消息接收者列表
	});

	function sendMessage() {
		createMessage(pageForm.value).then(res => {
			if (res.code === 200) {
				uni.showToast({
					title: "消息发送成功。",
					icon: "success",
					duration: 2000
				})
				uni.navigateBack({});
			} else {
				uni.showToast({
					title: "消息发送失败。",
					icon: "error",
					duration: 2000
				})
			}
		}).catch(() => {
			uni.showToast({
				title: "消息发送失败。",
				icon: "error",
				duration: 2000
			})
		});
	};

	// 选人弹窗
	let userChoose = ref(false);

	function userChooseClose() {};

	function userChooseOpen() {
		getPersonPage();
	};

	// 选人
	let chooseParams = ref({
		pageNo: 1,
		pageSize: 10,
		unitName: null,
		userName: null,
	})
	let personList = ref([]);
	let personTotal = ref(0);

	function getPersonPage() {
		getPersonList(chooseParams.value).then(res => {
			personList.value = res.data.list;
			personTotal.value = res.data.total;
		})
	}

	function paginationChange(e) {
		chooseParams.value.pageNo = e.current;
		getPersonPage();
	}

	let personSelectIndex = [];

	function personSelect(e) {
		personSelectIndex = e.detail.index;
	}

	// 打开弹窗
	function openPopup() {
		userChoose.value = true;
	}
	// 关闭弹窗
	function closePopup(type) {
		if (type === "confirm") {
			let tempArr = [];
			for (let i in personSelectIndex) {
				tempArr.push(personList.value[personSelectIndex[i]])
			};
			// 名称展示
			userNameList.value = tempArr.map(item => item.userName).join("、");

			// 筛选数据
			pageForm.value.consumes = tempArr.map(item => {
				return {
					userId: item.id,
					userName: item.userName
				};
			})
		}
		userChoose.value = false;
	}


	//清空

	function clear() {
		userNameList.value = ''
		pageForm.value.content = ''
	}
</script>

<template>
	<view class="container">
		<page-title rightText='清空' @rightTextClick='clear'>消息详情</page-title>
		<!-- <view class="clear">清空</view> -->

		<view class="content">
			<view class="card only-card">
				<view class="card-name" @click="openPopup()">
					<view class="card-name-title">
						<text class="card-name-description">接收人</text>
					</view>

					<view class="select-item">
						<view>{{userNameList}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">内容</view>

					<view class="item-textarea">
						<u--textarea v-model="pageForm.content" maxlength="-1" height='294rpx'></u--textarea>
					</view>
				</view>

				<view class="card-item">
					<view class="card-btn fat-btn" @click="sendMessage()">确定</view>
				</view>
			</view>
		</view>

		<u-popup :show="userChoose" @open="userChooseOpen" @close="userChooseClose" mode="center">
			<view class="user-choose">
				<view class="user-choose-title">
					<view class="uesr-choose-icon hide"></view>
					人员筛选
					<view class="uesr-choose-icon" @click="closePopup('close')"></view>
				</view>

				<view class="search-item">
					<view class="search-item-name">单位</view>
					<input class="search-item-content" v-model="chooseParams.unitName" @blur="getPersonPage()"
						placeholder='请输入单位名称' placeholder-style="color: #D8D8D8;font-size:28rpx" />
				</view>

				<view class="search-item">
					<view class="search-item-name">用户姓名</view>
					<input class="search-item-content" v-model="chooseParams.userName" @blur="getPersonPage()"
						placeholder='请输入用户名称' placeholder-style="color: #D8D8D8;font-size:28rpx" />
				</view>

				<view class="search-item">
					<scroll-view class="swiper-item-content" scroll-y>
						<uni-table type="selection" emptyText="暂无更多数据" @selection-change="personSelect">
							<!-- 表头行 -->
							<uni-tr>
								<uni-th align="center">用户</uni-th>
								<uni-th align="center">单位</uni-th>
								<uni-th align="center">科室</uni-th>
								<uni-th align="center">手机号</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in personList" :key="index">
								<uni-td align="center">{{item.userName}}</uni-td>
								<uni-td align="center">{{item.unitName}}</uni-td>
								<uni-td align="center">{{item.departName}}</uni-td>
								<uni-td align="center">{{item.tel}}</uni-td>
							</uni-tr>
						</uni-table>
					</scroll-view>
				</view>

				<uni-pagination title="标题文字" show-icon="true" :total="personTotal" :current="chooseParams.pageNo"
					@change="paginationChange"></uni-pagination>

				<view class="search-btn" @click="closePopup('confirm')">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang="scss" scoped>
	.clear {
		position: absolute;
		top: 90px;
		right: 4%;
		display: flex;
		font-size: 40rpx;
		font-weight: 500;
		color: #FFF;
	}

	.content {
		position: absolute;
		top: 5%;
		left: 0;
		width: 100%;
		height: 95%;
		padding: 100rpx 4% 0;
		box-sizing: border-box;
		// border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
	}

	.select-item {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #343437;
	}

	.item-textarea {
		width: 100%;
		min-height: 294rpx;
		padding: 20rpx;
		border: 2rpx solid #D0D9E7;
		border-radius: 20rpx;
	}

	.user-choose {
		width: 666rpx;
		min-height: 688rpx;
		padding: 30rpx 28rpx;

		.user-choose-title {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 54rpx;
			font-weight: 500;
			color: #3D3D3D;
			font-size: 32rpx;

			.uesr-choose-icon {
				width: 44rpx;
				height: 44rpx;
				background: url("@/static/message-close.svg");
				background-size: 100% 100%;
			}

			.hide {
				background: none;
			}
		}

		.search-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 606rpx;
			min-height: 88rpx;
			padding: 26rpx 30rpx;
			margin-bottom: 32rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			border: 2rpx solid #D0D9E7;

			.search-item-name {
				min-width: 128rpx;
				color: #939AA5;
			}

			.search-item-content {
				color: #3D3D3D;
				text-align: right;
			}

			.swiper-item-content {
				height: 286rpx;
			}
		}

		.search-btn {
			width: 606rpx;
			height: 64rpx;
			margin-top: 50rpx;
			line-height: 64rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			background: #1869F6;
			border-radius: 16rpx;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 28rpx !important;
	}
</style>