156 lines
3.4 KiB
Vue
156 lines
3.4 KiB
Vue
<template>
|
|
<view class="integral-modal" v-if="visible">
|
|
<view class="modal-mask" @click="closeModal"></view>
|
|
<view class="modal-content">
|
|
<view class="input-wrapper">
|
|
<input type="number" v-model="inputValue" :min="minValue" :max="maxValue" @input="handleInput"
|
|
:placeholder="instructions" />
|
|
</view>
|
|
<!-- <view class="instructions">{{ instructions }}</view> -->
|
|
<up-button type="primary" @click="confirmIntegral" text="确定"></up-button>
|
|
<button style="margin-top: 20rpx;" @click="IntegralInputclose">取消</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
defineProps,
|
|
defineEmits
|
|
} from 'vue';
|
|
|
|
// 定义接收的属性
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
minValue: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
maxValue: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
instructions: {
|
|
type: String,
|
|
default: '请输入有效积分值'
|
|
}
|
|
});
|
|
|
|
// 定义事件发射器
|
|
const emits = defineEmits(['confirm', 'close', 'IntegralInputclose']);
|
|
|
|
// 定义响应式变量
|
|
const inputValue = ref('');
|
|
|
|
// 处理输入事件，确保输入为整数且在有效范围内
|
|
const handleInput = (e) => {
|
|
// 兼容不同平台获取输入值的方式
|
|
let value = e.detail ? e.detail.value : (e.target ? e.target.value : '');
|
|
// if (value > props.maxValue || value < props.minValue) {
|
|
// inputValue.value = value > props.maxValue ? props.maxValue : props.minValue
|
|
// return false;
|
|
// }
|
|
// 只允许输入数字，去除非数字字符
|
|
value = value.replace(/\D/g, '');
|
|
if (value) {
|
|
value = parseInt(value, 10);
|
|
// 限制输入值在最小和最大值之间
|
|
// if (value < props.minValue) {
|
|
// value = props.minValue;
|
|
// } else if (value > props.maxValue) {
|
|
// value = props.maxValue;
|
|
// }
|
|
inputValue.value = value.toString();
|
|
} else {
|
|
inputValue.value = '';
|
|
}
|
|
};
|
|
|
|
// 确认积分并返回值给父组件
|
|
const confirmIntegral = () => {
|
|
console.log(inputValue.value, 444)
|
|
if (inputValue.value < props.minValue || inputValue.value > props.maxValue) {
|
|
uni.showToast({
|
|
title: '输入的积分值不在有效范围内',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
if (inputValue.value) {
|
|
const value = parseInt(inputValue.value, 10);
|
|
if (value >= props.minValue && value <= props.maxValue) {
|
|
emits('confirm', value);
|
|
emits('close');
|
|
} else {
|
|
uni.showToast({
|
|
title: '输入的积分值不在有效范围内',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '请输入有效的积分值',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
};
|
|
|
|
const IntegralInputclose = () => {
|
|
emits('IntegralInputclose');
|
|
}
|
|
|
|
// 关闭模态框
|
|
const closeModal = () => {
|
|
emits('close');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.integral-modal {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
}
|
|
|
|
.modal-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.input-wrapper {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.instructions {
|
|
margin-bottom: 20px;
|
|
color: #666;
|
|
}
|
|
</style> |