veterans_H5/h5_web/pages/policyInfo/policyInfoDetails.vue

<template>
  <view class="policyinfodetails">
    <u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }"></u-navbar>
    <view class="policyinfodetails-header">
      <view class="policyinfodetails-header-title">{{ policyInfoDetailsObj.artTitle }}</view>
      <view class="policyinfodetails-header-subtitle">
        <view>来源：{{ policyInfoDetailsObj.artAuthor }}</view>
        <view>{{ formatDate(policyInfoDetailsObj.createTime) }}</view>
      </view>
    </view>
    <view class="policyinfodetails-content">
      <view class="ql-editor">
        <u-parse :html="policyInfoDetailsObj.artContent"></u-parse>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      policyInfoDetailsObj: ''
    };
  },
  onLoad(page) {
    if (page.artId) {
      this.getDetails(page.artId);
    }
  },
  onShow() {},
  methods: {
    // 获取详情
    getDetails(id) {
      this.$u.api.policyInfo
        .getPolicyInfoDetails({
          id: id
        })
        .then((res) => {
          if (res.code === 200) {
            this.policyInfoDetailsObj = res.data;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: '操作失败!',
            type: 'error'
          });
        });
    },
    /**
     * 初始化日期 MM-dd hh:mm
     */
    formatDate(date) {
      let value;
      if (date) {
        value = this.$u.timeFormat(date.replace(/-/g, '/'), 'mm-dd hh:MM');
      }
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
.policyinfodetails {
  padding: 30rpx 44rpx;
  font-family: 'PingFangSC-Regular, PingFang SC';

  &-header {
    border-bottom: solid 1px #dbdbdb;
    padding-bottom: 22rpx;

    &-title {
      color: #000;
      font-size: 36rpx;
    }

    &-subtitle {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      color: #6f6f6f;
      font-size: 24rpx;
    }
  }

  &-content {
    padding: 18rpx 0;
  }
}
</style>