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-tab-pane class="pl-3 software-content" name="third">
          <span slot="label" class="detail-title"><span class="iconbg iconbg-yellow rounded"><i class="fas fa-video"></i></span>动画教程</span>
          <h1 class="vide-title" v-if="video1.length > 0">专属教程</h1>
          <div class="row" v-if="video1.length > 0">
            <div class="col-auto mb-4" v-for="video in video1" :key="video.aid">
              <div class="card card-width">
                <img class="card-img-top" :src="SmartCostUrl+video.img_url" :alt="video.title">
                <div class="card-body p-3">
                  <button class="btn btn-success btn-block btn-sm" @click="showVideo(video.aid)"><i class="fas fa-play-circle pr-1"></i>播放</button>
                </div>
              </div>
            </div>
          </div>
          <h1 class="vide-title">通用教程</h1>
          <div class="row">
            <div class="col-auto mb-4" v-for="video in video2" :key="video.aid">
              <div class="card card-width">
                <img class="card-img-top" :src="SmartCostUrl+video.img_url" :alt="video.title">
                <div class="card-body p-3">
                  <button class="btn btn-success btn-block btn-sm" @click="showVideo(video.aid)"><i class="fas fa-play-circle pr-1"></i>播放</button>
                </div>
              </div>
            </div>
          </div>
        </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: '',
        SmartCostUrl: 'https://smartcost.com.cn',
        video1: '',
        video2: ''
      }
    },
    created () {
      this.fetchData()
    },
    watch: {
      'activeName': function (val) {
        if (val === 'second') {
          if (!this.checkOnline()) {
            this.$message.error('当前网络不可用，图片信息将无法加载')
          }
        } else if (val === 'third') {
          if (!this.checkOnline()) {
            this.$message.error('当前网络不可用，无法获取视频信息')
          } else {
            let productid = this.$route.params.pid
            let self2 = this
            this.$http({
              url: this.SmartCostUrl + '/animation/list?pid=' + productid,
              method: 'get',
              timeout: 5000
            }).then(function (response) {
              if (response.data.err === 0) {
                self2.video1 = response.data.info.list1
                self2.video2 = response.data.info.list2
              } else {
                this.$message.error(response.data.msg)
              }
            }).catch(function (error2) {
              throw error2
            })
          }
        }
      }
    },
    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
        }
      },
      showVideo (id) {
        let url = this.SmartCostUrl + '/video/' + id
        this.$electron.shell.openItem(url)
      }
    }
  }

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