sc_startup/src/renderer/components/StartUpPage/SoftwareDetail.vue

<template>
  <div class="software-detail" v-loading="loading">
    <div class="pt-3" style="padding-left: 2.5%">
      <div class="media">
        <img class="mr-3" :src="items.src" width="50" height="50" :alt="items.title">
        <div class="media-body">
          <h5 class="mt-0 mb-1">{{ items.title }}</h5>
          {{ items.productName }}
        </div>
      </div>
    </div>
    <div class="pt-3">
      <el-tabs v-model="activeName" type="card" @tab-click="checkOnline">
        <el-tab-pane class="pl-3 software-content" name="first">
          <span slot="label" class="detail-title"><span class="iconbg iconbg-purple rounded"><i class="fas fa-download"></i></span>下载软件</span>
          <div class="details" v-for="down in downlist">
            <div class="float-right">
              <button @click="downloadSoftware(down.down_id, down.version)" class="btn btn-white btn-sm"><i class="fas fa-download mr-2"></i>下载</button>
            </div>
            <h5 class="w-25 d-inline-block">{{ down.title }}</h5>
            <div class="w-50 d-inline-block"><span v-if="down.key_number !== ''">锁号：{{ down.key_number }}</span></div>
          </div>
        </el-tab-pane>
        <el-tab-pane class="pl-3 software-content" name="second" v-html="items.content">
          <span slot="label" class="detail-title"><span class="iconbg iconbg-green rounded"><i class="fas fa-info"></i></span>软件详情</span>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  const fs = require('fs-extra')
  const path = require('path')
  export default {
    mixins: [mixin],
    data () {
      return {
        activeName: 'first',
        loading: false,
        items: '',
        downlist: ''
      }
    },
    created () {
      this.fetchData()
    },
    watch: {
      'activeName': function (val) {
        if (val === 'second') {
          if (!this.checkOnline()) {
            this.$message.error('当前网络不可用，图片信息将无法加载')
          }
        }
      }
    },
    methods: {
      fetchData () {
        this.loading = true
        let softwarejson = path.join('data/sc_software.json')
        let softwarelist = fs.readJsonSync(softwarejson).sc_product
        let pid = this.$route.params.pid
        let loadings = true
        let items = softwarelist.find(function (item) {
          if (item.product_id === pid) {
            loadings = false
          }
          return item.product_id === pid
        })
        this.items = items
        let downlist = fs.readJsonSync(softwarejson).sc_down
        let newdownlist = downlist.filter(function (item) {
          return item.product_id === pid
        })
        this.downlist = newdownlist
        this.loading = loadings
      },
      downloadSoftware (downID, version) {
        // 先判断是否已在下载列表中，再加入列表中
        let downloaditem = this.$db.read().get('sc_download').find({ down_id: downID, version: version, delete: false }).value()
        if (!downloaditem) {
          this.$emit('softwareDownload', downID)
        } else {
          let info = this.downlist.find(function (item) {
            return item.down_id === downID
          })
          this.$message({
            showClose: true,
            message: info.fulltitle + '已存在下载列中',
            iconClass: '',
            type: 'warning'
          })
        }
      },
      checkOnline () {
        if (!navigator.onLine) {
          return false
        } else {
          return true
        }
      }
    }
  }

  /**
   * 原生方法打开v-html引入a标签的点击事件
   * @type {Electron}
   */
  const electron = require('electron')
  window.openURL = function (url) {
    electron.shell.openExternal(url)
  }
</script>