MP_XOIL_company_new/components/AbnormalPopup.vue

<template>
	<view v-if="PopupShows">
		<view class="AbnormalPopup_box" v-for="(item,index) in errorsList" v-if="index == types" :key='i'>
			<view class="AbnormalPopup_box_main" v-if='types == 4 || types == 5 '>
				<view class="AbnormalPopup_box_img_big">
					<image :src="item.icon" mode=""></image> 
				</view> 
				<view class="AbnormalPopup_box_text_big">
					{{item.title}}
				</view> 
				<view class="AbnormalPopup_box_button">
					<view class="AbnormalPopup_box_button_back btn" @tap="hidenPopupback" >
						返回
					</view>
					<button  class="AbnormalPopup_box_button_Refresh_big btn" :disabled="isdisabled" @tap='RefreshPopupText'>
						{{refreshText}}
					</button> 
				</view>
			</view>
			<view class="AbnormalPopup_box_main" v-else >
				<view class="AbnormalPopup_box_img">
					<image :src="item.icon" mode=""></image> 
				</view> 
				<view class="AbnormalPopup_box_text">
					{{item.title}}
				</view>
				<view class="AbnormalPopup_box_customerService" v-if="types == 1 || types == 2 ">
					联系客服
				</view>
				<view class="AbnormalPopup_box_button">
					<view class="AbnormalPopup_box_button_back btn" @tap="hidenPopupbacks"  v-if="types == 2 ">
						重新选择
					</view>
					<view class="AbnormalPopup_box_button_back btn" @tap="hidenPopup"  v-if="types != 2 &&  types != 6 ">
						返回
					</view> 
					<view class="AbnormalPopup_box_button_back btn" @tap="hidenPopupbacks"  v-if="types == 6  ">
						返回
					</view> 
					<view class="AbnormalPopup_box_button_Refresh btn" v-if="types == 1" @tap="RefreshPopup" >
						刷新
					</view>
					<view class="AbnormalPopup_box_button_Refresh btn" v-if="types == 0" @tap="hidenPopup">
						继续下单
					</view>
					<view class="AbnormalPopup_box_button_Refresh btn" v-if="types ==6" @tap="gotoDetail">
						前往站点
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	export default {
		name:"AbnormalPopup",
		props:{
			types:{
				type: Number,
				default:null
			},
			PopupShows:{
				type:Boolean,
				default :false
			},
			checkType:{
				type:Boolean,
				default :false
			},
			payTyps:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				refreshText:'刷新',
				showButtons:false ,
				cheack:false,
				time:30,
				isdisabled:false,
				errorsList:[
					{
						title:'您当前位置和该油站位置不一致或距离过远，是否继续下单',
						icon: require('@/static/img/jlgy.png'),
						type:0 
					},{
						title:'您当前使用的加注机不可用，请提枪挂枪后重试',
						icon:require('@/static/img/tiqiang.png')  ,
						type:1
					},{
						title:'余额不足',
						icon:require('@/static/img/ywbz.png')  ,
						type:2
					},{
						title:'账户异常，错误代码：-500',
						icon:require('@/static/img/zhyc.png') ,
						type:3
					},{
						title:'请提枪后再挂枪',
						icon:require('@/static/img/stopGun.gif') ,
						type:4
					},{
						title:'加注完成后，挂枪即可离开',
						icon:require('@/static/img/carryGun.gif') ,
						type:5
					},{
						title:'扫码与当前站点不匹配,是否前往当前站点',
						icon:require('@/static/img/jlgy.png') ,
						type:6
					},
				]
			}
		},
		methods:{
			showButton(){ 
				let _that = this 
				_that.showButtons = true
				if(_that.types == 4){ 
					_that.isdisabled = false
				}else{ 
					_that.RefreshPopupText()
				}
			},
			hidenPopupback(){ 
				uni.switchTab({
					url:'/pages/tabbar/station/stationList'
				}) 
			},
			hidenPopupbacks(){
				this.$emit('hidenPopup',false) 
			},
			gotoDetail(){
				this.$emit('gotoDetail',false) 
			},
			RefreshPopupText(){ 
				let _that = this
				console.log(_that.types)
				if(_that.types!=4){
					const fn = setInterval(function() {
						if(_that.checkType == true){
							clearInterval(fn)
					uni.redirectTo({
								url: '/BagStation/orderDetail/orderDetailUrea?type=orderPay',
								fail: (err) => {}
							})
							return
						}
						_that.time--
						_that.refreshText = _that.time + 's后可以点击'
						_that.isdisabled = true
						if(_that.time%2==0){
							console.log(_that.time) 
							_that.$emit('getureaFinanceApi')
						}
						if (_that.time==0) {
							clearInterval(fn)
							_that.refreshText = '刷新'
							_that.isdisabled = false
							_that.time = 5
						}
					}, 1000); 
					return
				} else{
					_that.hidenPopup()
				} 
			},
			hidenPopup(){ 
				 this.$emit('hiden',false) 
			},
			RefreshPopup(){
				this.$emit('RefreshPopup')
			},
		}, 
		onShow() {
			this.showButton()
			if(_that.types == 5){
				this.RefreshPopupText()
			}
			console.log(this.types,'sdasdasd')
		}
	}
</script>

<style>
.AbnormalPopup_box{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,.6);
    z-index: 69;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.AbnormalPopup_box_customerService{
	color: red;
	text-align: center;
	margin: 5% 0;
}
.AbnormalPopup_box_main{
	background-color: #fff;
    border-radius: 10px;
    padding: 4%;
    box-sizing: border-box;
    width: 80%;
    /* height: 40%; */
    position: relative;
}
.AbnormalPopup_box_img{
	display: flex;
	justify-content: center;
	align-items: center;
}
.AbnormalPopup_box_img_big{
	display: flex;
	justify-content: center;
	align-items: center;
}
.AbnormalPopup_box_img_big image{
	width: 600rpx;
	height: 600rpx;
	display: block;
}
.AbnormalPopup_box_img image{
	width: 200rpx;
	height: 200rpx;
	display: block;
}
.AbnormalPopup_box_text{
    text-align: center;
    font-size: 33rpx;
    padding: 3%;
	margin-bottom: 4%;
}
.AbnormalPopup_box_text_big{
	text-align: center;
	font-size: 33rpx;
	padding: 3%;
	margin-bottom: 4%;
	font-weight: 700;
}
.AbnormalPopup_box_button{
	display: flex;
	    justify-content: space-around;
	    align-items: center;
	    /* position: absolute; */
	    bottom: 10%;
	    left: 10%;
	    right: 10%;
}
.AbnormalPopup_box_button_Refresh{
	    width: 40%;
	    flex: 0 0 auto;
	    background-color: red;
	    text-align: center;
	    color: #fff;
	    border-radius: 10rpx;
	    padding: 3%;
	    font-size: 29rpx;
		border: 2rpx solid red;
}
.AbnormalPopup_box_button_back{
	    width: 40%;
	    flex: 0 0 auto;
	    background-color: #fff;
	    text-align: center;
	    color: red;
	    border: 2rpx solid red;
	    border-radius: 10rpx;
	    padding: 3%;
	    font-size: 29rpx;
}
.AbnormalPopup_box_button_Refresh_big{
		width: 40%;
	    flex: 0 0 auto;
	    background-color: reddarkblue;
	    text-align: center;
	    color: #fff;
	    border-radius: 10rpx; 
		 font-size: 30rpx;
		 height: 78rpx;
		 border: 2rpx solid red;
		 margin: 0;
		 background-color: red;
}
</style>