horzi_rai_wxa/reportPages/morningDetails/morningDetails.vue

<template>
  <view class="container morning-details-content" v-if="isUserBindingPhoneNumber">
    <block v-if="hasPermission == 1">
      <view class="report-content-title">{{ reportDetails.Title }} </view>
      <view class="content-time">
        <text>{{ reportDetails.Department }} </text>
        <text class="time">{{ reportDetails.PublishTime }} </text>
      </view>
      <!-- 这里是循环的盒子 -->
      <view class="report-ul" v-for="item in reportDetails.List" :key="item.Id">
        <view class="li-title">{{ item.IndustryName }}</view>
        <view class="li-text">
          <mp-html :content="strFontSize(item.Content)" />
        </view>
        <view class="li-look" @click="goDustrialHandler(item.IndustryId)">查看资源包</view>
      </view>
    </block>
    <view class="noauth-cont" v-else-if="hasPermission == 3 || hasPermission == 4">
      <block v-if="!isShowAlert">
        <image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
        <block>
          <view class="tip">您暂无权限查看此文章内容，若想查看可以申请开通哦</view>
          <view class="btn-cont" @click="applyAuth"> 立即申请 </view>
        </block>
        <view class="btn-cont back-btn" @click="backIndex"> 返回首页 </view>
      </block>
      <block v-else>
        <text class="moneh-text"> 上传名片并填写简单信息，24小时内我们会为您开通一个月的免费月卡 </text>
        <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/month_card.png" class="month_card" alt="" />
        <view class="btn-cont btn-dl" @click="applyAuth"> 立即上传 </view>
        <view class="btn-cont month-back" @click="backIndex"> 返回</view>
      </block>
    </view>
    <Loading />
  </view>
  <not-have-login v-else />
</template>

<script>
import { Reports } from "@/config/api.js";
import notHaveLogin from "@/components/notHaveLogin.vue";
export default {
  components: { notHaveLogin },
  data() {
    return {
      reportDetails: {},
      reportId: "",
      hasPermission: "", //权限判断
    };
  },
  methods: {
    // 跳转产业标签
    goDustrialHandler(id) {
      uni.navigateTo({
        url: "/reportPages/IndustryReport/IndustryReport?id=" + id,
      });
    },
    // 获取文章详情
    async getDetalis() {
      const res = await Reports.getMorningMeetingDetail({
        Id: this.reportId,
      });
      if (res.Ret === 200) {
        this.hasPermission = res.Data.HasPermission;
        this.reportDetails = res.Data.Detail || {};
      }
    },
    /* 无权限申请开通权限 */
    applyAuth() {
      this.hasPermission === 4
        ? uni.navigateTo({
            url: "/pageMy/applyTrial/applyTrial?tryType=ProductInterior&detailId=" + this.id,
          })
        : uni.showModal({
            title: "",
            content: "您已经提交过申请了，请耐心等待",
            showCancel: false,
            confirmColor: "#365595",
            success: function (res) {
              uni.navigateBack({
                fail() {
                  uni.switchTab({
                    url: "/pages/index/index",
                  });
                },
              });
            },
          });
    },
    // 返回首頁
    backIndex() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  },
  onLoad(options) {
    this.reportId = Number(options.id) || 8;
    this.getDetalis();
  },
  onShareAppMessage() {
    return {
      title: "今日晨会精华",
      path: "/reportPages/morningDetails/morningDetails?id=" + this.reportId,
    };
  },
};
</script>

<style scoped lang="scss">
.morning-details-content {
  padding: 30rpx;
  color: #333333;
  font-size: 32rpx;
  .content-time {
    font-size: 28rpx;
    padding: 20rpx 0 30rpx 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx dashed #ececec;
    .time {
      color: #707070;
    }
  }
  .report-ul {
    .li-title {
      margin: 30rpx 0 10rpx;
      font-weight: 500;
    }
    .li-text {
      margin-bottom: 30rpx;
    }
    .li-look {
      display: flex;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #3385ff;
      margin-bottom: 70rpx;
    }
  }
  .noauth-cont {
    padding-top: 150rpx;
    text-align: center;
    font-size: 28rpx;

    .noauth-ico {
      width: 365rpx;
      height: 229rpx;
      margin-bottom: 70rpx;
    }

    .tip {
      width: 532rpx;
      margin: 0 auto 100rpx;

      .contract {
        padding: 40rpx 90rpx 0;
        line-height: 44rpx;

        text {
          display: inline-block;
        }
      }
    }

    .btn-cont {
      width: 368rpx;
      height: 80rpx;
      background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
      color: #fff;
      font-size: 34rpx;
      margin: 0 auto;
      text-align: center;
      line-height: 80rpx;

      &.back-btn {
        background: #fff !important;
        color: #2c83ff;
        border: 1px solid #2c83ff;
        margin-top: 30rpx;
      }

      .btn_bg {
        width: 100%;
        height: 80rpx;
        position: absolute;
        left: 0;
        top: 0;
      }

      .btn-txt {
        width: 100%;
        position: absolute;
        z-index: 1;
      }
    }
    .month_card {
      width: 100%;
      height: 565rpx;
      padding-left: -20rpx;
    }
    .btn-dl {
      background: linear-gradient(253deg, #fcf3e9 0%, #eedec8 100%) !important;
      color: #333 !important;
      margin: 30rpx auto !important;
    }
    .month-back {
      background: #f6f6f6 !important;
      color: #999 !important;
    }
    .moneh-text {
      text-align: center;
      width: 632rpx;
      margin: 0 auto 20rpx;
      color: #999999;
    }
  }
}
</style>