You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.1 KiB
162 lines
3.1 KiB
<template> |
|
<view> |
|
<uni-popup @change="change" ref="setUpPopup" type="center"> |
|
<view :style="{minHeight:styles.height,width:styles.width}" class="setUpPopup_jb"> |
|
<image v-if="show.img" class="popup_jb_headerImg" :src="baseUrl + imgSrc "></image> |
|
<slot name="coment"/> |
|
<view v-if="show.footer" class="popup_jb_footer"> |
|
<view @tap='closeFn' :style="{background:butten.coloseBg,color:butten.coloseColor,borderRadius:butten.borderRadius?butten.borderRadius:''}" class="popup_jb_close">{{butten.colse}}</view> |
|
<view @tap='confirmFn' :style="{background:butten.confirmBg,color:butten.confirmColor,borderRadius:butten.borderRadius?butten.borderRadius:''}" class="popup_jb_ok">{{butten.confirm}}</view> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
/* |
|
style:宽高， |
|
show显示隐藏控件， |
|
imgSrc:顶部图片 |
|
*/ |
|
export default { |
|
name:"customPopup", |
|
props:{ |
|
styles:{ |
|
type:Object, |
|
default:()=>{ |
|
return { |
|
height:'', |
|
width:'' |
|
} |
|
} |
|
|
|
}, |
|
show:{ |
|
type:Object, |
|
default:()=>{ |
|
return { |
|
img:true, |
|
footer:true |
|
} |
|
} |
|
}, |
|
value:{ |
|
type:Boolean, |
|
default:false |
|
}, |
|
imgSrc:{ |
|
type:String, |
|
default:'popu.png' |
|
}, |
|
butten:{ |
|
type:Object, |
|
default:()=>{ |
|
return { |
|
colse:'取消', |
|
confirm:'确定', |
|
coloseBg:'', |
|
coloseColor:'', |
|
confirmBg:'', |
|
confirmColor:'' |
|
} |
|
} |
|
} |
|
}, |
|
watch:{ |
|
value:function(o,l){ |
|
console.log('监听',o) |
|
if(o){ |
|
this.$refs.setUpPopup.open('center') |
|
}else{ |
|
this.$refs.setUpPopup.close() |
|
} |
|
} |
|
}, |
|
data() { |
|
return { |
|
baseUrl:this.networkResource.baseUrl, |
|
}; |
|
}, |
|
methods:{ |
|
change(e){ |
|
// this.value = e.show |
|
this.$emit('input',e.show) |
|
}, |
|
closeFn(){ |
|
this.$emit('closeFn') |
|
// this.$refs.setUpPopup.close() |
|
}, |
|
confirmFn(){ |
|
this.$emit('confirmFn') |
|
// this.$refs.setUpPopup.close() |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.popup_jb_footer{ |
|
display: flex; |
|
font-size: 32rpx !important; |
|
/* padding: 29rpx 70rpx 29rpx 70rpx; */ |
|
padding: 0rpx 70rpx; |
|
box-sizing: content-box; |
|
/* flex: 1; */ |
|
/* gap:29rpx; */ |
|
/* -webkit-gap:29rpx; */ |
|
align-items: center; |
|
margin-bottom: 40rpx; |
|
|
|
} |
|
.popup_jb_ok{ |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
color: #FFFFFF; |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
height: 74rpx; |
|
border: 0px; |
|
} |
|
.popup_jb_close{ |
|
height: 74rpx; |
|
border: 1rpx solid #BBBBBB !important; |
|
border-radius: 10rpx; |
|
color: #333333; |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-right: 29rpx; |
|
border: 0px; |
|
} |
|
.popup_jb_title{ |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: bold; |
|
color: #1583FF; |
|
margin-top: 47rpx; |
|
} |
|
.popup_jb_text{ |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
margin-top: 17rpx; |
|
} |
|
.popup_jb_headerImg{ |
|
width: 100%; |
|
height: 134rpx; |
|
} |
|
.setUpPopup_jb{ |
|
width: 610rpx; |
|
/* height: 733rpx; */ |
|
background: #FFFFFF; |
|
border-radius: 25rpx; |
|
overflow:hidden; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
</style>
|
|
|