You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<template>
|
|
<view class="input-search">
|
|
<view class="search-box fadelogIn" >
|
|
<view class="input-tit">
|
|
<view class="left" v-if="Object.keys(selectVal).length > 0">当前选择： {{selectVal[inputData.showName]}}</view>
|
|
<view class="left none" v-else>请选择{{inputData.placeholder}}</view>
|
|
<view class="right">
|
|
<view class="btn" @click="submit">确定</view>
|
|
<view class="btn cancel" @click="cancel">取消</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="input">
|
|
<input type="text" :placeholder="'请输入' + inputData.placeholder" v-model="inputVal">
|
|
<text class="iconfont icon-guanbi" v-if="inputVal.length > 0" @click="clearInput"></text>
|
|
</view>
|
|
|
|
<view class="search-list">
|
|
<template v-for="(item,index) in inputData.dataList">
|
|
<view class="search-tab" :class="{'active': item[inputData.showName] == selectVal[inputData.showName]}" :key="index" @click="selectValFun(item)">{{item[inputData.showName]}}</view>
|
|
</template>
|
|
<template v-if="inputData.dataList.length == 0">
|
|
<view class="no-data" v-if="inputVal.length > 0 && !inLoading">
|
|
<image src="@/static/image/no-data/no-search.png"></image>
|
|
<view class="text">暂无数据</view>
|
|
</view>
|
|
<view class="no-data" v-else-if="inputVal.length < 1">
|
|
<image src="@/static/image/no-data/no-data.png"></image>
|
|
<view class="text">请输入搜索内容</view>
|
|
</view>
|
|
</template>
|
|
<uni-load-more status="loading" v-if="inLoading"></uni-load-more>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'
|
|
export default {
|
|
components:{
|
|
uniLoadMore,
|
|
},
|
|
props: {
|
|
inputData:{
|
|
type: Object,
|
|
require: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
inputVal: '',
|
|
inLoading: false,
|
|
selectVal: {},
|
|
};
|
|
},
|
|
watch:{
|
|
inputVal(nval,oval){
|
|
this.$emit('change', nval)
|
|
this.inLoading = true;
|
|
},
|
|
inputData: {
|
|
handler(nval, oval) {
|
|
console.log(' == 当前data == ', nval, nval.dataList)
|
|
this.inLoading = false;
|
|
this.$forceUpdate()
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
if(this.inputData.history){
|
|
console.log('当前存在历史数据 == ', this.inputData.key);
|
|
this.$set(this, 'selectVal', this.inputData.history)
|
|
this.$set(this, 'inputVal', this.inputData.history[this.inputData.showName])
|
|
}
|
|
},
|
|
methods: {
|
|
selectValFun(val){
|
|
this.selectVal = val
|
|
},
|
|
submit(){
|
|
this.$emit('submit', this.selectVal)
|
|
},
|
|
cancel(){
|
|
this.$emit('cancel')
|
|
},
|
|
clearInput(){
|
|
this.inputVal = '';
|
|
this.selectVal = {};
|
|
this.inputData.dataList = [];
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
@import url('./inputSearch.less');
|
|
</style> |