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

<template>
    <div class="details-p">
        <div class="tops">
            <h3>
                <van-icon class="word01" name="diy-word" />
                {{detailData.docName}}
            </h3>
        </div>
        <div class="middles">
            <h3>摘要</h3>
            <p>{{detailData.docSummary}}</p>
            <div class="continue">全文共18页，<span>继续阅读<van-icon name="arrow-down" size="18" /></span></div>
        </div>
        <div class="botts">
            <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">500</p>
                </template>
            </van-goods-action-icon>
            <van-goods-action-icon icon="diy-jubao" text="投诉举报" @click="jubaod" />
            <van-goods-action-icon :icon="collectd?'diy-weiguanzhu':'diy-guanzhu'" text="收藏" @click="canged" />
            <van-goods-action-button text="下载文档" @click="uploaded" />
        </van-goods-action>
        <!-- 充值 -->
        <recharge ref="charge"></recharge>
        <!-- 购买 -->
        <purchase ref="buys"></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'
    })
  }
})
export default class extends Vue {
  getDetails: any
  detailData: any = []
  collectd = true
  nums = 1
  created () {
    this.onList()
  }

  onList () {
    this.getDetails({ docId: '111' }).then((res: any) => {
      console.log(res.data)
      this.detailData = res.data.detail
    })
  }

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

  canged () {
    this.collectd = !this.collectd
  }

  uploaded () {
    if (this.nums === 0) {
      ;(this.$refs.charge as any).show = true
    } else {
      ;(this.$refs.buys as any).show = true
    }
  }
}
</script>

<style lang="scss" scoped>
@include diy-icon('word', 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 {
            p {
                color:#2ABED1;
            }
            .p1 {
                font-size: 12px;
                line-height: 18px;
            }
            .p2 {
                font-size: 18px;
                line-height: 26px;
            }
            .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>