1

admin/src/views/qa/problem.vue

@@ -99,12 +99,12 @@ export default {
     }
     .problem_container{
         display: flex;
-        // justify-content: space-between;
-        // margin-top: 20px;
         .problem_left{
-            width: 10%;
+            width: 18%;
             background: #fff;
             padding: 10px 20px;
+            border-right: 1px solid #46a6ff;
+            height: calc(100vh - 154px);
             // border-left: 1px solid #46a6ff;
             .btn{
                 padding: 10px 20px;

admin/src/views/qa/qa.vue

@@ -49,16 +49,24 @@
           <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
         </el-form-item>
         <el-form-item label="QA内容">
-          <el-input v-model="anchors.content" :rows="6" style="height: 120px" type="textarea" placeholder="QA内容" />
+          <div class="mistake-content" v-for="(item, index) in anchors.qa_question">
+            <div class="mistake-left">
+              <div>副标题</div>
+              <div class="qa-desc">
+                <el-input style="width: 100px;margin-right: 10px;" v-model="item.sort" type="text" placeholder="序号" />
+                <el-input v-model="item.title" type="text" placeholder="请输入副标题" />
+              </div>
+              <div>内容</div>
+              <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />
+            </div>
+            <div class="mistake-right">
+              <el-button @click="handleDel(index)" type="danger">删除</el-button>
+            </div>
+          </div>
+          <div class="mistake-btn">
+            <el-button type="primary" @click="handleAdd">添加</el-button>
+          </div>
         </el-form-item>
-        <!-- <el-form-item label="上传行程">
-          <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
-          <span style="color: #C03639">(只接受压缩包)</span>
-        </el-form-item>
-        <el-form-item label="上传图片">
-          <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
-          <span style="color: #C03639">(只接受压缩包)</span>
-        </el-form-item> -->
         <el-form-item label="状态">
           <el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
         </el-form-item>
@@ -69,9 +77,10 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+            <img style="width: 100px;height: 100px;" v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
         </el-upload>
+        <span style="color: red">(请上传zip格式的文件图片)</span>
         </el-form-item>
         <el-form-item label="上传行程">
           <el-upload
@@ -80,9 +89,10 @@
             :show-file-list="false"
             :on-success="handleSuccess"
           >
-            <img v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
+            <img style="width: 100px;height: 100px;" v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
         </el-upload>
+        <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -108,8 +118,27 @@
         <el-form-item label="旅游路线">
           <el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
         </el-form-item>
-        <el-form-item label="QA内容">
+        <!-- <el-form-item label="QA内容">
           <el-input v-model="anchors.content" :rows="6" style="height: 120px" type="textarea" placeholder="QA内容" />
+        </el-form-item> -->
+        <el-form-item label="QA内容">
+          <div class="mistake-content" v-for="(item,index) in anchors.qa_question">
+            <div class="mistake-left">
+              <div>副标题</div>
+              <div class="qa-desc">
+                <el-input style="width: 100px;margin-right: 10px;" v-model="item.sort" type="text" placeholder="序号" />
+                <el-input v-model="item.title" type="text" placeholder="请输入副标题" />
+              </div>
+              <div>内容</div>
+              <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />
+            </div>
+            <div class="mistake-right">
+              <el-button @click="handleDel(index)" type="danger">删除</el-button>
+            </div>
+          </div>
+          <div class="mistake-btn">
+            <el-button type="primary" @click="handleAdd">添加</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="状态">
           <el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
@@ -121,9 +150,10 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+            <img style="width: 100px;height: 100px;" v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
         </el-upload>
+        <span style="color: red">(请上传zip格式的文件图片)</span>
         </el-form-item>
         <el-form-item label="上传行程">
           <el-upload
@@ -132,9 +162,10 @@
             :show-file-list="false"
             :on-success="handleSuccess"
           >
-            <img v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
+            <img style="width: 100px;height: 100px;" v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
             <i v-else class="el-icon-plus avatar-uploader-icon" />
         </el-upload>
+        <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -172,7 +203,9 @@ export default {
       item: {},
       imageUrl:'',
       imageUrls:'',
-      anchors: {},
+      anchors: {
+        qa_question:[]
+      },
       getQaCitys: {}
     }
   },
@@ -183,6 +216,23 @@ export default {
     this.getQaCity()
   },
   methods: {
+    handleAdd(){
+      this.anchors.qa_question.push({
+            sort:this.anchors.qa_question.length,
+            title: '',
+            content: ''
+          })
+    },
+    handleDel(id){
+      if(this.anchors.qa_question.length==1){
+        this.$message({
+          message: '至少保留一条',
+          type: 'warning'
+        });
+        return
+      }
+      this.anchors.qa_question = this.anchors.qa_question.filter((item,i)=>i!==id)
+    },
     getQa() {
       this.listLoading = true
       this.$axios.get('/admin/qa/getQa', { params: this.listQuery }).then(response => {
@@ -203,11 +253,28 @@ export default {
       this.anchors.trip_zip = this.imageUrls
     },
     onAdd() {
-      this.anchors = {} // 初始化时默认排序值为0
+      this.anchors = {
+        qa_question:[{
+            sort:0,
+            title: '',
+            content: ''
+          }]
+      } // 初始化时默认排序值为0
       this.dialogCreate = true
     },
     onEdit(item) {
+      if(!item.qa_question){
+        this.anchors = { 
+          ...item,
+          qa_question:[{
+            sort:0,
+            title: '',
+            content: ''
+          }]
+        }
+      }else{
         this.anchors = { ...item}
+      }
       this.dialogEdit = true
     },
     onSave() {
@@ -253,16 +320,38 @@ export default {
 </script>
 
 <style scoped>
+.qa-desc{
+  display: flex;
+}
+.mistake-content{
+  display: flex;
+}
+.mistake-left{
+  width: 90%;
+}
+.mistake-right{
+    width: 10%;
+    padding-left: 20px;
+    height: auto;
+    display: flex;
+    align-items: center;
+}
 .app-container {
   position: relative;
   padding-bottom: 60px; /* 分页条的高度 */
 }
-
+::v-deep.el-table--fit{
+  padding-bottom: 0 !important;
+}
 .filter-container,
 .el-table {
   padding-bottom: 52px; /* 分页条的高度，以避免内容重叠 */
 }
-
+.mistake-btn{
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: 10px;
+}
 .search {
   margin-left: 10px;
 }