temu-plugin/src/view/Welcome.vue

<template>
  <div class="admin-home" v-loading="isLoading">
    <ai-card hideTitle>
      <div class="content">
        <p>“TEMU助手”是致力于为“拼多多跨境卖家中心”提供自动化服务的智能工具，可以提高TEMU平台的运营及管理效率，欢迎大家关注微信公众号“TEMU助手”，与我们沟通交流，共同创造最有助于卖家发展的助手功能，助力广大卖家，让中国货走向全世界~</p>
      </div>
    </ai-card>
    <div class="middle">
      <ai-card title="通知公告">
        <div class="list">
          <div class="item" v-for="(item, index) in noticeList" :key="index" @click="info = item, isShow = true">
            <div class="left">
              <el-tag size="small" effect="dark" :type="item.level === '0' ? '' : 'danger'">{{ item.level === '0' ? '一般' : '重要' }}</el-tag>
              <h2 :title="item.title">{{ item.title }}</h2>
            </div>
            <span>{{ item.createTime }}</span>
            <!-- <img src="../assets/images/right-b.png" /> -->
          </div>
          <AiEmpty v-if="!noticeList.length"></AiEmpty>
        </div>
      </ai-card>
      <ai-card title="更新记录">
        <div class="list">
          <div class="item" v-for="(item, index) in changeLogList" :key="index" @click="showInfo(item, index)">
            <div class="left">
              <el-tag v-if="version !== item.version && index === 0" size="small" effect="dark" type="danger" @click.stop="download(item.downloadUrl)">新版本下载</el-tag>
              <h2 :title="item.title">{{ item.title }}</h2>
            </div>
            <span>{{ item.createTime }}</span>
          </div>
          <AiEmpty v-if="!changeLogList.length"></AiEmpty>
        </div>
      </ai-card>
    </div>
    <ai-card title="常用工具" v-if="false">
      <div class="">
        dsad
      </div>
    </ai-card>
    <AiDialog
      title="详情"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      customFooter
      :show-close="!isImportant"
      @close="info = {}, isShowDownload = false"
      width="690">
      <div class="news">
        <h2>{{ info.title }}</h2>
        <p>{{ info.content }}</p>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="read" type="primary" style="width: 140px" v-if="!info.version">{{ isImportant ? '我已阅读' : '关闭' }}</el-button>
        <el-button type="primary" style="width: 140px" v-if="info.version" @click="isShow = false">关闭</el-button>
      </div>
    </AiDialog>
  </div>
</template>

<script>
  export default {
    name: 'AdminHome',

    data () {
      return {
        noticeList: [],
        isLoading: false,
        isShow: false,
        info: {},
        changeLogList: [],
        isImportant: false,
        version: '',
        isShowDownload: false
      }
    },

    created () {
      const devVersion = require('../manifest.development.json').version
      const prodVersion = require('../manifest.production.json').version
      this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
      console.log(this.version)
      this.getNoticeList()
      this.getChangelog()
      this.getMyNewestNotice()
    },

    methods: {
      getNoticeList () {
        this.$http.post('/api/notice/page?size=20').then(res => {
          if (res.code === 0) {
            this.noticeList = res.data.records
          }
        })
      },

      showInfo (info, index) {
        if (index === 0) {
          this.isShowDownload = true
        }
        this.info = info
        console.log(this.info.version === this.version)
        this.isShow = true
      },

      download (url) {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('target', '_blank')
        link.setAttribute('download', `TEMU助手-${url}.zip`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },

      read () {
        if (this.isImportant) {
          this.$http.post('/api/notice/read').then(res => {
            if (res.code === 0) {
              this.isImportant = false
              this.isShow = false
            }
          })
        } else {
          this.isShow = false
        }
      },

      getMyNewestNotice () {
        this.$http.post('/api/notice/getMyNewestNotice').then(res => {
          if (res.code === 0) {
            if (res.data) {
              this.isImportant = true
              this.info = res.data
              this.isShow = true
            }
          }
        })
      },

      getChangelog () {
        this.$http.post('/api/changelog/page?size=100').then(res => {
          if (res.code === 0) {
            this.changeLogList = res.data.records
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-home {
    padding: 20px 20px;

    .news {
      min-height: 250px;

      h2 {
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #000;
      }

      span {
        display: block;
        margin-bottom: 20px;
        text-align: right;
        color: #999;
      }

      p {
        line-height: 1.5;
        margin-bottom: 14px;
        color: #333;
        font-size: 15px;
        white-space: pre-line;
      }
    }

    .content {
      p {
        line-height: 1.3;
        margin-bottom: 14px;
        color: #333;
        font-size: 14px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }


    .list {
      overflow: auto;
      padding-bottom: 20px;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 49px;
        cursor: pointer;
        color: #1f2635;
        transition: all .3s ease-in-out;
        border-bottom: 1px solid #f4f4f4;

        .left, .right {
          display: flex;
          align-items: center;
        }

        .left {
          max-width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          h2 {
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .el-tag {
            margin-right: 10px;
          }
        }

        & > span {
          color: #999;
        }

        &:hover {
          color: #1FBAD6;
        }
      }
    }

    .middle {
      display: flex;
      height: 400px;

      & > section {
        flex: 1;

        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
</style>