czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
components/JKeyboard/JKeyboard.vue Normal file
View File

@@ -0,0 +1,164 @@
<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>