master/lvdao-miniapp/pages/activityAdd/activityAdd.vue

<template>
	<view class="page">
		<u-form :model="form" ref="uForm" label-position="left" :label-width="180">
			<view class="add-list" style="padding-bottom: 0;">
				<u-form-item :required="true" label="封面图片" borderBottom labelPosition="top">
					<!-- <u-upload :action="$upload"  :auto-upload="true"  ref="uUpload" :max-count="1" ></u-upload> -->
					<u-upload :action="$upload" :auto-upload="false" ref="coverImage" :max-count="1" :file-list="fist"
						@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'coverImage')"></u-upload>
				</u-form-item>
			</view>
			<view class="add-list" style="padding-bottom: 0;">
				<u-form-item :required="true" label="活动名称" borderBottom>
					<u-input v-model="form.activityName" />
				</u-form-item>
				<u-form-item :required="true" label="开始时间" borderBottom>
					<u-input v-model="form.startTime" type="select" @click="startShow = true" placeholder="请选择" />
					<u-picker mode="time" v-model="startShow" :params="params" @confirm="startTimeChange"></u-picker>
				</u-form-item>
				<u-form-item :required="true" label="结束时间" borderBottom>
					<u-input v-model="form.endTime" type="select" @click="endShow = true" placeholder="请选择" />
					<u-picker mode="time" v-model="endShow" :params="params" @confirm="endTimeChange"></u-picker>
				</u-form-item>
				<u-form-item :required="true" label="活动类型" borderBottom>
					<u-input v-model="form.activityType" type="select" @click="typeShow = true" placeholder="请选择" />
					<u-select v-model="typeShow" :list="typeList" @confirm="typeChange"></u-select>
				</u-form-item>
				<u-form-item :required="true" label="可参与人数" borderBottom>
					<u-number-box v-model="form.maxParticipants" :input-width="'100%'" :min="0"></u-number-box>
				</u-form-item>
				<u-form-item :required="true" label="举办区域" borderBottom>
					<u-input v-model="form.region" />
				</u-form-item>
				<u-form-item :required="true" label="活动内容" borderBottom label-position="top">
					<u-input border type="textarea" height="150" v-model="form.content" />
				</u-form-item>
			</view>
		</u-form>
		<u-toast ref="uToast" />
		<!-- 保存按钮 -->
		<view style="height: 120rpx;"></view>
		<view class="page-footer">
			<u-button style="width: 100%;" type="success" @click="submit">提交</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [],
				form: {
					activityName: '',
					startTime: '',
					endTime: '',
					activityType: '',
					maxParticipants: 0,
					region: '',
					content: '',
					auditStatus: '1',
					createUser: '',
					createDate: '',
					coverImage: '',
				},
				active: '', // 文件上传地址
				startShow: false,
				endShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				typeShow: false,
				typeList: [{
					value: '1',
					label: '社交活动'
				}, {
					value: '2',
					label: '营销活动'
				}, {
					value: '3',
					label: '公益活动'
				}, {
					value: '4',
					label: '教育学习活动'
				}, {
					value: '5',
					label: '文化艺术活动'
				}],
				readOnly: false,
				formats: {},
				fist: [],
				pageIndex: {
					pageNumber: 0,
					pageSize: 10,
					id: ''
				},
				typeEdit: false
			};
		},
		onLoad(option) {
			if (option.ids) {
				this.typeEdit = true
				this.pageIndex.id = option.ids
				this.$http.sendRequest('/cereActivityApplication/queryByPage', 'POST', this.pageIndex, 1).then(res => {
					this.form = res.data.data.content[0]
					this.form.maxParticipants = Number(this.form.maxParticipants)
					this.fist.push({
						url: `${this.$img+this.form.coverImage}`
					})
				})
			}
		},
		methods: {
			startTimeChange(val) {
				this.form.startTime = this.timeChange(val);
				this.form.endTime = '';
			},
			endTimeChange(val) {
				const time = this.timeChange(val);
				if (new Date(time).getTime() > new Date(this.form.startTime).getTime()) {
					this.form.endTime = time
				} else {
					this.$refs.uToast.show({
						title: '结束时间不能小于开始时间',
						type: 'error',
					})
				}
			},
			timeChange(val) {
				const {
					year,
					month,
					day,
					hour,
					minute,
					second
				} = val;
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			typeChange(val) {
				this.form.activityType = val[0].label;
			},
			check() {
				if (!this.form.activityName) {
					uni.showToast({
						icon: 'none',
						title: '请输入活动名称'
					});
					return false;
				}
				if (!this.form.startTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择开始时间'
					});
					return false;
				}
				if (!this.form.endTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择结束时间'
					});
					return false;
				}
				if (!this.form.activityType) {
					uni.showToast({
						icon: 'none',
						title: '请选择活动类型'
					});
					return false;
				}
				if (!this.form.maxParticipants) {
					uni.showToast({
						icon: 'none',
						title: '请输入可参与人数'
					});
					return false;
				}
				if (!this.form.region) {
					uni.showToast({
						icon: 'none',
						title: '请输入举办区域'
					});
					return false;
				}
				if (!this.form.content) {
					uni.showToast({
						icon: 'none',
						title: '请输入活动内容'
					});
					return false;
				}
				if (this.form.coverImage == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传封面图片'
					});
					return false;
				}
				return true;
			},
			submit() {
				let show = this.check()
				if (show == false) {
					return
				}
				this.form.createUser = uni.getStorageSync('user').phone
				this.form.createDate = this.currentTime()
				let info = {
					...this.form,
					coverImage: this.form.coverImage.replace(this.$img, '')
				}
				if (this.typeEdit) {
					this.$http.sendRequest('/cereActivityApplication/edit', 'POST', info, 1).then(res => {
						uni.redirectTo({
							url: '/pages/mycreated/mycreated'
						})
					})
				} else {
					this.$http.sendRequest('/cereActivityApplication/add', 'POST', info, 1).then(res => {
						uni.redirectTo({
							url: '/pages/mycreated/mycreated'
						})
					}).catch(err => {
						console.log(err)
						//请求失败
					})
				}
			},
			// 获取时间
			currentTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
				// 为月、日、时、分、秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				// 拼接日期和时间字符串
				let strDate = `${year}-${month}-${day} ${hours}:${minutes}`;
				return strDate;
			},
			onsuccess1(e, file, fileList, ziduan) {
				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[0].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {
						this.form.coverImage = this.$img + JSON.parse(uploadFileRes.data).data
						// let obj ={
						// 	url:this.$img + JSON.parse(uploadFileRes.data).data
						// }
						// this.fist.push(obj)
						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	@import 'activityAdd.scss';
</style>