travel-applet/pagesMy/article/add.vue

<template>
	<view class="main">
		<uni-forms class="form" ref="form" :rules="rules" :modelValue="form" label-width='90'>
			<uni-forms-item label="标题" required name="title">
				<uni-easyinput type="textarea" v-model="form.title" placeholder="请输入您的标题" />
			</uni-forms-item>
			<uni-forms-item label="类型" required name="type">
				<uni-data-select v-model="form.type" :localdata="typeList" @change="typechange">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="内容" required name="content">
				<editor style="width: 100%; padding: 10upx;" id="editor" :placeholder="placeholder"
					@input="editorChange" @ready="onEditorReady">
				</editor>
			</uni-forms-item>
			<uni-forms-item label="封面图片" required name="file">
				<upload class='upload' :list="form.file" name="file" :count="6" @uplSuc="uplSuc" @uplDel="uplDel">
				</upload>
			</uni-forms-item>
			<uni-forms-item label="是否启用" name="is_use">
				<uni-data-select v-model="form.is_use" :localdata="is_useList" @change="is_usechange">
				</uni-data-select>
			</uni-forms-item>
		</uni-forms>
		<button class="button" type="primary" @click="submit('form')">提交</button>
	</view>
</template>

<script>
	import moment from 'moment';
	import upload from '../../components/upload/index.vue';
	export default {
		components: {
			upload
		},
		data() {
			return {
				id: '',
				user: {},
				form: {
					file: []
				},
				// 校验规则
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入标题'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请输入类型'
						}]
					},
					file: {
						rules: [{
							required: true,
							errorMessage: '请上传封面图片'
						}]
					},
				},
				placeholder: '请输入内容',
				content: '',
				// 字典表
				typeList: [],
				is_useList: []
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			that.searchToken();
			await that.searchOther();
			that.search();
		},
		methods: {
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) that.$set(that, `user`, res);
				} catch (e) {
					uni.showToast({
						title: err.errmsg,
						icon: 'error',
						duration: 2000
					});
				}
			},
			async search() {
				const that = this;
				if (that.id) {
					const res = await that.$api(`/article/${that.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `form`, res.data)
					} else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
			// 类型
			typechange(type) {
				const that = this;
				that.$set(that.form, `type`, type);
			},
			// 是否使用
			is_usechange(is_use) {
				const that = this;
				that.$set(that.form, `is_use`, is_use);
			},
			onEditorReady() {
				const that = this
				uni.createSelectorQuery().select('#editor').context((res) => {
					that.editorCtx = res.context
					that.editorCtx.setContents({
						html: that.form.content,
						success: (res) => {
							// console.log(res)
						},
						fail: (res) => {
							// console.log(res)
						},
					})
				}).exec()
			},
			editorChange: function(e) {
				const that = this
				that.$set(that, `content`, e.detail.html)
			},
			// 图片上传
			uplSuc(e) {
				const that = this;
				that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.form[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.form, `${e.name}`, arr)
			},
			submit(ref) {
				const that = this;
				const form = that.form;
				that.$refs[ref].validate().then(async data => {
					let res;
					data.contact = that.user._id
					data.contact_name = that.user.name || that.user.nick_name
					data.create_time = moment().format('YYYY-MM-DD HH:mm:ss')
					data.status = '0'
					data.content = that.content
					if (form._id) res = await that.$api(`/article/${form._id}`, 'POST', data);
					else res = await that.$api(`/article`, 'POST', data);
					if (res.errcode == '0') {
						uni.showToast({
							title: '发布作品成功',
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			async searchOther() {
				const that = this;
				let res;
				// 查询类型
				res = await that.$api(`/dictData`, 'GET', {
					type: 'home_tabs',
					is_use: '0',
				})
				if (res.errcode == '0') {
					let typeList = []
					for (let val of res.data) {
						typeList.push({
							text: val.label,
							value: val.value
						})
					}
					that.$set(that, `typeList`, typeList);
				}
				// 是否启用
				res = await that.$api(`/dictData`, 'GET', {
					type: 'is_use',
					is_use: '0',
				})
				if (res.errcode == '0') {
					let is_useList = []
					for (let val of res.data) {
						is_useList.push({
							text: val.label,
							value: val.value
						})
					}
					that.$set(that, `is_useList`, is_useList);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 4vw;

		.form-item {
			display: flex;
			align-items: center;
		}

		#editor {
			width: 100%;
			height: 100px;
			border: 1px solid #F0F0F0;
		}


		.button {
			background-color: var(--f3CColor);
		}
	}
</style>