|
|
@@ -0,0 +1,135 @@
|
|
|
+<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>
|
bihuisong