添加红包详情

package.json

@@ -2,7 +2,7 @@
   "name": "my-vue-app",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "serve": "vite preview"
   },

src/App.vue

@@ -63,6 +63,9 @@ export default {
         '/message/live-notice',
         '/message/money-notice',
         '/message/notice-setting',
+        '/message/chat',
+        '/message/chat/detail',
+        '/message/chat/red-packet-detail',
 
         '/me/country-choose',
         '/me/edit-userinfo',
@@ -85,8 +88,6 @@ export default {
         '/me/my-card',
         '/scan',
         '/face-to-face',
-        '/message/chat',
-        '/message/chat-detail',
         '/set-remark',
 
         '/me/right-menu/look-history',

src/pages/message/Chat.vue

@@ -1,78 +1,172 @@
 <template>
   <div class="Chat">
-    <div class="header">
+    <div class="chat-content" @touchstart="tooltipTop = -1">
-      <div class="left">
+      <div class="header">
-        <back @click="$back"></back>
+        <div class="left">
-        <div class="badge">12</div>
+          <back @click="$back"></back>
-        <span>zzzz</span>
+          <div class="badge">12</div>
+          <span>zzzz</span>
+        </div>
+        <div class="right">
+          <img style="transform: scale(1.1)" src="../../assets/img/icon/message/video-white.png" alt="">
+          <img src="../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat/detail')">
+        </div>
       </div>
-      <div class="right">
+      <div class="message-wrapper" ref="msgWrapper" :class="isExpand ? 'expand' : ''">
-        <img style="transform: scale(1.1)" src="../../assets/img/icon/message/video-white.png" alt="">
+        <ChatMessage @itemClick="clickItem" v-longpress="showTooltip" :message="item"
-        <img src="../../assets/img/icon/menu-white.png" alt="" @click="$nav('/message/chat-detail')">
+                     v-for="item in messages"></ChatMessage>
       </div>
-    </div>
+      <div class="footer" :class="isTyping ? 'typing' : ''">
-    <div class="message-wrapper" :class="isExpand ? 'expand' : ''">
+        <div class="toolbar" v-if="!recording">
-      <ChatMessage :message="item" v-for="item in messages"></ChatMessage>
+          <img src="../../assets/img/icon/message/camera.png" alt="" class="camera">
-    </div>
+          <input @click="typing = true"
-    <div class="footer" :class="isTyping ? 'typing' : ''">
+                 @blur="typing = false"
-      <div class="toolbar" v-if="!recording">
+                 type="text" placeholder="发送信息...">
-        <img src="../../assets/img/icon/message/camera.png" alt="" class="camera">
+          <template v-if="!isTyping">
-        <input @click="typing = true"
+            <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-white.png"
-               @blur="typing = false"
+                 alt="">
-               type="text" placeholder="发送信息...">
+            <img src="../../assets/img/icon/message/emoji-white.png" alt="">
-        <template v-if="!isTyping">
+            <img @click="showOption = !showOption" src="../../assets/img/icon/message/add-white.png" alt="">
-          <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-white.png" alt="">
+          </template>
-          <img src="../../assets/img/icon/message/emoji-white.png" alt="">
+          <template v-else>
-          <img @click="showOption = !showOption" src="../../assets/img/icon/message/add-white.png" alt="">
+            <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-black.png"
-        </template>
+                 alt="">
-        <template v-else>
+            <img src="../../assets/img/icon/message/emoji-black.png" alt="">
-          <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-black.png" alt="">
+            <img v-if="showOption" @click="showOption = !showOption" src="../../assets/img/icon/message/close-black.png"
-          <img src="../../assets/img/icon/message/emoji-black.png" alt="">
+                 alt="">
-          <img v-if="showOption" @click="showOption = !showOption" src="../../assets/img/icon/message/close-black.png" alt="">
+            <img v-else @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt="">
-          <img v-else @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt="">
+          </template>
-        </template>
+        </div>
-      </div>
+        <div class="record" v-else>
-      <div class="record" v-else>
+          <span>按住 说话</span>
-        <span>按住 说话</span>
+          <img @click="recording = false" src="../../assets/img/icon/message/keyboard.png" alt="">
-        <img @click="recording = false" src="../../assets/img/icon/message/keyboard.png" alt="">
+        </div>
-      </div>
+        <div class="options" v-if="showOption">
-      <div class="options" v-if="showOption">
+          <div class="option-wrapper">
-        <div class="option-wrapper">
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/photo.png" alt="">
-            <img src="../../assets/img/icon/message/photo.png" alt="">
+              <span>照片</span>
-            <span>照片</span>
+            </div>
-          </div>
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/camera2.png" alt="">
-            <img src="../../assets/img/icon/message/camera2.png" alt="">
+              <span>拍摄</span>
-            <span>拍摄</span>
+            </div>
-          </div>
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/redpack.png" alt="">
-            <img src="../../assets/img/icon/message/redpack.png" alt="">
+              <span>红包</span>
-            <span>红包</span>
+            </div>
-          </div>
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/video.png" alt="">
-            <img src="../../assets/img/icon/message/video.png" alt="">
+              <span>视频通话</span>
-            <span>视频通话</span>
+            </div>
-          </div>
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/audio.png" alt="">
-            <img src="../../assets/img/icon/message/audio.png" alt="">
+              <span>语音通话</span>
-            <span>语音通话</span>
+            </div>
-          </div>
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/come-on.png" alt="">
-            <img src="../../assets/img/icon/message/come-on.png" alt="">
+              <span>一起看视频</span>
-            <span>一起看视频</span>
+            </div>
-          </div>
+            <div class="option">
-          <div class="option">
+              <img src="../../assets/img/icon/message/come-chang.png" alt="">
-            <img src="../../assets/img/icon/message/come-chang.png" alt="">
+              <span>一起唱</span>
-            <span>一起唱</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!--  长按工具栏  -->
+    <transition name="tooltip">
+      <!--      TODO 定位也有问题-->
+      <div class="tooltip" :style="{top:tooltipTop+'px'}" v-if="tooltipTop !==-1">
+        <div class="options">
+          <img src="../../assets/img/icon/message/chat/like.png" alt="">
+          <span>点赞</span>
+        </div>
+        <div class="options">
+          <img src="../../assets/img/icon/message/chat/copy.png" alt="">
+          <span>复制</span>
+        </div>
+        <div class="options">
+          <img src="../../assets/img/icon/message/chat/send.png" alt="">
+          <span>转发</span>
+        </div>
+        <div class="options">
+          <img src="../../assets/img/icon/message/chat/comment.png" alt="">
+          <span>回复</span>
+        </div>
+        <div class="options">
+          <img src="../../assets/img/icon/message/chat/return.png" alt="">
+          <span>回复</span>
+        </div>
+        <div class="options">
+          <img src="../../assets/img/icon/message/chat/del.png" alt="">
+          <span>删除</span>
+        </div>
+        <!--      TODO 官方的三角头会随着点击位置变动，先注释掉-->
+        <!--      <div class="arrow" :class="tooltipTopLocation"></div>-->
+      </div>
+    </transition>
+
+    <div class="preview-img" v-if="false">
+      <div class="header">
+        <back mode="light"/>
+        <img src="../../assets/img/icon/search-light.png" alt="">
+      </div>
+      <img :src="previewImg" alt="" class="img-src">
+      <div class="footer"></div>
+    </div>
+
+    <!--  红包  -->
+    <transition name="tooltip">
+      <div class="red-packet" v-if="isShowOpenRedPacket">
+        <Mask @click="isShowOpenRedPacket = false"/>
+        <div class="content">
+          <template v-if="isOpened">
+            <img src="../../assets/img/icon/message/chat/bg-open.png" alt="" class="bg">
+            <div class="wrapper">
+              <div class="top">
+                <div class="money">0.01元</div>
+                <div class="belong">{{ userinfo.nickname }}的红包</div>
+                <div class="password">大吉大利</div>
+              </div>
+              <div class="notice" @click="$nav('/message/chat/red-packet-detail')">查看红包详情></div>
+            </div>
+          </template>
+          <template v-else>
+            <img src="../../assets/img/icon/message/chat/bg-close.png" alt="" class="bg">
+            <div class="wrapper">
+              <div class="top">
+                <img :src="$imgPreview(userinfo.avatar)" alt="" class="avatar">
+                <div class="belong">{{ userinfo.nickname }}的红包</div>
+                <div class="password">大吉大利</div>
+              </div>
+
+              <div class="l-button" :class="{opening}" @click="openRedPacket">
+                <template v-if="opening">
+                  <img src="../../assets/img/icon/loading-white.png" alt="">
+                  正在打开
+                </template>
+                <span v-else>开红包</span>
+              </div>
+            </div>
+          </template>
+          <img src="../../assets/img/icon/message/chat/close.png" alt="" class="close"
+               @click="isShowOpenRedPacket = false">
+        </div>
+      </div>
+    </transition>
+
+    <Loading v-if="loading"/>
   </div>
 </template>
 <script>
 import ChatMessage from "./components/ChatMessage";
+import {nextTick} from "vue";
+import Mask from "../../components/Mask";
+import {mapState} from "vuex";
+import Loading from "../../components/Loading";
 
 let CALL_STATE = {
   REJECT: 0,
@@ -111,10 +205,13 @@ let RED_PACKET_MODE = {
 export default {
   name: "Chat",
   components: {
+    Loading,
+    Mask,
     ChatMessage
   },
   data() {
     return {
+      previewImg: new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
       videoCall: [],
       MESSAGE_TYPE,
       messages: [
@@ -123,7 +220,7 @@ export default {
           data: '',
           time: '2021-01-02 21:21',
           user: {
-            id: 2,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -138,7 +235,7 @@ export default {
           },
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -163,7 +260,7 @@ export default {
           data: new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
           time: '2021-01-02 21:21',
           user: {
-            id: 2,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           },
           loved: [
@@ -193,7 +290,7 @@ export default {
           data: new URL('../../assets/img/poster/1.jpg', import.meta.url).href,
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           },
           readState: READ_STATE.ARRIVED
@@ -204,7 +301,7 @@ export default {
           data: '2021-01-02 21:44',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -214,7 +311,7 @@ export default {
           data: '2021-01-02 21:44',
           time: '2021-01-02 21:21',
           user: {
-            id: 2,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -224,7 +321,7 @@ export default {
           data: '2021-01-02 21:44',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -234,7 +331,7 @@ export default {
           data: '2021-01-02 21:44',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -244,7 +341,7 @@ export default {
           data: '2021-01-02 21:44',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -254,7 +351,7 @@ export default {
           data: '2021-01-02 21:44',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -267,7 +364,7 @@ export default {
           },
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -280,7 +377,7 @@ export default {
           },
           time: '2021-01-02 21:21',
           user: {
-            id: 2,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -289,7 +386,7 @@ export default {
           data: '又在刷抖音',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -298,7 +395,7 @@ export default {
           data: '我昨天@你那个视频发给我下',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -307,7 +404,7 @@ export default {
           data: '我找不到了',
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '1',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -316,7 +413,7 @@ export default {
           data: '我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了',
           time: '2021-01-02 21:21',
           user: {
-            id: 2,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -327,30 +424,13 @@ export default {
             poster: new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
             author: {
               name: 'safasdfassafasdfassafasdfassafasdfas',
-              avatar: new URL('../../assets/img/icon/head-image.jpeg',import.meta.url).href
+              avatar: new URL('../../assets/img/icon/head-image.jpeg', import.meta.url).href
             },
             title: '服了asd'
           },
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '1',
-            avatar: '../../assets/img/icon/head-image.jpg'
-          }
-        },
-        {
-          type: MESSAGE_TYPE.DOUYIN_VIDEO,
-          state: VIDEO_STATE.VALID,
-          data: {
-            poster: new URL('../../assets/img/poster/3.jpg', import.meta.url).href,
-            author: {
-              name: 'safasdfassafasdfassafasdfassafasdfas',
-              avatar: new URL('../../assets/img/icon/head-image.jpeg',import.meta.url).href
-            },
-            title: '服了asd'
-          },
-          time: '2021-01-02 21:21',
-          user: {
-            id: 2,
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
@@ -362,14 +442,20 @@ export default {
           },
           time: '2021-01-02 21:21',
           user: {
-            id: 1,
+            id: '93864497380',
             avatar: '../../assets/img/icon/head-image.jpg'
           }
         },
       ],
       typing: false,
+      loading: false,
+      opening: false,
+      isOpened: false,
       recording: false,
-      showOption: false
+      showOption: false,
+      isShowOpenRedPacket: false,
+      tooltipTop: -1,
+      tooltipTopLocation: ''
     }
   },
   computed: {
@@ -378,14 +464,70 @@ export default {
     },
     isTyping() {
       return this.typing || this.isExpand
-    }
+    },
+    ...mapState(['userinfo'])
   },
   created() {
   },
-  methods: {}
+  mounted() {
+    nextTick(() => {
+      let wrapper = this.$refs.msgWrapper
+      wrapper.scrollTo({top: wrapper.scrollHeight - wrapper.clientHeight})
+    })
+  },
+  methods: {
+    openRedPacket() {
+      this.opening = true
+      setTimeout(() => {
+        this.opening = false
+        this.$nav('/message/chat/red-packet-detail')
+      }, 1000)
+    },
+    async clickItem(e) {
+      if (e.type === this.MESSAGE_TYPE.RED_PACKET) {
+        this.loading = true
+        await this.$sleep(500)
+        this.loading = false
+        this.isOpened = e.data.state === '已过期';
+        this.isShowOpenRedPacket = true
+      }
+    },
+    showTooltip(e) {
+      console.log(e)
+      let wrapper = null
+      e.path.map(v => {
+        if (v && v.classList) {
+          if (v.classList.value === 'chat-wrapper') {
+            wrapper = v
+          }
+        }
+      })
+      if (wrapper) {
+        // console.log(wrapper.getBoundingClientRect())
+        if (wrapper.getBoundingClientRect().y - 61 > 70) {
+          this.tooltipTopLocation = 'top'
+          this.tooltipTop = wrapper.getBoundingClientRect().y - 70
+        } else {
+          this.tooltipTopLocation = 'bottom'
+          this.tooltipTop = wrapper.getBoundingClientRect().y + wrapper.getBoundingClientRect().height + 10
+        }
+      }
+    }
+  }
 }
 </script>
 
+<style>
+.tooltip-enter-active,
+.tooltip-leave-active {
+  transition: transform .2s ease;
+}
+
+.tooltip-enter-from,
+.tooltip-leave-to {
+  transform: scale(0);
+}
+</style>
 <style scoped lang="less">
 @import "../../assets/less/index";
 
@@ -399,158 +541,352 @@ export default {
   color: white;
   font-size: 1.4rem;
 
-  .header {
+  .chat-content {
-    z-index: 2;
-    background: @main-bg;
-    position: fixed;
-    width: 100%;
-    box-sizing: border-box;
-    height: @header-height;
-    padding: 0 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid @line-color;
 
-    img {
+    .header {
-      height: 2rem;
+      z-index: 2;
-      margin: 0 1rem;
+      background: @main-bg;
-    }
+      position: fixed;
-
+      width: 100%;
-    .left {
+      box-sizing: border-box;
-      max-width: 60%;
+      height: @header-height;
-      overflow: hidden;
+      padding: 0 1rem;
       display: flex;
+      justify-content: space-between;
       align-items: center;
+      border-bottom: 1px solid @line-color;
 
-      .badge {
+      img {
-        margin-right: 1rem;
+        height: 2rem;
-        font-size: 1.2rem;
+        margin: 0 1rem;
-        display: block;
+      }
-        padding: 1px 6px;
+
-        border-radius: 10px;
+      .left {
-        color: white;
+        max-width: 60%;
-        background: @second-btn-color;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+
+        .badge {
+          margin-right: 1rem;
+          font-size: 1.2rem;
+          display: block;
+          padding: 1px 6px;
+          border-radius: 10px;
+          color: white;
+          background: @second-btn-color;
+        }
       }
     }
-  }
 
-  .message-wrapper {
+    .message-wrapper {
-    height: calc(100vh - 12.5rem);
+      height: calc(100vh - 12.5rem);
-    overflow: auto;
+      overflow: auto;
-    padding-top: 6rem;
+      padding-top: 6rem;
 
-    &.expand {
+      &.expand {
-      height: calc(100vh - (12.5rem + 30vh));
+        height: calc(100vh - (12.5rem + 30vh));
+      }
     }
-  }
 
-  .footer {
+    .footer {
-    @chat-bg-color: rgb(105, 143, 244);
+      @chat-bg-color: rgb(105, 143, 244);
-    @typing-bg-color: whitesmoke;
+      @typing-bg-color: whitesmoke;
-    background: @main-bg;
+      background: @main-bg;
-    @normal-bg-color: rgb(35, 38, 47);
+      @normal-bg-color: rgb(35, 38, 47);
-    padding: 1rem 0;
+      padding: 1rem 0;
-    border-top: 1px solid @second-btn-color-tran;
+      border-top: 1px solid @second-btn-color-tran;
 
-    &.typing {
+      &.typing {
-      background: white;
+        background: white;
+
+        .toolbar {
+          background: @typing-bg-color;
+        }
+
+        input {
+          background: @typing-bg-color !important;
+        }
+      }
 
       .toolbar {
-        background: @typing-bg-color;
-      }
-
-      input {
-        background: @typing-bg-color !important;
-      }
-    }
-
-    .toolbar {
-      box-sizing: border-box;
-      height: 4.4rem;
-      margin: 0 1rem;
-      padding: .5rem;
-      background: @normal-bg-color;
-      border-radius: 2rem;
-      display: flex;
-      align-items: center;
-
-      img {
-        width: 2.4rem;
-        border-radius: 50%;
-        margin-left: 1.5rem;
-      }
-
-      input {
-        flex: 1;
-        outline: none;
-        border: none;
-        background: @normal-bg-color;
-      }
-
-      .camera {
-        margin-left: 0;
-        margin-right: .5rem;
-        width: 1.4rem;
-        padding: .5rem;
-        border-radius: 50%;
-        background: @chat-bg-color;
-      }
-
-    }
-
-    .record {
-      box-sizing: border-box;
-      height: 4.4rem;
-      margin: 0 1rem;
-      padding: 1rem .5rem;
-      background: @normal-bg-color;
-      border-radius: 2rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-
-      img {
-        right: .5rem;
-        position: absolute;
-        width: 2.4rem;
-        border-radius: 50%;
-        margin-left: 1.5rem;
-      }
-    }
-
-    .options {
-      font-size: 1.4rem;
-      width: 100vw;
-      padding: 1.5rem;
-      height: 30vh;
-      box-sizing: border-box;
-
-      .option-wrapper {
         box-sizing: border-box;
-        @grid-width: calc((100vw - 3rem) / 4);
+        height: 4.4rem;
-        color: black;
+        margin: 0 1rem;
-        display: grid;
+        padding: .5rem;
-        grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
+        background: @normal-bg-color;
+        border-radius: 2rem;
+        display: flex;
+        align-items: center;
 
-        .option {
+        img {
-          display: flex;
+          width: 2.4rem;
-          justify-content: center;
+          border-radius: 50%;
-          align-items: center;
+          margin-left: 1.5rem;
-          flex-direction: column;
+        }
-          margin-bottom: 1rem;
 
-          img {
+        input {
-            border-radius: .4rem;
+          flex: 1;
-            background: whitesmoke;
+          outline: none;
-            padding: 1rem;
+          border: none;
-            width: 3rem;
+          background: @normal-bg-color;
+        }
+
+        .camera {
+          margin-left: 0;
+          margin-right: .5rem;
+          width: 1.4rem;
+          padding: .5rem;
+          border-radius: 50%;
+          background: @chat-bg-color;
+        }
+
+      }
+
+      .record {
+        box-sizing: border-box;
+        height: 4.4rem;
+        margin: 0 1rem;
+        padding: 1rem .5rem;
+        background: @normal-bg-color;
+        border-radius: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        img {
+          right: .5rem;
+          position: absolute;
+          width: 2.4rem;
+          border-radius: 50%;
+          margin-left: 1.5rem;
+        }
+      }
+
+      .options {
+        font-size: 1.4rem;
+        width: 100vw;
+        padding: 1.5rem;
+        height: 30vh;
+        box-sizing: border-box;
+
+        .option-wrapper {
+          box-sizing: border-box;
+          @grid-width: calc((100vw - 3rem) / 4);
+          color: black;
+          display: grid;
+          grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
+
+          .option {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
             margin-bottom: 1rem;
+
+            img {
+              border-radius: .4rem;
+              background: whitesmoke;
+              padding: 1rem;
+              width: 3rem;
+              margin-bottom: 1rem;
+            }
           }
         }
       }
     }
   }
+
+  .preview-img {
+    position: fixed;
+    z-index: 9;
+    top: 0;
+    background: black;
+    width: 100vw;
+    height: 100vh;
+
+    .header {
+      position: fixed;
+      width: 100vw;
+      box-sizing: border-box;
+      padding: @padding-page;
+      display: flex;
+      justify-content: space-between;
+
+      img {
+        width: 2.2rem;
+      }
+    }
+
+  }
+
+  .tooltip {
+    z-index: 9;
+    left: 50%;
+    margin-left: -33%;
+    position: fixed;
+    font-size: 1.2rem;
+    border-radius: .5rem;
+    //padding: 1rem;
+    background: rgb(55, 58, 67);
+    display: flex;
+
+    .options {
+      width: 4.5rem;
+      height: 6rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      img {
+        margin-bottom: .4rem;
+        width: 1.8rem;
+      }
+    }
+
+    .arrow {
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &.bottom {
+        top: -1.4rem;
+        border: .7rem solid transparent;
+        border-bottom: .7rem solid @second-btn-color;
+      }
+
+      &.top {
+        bottom: -1.4rem;
+        border: .7rem solid transparent;
+        border-top: .7rem solid @second-btn-color;
+      }
+    }
+  }
+
+  .red-packet {
+    z-index: 9;
+    top: 0;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .content {
+      width: 75vw;
+      height: 55vh;
+      z-index: 10;
+      position: fixed;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .bg {
+        z-index: 9;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+
+      .wrapper {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        color: #fdd9b3;
+        z-index: 10;
+        position: relative;
+
+        .top {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .avatar {
+          margin-top: 6rem;
+          width: 5.5rem;
+          border-radius: 50%;
+          margin-bottom: 2rem;
+        }
+
+        .money {
+          color: rgb(193, 135, 79);
+          font-size: 4rem;
+          font-weight: bold;
+          margin-top: 1.5rem;
+          margin-bottom: 6.5rem;
+        }
+
+
+        .belong {
+          font-size: 1.2rem;
+          margin-bottom: 3rem;
+        }
+
+        .password {
+          font-size: 1.6rem;
+        }
+
+
+        .notice {
+          margin-top: 15rem;
+          font-size: 1.2rem;
+        }
+
+        .l-button {
+          font-size: 1.6rem;
+          border-radius: .5rem;
+          margin-bottom: 3rem;
+          padding: 1.2rem 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: rgb(120, 48, 45);
+          width: 65vw;
+          background: rgb(255, 217, 132);
+          box-shadow: 0 0 1px;
+
+          &.opening {
+            background: rgb(228, 77, 58);
+
+            img {
+              width: 1.8rem;
+              margin-right: 1rem;
+              animation: animal .8s infinite linear;
+
+              @keyframes animal {
+                0% {
+                  transform: rotate(-360deg);
+                }
+                100% {
+                  transform: rotate(0deg);
+                }
+              }
+            }
+          }
+        }
+
+      }
+
+      .close {
+        bottom: -8vh;
+        position: absolute;
+        width: 3rem;
+      }
+    }
+
+  }
+
 }
-</style>
+
+</style>

src/pages/message/RedPacketDetail.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="RedPacketDetail">
+    <BaseHeader mode="light">
+      <template v-slot:right>
+        <span @click="$no" class="f14" style=" color: rgb(193, 135, 79);">红包记录</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="wrapper">
+        <img :src="$imgPreview(userinfo.avatar)" alt="" class="avatar">
+        <span class="belong">{{ userinfo.nickname }}的红包</span>
+        <div class="password">大吉大利</div>
+        <span class="money">0.01元</span>
+<!--        <span class="notice" @click="$nav('/me/money')">已存入我的零钱，可直接使用></span>-->
+        <span class="notice" @click="$no">已存入我的零钱，可直接使用></span>
+      </div>
+      <img src="../../assets/img/icon/message/chat/money-detail-bg.png" alt="" class="bg">
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "RedPacketDetail",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapState(['userinfo'])
+  },
+  watch: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+#RedPacketDetail {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  font-size: 1.4rem;
+  background: white;
+
+  .content {
+    padding-top: 6rem;
+
+    .wrapper {
+      color: rgb(110, 87, 63);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .avatar {
+        margin-top: 5.5rem;
+        width: 5.5rem;
+        border-radius: 50%;
+        margin-bottom: 2rem;
+      }
+
+      .money {
+        color: rgb(193, 135, 79);
+        font-size: 4rem;
+        font-weight: bold;
+        margin-top: 2.5rem;
+        margin-bottom: 1rem;
+      }
+
+      .belong {
+        font-weight: bold;
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+      }
+
+      .notice {
+        font-size: 1.2rem;
+      }
+
+      .password {
+        font-size: 1.2rem;
+        opacity: .6;
+      }
+    }
+
+    .bg {
+      bottom: 0;
+      position: absolute;
+      width: 100vw;
+    }
+
+  }
+}
+</style>

src/pages/message/components/ChatMessage.vue

@@ -6,8 +6,8 @@
       {{ message.time }}
     </div>
     <template v-else>
-      <img v-if="!isMe" src="../../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+      <img v-if="!isMe" src="../../../assets/img/icon/avatar/3.png" alt="" class="avatar">
-      <div class="chat-wrapper">
+      <div class="chat-wrapper" @click="$emit('itemClick',message)">
         <div class="chat-text"
              v-if="message.type ===  MESSAGE_TYPE.TEXT">
           {{ message.data }}
@@ -72,7 +72,7 @@
              :class="message.data.state !== '未领取' ? 'invalid' : ''"
              v-if="message.type ===  MESSAGE_TYPE.RED_PACKET">
           <div class="top">
-            <img src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <img src="../../../assets/img/icon/message/chat/redpack-logo.webp" alt="">
             <div class="right">
               <div class="title">{{ message.data.title }}</div>
               <div v-if="message.data.state !== '未领取'" class="state">{{ message.data.state }}</div>
@@ -86,7 +86,7 @@
           <img v-for="user in message.loved" src="../../../assets/img/icon/head-image.jpeg" alt="" class="love-avatar">
         </div>
       </div>
-      <img v-if="isMe" src="../../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+      <img v-if="isMe" src="../../../assets/img/icon/avatar/2.png" alt="" class="avatar">
     </template>
   </div>
 </template>
@@ -206,7 +206,7 @@ export default {
   }
 
   .red_packet {
-    border-radius: .3rem;
+    border-radius: 1rem;
     @not-received: rgb(253, 92, 72);
     @received: rgba(253, 92, 72, .8);
     width: 60vw;
@@ -226,7 +226,8 @@ export default {
       border-bottom: 1px solid rgb(253, 124, 81);
 
       img {
-        height: 4rem;
+        border-radius: .3rem;
+        height: 3.8rem;
         margin-right: 1rem;
       }
 
@@ -241,6 +242,7 @@ export default {
     }
 
     .bottom {
+      font-size: 1.2rem;
       padding: .5rem 1rem 1rem 1rem;
     }
   }
@@ -393,7 +395,6 @@ export default {
     background: @chat-bg-color;
   }
 
-
   .loves {
     margin-top: 1rem;
 

src/pages/test/Test.vue

@@ -5,9 +5,9 @@
 </template>
 <script>
 
-import ConfirmDialog from "../components/dialog/ConfirmDialog";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
-import Search from "../components/Search";
+import Search from "../../components/Search";
-import Uploader from "./me/Uploader";
+import Uploader from "../me/Uploader";
 
 export default {
   name: "Test",
@@ -30,7 +30,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../assets/less/index";
+@import "../../assets/less/index";
 
 
 .Test {

src/pages/test/Test2.vue

@@ -120,7 +120,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../assets/less/index";
+@import "../../assets/less/index";
 
 .Test {
   position: fixed;

src/pages/test/Test3.vue

@@ -3,7 +3,7 @@
   </div>
 </template>
 <script>
-import Dom from "../utils/dom";
+import Dom from "../../utils/dom";
 
 export default {
   name: "Test",
@@ -74,7 +74,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../assets/less/index";
+@import "../../assets/less/index";
 
 .test {
   position: fixed;

src/pages/test/Test4.vue

@@ -5,9 +5,9 @@
   </div>
 </template>
 <script>
-import ShareToFriend from "./home/components/ShareToFriend";
+import ShareToFriend from "../home/components/ShareToFriend";
-import BaseButton from "../components/BaseButton";
+import BaseButton from "../../components/BaseButton";
-import Search from "../components/Search";
+import Search from "../../components/Search";
 
 export default {
   name: "Test4",
@@ -34,7 +34,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../assets/less/index";
+@import "../../assets/less/index";
 
 .Test {
   position: fixed;

src/pages/test/Test5.vue

@@ -172,9 +172,9 @@
 </template>
 <script>
 
-import BaseButton from "../components/BaseButton";
+import BaseButton from "../../components/BaseButton";
-import BaseMarquee from "../components/BaseMarquee";
+import BaseMarquee from "../../components/BaseMarquee";
-import Dom from "../utils/dom";
+import Dom from "../../utils/dom";
 
 export default {
   name: "Test4",
@@ -202,7 +202,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../assets/less/index";
+@import "../../assets/less/index";
 
 .Test {
   position: fixed;

src/pages/test/Test6.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="Test6">
+    <p>第{{year}}年</p>
+  </div>
+</template>
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Test6",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  setup() {
+    const year = ref(0)
+    setInterval(() => {
+      year.value++
+    }, 1000)
+    return {
+      year
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+#Test6 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>

src/router/index.js

@@ -41,18 +41,18 @@ import PasswordLogin from "../pages/login/PasswordLogin";
 import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
-import Test from "../pages/Test";
+import Test from "../pages/test/Test";
-import Test2 from "../pages/Test2";
+import Test2 from "../pages/test/Test2";
-import Test3 from "../pages/Test3";
+import Test3 from "../pages/test/Test3";
 import Share2Friend from "../pages/message/Share2Friend";
 import JoinedGroupChat from "../pages/message/JoinedGroupChat";
 import Report from "../pages/home/Report";
 import SubmitReport from "../pages/home/SubmitReport";
 import RequestUpdate from "../pages/me/RequestUpdate";
-import Test4 from "../pages/Test4";
+import Test4 from "../pages/test/Test4";
 import Search from "../pages/home/SearchPage";
 import LivePage from "../pages/home/LivePage";
-import Test5 from "../pages/Test5";
+import Test5 from "../pages/test/Test5";
 import MusicCollect from "../pages/me/collect/MusicCollect";
 import VideoCollect from "../pages/me/collect/VideoCollect";
 import MyMusic from "../pages/me/MyMusic";
@@ -68,6 +68,8 @@ import TaskNotice from "../pages/message/notice/TaskNotice";
 import LiveNotice from "../pages/message/notice/LiveNotice";
 import MoneyNotice from "../pages/message/notice/MoneyNotice";
 import MoreSearch from "../pages/message/MoreSearch";
+import Test6 from "../pages/test/Test6";
+import RedPacketDetail from "../pages/message/RedPacketDetail";
 
 const routes = [
   // {path: '', component: Music},
@@ -78,6 +80,7 @@ const routes = [
   {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
   {path: '/test5', component: Test5},
+  {path: '/test6', component: Test6},
   {path: '/home', component: Index},
   {path: '/home/submit-report', component: SubmitReport},
   {path: '/home/music', component: Music},
@@ -95,8 +98,6 @@ const routes = [
   {path: '/message/more-search', component: MoreSearch},
   {path: '/message/share-to-friend', component: Share2Friend},
   {path: '/message/joined-group-chat', component: JoinedGroupChat},
-  {path: '/message/chat', component: Chat},
-  {path: '/message/chat-detail', component: ChatDetail},
   {path: '/message/fans', component: Fans},
   {path: '/message/all', component: AllMessage},
   {path: '/message/visitors', component: Visitors},
@@ -106,6 +107,9 @@ const routes = [
   {path: '/message/live-notice', component: LiveNotice},
   {path: '/message/money-notice', component: MoneyNotice},
   {path: '/message/notice-setting', component: NoticeSetting},
+  {path: '/message/chat', component: Chat},
+  {path: '/message/chat/detail', component: ChatDetail},
+  {path: '/message/chat/red-packet-detail', component: RedPacketDetail},
 
 
   {path: '/people/find-acquaintance', component: FindAcquaintance},

src/utils/mixin.js

@@ -71,7 +71,7 @@ export default {
           if (pressTimer === null) {
             pressTimer = setTimeout(() => {
               // 执行函数
-              handler();
+              handler(e);
             }, 300)
           }
         }
@@ -85,6 +85,9 @@ export default {
         }
         // 运行函数
         const handler = (e) => {
+          // e.stopImmediatePropagation()
+          e.stopPropagation()
+          e.preventDefault()
           // 执行传递给指令的方法
           binding.value(e)
         };