baiyuApp/pages_enter/activity/create.vue

<template>
	<view class="create-team-page">
		<u-navbar title="创建队伍" :autoBack="true" bgColor="#fff" leftIconColor="#333"
			titleStyle="font-weight:bold;"></u-navbar>

		<view class="form-box">
			<u-form :model="form" ref="uForm" labelPosition="top">
				<u-form-item label="所在城市" prop="city" borderBottom  @tap="getCityFun()">
					<u-input v-model="form.city" @tap="getCityFun()" disabledColor="#f8f8f8" placeholder="请选择所在城市" border="none">
						<template #suffix>
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</template>
					</u-input>
				</u-form-item>

				<u-form-item label="团队名称" prop="teamName" borderBottom>
					<u-input v-model="form.teamName" placeholder="请输入团队名称" border="none" clearable></u-input>
				</u-form-item>

				<u-form-item label="领队姓名" prop="leaderName" borderBottom>
					<u-input v-model="form.leaderName" placeholder="请输入领队姓名" border="none" clearable></u-input>
				</u-form-item>

				<u-form-item label="领队电话" prop="leaderPhone" borderBottom>
					<u-input v-model="form.leaderPhone" type="number" placeholder="请输入领队电话" maxlength="11" border="none"
						clearable></u-input>
				</u-form-item>
			</u-form>

			<view class="submit-btn" @click="handleSubmit">
				创建队伍
			</view>
		</view>

		<u-picker :show="showCityPicker" :columns="cityColumns" @confirm="confirmCity"
			@cancel="showCityPicker = false"></u-picker>
	</view>
</template>

<script>
	import {getCitys}  from '@/api/common.js'
	import {
		signUpLeader
	} from '@/api/activity.js';

	export default {
		data() {
			return {
				form: {
					city: '',
					teamName: '',
					leaderName: '',
					leaderPhone: '',
					activityId: getApp().globalData.activityId
				},
				showCityPicker: false,
				cityColumns: [
					[]
				],
				rules: {
					city: {
						type: 'string',
						required: true,
						message: '请选择城市',
						trigger: ['blur', 'change']
					},
					teamName: {
						type: 'string',
						required: true,
						message: '请输入团队名称',
						trigger: ['blur', 'change']
					},
					leaderName: {
						type: 'string',
						required: true,
						message: '请输入领队姓名',
						trigger: ['blur', 'change']
					},
					leaderPhone: {
						type: 'string',
						required: true,
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确的手机号',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getCityFun(){
				getCitys().then(
					res => {
						if(res.code==200){
							this.cityColumns  = [res.data.map(item=>item.n)]
							this.showCityPicker = true
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			confirmCity(e) {
				this.form.city = e.value[0];
				this.showCityPicker = false;
			},
			handleSubmit() {
				this.$refs.uForm.validate().then(res => {
					signUpLeader(this.form).then(res => {
						if (res.code === 200) {
							uni.redirectTo({
								url: '/pages_enter/activity/success?teamCode=' + res.data.teamCode
							});
						} else {
							uni.showToast({
								title: res.msg || '创建失败',
								icon: 'none'
							});
						}
					}).catch(() => {
						uni.redirectTo({
							url: '/pages_enter/activity/success?teamCode=zkzh202604021235'
						});
					});
				}).catch(errors => {
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.create-team-page {
		min-height: 100vh;
		height: 100%;
		width: 100vw;
		background-color: #fff;
		padding: 40rpx;
	}

	.form-box {
		margin-top: 40rpx;
		width: 100%;

		::v-deep .u-line {
			display: none !important;
		}

		::v-deep .u-form-item__body__left {
			width: 100% !important;
		}

		::v-deep .u-form-item__body__right {
			padding: 20rpx 40rpx !important;
			height: 88rpx !important;
			background: #F5F7FA !important;
			border-radius: 48rpx !important;
			margin-top: 20rpx;
		}

		.cityBox {
			width: calc(100vw - 180rpx);
		}
	}

	.submit-btn {
		margin-top: 80rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #2583EB, #4DA1FF);
		border-radius: 50rpx;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(37, 131, 235, 0.3);

		&:active {
			opacity: 0.8;
		}
	}

	.arrow {
		width: 13rpx;
		height: 23rpx;
		margin-left: 15rpx;
	}
</style>