shangfutong-ui/jeepay-ui-uapp-cashier/pageMember/payMember/components/Keyboard.vue

<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>