talk_appAmin/pages/activity/publish.vue

<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar leftText=" " title=" " :placeholder="true" leftIconColor="#000000" leftIconSize="30"
			@leftClick="leftClick" :safeAreaInsetTop="true" :bgColor="bgColor">
			<template #center>
				<view class="text1">发布活动</view>
			</template>
			<template #right>
				<view class="fabu_btn" @click="publish">
					发布
				</view>
			</template>
		</u-navbar>
	</view>


	<up-form :model="form" :rules="rules" ref="uFormRef">
		<view class="cardz">
			<!-- 输入的大标题 -->
			<view class="titleInfo">
				<up-form-item label="" prop="acTitle" borderBottom>
					<up-input placeholder="输入活动标题~（5~20个字）" v-model="form.acTitle" border="none" maxlength="20"
						fontSize="34rpx" color="#333333" clearable
						placeholderStyle="color: #c0c0c0;font-size: 34rpx;"></up-input>
				</up-form-item>
				<view class="xian"></view>
			</view>
			<!-- 输入的500字内容 -->
			<view class="contentInfo">
				<up-form-item label="" prop="acContent" borderBottom>
					<textarea class="text_style" v-model="form.acContent"
						:placeholder="'输入活动内容'+'\n'+'活动图片最多可发布两张'+'\n'+'输入准确定位可以更好提供活动信息奥！'+'\n'+'安全指南：请勿发布带有个人信息（如：住址）'"
						cols="50" rows="10" maxlength="500"
						placeholderStyle="color: #c0c0c0;font-size: 30rpx; white-space: pre-wrap;" color="#333333"
						fontSize="30rpx" @linechange="inputtextInfo"></textarea>
				</up-form-item>
				<view class="char-count">{{ form.acContent.length }}/500</view>
			</view>


			<up-form-item label="" prop="file" borderBottom>
				<view class="cardzfile">
					<fileUpload v-model="form.file" :fileTypeInfo="fileTypeInfo1" :limit="2"></fileUpload>
				</view>
			</up-form-item>

		</view>
		<view class="cardx">
			<up-cell-group :border="false">
				<up-form-item label="" prop="startTime" borderBottom @click="showStartTime = !showStartTime">
					<view style="margin-top: 2rpx;width: 100%;height:30rpx;display:flex;align-items: center;">
						<!-- 俩种icon -->
						<image v-if="showtext1" :src="tu52" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;">
						</image>
						<image v-else :src="tu522" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
						<!-- disabledColor 是 没选时间时的状态 -->
						<!-- color 是 选了时间的状态 -->
						<up-input v-model="form.startTime" disabled disabledColor="#ffffff" color="#85b2ff"
							placeholder="请选择活动开始时间" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
							border="none">
							<span v-if="showtext1">请选择活动开始时间</span>
						</up-input>
						<up-icon slot="right" name="arrow-right"></up-icon>
					</view>
				</up-form-item>
				<up-form-item label="" prop="endTime" borderBottom @click="showEndTime = !showEndTime">
					<view style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
						<image v-if="showtext2" :src="tu53" style="width: 30rpx; height: 32rpx;margin-right: 12rpx;"></image>
						<image v-else :src="tu532" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
						<up-input v-model="form.endTime" disabled disabledColor="#ffffff" color="#85b2ff"
							placeholder="请选择活动结束时间" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
							border="none">
							<span v-if="showtext2">请选择活动结束时间</span>
						</up-input>
						<up-icon slot="right" name="arrow-right"></up-icon>
					</view>
				</up-form-item>
				<up-form-item label="" prop="addres" borderBottom @click="showaddres = !showaddres">
					<view style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
						<image v-if="showtext3" :src="tu51" style="width: 30rpx; height: 32rpx;margin-right: 12rpx;">
						</image>
						<image v-else :src="tu512" style="width: 20rpx; height: 30rpx; margin-right: 12rpx;"></image>
						<up-input v-model="form.addres" disabledColor="#ffffff" color="#85b2ff" @change="change1"
							placeholder="添加活动具体位置" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
							border="none">
							<span v-if="showtext3"> 添加活动具体位置 </span>
						</up-input>
						<up-icon slot="right" name="arrow-right" @click="gotomap"></up-icon>
					</view>
				</up-form-item>
			</up-cell-group>
		</view>
		<!-- 时间选择器 -->
		<up-datetime-picker :show="showStartTime" v-model="newData" :modelValue="newData" @confirm="confirm1"
			format="YYYY-MM-DD HH:mm:ss" @cancel="cancel" mode="datetime"></up-datetime-picker>
		<up-datetime-picker :show="showEndTime" v-model="newData" @confirm="confirm2" :modelValue="newData"
			format="YYYY-MM-DD HH:mm:ss" @cancel="cancel" mode="datetime"></up-datetime-picker>
	</up-form>
