index.vue

<template>
  <div class="full-page">
    <div class="container contentPage">
      <div class="head">
        <div class="list-item">
          <div class="list-item-cell picture">
            <span class="avatar" :style="{backgroundImage:'url(' + data.producerPicUrl + ')'}"></span>
          </div>
          <div class="list-item-cell info">
            <div class="title">{{data.producerName}}</div>
            <p>{{data.producerOrgName}}</p>
          </div>
          <div class="list-item-cell tool" @click="shareVisible=true">
            <i class="glyphicon glyphicon-share"></i>
          </div>
        </div>
      </div>
      <div class="content" v-html="data.content"></div>
    </div>
    <div class="share-block" v-show="shareVisible">
      <img src="../../assets/images/share-img.png" @click="shareVisible=false"/>
    </div>
  </div>
</template>

<script>
// import { getUserCard, getunUsedCountById } from '@/api/apply/apply'
import { getContentInfo } from '@/api/apply/apply'
import defaultOrgImg from '../../assets/images/org-default-picture.png'
import { wxpermission, initWXShare } from '@/wxpermission'
import { removeUrlParam } from '@/util/index'

export default {
  name: 'Home',
  data () {
    return {
      imprId: this.$route.query.imprId,
      data: {
        producerPicUrl: '',
        producerName: '',
        producerOrgName: '',
        content: ''
      },
      shareVisible: false
    }
  },
  created () {
    this.getContentInfoFn(this.imprId)
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
  },
  methods: {
    getContentInfoFn (imprId) {
      this.$Indicator.open()
      getContentInfo(imprId).then(res => {
        this.$Indicator.close()
        if (res.code === 0) {
          this.data = {
            producerPicUrl: res.data.producerPicUrl !== '' ? res.data.producerPicUrl : defaultOrgImg,
            producerName: res.data.producerName,
            producerOrgName: res.data.producerOrgName,
            content: res.data.content,
            mainTitle: res.data.mainTitle,
            subheading: res.data.subheading,
            cover: res.data.cover
          }
          console.log('getContentInfo')
          let that = this
          wxpermission(1, () => {
            let newShareLink = removeUrlParam('code')
            newShareLink = newShareLink.split('#')[0] + '#/content?imprId=' + this.imprId
            const shareData = {
              title: that.data.mainTitle,
              imgUrl: that.data.cover,
              desc: that.data.subheading !== '' ? that.data.subheading : '凯歌健康券',
              link: newShareLink
            }
            initWXShare(shareData)
          })
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    }
  }
}
</script>

<style scoped>
  .full-page {
    background-color: #ffffff;
  }

  .contentPage .head {
    padding: 1em 0;
  }
  .contentPage .head > .list-item {
    display: table;
    width: 100%;
  }
  .contentPage .head > .list-item > .list-item-cell {
    display: table-cell;
    vertical-align: middle;
  }
  .contentPage .head > .list-item > .list-item-cell.picture {
    width: 4.5em;
  }
  .contentPage .head > .list-item > .list-item-cell.picture > .avatar{
    display: inline-block;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .contentPage .head > .list-item > .list-item-cell.info {
    border-bottom:1px solid #ccc;
  }
  .contentPage .head > .list-item > .list-item-cell.info > .title {
    font-size: 1.1em;
  }
  .contentPage .head > .list-item > .list-item-cell.tool {
    width: 2em;
    font-size: 1.6em;
    color: #43d1be;
    text-align: right;
    border-bottom:1px solid #ccc;
  }

  .share-block {
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .share-block img {
    width: 100%;
  }
</style>