eduepos_ui_store/pages/components/popup-picker-view.vue

<template>
    <view class="popup-wrap" :class="{ show: visible }">
        <view class="popup-mask" v-if="visible"></view>
        <u-popup
            mode="bottom"
            closeable
            :zIndex="99"
            :overlay="false"
            :show="visible"
            safe-area-inset-bottom
            :closeable="false"
            @close="popupClose"
            @open="popupOpen">
            <view class="container">
                <view class="top-tools">
                    <view class="cancel" @click="visible = false">取消</view>
                    <view class="confirm" :style="{ color: isConfirm ? '#000' : '#ececec' }" @click="handConfirm">确定</view>
                </view>
                <picker-view :value="checkValue" @pickstart="isConfirm = false" @pickend="isConfirm = true" @change="bindChange" class="picker-view">
                    <picker-view-column v-for="(item, index) in list" :key="index">
                        <view class="item" v-for="i in item" :key="i[itemKey]">{{ i[itemName] }}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default {
    name: 'popup-picker-view',
    props: {
        itemKey: {
            type: String,
            default: 'goodsTypeId'
        },
        itemName: {
            type: String,
            default: 'goodsTypeName'
        },
        list: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data () {
        return {
            visible: false,
            isConfirm: true,
            checkValue: 0,
			tempPickerIndex: null,
			pickerIndex: null
        }
    },
    methods: {
        show () {
            this.visible = true
        },
        popupClose () {
            this.visible = false
        },
        popupOpen () {
        },
        // bindChange ({ target: { value } }) {
        //     this.isConfirm = true
        //     this.checkValue = value
        // },
		bindChange(e) {
			this.tempPickerIndex = e.detail.value
		},
        handConfirm () {
			if (!this.isConfirm) {
				// uni.showToast({
				// 	title: '您的操作过快，请慢一点儿！',
				// 	icon: 'none'
				// })
				return
			}
			if (this.tempPickerIndex === null) {
				this.pickerIndex = 0
			} else {
				this.pickerIndex = this.tempPickerIndex;
			}

			let item = this.list[0][this.pickerIndex]

			this.$emit('callback', item)
			this.visible = false

        }
    }
}
</script>
<style scoped lang="scss">
.popup-wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
}
.popup-wrap.show {
    z-index: 999;
}
.container {
    width: 100%;
    height: 35vh;
    position: relative;
    z-index: 999;
}
.top-tools {
    height: 80rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    @include between;
    border-bottom: 2rpx solid #ececec;
}
.popup-mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background-color: rgba(0,0,0,.5);
}

// 设置头部的取消和确定按钮
picker-view .btns {
    width: 100%;
    height: 100rpx;
    color: #baa076;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

picker-view .btns view {
    width: 20%;
    text-align: center;
    font-size: 32rpx;
}

picker-view {
    background-color: #FFF;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    border-radius: 30rpx 30rpx 0 0;
    z-index: 999;
    height: calc(35vh - 80rpx);
}

// 添加弹出的过渡动画
picker-view.show {
    height: 36%;
    transition: all 0.4s;
}

// 设置单列数据的样式
picker-view-column {
    border-radius: 30rpx 30rpx 0 0;
    color: #000;
    font-size: 32rpx;
}

.item {
	line-height: 68rpx !important;
}
</style>