</template>
<script setup>
	import {
		listInfo,
		getInfo,
		delInfo,
		addInfo,
		updateInfo
	} from "@/api/activityInfo/info";
	import fileUpload from '../common/file/fileUpload'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance,
		computed,
		toRefs
	} from 'vue'
	import {
		useStore
	} from 'vuex';
	const {
		proxy
	} = getCurrentInstance();
	const iconConfig = proxy.iconConfig;
	const tu51 = iconConfig.tu51;
	const tu512 = iconConfig.tu512;
	const tu52 = iconConfig.tu52;
	const tu522 = iconConfig.tu522;
	const tu53 = iconConfig.tu53;
	const tu532 = iconConfig.tu532;
	const title = ref('')
	const content = ref('');
	const data = reactive({
		form: {
			acTitle: '',
			acContent: '',
			startTime: null,
			endTime: null,
			file: null,
			state: null,
			addres: null,
			longitude: null,
			latitude: null
		},
		rules: {
			acTitle: [{
					required: true,
					message: '请输入活动标题',
					trigger: 'blur'
				},
				{
					min: 5,
					max: 20,
					message: '标题长度在 5 到 20 个字符',
					trigger: 'blur'
				}
			],
			acContent: [{
					required: true,
					message: '请输入活动内容',
					trigger: 'blur'
				},
				{
					max: 500,
					message: '内容不能超过 500 字',
					trigger: 'blur'
				}
			],
			startTime: [{
				required: true,
				message: '请选择活动开始时间',
				trigger: 'change'
			}],
			endTime: [{
					required: true,
					message: '请选择活动结束时间',
					trigger: 'change'
				},
				{
					validator: (rule, value, callback) => {
						if (value == null | form.value.startTime == null) {
							callback();
						} else if (value <= form.value.startTime) {
							callback(proxy.$modal.msgError('截至时间错误'));
						} else {
							callback();
						}
					},
					trigger: 'change'
				}
			],
			addres: []
		}
	});
	const {
		form,
		rules
	} = toRefs(data);
	const fileTypeInfo1 = ref('image')
	const bgColor = ref('');
	bgColor.value = 'rgba(170, 0, 0, 0)'
	const showStartTime = ref(false);
	const showEndTime = ref(false);
	const showaddres = ref(false);
	const StartTime = ref('请选择活动开始时间');
	const showtext1 = ref(true);
	const showtext2 = ref(true);
	const showtext3 = ref(true);
	const EndTime = ref('请选择活动结束时间');
	const newData = ref(new Date().getTime());
	const timeFormat = uni.$u.timeFormat;

	// 表单引用  
	const uFormRef = ref(null);
	const update1 = ref(false)
	onLoad((options) => {
		if (options.id != null) {
			update1.value = true;
			console.log("xinxi1:", options.id);
			const _id = options.id;
			getInfo(_id).then(response => {
				form.value = response.data;
				console.log("actiInfo:", form.value);
			});
		} else {

		}

	})

	const leftClick = () => {
		proxy.$tab.navigateBack(1)
	}

	const draft = () => {
		form.value.auditStatus = "5"
		submitForm('draft');
		console.log("存草稿");
	}

	const publish = () => {
		form.value.auditStatus = "1"
		submitForm('publish');
		console.log("发布");
	}
	const change1 = (e) => {
		showtext3.value = false;
	}
	const inputtextInfo = (e) => {
		console.log("测试输入1：", e);
	}
	const gotomap = () => {
		proxy.$tab.navigateTo('/pages/activity/map')
	}

	const submitForm = (type) => {
		if (uFormRef.value) {
			uFormRef.value.validate().then(valid => {
				if (valid) {
					proxy.$modal.loading('正在提交数据，请稍候...');
					// publish为发布，draft为存草稿
					if (type === 'publish') {
						// 调用发布接口
						if (update1.value) {
							updateInfo(form.value).then(response => {
								rotation(form.value.id);
							});
						} else {
							addInfo(form.value).then(response => {
								rotation(response.data.id);
							});
						}
					} else {
						// 调用存草稿接口
						if (update1.value) {
							updateInfo(form.value).then(response => {
								proxy.$modal.closeLoading();
								proxy.$modal.msgSuccess("存草稿成功");
							});
						} else {
							addInfo(form.value).then(response => {
								proxy.$modal.closeLoading();
								proxy.$modal.msgSuccess("存草稿成功");
							});
						}
					}
				} else {
					console.log('表单验证失败');
				}
			}).catch(error => {
				console.log('表单验证错误:', error);
			});
		} else {
			console.log('表单引用未定义');
		}
	}
	//轮训
	const rotation = (id) => {
		setTimeout(() => {
			getInfo(id).then(response => {
				console.log("轮训数据：", response.data);
				console.log("发布人身份：", response.data.userType);
				if(response.data.userType === 11){
					proxy.$modal.msgSuccess("管理员发布 不需要审核");
					proxy.$tab.navigateTo('/pages/common/talkState/publis')
				}
				if (response.data.auditStatus === 3 | response.data.auditStatus === 4) {
					proxy.$modal.closeLoading();
					proxy.$modal.msgError("审核失败");
					proxy.$tab.navigateTo('/pages/common/talkState/auditFailure')
				} else if (response.data.auditStatus === 2) {
					proxy.$modal.closeLoading();	
					// 其实 auditStatus 的值为1 等待管理员点击之后改变 为2
					proxy.$modal.msgSuccess("审核中~");
					proxy.$tab.navigateTo('/pages/common/talkState/audit')
				} else if (response.data.auditStatus === 0) {
					proxy.$modal.closeLoading();
					proxy.$modal.msgSuccess("发布成功");
					proxy.$tab.navigateTo('/pages/common/talkState/publis')
				} else {
					rotation(id);
				}
			});
		}, 1000);
	}

	const startTime = (e) => {
		showStartTime.value = !showStartTime.value
	}

	const confirm1 = (e) => {
		showtext1.value = false;
		StartTime.value = e.value
		form.value.startTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
		showStartTime.value = !showStartTime.value
	}

	const confirm2 = (e) => {
		showtext2.value = false;
		EndTime.value = e.value
		form.value.endTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
		showEndTime.value = !showEndTime.value
	}

	const cancel = (e) => {
		showStartTime.value = false;
		showEndTime.value = false;
	}
	const back_top_page = () => {
		uni.navigateBack()
	}
