135 lines
3.9 KiB
Vue
135 lines
3.9 KiB
Vue
<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> |