163 lines
3.6 KiB
Vue
163 lines
3.6 KiB
Vue
<template>
|
|
<!-- 时间选择器弹窗 -->
|
|
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
|
<view class="custom-picker">
|
|
<view class="custom-picker__header">
|
|
<view class="cancel" :style="{ color: canceColor }" @tap="onCancel">{{ cancelText }}</view>
|
|
<view class="title">{{ title }}</view>
|
|
<view class="confirm" :style="{ color: confirmColor }" @tap="onConfirm">{{ confirmText }}</view>
|
|
</view>
|
|
<picker-view :indicator-class="indicatorClass" :indicator-style="indicatorStyle" class="picker-view"
|
|
:value="value" @change="bindChange" @pickstart="pickstart" @pickend="pickend">
|
|
<picker-view-column>
|
|
<view class="picker-view__item" v-for="(item,index) in rangeList[0]" :key="index">{{item}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="picker-view__item" v-for="(item,index) in rangeList[1]" :key="index">{{item}}</view>
|
|
</picker-view-column>
|
|
<!-- <view class="picker-view__segmentation">{{ segmentation }}</view> -->
|
|
<picker-view-column>
|
|
<view class="picker-view__item" v-for="(item,index) in rangeList[2]" :key="index">{{item}}</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="picker-view__item" v-for="(item,index) in rangeList[3]" :key="index">{{item}}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import utils from './utils.js'
|
|
export default {
|
|
name: 'TimePickerPopup',
|
|
props: utils.props,
|
|
data() {
|
|
return {
|
|
rangeList: utils.range,
|
|
pickerValue: [0, 0, 0, 0],
|
|
isScoll: false, // 是否正在滚动
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
/**
|
|
* 开启弹窗
|
|
*/
|
|
open() {
|
|
// 判断是否传入props -> value
|
|
if (Array.isArray(this.value) && this.value.length) {
|
|
this.pickerValue = this.value.map((item, index) => this.rangeList[index].findIndex(child =>
|
|
child == this.value[index]));
|
|
console.log(this.pickerValue)
|
|
|
|
} else {
|
|
this.pickerValue = [0, 0, 0, 0];
|
|
}
|
|
this.$refs.popup.open();
|
|
},
|
|
/**
|
|
* 关闭弹窗
|
|
*/
|
|
close() {
|
|
this.$refs.popup.close();
|
|
// 重置选中数据
|
|
this.pickerValue = [0, 0, 0, 0];
|
|
},
|
|
/**
|
|
* 点击确定
|
|
*/
|
|
onConfirm() {
|
|
if (!this.isScoll) {
|
|
let data = this.value || ['00', '00', '00', '00'];
|
|
if (this.pickerValue && this.pickerValue.length) {
|
|
data = this.pickerValue.map((item, index) => String(this.rangeList[index][Number(item)]));
|
|
}
|
|
this.$emit('confirm', data);
|
|
this.close();
|
|
}
|
|
},
|
|
/**
|
|
* 点击取消
|
|
*/
|
|
onCancel() {
|
|
this.close();
|
|
},
|
|
/**
|
|
* 滚动开始
|
|
*/
|
|
pickstart() {
|
|
this.isScoll = true;
|
|
},
|
|
/**
|
|
* 滚动结束
|
|
*/
|
|
pickend() {
|
|
this.isScoll = false;
|
|
},
|
|
/**
|
|
* 选择器改变
|
|
* @param {Object} e
|
|
*/
|
|
bindChange(e) {
|
|
this.pickerValue = e.detail.value;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-picker {
|
|
width: 100%;
|
|
height: 620rpx;
|
|
background-color: #fff;
|
|
padding-bottom: 0;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
position: relative;
|
|
z-index: 999;
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx 40rpx;
|
|
|
|
.cancel {
|
|
color: #666;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.confirm {
|
|
color: #2bb781;
|
|
}
|
|
}
|
|
}
|
|
|
|
.picker-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 20rpx;
|
|
|
|
&__item {
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/deep/ &__indicator {
|
|
height: 100rpx;
|
|
color: #2bb781;
|
|
}
|
|
|
|
&__segmentation {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |