更新

package.json

@@ -18,7 +18,8 @@
     "vue": "^2.6.11",
     "vue-meta": "^2.3.4",
     "vue-router": "^3.3.1",
-    "vuex": "^3.1.3"
+    "vuex": "^3.1.3",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",

src/components/wang-editor.vue

@@ -0,0 +1,87 @@
+<template>
+  <div ref="editor" style="text-align:left;"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+      editor: undefined,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/chat/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+    this.$set(this, `editor`, editor);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+    setContent() {
+      this.editor.txt.clear();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.w-e-text-container {
+  height: 200px !important;
+}
+</style>

src/layout/achievement/seminar.vue

@@ -23,7 +23,7 @@ export default {
     menuIndex: '0',
     color: '#054982',
     src: require('@/assets/achieveCenter.png'),
-    liebiaoList: [{ title: '平台建设' }, { title: '项目成果' }, { title: '知识产权' }, { title: '科技支撑' }],
+    liebiaoList: [{ title: '平台建设' }, { title: '项目成果' }, { title: '知识产权' }, { title: '科技合作' }],
   }),
   created() {},
   computed: {},
@@ -35,7 +35,7 @@ export default {
         this.menuIndex = index;
       } else if (title == '知识产权') {
         this.menuIndex = index;
-      } else if (title == '科技支撑') {
+      } else if (title == '科技合作') {
         this.menuIndex = index;
       }
       this.$emit('leftdaohang', title);

src/layout/demand/fabuList.vue

@@ -36,27 +36,18 @@
               <el-input type="textarea" v-model="form.desc"></el-input>
             </el-form-item>
 
-            <el-form-item label="合作方式">
-              <el-checkbox-group v-model="form.type">
-                <el-checkbox label=" 技术转让" name="type"></el-checkbox>
-                <el-checkbox label="农业" name="type"></el-checkbox>
-                <el-checkbox label="社会发展" name="type"></el-checkbox>
-                <el-checkbox label="医药健康" name="type"></el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-
             <el-form-item label="合作方式">
               <el-radio-group v-model="form.resource">
                 <el-radio label="技术转让"></el-radio>
-                <el-radio label="社会发展"></el-radio>
-                <el-radio label="农业"></el-radio>
-                <el-radio label="医药健康"></el-radio>
+                <el-radio label="技术服务"></el-radio>
+                <el-radio label="技术许可"></el-radio>
+                <el-radio label="技术融资"></el-radio>
+                <el-radio label="其他"></el-radio>
               </el-radio-group>
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" @click="onSubmit">立即创建</el-button>
-              <el-button>取消</el-button>
+              <el-button type="primary" @click="onSubmit">发布</el-button>
             </el-form-item>
           </el-form>
         </el-col>
@@ -69,26 +60,17 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'fabuList',
-  props: {},
+  props: { form: null },
   components: {},
   data: function() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: '',
-      },
-    };
+    return {};
   },
   created() {},
   methods: {
     onSubmit() {
       console.log('submit!');
+
+      this.$emit('submit', this.form);
     },
   },
   computed: {

src/layout/index/jobs.vue

@@ -2,11 +2,17 @@
   <div id="jobs">
     <el-col :span="24" class="maintoplefttitle">
       <div style="border-bottom: 1px solid  #ccc;height: 40px;">
-        <span></span><span>工作动态</span><span><i class="el-icon-more"></i></span>
+        <span></span><span>工作动态</span><span @click="morejob()"><i class="el-icon-more"></i></span>
       </div>
     </el-col>
     <el-col :span="24">
-      <el-col :span="24" class="leftcontext" v-for="(item, index) in jobsList" :key="index">
+      <el-col
+        :span="24"
+        class="leftcontext"
+        v-for="(item, index) in jobsList"
+        :key="index"
+        @click.native="$router.push({ path: '/news/listDetail', query: { col_name: '工作动态', id: 'id', display: '1' } })"
+      >
         <el-col :span="20" class="title"> <span></span>{{ item.title }} </el-col>
         <el-col :span="4" class="date">{{ item.date }}</el-col>
       </el-col>
@@ -22,7 +28,11 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    async morejob() {
+      this.$router.push({ path: '/news/listDetail', query: { col_name: '工作动态', display: '0' } });
+    },
+  },
 };
 </script>
 

