Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

src/components/wangE.vue

@@ -30,6 +30,10 @@ export default {
     isDisabled: {
       type: Boolean,
       default: false
+    },
+    menu:{
+      type: Array,
+      default: []
     }
   },
   watch: {
@@ -101,6 +105,9 @@ export default {
           // }
         }
       };
+      if(this.menu.length){
+        this.editor.config.menus = this.menu
+      }
       this.editor.config.onchange = html => {
         this.info_ = html; // 绑定当前逐渐地值
         this.$emit("change", this.info_); // 将内容同步到父组件中
@@ -138,9 +145,4 @@ export default {
   border: none!important;
   height: calc(100% - 80px)!important;
 }
-.text {
-  width: 100%;
-  border: 1px solid #ccc;
-  overflow-y: auto;
-}
 </style>

src/components/wangEBd.vue

+<template>
+  <section class="wangeditor_class">
+    <div ref="toolbar" class="toolbar1"></div>
+  </section>
+</template>
+<script>
+import E from "wangeditor";
+export default {
+  name: "editoritem",
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    isClear: {
+      type: Boolean,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    full: {
+      type: Boolean,
+      default: true
+    },
+    menu:{
+      type: Array,
+      default: []
+    }
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+    value: function(value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value);
+      }
+    },
+    isDisabled(value){
+      console.log(value)
+      this.editor.$textElem.attr("contenteditable", !value);
+    },
+    info_(val){
+      console.log(val);
+      this.$emit("change", val)
+    },
+    
+    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    seteditor() {
+      // http://192.168.2.125:8080/admin/storage/create
+      this.editor = new E(this.$refs.toolbar);
+      this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.config.uploadImgServer =
+        "/tp-jiwei-pcsvc/display/cigApi/common/uploadFile"; // 配置服务器端地址
+      this.editor.config.uploadImgHeaders = {}; // 自定义 header
+      this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
+      //   this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
+      this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+      this.editor.config.uploadImgParams = { category: "图片" };
+
+      this.editor.config.uploadImgHooks = {
+        fail: (xhr, editor, result) => {
+          // 插入图片失败回调
+        },
+        success: (xhr, editor, result) => {
+          // 图片上传成功回调
+        },
+        timeout: (xhr, editor) => {
+          // 网络超时的回调
+        },
+        error: (xhr, editor) => {
+          // 图片上传错误的回调
+        },
+        customInsert: (insertImg, result, editor) => {
+          // 图片上传成功，插入图片的回调
+          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
+          // console.log(result.data[0].url)
+          //insertImg()为插入图片的函数
+          //循环插入图片
+          // for (let i = 0; i < 1; i++) {
+          console.log(result);
+          let imgUrl = "/tp-jiwei-pcsvc/display" + result.data.visitPath;
+          console.log(imgUrl);
+          insertImg(imgUrl);
+          // }
+        }
+      };
+      if(this.menu.length){
+        this.editor.config.menus = this.menu
+      }
+      this.editor.config.showFullScreen = this.full
+      this.editor.config.onchange = html => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    }
+  }
+};
+</script>
+<style>
+.wangeditor_class{
+  width: 100%;
+}
+.editor {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  z-index: 0;
+}
+.toolbar1{
+  height: 100%;
+}
+.toolbar1 .w-e-toolbar {
+  border-radius: 6px 6px 0 0;
+  border: solid 1px #edeef4!important;
+  padding: 0;
+}
+.toolbar1 .w-e-toolbar .w-e-menu{
+  width: 48px;
+  height: 48px;
+  font-size: 16px;
+}
+.toolbar1 .w-e-text-container {
+  border: solid 1px #edeef4!important;
+  background-color: #fbfbfc!important;
+  border-top:0!important;
+  height: calc(100% - 80px)!important;
+  border-radius: 0 0 6px 6px;
+}
+</style>

src/pages/technical-support/answer-center/detail.vue

