chartPage.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <view class="container reportDetail-container">
  3. <web-view :src="strategyUrl + '?url=' + httpUrl" v-if="httpUrl">
  4. <cover-view class="footer-con">
  5. <cover-view class="handle-item" @click="collectHandle">
  6. <cover-image
  7. class="download-img"
  8. :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'"
  9. ></cover-image>
  10. <cover-view>收藏</cover-view>
  11. </cover-view>
  12. </cover-view>
  13. </web-view>
  14. </view>
  15. </template>
  16. <script>
  17. import { Chart } from "@/config/api.js";
  18. import freeCharge from "@/components/freeCharge";
  19. import { reportStrategyUrl } from "@/config/config";
  20. let app = getApp({ allowDefault: true });
  21. export default {
  22. data() {
  23. return {
  24. id: "",
  25. chartData: {},
  26. httpUrl: "",
  27. isCollection: false,
  28. };
  29. },
  30. components: {
  31. freeCharge,
  32. },
  33. computed: {
  34. strategyUrl() {
  35. return reportStrategyUrl;
  36. },
  37. },
  38. methods: {
  39. /* 获取详情 */
  40. async myChartDetail() {
  41. const res = await Chart.myChartDetail({
  42. ChartId: Number(this.id),
  43. });
  44. if (res.Ret === 200) {
  45. this.chartData = res.Data;
  46. this.isCollection = res.Data.IsCollection;
  47. this.httpUrl = encodeURIComponent(res.Data.HttpUrl);
  48. uni.setNavigationBarTitle({
  49. title: this.chartData.Title,
  50. });
  51. }
  52. },
  53. /* 收藏 */
  54. async collectHandle() {
  55. const res = await Chart.myChartCollect({
  56. ChartId: this.chartData.ChartId,
  57. });
  58. if (res.Ret === 200) {
  59. this.isCollection = res.Data.Status == 1 ? true : false;
  60. this.$util.toast(res.Msg);
  61. }
  62. },
  63. },
  64. async onShow() {
  65. await this.$store.dispatch("checkHandle");
  66. if (!this.$store.state.isAuth && !this.$store.state.isBind) {
  67. //已授权已绑定
  68. this.id && this.myChartDetail();
  69. }
  70. },
  71. onLoad(option) {
  72. // /* 兼容iphonex底部 */
  73. uni.getSystemInfo({
  74. success: (res) => {
  75. let ua = res.model;
  76. if (ua.search("iPhone X") != -1 || ua.search("iPhone 11") != -1 || ua.search("iPhone 11 Pro Max") != -1) {
  77. this.isIphoneX = true;
  78. }
  79. },
  80. });
  81. this.id = option.id || "";
  82. },
  83. /**
  84. * 用户点击分享
  85. */
  86. onShareAppMessage: function (res) {
  87. return {
  88. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.chartData.Title,
  89. path: "/pageMy/chartPage/chartPage?id=" + this.id,
  90. };
  91. },
  92. };
  93. </script>
  94. <style lang="scss" scoped>
  95. .reportDetail-container {
  96. background-color: #fff;
  97. .footer-con {
  98. position: fixed;
  99. z-index: 99999;
  100. bottom: 0;
  101. padding-bottom: constant(safe-area-inset-bottom);
  102. padding-bottom: env(safe-area-inset-bottom);
  103. left: 0;
  104. width: 100%;
  105. background-color: #ffffff;
  106. display: flex;
  107. justify-content: space-around;
  108. height: 100rpx;
  109. border-top: 1px solid #dddddd;
  110. .handle-item {
  111. align-items: center;
  112. display: flex;
  113. flex-direction: column;
  114. justify-content: center;
  115. position: relative;
  116. z-index: 99999;
  117. .download-img {
  118. width: 44rpx;
  119. height: 44rpx;
  120. margin-bottom: 4rpx;
  121. }
  122. }
  123. }
  124. }
  125. </style>