xnzt/xnzt-h5/pages/find/policyInformation/policyForDetails.vue

<template>
	<view class="con">
		<view class="title">
			{{PolicyPublish.policyTitle}}
		</view>
		<view class="info">
			<text class="type">{{ returnDict("policy_type", PolicyPublish.policyType)}}</text>
			<text class="time">{{PolicyPublish.updateTime}}发表</text>
		</view>
		<view class="body">
			<u-parse :content="PolicyPublish.policyContent"></u-parse>
		</view>
		<view class="read">
			{{PolicyPublish.count}}阅读
		</view>
	</view>
  <!-- <view class="policyInfomation">
    <view class="top">
      <view v-if="false" class="policyType">
        <view v-for="Dict in dictList" :key="Dict.dictValue">
          <view v-if="Dict.dictValue == PolicyPublish.policyType">
            <text>{{ Dict.dictLabelview }}</text>
          </view>
        </view>
      </view>
    </view>
    <uni-row>
      <uni-col :span="24"></uni-col>
    </uni-row>
    <uni-row class="policyTitle" style="margin: 15px auto">
      <uni-col tag="h1" align="center" :span="22" :offset="1">
        <text>
          <h3>{{ PolicyPublish.policyTitle }}</h3>
        </text>
      </uni-col>
    </uni-row>
    <uni-row type="flex" justify="space-between">
      <uni-col class="createMessage" style="height: 35px" :span="22" :offset="1">
        <uni-row>
          <uni-col class="updateTime" tag="span" :offset="0" align="center" style="" :span="5">
            <view>
              <text>{{ PolicyPublish.updateTime }}</text>
            </view>
            <view v-if="PolicyPublish.createTime == null">
              <text>{{ "" }}</text>
            </view>
          </uni-col>
          <uni-col class="policySource" tag="span" :push="11" align="center" :span="4">
            <view>
              <text>
                {{ returnDict("policy_type", PolicyPublish.policyType) }}
              </text>
              <view v-if="PolicyPublish.policySource == null">
                <text>{{ "" }}</text>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </uni-col>
    </uni-row>
    <uni-row>
      <uni-col :span="24">
        <view class="divider">
          <image class="start" src="@/static/images/find/飞鹅.png" />
          <view class="solid" />
          <image class="end" src="@/static/images/find/点赞.png" />
        </view>
      </uni-col>
    </uni-row>
    <uni-row>
      <uni-col class="policyContent" :span="22" :offset="1">
        <div v-html="PolicyPublish.policyContent"></div>
      </uni-col>
    </uni-row>{{ boon }}
  </view> -->
</template>

<script >
import { getPolicyPublish, dict } from "@/api/lef/policyPublish";
import { onBeforeUnmount, onBeforeMount, onMounted, onUpdated } from 'vue';
	import { read } from '@/api/home.js'
