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.
131 lines
2.6 KiB
131 lines
2.6 KiB
<template>
|
|
<view class="input__view" :style="style">
|
|
<view class="flex row" v-for="(item, index) in options" :key="item.id">
|
|
<view class="flex row-label">
|
|
<view class="title">{{ item.period_dictText }}</view>
|
|
<!-- todo: check key -->
|
|
<view class="desc" v-if="getTypeDesc(item.period_dictText)">{{ `(${getTypeDesc(item.period_dictText)})` }}</view>
|
|
<view class="flex price">
|
|
<text>¥</text>
|
|
<text class="highlight">{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="row-content">
|
|
<uv-number-box
|
|
:value="value[index]"
|
|
@input="onInput(index, $event)"
|
|
: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>
|
|
const TYPE_DESC = {
|
|
'成人': '(18周岁以上)',
|
|
'青少年': '(14周岁以上)',
|
|
'儿童': '(14周岁以下)',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
style: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
computed: {
|
|
prices: {
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
get() {
|
|
return this.value
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
onInput(index, value) {
|
|
let prices = [...this.prices]
|
|
prices[index] = value
|
|
this.prices = prices
|
|
},
|
|
getTypeDesc(type) {
|
|
return TYPE_DESC[type]
|
|
},
|
|
},
|
|
}
|
|
</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>
|