From 7dc30328247bd4ae985e8bbf7d1ad8bbc5eaac44 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Mon, 25 Jul 2022 17:53:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=8F=E5=90=8C=E5=AE=A3=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppAnnounce/components/Detail.vue         |  86 +++++-
 .../Announce/AppAnnounce/components/List.vue  |   2 +-
 .../Announce/AppAnnounce/components/Phone.vue | 283 ++++++++++++++++++
 3 files changed, 366 insertions(+), 5 deletions(-)
 create mode 100644 project/sass/apps/Announce/AppAnnounce/components/Phone.vue

diff --git a/project/sass/apps/Announce/AppAnnounce/components/Detail.vue b/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
index 80f11761..d44cc738 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
@@ -43,9 +43,9 @@
             <ai-info-item label="群发范围" isLine>
               <div class="text">
                 <span>按条件筛选的</span>
-                <i>{{ info.wxGroups ? info.wxGroups.length : 0 }}</i>
+                <i>{{ groups.length }}</i>
                 <span>个客户群</span>
-                <em>详情</em>
+                <em @click="isShowGroups = true">详情</em>
               </div>
             </ai-info-item>
             <ai-info-item label="消息内容" isLine>
@@ -218,11 +218,40 @@
           </div>
         </template>
       </ai-card>
+      <ai-dialog
+        :visible.sync="isShowGroups"
+        width="890px"
+        title="群发范围"
+        @onConfirm="isShowGroups = false">
+        <ai-table
+          :tableData="info.wxGroups"
+          :col-configs="colConfigs3"
+          border
+          tableSize="small"
+          :isShowPagination="false"
+          @getList="() => {}">
+          <el-table-column slot="user" label="群名称" align="center">
+            <template slot-scope="{ row }">
+              <div class="userinfo">
+                <span v-for="(item, index) in row.groupIds" :key="index">
+                  <ai-open-data type="departmentName" :openid="item"></ai-open-data>
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </ai-dialog>
+      <div class="detail-phone">
+        <div class="mask"></div>
+        <Phone :avatar="user.info.avatar" :content="content" :fileList="fileList"></Phone>
+      </div>
     </template>
   </ai-detail>
 </template>
 
 <script>
+  import { mapState } from 'vuex'
+  import Phone from './Phone'
   export default {
     name: 'Detail',
 
@@ -232,9 +261,14 @@
       params: Object
     },
 
+    components: {
+      Phone
+    },
+
     data () {
       return {
         total1: 0,
+        isShowGroups: false,
         total2: 0,
         user1: [],
         user2: [],
@@ -261,6 +295,10 @@
         info: {},
         content: '',
         currIndex: 0,
+        colConfigs3: [
+          { prop: 'groupOwnerId', label: '群主', openType: 'userName' },
+          { slot: 'user' }
+        ],
         colConfigs1: [
           { slot: 'user', label: '成员', openType: 'userName' },
           { prop: 'groupCount', label: '预计送达居民群', align: 'center' }
@@ -269,10 +307,15 @@
           { prop: 'groupName', label: '居民群' },
           { prop: 'memberCount', label: '群人数', align: 'center' },
           { slot: 'user', label: '群主', align: 'center' },
-        ]
+        ],
+        groups: []
       }
     },
 
+    computed: {
+      ...mapState(['user'])
+    },
+
     created () {
       this.getInfo(this.params.id)
       this.getMemberInfo()
@@ -350,6 +393,15 @@
                 ...v.sysFile
               }
             })
+
+            this.info.wxGroups = res.data.wxGroups.map(v => {
+              this.groups.push(...v.groupIds.split(','))
+
+              return {
+                ...v,
+                groupIds: v.groupIds.split(',')
+              }
+            })
           }
         })
       },
