213 lines
3.9 KiB
Vue
213 lines
3.9 KiB
Vue
<template>
|
||
<view class="y-f" style="height: 55vh">
|
||
<view class="weight">
|
||
<view class="weight-data"> {{ nums }}</view>
|
||
</view>
|
||
|
||
<view class="keyboard-container">
|
||
<view class="keypad">
|
||
<view
|
||
class="oner"
|
||
:class="item.class"
|
||
:style="getListItemStyle(index)"
|
||
v-for="(item, index) in numbers"
|
||
:key="'num_' + index"
|
||
@click="changeNums(item, index)"
|
||
>
|
||
{{ item.text }}
|
||
</view>
|
||
</view>
|
||
<view class="func-pad">
|
||
<view @click="jianshao()" class="oner flex1">
|
||
<u-icon name="arrow-leftward" bold></u-icon>
|
||
</view>
|
||
<view @click="setNull()" class="oner flex1 mt10 mb10"> 清空 </view>
|
||
<view class="oner confirm" @click="ok()"> 确认 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'zzjc-num-keyboard',
|
||
props: {
|
||
numKeyboardParam: {
|
||
type: Object,
|
||
default: null
|
||
} //小数位数，-1为不限制
|
||
},
|
||
data() {
|
||
return {
|
||
nums: '',
|
||
numbers: [
|
||
{
|
||
text: '1'
|
||
},
|
||
{
|
||
text: '2'
|
||
},
|
||
{
|
||
text: '3'
|
||
},
|
||
{
|
||
text: '4'
|
||
},
|
||
{
|
||
text: '5'
|
||
},
|
||
{
|
||
text: '6'
|
||
},
|
||
{
|
||
text: '7'
|
||
},
|
||
{
|
||
text: '8'
|
||
},
|
||
{
|
||
text: '9'
|
||
},
|
||
{
|
||
text: '0',
|
||
class: 'zero'
|
||
},
|
||
{
|
||
text: '.'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
created() {},
|
||
methods: {
|
||
//确认
|
||
ok() {
|
||
const val = {
|
||
val: this.nums
|
||
}
|
||
this.nums = ''
|
||
uni.$emit('keyboardOK', val)
|
||
},
|
||
/*
|
||
* 清空
|
||
* 数字类型改为0，其他类型改为空
|
||
* */
|
||
setNull() {
|
||
this.nums = ''
|
||
uni.$emit('keyboardOK', null)
|
||
},
|
||
clearNum() {
|
||
this.nums = ''
|
||
},
|
||
jianshao() {
|
||
if (this.nums) {
|
||
this.nums = this.nums.substring(0, this.nums.length - 1)
|
||
}
|
||
},
|
||
changeNums(item, index) {
|
||
this.sumindex = index
|
||
if (item.text == '.') {
|
||
if (this.nums.indexOf('.') != -1 || this.nums.length == 0) {
|
||
return false
|
||
}
|
||
}
|
||
//检查小数位数
|
||
let decimal = this.numKeyboardParam.decimal
|
||
if (decimal == null) decimal = -1
|
||
if (this.nums.split('.') && this.nums.split('.')[1] && decimal != -1) {
|
||
if (this.nums.split('.')[1].length >= decimal) {
|
||
return false
|
||
}
|
||
}
|
||
this.nums = this.nums + item.text
|
||
},
|
||
|
||
getListItemStyle(index) {
|
||
return {
|
||
background: this.numbers[index].background
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.keyboard-container {
|
||
flex: 5;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(232, 232, 232, 0.98);
|
||
}
|
||
.keypad {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr); /* 默认 3 列 */
|
||
gap: 10px;
|
||
padding: 10px;
|
||
flex: 4;
|
||
}
|
||
|
||
.oner {
|
||
width: 95%;
|
||
height: 55px;
|
||
font-size: 20px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 0 占两列 */
|
||
.zero {
|
||
width: 98%;
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.func-pad {
|
||
height: 100%;
|
||
display: flex;
|
||
padding: 10px 10px 10px 0;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
.confirm {
|
||
flex: 2;
|
||
color: #ffffff;
|
||
background-color: #19be6b;
|
||
}
|
||
.weight {
|
||
width: 100%;
|
||
background-color: #2c405a;
|
||
flex: 1;
|
||
padding: 8px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.weight-data {
|
||
color: #4cd964;
|
||
text-align: right;
|
||
letter-spacing: 5px;
|
||
font-size: 50px;
|
||
font-family: zzjc-lcd;
|
||
height: 40px;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.weight-data {
|
||
font-size: 25px;
|
||
}
|
||
.oner {
|
||
height: 33px;
|
||
font-size: 16px;
|
||
}
|
||
.weight-data {
|
||
height: 20px;
|
||
}
|
||
}
|
||
</style>
|