studytour-front/pages_order/order/orderConfirm/peopleNumberInput.vue

<template>
  <view class="input__view" :style="style">
    <view class="flex row">
      <view class="flex row-label">
        <view class="title">成人</view>
        <view class="desc">(18周岁以上)</view>
        <view class="flex price">
          <text>¥</text>
          <text class="highlight">{{ adultsPrice }}</text>
        </view>
      </view>
      <view class="row-content">
        <uv-number-box 
          v-model="adultsNum"
          :min="0"
          :integer="true"
          :inputWidth="68"
          bgColor="transparent"
          :iconStyle="{
            background: '#F7F8FA',
            fontSize: '13px',
            lineHeight: 1,
            padding: '12px',
            borderRadius: '50%',
          }"
        ></uv-number-box>
      </view>
    </view>
    <view class="flex row">
      <view class="flex row-label">
        <view class="title">青少年</view>
        <view class="desc">(14周岁以上)</view>
        <view class="flex price">
          <text>¥</text>
          <text class="highlight">{{ teenagerPrice }}</text>
        </view>
      </view>
      <view class="row-content">
        <uv-number-box 
          v-model="teenagerNum"
          :min="0"
          :integer="true"
          :inputWidth="68"
          bgColor="transparent"
          :iconStyle="{
            background: '#F7F8FA',
            fontSize: '13px',
            lineHeight: 1,
            padding: '12px',
            borderRadius: '50%',
          }"
        ></uv-number-box>
      </view>
    </view>
    <view class="flex row">
      <view class="flex row-label">
        <view class="title">儿童</view>
        <view class="desc">(14周岁以下)</view>
        <view class="flex price">
          <text>¥</text>
          <text class="highlight">{{ childPrice }}</text>
        </view>
      </view>
      <view class="row-content">
        <uv-number-box 
          v-model="childNum"
          :min="0"
          :integer="true"
          :inputWidth="68"
          bgColor="transparent"
          :iconStyle="{
            background: '#F7F8FA',
            fontSize: '13px',
            lineHeight: 1,
            padding: '12px',
            borderRadius: '50%',
          }"
        ></uv-number-box>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      adults: {
        type: Number,
        default: 0,
      },
      teenager: {
        type: Number,
        default: 0,
      },
      child: {
        type: Number,
        default: 0,
      },
      adultsPrice: {
        type: Number,
        default: 0,
      },
      teenagerPrice: {
        type: Number,
        default: 0,
      },
      childPrice: {
        type: Number,
        default: 0,
      },
      style: {
        type: String,
        default: ''
      },
    },
    computed: {
      adultsNum: {
        set(val) {
          this.$emit('update:adults', val)
        },
        get() {
          return this.adults
        }
      },
      teenagerNum: {
        set(val) {
          this.$emit('update:teenager', val)
        },
        get() {
          return this.teenager
        }
      },
      childNum: {
        set(val) {
          this.$emit('update:child', val)
        },
        get() {
          return this.child
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .input__view {
    width: 100%;
  }

  .row {
    justify-content: space-between;
    padding: 24rpx 0;
    font-family: PingFang SC;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 2rpx solid #EEEEEE;
    
    & + & {
      margin-top: 20rpx;
    }

    &-label {
      justify-content: flex-start;
      column-gap: 4rpx;
    }

    &-content {
      
      /deep/ .uv-number-box__minus--disabled {
        background: transparent !important;
      }
    }
  }

  .title {
    font-size: 28rpx;
    color: #000000;
  }

  .desc {
    color: #8B8B8B;
  }

  .price {
    font-weight: 500;
    color: #FF4800;

    .highlight {
      font-size: 32rpx;
    }
  }
</style>