jjx-web-sign-only/pages/article/detail.vue

<template>
  <view>
    <top-bar></top-bar>
    <common-header></common-header>
    <category-bar></category-bar>
    <view class="page-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <navigator style="display: inline-block;" url="/pages/article/list">金久信学堂</navigator>
        </el-breadcrumb-item>
        <el-breadcrumb-item>金久信学堂详情</el-breadcrumb-item>
      </el-breadcrumb>
    </view>

    <view class="w-1200 m-a bg-white p-40">
      <view class=" flex justify-between items-center">
        <text class="text-50 font-bold">{{ info.name }}</text>
        <view class="flex flex-col justify-center items-center">
          <star @click.native="changeCollect" theme="outline" size="30" fill="#4a4a4a" strokeLinecap="square"
                v-if="!hasCollect" class="pointer"/>
          <star @click.native="changeCollect" theme="filled" size="30" fill="#d00243" strokeLinecap="square"
                v-else class="pointer"/>
          <text>{{ hasCollect ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
      <view class="mt-20 text-gray text-28 pb-20 border-bottom">{{ info._add_time_str }}</view>
      <view class="mt-20 text-gray text-28 pb-20 border-bottom" v-if="userInfo">
        <span>剩余</span>
        <span class="mx-15 text-main font-bold">{{ userInfo.remainArticleDownloadNum }}</span>
        <span>次下载次数</span>
      </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>
    <gap height="50"/>
    <common-footer></common-footer>
  </view>
</template>

<script>
import {FileExcel, FilePdfOne, FileWord, Star} from "@icon-park/vue";

export default {
  name: "detail",
  components: {FileWord, FilePdfOne, FileExcel, Star},
  data() {
    return {
      info: {
        name: '',
        content: ''
      },
      hasCollect: false,
      userInfo: null,
    }
  },
  onLoad(option) {
    if (option.id) {
      this.getInfo(option.id);
      this.addView(option.id)
      this.getUserInfo()
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    async getInfo(id) {
      this.info = await vk.callFunction({
        url: `client/article/list/pub/getDetail`,
        data: {id}
      });
      await this.checkCollect()
    },
    async getUserInfo() {
      const {userInfo} = await vk.callFunction({
        url: 'user/kh/getMyUserInfo'
      })
      this.userInfo = userInfo
    },
    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/index/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.open(url)
          })
        }
      } else {
        window.open(url)
      }
      // } else {
      //     vk.callFunction({
      //         url: 'client/article/list/pub/addDownload',
      //         data: {
      //             id: this.info._id
      //         }
      //     })
      //     window.open(url)
      // }

    },
    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
        },
      });
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/common/css/app.scss";

.form-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .goods-info-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .form-title {
    padding-left: 10px;
    color: $--color-primary;
    font-size: 18px;
    line-height: 18px;
    border-left: 4px solid $--color-primary;
  }

}
</style>