1

admin/src/api/qa.js

@@ -9,13 +9,11 @@ export function login(data) {
 }
 
 // 获取子集列表
-export function getQaList(city_id) {
+export function getQaList(params) {
   return request({
     url: '/admin/qa/getQaList',
     method: 'get',
-    params: {
-      city_id
-    }
+    params: params
   })
 }
 

admin/src/router/index.js

@@ -184,6 +184,15 @@ export const asyncRoutes = [
       roles: ['order_index', 'editor']
     },
     children: [
+      {
+        path: 'problem',
+        component: () => import('@/views/qa/problem.vue'),
+        name: 'problem',
+        meta: {
+          title: 'QA常见问题',
+          roles: ['admin']
+        }
+      },
       {
         path: 'qa',
         component: () => import('@/views/qa/qa.vue'),

admin/src/views/qa/problem.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="problem">
+    <el-row>
+        <el-col :span="24">
+            <div class="problem_form">
+            <el-form :inline="true" ref="form" :model="dataForm" label-width="60px">
+                    <el-form-item label="关键字:">
+                        <el-input v-model="dataForm.keyword" placeholder="关键字" style="width: 400px;" class="filter-item" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="success" @click="onSubmit">查询</el-button>
+                    </el-form-item>
+                </el-form>
+        </div>
+        </el-col>
+    </el-row>
+    <div class="problem_container">
+        <div class="problem_left">
+            <div @click="handleQacityl(item.city_id)" class="btn" v-for="item in getQaCityList">{{ item.city_name }}</div>
+        </div>
+        <div class="problem_right">
+            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+                <li class="problem_right_container" v-for="item in getQaLists">
+                    <div class="title">
+                        <span v-html="item.title"></span>
+                        <el-button type="primary">下载图片</el-button>
+                        <el-button type="primary">下载行程</el-button>
+                    </div>
+                    <div class="desc" v-html="item.content"></div>
+                </li>
+            </ul>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getQaCityList, getQaList} from '@/api/qa'
+export default {
+    data() {
+        return {
+            getQaCityList:[],
+            getQaLists:[],
+            dataForm:{
+                keyword:'',
+                city_id:''
+            }
+        }
+    },
+    created() {
+        getQaCityList().then(res => {
+            console.log(res)
+            this.getQaCityList = res.data
+        })
+    },
+    methods: {
+        handleQacityl(val){
+            getQaList({city_id:val}).then(res => {
+                this.getQaLists = res.data.data
+            })
+        },
+        load(){
+            console.log('load')
+        },
+        onSubmit(){
+            getQaList(this.dataForm).then(res => {
+                this.getQaLists = res.data.data.map((item, index) => {
+                    if (this.dataForm.keyword) {
+                        let replaceReg = new RegExp(this.dataForm.keyword, "ig");
+                        let replaceString = `<span style="color: #fca104">${this.dataForm.keyword}</span>`;
+                        item.title = item.title.replace(replaceReg, replaceString);
+                        item.content = item.content.replace(replaceReg, replaceString);
+                    }
+                    return item
+                });
+            })
+            // this.getQaLists
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.problem{
+    .problem_form{
+        margin-top: 10px;
+        display: flex;
+        justify-content: center;
+    }
+    .problem_container{
+        display: flex;
+        // justify-content: space-between;
+        // margin-top: 20px;
+        .problem_left{
+            width: 10%;
+            background: #fff;
+            padding: 10px 20px;
+            // border-left: 1px solid #46a6ff;
+            .btn{
+                padding: 10px 20px;
+                cursor: pointer;
+                text-align: center;
+                background: #46a6ff;
+                border-radius: 10px;
+                & + .btn{
+                    margin-top: 10px;
+                }
+            }
+        }
+        .problem_right{
+            width: 100%;
+            background: #fff;
+            padding: 20px;
+            .problem_right_container{
+                // border: 1px solid #ccc;
+                & + .problem_right_container{
+                    margin-top: 20px;
+                }
+                .title{
+                    font-size: 20px;
+                    font-weight: 600;
+                    margin-bottom: 10px;
+                    color: #46a6ff;
+                    &>:nth-child(1){
+                        margin-right: 20px;
+                    }
+                }
+                .desc{
+                    font-size: 14px;
+                    color: #666;
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+}
+</style>