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">
            <i class="glyphicon glyphicon-share"></i>
          </div>
        </div>
      </div>
      <div class="content" v-html="data.content"></div>
    </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: ''
      }
    }
  },
  created () {
    this.getContentInfoFn(this.imprId)
  },
  mounted: function () {
    wxpermission(1, () => {})
  },
  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
          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;
  }
</style>