czg_team/shangfutong-ui
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
jeepay-ui-uapp-cashier/pageMember/payMember/components/Keyboard.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<view class="key-wrapper" :style="{ '--v-primary': calcThemeColor() }">
<view class="key-re">
<text @tap="emits('remarks')">添加备注</text>
<view class="openOrClose" v-if="!isFixedFlag" @tap="vdata.openOrClose = !vdata.openOrClose">
<text>{{ vdata.openOrClose ? '收起' : '展开' }}</text>
<image src="/static/vipImg/openOrclose-key.svg" mode="aspectFill" :class="{ 'close-key': !vdata.openOrClose }">
</image>
</view>
</view>
<view class="pay-but" hover-class="hover-pay" hover-start-time="10" hover-stay-time="60" :style="{ height: vdata.openOrClose ? '0' : '110rpx' }" v-if="!vdata.openOrClose && !isFixedFlag"
@tap="emits('pay')">付款</view>
<view class="key-mian"
:style="{ maxHeight: vdata.openOrClose ? '800rpx' : '0', paddingBottom: vdata.openOrClose ? '50rpx' : '0' }"
v-if="!isFixedFlag">
<view class="key-left">
<block v-for="(v, i) in keyList" :key="i">
<view class="k-l-item flex-center" hover-class="hover-but" hover-start-time="10" hover-stay-time="60"
:class="{ 'zero': v.val == '0' }" @tap="changeKey(v.val)"> {{ v.val }}</view>
</block>
</view>
<view class="key-right">
<view class="key-r-del flex-center" hover-class="hover-but" hover-start-time="10" hover-stay-time="60" @tap="deletedNumber">
<image src="/static/vipImg/icon-del.svg" mode="aspectFill" class="mch-header"></image>
</view>
<view class="key-r-pay flex-center" hover-class="hover-pay" hover-start-time="10" hover-stay-time="60" @tap="emits('pay')">付款</view>
</view>
</view>
<view class="fixed-wrapper" v-else>
<view class="fixed-but flex-center" hover-class="hover-pay" hover-start-time="10" hover-stay-time="60" @tap="emits('pay')">确认支付</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from "vue"
import { calcThemeColor } from "@/util/member.js"
const props = defineProps({
value: {
type: String,
default: ''
},
isFixedFlag: { type: Boolean, default: false }
})
const vdata = reactive({
openOrClose: false
})
const emits = defineEmits(['update:value', 'pay', 'remarks'])
const keyList = [
{ val: '1', pos: 'l' },
{ val: '2', pos: 'l' },
{ val: '3', pos: 'l' },
{ val: '4', pos: 'l' },
{ val: '5', pos: 'l' },
{ val: '6', pos: 'l' },
{ val: '7', pos: 'l' },
{ val: '8', pos: 'l' },
{ val: '9', pos: 'l' },
{ val: '0', pos: 'l' },
{ val: '.', pos: 'l' },
]
const changeKey = (val) => {
// 禁止 输入长度 大于10位
if(props.value.length > 10) return false
// 如果值已经是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)
if (props.value.includes('.') && props.value.split('.')[1].length >= 2) return
emitsParent(val)
}
const deletedNumber = () => {
emits('update:value', props.value.slice(0, props.value.length - 1))
}
// 错误提示
function tips (title) {
uni.showToast({
title,
icon: 'none'
})
}
// 向父级传递消息
function emitsParent (v) {
return emits('update:value', props.value + v)
}
function openKeyBoard () {
if (!vdata.openOrClose) return vdata.openOrClose = true
}
defineExpose({ openKeyBoard })
</script>
<style lang="scss" scoped>
.key-re {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
color: #1f7099ff;
font-size: 25rpx;
height: 90rpx;
background-color: #fff;
border-top: 1rpx solid #e6e6e6ff;
border-bottom: 1rpx solid #e6e6e6ff;
.openOrClose {
display: flex;
align-items: center;
image {
width: 50rpx;
height: 50rpx;
transform: rotate(180deg);
transition: 0.3s ease-in-out;
}
.close-key {
transform: rotate(0);
}
}
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
}
.key-mian {
display: flex;
padding: 0 5rpx;
padding-top: 10rpx;
padding-bottom: 50rpx;
max-height: 0;
border-top: 1rpx solid #0000001a;
background: #f7f7f7ff;
color: #000000ff;
font-size: 40rpx;
font-weight: 500;
transition: max-height 0.3s ease-out;
overflow: hidden;
.key-left {
display: flex;
flex-wrap: wrap;
.k-l-item {
margin: 8rpx;
width: 168rpx;
height: 90rpx;
background-color: #fff;
}
.zero {
width: 350rpx;
}
}
.key-right {
.key-r-del {
margin: 5rpx;
width: 168rpx;
height: 90rpx;
background-color: #fff;
image {
width: 38rpx;
height: 30rpx;
}
}
.key-r-pay {
margin: 5rpx;
margin-top: 20rpx;
width: 168rpx;
height: 302rpx;
color: #fff;
font-size: 32rpx;
font-weight: 500;
background-color: var(--v-primary);
}
}
}
.fixed-wrapper {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 200rpx;
.fixed-but {
margin: 30rpx;
margin-bottom: 70rpx;
width: 100%;
height: 110rpx;
color: #fff;
font-size: 32rpx;
font-weight: 500;
border-radius: 20rpx;
background-color: var(--v-primary);
}
}
.pay-but {
display: flex;
justify-content: center;
align-items: center;
margin: 15rpx auto;
width: 719rpx;
height: 110rpx;
border-radius: 10rpx;
color: #fff;
background-color: var(--v-primary);
transition: height 0.3s ease-in-out;
overflow: hidden;
}
.hover-but {
filter: brightness(80%);
}
.hover-pay{
opacity: .5;
}
</style>