更新 views/chat ChatDialogue.vue

src/views/chat/ChatDialogue.vue

@@ -57,11 +57,22 @@
               </div>
             </div>
 
-            <div v-else-if="[5, 6, 7, 99].includes(msg.msgType)" class="msg-file">
+            <div
+              v-else-if="[5, 6, 7, 99].includes(msg.msgType)"
+              :class="['msg-file', { 'is-expired': msg.fileExpired }]"
+              @click="msg.fileExpired ? handleExpiredClick() : handleFileClick(msg)"
+            >
               <div class="file-info">
                 <div class="file-name">{{ msg.fileName || '未知文件' }}</div>
-                <div class="file-size">{{ msg.fileSize || '0 KB' }}</div>
+
+                <div v-if="msg.fileExpired" class="file-expired-tips">
+                  <i class="el-icon-warning" /> 文件已过期
+                </div>
+                <div v-else class="file-size">
+                  {{ msg.fileSize || '0 KB' }}
+                </div>
               </div>
+
               <div class="file-icon-box">
                 <i :class="getFileIcon(msg.msgType)" />
               </div>
@@ -73,6 +84,38 @@
                 {{ line }}
               </div>
             </div>
+
+            <div v-else-if="msg.msgType === 9" class="msg-transfer" @click="handleTransferClick(msg)">
+              <div class="transfer-main">
+                <div class="transfer-icon-box">
+                  <i class="el-icon-refresh" />
+                </div>
+                <div class="transfer-info">
+                  <div class="transfer-amount">¥{{ msg.amount || '0.00' }}</div>
+                  <div class="transfer-status">
+                    {{ msg.transferStatus === 1 ? '转账给对方' : '已被接收' }}
+                  </div>
+                </div>
+              </div>
+              <div class="transfer-footer">微信转账</div>
+            </div>
+
+            <div
+              v-else-if="msg.msgType === 10"
+              :class="['msg-lucky-money', { 'is-opened': msg.hbStatus === 1 }]"
+              @click="handleLuckyMoneyClick(msg)"
+            >
+              <div class="hb-main">
+                <div class="hb-icon-box">
+                  <i :class="msg.hbStatus === 1 ? 'el-icon-folder-opened' : 'el-icon-wallet'" />
+                </div>
+                <div class="hb-info">
+                  <div class="hb-title">{{ msg.content || '恭喜发财，大吉大利' }}</div>
+                  <div v-if="msg.hbStatus === 1" class="hb-status">红包已被领完</div>
+                </div>
+              </div>
+              <div class="hb-footer">微信红包</div>
+            </div>
           </div>
         </div>
       </div>
