|
|
<template>
|
|
|
<u-picker :show="show" :columns="priceColumns" keyName="price" title="请选择价位" @cancel="cancel" @confirm="confirm"
|
|
|
@change="change" :defaultIndex="defaultIndex">
|
|
|
<view slot="header">
|
|
|
<view class="header">价位/人</view>
|
|
|
</view>
|
|
|
<view slot="footer">
|
|
|
<u-transition :show="chooseText === '其他'" mode="fade" duration="900">
|
|
|
<view class="other">
|
|
|
<view class="left">*已选择其他</view>
|
|
|
<view class="right">
|
|
|
<text>请填需求价位：</text>
|
|
|
<u--input type="number" class="input" v-model="value"></u--input>
|
|
|
<text>/人</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-transition>
|
|
|
</view>
|
|
|
</u-picker>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
priceColumns: [],
|
|
|
chooseUuid: '',
|
|
|
chooseText: '',
|
|
|
value: null,
|
|
|
defaultIndex: [],
|
|
|
priceClass: 0
|
|
|
}
|
|
|
},
|
|
|
props: ['show', 'priceList', 'choosePriceClass'],
|
|
|
watch: {
|
|
|
priceList: {
|
|
|
immediate: true,
|
|
|
handler(newValue) {
|
|
|
this.priceColumns = [[...newValue, ...[{ uuid: newValue[0]?.uuid, price: '其他', priceClass: 0 }]]]
|
|
|
// console.log('priceColumns', this.priceColumns)
|
|
|
},
|
|
|
},
|
|
|
chooseText: {
|
|
|
// immediate: true,
|
|
|
handler(newValue) {
|
|
|
this.chooseText = newValue
|
|
|
|
|
|
},
|
|
|
},
|
|
|
// 用来拿到PriceClass的值
|
|
|
choosePriceClass: {
|
|
|
handler(newValue) {
|
|
|
this.priceClass = newValue.split('@')[0]
|
|
|
const choose = this.priceColumns[0].find((item) => item.priceClass === +this.priceClass)
|
|
|
console.log(choose)
|
|
|
this.$emit("onConfirm", { value: this.value, uuid: choose.uuid, price: choose.price, priceClass: choose.priceClass });
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
cancel() {
|
|
|
this.chooseText = '';
|
|
|
this.defaultIndex = [];
|
|
|
this.$emit("update:show", false);
|
|
|
},
|
|
|
confirm(item) {
|
|
|
this.defaultIndex = [this.priceColumns[0]?.findIndex((n) => n.price === item.value[0].price)]
|
|
|
if (this.chooseText === '其他') {
|
|
|
this.$emit("onConfirm", { value: this.value, uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
|
|
|
this.$emit("update:show", false);
|
|
|
} else {
|
|
|
this.value = null
|
|
|
this.$emit("onConfirm", { uuid: item.value[0].uuid, price: item.value[0].price, priceClass: item.value[0].priceClass });
|
|
|
this.$emit("update:show", false);
|
|
|
}
|
|
|
|
|
|
},
|
|
|
change(item) {
|
|
|
if (item.value[0].price === '其他') {
|
|
|
this.chooseText = item.value[0].price;
|
|
|
this.chooseUuid = item.value[0].uuid
|
|
|
} else {
|
|
|
this.chooseText = ''
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.header {
|
|
|
text-align: center;
|
|
|
border-bottom: 1rpx solid #868686;
|
|
|
border-top: 1rpx solid #868686;
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
padding: 10rpx 0;
|
|
|
width: 90%;
|
|
|
margin: auto;
|
|
|
color: #1936C9;
|
|
|
}
|
|
|
|
|
|
.other {
|
|
|
box-sizing: border-box;
|
|
|
border: 1px solid #1936C9;
|
|
|
width: 90%;
|
|
|
padding: 20rpx 30rpx;
|
|
|
margin: auto;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
border-radius: 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.left {
|
|
|
color: #1936C9;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
width: 380rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
.input {
|
|
|
width: 50rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</style> |