添加关于我们可配置项

src/api/about.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 获取关于我们
+export function getOne(params) {
+  return request({
+    url: '/aboutUs/getOne',
+    params
+  });
+}
+
+// 添加/更新关于我们
+export function aboutUsAdd(data) {
+  return request({
+    url: '/aboutUs/add',
+    method: 'post',
+    data
+  });
+}

src/router/dynamicRoutes.js

@@ -13,6 +13,7 @@ import customerService from './modules/customerService';
 import feedback from './modules/feedback';
 import settings from './modules/settings';
 import rotation from './modules/rotation';
+import aboutUs from './modules/aboutUs';
 
 export const DynamicRoutes = [
   // 政策管理
@@ -31,6 +32,8 @@ export const DynamicRoutes = [
   feedback,
   // 轮播管理
   rotation,
+  // 关于我们
+  aboutUs,
   // 系统设置
   settings
 ];

src/router/modules/aboutUs.js

@@ -0,0 +1,17 @@
+import Layout from '@/layout';
+// 关于我们
+const nestedRouter = {
+  path: '',
+  component: Layout,
+  redirect: 'index',
+  children: [
+    {
+      path: 'about',
+      component: resolve => require(['@/views/about/index'], resolve),
+      name: 'about',
+      meta: { title: '关于我们', icon: 'tree' }
+    }
+  ]
+};
+
+export default nestedRouter;

src/views/about/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <el-form
+        style="width:50%"
+        :model="ruleForm"
+        ref="ruleForm"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="首页图片" prop="pic">
+          <multi-upload v-model="selectProductPics" :maxCount="1"></multi-upload>
+          <span style="color:#999">● 建议上传614*345分辨率的照片</span>
+        </el-form-item>
+        <el-form-item label="标题" prop="title">
+          <el-input
+          placeholder="请输入标题"
+          maxlength="27"
+          show-word-limit
+          v-model="ruleForm.title">
+        </el-input>
+        </el-form-item>
+        <el-form-item label="内容" prop="textWord">
+          <el-input
+            type="textarea"
+            maxlength="210"
+            show-word-limit
+            :autosize="{ minRows: 2, maxRows: 4}"
+            placeholder="请输入内容"
+            v-model="ruleForm.textWord">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="更多" prop="evenMore">
+          <editor v-model="ruleForm.evenMore" :min-height="192" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getOne,aboutUsAdd } from '@/api/about';
+import MultiUpload from '@/components/Upload/multiUpload';
+import Editor from '@/components/Editor';
+export default {
+   components: {
+    MultiUpload,
+    Editor
+  },
+  data() {
+    return {
+      ruleForm: {
+        pic: '',
+        title: '',
+        textWord: '',
+        evenMore: '',
+      },
+      rules: {
+        pic: [{ required: true, message: '请上传首页图片', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        textWord: [{ required: true, message: '请输入内容', trigger: 'blur' }],
+        evenMore: [{ required: true, message: '请输入更多详情', trigger: 'blur' }],
+      }
+    };
+  },
+  computed: {
+    //主图和画册图片
+    selectProductPics: {
+      get: function() {
+        let pics = [];
+        if (
+          this.ruleForm.pic === undefined ||
+          this.ruleForm.pic == null ||
+          this.ruleForm.pic === ''
+        ) {
+          return pics;
+        }
+        pics.push(this.ruleForm.pic);
+        if (
+          this.ruleForm.albumPics === undefined ||
+          this.ruleForm.albumPics == null ||
+          this.ruleForm.albumPics === ''
+        ) {
+          return pics;
+        }
+        let albumPics = this.ruleForm.albumPics.split(',');
+        for (let i = 0; i < albumPics.length; i++) {
+          pics.push(albumPics[i]);
+        }
+        return pics;
+      },
+      set: function(newValue) {
+        if (newValue == null || newValue.length === 0) {
+          this.ruleForm.pic = null;
+          this.ruleForm.albumPics = null;
+        } else {
+          this.ruleForm.pic = newValue[0];
+          // this.ruleForm.picList = newValue;
+          this.ruleForm.albumPics = '';
+          if (newValue.length > 1) {
+            for (let i = 1; i < newValue.length; i++) {
+              this.ruleForm.albumPics += newValue[i];
+              if (i !== newValue.length - 1) {
+                this.ruleForm.albumPics += ',';
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    getData() {getOne
+      getOne().then(res=>{
+        this.ruleForm = res.data
+      })
+    },
+    submitForm(formName){
+      this.$refs[formName].validate(valid=>{
+        if(valid){
+          aboutUsAdd(this.ruleForm).then(res=>{
+            this.msgSuccess(res.message)
+          })
+        }
+      })
+    },
+  },
+  created() {
+    this.getData();
+  }
+};
+</script>