<template><view class="numberIndex" :style="{ paddingTop: navbarHeight + 'px' }"><view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="navbar-left" @click="goBack"><view class="nav-arrow"></view></view><view class="navbar-title">{{title}}</view></view><view class="title">選擇固定數字，或者自行輸入</view><view class="input"><input class="uni-input" type="text" confirm-type="done" placeholder="請輸入或選擇" :value="inputValue"@blur="handleBlur" @input="changeInput"placeholder-style='font-weight: 400!important;font-size: 36rpx!important;color: #7D8EB3!important;' /><view class="inputClean" v-show="showClearIcon" @click="clearIcon"><image src="https://ele.qre.com.cn/charging/clean.png" mode="aspectFit" class="input-icon" /></view></view><view class="list"><view v-for="(item,index) in list" :key="index" @click="chooseNumber(item)":class="(!!chooseValue && (chooseValue === item)) ? 'list-box highLight' : 'list-box'">{{item}}</view></view></view>
</template><script>export default {data() {return {title: '數字輸入',navbarHeight: 0, // 導航欄高度statusBarHeight: 0,inputValue: '', // 輸入的數字showClearIcon: false,list: [20, 30, 40, 50, 60, 70],chooseValue: 20, // 選擇的數字minVal: 5, // 輸入的最小數字maxVal: 1000 // 輸入的最大數字}},onLoad() {// 獲取系統信息計算導航欄高度const systemInfo = uni.getSystemInfoSync();this.statusBarHeight = systemInfo.statusBarHeight;this.navbarHeight = this.statusBarHeight + 44; // 44是導航欄標準高度this.inputValue = '20'},methods: {goBack() {// 獲取當前頁面棧const pages = getCurrentPages();if (pages.length > 1) {// 如果有上一頁，則返回uni.navigateBack();} else {// 如果是首頁，則跳轉到指定頁面uni.redirectTo({url: '/pages/index/index' // 替換為您的首頁路徑});}},changeInput: function(e) {let value = e.detail.value.trim()value = value.replace(/[^\d.]/g, '');const dotArr = value.split('.');if (dotArr.length > 2) {value = dotArr[0] + '.' + dotArr.slice(1).join('');}// 2. 處理“過濾后的值與原輸入值一致”的場景if (value === this.inputValue) {// 臨時修改 inputValue 為其他值，再立即改回，強制觸發視圖更新this.inputValue = '';this.$nextTick(() => {this.inputValue = value;});} else {// 普通場景：直接賦值this.inputValue = value;}if (value) {this.showClearIcon = true;this.chooseValue = 0} else {this.clearIcon()}},// 失焦時強制修正handleBlur(e) {if (!this.inputValue) {this.inputValue = '20'return}const numValue = Number(this.inputValue)if (numValue < this.minVal) {this.inputValue = this.minVal.toString()} else if (numValue > this.maxVal) {this.inputValue = this.maxVal.toString()}},clearIcon() {this.inputValue = '20';this.chooseValue = 20this.showClearIcon = false;},chooseNumber(item) {this.inputValue = itemthis.chooseValue = item}}}
</script><style scoped>.numberIndex {width: 100vw;height: 100vh;background-color: #fff;overflow: hidden;}.numberIndex .custom-navbar {position: fixed;top: 0;left: 0;right: 0;z-index: 999;display: flex;align-items: center;background-color: #ffffff;}.numberIndex .nav-arrow {width: 18rpx;height: 18rpx;border-left: 2rpx solid #010101;border-bottom: 2rpx solid #010101;transform: rotate(45deg);margin-left: 46rpx;}.numberIndex .navbar-title {flex: 1;height: 88rpx;line-height: 88rpx;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;font-size: 32rpx;color: #000000;}.numberIndex .title {padding: 20rpx 30rpx;font-weight: 600;font-size: 36rpx;color: #0A1833;}.numberIndex .input {box-sizing: border-box;display: flex;flex-wrap: nowrap;align-items: center;height: 112rpx;border-bottom: 2rpx solid #F4F7FB;margin: 0 30rpx;}.numberIndex .input-uint {margin-right: 8rpx;font-weight: 400;font-size: 36rpx;color: #0A1833;}.numberIndex .uni-input {width: calc(100vw - 104rpx);font-weight: 600;font-size: 36rpx;color: #0A1833;}.numberIndex .input-icon {width: 32rpx;height: 32rpx;}.numberIndex .inputClean {z-index: 300;position: relative;padding: 10rpx;}.numberIndex .list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30rpx;margin: 20rpx 30rpx;}.numberIndex .list-box {display: flex;justify-content: center;align-items: center;background: #E9F0FF;border: 2rpx solid #E9F0FF;color: #7D8EB3;border-radius: 8rpx;padding: 18rpx 0;font-weight: 600;font-size: 32rpx;}.numberIndex .highLight {background: #FFFFFF;border: 2rpx solid #3377FF;color: #3377FF;}
</style>
