signuptool-ui-xcx/pages/team/CreateTeam.vue

<template>
	<view style="background: #F1F2F5;">
		<RefreshView id="mescrollRef" ref="mescrollRef" :pageBg="F1F2F5" text="创建队伍" :useDownScroll="false"
			:useUpScroll="false">
			<view class="item">
				<view class="view1">
					<view class="view1_top">
						<text class="view1_top_text">【队伍名称】</text>
						<input class="view1_top_input" type="text" @input="nameText()" placeholder="请输入队伍名称"
							:value="name" />
					</view>
					<view
						style="width: 100%;height: 5rpx;background-color: #f5f4f9;margin-top: 20rpx;margin-bottom: 20rpx;">
					</view>
					<textarea class="slogan" auto-height="true" style="min-height: 80rpx;" @input="sloganText()"
						placeholder="请输入队伍口号（点击编辑）" :value="slogan" />
				</view>
			</view>
			<view class="item">

				<view class="view2">
					<text class="lift_text">人数限制</text>
					<text class="right_text1">5 人</text>
				</view>

			</view>

			<view class="item">
				<view class="view2">
					<text class="lift_text">运动项目标签</text>
					<view style="display: flex; flex: 1;justify-content: flex-end;margin-right: 15rpx;">
						<fui-dropdown-menu :right="1" :minWidth="300" :size="30" selectedColor="#465CFF"
							:options="options" @click="typeItemClick" @close="typeClose" ref="ddmtype">
							<view class="fui-filter__item" @tap="filterTap()">
								<text>{{type}}</text>
								<image style="width: 22rpx;height: 22rpx; margin-left: 15rpx;"
									src="../../static/event-icon/xia.png" mode="aspectFit" class="fui-filter__icon"
									:class="{'fui-icon__ani':typeShow}">
								</image>

							</view>
						</fui-dropdown-menu>
					</view>
				</view>

			</view>

			<view class="item">

				<view class="view2">
					<text class="lift_text">是否公开招募队员</text>
					<switch color="#007AFF" class="tui-fr" :checked="switch1Checked" @change="switch1Change">
					</switch>
				</view>
			</view>

			<view class="item">

				<view class="view2">
					<text class="lift_text">所在市</text>
					<view @click="selectCity()">
						<text class="right_text2">{{page.city}}</text>
						<image style="width: 22rpx;height: 22rpx; margin-left: 10rpx;"
							src="../../static/home-icon/more.png" mode="aspectFit" class="fui-filter__icon">
					</view>


				</view>
			</view>


			<text class="btn" @click="save()">创建</text>

		</RefreshView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					'city': this.ReadPreference("find_city"),
					'adCode': this.ReadPreference("find_city_code").slice(0, -2),
				},
				options: [{
					text: '乒乓球',
					value: 0,
				}, {
					text: '羽毛球',
					value: 1
				}, {
					text: '户外',
					value: 2
				}, {
					text: '骑行',
					value: 3
				}],
				typeShow: false,
				type: "乒乓球",
				switch1Checked: true,
			}
		},
		onShow() {

			let backResult = this.OnActivityResult();
			if (backResult != undefined) {
				console.log("结果>" + JSON.stringify(backResult))
				if (!this.IsEmpty(backResult.code)) {
					console.log("结果2>" + backResult.code)
					this.page.adCode = backResult.code
					this.page.city = backResult.city
				}
			}
		},
		methods: {
			filterTap() {
				this.$refs.ddmtype.show()
				this.typeShow = true;
			},
			typeItemClick(e) {
				this.type = e.text
				console.log(this.type)
				this.typeClose()
			},
			typeClose() {
				this.typeShow = false;
			},
			switch1Change: function(e) {
				this.switch1Checked = !this.switch1Checked;
				console.log(`switch1Change样式点击后是否选中：`, this.switch1Checked)
			},
			selectCity() {
				uni.navigateTo({
					url: "../../pages/city/CitySelectActivity?city=" + this.page.city +
						"&code=" + this.page.adCode
				})
			}

		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 36rpx;
	}

	.view1 {
		display: flex;
		flex-direction: column;
		width: 100%;

		.view1_top {
			display: flex;
			flex-direction: row;

			.view1_top_text {
				font-size: 32rpx;
				color: #898989;
			}

			.view1_top_input {
				width: 70%;
				font-size: 32rpx;
				color: #101010;
				margin-left: 15rpx;
			}

		}

		.slogan {
			width: 100%;
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
	}

	.view2 {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;

		.lift_text {
			flex: 1;
			font-size: 28rpx;
			color: #898989;
		}

		.right_text1 {
			font-size: 28rpx;
			color: #BEBEBE;
		}

		.right_text2 {
			font-size: 28rpx;
			color: #101010;
		}

		.tui-fr {
			zoom: .7
		}
	}

	.btn {
		justify-content: center;
		width: 100%;
		margin-top: 100rpx;
		padding: 30rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #007AFF;
		text-align: center;
		flex: 1;
		position: absolute;
		bottom: 0;
	}
</style>