ylrz_his_scrm_adminUI/src/components/ComplaintMsgDialog/index.vue

<template>
  <el-dialog
    title="投诉提醒"
    :visible.sync="visible"
    width="480px"
    :close-on-click-modal="false"
    :show-close="true"
    custom-class="complaint-msg-dialog"
    @close="handleClose"
    center
  >
    <div class="msg-content">
      <div class="msg-icon">
        <i class="el-icon-warning-outline"></i>
      </div>
      <div class="msg-text">
        <h3>{{ msgData.title }}</h3>
        <p>{{ msgData.content }}</p>
        <div class="msg-stats">
          <div class="stat-item">
            <span class="stat-label">未处理消息</span>
            <span class="stat-value">{{ unreadCount }}条</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">未处理率</span>
            <span class="stat-value percent">{{ unreadPercent }}%</span>
          </div>
        </div>
        <div class="msg-time" v-if="msgData.createTime">
          <i class="el-icon-time"></i>
          {{ msgData.createTime }}
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleKnow" size="medium">
        <i class="el-icon-check"></i> 知道了
      </el-button>
      <el-button type="primary" @click="handleGoProcess" size="medium">
        <i class="el-icon-right"></i> 去处理
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getLatestUnreadMsg, markAsRead } from '@/api/crm/complaintMsg'

export default {
  name: 'ComplaintMsgDialog',
  data() {
    return {
      visible: false,
      msgData: {
        msgId: null,
        title: '',
        content: '',
        actionUrl: '',
        createTime: ''
      },
      unreadCount: 0,
      totalCount: 0
    }
  },
  computed: {
    unreadPercent() {
      if (this.totalCount === 0) return 0
      return Math.round((this.unreadCount / this.totalCount) * 100)
    }
  },
  methods: {
    checkNewMsg() {
      getLatestUnreadMsg().then(res => {
        if (res.code === 200 && res.data) {
          if (res.data.msg) {
            this.msgData = res.data.msg
            this.unreadCount = res.data.unreadCount || 0
            this.totalCount = res.data.totalCount || 0
            this.visible = true
          }
        }
      }).catch(err => {
        console.error('获取投诉消息失败:', err)
      })
    },
    handleKnow() {
      this.visible = false
    },
    handleGoProcess() {
      if (this.msgData.msgId) {
        markAsRead(this.msgData.msgId).then(() => {
          this.visible = false
          this.$emit('msg-read')
          this.navigateToUrl('/course/userCourseComplaintRecord')
          setTimeout(() => {
            this.checkNewMsg()
          }, 500)
        })
      } else {
        this.visible = false
        this.navigateToUrl('/course/userCourseComplaintRecord')
      }
    },
    navigateToUrl(url) {
      if (url.endsWith('/index')) {
        url = url.slice(0, -6)
      }
      if (!url.startsWith('/')) {
        url = '/' + url
      }
      this.$router.push(url).catch(err => {
        console.error('路由跳转失败:', err)
      })
    },
    handleClose() {
      this.visible = false
    },
    show() {
      this.checkNewMsg()
    }
  }
}
</script>

<style scoped>
.complaint-msg-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.msg-content {
  display: flex;
  align-items: flex-start;
  padding: 24px 16px;
}

.msg-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.msg-icon i {
  font-size: 28px;
  color: #fff;
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

.msg-text {
  flex: 1;
}

.msg-text h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.msg-text p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.msg-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  padding: 12px;
  background: #fef0f0;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #f56c6c;
}

.stat-value.percent {
  color: #e6a23c;
}

.msg-time {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
}

.msg-time i {
  margin-right: 4px;
}

.dialog-footer {
  text-align: center;
  padding: 10px 20px 20px;
}

.dialog-footer .el-button {
  min-width: 100px;
}

.dialog-footer .el-button i {
  margin-right: 4px;
}
</style>

<style>
.complaint-msg-dialog .el-dialog__header {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  padding: 16px 20px;
}

.complaint-msg-dialog .el-dialog__title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.complaint-msg-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 18px;
}

.complaint-msg-dialog .el-dialog__body {
  padding: 0;
}
</style>