yb5.1 init

src/api/question.js

@@ -0,0 +1,76 @@
+/**
+ * 问答模块
+ */
+ import {get,post} from './http'
+
+ /**
+ * 问答列表
+ * @param chart_permission_id
+ * @param reply_status 0-全部 2-待回答 3-已回答
+ */
+  export const apiQuestionList=params=>{
+    return get('/community/question/list',params)
+}
+/**
+ * FICC品种权限
+ */
+ export const apiOptionList=params=>{
+    return get('/company/permission/tree',params)
+}
+/**
+ * 研究方向分组列表 
+ */
+export const apiOptiongroupList = params=>{
+    return get('/community/question/research_group',params)
+}
+/**
+ * 发布提问
+ * @param question_content
+ */
+ export const apipubAsk=params=>{
+    return post('/community/question/ask',params)
+}
+/**
+ * 问答列表数量统计
+ */
+ export const apiBarTotal=params=>{
+    return get('/community/question/list/total',params)
+}
+
+/**
+ * 发布回答
+ * @param question_id 
+ * @param audio_list 
+ */
+ export const apiReplayAsk=params=>{
+    return post('/community/question/reply',params)
+}
+
+/**
+ * 问答详情
+ * @param question_id 
+ */
+ export const apigetQuestion=params=>{
+    return get('/community/question/detail',params)
+}
+/**
+ * 我的-未读数
+ */
+ export const apigetUnread=params=>{
+    return get('/community/question/unread',params)
+}
+/**
+ * 问答已读(批量)
+ * @param question_ids
+ */
+export const apiSetRead = params=>{
+    return post('/community/question/reply/read',params)
+}
+/**
+ * 点击音频次数
+ * @param community_question_audio_id
+ * @param source_agent 1：小程序，2：小程序 pc 3:弘则研究公众号，4:web pc
+ */
+export const apiCountAudioClick = params=>{
+    return post('/community/question/audio/log',params)
+}

src/layout/component/Aside.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { reactive, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute,useRouter } from "vue-router";
 const route = useRoute();
+const router= useRouter()
 
 let activePath = ref("/report/index");
 watch(
@@ -13,7 +14,13 @@ watch(
     immediate: true,
   }
 );
