pz/components/zhilin-picker/zhilin-picker.vue

<template>
	<view class="zhilin-picker">
		<uni-popup ref="popup" type="top" @change="popupChange">
			<uni-nav-bar @clickLeft="clickLeft" @clickRight="tapOK" rightText="确定" left-icon="closeempty" :title="title" :border="null"></uni-nav-bar>
			<view class="usb"><uni-search-bar v-if="showSearch" :radius="100" cancelButton="none" v-model="searchVal"></uni-search-bar></view>
			<view class="main" v-if="list.length">
				<scroll-view scroll-y="true" @scrolltolower="lower" :lower-threshold="1">
					<view class="scroll-view-item flex" v-for="(v, i) in list" :key="i" @tap="tapItem(v.id, v.name, v)" :class="selected.indexOf(v.id) > -1 ? 'selected' : null">
						<view>
							<view>{{ v.name }}</view>
							<text class="detail_address">{{ v.province }}{{ v.city }}{{ v.district }}{{ v.detail_address }}</text>
						</view>
						<view><icon v-show="selected.indexOf(v.id) > -1" type="success_no_circle" size="22" /></view>
					</view>
					<view v-if="showBottom" class="isBottom">已经到底啦~</view>
					<view v-if="!showBottom" class="isBottom">下拉刷新~</view>
				</scroll-view>
				<view class="loadingBox" v-show="loading"><uni-load-more status="loading"></uni-load-more></view>
			</view>
			<view v-else class="empty"><xw-empty text="暂无选项" textColor="#777777"></xw-empty></view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '../uni-popup/uni-popup.vue';
import uniNavBar from '../uni-nav-bar/uni-nav-bar.vue';
import xwEmpty from '../xw-empty/xw-empty.vue';
import uniSearchBar from '../uni-search-bar/uni-search-bar.vue';
import uniLoadMore from '../more/uni-load-more.vue';
export default {
	name: 'zhilin-select',
	components: {
		uniPopup,
		uniNavBar,
		xwEmpty,
		uniSearchBar,
		uniLoadMore
	},
	props: {
		title: {
			type: String,
			default: '请选择'
		},
		value: {
			type: Boolean,
			required: true
		},
		data: {
			type: Array,
			required: true
		},
		multiple: {
			type: Boolean,
			default: false
		},
		showSearch: {
			type: Boolean,
			default: false
		},
		searchInput: Function,
		initSelected: Array
	},
	data() {
		return {
			list: [],
			selected: [],
			showBottom: false,
			loading: false,
			searchVal: ''
		};
	},
	created() {
		this.dataInit();
	},
	watch: {
		value(n, o) {
			if (n) this.$refs.popup.open();
			else this.$refs.popup.close();
		},
		data(n, o) {
			this.loading = false;
			this.showBottom = false;
			this.dataInit();
		},
		searchVal() {
			this.$emit('searchInput', this.searchVal);
			this.inputSearch();
		},
		initSelected(n) {
			this.selected = n;
		}
	},
	methods: {
		lower: function(e) {
			this.showBottom = true;
			this.$emit('shua');
		},
		dataInit() {
			this.list = this.data;
		},
		clickLeft() {
			this.$emit('input', false);
		},
		tapItem(val, name, v) {
			console.log(val, name, v);
			if (this.multiple) {
				let idx = this.selected.indexOf(val);
				if (idx == -1) {
					this.selected.push(val);
				} else {
					this.selected.splice(idx, 1);
				}
			} else {
				this.selected = [val, name, v.city, v.city_id, v.district, v.district_id, v.province, v.province_id];
			}
			this.$emit('change', this.selected.join());
		},
		tapOK() {
			if (this.selected.join() == '' && this.list != '') {
				this.$api.msg('请先点击医院列表选择医院！');
				return;
			}
			this.$emit('input', false);
			this.$emit('confirm', this.selected.join());
		},
		popupChange(e) {
			this.$emit('input', e.show);
		},
		inputSearch() {
			let val = this.searchVal;
			if (this.searchInput) {
				this.loading = true;
				this.searchInput(val);
				return;
			}
			this.showBottom = false;
			if (this.list == '') {
			} else {
				this.list = this.list.map((v, i) => ({
					label: v,
					value: v
				}));
			}
		}
	}
};
</script>

<style lang="scss">
.zhilin-picker {
	font-size: 28rpx;

	uni-popup /deep/ .uni-popup {
		width: 750rpx;
		background: #fff;
		height: 1056rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		z-index: 999 !important;
	}

	uni-popup {
		.usb {
			padding: 0 32rpx;
			background: #fff;
		}
	}
}

.main {
	height: calc(800rpx - 192rpx);
	flex: 1;
	position: relative;
	background: #fff;
	scroll-view {
		height: 100%;
		.scroll-view-item {
			box-sizing: border-box;
			padding: 18rpx 44rpx !important;
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 80rpx;
			&.selected {
				background: rgba(0, 122, 255, 0.1);
			}
			uni-text {
				width: 85%;
			}
		}

		.isBottom {
			display: flex;
			justify-content: center;
			color: #777;
			position: relative;
			padding: 18rpx 44rpx;
			font-size: 24rpx;

			&::after {
				content: '';
				position: absolute;
				bottom: 10rpx;
				width: 60rpx;
				height: 4rpx;
				left: 50%;
				transform: translateX(-51%);
				background: #777;
			}
		}
	}

	.loadingBox {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.7);
		z-index: 2;

		uni-load-more {
			display: flex;
			justify-content: center;
			position: absolute;
			width: 100%;
			top: 35%;
			left: 50%;
			transform: translate(-50%);
		}
	}
}
.detail_address {
	color: #969696;
	font-size: 24rpx;
	padding-top: 10rpx;
}
.empty {
	background: #fff;
}
</style>