!7 论坛交流页面样式完善 以及 接口调试

Merge pull request !7 from Sky_ID/lwh

src/assets/css/common.css

@@ -7,8 +7,15 @@
 .breadcrumb {
     margin: 2vw 0;
     font-size: 1.1rem;
-}
 
+}
+.edit-content{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 17vw 3vw;
+    text-align: center;
+}
 /* 面板 */
 .content {
     display: flex;
@@ -34,6 +41,13 @@
     float: left;
     margin: 2vw;
 }
+.card-content-left {
+    text-align: left;
+    display: block;
+    position: relative;
+    float: left;
+    margin: 1vw 1.5vw;
+}
 .card-img {
     position: relative;
     float: left;
@@ -41,10 +55,6 @@
     height: auto; 
   }
 
-.content-button{
-    margin: 2vw 24vw 15px;
-    text-align: right;
-}
 /* 分割线 */
 .el-divider {
     width: 95%;

src/components/Header.vue

@@ -50,7 +50,7 @@ export default {
     return {
       banner: require("@/assets/logo/banner.jpg"),
       osredmLogo: require("@/assets/logo/osredmLogo.svg"),
-      activeIndex: "home",       /* 启动默认显示页 */
+      activeIndex: "",       /* 启动默认显示页 */
 
       userName: "",
       userPass: "",
@@ -119,6 +119,13 @@ export default {
     // 返回红山开源
     backOsredm(){
       window.location.href='https://www.osredm.com'
+    },
+
+    // 获取路由path 得到当前页
+    getPath(){
+
+      var path = this.$route.path
+      this.activeIndex = path.split("/")[2]
     }
   },
 
@@ -127,7 +134,7 @@ export default {
       this.userName = sessionStorage.getItem("name");
       this.userPass = sessionStorage.getItem("pass");
       this.userAvatar = require("@/assets/logo/user.jpg");
-
+      this.getPath()
       /* var userRank = sessionStorage.getItem("rank");
       if (userRank == 1) {
         this.rankIf = true;

src/pages/Chat/Chat.vue

@@ -1,15 +1,18 @@
 <template>
-  <div> 
+  <div v-loading="contentLoading" element-loading-background="rgb(255, 255, 255)">
 
-    <div class="content-button">
+    <div class="content-button" >
-      <el-button plain class="edit-button">编辑</el-button>
+      <el-button plain class="edit-button" @click="goToEdit">编辑</el-button>
     </div>
 
-    <div class="content">
+    <div class="content" >
       <div class="white"></div>
       <div class="card">
-        <el-image :src="chat" class="card-img"/> 
+
-        <div class="card-content">
+          <el-image :src="chat" class="flot-img"/>
+
+        <div class="card-content-left">
+          <h3>交流互动</h3>
           <div>dadasdadsad</div>
           <div>dsvdsvsdvsdvds</div>
         </div>
@@ -17,15 +20,15 @@
       
       <div class="card">
         <div class="chat-link">
-          <div class="chat-link">
+          <div class="chat-link" style="cursor: pointer">
             <el-image :src="chat_link1" class="img-link"/>
             <div class="chat-link">参赛资讯</div>
           </div>
-          <div class="chat-link">
+          <div class="chat-link" style="cursor: pointer">
             <el-image :src="chat_link2" class="img-link"/>
             <div class="chat-link">选手交流</div>
           </div>
-          <div class="chat-link">
+          <div class="chat-link" style="cursor: pointer">
             <el-image :src="chat_link3" class="img-link"/>
             <div class="chat-link">专家答疑</div>
           </div>
@@ -37,12 +40,70 @@
 </template>
 
 <script>
+import pageUtils from "@/utils/pageUtils";
+import {Message} from "element-ui";
+
 export default {
-  name: "Chat"
+  name: "Chat",
+  data(){
+    return{
+      chat:'/api/files/chat-img.png',
+      chat_link1:'/api/files/chat-icon.png',
+      chat_link2:'/api/files/chat-icon.png',
+      chat_link3:'/api/files/chat-icon.png',
+      contentLoading: true,
+      loadingBg:'#FFF'
+    }
+  },
+  methods:{
+    initPage(){
+      pageUtils.checkComp(this.$router,this.$route.params.compId,this.$api)
+      this.$api.getPageData(this.$route.params.compId,'chat').then((res) => {
+        console.log(res)
+        //先判断 该页面是否展示
+        if (res.data.show) {
+          this.chat_link1 = res.data.logoOne
+          this.chat_link2 = res.data.logoTwo
+          this.chat_link3 = res.data.logoThree
+          this.chat = res.data.imgUrl
+          this.contentLoading = false
+        }else {
+          Message.warning("该页面不存在")
+          this.$router.push({
+            path: '/404'
+          });
+        }
+
+      })
+    },
+    goToEdit(){
+      // 跳转至编辑页面
+      pageUtils.openPage(this.$router,"/" + this.$route.params.compId + "/chatEdit")
+    }
+  },
+  mounted() {
+    this.initPage()
+  },
+  created() {
+
+  }
 }
 </script>
 
 <style scoped>
+.flot-img{
+  /*margin-top: -50px;*/
+  padding: 1vw;
+  position: relative;
+  float: left;
+  margin-top: -70px;
+  margin-left: 20px;
+  margin-bottom: 20px;
+  width:35vw;
+  height: auto;
+  box-shadow: inset 0 3px 8px rgba(219,227,255,.7)
+
+}
 
 .white {
   height: 66px;
@@ -51,10 +112,13 @@ export default {
 .chat-link {
   display: flex;
   margin: 1vw auto;
+  align-items: center;
+
 }
 .img-link {
-  width: 25%; 
+  width: auto;
-  height: auto; 
+  height: 3vw;
+  padding: 0.5vw;
 }
 
 </style>

src/pages/Chat/ChatEdit.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="edit-content">
+    <el-breadcrumb class="breadcrumb" separator="/">
+      <el-breadcrumb-item :to="{ path: '/' + this.$route.params.compId +'/chat' }">交流互动</el-breadcrumb-item>
+      <el-breadcrumb-item>编辑</el-breadcrumb-item>
+    </el-breadcrumb>
+    <mavon-editor :ishljs="true" v-model="data" @change="change"/>
+    <div class="button-group">
+      <el-button type="primary" @click="submit">提交</el-button>
+      <el-button>取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChatEdit",
+  data(){
+    return{
+      data: "",
+      html:""
+    }
+  },
+  methods:{
+    change(value,render){
+      this.html = render
+    },
+    submit(){
+      console.log(this.data)
+      console.log(this.html)
+
+    }
+  }
+}
+</script>
+
+<style src="@/assets/css/common.css" scoped>
+
+
+</style>
+<style>
+.button-group{
+  margin-top: 50px;
+}
+
+</style>

src/pages/Home/Home.vue

@@ -2,7 +2,7 @@
 
   <div>
     <div class="content-button">
-      <el-button  plain class="edit-button">编辑</el-button>
+      <el-button  plain>编辑</el-button>
     </div>
 
     <div class="content">

src/pages/Home/HomeEdit.vue

@@ -1,32 +1,32 @@
-<template>
+<template>
-  <div class="content">
+  <div class="edit-content">
-    <el-breadcrumb class="breadcrumb" separator="/">
+    <el-breadcrumb class="breadcrumb" separator="/">
-      <el-breadcrumb-item :to="{ path: '/home' }">赛事首页</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/' + this.$route.params.compId + '/home' }">赛事首页</el-breadcrumb-item>
-      <el-breadcrumb-item>编辑</el-breadcrumb-item>
+      <el-breadcrumb-item>编辑</el-breadcrumb-item>
-    </el-breadcrumb>
+    </el-breadcrumb>
-    <mavon-editor :ishljs="true" v-model="data" @save="save"/>
+    <mavon-editor :ishljs="true" v-model="data" @save="save"/>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-export default {
+export default {
-  name: "HomeEdit",
+  name: "HomeEdit",
-  data(){
+  data(){
-    return{
+    return{
-      data: ""
+      data: ""
-    }
+    }
-  },
+  },
-  methods:{
+  methods:{
-    save(value,render){
+    save(value,render){
-      // value是markdown格式
+      // value是markdown格式
-      // render是html格式
+      // render是html格式
-      console.log(value)
+      console.log(value)
-      console.log(render)
+      console.log(render)
-    }
+    }
-  }
+  }
-}
+}
-</script>
+</script>
-
+
-<style src="@/assets/css/common.css" scoped>
+<style src="@/assets/css/common.css" scoped>
-
+
 </style>

src/utils/http/interface.js

@@ -32,10 +32,18 @@ export const getComp = data => {
     })
 };
 
+export const getPageData = (compId,page) => {
+    return axios({
+        url: '/comp/getPageData/'+ compId + '/' + page,
+        method: 'get',
+    })
+};
+
 // 默认全部倒出
 // 根据需要进行
 export default {
     query,
     mock,
-    getComp
+    getComp,
+    getPageData
 }