jje_spread_uniapp/pages/addGroup/addGroup.vue

<template>
	<view class="page">
		<uni-nav-bar :fixed="true" background-color="#FFE05C" :border="false" :statusBar="true" left-icon="left"
			title="新增分组" @clickLeft="back" />
		<view>

				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">

					<u-form-item prop="groupName" borderBottom>
						<view class="item">
							<text class="key">分组名称</text>
							<view class="flex-row input">
								<u--input v-model="form.groupName" placeholder="请输入分组名称" border="none"></u--input>
							</view>
						</view>
					</u-form-item>

					<u-form-item prop="userInfo.sex" borderBottom>
						<view class="item">
							<text class="key">负责人</text>
							<view class="flex-row input" @click="openSelectPerson">
								<u--input disabled placeholder="请选择负责人" border="none"></u--input>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</u-form-item>

					<u-form-item prop="userInfo.sex" borderBottom>
						<view class="item">
							<text class="key">分组成员</text>
							<view class="flex-row input" @click="openSelectMember">
								<u--input disabled placeholder="请选择分组成员" border="none"></u--input>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</u-form-item>

				</u--form>

				<view class="members">
					<view class="membersTitle ">
						<text>已选择的分组成员</text>
					</view>
					<scroll-view scroll-y class="scroll-y" >
					<view class="flex-row justify-between member" v-for="item in 10">
						<view class="flex-row">
							<u-icon name="account-fill" size="24"></u-icon>
							<text class="name">张三</text>
						</view>
						<view>
							<u-icon name="trash" size="24"></u-icon>
						</view>
					</view>
					</scroll-view>

				</view>

		</view>
		<view class="addGroup">
			<text>提交</text>
		</view>

		<uni-popup ref="selectMemberPopup" type="bottom">
			<view class="selectMemberPopup">
				<view class="flex-row justify-around popupTitle">
					<text @click="closePopup('selectMemberPopup')">取消</text>
					<text>选择分组负责人</text>
					<text>确定</text>
				</view>
				<view class="scroll-y-view">
					<scroll-view scroll-y class="scroll-y1" >
						<view class="flex-row justify-between member" v-for="item in 10">
							<view class="flex-row">
								<text class="name">张三</text>
								<text class="name">1736500000</text>
							</view>
							<u-icon name="checkbox-mark" color="#FFE05C" size="24"></u-icon>
						</view>
					</scroll-view>
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="selectPersonPopup" type="bottom">
			<view class="selectMemberPopup">
				<view class="flex-row justify-around popupTitle">
					<text @click="closePopup('selectPersonPopup')">取消</text>
					<text>选择分组负责人</text>
					<text>确定</text>
				</view>
				<view class="scroll-y-view">
					<scroll-view scroll-y class="scroll-y1" >
						<view class="flex-row justify-between member" v-for="item in 10">
							<view class="flex-row">
								<text class="name">张三</text>
								<text class="name">1736500000</text>
							</view>
							<u-icon name="checkbox-mark" color="#FFE05C" size="24"></u-icon>
						</view>
					</scroll-view>
				</view>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				height: '',
				form:{
					groupName:''
				},
				rules: {
					'groupName': {
						type: 'string',
						required: true,
						min:1,
						message: '请输入分组名称',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad(e) {
			let sysInfo = uni.getSystemInfoSync()
			this.height = sysInfo.windowHeight - 120 + 'px' //除标题栏栏外的屏幕可用高度
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			openSelectMember(){
				this.$refs.selectMemberPopup.open()
			},

			openSelectPerson(){
				this.$refs.selectPersonPopup.open()
			},
			closePopup(name){
				this.$refs[name].close()
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>