dvcp_v2_webapp/project/xiushan/apps/AppMassMessage/mmDetail.vue

<template>
  <section class="mmDetail">
    <ai-detail>
      <ai-title slot="title" title="留言详情" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})">
        <template #rightBtn>
          <el-button type="primary">回复留言</el-button>
          <el-button>关闭留言</el-button>
        </template>
      </ai-title>
      <template #content>
        <el-form size="small">
          <ai-card class="header">
            <template #title>
              <b v-text="detail.title||'标题'"/>
              <el-row type="flex">
                <el-form-item label="留言编号">{{ detail.messageCode || "-" }}</el-form-item>
                <el-form-item label="留言时间">{{ detail.createTime || "-" }}</el-form-item>
                <el-form-item label="留言人">{{ detail.leaveName || "-" }}</el-form-item>
              </el-row>
              <ai-icon type="svg" :icon="statusImages[detail.status||0]"/>
            </template>
            <template #content>
              <div v-html="detail.content"/>
            </template>
          </ai-card>
          <ai-card title="沟通记录">
            <template #content>
              <div class="commentItem" v-for="op in detail.appLeaveMessageReplyList" :key="op.id">
                <b v-text="userTypeLabel[op.userType]"/>
                <div :class="{reply:op.userType==1}">
                  <div v-text="op.content"/>
                  <div class="rightText" v-text="`留言时间：${op.createTime}`"/>
                </div>
              </div>
              <ai-empty v-if="!detail.appLeaveMessageReplyList"/>
            </template>
          </ai-card>
        </el-form>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "mmDetail",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    statusImages() {
      return {
        0: "iconno_response",
        1: "iconreplied",
        2: "iconfinished"
      }
    },
    userTypeLabel() {
      return {
        0: "留言",
        1: "回复"
      }
    }
  },
  data() {
    return {
      detail: {},
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.instance.post("/appleavemessage/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.mmDetail {
  height: 100%;

  ::v-deep.header {
    position: relative;

    .el-form-item {
      width: 33%;
    }

    .aibar {
      height: auto;

      .aibar-left {
        width: 100%;
        font-weight: normal;
      }

      b {
        line-height: 56px;
      }
    }

    .AiIcon {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 80px;
      height: 80px;
    }
  }

  .commentItem {
    min-height: 50px;
    margin-bottom: 40px;

    & > b {
      font-size: 14px;
      font-weight: normal;
      background: #408CFF;
      color: #fff;
      box-sizing: border-box;
      display: block;
      border-radius: 4px 4px 0 0;
      overflow: hidden;
      height: 20px;
      line-height: 20px;
      width: 50px;
      text-align: center;
    }

    & > div {
      position: relative;
      padding: 16px 8px;
      box-sizing: border-box;
      font-size: 14px;
      color: #000;
      background: #fff;
      border: 1px solid #ccc;

      &.reply {
        background: #ddd;
      }
    }

    .rightText {
      text-align: right;
      color: #666;
      font-size: 12px;
    }
  }
}
</style>