<template>
|
<div>
|
<div v-if="list.length<=0" class="empty text-center">
|
{{ $t('hj228') }}
|
</div>
|
<div v-else>
|
<ul
|
class="table-list"
|
v-infinite-scroll="loadMore"
|
infinite-scroll-disabled="loading"
|
infinite-scroll-distance="10">
|
<li class="message-item" v-for="(item) in list" :key="item.id" @click="showMessageDetail(item)">
|
<div class="message-card">
|
<div class="message-header">
|
<span class="message-type">{{item.typeName}}</span>
|
<span class="message-status" :class="item.status == 2 ? 'read' : 'unread'">
|
{{item.status == 2 ? $t("jy372") : $t("jy373")}}
|
</span>
|
</div>
|
<div class="message-content">
|
<p class="message-text">{{item.content.length > 80 ? item.content.substring(0, 80) + '...' : item.content}}</p>
|
</div>
|
<div class="message-footer">
|
<span class="message-time">{{item.addTime}}</span>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
|
<!-- 消息详情弹窗 -->
|
<mt-popup v-model="detailVisible" position="center" class="message-detail-popup">
|
<div class="popup-header">
|
<span class="popup-title">{{ currentMessage.typeName || '消息详情' }}</span>
|
<span class="popup-close" @click="detailVisible = false">×</span>
|
</div>
|
<div class="popup-content">
|
<div class="detail-time">
|
<span>{{ $t("hj80") }}：{{ currentMessage.addTime }}</span>
|
<span :class="currentMessage.status == 2 ? 'status-read' : 'status-unread'">
|
{{ currentMessage.status == 2 ? $t("jy372") : $t("jy373") }}
|
</span>
|
</div>
|
<div class="detail-content">
|
{{ currentMessage.content }}
|
</div>
|
</div>
|
</mt-popup>
|
</div>
|
</template>
|
|
<script>
|
import { Toast } from 'mint-ui'
|
import * as api from '@/axios/api'
|
|
export default {
|
components: {},
|
props: {},
|
data () {
|
return {
|
pageNum: 1,
|
pageSize: 15,
|
list: [],
|
loading: false,
|
detailVisible: false,
|
currentMessage: {}
|
}
|
},
|
watch: {},
|
computed: {},
|
created () {},
|
mounted () {
|
this.getlist()
|
},
|
methods: {
|
async getListDetail () {
|
let opt = {
|
payChannel: '', // 支付方式
|
orderStatus: '', // 订单状态
|
pageNum: this.pageNum,
|
pageSize: 15
|
}
|
let data = await api.rechargeList(opt)
|
if (data.status === 0) {
|
data.data.list.forEach(element => {
|
this.list.push(element)
|
})
|
this.total = data.data.total
|
} else {
|
Toast(data.msg)
|
}
|
},
|
async loadMore () {
|
return
|
if (this.list.length < 10 || this.total <= this.pageNum * this.pageNum) {
|
return
|
}
|
this.loading = true
|
// 加载下一页
|
this.pageNum++
|
await this.getListDetail()
|
this.loading = false
|
},
|
Formater(timestamp) {
|
let time = new Date(timestamp)
|
let dateStr = time.toLocaleDateString()
|
let timeStr = time.toLocaleTimeString()
|
console.log(dateStr,timeStr)
|
return (dateStr+timeStr)
|
},
|
async getlist () {
|
// 获取 提现记录
|
let opts = {
|
pageNum: this.pageNum,
|
pageSize: 10,
|
userId: 0
|
}
|
let data = await api.getNoticeList(opts)
|
if (data.status === 0) {
|
this.list = data.data.list.map(item => {
|
let time = this.Formater(item.addTime)
|
item.addTime = time
|
return item
|
})
|
// 查看消息后，更新消息状态为已读
|
this.updateMessageStatus()
|
} else {
|
Toast(data.msg)
|
}
|
},
|
// 更新消息状态为已读
|
async updateMessageStatus() {
|
try {
|
await api.updateMessageStatus()
|
// 通知父组件更新未读数量
|
this.$emit('messageRead')
|
} catch (error) {
|
console.error('更新消息状态失败:', error)
|
}
|
},
|
// 显示消息详情
|
showMessageDetail(item) {
|
this.currentMessage = item
|
this.detailVisible = true
|
}
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.wrapper {
|
padding-top: 0.9rem;
|
}
|
|
.table-list {
|
padding: 0.2rem 0.3rem;
|
list-style: none;
|
margin: 0;
|
}
|
|
.message-item {
|
margin-bottom: 0.3rem;
|
cursor: pointer;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.message-card {
|
background-color: #1e1f25;
|
border-radius: 0.2rem;
|
padding: 0.3rem;
|
transition: all 0.3s ease;
|
|
&:active {
|
transform: scale(0.98);
|
background-color: #25262d;
|
}
|
}
|
|
.message-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 0.2rem;
|
|
.message-type {
|
display: inline-block;
|
padding: 0.05rem 0.15rem;
|
background-color: #7266BA;
|
color: #fff;
|
border-radius: 0.1rem;
|
font-size: 0.22rem;
|
font-weight: 500;
|
}
|
|
.message-status {
|
font-size: 0.22rem;
|
padding: 0.05rem 0.1rem;
|
border-radius: 0.1rem;
|
|
&.read {
|
color: #52c41a;
|
background-color: rgba(82, 196, 26, 0.1);
|
}
|
|
&.unread {
|
color: #ff4d4f;
|
background-color: rgba(255, 77, 79, 0.1);
|
}
|
}
|
}
|
|
.message-content {
|
margin-bottom: 0.2rem;
|
|
.message-text {
|
font-size: 0.28rem;
|
line-height: 1.5;
|
color: rgba(255, 255, 255, 0.85);
|
margin: 0;
|
word-break: break-word;
|
}
|
}
|
|
.message-footer {
|
display: flex;
|
justify-content: flex-end;
|
|
.message-time {
|
font-size: 0.22rem;
|
color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
|
// 消息详情弹窗样式
|
/deep/.message-detail-popup {
|
width: 85%;
|
max-width: 600px;
|
border-radius: 0.2rem;
|
overflow: hidden;
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0.4rem 0.3rem;
|
background-color: #7266BA;
|
color: #fff;
|
|
.popup-title {
|
font-size: 0.36rem;
|
font-weight: bold;
|
}
|
|
.popup-close {
|
font-size: 0.5rem;
|
cursor: pointer;
|
line-height: 1;
|
&:hover {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.popup-content {
|
padding: 0.4rem 0.3rem;
|
background-color: #fff;
|
max-height: 60vh;
|
overflow-y: auto;
|
|
.detail-time {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
border-bottom: 1px solid #e9e9e9;
|
font-size: 0.24rem;
|
color: #666;
|
|
.status-read {
|
color: #52c41a;
|
}
|
|
.status-unread {
|
color: #ff4d4f;
|
}
|
}
|
|
.detail-content {
|
font-size: 0.28rem;
|
line-height: 1.6;
|
color: #333;
|
white-space: pre-wrap;
|
word-break: break-word;
|
}
|
}
|
}
|
|
// 红色主题样式
|
.red-theme {
|
.message-card {
|
background-color: #fff;
|
box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.05);
|
|
&:active {
|
background-color: #f5f5f5;
|
}
|
}
|
|
.message-content .message-text {
|
color: #333;
|
}
|
|
.message-footer .message-time {
|
color: #999;
|
}
|
|
/deep/.message-detail-popup {
|
.popup-content {
|
background-color: #fff;
|
}
|
}
|
}
|
</style>
|
