xiaoyou-h5/pages/mine/creat_news.vue

<template>
	<view class="real-name">
		<!-- 	<view class="history">
			历史发布
		</view> -->
		<view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				新闻标题
			</view>
			<view class="right" @click="goEdit('新闻标题', 1)">
				{{form.title ? form.title : '去填写'}}
				<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				封面图
			</view>
			<view class="right" @click="goEdit('封面图', 2)">
				{{form.cover ? '已上传' : '去上传(最佳尺寸比例：92*76)'}}
				<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				新闻内容
			</view>
			<view class="right" @click="goEdit('新闻内容',3)">
				{{form.body ? '已填写' : '点击填写'}}
				<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				新闻类型
			</view>
			<view class="right" @click="is_shape = true">
				{{form.category_id?form.category_id == 1?'新闻资讯':'校园风采':'请选择'}}
				<u-icon name="arrow-right" size="20" margin-left="20"></u-icon>
			</view>
			<u-picker v-model="is_shape" mode="selector" :range="selector" @confirm="shape_choose"></u-picker>
		</view>
		<view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				新闻简介
			</view>
			<!-- 	<view class="right jianjie">
				<u-input v-model="form.short_description" input-align="right" style="display: inline-block;" placeholderStyle="color: #282828;"/>
				<u-icon class="icon" name="arrow-right" size="20"></u-icon>
			</view> -->
		</view>
		<view class="item item_j">
			<view class="right jianjie">
				<u-input v-model="form.short_description" :border="true" type="textarea" />
			</view>
		</view>
		
		<!-- <view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				新闻标签
			</view>
			<view class="right">
				<u-input v-model="form.tags" input-align="right" style="display: inline-block;" placeholderStyle="color: #282828;"/>
				<u-icon class="icon" name="arrow-right" size="20"></u-icon>
			</view>
		</view> -->
		<view class="item">
			<view class="label">
				<view class="star">
					*
				</view>
				新闻状态
			</view>
			<u-radio-group v-model="form.status" class="radio">
				<u-radio name="1">
					正常
				</u-radio>
				<u-radio name="0">
					暂停
				</u-radio>
			</u-radio-group>
		</view>

		<!-- 	<view class="item">
			<view class="label">
				活动地点
			</view>
			<view class="right">
				{{form.class_address}}
			</view>
		</view> -->



		<u-popup v-model="show" mode="bottom" height="100%">
			<view class="form">
				<view class="back" @click="show=!show">
					<u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
				</view>
				<u-navbar :is-back="false" title="填写信息"></u-navbar>
				<view class="title">
					{{input_name}}
				</view>
				<!-- 富文本编辑 -->
				<view class="" v-if="item==3">
					<!-- <quill-editor class="editor" v-model="messages[index]" ref="myQuillEditor" @blur="onEditorBlur"
						@focus="onEditorFocus" @ready="onEditorReady">
					</quill-editor> -->
					<jinEdit placeholder="请输入内容..." @editOk="editOk" uploadFileUrl="/api/common/upload" :html="form.body">
					</jinEdit>

					<!-- <VueEditor class="edit" v-model="form.body" /> -->
				</view>
				<!-- 选择时间 -->
				<view class="input" v-if="item==4" @click="show1=!show1">
					{{form.published_at? form.published_at : '点击选择时间'}}
					<u-picker mode="time" v-model="show1" :params="params" @confirm="changeDate"></u-picker>
				</view>
				<!-- 上传图片 -->
				<view class="upload_image1" v-if="item==2&&image_edit==0">
					<!-- <u-upload ref="uUpload" :action="action" :auto-upload="true" :form-data='imageDate'
						:file-list="fileList" @on-success='uploadSuccess'></u-upload> -->
						<u-upload :action="action" max-count="1" :file-list="fileList" :form-data='imageDate'
							@on-success='uploadSuccess'></u-upload>
							<text>(最佳尺寸比例：92*76)</text>
				</view>
				
				
					
				<view class="upload_image" v-if="item==2 && image_edit==1">
					<u-image width="100%" height="300rpx" :src="uploadImage"></u-image>
				</view>

				<view class="input" v-if="item==1">
					<u-input :placeholder=' "请输入" + input_name' v-model="value" />
				</view>

				<view class="complate" v-if="item==2 && image_edit==1" @click="reload">
					重新上传
				</view>
				<view class="complate1" v-if="item==2" @click="complate">
					完成
				</view>
				<view class="complate" v-if="item!==2 && item!=3" @click="complate">
					完成
				</view>

			</view>
		</u-popup>
		<view class="buttom" @click="release">
			提交审核
		</view>
	</view>
