baiyuApp/pages_im/components/SelectProject.vue

<template>
	<u-popup :show="selectProjectShow" mode="bottom" :round="10" @close="selectProjectShow=false">
		<view class="popbox project-popup">
			<view class="popbox-head">
				<view class="title">选择项目</view>
				<view class="close-btn" @click="selectProjectShow=false">
					<u-icon name="close" color="#ccc" size="18"></u-icon>
				</view>
			</view>
			<view class="search-box">
				<u-search placeholder="搜索项目" v-model="searchKeyword" :showAction="true" actionText="搜索"
					@search="searchProject" height="36" bgColor="#F5F5F5"></u-search>
			</view>
			<view class="popbox-body">
				<scroll-view scroll-y="true" class="project-scroll-view">
					<view class="tagbox-list">
						<view class="empty-tip" v-if="filteredProjectList.length<=0">
							暂无项目
						</view>
						<view class="tag-item" v-for="(item,index) in filteredProjectList" :key='item.dictValue'>
							<u-tag :text="item.dictLabel"
								:plain="(tempProjectItem && tempProjectItem.dictValue) != item.dictValue"
								:type="(tempProjectItem && tempProjectItem.dictValue) == item.dictValue ? 'primary' : 'info'"
								@click="handleProjectSelect(item)"></u-tag>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="popbox-footer">
				<u-button type="primary" text="确定" shape="circle" @click="confirmProject"></u-button>
			</view>
		</view>
	</u-popup>

</template>

<script>
	import {
		beMember
	} from '@/pages_im/api/im.js'
	import {
		getDictProject,
	} from "@/pages_manage/api/courseManage.js"
	export default {
		name: "SelectProject",
		props: {
			selectProjectShow: {
				type: Boolean,
				default: false
			},
			application: Object,
		},
		data() {
			return {
				projectList: [],
				tempProjectItem: null,
				searchKeyword: '',
			};
		},
		computed: {
			filteredProjectList() {
				if (!this.searchKeyword) {
					return this.projectList;
				}
				return this.projectList.filter(item =>
					item.dictLabel.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			},
		},
		created() {
			this.getDictProjectFun()
		},
		methods: {
			handleProjectSelect(item) {
				this.tempProjectItem = item;
			},
			async getDictProjectFun() {
				const res = await getDictProject()
				if (res.code == 200) {
					this.projectList = res.data
				}
			},
			async confirmProject() {
				let companyUserInfo = uni.getStorageSync('companyUserInfo')
				companyUserInfo = companyUserInfo && JSON.parse(companyUserInfo)
				let userId = this.application.fromUserID
				if (this.application.fromUserID.indexOf('U') !== -1) {
					userId = this.application.fromUserID.slice(1)
				}
				let params = {
					userId,
					companyUserId: companyUserInfo.userId,
					companyId: companyUserInfo.companyId,
					projectId: this.tempProjectItem.dictValue
				}
				const res = await beMember(params)
				if (res.code == 200) {
					this.$emit('agreeFun')
				} else {
					uni.showToast({
						icon: 'icon',
						title: res.msg
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.project-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;

		.popbox-head {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;
			border-bottom: none;

			.title {
				flex: 1;
				text-align: center;
			}

			.close-btn {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				padding: 10rpx;
			}
		}

		.search-box {
			padding: 0 30rpx 20rpx;
		}

		.popbox-body {
			flex: 1;
			overflow: hidden;
			padding: 0;
		}

		.project-scroll-view {
			height: 50vh;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.tagbox-list {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 20rpx;
		}

		.tag-item {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.empty-tip {
			width: 100%;
			text-align: center;
			color: #999;
			padding: 50rpx 0;
			font-size: 28rpx;
		}

		.popbox-footer {
			padding: 20rpx 30rpx 40rpx;
			border-top: 1px solid #f5f5f5;
		}
	}

	.popbox {
		background-color: #fff;
		border-radius: 12px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #333;

		&-head {
			padding: 15px;
			font-weight: bold;
			font-size: 15px;
			text-align: center;
			position: relative;
		}

		.close-circle {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}

		&-body {
			padding: 10px 10px;
		}

		.radiobox {
			&-item {
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}
			}
		}

		&-footer {
			padding: 15px 0;
		}

		&-footer-btn {
			flex: 1;
			height: 44px;
			line-height: 44px;
			margin: 0 10px;
			border-radius: 50px;
			border: none;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #333;

			&::after {
				border: none;
			}
		}

		.con-btn {
			background-color: #1677ff;
			color: #fff;
		}

		.choosetitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 15px;
			color: #333;
		}

		.invitetip {
			margin-top: 10px;
			background-color: #ebf5fb;
			color: #1677ff;
			padding: 5px 10px;
			border-radius: 5px;
		}

		.sharePop-item {
			padding: 0 10px;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			display: inline-flex !important;

			image {
				height: 48px;
				width: 48px;
				margin-bottom: 10px;
			}
		}
	}
</style>