yusheng-h5/pages/feedback/problemDetail.vue

<template>
	<view class="view-page">
		<headerHeight />
		<navBar :navTitle="'问题详情'" bgColor="#fff" :emitBack="true" @backEvent="back">
		</navBar>
		<view class="container" v-if="detailData">
			<view class="title">
				{{detailData.title}}
			</view>
			<view class="title mt-24" v-html="detailData.content">

			</view>
		</view>
		<view class="flex-line footer mt-24 w-fill">
			<view class="help-box">
				<view class="help-icon">
					<uni-icons type="hand-up" size="30"></uni-icons>
				</view>
				<view class="color-0 mt-24 font-24">
					有帮助
				</view>
			</view>
			<view class="help-box">
				<view class="help-icon">
					<uni-icons type="hand-down" size="30"></uni-icons>
				</view>
				<view class="color-0 mt-24 font-24">
					没帮助
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/until/http.js';
	import headerHeight from '@/component/headerHeight.vue';
	import navBar from '@/component/nav.vue';
	export default {
		components: {
			headerHeight,
			navBar
		},
		data() {
			return {
				errorPage: false,
				detailData: null,
				statusBarHeight:0
			}
		},
		onLoad(options) {
			const {
				id
			} = options
			if (id) this.getDetail(id)
		},
		methods: {
			getDetail(id) {
				http.get('/api/Help/help_detail', {
					token: uni.getStorageSync('token') || '',
					id: id
				}).then(response => {
					const {
						data,
						code
					} = response
					console.log(code, data)
					this.detailData = code ? data : null
					this.errorPage = false
				}).catch(error => {
					this.errorPage = true
				});
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-page {
		width: 100vw;
		min-height: 100vh;
		background-color: #F8F8F8;
		.status-bar{
			background-color: #fff;
		}
		.nav {
			padding: 32rpx;
			width: calc(100% - 64rpx);
			justify-content: start;
			background-color: #fff;

			.icon-image {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				width: calc(100% - 48rpx);
				text-align: center;
			}
		}

		.container {
			padding: 24rpx 32rpx;

			.title {
				background-color: #fff;
				border-radius: 14rpx;
				padding: 14rpx 24rpx;
			}
		}

		.footer {
			display: inline-flex;
			justify-items: center;
			justify-content: space-evenly;
			align-items: center;
			.help-box {
				text-align: center;
				.help-icon {
					width: 100rpx;
					height: 100rpx;
					background: #EFF2F8;
					border-radius: 50%;
					display: inline-flex;
					justify-items: center;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>