mpvue-dev-temp/src/pages/detail/index.vue

<template>
  <div class="detail-container scroll-touch">
    <div class="detail-ad-wrap">
      <ad unit-id="adunit-21265a59493c9c9b"></ad>
    </div>
    <!-- {{info_id}} -->
    <div v-if="detailHtml" :class="[ contentDisplayAll ? 'detail-context-all' : 'detail-context' ]">
      <h2 class="new-title">{{newsDetail.title}}</h2>
      <div v-html="detailHtml"></div>
    </div>
    <div class="click-display-all" 
      v-if="detailHtml && !contentDisplayAll"
      @click="handleClickAll">
      查看全文
      <span class="caret"></span>
    </div>
     <!-- 相关推荐  -->
    <div class="rise-container" v-if="newsDetail.relation_list">
      <h4 class="rise-name">相关推荐</h4>
      <div class="relation-item" 
        v-for="(item, index) in newsDetail.relation_list" 
        @click="handleToPage(item.info_id)"
        :key= "index">
        <div class="item-title">{{item.title}}</div>
        <div class="item-pic-wrap">
          <div class="item-pic-item" v-for="(url, idx ) in item.img_list" :key = "idx">
            <img :src="url" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {get} from '@/utils/request'
import config from '@/utils/config'

export default {
  onLoad: function (options) {
    this.info_id = options.info_id
    // var timer = setTimeout(() => {
    //   this.handleConsume()
    //   clearTimeout(timer)
    // }, 5000)
    if (wx.createRewardedVideoAd) {
      this.videoAd = wx.createRewardedVideoAd({
        adUnitId: 'adunit-adf736062e0b8ffa'
      })
      this.videoAd.onLoad(() => {})
      this.videoAd.onError((err) => console.log(err))
      // this.videoAd.onClose((res) => {})
    }
  },
  // onUnload: function () {
  //   wx.reLaunch({
  //     url: '/pages/index/main'
  //   })
  // },
  data () {
    return {
      info_id: '',
      newsDetail: {},
      detailHtml: '',
      contentDisplayAll: false,
      ptTime: {
        hr: 0,
        min: 0
      },
      videoAd: null
    }
  },
  methods: {
    async handleConsume () {
      await wx.request({
        method: 'post',
        url: `${config.host}/mp/common/read-coin`,
        data: {
          appid: config.appId,
          mp_token: wx.getStorageSync('mpToken'),
          user_id: wx.getStorageSync('userInfo').user_id,
          info_id: this.info_id
        },
        success: res => {
          if (res.data.code === 0) {
            wx.showToast({
              title: `扣除10枚金币`,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },
    handleClickAll () {
      const self = this
      wx.showModal({
        title: '友情提示',
        content: '观看完视频查看',
        success (res) {
          if (res.confirm) {
            // console.log('用户点击确定')
            self.videoAd.show().catch(() => {
              self.videoAd.load()
                .then(() => self.videoAd.show())
                .catch(err => {
                  console.log('激励视频 广告显示失败', err)
                })
            })
          } else if (res.cancel) {
            // console.log('用户点击取消')
          }
        }
      })
      this.videoAd.onClose(res => {
        // 用户点击了【关闭广告】按钮
        if (res && res.isEnded) {
          // 正常播放结束，可以下发游戏奖励
          this.contentDisplayAll = true
        } else {
          // 播放中途退出，不下发游戏奖励
        }
      })
    },
    handleToPage (infoId) {
      wx.navigateTo({
        url: `/pages/detail/main?info_id=${infoId}`
      })
    },
    async getNewsDetail () {
      const params = {
        sid: 'aad1ad2da28cadec36d3c9bec53ca609',
        info_id: this.info_id,
        // callback:jQuery331017495393845717588_1564626981414,
        _: 1564626981418
      }
      let detailData = await get('/v1/info/web-detail', params)
      this.newsDetail = detailData
      this.detailHtml = detailData.content.replace(/<img/gi, '<img style="max-width:100%;height:auto" ')
    }
  },
  mounted () {
    this.contentDisplayAll = false
    this.detailHtml = ''
    this.newsDetail = {}
    this.getNewsDetail()
  },
  onPullDownRefresh () {
    wx.stopPullDownRefresh();
  }
}
</script>
<style lang="scss" scoped>
  .scroll-touch {
    -webkit-overflow-scrolling: touch;
  }
  .detail-container {
    margin: 0 auto 14px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .detail-context {
      max-height: 1000px;
      overflow-y: hidden;
      padding: 0 10px;
    }
    .detail-context-all {
      padding: 0 10px;
    }
    .new-title {
      font-size: 22px;
      font-weight: 560;
      margin-bottom: 10px;
    }
  }
  .rise-container {
    padding: 0 10px;
    .rise-name {
      color: #999;
      font-size: 18px;
      margin-top: 10px;
    }
    .relation-item {
      border-bottom: 1px solid #eae8e8;
      padding: 10px 0;
      .item-title {
        font-size: 16px;
      }
      .item-pic-wrap {
        margin-top: 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-pic-item {
          display: inline-block;
          width: 32%;
          height: 66px;
          img {
            width: 100%;
            height: 100%
          }
        }
      }
    }
  }

</style>
<style lang="scss">
.detail-context {
  .album-item {
    width: 100%;
    padding: 10px;
    .a-image {
      display: inline-block;
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
.click-display-all {
  height: 32px;
  line-height: 32px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: #ff6700;
  background-color: #fff;
  font-weight: 800;
  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }
}
.detail-ad-wrap {
  width: 100%;
}
</style>