jy-docs/jydocs-mobile/src/views/details/details.vue

<template>
    <div class="details-p">
        <div class="tops">
            <h3>
                <van-icon class="word01" :name="'diy-' + fileType(detailData.docFileType)" />
                {{detailData.docName}}
            </h3>
        </div>
        <div class="middles">
            <h3>摘要</h3>
            <p>{{detailData.docSummary}}</p>
            <div class="continue" v-show="!buyed">全文共{{detailData.docPageSize}}页，<span @click="continued">继续阅读<van-icon name="arrow-down" size="18" /></span></div>
        </div>
        <div class="botts" v-show="buyed">
            <div class="cont-page">
                优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。
            </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon class="no-icon">
                <template #default>
                    <p class="p1">剑鱼币</p>
                    <p class="p2">{{detailData.price}}</p>
                </template>
            </van-goods-action-icon>
            <van-goods-action-icon icon="diy-jubao" text="投诉举报" @click="jubaod" />
            <van-goods-action-icon :icon="collectd==1?'diy-guanzhu':'diy-weiguanzhu'" text="收藏" @click="canged" />
            <van-goods-action-button text="下载文档" @click="uploaded" />
        </van-goods-action>
        <!-- 充值 -->
        <recharge ref="charge" :detailData="detailData" :coins="coins"></recharge>
        <!-- 购买 -->
        <purchase ref="buys" :detailData="detailData" :coins="coins"></purchase>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { mapActions } from 'vuex'
import { Icon, Toast, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
import Recharge from '@/components/Recharge.vue'
import Purchase from '@/components/RechargeHave.vue'
@Component({
  name: 'details-p',
  components: {
    [Icon.name]: Icon,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
    Recharge,
    Purchase
  },
  methods: {
    ...mapActions({
      getDetails: 'main/getDetails',
      getCoin: 'main/getCoin',
      getAdd: 'main/getAdd',
      getRemove: 'main/getRemove'
    })
  }
})
export default class extends Vue {
  getDetails: any
  getCoin: any
  coins: any = []
  getAdd: any
  getRemove: any
  detailData: any = []
  collectd = 0
  buyed = 0
  created () {
    this.onList()
  }

  onList () {
    this.getDetails({ docId: '111' }).then((res: any) => {
      console.log(res.data)
      this.detailData = res.data.detail
      this.buyed = res.data.status
      this.collectd = res.data.docCang
    })
    this.getCoin({ L: true }).then((res: any) => {
      console.log(res.data.data)
      this.coins = res.data.data.points
    })
  }

  jubaod () {
    Toast({
      duration: 3500,
      message: '如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉'
    })
  }

  canged () {
    if (this.collectd === 0) {
      this.getAdd({ docId: '111' }).then((res: any) => {
        console.log(res)
        if (res.error_code === 0) {
          this.collectd = 1
          Toast('收藏成功')
        }
      })
    } else {
      this.getRemove({ docId: '111' }).then((res: any) => {
        console.log(res)
        if (res.error_code === 0) {
          this.collectd = 0
          Toast('取消收藏')
        }
      })
    }
  }

  continued () {
    this.uploaded()
  }

  uploaded () {
    if (this.buyed === 1) {
      this.$router.push('/')
    } else {
      if (this.coins.balance < this.detailData.price) {
        ;(this.$refs.charge as any).show = true
      } else {
        ;(this.$refs.buys as any).show = true
      }
    }
  }

  fileType (val: any) {
    if (val === 1) {
      return 'word'
    } else if (val === 2) {
      return 'pdf'
    } else if (val === 3) {
      return 'excel'
    } else if (val === 4) {
      return 'ppt'
    } else if (val === 5) {
      return 'txt'
    } else {
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
@include diy-icon('pdf', 24, 24);
@include diy-icon('word', 24, 24);
@include diy-icon('excel', 24, 24);
@include diy-icon('ppt', 24, 24);
@include diy-icon('jubao', 20, 20);
@include diy-icon('weiguanzhu', 20, 20);
@include diy-icon('guanzhu', 20, 20);
.details-p {
    display: flex;
    flex-direction: column;
    .tops {
        display: flex;
        background: #fff;
        padding: 24px 16px;
        h3 {
            display: flex;
            flex-direction: initial;
            color: #171826;
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            .word01 {
                display: inline-table;
                width: 26px;
                height: 24px;
                margin-right: 8px;
            }
        }
    }
    .middles {
        padding: 16px;
        background: #fff;
        margin: 8px 0;
        h3 {
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #171826;
        }
        p {
            color: #5F5E64;
            font-size: 14px;
            line-height: 20px;
            margin-top: 8px;
        }
        .continue {
            color: #5F5E64;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            margin-top: 32px;
            span {
                display: inline-flex;
                align-items: center;
                color: #2ABED1;
                cursor: pointer;
                i {
                    margin-left: 4px;
                }
            }
        }
    }
    .botts {
        padding: 16px 24px;
        background: #fff;
        .cont-page {
            height: 900px;
        }
    }
    .van-goods-action {
        // height: 56px;
        padding: 8px 16px;
        box-shadow: 0px -2px 8px 0px #eee;
        display: flex;
        justify-content: space-between;
        .no-icon {
            .p1 {
                font-size: 12px;
                line-height: 18px;
                color: #5F5E64;
            }
            .p2 {
                font-size: 18px;
                line-height: 26px;
                color: #FB483D;
            }
            .van-icon {
                display: none!important;
            }
        }
        .van-goods-action-icon:not(.no-icon) {
            font-size: 10px;
            color: #5F5E64;
        }
        .van-goods-action-button--first {
            margin-left: 0;
        }
        .van-goods-action-button--last {
            margin-right: 0;
        }
        .van-goods-action-button {
            flex: none;
        }
        .van-button--large {
            width: 165px;
            height: 40px;
        }
        ::v-deep .van-button--default {
            background-color: #2ABED1;
            .van-button__content {
                .van-button__text {
                    color: #fff;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>