jjx-wap/pages/school/detail.vue

<template>
  <view class=" bg-white">
    <u-sticky offset-top="0" customNavHeight="0">
      <uititle title="详情"></uititle>
    </u-sticky>
    <view class="p-30">
      <view class="mt-20 text-gray text-28 pb-20 border-bottom" v-if="userInfo && userInfo.userLevel === 0">
        <span>剩余</span>
        <span class="mx-15 text-main font-bold">{{ userInfo.remainArticleDownloadNum }}</span>
        <span>次下载次数</span>
      </view>
      <text class="text-50 font-bold">{{ info.name }}</text>
      <view class="mt-20 text-gray text-28 pb-20 border-bottom">{{ info._add_time_str }}</view>
      <view class="py-20 border-bottom flex justify-start flex-col items-start " v-if="info.files">
        <view class="form-title-wrap">
          <view class="goods-info-title">
            <view class="form-title">
              附件
            </view>
          </view>
        </view>
        <view class="flex justify-start items-start flex-wrap my-25">
          <view class="mt-15 mr-15" v-for="(item, index) in info.files" :key="index">
            <template v-if="['doc', 'docx'].includes(item.split('.').pop())">
              <file-word theme="outline" class="pointer" size="100" fill="#4a90e2" strokeLinecap="square"
                         @click.native="openDownload(item)"/>
            </template>
            <template v-else-if="['xls', 'xlsx'].includes(item.split('.').pop())">
              <file-excel theme="outline" class="pointer" size="100" fill="#417505" strokeLinecap="square"
                          @click.native="openDownload(item)"/>
            </template>
            <template v-else-if="['pdf'].includes(item.split('.').pop())">
              <file-pdf-one theme="outline" class="pointer" size="100" fill="#f5a623"
                            strokeLinecap="square"
                            @click.native="openDownload(item)"/>
            </template>
            <template v-else>
              <el-image :src="item" style="width: 100px; height: 100px" fit="cover"
                        :preview-src-list="[item]"/>
            </template>
          </view>
        </view>
      </view>
      <view v-html="info.content" class="mt-20"></view>
    </view>
    <el-dialog title="文件查看" :visible.sync="dialogVisible" width="90%" :top="10">
      <view style="width: 100%; height: 80vh">
        <pdf
          style="width: 100%; height: 100%"
          ref="pdf"
          :src="pdfUrl"
        />
      </view>
    </el-dialog>
  </view>
</template>

<script>
import uititle from "@/components/common/title.vue";
import {FileExcel, FilePdfOne, FileWord, Star} from "@icon-park/vue";
import pdf from "vue-pdf";

export default {
  name: "detail",
  components: {uititle, FileWord, FilePdfOne, FileExcel, Star, pdf},
  data() {
    return {
      info: {
        name: '',
        content: ''
      },
      hasCollect: false,
      dialogVisible: false,
      userInfo: null,
      pdfUrl: null,
    }
  },
  methods: {
    async getInfo(id) {
      this.info = await vk.callFunction({
        url: `client/article/list/pub/getDetail`,
        data: {id}
      });
      this.$nextTick(() => {
        // 获取所有的img元素
        var imgElements = document.getElementsByTagName('img');

        // 遍历img元素数组
        for (var i = 0; i < imgElements.length; i++) {
          // 添加style属性，并设置width为100%
          imgElements[i].style.width = '100%';
        }
      })
      await this.checkCollect()
    },
    addView(id) {
      vk.callFunction({
        url: `client/article/list/pub/addView`,
        data: {id}
      });
    },
    async openDownload(url) {
      await this.getUserInfo()
      if (this.userInfo.userLevel < 0) return this.$message.error('非会员,无法下载');
      else if (this.userInfo.userLevel === 0) {
        const {data} = await vk.callFunction({
          url: 'client/article/list/kh/check',
          data: {
            id: this.info._id,
          }
        })
        if (!data) {
          if (this.userInfo.remainArticleDownloadNum === 0) {
            return this.$confirm(`下载次数不足,是否购买次数?`, '提示', {
              cancelButtonText: '关闭',
            }).then(async () => {
              const {data} = await vk.callFunction({
                url: 'client/order/kh/addDownloadOrder',
                title: '请求中...',
              })
              vk.navigateTo({
                url: `/pages/shop/pay?id=${data}`
              })
            })
          } else {
            this.$confirm(`将消耗1次下载次数,是否继续?`, '提示', {
              cancelButtonText: '关闭',
            }).then(async () => {
              this.userInfo.remainArticleDownloadNum -= 1
              // await this.getUserInfo()
              vk.callFunction({
                url: 'client/article/list/pub/addDownload',
                data: {
                  id: this.info._id,
                }
              })
              vk.callFunction({
                url: 'client/user/kh/reduceDownloadNum',
              })
              vk.callFunction({
                url: 'client/article/list/kh/addDownload',
                data: {
                  id: this.info._id,
                }
              })
              window.location.href = url
              // this.pdfUrl = url
              // this.dialogVisible = true
            })
          }
        } else {
          window.location.href = url
        }
      } else {
        vk.callFunction({
          url: 'client/article/list/pub/addDownload',
          data: {
            id: this.info._id
          }
        })
        window.location.href = url
        // this.pdfUrl = url
        // this.dialogVisible = true
      }

    },
    async checkCollect() {
      const {data} = await vk.callFunction({
        url: 'client/article/collect/kh/check',
        data: {
          articleId: this.info._id
        },
      });
      this.hasCollect = data
    },
    changeCollect() {
      this.hasCollect = !this.hasCollect
      vk.callFunction({
        url: 'client/article/collect/kh/changeCollect',
        data: {
          articleId: this.info._id
        },
      });
    },
    async getUserInfo() {
      const {userInfo} = await vk.callFunction({
        url: 'user/kh/getMyUserInfo'
      })
      this.userInfo = userInfo
    },
  },
  onLoad({id}) {
    this.getUserInfo(id)
    this.getInfo(id)
    this.addView(id)
    const userInfo = vk.getStorageSync('uni_id_user_info')
    if (userInfo) this.checkCollect()
  }
}
</script>