feat(支付): 键盘优化

石广澎

2024-09-05 d5259ba5f967277dba4923bac394b873be2bdfdc

feat(支付):
键盘优化

 components/key-bord/key-bord.vue

@@ -1,21 +1,19 @@
<template>
  <view>
    <view class="u-text-right u-font-30 color-666 u-p-20" @click="close">关闭</view>
    <view class="bord-box u-row-between">
  <view class="box">
    <view class="u-p-10 u-flex u-row-between">
      <view class="u-flex u-flex-wrap">
        <view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover"
              @click="inputStr(num)">{{ num }}
        </view>
        <view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover" @click="inputStr(num)">{{num}}</view>
      </view>
      <view class="u-flex-col">
      <view class="flex-1 u-flex-col">
        <view hover-class="num-hover" class="del-item u-flex u-row-center" @click="delStr">
          <image src="@/static/del-icon.png" class="del-btn"></image>
        </view>
        <view hover-class="num-hover" :class="['pay-btn', 'u-font-30', 'color-fff', 'font-bold',{'disa-btn':Number(emitNum||'0')===0}]" @click="pay">付款
        <view hover-class="num-hover" class="flex-1 pay-btn u-font-30 color-fff font-bold" @click="pay">扫码收款
        </view>
      </view>
    </view>
  </view>

</template>

<script>
@@ -46,11 +44,11 @@
          // 小数点不能重复添加
          return;
        }
        if (this.emitNum == '0.0' && num == '0') {
          //小数点后面不能是两个0
        if (dotinx == this.emitNum.length - 3) {
          //小数点后面最多两位
          return;
        }
        if (dotinx == this.emitNum.length - 3) {
        if (this.emitNum == '0.0' && num == '0') {
          //小数点后面最多两位
          return;
        }
@@ -63,9 +61,9 @@
          return;
        }
      }
      if (num == '.' && this.emitNum == '') {
      if (this.emitNum == '' && num == '.') {
        this.emitNum = '0.';
      } else if (num != '.' && this.emitNum == '0') {
      } else if (this.emitNum == '0' && num != '.') {
        this.emitNum = num;
      } else {
        this.emitNum += num;
@@ -79,7 +77,6 @@
    },
    // 支付
    pay() {
      if(Number(this.emitNum||'0')===0) return
      this.$emit('pay')
    },
    // 关闭输入框
@@ -90,25 +87,31 @@
}
</script>

<style lang="scss">
.bord-box {
<style lang="scss" scoped>
.box {
  background-color: #F5F5F5;
  display: flex;
  padding: 10rpx 10rpx 0;
  font-size: 0;
  transition: all 0.3s;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

.show-box {
  bottom: 0rpx;
}

.bord-box {
}

.num-item {
  width: 175rpx;
  height: 80rpx;
  line-height: 80rpx;
  height: 90rpx;
  line-height: 90rpx;
  color: #333333;
  font-size: 32rpx;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 0 10rpx 10rpx 0;
  background-color: #FFFFFF;
  border-radius: 8rpx;
}

.num-hover {
@@ -119,24 +122,24 @@
  width: 356rpx;
}

.pay-btn {
  width: 175rpx;
  flex: 1;
  background-color: #D45159;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
.h-100 {
  height: 100%;
}
.disa-btn{
  opacity: 0.7;

.pay-btn {
  background-color: #D45159;
  border-radius: 16rpx;
  text-align: center;
  height: 290rpx;
  line-height: 290rpx;
  vertical-align: middle;
  color: white;
  margin-bottom: 10rpx;
}

.del-item {
  width: 175rpx;
  height: 80rpx;
  border-radius: 8rpx;
  height: 90rpx;
  margin-bottom: 10rpx;
  background-color: #FFFFFF;
}