mp：解决 wx-msg 的 css 问题

YunaiV
1 parent cc23ca2d
Showing 5 changed files with 239 additions and 145 deletions
yudao-ui-admin/src/assets/images/wechat.png
yudao-ui-admin/src/views/mp/components/wx-msg/card.scss
yudao-ui-admin/src/views/mp/components/wx-msg/comment.scss
yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
yudao-ui-admin/src/views/mp/message/index.vue
+.avue-card{
+  &__item{
+    margin-bottom: 16px;
+    border: 1px solid #e8e8e8;
+    background-color: #fff;
+    box-sizing: border-box;
+    color: rgba(0,0,0,.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: "tnum";
+    cursor: pointer;
+    height:200px;
+    &:hover{
+      border-color: rgba(0,0,0,.09);
+      box-shadow: 0 2px 8px rgba(0,0,0,.09);
+    }
+    &--add{
+      border:1px dashed #000;
+      width: 100%;
+      color: rgba(0,0,0,.45);
+      background-color: #fff;
+      border-color: #d9d9d9;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      i{
+        margin-right: 10px;
+      }
+      &:hover{
+        color: #40a9ff;
+        background-color: #fff;
+        border-color: #40a9ff;
+      }
+    }
+  }
+  &__body{
+    display: flex;
+    padding: 24px;
+  }
+  &__detail{
+    flex:1
+  }
+  &__avatar{
+    width: 48px;
+    height: 48px;
+    border-radius: 48px;
+    overflow: hidden;
+    margin-right: 12px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__title{
+    color: rgba(0,0,0,.85);
+    margin-bottom: 12px;
+    font-size: 16px;
+    &:hover{
+      color:#1890ff;
+    }
+  }
+  &__info{
+    color: rgba(0,0,0,.45);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    height: 64px;
+  }
+  &__menu{
+    display: flex;
+    justify-content:space-around;
+    height: 50px;
+    background: #f7f9fa;
+    color: rgba(0,0,0,.45);
+    text-align: center;
+    line-height: 50px;
+    &:hover{
+      color:#1890ff;
+    }
+  }
+}
+/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
+.avue-comment{
+  margin-bottom: 30px;
+  display: flex;
+  align-items: flex-start;
+  &--reverse{
+    flex-direction:row-reverse;
+    .avue-comment__main{
+      &:before,&:after{
+        left: auto;
+        right: -8px;
+        border-width: 8px 0 8px 8px;
+      }
+      &:before{
+        border-left-color: #dedede;
+      }
+      &:after{
+        border-left-color: #f8f8f8;
+        margin-right: 1px;
+        margin-left: auto;
+      }
+    }
+  }
+  &__avatar{
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+  &__header{
+    padding: 5px 15px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__author{
+    font-weight: 700;
+    font-size: 14px;
+    color: #999;
+  }
+  &__main{
+    flex:1;
+    margin: 0 20px;
+    position: relative;
+    border: 1px solid #dedede;
+    border-radius: 2px;
+    &:before,&:after{
+      position: absolute;
+      top: 10px;
+      left: -8px;
+      right: 100%;
+      width: 0;
+      height: 0;
+      display: block;
+      content: " ";
+      border-color: transparent;
+      border-style: solid solid outset;
+      border-width: 8px 8px 8px 0;
+      pointer-events: none;
+    }
+    &:before {
+      border-right-color: #dedede;
+      z-index: 1;
+    }
+    &:after{
+      border-right-color: #f8f8f8;
+      margin-left: 1px;
+      z-index: 2;
+    }
+  }
+  &__body{
+    padding: 15px;
+    overflow: hidden;
+    background: #fff;
+    font-family: Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;color: #333;
+    font-size: 14px;
+  }
+  blockquote{
+    margin:0;
+    font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif;
+    padding: 1px 0 1px 15px;
+    border-left: 4px solid #ddd;
+  }
+}
 <!--
   - Copyright (C) 2018-2019
   - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除暂时用不到的 websocket
+  ② 代码优化，补充注释，提升阅读性
 -->
 <template>
-  <div class="msg-main" v-loading="mainLoading">
-    <div class="msg-div" :id="'msg-div'+nowStr">
+  <div class="msg-main">
+    <div class="msg-div" :id="'msg-div' + nowStr">
       <!-- 加载更多 -->
       <div v-loading="tableLoading"></div>
       <div v-if="!tableLoading">
@@ -15,9 +18,8 @@
       <div class="execution" v-for="item in tableData" :key='item.id'>
         <div class="avue-comment" :class="item.sendFrom === 2 ? 'avue-comment--reverse' : ''">
           <div class="avatar-div">
-            <img :src="item.sendFrom === 1 ? item.headimgUrl : item.appLogo" class="avue-comment__avatar">
-<!--            <div class="avue-comment__author">{{item.sendFrom === 1 ? item.nickName : item.appName}}</div>-->
-            <div class="avue-comment__author">{{item.sendFrom === 1 ? '用户' : '公众号' }}</div>
+            <img :src="item.sendFrom === 1 ? user.avatar : mp.avatar" class="avue-comment__avatar">
+            <div class="avue-comment__author">{{item.sendFrom === 1 ? user.nickname : mp.nickname }}</div>
           </div>
           <div class="avue-comment__main">
             <div class="avue-comment__header">
@@ -62,6 +64,7 @@
                 </el-link>
                 <div class="avue-card__info" style="height: unset">{{item.description}}</div>
               </div>
+              <!-- TODO 芋艿：待完善 -->
 <!--              <div v-if="item.repType == 'location'">-->
 <!--                <el-link type="primary" target="_blank" :href="'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx='+item.repLocationY+'&pointy='+item.repLocationX+'&name='+item.repContent+'&ref=joolun'">-->
 <!--                  <img :src="'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|'+item.repLocationX+','+item.repLocationY+'&key='+qqMapKey+'&size=250*180'">-->
@@ -118,28 +121,25 @@
     },
     data() {
       return {
-        nowStr: new Date().getTime(),
+        nowStr: new Date().getTime(), // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
         objData:{
           repType: 'text'
         },
-        mainLoading:false,
-        sendLoading:false,
-        tableLoading:false,
-        loadMore: true,
+        sendLoading: false, // 发送消息是否加载中
+        tableLoading: false, // 消息列表是否正在加载中
+        loadMore: true, // 是否可以加载更多
         tableData: [], // 消息列表
         page: {
-          total: 0, // 总页数
           pageNo: 1, // 当前页数
           pageSize: 14, // 每页显示多少条
-          ascs:[],//升序字段
-          descs:'create_time'//降序字段
         },
-        option: {
-          props: {
-            avatar: 'avatar',
-            author: 'author',
-            body: 'body'
-          }
+        user: { // 由于微信不再提供昵称，直接使用“用户”展示
+          nickname: '用户',
+          avatar: require("@/assets/images/profile.jpg"),
+        },
+        mp: {
+          nickname: '公众号',
+          avatar: require("@/assets/images/wechat.png"),
         }
       }
     },
@@ -148,8 +148,8 @@
     },
     methods:{
       sendMsg(){
-        if(this.objData){
-          if(this.objData.repType == 'news'){
+        if (this.objData) {
+          if(this.objData.repType === 'news'){
             this.objData.content.articles = [this.objData.content.articles[0]]
             this.$message({
               showClose: true,
@@ -173,13 +173,7 @@
           })
         }
       },
-      scrollToBottom: function () {
-        this.$nextTick(() => {
-          let div = document.getElementById('msg-div'+this.nowStr)
-          div.scrollTop = div.scrollHeight
-        })
-      },
-      loadingMore(){
+      loadingMore() {
         this.page.pageNo++
         this.getPage(this.page)
       },
@@ -188,35 +182,35 @@
         getMessagePage(Object.assign({
           pageNo: page.pageNo,
           pageSize: page.pageSize,
-          descs:page.descs,
-          ascs: page.ascs,
           wxUserId: this.wxUserId
         }, params)).then(response => {
-          let msgDiv = document.getElementById('msg-div'+this.nowStr)
+          // 计算当前的滚动高度
+          const msgDiv = document.getElementById('msg-div' + this.nowStr);
           let scrollHeight = 0
           if(msgDiv){
             scrollHeight = msgDiv.scrollHeight
           }
-          let data = response.data.list.reverse()
-          this.tableData = [...data , ...this.tableData]
-          this.page.total = response.data.total
+
+          // 处理数据
+          const data = response.data.list.reverse();
+          this.tableData = [...data, ...this.tableData]
           this.tableLoading = false
-          if(data.length < this.page.pageSize || data.length === 0){
+          if (data.length < this.page.pageSize || data.length === 0){
             this.loadMore = false
           }
-          if(this.page.pageNo == 1){//定位到消息底部
-            this.scrollToBottom()
-          }else{
-            if(data.length != 0){
-              this.$nextTick(() => {//定位滚动条
-                if(scrollHeight != 0){
-                  msgDiv.scrollTop = document.getElementById('msg-div'+this.nowStr).scrollHeight - scrollHeight - 100
-                }
-              })
-            }
-          }
           this.page.pageNo = page.pageNo
           this.page.pageSize = page.pageSize
+
+          // 滚动到原来的位置
+          if(this.page.pageNo === 1) { // 定位到消息底部
+            this.scrollToBottom()
+          } else if (data.length !== 0) { // 定位滚动条
+            this.$nextTick(() => {
+              if (scrollHeight !== 0){
+                msgDiv.scrollTop = document.getElementById('msg-div'+this.nowStr).scrollHeight - scrollHeight - 100
+              }
+            })
+          }
         })
       },
       /**
@@ -224,120 +218,40 @@
        */
       refreshChange() {
         this.getPage(this.page)
-      }
+      },
+      /** 定位到消息底部 */
+      scrollToBottom: function () {
+        this.$nextTick(() => {
+          let div = document.getElementById('msg-div' + this.nowStr)
+          div.scrollTop = div.scrollHeight
+        })
+      },
     }
   };
 </script>
 <style lang="scss" scoped>
-/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss  */
-.avue-comment{
-  margin-bottom: 30px;
-  display: flex;
-  align-items: flex-start;
-  &--reverse{
-    flex-direction:row-reverse;
-    .avue-comment__main{
-      &:before,&:after{
-        left: auto;
-        right: -8px;
-        border-width: 8px 0 8px 8px;
-      }
-      &:before{
-        border-left-color: #dedede;
-      }
-      &:after{
-        border-left-color: #f8f8f8;
-        margin-right: 1px;
-        margin-left: auto;
-      }
-    }
-  }
-  &__avatar{
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    border: 1px solid transparent;
-    box-sizing: border-box;
-    vertical-align: middle;
-  }
-  &__header{
-    padding: 5px 15px;
-    background: #f8f8f8;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &__author{
-    font-weight: 700;
-    font-size: 14px;
-    color: #999;
-  }
-  &__main{
-    flex:1;
-    margin: 0 20px;
-    position: relative;
-    border: 1px solid #dedede;
-    border-radius: 2px;
-    &:before,&:after{
-      position: absolute;
-      top: 10px;
-      left: -8px;
-      right: 100%;
-      width: 0;
-      height: 0;
-      display: block;
-      content: " ";
-      border-color: transparent;
-      border-style: solid solid outset;
-      border-width: 8px 8px 8px 0;
-      pointer-events: none;
-    }
-    &:before {
-      border-right-color: #dedede;
-      z-index: 1;
-    }
-    &:after{
-      border-right-color: #f8f8f8;
-      margin-left: 1px;
-      z-index: 2;
-    }
-  }
-  &__body{
-    padding: 15px;
-    overflow: hidden;
-    background: #fff;
-    font-family: Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;color: #333;
-    font-size: 14px;
-  }
-  blockquote{
-    margin:0;
-    font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif;
-    padding: 1px 0 1px 15px;
-    border-left: 4px solid #ddd;
-  }
-}
-</style>
-<style lang="scss" scoped>
-.msg-main{
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+@import './comment.scss';
+@import './card.scss';
+
+.msg-main {
   margin-top: -30px;
   padding: 10px;
 }
-.msg-div{
+.msg-div {
   height: 50vh;
   overflow: auto;
   background-color: #eaeaea;
 }
-.msg-send{
+.msg-send {
   padding: 10px;
 }
-.avue-comment__main{
+.avue-comment__main {
   flex: unset!important;
   border-radius: 5px!important;
   margin: 0 8px!important;
 }
-.avue-comment__header{
+.avue-comment__header {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
@@ -345,11 +259,11 @@
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
 }
-.avatar-div{
+.avatar-div {
   text-align: center;
   width: 80px;
 }
-.send-but{
+.send-but {
   float: right;
   margin-top: 8px!important;
 }
@@ -40,6 +40,12 @@
         </template>
       </el-table-column>
       <el-table-column label="消息类型" align="center" prop="type" width="80"/>
+      <el-table-column label="发送方" align="center" prop="sendFrom" width="80">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.sendFrom === 1" type="success">用户</el-tag>
+          <el-tag v-else type="info">公众号</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="用户标识" align="center" prop="openid" width="300" />
       <!-- TODO 芋艿：发送/接收 -->
       <el-table-column label="内容" prop="content">