h5项目在浏览器下载文件(无需走借口)

<template>
  <div>
    <div class="box"
         :style="`background:url(${getossurl}ddzsc/images/videoLibrary/down_bg.png) no-repeat;background-size:100% auto;`">
      <!-- 顶部 -->
      <div class="top">
        <!-- 封面图 -->
        <div class="coverimage">
          <div class="cimg"
               v-if="pichttp">
            <img :src="ossurl + pichttp"
                 alt="">
          </div>

        </div>
        <!-- 标题 -->
        <div class="tit">
          {{stitle}}
        </div>
        <!-- 时间大小 -->
        <div class="timesize">
          <div class="time bluecolor"
               v-if="time">
            <img class="timeimg"
                 :src="ossurl + 'ddzsc/images/videoLibrary/timeicon.png'"
                 alt="">
            <span>{{timers(time.hours,time.minutes,time.seconds) }}</span>
          </div>
          <div class="size bluecolor"
               v-if="articleNum">
            <img class="timeimg"
                 :src="ossurl + 'ddzsc/images/videoLibrary/saveicon.png'"
                 alt="">
            <span>{{ articleNum }}M</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部内容 -->
    <div class="main">
      <!-- 按钮内容 -->
      <div class="btn">
        <md-check v-model="isChecked"
                  label="我已阅读并知悉以下内容。" />
      </div>
      <!-- 告知 -->
      <div class="require"
           v-html="text"></div>
      <!-- 按钮 -->
      <div class="uploadBtn"
           @click="downLoad">确认下载</div>

    </div>

    <!-- 下载提示图 -->
    <div v-show="isOnedownload"
         class="share_popup"
         @click="closedownload">
      <img class="goupdownimg"
           :src="ossurl + 'ddzsc/images/videoLibrary/browse.png'"
           alt="">
    </div>

  </div>
</template>

<script>
import { isWeiXin } from "@/lib/util";
import axios from 'axios'
import { strEnc, strDec, encryptAes, aesEnc } from '@/lib/aes' // 加密
import { getStorage, setStorage, setSensorsInit, setSensors, moveback, downFileStream } from '@/lib/util'
import config from '@/config'
import {
  download
} from '@/api/abt/materialLibrary/sourceMaterial/index'
import { insertActionCord } from '@/api/abt/customerOperation/common/index' // 分享api
import { wechatshare } from '@/lib/wechat_share' // 微信分享
import {
  getVideoDownloadInfo,
  downloadAction
} from '@/api/abt/materialLibrary/sourceMaterial/index'
import { Toast, Check, CheckBox, CheckGroup, CheckList } from "mand-mobile";

export default {
  components: {
    [Check.name]: Check,
    [CheckGroup.name]: CheckGroup
  },
  data () {
    return {
      isOnedownload: true,
      type: '',   //1是微信2是其他
      isChecked: false,  //阅读完成
      itemInFo: {},
      stitle: "",
      pichttp: "",
      articleNum: "",
      conthttp: "",
      text: "",
      time: {},
    };
  },
  computed: {

  },
  created () {
    this.scentry = getStorage('scentry')
    this.menu = getStorage('menu', {})
    this.ossurl = config.cdnurl
    this.osno = strDec(this.$route.params.osno)
    this.sno = strDec(this.$route.params.sno)
    this.upsno = this.$route.query.upsno ? strDec(this.$route.query.upsno) : ''
    this.suserid = strDec(this.$route.params.suserid)
    this.empno = strDec(this.$route.params.empno)
    this.getossurl = config.cdnurl // 配文
    if (
      this.empno == '' ||
      this.osno == '' ||
      this.suserid == '' ||
      this.sno == '' ||
      this.empno == 'undefined' ||
      this.sno == 'undefined'
    ) {
      this.$router.replace({
        path: `/errpage?type=1`
      })
    }
    this.userid = getStorage('u_s', {}).id // 用户的id
    this.rytype = getStorage('u_s', '').rytype
    window.document.title = '下载视频'
    if (getStorage('u_s', '').rytype == '1') {
      this.empnoid = getStorage('empno', {}).id
      this.empno = getStorage('empno', {}).empno // 业务员工号
      this.suserid = getStorage('u_s', {}).id // 业务员工号
    }
    // console.log(this.empno, this.suserid, this.userid, this.sno);
    console.log(isWeiXin(), '是否在微信环境');
    // 判断环境
    // 如果是微信环境 接口多传个参数

    if (isWeiXin()) {
      console.log('微信');
      // 在微信环境 蒙层提示 行为记录接口
      this.type = '1'
      this.isOnedownload = true
      // this.behaviorRecord()
      // 获取详情接口
      this.init()
      wechatshare(
        '1',
        '1',
        '',
        '',
        '',
        '',
        false, '', '', '', true
      )
    } else {
      console.log('其他');
      this.type = '2'
      this.isOnedownload = false
      // 下载前的行为记录
      this.init()
    }

  },
  mounted () {
  },
  computed: {
   
    timers () {
      return function (hours, minutes, seconds) {
        if (hours < 10) {
          hours = '0' + hours
        }
        if (minutes < 10) {
          minutes = '0' + minutes
        }
        if (seconds < 10) {
          seconds = '0' + seconds
        }
        return hours + ':' + minutes + ':' + seconds
      }
    }
  },
  methods: {
    // 初始化
    init () {
      if (isWeiXin()) {
        this.type = '1'
      } else {
        this.type = '2'
      }
      let obj = {
        sno: this.sno,
        empno: this.empno,
        suserid: this.suserid,
        userid: this.suserid,
        type: this.type
      }
      getVideoDownloadInfo(obj)
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.sno = res.data.data.sno;
            this.stitle = res.data.data.stitle;
            this.pichttp = res.data.data.pichttp;  //图片地址
            this.articleNum = res.data.data.articleNum;  //大小
            this.conthttp = res.data.data.conthttp;  //视频地址
            this.text = res.data.data.text;  //提示文字
            this.time = res.data.data.time  //时长
          }
        })
    },
   

    // 选择框
    toggleCheckbox () {
      this.isChecked = !this.isChecked
    },
    // 下载图
    closedownload () {
      this.isOnedownload = false
    },
    // 下载
    async downLoad () {
      // 判断弹窗
      if (this.isChecked) {
        // 判断环境  微信不可下载 跳转浏览器
        if (isWeiXin()) {
          this.type = '1'
          this.isOnedownload = true
        } else {
          this.type = '2'
          this.isOnedownload = false
          // 行为记录
          let urls = {
            sno: this.sno,
            empno: this.empno,
            suserid: this.suserid,
            userid: this.suserid,
            type: this.type
          }
          const res = await downloadAction(urls)
          console.log(res);
          if (res.data.code == 200) {
            Toast.loading('下载中...');
            const result = await axios({
              url: this.conthttp,
              responseType: "blob"
            })
            const a = document.createElement("a");
            const url = URL.createObjectURL(result.data);
            a.href = url;
            a.download = this.stitle;
            a.click();
            Toast.hide()
          } else {
            Toast.loading('下载失败,请重试...');
          }

        }

      } else {
        Toast.failed("请阅读并同意条款");
      }
    },


  },
};
</script>

