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">
				<scroll-view scroll-y="true" class="hint-content">
					<view class="paragraph-item">
						尊敬的市民朋友，您好！当前我市迎来居民身份证办理高峰期，为方便错峰办证，特提示如下：
					</view>
					<view class="paragraph-item">
						一、到期换领居民身份证业务可“全市通办”，在“政务地图”上定位后搜索“身份证”即可查看附近可办点位，<text
							class="item-sing">就近办理</text>。五年内丢失补领居民身份证的还可通过湖北公安政务服务平台（PC端、移动端）网上<text
							class="item-sing">在线办理</text>。
					</view>
					<view class="paragraph-item">
						二、每日上午9:30至10:30，以及下午14:30至16:00，是各点位人流量集中时段。为避免高峰时段排队等候，请尽量<text
							class="item-sing">错峰</text>前往办理。
					</view>
					<view class="paragraph-item">
						三、近期全市户政服务窗口人流量较大的有：武汉市民之家公安政务服务专区，江岸公安分局户政服务中心，硚口区政务服务中心公安大厅，青山区政务服务中心公安大厅，东湖新技术开发区政务服务中心公安大厅，武汉经济技术开发区政务服务中心公安大厅，江夏区纸坊街纸坊派出所，蔡甸区蔡甸街派出所，洪山区张家湾街派出所，江汉区政务服务中心公安大厅。
					</view>
				</scroll-view>
			</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;
			background-color: #fff;
			border-radius: 20rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			// justify-content: space-between;

			.hint-title {
				text-align: center;
				font-size: 36rpx;
				height: 80rpx;
				line-height: 80rpx;
			}

			.hint-val {
				// height: calc(100% - 76rpx - 130rpx);
				padding: 20rpx 30rpx;
				color: #6F6F6F;
		 
				.hint-content { 
					height: auto;
					min-height: 30vh;
					max-height: 65vh;
				}

				.paragraph-item {
					text-indent: 2em;

					.item-sing {
						font-weight: bold;
					}
				}
			}

			.hint-btns {
				padding: 20rpx 0;

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

			}
		}
	}
</style>