@@ -390,11 +442,38 @@
 
 <style scoped lang="scss">
   .AppAnnounceDetail {
+    position: relative;
     .user-wrapper {
       display: flex;
       flex-wrap: wrap;
     }
 
+    .detail-phone {
+      position: fixed;
+      left: 0%;
+      top: 0%;
+      z-index: 11;
+      width: 100%;
+      height: 100%;
+
+      .mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        background: rgba($color: #000000, $alpha: 0.6);
+      }
+
+      ::v-deep .phone-container {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 11;
+        transform: translate(-50%, -50%);
+      }
+    }
     .userSelcet {
       display: flex;
       align-items: center;
@@ -429,7 +508,6 @@
 
     .userinfo {
       display: flex;
-      align-items: center;
       flex-direction: column;
       justify-content: center;
       line-height: 1;
diff --git a/project/sass/apps/Announce/AppAnnounce/components/List.vue b/project/sass/apps/Announce/AppAnnounce/components/List.vue
index eeb31ba0..e0ed899e 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/List.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/List.vue
@@ -62,7 +62,7 @@
         :current.sync="search.current"
         :size.sync="search.size"
         @getList="getList">
-        <el-table-column slot="user" width="140px" fixed="right" label="创建人" align="center">
+        <el-table-column slot="user" width="140px" label="创建人" align="center">
           <template slot-scope="{ row }">
             <div class="userinfo">
               <span>
diff --git a/project/sass/apps/Announce/AppAnnounce/components/Phone.vue b/project/sass/apps/Announce/AppAnnounce/components/Phone.vue
new file mode 100644
index 00000000..0b994629
--- /dev/null
+++ b/project/sass/apps/Announce/AppAnnounce/components/Phone.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="phone-container">
+    <img class="phone" src="https://cdn.cunwuyun.cn/dvcp/announce/phone.png" />
+    <img class="phone-wrapper" src="https://cdn.cunwuyun.cn/dvcp/announce/phone-wrapper.png" />
+    <div class="right-content">
+      <div class="msg-list">
+        <div class="msg-item" v-if="content">
+          <div class="msg-item__left">
+            <img v-if="avatar" :src="avatar" />
+          </div>
+          <div class="msg-item__right">
+            <div class="msg-wrapper msg-text">
+              <p>{{ content }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="msg-item" v-for="item in fileList" :key="item.id">
+          <div class="msg-item__left">
+            <img v-if="avatar" :src="avatar" />
+          </div>
+          <div class="msg-item__right" :class="[['1', '2'].indexOf(item.msgType) !== -1 ? 'left-border' : '']">
+            <div class="msg-wrapper msg-img" v-if="item.msgType === '1'">
+              <img :src="item.imgPicUrl" />
+            </div>
+            <div class="msg-wrapper msg-video" v-if="item.msgType === '2'">
+              <video controls :src="item.url"></video>
+            </div>
+            <div class="msg-wrapper msg-file" v-if="item.msgType === '3'">
+              <div class="msg-left">
+                <h2>{{ item.name }}</h2>
+                <p>{{ item.fileSizeStr }}</p>
+              </div>
+              <img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
+            </div>
+            <div class="msg-wrapper msg-link" v-if="item.msgType === '4'">
+              <h2>{{ item.linkTitle }}</h2>
+              <div class="msg-right">
+                <p>{{ item.linkDesc }}</p>
+                <img :src="item.linkPicUrl" />
+              </div>
+            </div>
+            <div class="msg-wrapper msg-miniapp" v-if="item.msgType === '5'">
+              <h2>{{ item.mpTitle }}</h2>
+              <img :src="item.url" />
+              <div class="msg-bottom">
+                <i>小程序</i>
+                <img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['fileList', 'avatar', 'content']
+  }
+</script>
+
+<style lang="scss" scoped>
+  .phone-container {
+    width: 338px;
+    height: 675px;
+    padding: 80px 15px 100px 32px;
+
+    .phone {
+      position: absolute;
+      left: 13px;
+      top: 4px;
+      z-index: 1;
+      width: 314px;
+      height: 647px;
+    }
+
+    .phone-wrapper {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      width: 338px;
+      height: 675px;
+    }
+
+    .right-content {
+      position: relative;
+      z-index: 11;
+      height: 100%;
+      overflow-y: auto;
+
+      .msg-item {
+        display: flex;
+        margin-bottom: 20px;
+
+        .msg-item__left {
+          width: 42px;
+          height: 42px;
+          margin-right: 16px;
+          background: #2891FF;
+          border-radius: 4px;
+          flex-shrink: 1;
+          overflow: hidden;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .msg-item__right {
+          position: relative;
+          flex: 1;
+
+          &::after {
+            position: absolute;
+            top: 16px;
+            left: 0;
+            z-index: 1;
+            width: 0;
+            height: 0;
+            border-right: 6px solid #fff;
+            border-left: 6px solid transparent;
+            border-bottom: 6px solid transparent;
+            border-top: 6px solid transparent;
+            content: " ";
+            transform: translate(-100%, 0%);
+          }
+
+          &.left-border::after {
+            display: none;
+          }
+
+          .msg-img img {
+            max-width: 206px;
+            max-height: 200px;
+          }
+
+          .msg-video video {
+            max-width: 206px;
+            max-height: 200px;
+          }
+
+          .msg-text {
+            max-width: 206px;
+            width: max-content;
+            line-height: 1.3;
+            padding: 12px;
+            background: #FFFFFF;
+            border-radius: 5px;
+            word-break: break-all;
+            font-size: 14px;
+            color: #222222;
+          }
+
+          .msg-miniapp {
+            width: 206px;
+            padding: 0 12px;
+            text-align: justify;
+            font-size: 0;
+            background: #FFFFFF;
+            border-radius: 5px;
+            font-size: 14px;
+            color: #222222;
+
+            h2 {
+              line-height: 1.2;
+              padding: 8px 0;
+              border-bottom: 1px solid #eee;
+              color: #222222;
+              font-size: 14px;
+            }
+
+            img {
+              width: 100%;
+              height: 120px;
+              margin-bottom: 8px;
+            }
+
+            .msg-bottom {
+              display: flex;
+              align-items: center;
+              line-height: 1;
+              padding: 4px 0;
+              border-top: 1px solid #eee;
+
+              i {
+                margin-right: 4px;
+                font-size: 12px;
+                font-style: normal;
+                color: #999;
+              }
+
+              img {
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+              }
+            }
+          }
+
+          .msg-file {
+            display: flex;
+            align-items: center;
+            width: 206px;
+            padding: 12px;
+            background: #FFFFFF;
+            border-radius: 5px;
+
+            .msg-left {
+              flex: 1;
+              margin-right: 18px;
+
+              h2 {
+                display: -webkit-box;
+                flex: 1;
+                line-height: 16px;
+                margin-bottom: 4px;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                color: #222222;
+                font-size: 14px;
+              }
+
+              p {
+                color: #888888;
+                font-size: 12px;
+              }
+            }
+
+            img {
+              width: 44px;
+              height: 44px;
+              border-radius: 2px;
+            }
+          }
+
+          .msg-link {
+            width: 206px;
+            height: 102px;
+            padding: 12px;
+            background: #FFFFFF;
+            border-radius: 5px;
+
+            h2 {
+              margin-bottom: 4px;
+              color: #222222;
+              font-size: 14px;
+              font-weight: normal;
+            }
+
+            .msg-right {
+              display: flex;
+              align-items: center;
+
+              p {
+                display: -webkit-box;
+                flex: 1;
+                line-height: 16px;
+                margin-right: 10px;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 3;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                color: #888;
+                font-size: 12px;
+              }
+
+              img {
+                width: 50px;
+                height: 50px;
+                border-radius: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>