165 lines
5.7 KiB
Vue
165 lines
5.7 KiB
Vue
<template>
|
||
<view class="k-wrapper">
|
||
<view class="k-store-name">
|
||
<view class="k-store-title flex-center">收款门店：</view>
|
||
<view class="flex-center" @tap="emits('selectedStore')"> {{ storeName || '选择门店' }} <image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" /></view>
|
||
</view>
|
||
<view class="k-main">
|
||
<block v-for="(v, i) in keyList" :key="i">
|
||
<view :class="[v.clsName]" hover-class="touch-number" hover-stay-time="150" v-if="v.type == 'number'" @tap="boardDown(v.value)">{{ v.value }}</view>
|
||
<view :class="[v.clsName]" hover-class="touch-number" hover-stay-time="150" v-if="v.type == 'image'" @tap="boardDown(v.value)">
|
||
<image :src="v.imgUrl" mode="scaleToFill" />
|
||
</view>
|
||
<view :class="[v.clsName]" hover-class="touch-button" hover-stay-time="150" v-if="v.type == 'button'" @tap="boardDown(v.value)">
|
||
<image :src="v.imgUrl" mode="scaleToFill" />
|
||
<text>{{ v.text }}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
const emits = defineEmits(['boardDown', 'selectedStore',"update:value"])
|
||
/***
|
||
* 键盘渲染集合
|
||
* boardDown 回调事件 回调参数 value
|
||
* selectedStore 回调事件 选择门店 回调参数 无
|
||
* storeName 门店名称
|
||
* */
|
||
const props = defineProps({
|
||
storeName: { type: String }, //门店名称
|
||
|
||
point: { type: Number, default: 2 }, //限制小数点后几位 默认两位
|
||
maxLength: { type: Number, default: 10 }, //最大输入长度 包含小数点
|
||
value:{type:[String,Number],default:'0'}
|
||
})
|
||
const keyList = reactive([
|
||
{ type: 'number', clsName: 'k-number', value: '1' },
|
||
{ type: 'number', clsName: 'k-number', value: '2' },
|
||
{ type: 'number', clsName: 'k-number', value: '3' },
|
||
{ type: 'number', clsName: 'k-number', value: '4' },
|
||
{ type: 'number', clsName: 'k-number', value: '5' },
|
||
{ type: 'number', clsName: 'k-number', value: '6' },
|
||
{ type: 'number', clsName: 'k-number', value: '7' },
|
||
{ type: 'number', clsName: 'k-number', value: '8' },
|
||
{ type: 'number', clsName: 'k-number', value: '9' },
|
||
{ type: 'number', clsName: 'k-number', value: '.' },
|
||
{ type: 'number', clsName: 'k-number k-zero', value: '0' },
|
||
{ type: 'image', clsName: 'k-number', value: 'deleted', imgUrl: '/static/iconImg/icon-delete.svg' },
|
||
{ type: 'button', clsName: 'k-button', value: 'scan', imgUrl: '/static/iconImg/icon-scan.svg', text: '扫一扫' },
|
||
{ type: 'button', clsName: 'k-button k-button-code', value: 'code', imgUrl: '/static/iconImg/icon-code.svg', text: '聚合码' },
|
||
])
|
||
|
||
const deletedNumber = () => {
|
||
emits('update:value', props.value.toString().slice(0, props.value.length - 1))
|
||
}
|
||
const boardDown = (val) => {
|
||
// 如果 点击 扫一扫 或聚合码 直接回调事件
|
||
if (val == 'scan' || val == 'code') return emits('boardDown', val)
|
||
// 点击删除 调用函数
|
||
if (val == 'deleted') return deletedNumber()
|
||
// 如果值已经是0并且按下不是小数点 直接替换值
|
||
if (props.value.toString().length == 1 && props.value == 0 && val != '.') return emits('update:value', val)
|
||
// 只能包含一个小数点
|
||
if (props.value.toString().includes('.') && val == '.') return
|
||
// 限制小数点位数
|
||
if (props.value.toString().includes('.') && props.value.split('.')[1].length >= props.point) return
|
||
// 长度只有 一位 并且按下结果是小数点 直接 return
|
||
if (props.value.toString().length == 1 && props.value == 0 && val != '.') return
|
||
// 如果 清空后直接按下小数点 直接 return
|
||
if ((props.value === '' || props.value == undefined) && val == '.') return emits('update:value', '0' + val)
|
||
// 超出最大输入长度 直接 return
|
||
if (props.value.toString().length >= props.maxLength) return
|
||
// 回调结果
|
||
emits('update:value', props.value + val)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.k-wrapper {
|
||
padding: 0 10rpx;
|
||
border-radius: 72rpx 72rpx 0 0;
|
||
border-top: 1rps solid rgba($color: #000000, $alpha: 0.1);
|
||
box-shadow: 0 -30rpx 80rpx -20rpx rgba(0, 0, 0, 0.05);
|
||
.k-store-name {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 110rpx;
|
||
margin: 10rpx 0;
|
||
padding: 0 60rpx;
|
||
view {
|
||
flex-grow: 0;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
transform: rotate(180deg);
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.k-store-title {
|
||
white-space: nowrap;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: $J-color-t4d;
|
||
}
|
||
}
|
||
.k-main {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 200rpx);
|
||
grid-template-rows: repeat(5, 120rpx);
|
||
grid-gap: 10rpx 20rpx;
|
||
padding: 0 50rpx;
|
||
font-size: 60rpx;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
overflow: hidden;
|
||
.k-number {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.k-button {
|
||
grid-column: 1 / span 2;
|
||
grid-row: 5 / span 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20rpx;
|
||
width: 315rpx;
|
||
height: 110rpx;
|
||
background: $jeepay-bg-primary;
|
||
font-size: 26rpx;
|
||
border-radius: 10rpx;
|
||
color: #fff;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.k-button-code {
|
||
transform: translateX(335rpx);
|
||
background: linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%);
|
||
}
|
||
.touch-number {
|
||
border-radius: 80rpx;
|
||
background-color: #e9eaeb;
|
||
}
|
||
.touch-button {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
</style>
|