You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
3.6 KiB
166 lines
3.6 KiB
<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>
|
|
|