wx_oms/financialCenter/serviceStation/components/charge.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="nameOrPhone" placeholder="请输入内容" />
				</view>
				<picker-view @change="pickerChange" style="flex: 1;">
					<picker-view-column>
						<view style="display: flex;align-items: center;justify-content: center;"
							v-for="(item,index) in list" :key="index">{{ item.userName || item.nickName}}</view>
					</picker-view-column>
				</picker-view>
				<view @click="buttenFn" class="butten">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '@/api/financialCenter/serviceStation.js'
	export default {
		name: 'charge',
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			value: function(n, o) {
				// console.log('监听', n)
				if (n) {
					this.$refs.popup.open('bottom')
				} else {
					this.$refs.popup.close()
				}
			}
		},
		created() {
			this.getlist()
		},
		data() {
			return {
				nameOrPhone: '',
				determine: null,
				list: [

				],
				seleData: null,
				seachValue: '',
				getData: {
					pageSize: 5,
					currentPage: 1,
					params: {
						nameOrPhone: '',
					}
				},
			}
		},
		methods: {
			iconClick() {
				if (!this.getData.params.nameOrPhone) {
					this.getlist()
				}
			},
			buttenFn() {
				clearTimeout(this.determine)
				uni.showLoading({
					title: '加载中'
				})
				this.determine = setTimeout(() => {
					this.$emit('chargeChange', this.seleData)
					uni.hideLoading()
					this.$emit('input', false)
				}, 700)
			},
			getlist() {
				if (!this.nameOrPhone) {
					this.list = []
					this.list.unshift({
						userName: '全部',
						id: ''
					})
					this.seleData = this.list[0]
					return
				}
				serve.liekQuery(this.nameOrPhone).then(res => {
					if (res.code !== 20000) return
					if (res.data.length == 0) {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					}
					this.list = res.data
					this.list.unshift({
						userName: '全部',
						id: ''
					})
					this.seleData = this.list[0]
					// console.log('this.list', this.list)
					// console.log('this.seleData', this.seleData)
					// console.log(res, '负责人组件')
				})
			},
			pickerChange(e) {
				this.seleData = this.list[e.detail.value[0]]
			},
			change(e) {
				this.$emit('input', e.show)
			},
			confirmFn() {
				this.getlist()
			}
		}
	}
</script>

<style scoped>
	.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>