talk_appAmin/pages/activity/publish.vue

227 lines
6.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>
<view class="cardz">
<view class="titleInfo">
<up-input placeholder="输入活动标题~5~20个字" v-model="title" border="none" maxlength="20" fontSize="34rpx"
color="#C0C0C0" clearable></up-input>
<view class="xian"></view>
</view>
<view class="contentInfo">
<up-textarea v-model="content" placeholder="输入活动内容
活动图片最多可发布两张
输入准确定位可以更好提供活动信息奥!安全指南:请勿发布带有个人信息(如:住址)" count border="none" height="270" maxlength="500"
placeholderStyle="color: #c0c0c0;font-size: 30rpx; background:none;"></up-textarea>
</view>
<view class="cardzfile">
<fileUpload v-model="fileList1" :fileTypeInfo="fileTypeInfo1" :limit="2"></fileUpload>
</view>
</view>
<view class="cardx">
<up-cell-group :border="false">
<up-cell :isLink="true" :center="true" @click="startTime">
<template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext1" :src="tu52" style="width: 30rpx; height: 32rpx;"></image>
<image v-else :src="tu522" style="width: 30rpx; height: 32rpx;"></image>
<span v-if="showtext1" >请选择活动开始时间</span>
<span v-else class="text2">{{parseTime(StartTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</span>
<up-datetime-picker :show="showStartTime" v-model="newData"
:modelValue="newData"
@confirm="confirm1"
@cancel="cancel"
mode="datetime"></up-datetime-picker>
</template>
</up-cell>
<up-cell :isLink="true" :center="true" @click="showEndTime =!showEndTime ">
<template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext2" :src="tu53" style="width: 30rpx; height: 32rpx;"></image>
<image v-else :src="tu532" style="width: 30rpx; height: 32rpx;"></image>
<span v-if="showtext2">请选择活动结束时间</span>
<span v-else class="text2"> {{parseTime(EndTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</span>
<up-datetime-picker :show="showEndTime" v-model="newData" @confirm="confirm2"
:modelValue="newData"
@cancel="cancel"
mode="datetime"></up-datetime-picker>
</template>
</up-cell>
<up-cell :border="false" :isLink="true" :center="true">
<template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext3" :src="tu51" style="width: 30rpx; height: 32rpx;"></image>
<image v-else :src="tu512" style="width: 30rpx; height: 32rpx;"></image>
<span>添加活动具体位置</span>
</template>
</up-cell>
</up-cell-group>
</view>
<view class="cardxx">
<up-button color="#C9F6F5" size="large" shape="circle" @click="publish"><span
class="fbText">发布</span></up-button>
<view style="width: 26rpx;height: 80rpx;"></view>
<up-button color="#F8F8E3" size="large" shape="circle" @click="draft" style="margin-left: 26rpx;"><span
class="cgText">存草稿</span></up-button>
</view>
</template>
<script setup>
import fileUpload from '../common/file/fileUpload'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance,computed } 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 fileList1 = ref([])
const fileTypeInfo1 = ref('image')
const bgColor = ref('');
bgColor.value = 'rgba(170, 0, 0, 0)'
const showStartTime = ref(false);
const showEndTime = 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())
onLoad((options) => {
console.log("页面参数:", options.id);
})
const leftClick = () => {
proxy.$tab.navigateBack(1)
}
const draft = () => {
console.log("存草稿");
}
const publish = () => {
console.log("发布");
}
const startTime = (e) => {
showStartTime.value = !showStartTime.value
}
const confirm1 = (e) => {
console.log(e);
showtext1.value = false;
StartTime.value = e.value
showStartTime.value = false
}
const confirm2 = (e) => {
console.log(e);
showtext2.value = false;
EndTime.value = e.value
showEndTime.value = false
}
const cancel = (e) => {
showStartTime.value = false
showEndTime.value = false
}
</script>
<style lang="scss">
.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;
z-index: -1;
}
.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;
}
.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;
.fbText {
font-weight: 400;
font-size: 30rpx;
color: #FBFBFB !important;
}
.cgText {
font-weight: 400;
font-size: 30rpx;
color: #999999 !important;
}
}
.text2{
margin-left: 12rpx;
font-weight: 400;
font-size: 30rpx;
text-align: left;
color: #C9F6F5 !important;
}
</style>