horzi_rai_wxa/pageMy/chartPage/chartPage.vue

<template>
  <view class="container reportDetail-container">
    <web-view :src="strategyUrl + '?url=' + httpUrl" v-if="httpUrl">
      <cover-view class="footer-con">
        <cover-view class="handle-item" @click="collectHandle">
          <cover-image
            class="download-img"
            :src="isCollection ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png'"
          ></cover-image>
          <cover-view>收藏</cover-view>
        </cover-view>
      </cover-view>
    </web-view>
  </view>
</template>

<script>
import { Chart } from "@/config/api.js";
import freeCharge from "@/components/freeCharge";
import { reportStrategyUrl } from "@/config/config";

let app = getApp({ allowDefault: true });
export default {
  data() {
    return {
      id: "",
      httpUrl: "",
      isCollection: false,
      chartData: {},
    };
  },
  components: {
    freeCharge,
  },
  computed: {
    strategyUrl() {
      // web-view 的URL
      return reportStrategyUrl;
    },
  },
  methods: {
    /* 获取详情 */
    async myChartDetail() {
      const res = await Chart.myChartDetail({
        ChartId: Number(this.id),
        PageRouter: this.$store.state.pageRouterReport,
      });
      if (res.Ret === 200) {
        this.chartData = res.Data;
        this.isCollection = res.Data.IsCollection;
        this.httpUrl = encodeURIComponent(res.Data.HttpUrl);
        uni.setNavigationBarTitle({
          title: this.chartData.Title,
        });
      }
    },
    /* 收藏 */
    async collectHandle() {
      const res = await Chart.myChartCollect({
        ChartId: this.chartData.ChartId,
      });
      if (res.Ret === 200) {
        this.isCollection = res.Data.Status == 1 ? true : false;
        this.$util.toast(res.Msg);
      }
    },
  },

  onLoad(option) {
    this.id = option.id || "";
  },

  async onShow() {
    await this.$store.dispatch("checkHandle");
    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
      //已授权已绑定 才获取详情
      this.id && this.myChartDetail();
    }
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : this.chartData.Title,
      path: "/pageMy/chartPage/chartPage?id=" + this.id,
    };
  },
};
</script>

<style lang="scss" scoped>
.reportDetail-container {
  background-color: #fff;
  .footer-con {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    height: 100rpx;
    border-top: 1px solid #dddddd;
    .handle-item {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 99999;
      .download-img {
        width: 44rpx;
        height: 44rpx;
        margin-bottom: 4rpx;
      }
    }
  }
}
</style>