src/layout/index/notice.vue

@@ -2,11 +2,17 @@
   <div id="notice">
     <el-col :span="24" class="maintoplefttitle">
       <div style="border-bottom: 1px solid #ccc;height: 40px;">
-        <span></span><span>通知公告</span><span><i class="el-icon-more"></i></span>
+        <span></span><span>通知通告</span><span @click="mortongzhi()"><i class="el-icon-more"></i></span>
       </div>
     </el-col>
     <el-col :span="24">
-      <el-col :span="24" class="leftcontext" v-for="(item, index) in noticeList" :key="index">
+      <el-col
+        :span="24"
+        class="leftcontext"
+        v-for="(item, index) in noticeList"
+        :key="index"
+        @click.native="$router.push({ path: '/news/listDetail', query: { col_name: '通知通告', id: 'id', display: '1' } })"
+      >
         <el-col :span="18" class="title"> <span></span>{{ item.title }} </el-col>
         <el-col :span="6" class="date">{{ item.date }}</el-col>
       </el-col>
@@ -24,7 +30,11 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    async mortongzhi() {
+      this.$router.push({ path: '/news/listDetail', query: { col_name: '通知通告', display: '0' } });
+    },
+  },
 };
 </script>
 

src/layout/index/service.vue

@@ -2,11 +2,17 @@
   <div id="service">
     <el-col :span="24" class="maintoplefttitle">
       <div style="border-bottom: 1px solid #ccc;height: 40px;">
-        <span></span><span>科级合作</span><span><i class="el-icon-more"></i></span>
+        <span></span><span>科技合作</span><span @click="morekeji()"><i class="el-icon-more"></i></span>
       </div>
     </el-col>
     <el-col :span="24">
-      <el-col :span="24" class="leftcontext" v-for="(item, index) in serviceList" :key="index">
+      <el-col
+        :span="24"
+        class="leftcontext"
+        v-for="(item, index) in serviceList"
+        :key="index"
+        @click.native="$router.push({ path: '/achievement/index', query: { col_name: '科技合作', id: 'id', display: '1' } })"
+      >
         <el-col :span="16" class="title"> <span></span>{{ item.title }} </el-col>
         <el-col :span="8" class="date">{{ item.date }}</el-col>
       </el-col>
@@ -24,7 +30,11 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    morekeji() {
+      this.$router.push({ path: '/achievement/index', query: { col_name: '科技合作', display: '0' } });
+    },
+  },
 };
 </script>
 

src/layout/index/technology.vue

@@ -2,11 +2,17 @@
   <div id="technology">
     <el-col :span="24" class="maintoplefttitle">
       <div style="border-bottom: 1px solid #ccc;height: 40px;">
-        <span></span><span>技术问答</span><span><i class="el-icon-more"></i></span>
+        <span></span><span>技术问答</span><span @click="morekeji()"><i class="el-icon-more"></i></span>
       </div>
     </el-col>
     <el-col :span="24">
-      <el-col :span="24" class="leftcontext" v-for="(item, index) in jishuList" :key="index">
+      <el-col
+        :span="24"
+        class="leftcontext"
+        v-for="(item, index) in jishuList"
+        :key="index"
+        @click.native="$router.push({ path: '/communication/list', query: { col_name: '技术问答', id: 'id', display: '1' } })"
+      >
         <el-col :span="18" class="title"> <span></span>{{ item.title }} </el-col>
         <el-col :span="6" class="date">{{ item.date }}</el-col>
       </el-col>
@@ -24,7 +30,11 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    morekeji() {
+      this.$router.push({ path: '/communication/list', query: { col_name: '技术问答', display: '0' } });
+    },
+  },
 };
 </script>
 

src/router/index.js

@@ -70,10 +70,9 @@ const routes = [
     component: () => import('../views/demand/demand.vue'),
   },
 
-  //成果展示
   {
     path: '/achievement/index',
-    name: '平台建设',
+    meta: { title: '成果展示', subSite: true },
     component: () => import('../views/achievement/index.vue'),
   },
 

src/views/achievement/index.vue

