<template><view class="wrap"><u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType"><u-form-item label="标题" class="label-left" style="margin-left:30rpx" prop="title"><u-input v-model="form.title" placeholder="请输入要输入的文章标题" /></u-form-item><u-form-item label="类别" class="label-left" style="margin-left:30rpx"><u-input type="select" v-model="form.cate" placeholder="请选择" @click="show = true"></u-input><u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select></u-form-item><!-- 控制富文本输入的逻辑 --><navigator url="../LevineHua-editor/LevineHua-editor" class="single"><u-form-item label="内容" prop="container"  class="label-left"><input placeholder="请输入内容" v-model="form.content" type="texarea" /></u-form-item></navigator><u-form-item label-position="top" class="label-left" label="封面图" prop="coverImage"><u-image v-if="form.coverImage!=''" width="188rpx" height="188rpx" @click="choose" :src="messimg"></u-image><view v-else @click="choose" style="width: 188rpx;height: 188rpx;background-color: #CCCCCC;display: flex;justify-content: center;align-items: center;"><u-icon name="plus"></u-icon></view></u-form-item><u-form-item label="开始时间" label-width="140" prop="startDate"  class="label-left"><u-input type="select" v-model="form.startDate" placeholder="请选择" @click="start_time_show = true"></u-input><u-picker mode="time" v-model="start_time_show" @confirm="confirm1" :params="params"></u-picker></u-form-item><u-form-item label="结束时间" label-width="140"  prop="endDate"  class="label-left"><u-input type="select" v-model="form.endDate" placeholder="请选择" @click="end_time_show = true"></u-input><u-picker mode="time" v-model="end_time_show" @confirm="confirm2" :params="params"></u-picker></u-form-item><!-- <u-picker mode="time" v-model="start_time_show" :params="params" @confirm="startTimeConfirm"></u-picker><u-picker mode="time" v-model="end_time_show" :params="params" @confirm="endTimeConfirm"></u-picker> --></u-form><u-button class="sub-btn" @click="submit">提交</u-button></view>
</template><script>/* 引入富文本编辑器 */import jinEdit from '@/components/jin-edit/jin-edit.vue';export default {/* 注册组件 */components: {jinEdit},data() {return {params: {year: true,month: true,day: true,hour: true,minute: true,second: true},messimg: '',/* 获取token值 */header1: {Authorization: this.vuex_token},/* 存储上传地址 */action1: '',show: false,//控制选择框显示end_time_show: false,//控制选择框显示start_time_show: false,form: {content:''},/* list的数据 */list: [{value: '市场动态',label: '市场动态'},{value: '市场党建',label: '市场党建'},{value: '通知公告',label: '通知公告'},{value: '生活窍门',label: '生活窍门'},{value: '健康饮食',label: '健康饮食'},{value: '家政服务',label: '家政服务'},{value: '街道服务',label: '街道服务'},],//提示errorType: ['message'],//验证rules: {title: [{required: true,message: '请输入姓名',trigger: 'blur',},{min: 3,max: 5,message: '姓名长度在3到5个字符',trigger: ['change', 'blur'],},],content: [{required: true,message: '请输入通知内容',trigger: ['change', 'blur'],},],},}},created() {/* "loginId": 0,"marketId": 0, */this.form.loginId = this.vuex_user.idthis.form.marketId = this.vuex_user.market_idconsole.log(this.vuex_token)var url = this.$u.http.config.baseUrl + '/uploadFile/file'console.log(url)this.action1 = url},methods: {changeList(val){console.log(1)console.log(val)},open() {this.show = true;},// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)confirm(e) {console.log(e);this.form.cate = e[0].value},confirm1(e) {let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.secondthis.form.startDate = date},confirm2(e) {console.log(e);let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.secondthis.form.endDate = date},submit() {this.$u.api.getPartyAdd(this.form).then(res => {console.log(res)uni.navigateTo({url:"../notice_notice_list/notice_notice_list"})})},/* 上传图片 */choose() {uni.chooseImage({success: (chooseImageRes) => {var tempFilePaths = chooseImageRes.tempFilePaths;uni.uploadFile({url: this.$u.http.config.baseUrl + '/uploadFile/file',filePath: tempFilePaths[0],header: {Authorization: this.vuex_token},name: 'file',success: (uploadFileRes) => {let data_res = JSON.parse(uploadFileRes.data)if (data_res.code == 200) {this.messimg = data_res.data;this.form.coverImage = data_res.data;console.log(this.messimg)}}});}});}}}
</script><style scoped lang="scss">.label-left{margin-left: 25rpx;}.sub-btn {width: 684rpx;height: 96rpx;background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);opacity: 1;border-radius: 66rpx;border: 0rpx;font-size: 36rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #FFFFFF;position: fixed;bottom: 18rpx;}.title-sm {background: #F7F7F7;width: 100%;padding: 23rpx 0rpx;}.wrap {padding: 30rpx;}.agreement {display: flex;align-items: center;margin: 40rpx 0;.agreement-text {padding-left: 8rpx;color: $u-tips-color;}}
</style>

运行结果