|
|
@@ -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>
|
