Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website

qiyunfeng-create

2 天以前 5f00696dfb25bc90034448ceb634ed1ef256681a

 src/views/personalCenter/myMessage.vue

@@ -1,3 +1,206 @@
<template>
  <div>我的消息</div>
  <!-- <page> -->
  <div class="personalPage-box">
    <div class="personalPage-title">我的消息</div>
    <div class="personalPage-content">
      <div class="list-box" v-loading="pages.loading">
        <ul class="listTable" v-if="dataList.length > 0 && !pages.loading">
          <li v-for="(item, index) in dataList" :key="index" class="body flex">
            <div class="icon">
              <img src="@/assets/images/personalCenter/notification.svg" alt="star" />
            </div>
            <div class="flex1 ai-c">
              <p class="title hover" :title="item.name" @click="viewDetail(item)">
                {{ item.name }}
              </p>
              <p class="content" :title="item.description">{{ item.description }}</p>
            </div>
            <span class="createDate">{{ item.createDate }}</span>
          </li>
        </ul>
        <div v-if="dataList.length == 0 && !pages.loading">
          <el-empty :image-size="200" description="暂无数据" />
        </div>
      </div>
      <div class="pagination-box" v-if="dataList.length > 0 && !pages.loading">
        <el-pagination
          v-model:current-page="pages.page"
          v-model:page-size="pages.pageSize"
          layout="total, prev, pager, next"
          :total="pages.count"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog align-center v-model="detailDialog" title="消息" class="messageDialog">
      <div>
        <div class="title">{{ dataInfo.name }}</div>
        <div class="content" v-html="dataInfo.content"></div>
      </div>
    </el-dialog>
  </div>
  <!-- </page> -->
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject, watch } from "vue";
import moment from "moment";
import { useUserStore } from "@/store";
const userStore = useUserStore();
const MG: any = inject("MG");
const config: any = inject("config");
let dataList = ref([]);
let pages = reactive({
  page: 1,
  pageSize: 10,
  count: 0,
  loading: false,
});
const detailDialog = ref(false);
let dataInfo = reactive({
  name: "",
  content: "",
});

function getDataList() {
  pages.loading = true;
  MG.app
    .getAppMessageList({
      appRefCode: config.appRefCode,
      start: (pages.page - 1) * pages.pageSize,
      size: pages.pageSize,
      sort: {
        type: "Desc",
        field: "CreateDate",
      },
    })
    .then((res) => {
      pages.count = res.totalSize;
      res.datas.forEach((item) => {
        item.createDate = moment(item.createDate).format("YYYY-MM-DD HH:mm:ss");
      });
      dataList.value = res.datas;
      pages.loading = false;
    })
    .catch(() => {
      pages.loading = false;
    });
}
onMounted(() => {
  getDataList();
});

watch(
  () => userStore?.token,
  () => {
    getDataList();
  }
);

const handleCurrentChange = (val: number) => {
  pages.page = val;
  getDataList();
};

function viewDetail(data) {
  MG.app
    .getMessage({
      messageId: data.id,
    })
    .then((res) => {
      if (res) {
        dataInfo.name = res.name;
        dataInfo.content = res.content;
        detailDialog.value = true;
      }
    });
}
</script>
<style lang="less" scoped>
.listTable {
  .body {
    padding: 15px 0;
    border-bottom: 1px solid #ededed;

    .icon {
      width: 36px;

      img {
        margin-top: 2px;
        width: 22px;
        height: 22px;
      }
    }

    .title {
      font-weight: bold;
      line-height: 24px;
      height: 24px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .content {
      height: 45px;
      line-height: 24px;
      display: -webkit-box;
      margin: 5px 0;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .createDate {
      line-height: 24px;
      padding-left: 20px;
      color: #949494;
    }
  }
}

.list-box {
  min-height: 570px;
}

.pagination-box {
  display: flex;
  justify-content: center;
}

.messageDialog {
  width: 600px;

  .title {
    line-height: 22px;
    font-weight: bold;
  }

  .content {
    margin-top: 10px;
    line-height: 22px;
  }
}
</style>
<style lang="less">
.messageDialog {
  .el-dialog__header {
    padding: 15px;
    margin-right: 0;
    border-bottom: 1px solid #f4f4f4;
  }

  .el-dialog__title {
    font-weight: bold;
    font-size: 16px;
  }

  .el-dialog__headerbtn {
    top: 6px;
    right: 6px;
  }
}
</style>