402 lines
13 KiB
Vue
402 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部导航栏 -->
|
||
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick"
|
||
:bgColor="bgColor">
|
||
<template #center>
|
||
<div class="navbarcenter"><span>发布活动</span></div>
|
||
</template>
|
||
</up-navbar>
|
||
</view>
|
||
<view class="bgc"></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>
|
||
<view class="contentInfo">
|
||
<up-form-item label="" prop="acContent" borderBottom>
|
||
<textarea class="text_style" v-model="form.acContent"
|
||
placeholder="输入活动内容\n活动图片最多可发布两张\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>
|
||
<view class="char-count">{{ form.acContent.length }}/500</view>
|
||
</up-form-item>
|
||
</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;">
|
||
<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>
|
||
<up-input v-model="form.startTime" disabled disabledColor="#ffffff" color="#C9F6F5"
|
||
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="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="#C9F6F5"
|
||
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: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
|
||
<up-input v-model="form.addres" disabledColor="#ffffff" color="#C9F6F5" @change="change1"
|
||
placeholder="添加活动具体位置" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
|
||
border="none">
|
||
<span v-if="showtext2">添加活动具体位置</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>
|
||
<view class="cardxx">
|
||
|
||
<view class="cardxx-btn" @click="publish">
|
||
发布
|
||
</view>
|
||
<view class="cardxx-btn cgText" @click="draft">
|
||
存草稿
|
||
</view>
|
||
</view>
|
||
</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);
|
||
onLoad((options) => {
|
||
|
||
})
|
||
|
||
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('正在提交数据，请稍候...');
|
||
// 提交表单数据
|
||
if (type === 'publish') {
|
||
// 调用发布接口
|
||
addInfo(form.value).then(response => {
|
||
rotation(response.data.id);
|
||
});
|
||
} 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 => {
|
||
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();
|
||
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;
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.navbarcenter {
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
}
|
||
|
||
.bgc {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
background: linear-gradient(-180deg, #c9f6f5, #ffffff);
|
||
position: fixed;
|
||
top: 0rpx;
|
||
left: 0rpx;
|
||
|
||
}
|
||
|
||
.cardz {
|
||
margin-left: 32rpx;
|
||
margin-right: 32rpx;
|
||
|
||
.titleInfo {
|
||
margin-top: 40rpx;
|
||
|
||
.xian {
|
||
margin-top: 32rpx;
|
||
height: 2rpx;
|
||
border-radius: 1rpx 1rpx 1rpx 1rpx;
|
||
background: #ffffff;
|
||
}
|
||
}
|
||
|
||
.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: #c9f6f5;
|
||
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>
|