<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.id this.form.marketId = this.vuex_user.market_id console.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.second this.form.startDate = date }, confirm2(e) { console.log(e); let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second this.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>