@@ -195,6 +238,67 @@ export default {
     this.parseRouteParams()
   },
   methods: {
+    handleTransferClick(msg) {
+      if (msg.transferStatus === 1) {
+        this.$message.success(`点击了转账，金额：${msg.amount} 元，确认收钱逻辑待对接`)
+        // 真实业务：调用后端确认收钱接口，然后把 msg.transferStatus 改为 2
+      } else {
+        this.$message.info('该转账已完成收钱')
+      }
+    },
+    handleLuckyMoneyClick(msg) {
+      if (msg.hbStatus !== 1) {
+        this.$message.success('啪！打开红包动画，恭喜发财！')
+        // 真实业务：弹出红包开启动画组件，调用抢红包接口，成功后将 msg.hbStatus 改为 1
+      } else {
+        this.$message.info('查看该红包的领取详情列表')
+      }
+    },
+    /**
+     * 点击过期文件的提示
+     */
+    handleExpiredClick() {
+      this.$message.error('该文件已超过7天有效期，无法下载或预览')
+    },
+    handleFileClick(msg) {
+      this.$message.info('get file ' + msg.content)
+      // 1. 校验下载地址是否存在
+      // 提示：我们在 initFirstScreen 中清洗数据时，已经把 "文件名|大小|地址" 切割并赋值给了 msg.fileUrl
+      const url = msg.fileUrl
+      if (!url) {
+        this.$message.warning('该文件暂不支持下载（地址失效）')
+        return
+      }
+
+      // 2. 根据文件后缀或 msgType 判断策略
+      // msgType 对应关系参考：5-Word, 6-Excel, 7-PDF, 99-ZIP
+      if (msg.msgType === 7 || url.toLowerCase().endsWith('.pdf')) {
+        // ==== 策略 A：在线预览 (主要针对 PDF 或高版本浏览器支持的公有流) ====
+        // window.open(url, '_blank')
+      } else {
+        // ==== 策略 B：强制下载 (Word, Excel, Zip 等) ====
+        // this.downloadFile(url, msg.fileName || '未知文件')
+      }
+    },
+
+    /**
+     * 触发浏览器原生下载二进制流/文件流
+     */
+    downloadFile(url, fileName) {
+      this.$message.info('正在发起文件下载...')
+
+      // 如果文件和前端同源，或后端支持 CROS 跨域，推荐使用 <a> 标签 + download 属性
+      const link = document.createElement('a')
+      link.href = url
+      link.style.display = 'none'
+      // 强制指定下载下来的文件名
+      link.setAttribute('download', fileName)
+      document.body.appendChild(link)
+      link.click()
+
+      // 释放节点
+      document.body.removeChild(link)
+    },
     /**
      * 仿微信聊天时间精细化格式化引擎
      * @param {String|Date} timeStr 后端返回的 ISO 或标准时间字符串 (例如 msg.createdAt)
@@ -301,6 +405,7 @@ export default {
               msg.fileName = parts[0] || '未知文件.docx'
               msg.fileSize = parts[1] || '0 KB'
               msg.fileUrl = parts[2] || ''
+              msg.fileExpired = true
             }
           })
 
@@ -819,4 +924,137 @@ export default {
   border-radius: 4px;
   letter-spacing: 0.3px;
 }
+
+/* 已过期文件气泡的特殊样式（整体略微变灰，暗示不可点击） */
+.msg-file.is-expired {
+  background-color: #fafafa;
+  border-color: #e8e8e8;
+  cursor: not-allowed; /* 鼠标悬停时显示禁用图标 */
+}
+.msg-file.is-expired:active {
+  background-color: #fafafa; /* 取消点击变暗的反馈 */
+}
+
+/* 红字和感叹号图标样式 */
+.file-expired-tips {
+  font-size: 12px;
+  color: #fa5151; /* 微信经典报错红 */
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+/* 让感叹号图标稍微有点间距 */
+.file-expired-tips i {
+  margin-right: 4px;
+  font-size: 13px;
+}
+
+/* 当文件过期时，让右侧的文件图标半透明，进一步强化过期视觉 */
+.is-expired .file-icon-box {
+  opacity: 0.4;
+}
+
+/* ==================== 转账消息专属样式 ==================== */
+.msg-transfer {
+  width: 230px;
+  background-color: #fa9d3b; /* 微信转账标准橙 */
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+.transfer-main {
+  display: flex;
+  align-items: center;
+  padding: 14px 16px;
+  color: #fff;
+}
+.transfer-icon-box {
+  font-size: 32px;
+  margin-right: 14px;
+  background: rgba(255, 255, 255, 0.2);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.transfer-icon-box i {
+  transform: rotate(45deg); /* 让刷新图标斜过来更像转账箭头 */
+}
+.transfer-amount {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.transfer-status {
+  font-size: 12px;
+  opacity: 0.9;
+  margin-top: 4px;
+}
+.transfer-footer {
+  background-color: #fff;
+  padding: 6px 16px;
+  font-size: 11px;
+  color: #999;
+  border-top: 1px solid rgba(0,0,0,0.03);
+}
+
+/* ==================== 红包消息专属样式 ==================== */
+.msg-lucky-money {
+  width: 230px;
+  background-color: #fa5151; /* 微信红包标志红 */
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  transition: opacity 0.2s;
+}
+.hb-main {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  color: #fff;
+}
+.hb-icon-box {
+  font-size: 34px;
+  color: #fce3a1; /* 微信红包的金黄色盖章色 */
+  margin-right: 14px;
+  display: flex;
+  align-items: center;
+}
+.hb-info {
+  flex: 1;
+  overflow: hidden;
+}
+.hb-title {
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hb-status {
+  font-size: 11px;
+  color: #fce3a1;
+  margin-top: 3px;
+}
+.hb-footer {
+  background-color: #fff;
+  padding: 6px 16px;
+  font-size: 11px;
+  color: #999;
+  border-top: 1px solid rgba(0,0,0,0.03);
+}
+
+/* 微信特色：已被领完的红包，整体卡片颜色会淡化变灰变粉 */
+.msg-lucky-money.is-opened {
+  background-color: #fca1a1; /* 浅淡红 */
+}
+.msg-lucky-money.is-opened .hb-icon-box {
+  color: rgba(255,255,255,0.6); /* 金色变白透明 */
+}
 </style>