oms

components/customPopup.vue

@@ -0,0 +1,162 @@
+<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}" class="popup_jb_close">{{butten.colse}}</view>
+					<view @tap='confirmFn' :style="{background:butten.confirmBg,color:butten.confirmColor}" 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>