wx_oms/oilAccount/components/picker.vue

<template>
	<view>
		<uni-popup @change="change" ref="popup" type="bottom" background-color="#fff">
			<view style="height:35vh; display: flex;flex-direction: column;">
				<view style="display: flex;">
					<uni-easyinput @input="iconClick" @confirm="confirmFn" style="width: 90%; margin: 0 auto;"
						prefixIcon="search" v-model="getData.companyName" placeholder="请输入关键词搜索" />
				</view>
				<picker-view @pickend='loding=false' @pickstart='loding=true' @change="pickerChange" style="flex: 1;">
					<picker-view-column v-if="list.length">
						<view style="display: flex;align-items: center;justify-content: center;"
							v-for="(item,index) in list" :key="index">{{item.companyName||item.label}}</view>
					</picker-view-column>
					<view class="picker_qx" v-else>
						暂无数据
					</view>
				</picker-view>
				<button :style="{backgroundColor:loading?'#bbbbbb':''}" :loading="loading" @click="buttenFn"
					class="butten" type="default">
					{{buttenText}}
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import oilAccount from '@/api/oilAccount'
	export default {
		name: 'cpicker',
		props: {
			localMode:{
				type:Boolean,
				default:false
			},
			value: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: ''
			},
			// list: {
			// 	type: Array,
			// 	default: () => {
			// 		return []
			// 	}
			// },
		},
		watch: {
			loding: function(n) {
				console.log(n)
				this.buttenText = n ? '加载中' : '确定'
			},
			// list: {
			// 	immediate: true,
			// 	handler() {
			// 		this.copyList = this.list;
			// 		(this.list.length)&&(this.seleData = this.copyList[0]);
			// 	},
			// },
			value: function(n, o) {
				if (n) {
					this.$refs.popup.open('bottom')
				} else {
					this.$refs.popup.close()
				}
			}
		},
		created() {
			// this.copyList = this.list
		},
		data() {
			return {
				list:[],
				buttenText: '确定',
				loding: false,
				determine: null,
				seleData: null,
				seachValue: '',
				getData: {
					companyName: ''
				},
			}
		},
		methods: {
			iconClick() {
				if (!this.getData.companyName) {
					this.list = []
					this.seleData = null
				}
			},
			buttenFn() {
				if (this.loding) return
				this.$emit('chargeChange', this.seleData);
				this.$emit('input', false);
			},
			getlist() {
				this.loding = true
				oilAccount.getLikeBySiteComNameNew(this.getData).then(res => {
					if (res.code !== 20000) return
					this.loding = false
					if (res.data.length == 0) {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					}
					this.list = res.data
					this.seleData = this.list[0]
				})
			},
			upDateList(res){
				if(res&&Array.isArray(res)){
					if (res.length == 0) {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					}
					this.list = res;
					this.seleData = this.list[0]
				}else{
					console.log(e,'upDateList')
					throw new Error('参数错误')
				}
				
			},
			pickerChange(e) {
				this.seleData = this.list[e.detail.value[0]]
			},
			change(e) {
				(!e.show) && (this.$emit('input', false));
			},
			confirmFn() {
				this.$emit('localSeach',this.getData.companyName);
			}
		}
	}
</script>

<style scoped>
	.picker_qx {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
		color: #BBBBBB;
	}

	.butten {
		display: flex;
		justify-content: center;
		font-size: 35rpx;
		color: #ffffff;
		width: 60%;
		margin: 10rpx auto;
		border-radius: 10px;
		background: #007AFF;
		/* padding: 20rpx 0; */
	}
</style>