feat(支付): 支付页修改

石广澎

2024-07-11 6c2609b9f3212e4e502e1dc4d0d4f1382d8782e8

 components/key-bord/key-bord.vue

@@ -1,16 +1,17 @@
<template>
   <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="bord-box 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>
              @click="inputStr(num)">{{ num }}
         </view>
         <view class="flex-1 u-flex-col">
      </view>
      <view class="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 hover-class="num-hover" :class="['pay-btn', 'u-font-30', 'color-fff', 'font-bold',{'disa-btn':Number(emitNum||'0')===0}]" @click="pay">付款
            </view>
         </view>
      </view>
@@ -45,6 +46,10 @@
                  // 小数点不能重复添加
                  return;
               }
        if (this.emitNum == '0.0' && num == '0') {
          //小数点后面不能是两个0
          return;
        }
               if (dotinx == this.emitNum.length - 3) {
                  //小数点后面最多两位
                  return;
@@ -74,6 +79,7 @@
         },
         // 支付
         pay() {
      if(Number(this.emitNum||'0')===0) return
            this.$emit('pay')
         },
         // 关闭输入框
@@ -87,6 +93,9 @@
<style lang="scss">
   .bord-box {
      background-color: #F5F5F5;
  display: flex;
  padding: 10rpx 10rpx 0;
  font-size: 0;
   }

   .num-item {
@@ -99,6 +108,7 @@
      text-align: center;
      margin: 0 10rpx 10rpx 0;
      background-color: #FFFFFF;
  border-radius: 8rpx;
   }

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

   .h-100 {
      height: 100%;
   }

   .pay-btn {
  width: 175rpx;
  flex: 1;
      background-color: #D45159;
      border-radius: 16rpx;
      text-align: center;
      height: 270rpx;
      line-height: 270rpx;
      vertical-align: middle;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.disa-btn{
  opacity: 0.7;
   }

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