@@ -5,41 +5,291 @@
       <span>详情</span>
     </p>
     <div class="detail_content">
+      <div class="question">
+        <p>{{ question.title }}</p>
+        <p>
+          <span class="left">
+            <span>{{ question.asker }}</span
+            >发布于 <span>{{ question.time }}</span>
+          </span>
+          <span class="right">
+            <img src="../../../assets/imgs/jszc_ic_huida.png" alt="" />
+            <span>{{ question.info_count }}</span>
+            <img src="../../../assets/imgs/jszc_ic_liulan.png" alt="" />
+            <span>{{ question.watcher }}</span>
+          </span>
+        </p>
+        <div class="ques_content" v-html="question.content"></div>
+      </div>
+      <div class="answer">
+        <p>{{question.info_count}}条回答</p>
+        <div class="answer_list">
+            <div class="answer_box" v-for="(item,index) in answer" :key="'answer'+index+200">
+                <div class="picture">
+                    <img src="../../../assets/imgs/img_head.png" alt="" style="width:100%">
+                </div>
+                <div class="text" :style="index == answer.length-1||item.children?{border:'0'}:''">
+                    <p>
+                        <span class="left">{{item.username}}</span> 
+                        <span class="right"> 
+                            <span v-if="index==0||index==1||index==2">{{index==0?'沙发':index==1?'板凳':'地板'}}</span> 
+                            <span v-else>{{index}}楼</span> | <span>{{deal_time(item.created)}}</span> 
+                        </span> 
+                    </p>
+                    <div v-html="item.content" class="hf_content"></div>
+                    <div @click="showinput(index)" class="back" :style="item.children?{marginBottom:'10px'}:''"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
+                    <div class="back_input" v-if="answer_index === index">
+                      <el-input
+                          :placeholder="'回复'+back_person"
+                          @blur="clear_index"
+                          :ref="'input'+index"
+                          v-model="back_info">
+                          <div slot="prefix" style="height:48px;line-height:48px;">
+                            <img src="../../../assets/imgs/img_head.png" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;"></div>
+                          <div slot="suffix" class="back_solt">回复</div>
+                      </el-input>
+                    </div>
+                    <div class="back_fllow answer_box" v-for="(it,idx) in item.children" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
+                        <div class="picture">
+                            <img src="../../../assets/imgs/img_head.png" alt="" style="width:100%">
+                        </div>
+                        <div class="text" :style="idx == item.children.length-1?{border:'0'}:''">
+                            <p>
+                                <span class="left">{{it.username}} <span><span style="color:#bcc1d0;margin:0 9px;">回复</span>{{it.answered_user}}</span> </span> 
+                                <span class="right"> 
+                                    <span></span><span>{{deal_time(it.created)}}</span> 
+                                </span> 
+                            </p>
+                            <div v-html="it.content" class="hf_content"></div>
+                            <div @click="showinput(index,idx)" class="back"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
+                        </div>
+                        <div class="back_input" style="padding:0;height:auto;margin-bottom:0;" v-if="answer_count[0]==index&&answer_count[1]==idx">
+                          <el-input
+                              :placeholder="'回复'+back_person"
+                              @blur="clear_index"
+                              :ref="'input'+index+idx"
+                              v-model="back_info">
+                              <div slot="prefix" style="height:48px;line-height:48px;">
+                                <img src="../../../assets/imgs/img_head.png" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;"></div>
+                              <div slot="suffix" class="back_solt">回复</div>
+                          </el-input>
+                        </div>
+                    </div>
+                    <div class="under_count" v-if="item.children&&item.children.length>5&&answer_child_index!==index">
+                      还有{{item.children.length-5}}条回复，<span @click="answer_child_index=index">点击查看</span> 
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div>
 
