shangmenanmo/additionalvue/dealer/poster.vue

<template>
  <view class="container">
    <view v-if="imageUrl" class="poster">
      <image class="image" mode="widthFix" :src="imageUrl" @click="onPreviewImage"></image>
    </view>
  </view>
</template>

<script>
  import * as Api from '@/api/dealer/poster'
  import SettingModel from '@/common/model/dealer/Setting'

  export default {
    data() {
      return {
        // 海报图url
        imageUrl: undefined
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.getSetting()
      this.getPoster()
    },

    methods: {

      // 获取分销设置
      getSetting() {
        const app = this
        SettingModel.data()
          .then(setting => {
            const words = setting.words.poster
            app.setPageTitle(words.title)
          })
      },

      // 获取推广二维码
      getPoster() {
        const app = this
        app.isLoading = true
        Api.qrcode({ channel: app.platform })
          .then(result => {
            // api数据赋值
            app.imageUrl = result.data.imageUrl
          })
          .finally(() => app.isLoading = false)
      },

      // 设置当前页面标题
      setPageTitle(title) {
        uni.setNavigationBarTitle({ title: title.value })
      },

      // 预览海报图
      onPreviewImage() {
        uni.previewImage({
          current: this.imageUrl,
          urls: [this.imageUrl]
        })
      }

    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .poster .image {
    display: block;
    width: 100%;
  }
</style>