veterans_H5/h5_web/pages/entrepreneurshipGuidelines/planDetails/planDetails.vue

<template>
  <view class="details">
    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
    <view class="details-content">
      <view class="details-content-title">{{ planInfo.title }}</view>
      <view class="details-content-createtime">{{ planInfo.createTime }}提交</view>
      <view class="details-content-reply" :class="planInfo.replyStatus === 0 ? 'waiting' : 'reply'">
        {{ planInfo.replyStatus === 0 ? '待专家回复' : '专家已回复' }}
      </view>
      <view class="details-content-description">
        <view class="title">描述</view>
        <view class="details-content-description-content">
          <u-parse :html="planInfo.description"></u-parse>
        </view>
        <view
          class="details-content-description-pdf"
          @click="jumpPage('pages/entrepreneurshipGuidelines/previewPdf/previewPdf', { fileUrl: planInfo.planBookUrl })"
        >
          {{ planInfo.planBookName }}
        </view>
      </view>
      <view class="details-content-description" v-if="planInfo.replyStatus === 1">
        <view class="title">专家建议</view>
        <view class="details-content-description-content">
          <u-parse :html="planInfo.replyContent"></u-parse>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      planId: '',
      planInfo: {}
    };
  },
  onLoad(page) {
    if (page.id) {
      this.planId = page.id;
    }
  },
  onShow() {
    this.getDetails(this.planId);
  },
  methods: {
    getDetails(id) {
      this.$u.api.entrepreneurship.getEntrepreneurshipDetailsApi({ id }).then((res) => {
        if (res.code === 200) {
          this.planInfo = res.data;
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error'
          });
        }
      });
    },
    jumpPage(url, params) {
      this.$u.route({
        url,
        params
      });
    }
  }
};
</script>

<style lang="scss">
.details {
  padding: 26rpx 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  &-content {
    &-title {
      color: #050505;
      font-size: 38rpx;
      margin-bottom: 18rpx;
      font-weight: 600;
    }
    &-createtime {
      color: #9f9f9f;
      font-size: 28rpx;
      margin-bottom: 18rpx;
    }
    .reply {
      color: #028dfe;
      font-size: 26rpx;
    }
    .waiting {
      color: #ef6622;
      font-size: 26rpx;
    }
    &-description {
      margin-top: 32rpx;
      margin-bottom: 72rpx;
      .title {
        color: #3f3f3f;
        font-weight: 600;
        font-size: 34rpx;
        margin-bottom: 30rpx;
      }
      &-content {
        color: #4d4d4d;
        font-size: 28rpx;
      }
      &-pdf {
        width: 100%;
        height: 59rpx;
        line-height: 59rpx;
        display: flex;
        justify-content: center;
        border: dashed 1px #0091ff;
        color: #008fff;
        font-size: 28rpx;
        margin-top: 20rpx;
      }
    }
  }
}
</style>