+      <div class="ans_self">
+        <p><img src="../../../assets/imgs/img_head.png" alt=""> <span>用户</span> </p>
+        <wang-e-bd class="editbox" v-model="editstr" :menu="menu" :full="false"></wang-e-bd>
+        <div class="pubilc"><img src="../../../assets/imgs/jszc_ic_fabu.png" alt="">发表</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import wangEBd from '@/components/wangEBd'
 export default {
   props: [],
   components: {
-
+      wangEBd
   },
   data() {
     return {
-
-        };
+      question: {
+        title: "为什么感知服务提示无法注册",
+        asker: "林有有",
+        time: "2020-10-11 18:23:52",
+        info_count: 12,
+        watcher: "1,024",
+        content: "<h1>hahahahha</h1><p>13123123123123</p>",
       },
-    watch: {
-
+      answer_count:[],
+      answer_index:'',
+      answer_child_index:'',
+      back_person:'lll',
+      back_info:'',
+      menu:[
+          'bold',
+          'foreColor',
+          'code',
+          'link',
+          'image',
+          'video'
+      ],
+      editstr:'',
+      answer: [
+        {
+          id: 4,
+          username: "普通neo",
+          created: "2020-10-21T15:30:13+08:00",
+          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+          answered_user: "",
+          children: [
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
             },
-    computed: {
-
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
             },
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+          ],
+        },
+        {
+          id: 4,
+          username: "普通neo",
+          created: "2020-10-21T15:30:13+08:00",
+          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+          answered_user: "",
+          children: [
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 5,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 6,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+            {
+              id: 7,
+              username: "普通neo",
+              created: "2020-10-21T15:34:20+08:00",
+              content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+              answered_user: "我是超级管理员",
+              children: null,
+            },
+          ],
+        },
+        {
+          id: 4,
+          username: "普通neo",
+          created: "2020-10-21T15:30:13+08:00",
+          content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
+          answered_user: "",
+          children: null,
+        },
+      ],
+    };
+  },
+  watch: {},
+  computed: {},
   created() {
      
   },
