wx_oms/components/customPopup.vue

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