<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: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/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:'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/stopGun.gif' ,
type:4
},{
title:'加注完成后，挂枪即可离开',
icon:'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/carryGun.gif',
type:5
},{
title:'扫码与当前站点不匹配,是否前往当前站点',
icon:'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/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>