<style scoped>
body {
  margin: 0;
}
/deep/ .md-check-icon .md-icon {
  font-size: 0.45rem;
}
/deep/ .md-check-label {
  color: #555c80;
}

.bg {
  position: relative;
  z-index: -1;
  width: 100vm;
  height: 100vh;
}
.bgimg {
  width: 100%;
  height: 100%;
}

.box {
  margin: 0 auto;
  /* position: absolute; */
}

.top {
  padding-bottom: 0.7rem;
}

.coverimage {
  width: 8.5rem;
  border-radius: 5%;
  height: 8.5rem;
  margin: 0 auto 0.4rem;
  padding-top: 0.8rem;
}

.cimg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 2%;
  overflow: hidden;
}

.tit {
  width: 85%;
  color: #17204d;
  margin: 0 auto 0.5rem;
  font-size: 0.45rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timesize {
  width: 85%;
  height: 0.6rem;
  margin: 0 auto;
  font-size: 0.28rem;
  display: flex;
  color: #025cea;
  align-items: center;
}

.bluecolor {
  display: flex;
  align-items: center;
  padding: 0.1rem 0.2rem;
  box-sizing: border-box;
  background-color: #e0eafc;
  border-radius: 0.1rem;
}

.timeimg {
  width: 0.3rem;
  height: 0.3rem;
  margin: 0 0.1rem;
}

.time {
  margin-right: 0.35rem;
}

.main {
  width: 100%;
  padding: 0.45rem 0.5rem;
  box-sizing: border-box;
  /* height: calc(100%-7rem); */
  border-radius: 0.2rem 0.2rem 0 0;
  /* background-color: #999; */
  /* background: url('@/assets/11.png') no-repeat; */
  /* background-size: cover; */
  background: linear-gradient(to bottom, #d6e6ff, white);
}

.btn {
  display: flex;
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
}

/* input {
  width: 0.5rem;
  height: 0.5rem;
} */

.Input {
  width: 60%;
  height: 100%;
  color: #ffff;
  opacity: 0.7;
  font-size: 0.48rem;
  background-color: rgba(0, 0, 0, 0);
}

.Input::-webkit-input-placeholder {
  color: #fff;
  opacity: 0.7;
  font-size: 0.48rem;
}

.Input::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 0.7;
  font-size: 0.48rem;
}
.reading {
  margin-left: 0.1rem;
}

.require {
  margin-bottom: 0.5rem;
  font-size: 0.35rem;
}
.require a {
  font-size: 0.3rem !important;
}
.uploadBtn {
  width: 97%;
  height: 1.2rem;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 1.2rem;
  background-color: #025cea;
  color: #fff;
  font-size: 0.4rem;
  margin: 0 auto;
}

.share_popup {
  width: 100%;
  height: 100vh;
  background-color: black;
  opacity: 0.8;
  position: fixed;
  z-index: 200;
  top: 0;
}

.share_popup .goupdownimg {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.5rem;
  height: auto;
  z-index: 201;
}
.share_popup {
  width: 100%;
  height: 100vh;
  background-color: black;
  opacity: 0.8;
  position: fixed;
  z-index: 200;
  top: 0;
}

.share_popup .goupdownimg {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.5rem;
  height: auto;
  z-index: 201;
}
</style>