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>