sooka_consult_uniapp/pages/knowledge/knowledgeForm.vue

<template>
	<uni-section title="新增知识库" type="line">
		<view class="example">
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="rules" :modelValue="customFormData" label-align="center">
				<uni-forms-item label="标题" required name="titleName">
					<uni-easyinput v-model="customFormData.titleName" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="正文" required name="textDetails">
					<!-- <uni-easyinput v-model="customFormData.textDetails" placeholder="请输入正文" /> -->
					<mp-html :content="html" />
				</uni-forms-item>
				<uni-forms-item label="图片" required name="url">
					<upload :imgArr="imgUrlList" :fileSize="1" :limit="3" @updateImg="updateImg" />
				</uni-forms-item>
				<uni-forms-item label="是否热门" required name="integral">
					<switch v-model="customFormData.popular" />
				</uni-forms-item>
				<uni-forms-item label="付费积分" required name="integral">
					<uni-number-box v-model="customFormData.integral" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('customForm')">提交</button>
		</view>
	</uni-section>
</template>

<script>
	import {
		addKnowledge
	} from "@/api/knowledge/knowledge";
	import upload from '../../components/upload/index.vue'
	import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'
	export default {
		components: {
			upload,
			mpHtml
		},
		data() {
			return {
				html: '<div>Hello World!</div>',
				// 基础表单数据
				baseFormData: {
					titleName: '',
					textDetails: '',
					integral: '',
					popular: '',
					url: []
				},
				// 校验规则
				rules: {
					titleName: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					textDetails: {
						rules: [{
							required: true,
							errorMessage: '正文不能为空'
						}]
					}
				},
				imgUrlList: [],
				customFormData: {},
			}
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.rules)
		},
		created() {},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					if (res) {
						if (this.imgUrlList != null && this.imgUrlList != [] && this.imgUrlList.length > 1) {
							uni.showToast({
								title: '图片只能上传一张'
							})
						} else {
							this.customFormData.imgUrlList = this.imgUrlList.join(',')
							addKnowledge(this.customFormData).then(response => {
								this.$modal.msgSuccess('提交成功');
								this.customFormData = {
									...this.baseFormData
								};
								this.imgUrlList = [];
								uni.navigateTo({
									url: '../knowledge/knowledge'
								});
							}).catch(err => {
								console.log('err', err);
							})
						}
					}
				})
			},
			updateImg(imgUrlList) {
				this.imgUrlList = imgUrlList;
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

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

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>