rongzidanbao-ui/components/order/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>

		<!-- 提示 -->
		<view class="tips" v-if="type==1">
			<image :src="bgimg" class="bgimg"></image>
			<view class="tipa">
				<view class="tit mb12">温馨提示</view>
				<view class="txt">您当前已有<text>1</text>条预约申请</view>
				<view class="txt">可前往查看详情</view>
				<view class="flexcj mt16">
					<view class="tbtn btn1" @click="getClose">查看详情</view>
					<view class="tbtn btn2" @click="getClose">我知道了</view>	
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			type: {
				type: Number,
				default () {
					return 0
				}
			},
		},
		watch:{
		},
		data(){
			return{
				// type:0,
				bgimg:require("@/static/images/order/come/ytbg.png"),
				
			}
		},
		mounted() {
		},
		methods:{
			getClose(){
				this.$emit("getClose")
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 公共
		
// end
.tips{
	position: fixed;left: 100rpx;right: 100rpx;height: 494rpx;top: 50%;margin-top: -280rpx;border-radius: 14rpx;z-index: 10;background: #FEFEFE;
	padding-bottom: 36rpx;box-sizing: border-box;
	.bgimg{width: 100%;height: 204rpx;}
	
	.tipa{padding:4rpx 40rpx 0;
		.tit{font-size: 30rpx;font-weight: bold;color: #000000;text-align: center;}
		.txt{font-size: 30rpx;font-weight: 500;color: #666666;text-align: center;
			text{color: $com-cd3;padding: 0 4rpx;}
		}
		.tbtn{text-align: center;font-size: 30rpx;font-weight: 500;flex:0 0 auto;width: 214rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;
			&.btn1{color: #666666;;border: 2rpx solid #E6E6E6;}
			&.btn2{color: $com-cd3;border: 1px solid $com-cd3;}
		}
	}	
}
</style>