clockIn-wechat-uniapp-241018/pages/subPack/team/team.vue

<template>
	<view class="team">
		<!-- logo -->
		<div class="logo">
			打卡系统
		</div>

		<!-- 标题 -->
		<view class="login-title">工程项目打卡系统</view>

		<!-- 团队选择表单 -->
		<view class="team-form">
			<view class="team-form-item">
				<view class="title">团队</view>
				<view class="select">
					<uni-data-select 
					v-model="form.teamId" 
					:localdata="range" 
					style="width: 600rpx;font-size: 30rpx;"
					:clear="false"></uni-data-select>
				</view>
			</view>
			<view class="team-form-item">
				<view class="title">姓名</view>
				<view class="name-input">
					<input type="text" placeholder="请输入姓名" v-model="form.name"/>
				</view>
			</view>
		</view>
		
		<uv-popup ref="popup" :round="30">
			<view class="content-popup">
				
			</view>
		</uv-popup>

		<!-- 提交审核 -->
		<div @click="submit" class="btn">
			提交审核
		</div>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: "Team",
		data() {
			return {
				range: [],
				form : {
					name : '',
					teamId : '',
				},
			}
		},
		computed : {
			...mapState(['teamList', 'userInfo']),
		},
		onLoad() {
			let team = []
			
			this.teamList.forEach(n => {
				team.push({
					value: n.id,
					text: n.name
				})
			})
			
			this.range = team
		},
		methods: {
			submit() {
				// this.$refs.popup.open()
				// return
				
				if (this.$utils.verificationAll(this.form, {
						teamId : '请选择团队',
						name : '请输入姓名',
					})) {
					return
				}
				
				this.$api('teamApply', this.form, res => {
					if(res.code == 200){
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-popup{
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 600rpx;
	}
	.team {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: white;
		/deep/ .uni-select__input-text{
			font-size: 30rpx !important;
		}

		// logo
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0rpx;
			width: 40%;
			color: white;
			background: linear-gradient(180deg, #4C9EEA, #6DB9FF);
			border-radius: 45rpx 13rpx 45rpx 13rpx;
			font-size: 60rpx;
		}

		// 标题
		.login-title {
			font-size: 40rpx;
			font-weight: bold;
			margin: 20rpx 0rpx;
		}

		// 团队选择表单
		.team-form {
			width: 83%;
			margin: 30rpx auto;

			.team-form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #CBCBCB;
				margin: 30rpx 0rpx;

				&:nth-child(2) {
					margin-top: 50rpx;
				}

				.title {}

				.select,
				.name-input {
					display: flex;
					justify-content: flex-end;
					width: 40%;
					font-size: 32rpx;

					input {
						width: 100%;
					}
				}

				&::v-deep .uni-select {
					border: none;
					padding: 0rpx;
				}
			}
		}

		// 提交审核
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 83%;
			background: $main-color;
			color: white;
			height: 100rpx;
			border-radius: 50rpx;
			margin: 120rpx auto 0rpx auto;
		}
	}
</style>