@@ -159,7 +159,7 @@ export default {
   },
   data: () => ({
     displays: '0',
-    columnName: '平台建设',
+    columnName: '',
     total: 1,
     details: {},
     list: [
@@ -179,9 +179,20 @@ export default {
       content: '信息内容',
     },
   }),
-  created() {},
-  computed: {},
+  created() {
+    this.search();
+  },
+  computed: {
+    col_name() {
+      return this.$route.query.col_name;
+    },
+  },
   methods: {
+    async search() {
+      this.columnName = this.col_name;
+      console.log(this.columnName);
+    },
+
     async detailBtn(id) {
       console.log(id);
 

src/views/communication/parts/demand.vue

@@ -12,12 +12,15 @@
           <span>{{ item.date }}</span>
         </el-col>
       </el-col>
-      <el-col :span="24" class="anniu"> <el-button type="primary" round @click="$router.push({ path: '/demand/demand' })"> 我要发布</el-button></el-col>
+      <el-col :span="24" class="anniu">
+        <el-button type="primary" v-if="user.type == 3" round @click="$router.push({ path: '/demand/demand' })"> 我要发布</el-button></el-col
+      >
     </el-col>
   </div>
 </template>
 
 <script>
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'demand',
   props: {
@@ -28,7 +31,7 @@ export default {
     src: require('@/assets/exchange.png'),
   }),
   created() {},
-  computed: {},
+  computed: { ...mapState(['user']) },
   methods: {},
 };
 </script>

src/views/communication/parts/industryDetail.vue

@@ -1,32 +1,61 @@
 <template>
-  <div id="newsDetail">
-    <el-row>
-      <el-col :span="24" class="info">
-        <h3>{{ details.title }}</h3>
-        <div>
-          <span>文章来源:{{ details.source }}</span>
-          <span>时间:{{ details.date }}</span>
+  <div id="eduDetail" style="background-color: #F5F5F54f;">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="detailmain">
+          <div class="detailtop">
+            <span>{{ detailinfo.title }}</span>
+          </div>
+          <div class="detailtopleft">
+            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+          </div>
+          <div class="detailimage" v-if="detailinfo.picture">
+            <img :src="detailinfo.picture" class="detailimg" />
+          </div>
+
+          <div class="detailcontext">
+            <p v-html="detailinfo.content"></p>
+          </div>
         </div>
-        <p>{{ details.content }}</p>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+// const { mapActions: news } = createNamespacedHelpers('news');
 export default {
-  name: 'newsDetail',
+  name: 'eduDetail',
   props: {
-    details: null,
+    // newsid: null,
   },
   components: {},
-  data: function() {
-    return {};
+  data: () => {
+    return {
+      img: {
+        top_bg: require('@/assets/222.png'),
+        logo: require('@/assets/222.png'),
+        img1: require('@/assets/222.png'),
+      },
+      detailinfo: { title: '标题', publish_time: '2020-03-04', orgin: '计算中心', content: '内容', picture: require('@/assets/222.png') },
+    };
+  },
+  created() {
+    // this.search();
+  },
+  methods: {
+    // ...news(['fetch']),
+    // async search() {
+    //   console.log(this.newsid);
+    //   const res = await this.fetch(this.newsid);
+    //   this.$set(this, `detailinfo`, res.data);
+    // },
   },
-  created() {},
-  methods: {},
   computed: {
+    id() {
+      return this.$route.query.id;
+    },
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
@@ -39,22 +68,44 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.info {
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.detailmain {
+  min-height: 500px;
+}
+
+.detailtop {
+  padding: 20px 0px;
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: normal;
+  text-align: left;
+  margin: 0;
+  text-align: center;
+  color: #005293;
+}
+
+.detailtopleft {
+  text-align: center;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-size: 16px;
+  color: #666666;
+}
+
+.detailimage {
+  text-align: center;
+  padding: 20px 0 0 0;
+}
+
+.detailimg {
+  width: 300px;
+  height: 300px;
+}
+
+.detailcontext {
   padding: 20px 0;
-  h3 {
-    font-size: 24px;
-    color: #005293;
-    text-align: center;
-  }
-  div {
-    text-align: center;
-    border-bottom: 1px solid #ccc;
-    padding: 0 0 40px 0;
-    margin: 0 0 20px 0;
-    span {
-      color: #666666;
-      padding: 0 10px;
-    }
-  }
 }
 </style>

src/views/communication/parts/scienceDetail.vue

@@ -1,32 +1,66 @@
 <template>
-  <div id="newsDetail">
-    <el-row>
-      <el-col :span="24" class="info">
-        <h3>{{ details.title }}</h3>
-        <div>
-          <span>文章来源:{{ details.source }}</span>
-          <span>时间:{{ details.date }}</span>
+  <div id="eduDetail" style="background-color: #F5F5F54f;">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="detailmain">
+          <div class="detailtop">
+            <span>{{ detailinfo.title }}</span>
+          </div>
+          <div class="detailtopleft">
+            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+          </div>
+          <div class="detailimage" v-if="detailinfo.picture">
+            <img :src="detailinfo.picture" class="detailimg" />
+          </div>
+          <div class="detailVideo">
+            <video :src="detailinfo.filepath" controls="controls">
+              您的浏览器不支持 video 标签。
+            </video>
+          </div>
+          <div class="detailcontext">
+            <p v-html="detailinfo.content"></p>
+          </div>
         </div>
-        <p>{{ details.content }}</p>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+// const { mapActions: news } = createNamespacedHelpers('news');
 export default {
-  name: 'newsDetail',
+  name: 'eduDetail',
   props: {
-    details: null,
+    // newsid: null,
   },
   components: {},
-  data: function() {
-    return {};
+  data: () => {
+    return {
+      img: {
+        top_bg: require('@/assets/222.png'),
+        logo: require('@/assets/222.png'),
+        img1: require('@/assets/222.png'),
+      },
+      detailinfo: { title: '标题', publish_time: '2020-03-04', orgin: '计算中心', content: '内容', picture: require('@/assets/222.png') },
+      videoUrl: require('@/assets/video.mp4'),
+    };
+  },
+  created() {
+    // this.search();
+  },
+  methods: {
+    // ...news(['fetch']),
+    // async search() {
+    //   console.log(this.newsid);
+    //   const res = await this.fetch(this.newsid);
+    //   this.$set(this, `detailinfo`, res.data);
+    // },
   },
-  created() {},
-  methods: {},
   computed: {
+    id() {
+      return this.$route.query.id;
+    },
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
@@ -39,22 +73,57 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.info {
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.detailmain {
+  min-height: 500px;
+}
+
+.detailtop {
+  padding: 20px 0px;
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: normal;
+  text-align: left;
+  margin: 0;
+  text-align: center;
+  color: #005293;
+}
+
+.detailtopleft {
+  text-align: center;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-size: 16px;
+  color: #666666;
+}
+
+.detailimage {
+  text-align: center;
+  padding: 20px 0 0 0;
+}
+.detailVideo {
+  float: left;
+  width: 100%;
+  text-align: center;
+  height: 200px;
+  overflow: hidden;
+  margin: 20px 0;
+}
+.detailVideo video {
+  height: 200px;
+  width: 50%;
+  border: 1px dashed #ccc;
+}
+
+.detailimg {
+  width: 300px;
+  height: 200px;
+}
+
+.detailcontext {
   padding: 20px 0;
-  h3 {
-    font-size: 24px;
-    color: #005293;
-    text-align: center;
-  }
-  div {
-    text-align: center;
-    border-bottom: 1px solid #ccc;
-    padding: 0 0 40px 0;
-    margin: 0 0 20px 0;
-    span {
-      color: #666666;
-      padding: 0 10px;
-    }
-  }
 }
 </style>

src/views/communication/parts/technologyDetail.vue

@@ -1,32 +1,70 @@
 <template>
-  <div id="newsDetail">
-    <el-row>
-      <el-col :span="24" class="info">
-        <h3>{{ details.title }}</h3>
-        <div>
-          <span>文章来源:{{ details.source }}</span>
-          <span>时间:{{ details.date }}</span>
+  <div id="detail" style="background-color: #F5F5F54f;">
+    <div class="w_0100">
+      <div class="w_1200">
+        <div class="detailmain">
+          <div class="detailtop">
+            <span>{{ detailinfo.title }}</span>
+          </div>
+          <div class="detailtopleft">
+            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+          </div>
+
+          <div class="detailimage" v-if="detailinfo.picture">
+            <img :src="detailinfo.picture" class="detailimg" />
+          </div>
+          <div class="detailcontext">
+            <p v-html="detailinfo.content"></p>
+          </div>
+          <div class="development" v-if="detailinfo.column_name == '专家问诊'">
+            <p>功能开发中</p>
+            <p>功能实现流程：<span>问诊记录展示</span>-<span>在线咨询</span>-<span>专家在线问诊</span></p>
+          </div>
         </div>
-        <p>{{ details.content }}</p>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+// const { mapActions: news } = createNamespacedHelpers('news');
 export default {
-  name: 'newsDetail',
-  props: {
-    details: null,
-  },
+  name: 'detail',
+  props: {},
   components: {},
-  data: function() {
-    return {};
+  data: () => {
+    return {
+      img: {
+        top_bg: require('@/assets/222.png'),
+        logo: require('@/assets/222.png'),
+        img1: require('@/assets/222.png'),
+      },
+
+      detailinfo: {
+        title: '标题',
+        publish_time: '2020-03-04',
+        orgin: '计算中心',
+        picture: require('@/assets/222.png'),
+        content: 'context',
+      },
+    };
+  },
+  created() {
+    // this.search();
+  },
+  methods: {
+    // ...news(['fetch']),
+    // async search() {
+    //   const res = await this.fetch(this.newsid);
+    //   this.$set(this, `detailinfo`, res.data);
+    //   console.log(res.data);
+    // },
   },
-  created() {},
-  methods: {},
   computed: {
+    id() {
+      return this.$route.query.id;
+    },
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
@@ -39,22 +77,63 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.info {
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.detailmain {
+  min-height: 500px;
+}
+
+.detailtop {
+  padding: 20px 0px;
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: normal;
+  text-align: left;
+  margin: 0;
+  text-align: center;
+  color: #005293;
+}
+
+.detailtopleft {
+  text-align: center;
+  padding: 0 0 10px 0;
+  border-bottom: 1px solid #ccc;
+  font-size: 16px;
+  color: #666666;
+}
+
+.detailimage {
+  text-align: center;
+  padding: 20px 0 0 0;
+}
+
+.detailimg {
+  width: 300px;
+  height: 300px;
+}
+
+.detailcontext {
   padding: 20px 0;
-  h3 {
-    font-size: 24px;
-    color: #005293;
+  min-height: 370px;
+}
+.development {
+  height: 50px;
+  border: 1px dashed red;
+  padding: 0 30px;
+  p:first-child {
     text-align: center;
+    font-size: 18px;
+    color: red;
+    font-weight: bold;
   }
-  div {
+  p:last-child {
     text-align: center;
-    border-bottom: 1px solid #ccc;
-    padding: 0 0 40px 0;
-    margin: 0 0 20px 0;
-    span {
-      color: #666666;
-      padding: 0 10px;
-    }
+    height: 25px;
+    line-height: 25px;
+    font-size: 16px;
+    font-weight: bold;
   }
 }
 </style>

src/views/communication/parts/topicDetail.vue

@@ -1,32 +1,121 @@
 <template>
-  <div id="newsDetail">
+  <div id="semDetail">
     <el-row>
-      <el-col :span="24" class="info">
-        <h3>{{ details.title }}</h3>
-        <div>
-          <span>文章来源:{{ details.source }}</span>
-          <span>时间:{{ details.date }}</span>
-        </div>
-        <p>{{ details.content }}</p>
-      </el-col>
+      <div class="w_1200">
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="two">
+            <el-col :span="24" class="twoTop">
+              <el-col :span="3" class="left">
+                浏览次数：1
+              </el-col>
+              <el-col :span="21" class="right"> [专题] {{ detail.title }} </el-col>
+            </el-col>
+            <el-col :span="24" class="twoInfo">
+              <el-col :span="24" class="list">
+                <el-col :span="3" class="left">
+                  <el-col :span="24" class="leftTop">
+                    会员名称
+                  </el-col>
+                  <el-col :span="24" class="leftDown">
+                    <el-image :src="squareImage"></el-image>
+                    <el-col :span="24" class="jobname">
+                      {{ detail.uname }}
+                    </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="21" class="right">
+                  <el-col :span="24" class="date">
+                    <i class="el-icon-user icon"></i>
+                    <span>文章发表于{{ detail.meta | getDate }}</span>
+                    <span>1楼</span>
+                  </el-col>
+                  <el-col :span="24" class="info">
+                    <p v-html="detail.content"></p>
+                  </el-col>
+                  <el-col :span="24" class="jubao">
+                    <span>举报</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+                <el-col :span="3" class="left">
+                  <el-col :span="24" class="leftTop">
+                    会员名称
+                  </el-col>
+                  <el-col :span="24" class="leftDown">
+                    <el-image :src="squareImage"></el-image>
+                    <el-col :span="24" class="jobname">
+                      {{ item.uname }}
+                    </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="21" class="right">
+                  <el-col :span="24" class="date">
+                    <i class="el-icon-user icon"></i>
+                    <span>评论发布于{{ item.meta | getDate }}</span>
+                    <span>{{ index + 2 }}楼</span>
+                  </el-col>
+                  <el-col :span="24" class="info">
+                    <p v-html="item.content"></p>
+                  </el-col>
+                  <el-col :span="24" class="jubao">
+                    <span>举报</span>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="twoPage">
+              <p>
+                <span> <page :limit="limit" :total="total" position="right" @query="search"></page></span>
+              </p>
+            </el-col>
+            <el-col :span="24" class="twoInput">
+              <el-col :span="3" class="left"> </el-col>
+              <el-col :span="21" class="right">
+                <el-col :span="24" class="waneditor">
+                  <wang-editor v-model="form.content" ref="editor"></wang-editor>
+                </el-col>
+                <el-col :span="24" class="btn">
+                  <el-button type="primary" @click="submit">发表评论</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </div>
     </el-row>
   </div>
 </template>
 
 <script>
+import wangEditor from '@/components/wang-editor.vue';
+import page from '@/components/pagination.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+// const { mapActions: comment } = createNamespacedHelpers('comment');
+// const { mapActions: news } = createNamespacedHelpers('news');
 export default {
-  name: 'newsDetail',
+  name: 'semDetail',
   props: {
-    details: null,
+    newsid: null,
   },
-  components: {},
-  data: function() {
-    return {};
+  components: { page, wangEditor },
+  data: () => ({
+    squareImage: require('@/assets/222.png'),
+    detail: {},
+    list: [{ name: 'dsadas' }],
+    total: 0,
+    form: {},
+    inputInfo: '',
+    limit: 4,
+  }),
+  created() {
+    // this.search();
+    // this.searchinfo();
   },
-  created() {},
-  methods: {},
   computed: {
+    id() {
+      return this.$route.query.id;
+    },
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
@@ -35,26 +124,197 @@ export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  methods: {
+    // ...news(['fetch']),
+    // ...comment({ commentquery: 'query', commentCreate: 'create', commentUpdate: 'update' }),
+    // async searchinfo() {
+    //   let id = this.newsid;
+    //   console.log(id);
+    //   const res = await this.fetch(id);
+    //   this.$set(this, `detail`, res.data);
+    // },
+    // async search({ skip = 0, limit = this.limit, newsid = this.newsid } = { skip: 0, limit: this.limit }) {
+    //   let res = await this.commentquery({ skip, limit, newsid });
+    //   console.log(res);
+    //   this.$set(this, `list`, res.data);
+    //   this.$set(this, `total`, res.total);
+    // },
+    // async submit() {
+    //   if (!this.user.uid) {
+    //     this.$message.error('游客身份无法评论,请先登录');
+    //     return;
+    //   } else {
+    //     this.form.newsid = this.newsid;
+    //     this.form.uid = this.user.uid;
+    //     let data = this.form;
+    //     let res = await this.commentCreate(data);
+    //     console.log(res);
+    //     this.$checkRes(res, '评论成功', '评论失败');
+    //     this.search();
+    //   }
+    // },
+  },
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.info {
-  padding: 20px 0;
-  h3 {
-    font-size: 24px;
-    color: #005293;
-    text-align: center;
-  }
-  div {
-    text-align: center;
-    border-bottom: 1px solid #ccc;
-    padding: 0 0 40px 0;
-    margin: 0 0 20px 0;
-    span {
-      color: #666666;
-      padding: 0 10px;
-    }
-  }
+.w_1200 {
+  width: 95%;
+  margin: 0 auto;
+}
+.main {
+  float: left;
+  width: 100%;
+  min-height: 600px;
+  margin: 30px 0;
+}
+.main .one {
+  float: left;
+  width: 100%;
+  height: 160px;
+  margin: 0 0 30px 0;
+}
+.main .two {
+  float: left;
+  width: 100%;
+}
+.main .two .twoTop {
+  float: left;
+  width: 100%;
+  height: 60px;
+}
+
+.main .two .twoTop .left {
+  float: left;
+  height: 60px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 18px;
+  color: #00316e;
+  background: #a5d2f5;
+  border-bottom: 10px solid #044b79;
+}
+.main .two .twoTop .right {
+  float: left;
+  height: 60px;
+  line-height: 50px;
+  padding: 0 15px;
+  font-size: 20px;
+  color: #023658;
+  border-bottom: 10px solid #5096d2;
+}
+.main .two .twoInfo {
+  float: left;
+  width: 100%;
+}
+.main .two .twoInfo .left {
+  background: #5096d2;
+  border-bottom: 10px solid #044b79;
+}
+.main .two .twoInfo .left .leftTop {
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  color: #fff;
+  font-size: 22px;
+  border-bottom: 1px dashed #ccc;
+}
+.main .two .twoInfo .left .leftDown {
+  height: 420px;
+}
+.main .two .twoInfo .left .leftDown .el-image {
+  margin: 40px 18px;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+.main .two .twoInfo .left .leftDown .jobname {
+  text-align: center;
+  font-size: 22px;
+  color: #fffcae;
+}
+.main .two .twoInfo .right {
+  padding: 0 20px;
+}
+.main .two .twoInfo .right .date {
+  padding: 0 20px;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px dashed #ccc;
+}
+.main .two .twoInfo .right .date .icon {
+  font-size: 30px;
+  color: #b6dd59;
+}
+.main .two .twoInfo .right .date span:nth-child(2) {
+  font-size: 20px;
+  padding: 0px 10px;
+  position: relative;
+  top: -2px;
+}
+.main .two .twoInfo .right .date span:last-child {
+  font-size: 20px;
+  float: right;
+}
+.main .two .twoInfo .right .info {
+  height: 300px;
+  border: 2px solid #044b79;
+  border-radius: 10px;
+  margin: 30px 0;
+  padding: 20px;
+}
+.main .two .twoInfo .right .info p {
+  font-size: 20px;
+  overflow: hidden;
+  height: 260px;
+}
+.main .two .twoInfo .right .jubao {
+  height: 70px;
+  line-height: 60px;
+  border-top: 1px dashed #ff8b0f;
+  border-bottom: 10px solid #5096d2;
+}
+.main .two .twoInfo .right .jubao span {
+  float: right;
+  color: #ff0000;
+  font-size: 20px;
+}
+.main .two .twoPage {
+  margin: 20px 0;
+}
+.main .two .twoInput {
+  height: 270px;
+  border: 2px solid #5096d2;
+}
+.main .two .twoInput .left {
+  height: 266px;
+  background-color: #5096d2;
+}
+.main .two .twoInput .right {
+  padding: 20px 20px 0 20px;
+}
+/deep/.main .two .twoInput .right .waneditor .w-e-text-container {
+  height: 140px !important;
+}
+.main .two .twoInput .right .btn {
+  margin: 10px 0;
+}
+/deep/.main .two .twoInput .right .btn .el-button {
+  margin: 10px 0;
+}
+.pages {
+  float: right;
+  width: 100px;
 }
 </style>

src/views/demand/demand.vue

@@ -13,7 +13,7 @@
         <el-col :span="24" class="main">
           <div class="w_1200">
             <el-col :span="24" class="info">
-              <fabuList></fabuList>
+              <fabuList @submit="submit" :form="form"></fabuList>
             </el-col>
           </div>
         </el-col>
@@ -44,10 +44,14 @@ export default {
     fabuList,
   },
   data: function() {
-    return {};
+    return {
+      form: {},
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    submit() {},
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {