ajy/code/ajyApp/pages/webview/webview.nvue

<template>
	<view class="webview-page">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<view class="custom-head">
			<text class="back-btn" @click="goBack">← 返回</text>
			<text class="head-title">{{ title }}</text>
			<view class="placeholder"></view>
		</view>
		<web-view :src="url" class="web-content"></web-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			title: '',
			url: '',
			statusBarHeight: 44
		}
	},
	created() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
	},
	onLoad(options) {
		this.id = options.id || ''
		if (this.id === '1') {
			this.title = '用户协议'
			this.url = 'http://8.155.56.12:8081/profile/upload/userAgreement.html'
		} else if (this.id === '2') {
			this.title = '隐私政策'
			this.url = 'http://8.155.56.12:8081/profile/upload/privatery.html'
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style>
.webview-page {
	flex: 1;
	background-color: #ffffff;
}
.status-bar {
	background-color: #ffffff;
}
.custom-head {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-color: #eeeeee;
	border-bottom-style: solid;
}
.back-btn {
	font-size: 34rpx;
	color: #333333;
}
.head-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}
.placeholder {
	width: 80rpx;
}
.web-content {
	flex: 1;
}
</style>