H5/pages/map/model/hint.vue

<template>
	<uni-popup ref="hintRef" :isMaskClick='true' type="center" border-radius="10px 10px 0 0"
		maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
		<view class="hint-box">
			<view class="hint-title">服务声明</view>
			<view class="hint-val">
				尊敬的市民朋友，您好！【武汉公安政务服务地图】正在试运行中，如有任何疑问和建议，欢迎致电武汉公安政务服务专线027-85395115。
			</view>
			<view class="hint-btns" @click.stop="onClose()">
				<view class="hint-btn">关闭</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { PhoneCall } from "@/utils/tool.js";
	export default {
		data() {
			return {
				hintList: []
			}
		},
		created() {

		},
		mounted() {
			this.cheackShow();
		},
		methods: {
			cheackShow() {
				try {
					const a = uni.getStorageSync('showHint');
					if (!a) {
						this.open()
					}
				} catch (e) {
					this.open()
				}
			},
			open() {
				this.$refs.hintRef.open()
				try {
					uni.setStorageSync('showHint', true);
				} catch (e) {
					// error
				}
			},
			onPhoneCall(phone) {
				PhoneCall(phone).then(res => {
					this.onClose()
				})
			},
			onClose() {
				this.$refs.hintRef.close()
				this.hintList = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 1002;

		.hint-box {
			width: 80vw;
			min-height: 30vh;
			height: auto;
			max-height: 70vh;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			justify-content: space-between;

			.hint-title {
				font-size: 36rpx;
				padding: 20rpx 0;
			}

			.hint-val {
				height: 1px;
				flex: 1;
				padding: 20rpx 30rpx;
				color: #6F6F6F;

			}

			.hint-btns {
				padding: 20rpx 0;

				.hint-btn {
					width: 260rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					border-radius: 10rpx;
					background-color: #3291F8;
				}

			}
		}
	}
</style>