</template>

<script>
	import jinEdit from '../../components/jin-edit/jin-edit.vue';
	export default {
		components: {
			jinEdit
		},
		data() {
			return {
				imageHeader: {
					file_type: 'img',
					type: 'news'
				},
				messages: [],
				index: 0,
				show: false,
				input_name: '',
				placeholder: '开始输入...',
				value: '',
				selector: [
					'新闻资讯', '校园风采'
				],
				is_shape: false,
				form: {

					title: '',
					published_at: '',
					class_address: '', //上课地点
					status: 1,
					category_id: '',
					body: '',
					sort: 0,
					category_id: '',
					is_message: 0
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				show1: false,
				item: '',
				action: '', //封面图上传地址
				imageDate: {
					file_type: 'img',
					type: 'news'
				}, //上传图片携带参数
				fileList: [],
				uploadImage: '',
				image_edit: 0,
				tab_name: ''
			}
		},
		onLoad(options) {
			// this.form.category_id = options.category_id
			// this.tab_name = options.tab_name

		},
		onShow() {
		
			this.action = '/api/common/upload'
			// this.category()
		},
		methods: {
			// 点击发布
			editOk(res) {
				console.log(res.html);
				this.form.body = res.html
				this.show = false
			},
			//选择picker中的值
			shape_choose(e) {
				this.form.category_id = e + 1
				console.log(this.from, '22')
			},
			
			// saveEditor(e) {
			// 	console.log(e, '保存富文本')
			// 	this.form.body = e.html
			// 	this.show = !this.show

			// },

			// hideEditor() {
			// 	this.form.body = ''
			// 	this.show = !this.show
			// },

			// uploadImg() {
			// 	this.action = '/api/common/upload'
			// },
			// onEditorReady() {
			// 	// #ifdef MP-BAIDU
			// 	this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
			// 	// #endif

			// 	// #ifdef APP-PLUS || H5 ||MP-WEIXIN
			// 	uni.createSelectorQuery().select('#editor').context((res) => {
			// 		this.editorCtx = res.context
			// 	}).exec()
			// 	// #endif
			// },
			// undo() {
			// 	this.editorCtx.undo()
			// },
			//添加通知公告
			release() {
				if (!this.form.title) {
					uni.showToast({
						title: '请填写新闻标题',
						icon: 'none'
					})
					return
				}else if(!this.form.cover){
					uni.showToast({
						title: '请上传封面图',
						icon: 'none'
					})
					return
				}
				 else if (!this.form.body) {
					uni.showToast({
						title: '请填写新闻内容',
						icon: 'none'
					})
					return
				} else if (!this.form.category_id) {
					uni.showToast({
						title: '请选择新闻类型',
						icon: 'none'
					})
					return
				} else if (!this.form.status) {
					uni.showToast({
						title: '请选择新闻状态',
						icon: 'none'
					})
					return
				} 
				else if (!this.form.short_description) {
					uni.showToast({
						title: '请填写新闻简介',
						icon: 'none'
					})
					return
				}
				// else if (!this.form.tags) {
				// 	uni.showToast({
				// 		title: '请填写新闻标签',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.form.organization_id = this.vuex_user.organization_id
				this.$u.post('/page/organization-store-new', this.form).then(res => {
					console.log(res, '提及扫')
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.reLaunch({
								url: 'news_success'
							})
						}, 1500)
					}
				})
			},
			//获取配置项
			// category() {
			// 	this.$u.get('/base/setting-key', {
			// 		key: 'CLASS_ADDRESS'
			// 	}).then(res => {
			// 		console.log(res, 'ppp')
			// 		this.form.class_address = res.data.value
			// 	})
			// },
			//上传图片成功
			uploadSuccess(data) {
				console.log(data, 'ppp')
				this.form.cover = data.data.id
				this.uploadImage = data.data.url
				this.image_edit = 1
			},

			onRemove() {
				console.log('pooo')
				this.uploadImage = ''
			},
			changeDate(e) {
				let day = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				console.log(day)
				this.form.published_at = day
			},
			//重新上传
			reload() {
				this.image_edit = 0
				console.log('---------')
				this.fileList = [],
					this.uploadImage = ''
			},
			complate() {
				console.log('++++++++++')
				let item = this.item
				switch (item) {
					case 1:
						this.form.title = this.value
						break
					case 2:
						this.image_edit = 1
						break
				}
				console.log(this.title)
				this.show = !this.show
			},
			goEdit(name, item) {
				if (this.uploadImage) {
					this.fileList.push({
						url: this.uploadImage
					})
				}
				this.item = item
				console.log(item)
				this.show = true
				this.input_name = name
				this.textarea = ''
				this.value = ''
			},
			//发布
			// release() {
			// 	uni.navigateTo({
			// 		url: './success'
			// 	})
			// }

		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding: 16px 0;
		background-color: #fff;
	}
	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 400px;
		background-color: #CCCCCC;
	}

	.edit {
		height: 400px;
	}

	button {
		margin-top: 10px;
	}

	.upload_image1 {
		// height: 100px;
		// width: 100px;
		// overflow: hidden;
		margin-left: 10px;
		text{
			// display: block;
			// text-align: center;
			// width: 100%;
			color: #606266;
		}
	}

	.upload_image {
		width: 90%;
		margin: 0 auto;
	}

	.complate,
	.complate1 {
		width: 50%;
		margin: 0 auto;
		margin-top: 20%;
		line-height: 44px;
		text-align: center;
		height: 44px;
		background: #79573D;
		opacity: 1;
		border-radius: 24px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}

	.complate1 {
		margin-top: 30px;
	}

	.real-name {
		padding: 0 16px;

		.history {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			height: 30px;
			line-height: 30px;
			text-align: right;
			color: #282828;
			opacity: 1;
		}

		.item {
			display: flex;
			align-items: center;
			height: 46px;
			line-height: 46px;
			margin-left: 10px;
			position: relative;

			.label {
				flex: 0 0 30%;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 1;
			}
			.star {
					position: absolute;
					left: -10px;
					top: 16px;
					color: red;
				}
			.right {
				flex: 1;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #282828;
				opacity: 0.42;
				text-align: right;
			}
			
			.jianjie {
				display: flex;
				height: 100px;
				// align-items: center;
				.icon {
					margin-top: 3px !important;
				}
			}

			.radio {
				display: inline-block;
				text-align: right;
				width: 100%;
			}
		}
		.item_j{
			height: 100px;
		}

		.form {
			position: relative;

			.back {
				position: absolute;
				left: 10px;
				top: 0px;
				width: 30px;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 9999;
				// background: #18B566;
			}

			.title {
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				font-weight: 550;
			}

			.input {
				margin: 0 20px;
				height: 40px;
				line-height: 40px;
				border-bottom: solid 1px rgba(175, 175, 175, .2);
			}

			.input1 {
				margin: 0 20px;
				height: 40px;
				line-height: 40px;
				border: solid 1px rgba(175, 175, 175, .2);
			}

		}

		.item1 {
			.dec {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #AFAFAF;
				opacity: 1;
				padding-bottom: 10px;
				border-bottom: solid 1px rgba(175, 175, 175, .2);
			}
		}

		.buttom {
			width: 229px;
			height: 56px;
			line-height: 56px;
			background: #79573D;
			text-align: center;
			border-radius: 28px;
			margin: 0 auto;
			margin-top: 40%;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			opacity: 1;
		}

	}

	// .ql-container.ql-snow{
	//     height: px2rem(100);
	//   }

	//  .ql-editor.ql-blank{
	//     height: px2rem(50);
	//   }
</style>