renshou/match/activityEdit/activityEdit.vue

<template>
	<view>
		<view v-if="stepOne">
			<view class="form">
				<view class="form-title">基本信息</view>
				<view class="form-item-title">封面图</view>
				<view class="upload-pic ddflex" v-if="true">
					<image src="../static/images/pic.png"></image>
					<view style="margin-top: 30rpx;">上传封面图</view>
				</view>
				<image v-else class="upload-image" src="../../static/images/lj_img.png"></image>
				<view class="form-limit">* 图片尺寸限制：680*350</view>
				<view class="form-item-title">活动详情轮播图</view>
				<view class="ddflex" style="margin-top: 30rpx;">
					<view class="upload-photo-image" v-for="item in 3">
						<image src="/static/images/lj_img.png"></image>
						<image class="upload-photo-close" src="/static/pages/images/close3.png"></image>
					</view>
					<view class="upload-photo ddflex">
						<image src="../static/images/photo.png"></image>
					</view>
				</view>
				<view class="form-limit">* 图片尺寸限制：670*350</view>
			</view>
			<view class="form-border"></view>
			<view class="form">
				<view class="form-item-title">活动标题</view>
				<view class="form-input-box">
					<input placeholder-class="form-input-placeholder" placeholder="请输入活动标题"/>
				</view>
				<view class="form-item-title">活动说明</view>
				<view class="form-input-box">
					<input placeholder-class="form-input-placeholder" placeholder="请填写活动简介说明"/>
				</view>
				<view class="form-item-title">
					活动详情
					<view class="more ddflex">
						编辑
						<image  src="../../static/pages/images/more.png"></image>
					</view>
				</view>
				<view class="next-btn">下一步</view>
			</view>
		</view>
		
		<!-- 第二步 -->
		<view v-if="stepTwo">
			<view class="form">
				<view class="form-title">报名设置</view>
				<view class="form-item-title">最大报名人数</view>
				<view class="form-number-select ddflex">
					<view>-</view>
					<input type="number" placeholder="最大报名人数" placeholder-class="form-input-placeholder"/>
					<view>+</view>
				</view>
				<view class="form-item-title">报名时间</view>
				<view  class="ddflex" style="margin-top: 20rpx;">
					<picker mode="date" class="flex">
						<view class="form-date-select">
							开始日期
						</view>
					</picker>
					<text style="margin: 0 20rpx;">至</text>
					<picker mode="date" class="flex">
						<view class="form-date-select">
							结束日期
						</view>
					</picker>
				</view>
				<view class="form-item-title">活动时间</view>
				<view  class="ddflex" style="margin-top: 20rpx;">
					<picker mode="date" class="flex">
						<view class="form-date-select">
							开始日期
						</view>
					</picker>
					<text style="margin: 0 20rpx;">至</text>
					<picker mode="date" class="flex">
						<view class="form-date-select">
							结束日期
						</view>
					</picker>
				</view>
			</view>
			<view class="form-border"></view>
			<view class="form">
				<view class="form-title">活动地址</view>
				<view class="form-item-title">地址名称</view>
				<view class="form-input-box">
					<input placeholder-class="form-input-placeholder" placeholder="请输入活动地址简称"/>
				</view>
				<view class="form-item-title">选择城市</view>
				<view class="form-input-box">
					<input placeholder-class="form-input-placeholder" placeholder="请选择活动所在城市"/>
				</view>
				<view class="form-item-title">
					详细地址
				</view>
				<view class="form-input-box">
					<input placeholder-class="form-input-placeholder" placeholder="请输入详细地址"/>
				</view>
				<view class="next-btn">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				stepOne:false,
				stepTwo:true
			}
		},
		onLoad(options) {

		},
		onShow() {
			
		},
		methods: {
			
		},
		mounted() {
			
		}
	}
</script>

<style>
	@import "./activityEdit.css";
</style>