From c8361f1a9080a9e52d0ac772bd59697ad318cfe9 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Mon, 05 Jan 2026 10:44:24 +0800
Subject: [PATCH] 1
---
src/page/user/compontents/notify-list.vue | 349 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 210 insertions(+), 139 deletions(-)
diff --git a/src/page/user/compontents/notify-list.vue b/src/page/user/compontents/notify-list.vue
index d363a43..cddfdef 100644
--- a/src/page/user/compontents/notify-list.vue
+++ b/src/page/user/compontents/notify-list.vue
@@ -9,63 +9,43 @@
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
- <li class="list-body" v-for="(item) in list" :key="item.id">
- <div class="order-info-box">
- <div class="order-title">
- <span :class="['main','cart']">
- <!-- <i v-if="item.payChannel == 0 || item.payChannel == '支付宝'" style="color:#1296db;"
- class="iconfont icon-zhifubao"></i>
- <i v-if="item.payChannel == '微信' " style="color:#1296db;" class="iconfont icon-weixin"></i>
- <i v-if="item.payChannel == 1 || item.payChannel == '对公转账'" style="color:#1296db;"
- class="iconfont icon-yinlian"></i> -->
- {{item.typeName}}
- </span>
- <span class="payNumber">{{ $t("hj80") }}：<span :style="{color:$state.theme =='red'?'#BB1815':''}">{{(item.addTime)}}</span></span>
- <span
- :class="item.status == 2?'green pull-right':item.status != 2?'red pull-right':'red pull-right'">
- <i v-if="item.status == 2" class="iconfont icon-tongguo4 animated bounceIn"></i>
- <i v-if="item.status != 2 " class="iconfont icon-dengdai animated bounceInDown"></i>
- <!-- 1 => 成功 2 失败 3取消 4 等待 -->
- {{item.status == 2?$t("jy372"):$t("jy373")}}
-
- </span>
- <!-- <span class="secondary ">123456789</span> -->
+ <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="order-info">
- <!-- <p class="clearfix">
- <span class="col-xs-5">{{item.orderDesc}}</span>
- </p> -->
- <!-- <p class="clearfix">
- <span class="col-xs-12">订单号:<b>{{item.orderSn}}</b></span>
- </p>
- <p class="clearfix">
- <span class="secondary col-xs-6">时间:
- <b v-if="item.addTime">{{new Date(item.addTime) | timeFormat}}</b>
- <b v-else></b>
- </span>
- </p> -->
- <div class="info-mix ">
- <span class="info-item">{{ $t("hj234") }}:<b>{{item.content}}</b></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>
- <!-- <div class="capital">
- <div class="pro">
- {{item.payChannel}} <span class="pull-right">金额:{{item.payAmt}}</span>
- </div>
- <div class=" clearfix">
- <div class="col-xs-4"></div>
- <div class="col-xs-8">
- <span class="pull-right">
- {{new Date(item.addTime) | timeFormat}}
- </span>
- </div>
- </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>
@@ -80,9 +60,10 @@
return {
pageNum: 1,
pageSize: 15,
- list: {
- list: []
- }
+ list: [],
+ loading: false,
+ detailVisible: false,
+ currentMessage: {}
}
},
watch: {},
@@ -141,11 +122,27 @@
item.addTime = time
return item
})
- // this.updateMessageStatus()
+ // 查看消息后，更新消息状态为已读
+ 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>
@@ -155,101 +152,175 @@
}
.table-list {
- padding: 0.2rem 0;
+ padding: 0.2rem 0.3rem;
+ list-style: none;
+ margin: 0;
+ }
- .list-body {
- padding: 0.1rem 0.3rem;
-
- .capital:nth-child(1) {
- border-top: 0.01rem solid #3f444a;
- }
-
- .capital {
- padding: 0.2rem;
- // border-radius: 0.2rem;
- border-bottom: 0.01rem solid #3f444a;
-
- div {
- line-height: 0.4rem;
- }
-
- .col-xs-4 {
- padding-left: 0;
- padding-right: 0;
- }
-
- .pro {
- color: #999;
- }
- }
+ .message-item {
+ margin-bottom: 0.3rem;
+ cursor: pointer;
+
+ &:last-child {
+ margin-bottom: 0;
}
}
- .payNumber {
- font-size: 0.24rem;
- font-weight: bold;
- span {
- font-family: lightnumber;
+ .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;
}
}
- /deep/.order-info-box {
- background-color: #16171d;
- padding: 0;
- .main{
- padding: 0.05rem .15rem;
- letter-spacing:0;
- text-align: center;
- margin-right: .16rem;
- font-size: 0.24rem;
- border-radius: 3px;
- &.ali {
- background-color: #138EB4;
- }
- &.cart {
- background-color: #7266BA;
- }
- &.wechat {
- background-color: #009C46;
- }
- }
- .order-info {
- border-bottom: 1px solid #2e3237;
- padding-bottom: .3rem;
- }
- .order-title{
- border-bottom: none;
- }
- .info-mix{
- display: flex;
- font-size: .2rem;
- width: 100%;
- .info-item {
- margin-right: .2rem;
- color: #fff8;
- }
- }
- }
- .red-theme {
- .list-body {
- background-color: #fff;
- }
- .order-info-box {
- background-color: #fff;
- .order-info {
- border-bottom-color: #e9e9e9;
- }
- }
- .order-info-box .main.cart {
+
+ .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;
}
- .payNumber {
- color: #000;
+
+ .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);
+ }
}
- .order-info-box .info-mix .info-item{
- color: #666666;
+ }
+
+ .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;
}
- .load-all{
+ }
+
+ .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>
--
Gitblit v1.9.3