-
+const submenuEvent = (index)=>{
+  console.log(index)
+  if(index==6){
+    //展开第一项
+    router.push('/question/list')
+  }
+}
 const menuList = reactive([
   {
     MenuId: 1,
@@ -35,19 +42,36 @@ const menuList = reactive([
     path: "/activity/list",
     icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
     children: null,
+  },{
+    MenuId: 6,
+    name: "问答",
+    path: "/question/list",
+    icon_path: new URL('../../assets/leftNav/question-s.png', import.meta.url).href,
+    children: [
+      {
+        MenuId:6.1,
+        name:'问答社区',
+        path:'/question/list'
+      },{
+        MenuId:6.2,
+        name:'我的问答',
+        path:'/question/mylist'
+      }
+    ],
   }
 ]);
 </script>
 
 <template>
   <div class="aside-wrap">
-    <el-menu router :default-active="activePath" unique-opened text-color="#333" active-text-color="#F3A52F" class="el-menu-wrap">
+    <el-menu router :default-active="activePath" unique-opened @open="submenuEvent"
+      text-color="#333" active-text-color="#F3A52F" class="el-menu-wrap">
       <template v-for="menu in menuList">
         <el-menu-item :index="menu.path" :key="menu.MenuId" v-if="!menu.children">
           <img class="menu-icon" :src="menu.icon_path" alt="" />
           <span class="menu-text">{{ menu.name }}</span>
         </el-menu-item>
-        <!-- <el-sub-menu :index="menu.MenuId + ''" :key="menu.MenuId" v-else>
+        <el-sub-menu :index="menu.MenuId + ''" :key="menu.MenuId+1" v-else>
           <template #title>
             <img class="menu-icon" :src="menu.icon_path" alt="" />
             <span class="menu-text">{{ menu.name }}</span>
@@ -55,7 +79,7 @@ const menuList = reactive([
           <el-menu-item v-for="child in menu.children" :key="child.MenuId" :index="child.path" style="text-align: center">
             {{ child.name }}
           </el-menu-item>
-        </el-sub-menu> -->
+        </el-sub-menu>
       </template>
     </el-menu>
   </div>

src/router/index.js

@@ -224,6 +224,36 @@ const routes=[
       }
     ]
   },
+  //问答模块
+  {
+    path: "/question",
+    name: "Question",
+    redirect:'/question/list',
+    component: () => import("@/layout/Index.vue"),
+    meta: {
+      title:"问答"
+    },
+    children: [
+      {
+        path: "list",
+        name: "QuestionList",
+        component: () => import("@/views/question/List.vue"),
+        meta: {
+          title: "问答社区",
+          keepAlive:true,
+          isRoot:true
+        }
+      },{
+        path: "mylist",
+        name: "QuestionMyList",
+        component: () => import("@/views/question/MyList.vue"),
+        meta: {
+          title: "我的问答",
+          isRoot:true
+        }
+      }
+    ]
+  },
 
   // 用户模块
   {

src/views/question/List.vue

@@ -0,0 +1,218 @@
+<script setup>
+import{
+  apiOptiongroupList
+}from '@/api/question'
+import{ref} from "vue"
+let optionList = ref([]) //分组列表
+// 获取分组列表
+const getOptionList =async ()=>{
+  const res = await apiOptiongroupList()
+  if(res.code===200){
+   optionList.value = res.data||[]
+  }
+}
+getOptionList()
+</script>
+
+<template>
+  <div class="question-wrap">
+      <!-- 筛选框 -->
+      <div class="top-nav-wrap">
+        <div class="flex first-nav">
+          <div class="nav-move-box move-left"></div>
+          <div class="nav-move-box move-right"></div>
+          <div 
+            :class="['item', item.research_group_name == selectFirstType && 'item-active']" 
+            v-for="item in optionList" 
+            :key="item.research_group_id" 
+          >{{ item.research_group_name }}</div>
+        </div>
+       <!--  <div class="sub-nav">
+            <span 
+              :class="['sub-item', item.chart_permission_id == selectSubType && 'sub-active']" 
+              v-for="item in subTypeList.slice(0,6)" 
+              :key="item.chart_permission_id" 
+              @click="clickSubType(item)"
+            >{{ item.chart_permission_name }}</span>
+            <el-popover
+              :width="500"
+              trigger="click"
+            >
+              <template #reference>
+                <img v-if="subTypeList.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
+              </template>
+              <template #default>
+                <div class="flex top-nav-filter-box">
+                  <div 
+                      :class="['item',item.chart_permission_id == selectSubType&&'active']" 
+                      v-for="item in subTypeList.slice(6)" 
+                      :key="item.chart_permission_id"
+                      @click="clickSubType(item)"
+                  >{{item.chart_permission_name}}</div>
+                </div>
+              </template>
+            </el-popover>
+        </div> -->
+      </div>
+      <div class="question-list">
+        <div class="question-item">
+          <div class="question-info">
+            <span class="label">苯乙烯</span>
+            疫情下全球苯乙烯市场有什么动荡?
+          </div>
+          <div class="question-time">
+            提问时间：2022.02.02
+          </div>
+          <div class="question-audio">
+            <div class="audio-icon">播放</div>
+            <div class="audio-pic"></div>
+            <div class="audio-time">02:30</div>
+          </div>
+
+        </div>
+        <div class="question-item">
+          <div class="question-info">
+            <span class="label">苯乙烯</span>
+            疫情下全球苯乙烯市场有什么动荡?
+          </div>
+          <div class="question-time">
+            提问时间：2022.02.02
+          </div>
+          <div class="question-audio">
+            <div class="audio-icon">播放</div>
+            <div class="audio-pic"></div>
+            <div class="audio-time">02:30</div>
+          </div>
+
+        </div>
+      </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.question-wrap{
+  border-left: 1px solid #F2F2F2;
+  border-right: 1px solid #F2F2F2;
+  .top-nav-wrap {
+      position: fixed;
+      top: 60px;
+      z-index: 99;
+      background-color: #fff;
+      padding-top: 30px;
+      padding-bottom: 12px;
+      width: 100%;
+      box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.0400);
+      .first-nav {
+        width: calc(100vw - 500px);
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+        &::-webkit-scrollbar{
+          display: none;
+        }
+        .item {
+          width: 140px;
+          height: 40px;
+          flex-shrink: 0;
+          background: #F6F6F6;
+          border-radius: 20px;
+          text-align: center;
+          line-height: 40px;
+          font-size: 16px;
+          margin-right: 30px;
+          cursor: pointer;
+          &:hover {
+            background: #FFFBF5;
+            color: #F3A52F;
+            border: 1px solid #F3A52F;
+            box-shadow: 0px 6px 7px 1px #FFF7EB;
+          }
+        }
+        .item-active {
+          background: #FFFBF5;
+          color: #F3A52F;
+          border: 1px solid #F3A52F;
+          box-shadow: 0px 6px 7px 1px #FFF7EB;
+        }
+        .see-more{
+          height: 20px;
+          flex-shrink: 0;
+          color: #f3a52f;
+          font-size: 16px;
+          position: relative;
+          top: 10px;
+          margin-left: 30px;
+          cursor: pointer;
+          z-index: 1;
+          &::after{
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background-image: url('../../assets/icon-more.png');
+            background-size: cover;
+            position: relative;
+            top: 2px;
+            left: 5px;
+          }
+        }
+        @media screen and (max-width: 1350px){
+          .item{
+            width: 90px;
+            height: 30px;
+            line-height: 30px;
+            margin-right: 15px;
+            font-size: 14px;
+          }
+          .see-more{
+            font-size: 14px;
+            margin-left: 10px;
+            top: 5px;
+          }
+        }
+      }
+
+      .sub-nav {
+        margin-top: 30px;
+        overflow-y: hidden;
+        .sub-item {
+          flex-shrink: 0;
+          margin-right: 30px;
+          font-size: 16px;
+          color: #666666;
+          cursor: pointer;
+        }
+        .sub-active {
+          color: #F3A52F;
+        }
+      }
+      
+    }
+  .question-list{
+    margin-top: 130px;
+    .question-item{
+      padding:25px 30px;
+      border-bottom: 1px solid #F2F2F2;
+      .question-info{
+        display: flex;
+        color: #333333;
+        font-weight: 600;
+        span.label{
+          display: inline-block;
+          width:68px;
+          height:24px;
+          line-height: 24px;
+          text-align: center;
+          background-color:#333333 ;
+          color:#F3A52F;
+          font-size: 12px;
+          font-weight: normal;
+          margin-right:14px;
+          border-radius: 34px;
+        }
+      }
+    }
+  }
+}
+</style>
+

src/views/question/MyList.vue

@@ -0,0 +1,12 @@
+<script setup>
+</script>
+
+<template>
+  <div>
+      我的问答
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>