关于我们

src/api/website/aboutUs.js

+
+import fetch from 'utils/fetch';
+
+/**
+ * 编辑、新增关于我们
+ * @param query
+ */
+export function addUpdate(query) {
+  return fetch({
+    url: '/api/website/companyInfo/addUpdate',
+    method: 'post',
+    data: query
+  });
+}
+
+/**
+ * 关于我们-公司信息
+ */
+export function companyInfo() {
+  return fetch({
+    url: '/api/website/companyInfo/detail',
+    method: 'get'
+  });
+}

src/components/Kindeditor/index.vue

@@ -12,14 +12,16 @@
   </div>
 </template>
 
-<script>
-import 'kindeditor/kindeditor-all.js'
+<script type="javascript">
+// import 'kindeditor/kindeditor-all.js'
+import 'static/kindeditor-all.js' // 重写图片上传方法
 import 'kindeditor/lang/zh-CN.js'
 import 'kindeditor/themes/default/default.css'
 
+
 export default {
   name: 'kindeditor',
-  data () {
+  data() {
     return {
       editor: null,
       outContent: this.content
@@ -59,7 +61,7 @@ export default {
           'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
           'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
           'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
-          'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
+          'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
           'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
           'anchor', 'link', 'unlink', '|', 'about'
         ]

src/views/webSiteManagement/aboutUs/index.vue

@@ -13,18 +13,18 @@
       <div class="title">关于我们</div>
     </div>
     <div class="content">
-      <el-form ref="form" :model="form" label-width="180px">
-        <el-form-item label="*联系电话">
+      <el-form ref="form" :model="form" label-width="180px" :rules="rule">
+        <el-form-item label="联系电话" prop="phone">
           <el-col :span="12">
-              <el-input v-model="form.title" placeholder="请输入联系电话"></el-input>
+              <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
           </el-col>
         </el-form-item>
-        <el-form-item label="*邮箱">
+        <el-form-item label="邮箱" prop="email">
           <el-col :span="12">
               <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
           </el-col>
         </el-form-item>
-        <el-form-item label="*公司地址">
+        <el-form-item label="公司地址" prop="address">
           <el-col :span="12">
               <!-- <el-input v-model="form.address" placeholder="请输入公司地址"></el-input> -->
               <el-autocomplete style="width:100%;"
@@ -45,14 +45,14 @@
             </el-autocomplete>
           </el-col>
         </el-form-item>
-        <el-form-item label="">
+        <el-form-item label="" prop="lat">
           <div id="map-container">
 
           </div>
         </el-form-item>
-        <el-form-item label="*公司简介">
+        <el-form-item label="公司简介" prop="intro">
             <el-col :span="20">
-                <kind-editor id="editor_id" :content.sync="form.introduce" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
+                <kind-editor id="editor_id" :content.sync="form.intro" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
             </el-col>
         </el-form-item>
         <el-form-item>
@@ -64,9 +64,10 @@
   </div>
 </template>
 
-<script>
+<script type="javascript">
 import KindEditor from "@/components/Kindeditor";
 import loadBMap from '@/utils/loadBMap.js'
+import { addUpdate, companyInfo } from "api/website/aboutUs"
 export default {
   name: "AboutUs",
   components: {
@@ -75,11 +76,45 @@ export default {
   data() {
     return {
       form: {
-          title: '',
-          email: '',
-          address: '',
-          addrPoint: '',
-          introduce: ''
+        id: undefined,
+        phone: undefined, // 联系电话
+        email: undefined, // 邮箱
+        address: undefined, // 地址
+        lat: 23.12005,
+        lng: 113.30765,
+        intro: undefined // 简介
+      },
+      rule: {
+        phone: {
+          required: true,
+          message: "请输入电话",
+          trigger: "blur"
+        },
+        email: {
+          required: true,
+          message: "请输入邮箱",
+          trigger: "blur"
+        },
+        address: {
+          required: true,
+          message: "请输入地址",
+          trigger: "blur"
+        },
+        lng: {
+          required: true,
+          message: "请输入经纬度",
+          trigger: "blur"
+        },
+        lat: {
+          required: true,
+          message: "请输入经纬度",
+          trigger: "blur"
+        },
+        intro: {
+          required: true,
+          message: "请输入简介",
+          trigger: "blur"
+        },
       },
       map: '', //地图实例
       mk: '' //Marker实例
@@ -87,13 +122,13 @@ export default {
   },
   async mounted() {
     await loadBMap('gvQPveN9YrlPSgKUMPK2u2u2BA4yQFRm')
-    this.initMap()
+    this.getCompanyInfo() // 获取关于我们详情
   },
   methods: {
     initMap() {
       var that = this;
       this.map = new BMap.Map("map-container", {enableMapClick:false})  //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
-      var point = new BMap.Point(113.30765,23.12005);
+      var point = new BMap.Point(this.form.lng, this.form.lat);
       this.map.centerAndZoom(point,19)
 
       /** 设置图像标注并绑定拖拽标注结束后事件 */
@@ -139,7 +174,9 @@ export default {
         that.mk.setPosition(point) //重新设置标注的地理坐标
         that.map.panTo(point)  //将地图的中心点更改为给定的点
         that.form.address = res.address;  //记录该点的详细地址信息
-        that.form.addrPoint = point;  //记录当前坐标点
+        that.form.lat = point.lat
+        that.form.lng = point.lng
+        // that.form.addrPoint = point;  //记录当前坐标点
       })
     },
     /**
@@ -182,7 +219,9 @@ export default {
      */
     handleSelect(item) {
       this.form.address = item.address + item.title; //记录详细地址，含建筑物名
-      this.form.addrPoint = item.point; //记录当前选中地址坐标
+      // this.form.addrPoint = item.point; //记录当前选中地址坐标
+      this.form.lat = point.lat
+      this.form.lng = point.lng
       this.map.clearOverlays() //清除地图上所有覆盖物
       this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
       this.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
@@ -194,7 +233,59 @@ export default {
     afterChange () {
 
     },
+    /**
+     * 关于我们-信息
+     */
+    getCompanyInfo(){
+      companyInfo().then((res) => {
+        if(res.status == 200){
+          this.form = {
+            id: res.data.id,
+            phone: res.data.phone, // 联系电话
+            email: res.data.email, // 邮箱
+            address: res.data.address, // 地址
+            lng: parseFloat(res.data.lng), // 经纬度
+            lat: parseFloat(res.data.lat), // 经纬度
+            intro: res.data.intro // 简介
+          }
+        } else {
+          this.$notify({
+            title: "失败",
+            message: res.message,
+            type: "error",
+            duration: 2000
+          });
+        }
+        this.initMap()
+      });
+    },
+    /**
+     * 关于我们-数据保存
+     */
     onSubmit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          addUpdate(this.form).then((res) => {
+            if(res.status == 200){
+              this.$notify({
+                title: "成功",
+                message: '提交成功',
+                type: "success",
+                duration: 2000
+              });
+            } else {
+              this.$notify({
+                title: "失败",
+                message: res.message,
+                type: "error",
+                duration: 2000
+              });
+            }
+          });
+        } else {
+          return false;
+        }
+      });
       console.log('submit!');
     }
   },