From 9e4a978f85fa94792895954faac2b4a929db7f15 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 9 Jan 2023 12:20:31 +0800
Subject: [PATCH] =?UTF-8?q?mp=EF=BC=9A=E8=A7=A3=E5=86=B3=20wx-msg=20?=
 =?UTF-8?q?=E7=9A=84=20css=20=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-ui-admin/src/assets/images/wechat.png   | Bin 0 -> 1881 bytes
 .../src/views/mp/components/wx-msg/card.scss  |  86 ++++++++
 .../views/mp/components/wx-msg/comment.scss   |  88 ++++++++
 .../src/views/mp/components/wx-msg/main.vue   | 204 +++++-------------
 yudao-ui-admin/src/views/mp/message/index.vue |   6 +
 5 files changed, 239 insertions(+), 145 deletions(-)
 create mode 100644 yudao-ui-admin/src/assets/images/wechat.png
 create mode 100644 yudao-ui-admin/src/views/mp/components/wx-msg/card.scss
 create mode 100644 yudao-ui-admin/src/views/mp/components/wx-msg/comment.scss

diff --git a/yudao-ui-admin/src/assets/images/wechat.png b/yudao-ui-admin/src/assets/images/wechat.png
new file mode 100644
index 0000000000000000000000000000000000000000..6afc5e41cfc29d258e0c6135981a7a09b7bcf126
GIT binary patch
literal 1881
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
TM8y=K00000NkvXXu0mjf4<3N5

literal 0
HcmV?d00001

diff --git a/yudao-ui-admin/src/views/mp/components/wx-msg/card.scss b/yudao-ui-admin/src/views/mp/components/wx-msg/card.scss
new file mode 100644
index 000000000..18278b3e4
--- /dev/null
+++ b/yudao-ui-admin/src/views/mp/components/wx-msg/card.scss
@@ -0,0 +1,86 @@
+.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;
+    }
+  }
+}
diff --git a/yudao-ui-admin/src/views/mp/components/wx-msg/comment.scss b/yudao-ui-admin/src/views/mp/components/wx-msg/comment.scss
new file mode 100644
index 000000000..3f1341b20
--- /dev/null
+++ b/yudao-ui-admin/src/views/mp/components/wx-msg/comment.scss
@@ -0,0 +1,88 @@
+/* 来自 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;
+  }
+}
diff --git a/yudao-ui-admin/src/views/mp/components/wx-msg/main.vue b/yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
index b70cd55a1..fe4754bc9 100644
--- a/yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
+++ b/yudao-ui-admin/src/views/mp/components/wx-msg/main.vue
@@ -1,10 +1,13 @@
 <!--
   - 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;
 }
diff --git a/yudao-ui-admin/src/views/mp/message/index.vue b/yudao-ui-admin/src/views/mp/message/index.vue
index 054e1bc03..2cf3b7fe3 100644
--- a/yudao-ui-admin/src/views/mp/message/index.vue
+++ b/yudao-ui-admin/src/views/mp/message/index.vue
@@ -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">