muck_truck_app/components/selectNew/selectNew.vue

<template>
	<u-popup round="28rpx" :show="isShow" @close="closeDialog">
		<view>
			<view class="select-box">
				<view class="select-box-title">
					<text>{{title}}</text>
					<!-- <view> -->
					<!-- <u-button @click="edit" shape="circle" color="linear-gradient(to top, #F59A02, #FFD334)" class="select-button-style">确认</u-button>
					</view> -->
					<!-- <image @click="closeDialog" style="width: 30rpx;height: 30rpx;" src="../../static/images/close.png"
						mode="">
					</image> -->
				</view>
				<!-- <view class="box"> -->
				<view class="search-box" v-if="isCar">
					<u--input style="width: 580rpx;" placeholderStyle="color:#7E8EC1" :placeholder="placeholder"
						border="surround" v-model="value">
					</u--input>
					<!-- <u-button type="primary" icon="map" text="图标按钮"></u-button> -->
					<u-button @click="search" color="linear-gradient(to top, #F59A02, #FFD334)" class="search-buton">
						<view class="search"></view>
						<!-- <image src="../../static/images/serch.png" mode="widthFix" style="width: 45rpx;height: 45rpx"></image> -->
					</u-button>
				</view>
				<view class="select-bottom">
					<!-- <view class="select-list" id="select-list"> -->
					<!-- 回显到指定位置 -->
					<scroll-view class="select-list" scroll-y="true" :scroll-into-view="activeId"
						:show-scrollbar='true'>
						<view :class="isChecked.value===item.value?'active':''" @click="selectClick(item)"
							:id="'active'+index" class="select-list-item" v-for="(item,index) in showList" :key="index">
							{{item.name}}
						</view>
					</scroll-view>
					<!-- </view> -->
				</view>

				<!-- <view class="select-button">
						<u-button @click="edit" shape="circle" color="linear-gradient(to top, #F59A02, #FFD334)" class="select-button-style">确认选择车辆</u-button>
					</view> -->
				<!-- </view> -->
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			isCar: {
				type: Boolean,
				default: true
			},
			isShow: {
				type: Boolean,
				default: false,
			},
			oldList: {
				type: Array,
				default: [],
			},
			valueData: {
				type: String,
				default: "",
			},
			title: {
				type: String,
				default: "选择车辆",
			},
			placeholder: {
				type: String,
				default: "搜索车辆车牌号",
			},

		},
		watch: {
			isShow(newVal) {
				this.value = '';
				this.isChecked = {};
				this.list = this.oldList;
				this.showList = this.oldList;
				this.oldList.forEach((item, index) => {
					if (item.value === this.valueData) {
						this.isChecked = item;
						this.activeId = 'active' + (index - 1);
					}
				})
			},
		},
		mounted() {

		},
		data() {
			return {
				isChecked: {},
				index: 0,
				value: '',
				selectName: '',
				list: [],
				showList: [],
				activeId: ''
			}
		},
		computed: {

		},
		methods: {
			isList() {

			},
			closeDialog() {
				this.$emit('changSelect')
			},
			edit() {
				this.$emit('changSelect', this.isChecked);
			},
			selectClick(index) {
				this.isChecked = index;
				this.edit();
			},
			search() {
				this.isChecked = {};
				if (this.list && this.list.length > 0) {
					let showList = this.list.filter(item => item.name.indexOf(this.value) !== -1)
					this.showList = showList
				}
			},
		},

	}
</script>

<style>
	.select-box {
		/* height: 583rpx; */
		background: rgba(255, 255, 255, 0.6);
		box-shadow: 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
	}

	/deep/.u-popup__content {
		background: rgba(255, 255, 255, 0.3) !important;
		/* background: rgba(255,255,255,0.6);
		box-shadow: 0px 0px 24rpx 6rpx rgba(109,160,251,0.6); */
		box-shadow: inset 0px 10rpx 0px 10rpx rgba(109, 160, 251, 0.6);
	}

	.select-box-title {
		width: 100vw;
		background: #7FB5FF;
		border-radius: 28rpx 28rpx 0px 0px;
		display: flex;
		padding: 18rpx 36rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.search-box {
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		align-items: center;
		padding: 23rpx 36rpx;
		box-sizing: border-box;
	}

	/deep/.search-box .u-input {
		/* width: 507rpx; */
		height: 72rpx;
		background: rgba(255, 255, 255, 0.1);
		/* border: 2rpx solid #495B93; */
		border-radius: 15rpx;
		box-sizing: border-box;
		margin-right: 27rpx;
		/* flex: none; */
	}

	/deep/.search-box .u-border {
		border-color: #495B93 !important;
		border-width: 2rpx !important;
	}

	.search-box .search-buton {
		width: 72rpx;
		height: 72rpx;
		/* background: linear-gradient(0deg, #F59A02 0%, #FFD334 100%); */
		/* border-radius: 36rpx; */
		border-radius: 15rpx;
		color: #fff;
		margin: 0;
		font-size: 28rpx;
		font-weight: bold;
		padding: 0;
	}

	.search {
		width: 37rpx;
		height: 37rpx;
		background-image: url('../../static/images/serch.png');
		background-size: 100% 100%;
	}

	/deep/.u-popup__content {
		border-top: none;
		border-bottom: none;
	}

	.select-bottom {
		/* margin: 20rpx auto; */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.select-button {
		width: 677rpx;
		margin: 46rpx auto;
	}

	.select-button-style {
		width: 100rpx !important;
		height: 45rpx !important;
		color: #ffffff !important;
		font-size: 26rpx;
		font-weight: bold;

	}

	.active {
		width: 677rpx;
		/* height: 85rpx; */
		background: rgba(127, 181, 255, 0.8);
		border-radius: 28rpx;
		font-size: 30rpx;
		font-weight: bold !important;
		color: #333333 !important;
		margin: 0 auto;
	}

	.select-list {
		/* height: 344rpx; */
		height: 200rpx;
		/* overflow-y: auto; */
	}

	.select-list .select-list-item {
		/* padding: 28rpx 0; */
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: bold;
		color: #666666;
	}

	/deep/.select-box .u-button--info {
		border: none !important;
	}
</style>