1

admin

2026-01-05 c8361f1a9080a9e52d0ac772bd59697ad318cfe9

 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>