</script>
<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.text1 {
		font-weight: 400;
		font-size: 36rpx;
		color: #000000;
	}

	.navbarcenter {
		font-weight: 400;
		font-size: 36rpx;
		text-align: left;
		color: #000000;
	}

	.nav {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 88rpx;
	}

	.nav_image_box {
		width: 148rpx;
		display: flex;
		align-items: center;
	}

	.nav image {
		width: 30rpx;
		height: 40rpx;
		margin-left: 32rpx;
	}

	.nav text {
		font-weight: 600;
		width: 148rpx;
		height: 80rpx;
		font-size: 36rpx;

		color: #000000 100%;
		line-height: 80rpx;
	}

	.fabu_btn {
		width: 108rpx;
		height: 46rpx;
		background-color: #6AA2FF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 23rpx;
	}

	.xian {
		width: 686rpx;
		height: 2rpx;
		border-radius: 1rpx 1rpx 1rpx 1rpx;
		background: #f4f5f6;
	}

	.cardz {
		margin-left: 32rpx;
		margin-right: 32rpx;

		.titleInfo {
			margin-top: 40rpx;


		}

		.contentInfo {
			margin-top: 46rpx;

			.text_style {
				white-space: pre-wrap;
				width: 100%;
				overflow: auto;


				font-weight: 400;
				font-size: 30rpx;
				line-height: 46rpx;
			}

			.char-count {
				z-index: 1;
				text-align: right;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.cardzfile {
			background-color: #FFFFFF;
		}
	}

	.cardx {
		background-color: #FFFFFF;
		padding-top: 72rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;

		.c1 {
			margin-top: 2rpx;
			width: 100%;
			height: 102rpx;
			display: flex;
			align-items: center;
		}
	}

	.cardxx {
		display: flex;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 80rpx;
		justify-content: space-between;
		padding-bottom: 32rpx;

		.cardxx-btn {
			width: 330rpx;
			height: 80rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			background: #6AA2FF;
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FBFBFB;
		}

		.cgText {
			background-color: #F8F8E3;
			color: #999999;
		}
	}

	.text2 {
		margin-left: 12rpx;
		font-weight: 400;
		font-size: 30rpx;
		text-align: left;
		color: #C9F6F5 !important;
	}

	.btnInfo1 {
		width: 330rpx !important;
		height: 80rpx !important;
	}
</style>