-    mounted() {
+  mounted() {},
+  methods: {
+      deal_time(time){
+        return  time.split('+')[0].replace("T"," ")
         
       },
-    methods: {
+      showinput(...arg){
+        console.log(arg);
+        this.answer_count=[]
+        this.answer_index=''
+        if(!arg[1]&&arg[1]!==0){
+          this.answer_index = arg[0]
+          setTimeout(()=>{
+            var temp = 'input'+arg[0]
+            this.$refs[temp][0].$refs.input.focus()
+          },200)
+        }else{
+          this.answer_count=arg
+          setTimeout(()=>{
+            this.$refs['input'+arg[0]+arg[1]][0].$refs.input.focus();
+          },200)
           
+        }
+      },
+      clear_index(){
+        this.answer_count=[]
+        this.answer_index=''
+      }
   },
 };
 </script>
 
 <style scoped>
+.detail_box {
+  /* min-height: calc(100% - 15px); */
+}
 .now_page_title {
   margin: 15px 0;
   color: #898d9e;
@@ -47,7 +297,209 @@ export default {
 .now_page_title span {
   color: #242c43;
 }
-.detail_content{
+.detail_content {
+  width: 100%;
+  /* min-height: calc(100% - 35px); */
+}
+.question,
+.answer {
+  width: 856px;
+  background-color: #fff;
+  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
+  border-radius: 12px;
+  padding: 24px 16px;
+  margin-bottom: 20px;
+}
+.question p {
+  font-size: 14px;
+  color: #a9aec0;
+  padding: 0 10px;
+  overflow: hidden;
+}
+.question p:nth-of-type(1) {
+  font-size: 24px;
+  color: #242c43;
+  line-height: 32px;
+}
+.question p:nth-of-type(2) {
+  margin-top: 14px;
+  padding-bottom: 14px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.question p:nth-of-type(2) .left {
+  float: left;
+}
+.question p:nth-of-type(2) .left span {
+  color: #58617a;
+  margin: 0 8px;
+}
+.question p:nth-of-type(2) .left span:nth-of-type(1) {
+  margin-left: 0;
+}
+.question p:nth-of-type(2) .right {
+  float: right;
+}
+.question p:nth-of-type(2) .right span {
+  color: #242c43;
+  margin-right: 31px;
+}
+.question p:nth-of-type(2) .right img {
+  vertical-align: -2px;
+}
+.ques_content {
+  padding: 18px 8px 0 8px;
+}
+.answer{
+    padding: 25px 16px 25px 25px;
+}
+.answer p:nth-of-type(1){
+    font-size: 20px;
+	color: #242c43;
+}
+.answer_list{
+    margin-top: 9px;
+}
+.answer_box{
     width: 100%;
+    overflow: hidden;
+    padding-top: 16px;
+}
+.answer_box .picture{
+    float: left;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+.answer_box .text{
+    float: right;
+    width: calc(100% - 55px);
+    border-bottom: 2px solid #f4f7fc;
+    overflow: hidden;
+}
+/* .answer_list .answer_box:nth-last-of-type(1) .text{
+    border:0;
+} */
+.answer_box .text p{
+    font-size: 14px;
+	color: #e3e5ef;
+    overflow: hidden;
+}
+.answer_box .text p .left{
+    float: left;
+    color: #58617a;
+}
+.answer_box .text p .right{
+    float: right;
+}
+.answer_box .text p .right span{
+    color: #a9aec0;
 }
+.answer_box .text p .right span:nth-of-type(1){
+    margin-right: 17px;
+}
+.answer_box .text p .right span:nth-of-type(2){
+    margin-left: 17px;
+}
+.hf_content{
+    padding: 16px 0;
+    color: #242c43;
+}
+.text .back{
+    float: right;
+    color: #58617a;
+    font-size: 14px;
+    cursor: pointer;
+    margin-bottom: 16px;
+}
+.text .back img{
+    vertical-align: -3px;
+    margin-right: 4px;
+}
+.back_fllow{
+    background-color: #fbfbfc;
+    width: 100%;
+    padding: 16px;
+}
+.ans_self{
+    width: 100%;
+    padding: 24px;
+    height: 354px;
+    background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		rgba(15, 19, 65, 0.04);
+	border-radius: 12px;
+    margin-bottom: 20px;
+}
+.ans_self p img{
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    vertical-align: -6px;
+    margin-right: 5px;
+}
+.ans_self p{
+    color: #58617a;
+}
+.editbox{
+    margin-top: 15px;
+    height: calc(100% - 65px);
+}
+.pubilc{
+    float: right;
+    width: 88px;
+	height: 40px;
+	background-color: #515fe7;
+	border-radius: 8px;
+    text-align: center;
+    line-height: 40px;
+    font-size: 16px;
+	color: #e6ebfe;
+    margin-top: -14px;
+    cursor: pointer;
+}
+.pubilc img{
+    margin-right: 8px;
+}
+.back_input{
+  width: 100%;
+  height: 80px;
+	background-color: #fbfbfc;
+  padding: 16px;
+  float: left;
+  margin-bottom: 24px;
+}
+.back_solt{
+  width: 60px;
+	height: 32px;
+  line-height: 32px;
+  text-align: center;
+	background-color: #515fe7;
+	border-radius: 4px;
+  font-size: 14px;
+	color: #e6ebfe;
+  margin-top: 7px;
+  margin-right: 7px;
+  cursor: pointer;
+}
+.under_count{
+  height: 46px;
+  line-height: 46px;
+  color: #58617a;
+  font-size: 14px;
+  background-color: #fbfbfc;
+  padding-left: 24px;
+}
+.under_count span{
+  color: #515fe7;
+  cursor: pointer;
+}
+</style>
+<style>
+  .back_input .el-input__inner{
+    height: 48px;
+    line-height: 48px;
+    padding-left: 50px;
+    padding-right: 80px;
+  }
 </style>