From d896db5d4d55b645d288b8b8110d806fde7899a6 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 26 Jul 2022 09:26:49 +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

---
 .../Announce/AppAnnounce/components/Add.vue   | 70 ++-----------------
 .../AppAnnounce/components/Detail.vue         | 18 ++---
 .../Announce/AppAnnounce/components/Phone.vue | 29 +++++++-
 3 files changed, 39 insertions(+), 78 deletions(-)

diff --git a/project/sass/apps/Announce/AppAnnounce/components/Add.vue b/project/sass/apps/Announce/AppAnnounce/components/Add.vue
index 096af2b9..ae9a36b9 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/Add.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/Add.vue
@@ -157,57 +157,7 @@
           </ai-card>
         </el-form>
         <div class="right">
-          <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="form.content">
-                <div class="msg-item__left">
-                  <img v-if="user.info.avatar" :src="user.info.avatar" />
-                </div>
-                <div class="msg-item__right">
-                  <div class="msg-wrapper msg-text">
-                    <p>{{ form.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="user.info.avatar" :src="user.info.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>
+          <Phone :avatar="user.info.avatar" @close="isShowPhone = false" :isShowClose="false" :content="form.content" :fileList="fileList"></Phone>
         </div>
         <ai-dialog
           :visible.sync="isShowAddLink"
@@ -311,6 +261,7 @@
 </template>
 
 <script>
+  import Phone from './Phone'
   import { mapActions, mapState } from 'vuex'
   export default {
     name: 'Add',
@@ -321,6 +272,10 @@
       params: Object
     },
 
+    components: {
+      Phone
+    },
+
     data () {
       return {
         info: {},
@@ -365,16 +320,6 @@
       }
     },
 
-    watch: {
-      fileList (v) {
-        if (v.length) {
-          setTimeout(() => {
-            document.querySelector('.right-content').scrollTo(0, 999999)
-          }, 800)
-        }
-      }
-    },
-
     computed: {
       ...mapState(['user'])
     },
@@ -777,9 +722,6 @@
       .right {
         position: sticky;
         top: 0;
-        width: 338px;
-        height: 675px;
-        padding: 80px 15px 100px 32px;
 
         .phone {
           position: absolute;
diff --git a/project/sass/apps/Announce/AppAnnounce/components/Detail.vue b/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
index d44cc738..e3c7a9d0 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
@@ -58,7 +58,7 @@
                     <i>{{ fileList.length }}</i>
                     <span>个附件</span>
                   </div>
-                  <div class="right">预览消息</div>
+                  <div class="right" @click="isShowPhone = true">预览消息</div>
                 </div>
               </div>
             </ai-info-item>
@@ -230,20 +230,11 @@
           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="detail-phone" v-if="isShowPhone">
         <div class="mask"></div>
-        <Phone :avatar="user.info.avatar" :content="content" :fileList="fileList"></Phone>
+        <Phone :avatar="user.info.avatar" @close="isShowPhone = false" :isShowClose="true" :content="content" :fileList="fileList"></Phone>
       </div>
     </template>
   </ai-detail>
@@ -269,6 +260,7 @@
       return {
         total1: 0,
         isShowGroups: false,
+        isShowPhone: false,
         total2: 0,
         user1: [],
         user2: [],
@@ -297,7 +289,7 @@
         currIndex: 0,
         colConfigs3: [
           { prop: 'groupOwnerId', label: '群主', openType: 'userName' },
-          { slot: 'user' }
+          { prop: 'groupNames', label: '群名称' }
         ],
         colConfigs1: [
           { slot: 'user', label: '成员', openType: 'userName' },
diff --git a/project/sass/apps/Announce/AppAnnounce/components/Phone.vue b/project/sass/apps/Announce/AppAnnounce/components/Phone.vue
index 0b994629..1c2db92d 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/Phone.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/Phone.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="phone-container">
+    <img class="close" @click="$emit('close')" v-if="isShowClose" src="https://cdn.cunwuyun.cn/dvcp/announce/close.png" />
     <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">
@@ -56,7 +57,17 @@
 
 <script>
   export default {
-    props: ['fileList', 'avatar', 'content']
+    props: ['fileList', 'avatar', 'content', 'isShowClose'],
+
+    watch: {
+      fileList (v) {
+        if (v.length) {
+          setTimeout(() => {
+            document.querySelector('.right-content').scrollTo(0, 999999)
+          }, 800)
+        }
+      }
+    },
   }
 </script>
 
@@ -75,6 +86,22 @@
       height: 647px;
     }
 
+    .close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 111;
+      width: 60px;
+      height: 60px;
+      cursor: pointer;
+      transition: all ease 0.5s;
+      transform: translate(100%, -50%);
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
     .phone-wrapper {
       position: absolute;
       left: 0;