<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>