cashier-ipad/components/my-components/my-model.vue

<template>
	<view class="model u-text-center"  v-if="show" @tap="modelTap">
		<div @tap.stop="" class="box u-font-32 tranistion" :class="[returnBoxClass]" :style="[computeBoxStyle,computeStyle()]" >
			<view class="u-relative">
				<view class=" color-333 font-bold">{{props.title||'提示'}}</view>
				<template v-if="showIcon">
					<slot name="icon">
						<view class="close" @tap="close">
							<uni-icons :size="iconSize" :color="iconColor" type="clear"></uni-icons>
						</view>
					</slot>
				</template>
				
			</view>
			
			<slot name="desc">
				<view class=" color-666 u-p-30">{{props.desc}}</view>
			</slot>
			<slot name="btn" v-if="showBtn">
				<view class="btns u-flex">
					<view class="cancel btn" @tap="cancel">{{props.cancelText}}</view>
					<view class="confirm btn" @tap="confirm">{{props.confirmText}}</view>
				</view>
			</slot>
		</div>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	
	const emits = defineEmits(['cancel', 'confirm', 'close', 'open'])
	
	
	function isNumber(value) {
	    return Number(value)==value && !isNaN(value);
	}

	const props = defineProps({
		confirmClickClose:{
			type:Boolean,
			default:true
		},
		isClickMaskHide:{
			type:Boolean,
			default:true
		},
		iconSize:{
			type: Number,
			default: 26
		},
		iconColor:{
			type: String,
			default: '#999'
		},
		mode:{
			//center bottom
			type: String,
			default: 'center'
		},
		//单位rpx
		borderRadius:{
			type:[String,Number],
			default:36
		},
		showIcon:{
			type:Boolean,
			default:true
		},
		showBtn:{
			type:Boolean,
			default:true
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		confirmText: {
			type: String,
			default: '确定'
		},
		title: {
			type: String,
			default: '提示'
		},
		desc: {
			type: String,
			default: ''
		},
		width:{
			type:[Number,String],
			default:''
		}
	})
	
	
	function computeStyle(){
		const width=props.width?props.width:''
		const bottomBorderRadius=`${props.borderRadius}rpx ${props.borderRadius}rpx 0 0`
		const centerBorderRadius=`${props.borderRadius}rpx`
		const borderRadius=isNumber(props.borderRadius)?(props.mode==='bottom'?bottomBorderRadius:centerBorderRadius):props.borderRadius
		return `
		width:${width?width:''};
		borderRadius:${borderRadius};
		`
	}
	
	const computedClass=computed(()=>{
		return show.value?'show':'none'
	})
	const returnBoxClass=computed(()=>{
		if(props.mode==='center'){
			return ''
		}
		return  'bottom-box'
	})
	const computeBoxStyle=computed(()=>{
		if(props.mode==='center'){
			return ''
		}
	})
	function getComputeClass() {

	}
	let show = ref(false)

	function open() {
		show.value = true
		emits('open')
	}

	function close() {
		show.value = false
		emits('close')
	}
	function modelTap(){
		if(props.isClickMaskHide){
			close()
		}
	}
	function cancel() {
		show.value = false
		emits('cancel')
		emits('close')
	}

	function confirm() {
		emits('confirm')
		if(props.confirmClickClose){
			close()
		}
	}


	defineExpose({
		open,
		close,
		cancel,
		confirm
	})
</script>

<style lang="scss" scoped>
	.show{
		transform: scale(1);
	}
	.none{
		transform: scale(0);
	}
	.close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		// background: #999999;
		// border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.model {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: rgba(51, 51, 51, 0.5);
		z-index: 980;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 46rpx;
		
		.box {
			width: 100%;
			background-color: #fff;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding-top: 32rpx;
			overflow: hidden;
			max-width: 50vw;
			.btns {
				border-top: 2rpx solid #E5E5E5;

				.cancel {
					color: #666;
				}

				.confirm {
					color: $my-main-color;
				}

				&>.btn {
					padding: 30rpx;
					flex: 1;
				}
			}
		}
		.bottom-box{
			position: absolute;left: 0;
			right: 0;
			bottom: 0;
			border-radius: 0;
			padding-bottom: 100rpx;
			border-radius: 36rpx 36rpx 0 0;
		}

	}
</style>