export default {
  name: "policyInfomation",
  components: {},
  props: {},
  data() {
    return {
      PolicyPublish: {},
      loading: false,
      dictTypes: ["policy_type"],
      dicts: {},
      boon: ''
    };
  },
  computed: {},
  // created() {
  //   uni.onNavigationBarButtonTap((e) => {
  //   // uni.onNavigationBarButtonTap(function(e) {
  //     console.log("监听到原生标题栏按钮点击事件");
  //     console.log(e);
  //   })
  // },
  methods: {
    getPolicyById(id) {
      this.loading = true;
      getPolicyPublish(id).then((response) => {
        this.PolicyPublish = response.data;
        this.loading = false;
      });
    },
    getDictList() {
      this.dictTypes.forEach((element) => {
        this.getDicts(element).then((res) => {
          this.dicts[element] = res.data;
        });
      });
    },
    returnDict(dictType, e) {
      const dictList = this.dicts;
      if (dictList[dictType] !== undefined && dictList[dictType].length !== 0) {
        for (let dict of dictList[dictType]) {
          if (dict.dictValue === e) {
            return dict.dictLabel;
          }
        }
      }
    },
  },
  watch: {
    loading: {
      handler: function (val, oldVal) {
        if (val === true) {
          this.$modal.loading("加载中，请耐心等待...");
        } else {
          this.$modal.closeLoading();
        }
      },
      deep: true,
    },
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.getDictList();
    this.getPolicyById(options.id);
	read({'id':options.id}).then(res=>{
		console.log(res,'res')
	})
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() {
    const that = this
    return that.$listenOB.goBack()
  },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
// page {
//   background: white;
// }

// .policyInfomation {
//   min-height: calc(100vh - calc(44px + var(--status-bar-height)));
// }

// .policyTitle {
//   h3 {
//     text-align: center;
//     height: auto;
//     text-overflow: ellipsis;
//     overflow: hidden;
//     display: -webkit-box;
//     -webkit-line-clamp: 2;
//     -webkit-box-orient: vertical;
//     font-family: "仿宋", "Microsoft Yahei", "华文细黑", STXihei, "微软雅黑",
//       Verdana, SimHei, sans-serif;
//     font-weight: 600;
//   }
// }

// .createMessage {
//   * {
//     white-space: nowrap;
//     display: flex;
//     color: #9f9f9f;
//   }

//   /deep/.policySource {
//     span {
//       text-align: right;
//       text-overflow: ellipsis;
//       width: 30vw;
//       overflow: hidden;
//     }
//   }
// }

// .createMessage .el-col {
//   margin-top: 8px;
//   white-space: nowrap;
//   text-overflow: ellipsis;
//   overflow: hidden;
//   color: #fff;
// }

// .policyType {
//   margin: 5px 25px auto auto;
//   color: #fff;
//   font-size: 35px;
//   font-weight: 600;
//   font-family: "仿宋", "Microsoft Yahei", "华文细黑", STXihei, "微软雅黑",
//     Verdana, SimHei, sans-serif;
// }

// .divider {
//   display: flex;
//   justify-items: center;

//   .start {
//     width: 16vw;
//     height: 16vw;
//   }

//   .solid {
//     margin-top: 8vw;
//     height: 0;
//     width: 72vw;
//   }

//   .solid::after {
//     left: -10%;
//     width: 240%;
//   }

//   .end {
//     width: 8vw;
//     height: 8vw;
//   }
// }

// .policyContent {
//   color: rgb(94, 94, 94);
//   background-color: rgb(232, 243, 255);
//   font-family: "经典行书-简" "微软雅黑", Courier, monospace;
//   padding: 20rpx !important;
//   margin-bottom: 10%;

//   :not(not) {
//     max-width: 100%;
//   }

//   >:not(not) {

//     >:not(not) {

//       >:not(not) {

//         >:not(not) {

//           >:not(not) {

//             >::v-deep iframe {
//               width: 70vw;
//             }
//           }
//         }
//       }
//     }
//   }
// }

// div>>>.policyContent img {
//   display: block;
//   margin: 20px auto;
//   max-width: 90%;
//   max-height: max-content;
// }

// div>>>.policyContent p {
//   line-height: 40px;
//   margin-left: 20px;
//   margin-right: 20px;
// }

// .updateTime {
//   padding-top: 2px;
// }

// .policyPublish-footer {
//   width: 100%;
//   height: 40px;
//   line-height: 40px;
//   text-align: center;
//   color: #fff;
//   /* background-color: #00a0e8; */
//   background-color: #5dce28;
//   font-family: Arial;
//   font-size: 12px;
//   margin: 40px auto 0% auto;
//   padding-top: 0px;
//   bottom: 0px;
//   position: fixed;
// }
// 新版样式
$color: #4892FD;

	.con {
		// min-height: 100vh;
		background-color: #fff;
		padding: 10rpx 30rpx 100rpx;
		background: #fff;
		box-sizing: border-box;

		.read {
			margin-top: 60rpx;
			height: 40rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 40rpx;
		}

		.body {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 44rpx;
		}

		.title {
			font-size: 34rpx;
			font-weight: 600;
			color: #0D0D0D;
			line-height: 50rpx;
		}

		.info {
			margin-top: 30rpx;
			line-height: 40rpx;
			height: 40rpx;

			.type {
				font-size: 24rpx;
				font-weight: 500;
				color: $color;

			}

			.time {
				margin-left: 50rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>