yixiang/pageB/components/time-box.vue

<template>
	<view class="time-box">
		<view class="list">
			<picker-view  class="picker-view" @change="changetime">
				<picker-view-column>
					<view class="item" v-for="(item,index) in list" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="bottom hflex acenter jcenter">
			<view class="btn1" @click="close">取消</view>
			<view class="btn2" @click="sure">确定</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		props: {
			list: {
				typeof: Array,
				default: []
			}
		},
		data() {
			return {
				active: 0
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			changetime(e) {
				this.active = e.detail.value[0]
			},
			close() {
				this.$emit('close')
			},
			sure() {
				this.$emit('sure',this.active)
			}
		}
	}
</script>

<style lang="scss">
	.time-box::v-deep {
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 0 28rpx 86rpx;
		.uni-picker-view-content {
			padding-bottom: 0 !important;
		}
		.list{
			.picker-view {
				width: 100%;
				height: 500rpx;
				margin-top: 20rpx;
			}
			.item {
				line-height: 68rpx;
				text-align: center;
			}
		}
		.bottom {
			margin: 50rpx 0 0;
			z-index: 999;
			.btn1 {
				width: 276rpx;
				height: 80rpx;
				background: #E5E5E5;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #777777;
				line-height: 80rpx;
				text-align: center;
				margin: 0 46rpx 0 0;
			}
			.btn2 {
				width: 276rpx;
				height: 80rpx;
				background: #00B0B0;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>