| 
					
				 | 
			
			
				@@ -0,0 +1,205 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	<view class="wl-modal" v-if="visible"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		<view class="wl-modal-body" :class="{'modal-center-enter': visible}"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			<view class="wl-modal-body-title" v-if="title"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				{{title}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			</view> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			<view class="wl-modal-body-content" v-if="content" :style="{textAlign: textAlign}"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				{{content}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			</view> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			<view class="wl-modal-body-button"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<button :open-type="cancelOpenType" class="wl-modal-body-button-item" @tap="cancel" :style="{color: cancelColor}" v-if="showCancel && cancelText"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					{{cancelText}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				</button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<button :open-type="confirmOpenType" class="wl-modal-body-button-item" @tap="confirm" :style="{color: confirmColor}" v-if="confirmText"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					{{confirmText}} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				</button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			</view> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		</view> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	</view> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		name: 'wl-modal', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		data () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			return { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				visible: false, // 是否显示 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				title: '提示', // 提示标题 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				content: '', // 提示内容 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				cancelText: '取消', // 取消按钮的文字   
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				confirmText: '确定', // 确认按钮文字   
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				showCancel: true, // 是否显示取消按钮,默认为 true 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				confirmColor: '#576B95', // 确定按钮颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				cancelColor: '#666', // 取消按钮颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				textAlign: 'center' ,// 对齐方式 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				confirmOpenType: '', // 确定按钮open-type 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				cancelOpenType: '', // 取消按钮open-type 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				success: () => {} // 回调方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		}, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		methods: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			// 初始化弹框并打开 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			showModal(data) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.title) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.title = data.title 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.title = '提示' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.content) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.content = data.content 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.content = '' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.cancelText) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.cancelText = data.cancelText 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.cancelText = '取消' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.confirmText) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.confirmText = data.confirmText 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.confirmText = '确定' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.showCancel === false || data.showCancel === true) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.showCancel = data.showCancel 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.showCancel = true 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.confirmColor) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.confirmColor = data.confirmColor 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.confirmColor = '#576B95' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.cancelColor) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.cancelColor = data.cancelColor 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.cancelColor = '#666' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.textAlign) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.textAlign = data.textAlign 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.textAlign = 'center' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.confirmOpenType) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.confirmOpenType = data.confirmOpenType 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.confirmOpenType = '' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.cancelOpenType) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.cancelOpenType = data.cancelOpenType 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.cancelOpenType = '' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				if (data.success) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.success = data.success 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					this.success = () => {} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				this.visible = true 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			}, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			// 取消 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			cancel() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				this.success({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					cancel: true, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					confirm: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					errMsg: 'showModal:ok' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				this.visible = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			}, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			// 确定 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			confirm() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				this.success({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					cancel: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					confirm: true, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					content: null, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					errMsg: 'showModal:ok' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				this.visible = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style lang="scss" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 显示和隐藏效果 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+@keyframes modal-center-enter { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  0% { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	opacity: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	transform: scale(0.7); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  to { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	opacity: 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.wl-modal{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	background-color: rgba($color: #000000, $alpha: 0.6); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	justify-content: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	position: fixed; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	left: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	top: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	z-index: 1000; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	.wl-modal-body{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		width: 640rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		padding-top: 64rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		background-color: #fff; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		border-radius: 16rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		display: table-cell; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		vertical-align: middle; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		&.modal-center-enter{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			animation: modal-center-enter 0.2s ease-out forwards; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		.wl-modal-body-title{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			font-size: 34rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			font-weight: 900; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			color: #000; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			margin-bottom: 32rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			padding: 0 48rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		.wl-modal-body-content{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			font-size: 34rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			line-height: 48rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			color: #666; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			word-break:break-all; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			word-wrap:break-word; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			white-space:pre-wrap; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			margin-bottom: 32rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			padding: 0 48rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		.wl-modal-body-button{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			justify-content: space-between; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			border-top: #E5E5E5 1px solid; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			.wl-modal-body-button-item{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				&::after { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					border: none; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				border-right: #E5E5E5 1px solid; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				background-color: initial; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				font-size: 34rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				border-radius: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				flex: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				text-align: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				padding: 30rpx 16rpx; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				font-weight: 900; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				line-height: normal; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				overflow: initial!important; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				&:last-child{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+					border-right: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</style> 
			 |