You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
4.0 KiB
193 lines
4.0 KiB
<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>
|