xiaoyou-h5/pages/activity/create_active.vue

<template>
	<view class="create_active">
		<view class="img" v-if="!uploadImage">
			<u-upload ref="uUpload" :action="action" :auto-upload="true" :form-data='imageDate' :file-list="fileList"
				@on-success='uploadSuccess' :custom-btn="true" max-count="1">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-icon name="plus" size="50" color="#79573D"></u-icon>
				</view>
			</u-upload>
			<text>添加活动海报</text>
			<text style="font-size: 12px;">(最佳尺寸比例：215*74)</text>
		</view>
		<view class="img" v-else>
			<u-image height="100%" :src="uploadImage"></u-image>
		</view>
		<view class="title title1">
			<view class="line"></view>
			<text>基本信息</text>
		</view>
		<u-form :model="form" ref="uForm" class="form">
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动标题" prop="title" :label-width="150">
					<u-input v-model="form.title" input-align="right" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动类型" prop="type_id" :label-width="160">
					<view class="right" @click="choose_type">
						<text>{{current_type?current_type.label:'请选择'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
						<!-- <view class="warning" v-if="is_warning">
							请选择活动类型
						</view> -->
					</view>

				</u-form-item>
			</view>
			<u-picker v-model="type" mode="selector" :range="selector_type" @confirm="choose"></u-picker>

			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动开始时间" prop="start_time" :label-width="180">
					<view class="right" @click="actice_start_time = true">
						<text>{{form.start_time?form.start_time:'请选择'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
					</view>
				</u-form-item>
			</view>
			<u-picker v-model="actice_start_time" mode="time" @confirm="time_choose"></u-picker>

			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动结束时间" prop="end_time" :label-width="180">
					<view class="right" @click="actice_end_time = true">
						<text>{{form.end_time?form.end_time:'请选择'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
					</view>
				</u-form-item>
			</view>
			<u-picker v-model="actice_end_time" mode="time" @confirm="end_time_choose"></u-picker>

			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动形式" prop="shape" :label-width="150">
					<view class="right" @click="choose_shape">
						<text>{{current_shape?current_shape.label:'请选择'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
						<view class="warning" v-if="is_shape_show">
							请选择活动形式
						</view>
					</view>
				</u-form-item>
			</view>
			<u-picker v-model="is_shape" mode="selector" :range="selector" @confirm="shape_choose"></u-picker>

			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="联系人姓名" prop="contact_name" :label-width="150">
					<u-input v-model="form.contact_name" input-align="right" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="联系人手机号" prop="contact_mobile" :label-width="180">
					<u-input v-model="form.contact_mobile" input-align="right" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star p_star">
					*
				</view>
				<view class="label">
					地址
				</view>
				<u-form-item label="" prop="intro" :label-width="150">
					<u-input v-model="form.address" type="text" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动详情" prop="body" :label-width="150">

					<view class="right" @click="goEdit">
						<!-- <VueEditor v-model="form.body" /> -->
						<text>{{form.body?'重新输入':'请点击跳转输入'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
					</view>
				</u-form-item>
			</view>

			<view class="title">
				<view class="line"></view>
				<text>报名设置</text>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="报名开始时间" prop="sign_up_start_time" :label-width="180">
					<view class="right" @click="actice_sign_up_start_time = true">
						<text>{{form.sign_up_start_time?form.sign_up_start_time:'请选择'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
					</view>
				</u-form-item>
			</view>
			<u-picker v-model="actice_sign_up_start_time" mode="time" @confirm="sus_time_choose"></u-picker>

			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="报名结束时间" prop="sign_up_end_time" :label-width="180">
					<view class="right" @click="actice_sign_up_end_time = true">
						<text>{{form.sign_up_end_time?form.sign_up_end_time:'请选择'}}</text>
						<u-icon name="arrow-right" size="20" color="#C8C9CC"></u-icon>
					</view>
				</u-form-item>
			</view>
			<u-picker v-model="actice_sign_up_end_time" mode="time" @confirm="sue_time_choose"></u-picker>

			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="报名总人数" prop="total_nums" :label-width="180">
					<u-input v-model="form.total_nums" type="number" input-align="right" />
				</u-form-item>
			</view>
			<view class="posotion">
				<view class="star">
					*
				</view>
				<u-form-item label="活动状态" prop="status" :label-width="180">
					<u-radio-group v-model="form.status" @change="radioGroupChange">
						<u-radio name="1">
							正常
						</u-radio>
						<u-radio name="0">
							暂停
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
		</u-form>
		<view class="btn">
			<button type="default" @click="submit">提交</button>
		</view>
		<!-- <view class="pic">
			<view class="top">
				<text>活动相册</text>
				<u-switch v-model="switchVal"></u-switch>
			</view>
			<text>*开启后，活动详情显示相册板块</text>
		</view>
		<view class="pic">
			<view class="top">
				<text>活动评论</text>
				<u-switch  v-model="switchVal"></u-switch>
			</view>
			<text>*开启后，活动详情显示评论板块</text>
		</view> -->
		<!-- <view class="pic">
			<view class="top">
				<text>活动互动</text>
				<u-switch  v-model="switchVal"></u-switch>
			</view>
			<text>*开启后，活动详情显示互动板块</text>
		</view> -->
		<u-popup v-model="show" mode="bottom" height="100%">
			<view class="form">


				<view class="back" @click="show=!show">
					<u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
				</view>
				<u-navbar :is-back="false" title="填写信息"></u-navbar>
				<jinEdit placeholder="请输入内容..." @editOk="editOk" uploadFileUrl="/api/common/upload" :html="form.body">
				</jinEdit>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import jinEdit from '../../components/jin-edit/jin-edit.vue';
	export default {
		components: {
			jinEdit
		},
		data() {
			return {
				form: {
					status: 1
				},
				is_warning: false,
				is_shape_show: false,
				type: false,
				actice_start_time: false,
				actice_end_time: false,
				is_shape: false,
				actice_sign_up_end_time: false,
				actice_sign_up_start_time: false,
				switchVal: false,
				selector: [],
				selector_type: [],
				show: false,
				rules: {
					title: [{
						required: true,
						message: '请输入活动标题',
						trigger: ['change', 'blur'],
					}],
					type_id: [{
						required: true,
						message: '请选择活动类型',
						trigger: ['change', 'blur'],
					}],
					start_time: [{
						required: true,
						message: '请选择活动开始时间',
						trigger: ['change', 'blur'],
					}],
					end_time: [{
						required: true,
						message: '请选择活动结束时间',
						trigger: ['change', 'blur'],
					}],
					sign_up_start_time: [{
						required: true,
						message: '请选择报名开始时间',
						trigger: ['change', 'blur'],
					}],
					sign_up_end_time: [{
						required: true,
						message: '请选择报名结束时间',
						trigger: ['change', 'blur'],
					}],
					total_nums: [{
						required: true,
						type: 'number',
						message: '请输入报名总人数',
						trigger: ['change', 'blur'],
					}],
					// shape: [{
					// 	required: true,
					// 	message: '请选择活动形式',
					// 	trigger: ['change', 'blur'],
					// }],
					contact_name: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: ['change', 'blur'],
					}],
					contact_mobile: [{
						required: true,
						len: 11,
						message: '请输入联系人手机号',
						trigger: ['change', 'blur'],
					}],
					status: [{
						required: true,
						message: '请选择活动状态',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请输入活动地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					body: [{
						required: true,
						message: '请输入活动内容',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				action: 'http://www.example.com/upload',
				fileList: [],
				imageDate: {
					file_type: 'img',
					type: 'course'
				}, //上传图片携带参数
				active_type: [],
				shape_list: [],
				current_type: '',
				current_shape: '',
				uploadImage: ''
			}
		},
		onShow() {
			this.action = '/api/common/upload'

		},
		methods: {

			goEdit() {
				this.show = true
			},
			// 点击发布
			editOk(res) {
				this.form.body = res.html
				console.log(this.form,'form')
				this.show = false
			},
			//上传图片成功
			uploadSuccess(data) {
				this.form.cover = data.data.id
				// this.form.headimg = data.data[0].url
				this.uploadImage = data.data.url
				// this.image_edit = 1
			},
			choose_type() {
				this.type = true
				this.active_type = uni.getStorageSync('type')
				this.selector_type = this.active_type.filter(item => {
					// if(item.label!='全部') {
						return item.label!='全部'
					// }
				})
				this.selector_type = this.selector_type.map(item=>{
					return item.label
				})
				console.log(this.active_type, 'active_type')
				console.log(this.selector_type, 'selector_type')
			},
			// picker选择的值
			choose(e) {
				this.current_type = this.active_type[e]
				// if(this.current_type.value == ""){
				// 	this.form.type_id = 0
				// 	return
				// }
				this.form.type_id = this.current_type.value
				
				// if (this.form.type_id || this.form.type_id == '') {
					// this.is_warning = false
				// }
				console.log(this.form.type_id, 'this.form.type_id')
			},
			//活动开始时间选择
			time_choose(e) {

				this.form.start_time = e.year + '-' + e.month + '-' + e.day

			},
			//活动结束时间选择
			end_time_choose(e) {
				this.form.end_time = e.year + '-' + e.month + '-' + e.day

			},
			choose_shape() {
				this.is_shape = true

				this.shape_list = uni.getStorageSync('shape')
				this.selector = this.shape_list.filter(item => {
					// if(item.label!='全部') {
						return item.label!='全部'
					// }
				})
				this.selector = this.selector.map(item => {
					return item.label
				})
				console.log(this.selector, 'selector')
			},
			//选择picker中的值
			shape_choose(e) {
				this.current_shape = this.shape_list[e]
				console.log(this.current_shape.value,'this.current_shape.value')
				// if(this.current_shape.value == ""){
				// 	this.form.shape = 0
				// }
				this.form.shape = this.current_shape.value

			},
			sus_time_choose(e) {
				this.form.sign_up_start_time = e.year + '-' + e.month + '-' + e.day
			},
			sue_time_choose(e) {
				this.form.sign_up_end_time = e.year + '-' + e.month + '-' + e.day
			},
			submit() {
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; 
				// if (!this.form.type_id) {
				// 	this.is_warning = true
				// } else {
				// 	this.is_warning = false
				// }
				// if (!this.form.shape) {
				// 	this.is_shape_show = true
				// } else {
				// 	this.is_shape_show = false
				// }
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		this.form.organization_id = this.vuex_user.organization_id
				// 		this.$u.post('/page/organization-activity', this.form).then(res => {
				// 			if (res.code == 200) {
				// 				uni.showToast({
				// 					title: '添加成功',
				// 					icon: 'none'
				// 				})
				// 				setTimeout(function() {
				// 					uni.reLaunch({
				// 						url: 'index'
				// 					})
				// 				}, 1500)
				// 			}
				// 		})
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
				if(!this.form.cover){
					uni.showToast({
						title: '请上传活动海报',
						icon: 'none'
					})
					return
				}
				else if (!this.form.title) {
					uni.showToast({
						title: '请填写活动标题',
						icon: 'none'
					})
					return
				}else if(this.form.type_id!=''&&!this.form.type_id){
					uni.showToast({
						title: '请选择活动类型',
						icon: 'none'
					})
					return
				}
				 else if (!this.form.start_time) {
					uni.showToast({
						title: '请选择活动开始时间',
						icon: 'none'
					})
					return
				} else if (!this.form.end_time) {
					uni.showToast({
						title: '请选择活动结束时间',
						icon: 'none'
					})
					return
				} else if (this.form.shape!=''&&!this.form.shape) {
					uni.showToast({
						title: '请选择活动形式',
						icon: 'none'
					})
					return
				} else if (!this.form.contact_name) {
					uni.showToast({
						title: '请填写联系人姓名',
						icon: 'none'
					})
					return
				} else if(!this.form.contact_mobile){
					uni.showToast({
						title: '请正确填写联系人电话',
						icon: 'none'
					})
					return
				} else if(!reg_tel.test(this.form.contact_mobile)){
					uni.showToast({
						title: '请正确填写联系人电话',
						icon: 'none'
					})
					return
				}else if (!this.form.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})
					return
				} else if (!this.form.body) {
					uni.showToast({
						title: '请输入活动详情',
						icon: 'none'
					})
					return
				} else if (!this.form.sign_up_start_time) {
					uni.showToast({
						title: '请选择报名开始时间',
						icon: 'none'
					})
					return
				} else if (!this.form.sign_up_end_time) {
					uni.showToast({
						title: '请选择报名结束时间',
						icon: 'none'
					})
					return
				}else if (!this.form.total_nums) {
					uni.showToast({
						title: '请输入报名总人数',
						icon: 'none'
					})
					return
				} else if (!this.form.status) {
					uni.showToast({
						title: '请选择活动状态',
						icon: 'none'
					})
					return
				}
				this.form.organization_id = this.vuex_user.organization_id
						this.$u.post('/page/organization-activity', this.form).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '添加成功',
									icon: 'none'
								})
								setTimeout(function() {
									uni.reLaunch({
										url: 'index'
									})
								}, 1500)
							}
						})

			},
			radioGroupChange(e) {

			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>

<style lang="scss" scoped>
	.create_active {
		// padding: 0 16px;
		background-color: rgba($color: #C8C9CC, $alpha: 0.2);
		padding-bottom: 30px;

		.img {
			width: 100%;
			height: 200px;
			background-color: #C8C9CC;
			background-color: rgba($color: #C8C9CC, $alpha: 0.2);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.slot-btn {
				border: 1px dashed #79573D;
				width: 70px;
				height: 70px;
				line-height: 70px;
				text-align: center;
				margin-bottom: 10px;
			}

			font-size: 14px;
			color: rgba($color: #C8C9CC, $alpha: 1.0);
		}

		.form {
			position: relative;

			.back {
				position: absolute;
				left: 10px;
				top: 0px;
				width: 30px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 9999;
				// background: #18B566;
			}

		}

		.title {
			display: flex;
			align-items: center;
			padding-top: 15px;
			padding-bottom: 10px;
			font-size: 14px;
			background-color: #fff;

			.line {
				width: 3px;
				height: 20px;
				background-color: #79573D;
				margin-right: 5px;
			}
		}

		.title1 {
			padding: 15px 16px 10px;
		}

		.form {
			padding: 0 16px;
			background-color: #fff;

			.posotion {
				position: relative;
				padding-left: 10px;

				.star {
					position: absolute;
					left: 0;
					top: 20px;
					color: red;
				}

				.label {
					margin-top: 10px;
				}

				.p_star {
					top: 0px;
				}
			}

			.right {
				width: 100%;
				text-align: right;
				color: #C8C9CC;
			}

			.warning {
				color: red;
				text-align: left;
				font-size: 12px;
			}
		}

		.pic {
			padding: 10px 16px;
			margin-top: 8px;
			background-color: #fff;
			color: #C8C9CC;
			font-size: 12px;

			.top {
				color: #333;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.btn {
			button {
				z-index: 2;
				width: 90%;
				// position: fixed;
				// bottom: 0;
				margin-top: 15px;
				border-radius: 10px;
				background-color: #79573D;
				color: #fff;

				// border-radius: 0;
				&::after {
					border: none;
				}
			}
		}

	}
</style>