feat(api): 新增多个API接口并优化配置

石广澎

2025-11-17 8771da2ccf6f7c3fd2a8c89a1a0e230c6386db7f

 components/key-bord/key-bord.vue

@@ -1,151 +1,136 @@
<template>
  <view class="box">
    <view class="u-text-right u-font-30 color-666 u-p-h-20 u-p-t-10" @click="close">关闭</view>
    <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>
      <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="flex-1 pay-btn u-font-30 color-fff font-bold" @click="pay">付款</view>
      </view>
    </view>
  </view>

   <view>
      <view class="u-text-right u-font-30 color-666 u-p-20" @click="close">关闭</view>
      <view class="u-p-10 bord-box 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>
         <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/imgs/del-icon.png" class="del-btn"></image>
            </view>
            <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>
export default {
  props: {
    num: {
      type: String,
      default: ''
    }
  },
  watch: {
    num(val) {
      this.emitNum = val
    }
  },
  data() {
    return {
      emitNum: '',
      numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
    }
  },
  methods: {
    // 输入框
    inputStr(num) {
      var dotinx = this.emitNum.indexOf('.');
      if (dotinx != -1) {
        if (num == '.') {
          // 小数点不能重复添加
          return;
        }
        if (dotinx == this.emitNum.length - 3) {
          //小数点后面最多两位
          return;
        }
        if (this.emitNum == '0.0' && num == '0') {
          //小数点后面最多两位
          return;
        }
      } else if (num == '0' && this.emitNum == '0') {
        // 首位的0最多1个
        return;
      } else {
        if (num != '.' && this.emitNum.length > 7) {
          //整数不能超过10位
          return;
        }
      }
      if (this.emitNum == '' && num == '.') {
        this.emitNum = '0.';
      } else if (this.emitNum == '0' && num != '.') {
        this.emitNum = num;
      } else {
        this.emitNum += num;
      }
      this.$emit('changeMoney', this.emitNum)
    },
    // 删除
    delStr() {
      this.emitNum = this.emitNum.slice(0, -1)
      this.$emit('changeMoney', this.emitNum)
    },
    // 支付
    pay() {
      this.$emit('pay')
    },
    // 关闭输入框
    close() {
      this.$emit('close')
    }
  }
}
   export default {
      props: {
         num: {
            type: String,
            default: ''
         }
      },
      watch: {
         num(val) {
            this.emitNum = val
         }
      },
      data() {
         return {
            emitNum: '',
            numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
         }
      },
      methods: {
         // 输入框
         inputStr(num) {
            var dotinx = this.emitNum.indexOf('.');
            if (dotinx != -1) {
               if (num == '.') {
                  // 小数点不能重复添加
                  return;
               }
               if (dotinx == this.emitNum.length - 3) {
                  //小数点后面最多两位
                  return;
               }
            } else if (num == '0' && this.emitNum == '0') {
               // 首位的0最多1个
               return;
            } else {
               if (num != '.' && this.emitNum.length > 7) {
                  //整数不能超过10位
                  return;
               }
            }
            if (num == '.' && this.emitNum == '') {
               this.emitNum = '0.';
            } else if (num != '.' && this.emitNum == '0') {
               this.emitNum = num;
            } else {
               this.emitNum += num;
            }
            this.$emit('changeMoney', this.emitNum)
         },
         // 删除
         delStr() {
            this.emitNum = this.emitNum.slice(0, -1)
            this.$emit('changeMoney', this.emitNum)
         },
         // 支付
         pay() {
            this.$emit('pay')
         },
         // 关闭输入框
         close() {
            this.$emit('close')
         }
      }
   }
</script>

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

.show-box {
  bottom: 0rpx;
}
   .num-item {
      width: 175rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: #333333;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      margin: 0 10rpx 10rpx 0;
      background-color: #FFFFFF;
   }

.bord-box {
}
   .num-hover {
      opacity: 0.7;
   }

.num-item {
  width: 175rpx;
  height: 90rpx;
  line-height: 90rpx;
  color: #333333;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 0 10rpx 10rpx 0;
  background-color: #FFFFFF;
}
   .num-item:nth-child(10n) {
      width: 356rpx;
   }

.num-hover {
  opacity: 0.7;
}
   .h-100 {
      height: 100%;
   }

.num-item:nth-child(10n) {
  width: 356rpx;
}
   .pay-btn {
      background-color: #D45159;
      border-radius: 16rpx;
      text-align: center;
      height: 270rpx;
      line-height: 270rpx;
      vertical-align: middle;
   }

.h-100 {
  height: 100%;
}
   .del-item {
      width: 175rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
      background-color: #FFFFFF;
   }

.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: 90rpx;
  margin-bottom: 10rpx;
  background-color: #FFFFFF;
}

.del-btn {
  width: 40rpx;
  height: 40rpx;
}
</style>
   .del-btn {
      width: 40rpx;
      height: 40rpx;
   }
</style>