web-app-v1/components/hint-pop.vue

<template>
	<view class="pop flexCC" v-if="showPop">
		<view class="pop_con">
			<image src="../static/icon/hint_icon.png" class="hint_icon"></image>
			<view class="title">温馨提醒</view>
			<view class="con">
				为防止过多使用“代支付”导致店铺出现异常无法使用，建议优先使用“分享给客户支付”让客户进行微信支付。若出现客户给的是现金或者不会使用微信支付的情况，你可代为支付。
			</view>
			<view class="btn_box">
				<view @click.stop="pay" class="flexC">继续使用代支付</view>
				<view @click.stop="share" class="flexC">分享给客户支付</view>
			</view>
		</view>
		<text class="iconfont iconguanbi" @click="close"></text>
	</view>
</template>

<script>
	export default {
		name: "hint-pop",
		props: {
			showPop: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			};
		},
		methods: {
			close() {
				this.$emit('close')
			},
			pay() {
				this.$emit('pay');
			},
			share() {
				this.$emit('share');
			}
		}
	}
</script>

<style lang="scss">
	.pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;

		.hint_icon {
			width: 183rpx;
			height: 135rpx;
			position: relative;
			margin-top: -85rpx;
		}

		.pop_con {
			width: 664rpx;
			height: 600rpx;
			background: #fff;
			border-radius: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 22rpx;
			}

			.con {
				color: $base-color;
				margin: 30rpx 0 20rpx;
				font-size: 30rpx;
			}

			.btn_box {
				view {
					width: 540rpx;
					height: 88rpx;
					background: #FFFFFF;
					border: 2rpx solid #FB231F;
					border-radius: 44rpx;
					font-size: 32rpx;
					color: $base-color;
				}

				view:last-child {
					background: $base-line-bg;
					color: #fff;
					margin-top: 20rpx;
				}

			}

		}

		.iconfont {
			color: #fff;
			font-size: 60rpx;
			margin-top: 30rpx;
		}
	}
</style>