hengmei-two/components/pupo.vue

93 lines
2.3 KiB
Vue

<template>
<view v-if="isShowT" class="disjcac posAll">
<view class="bacf radius20 width100 tank-box">
<view v-if="isXiala" class="pad-x20">
<view class="mar-s30 mar-x40 tc">请选择客服</view>
<view @tap="openXia" class="disjbac radius10 pad-zy20 mar-zy20 xialak mar-x50 posir">
<view class="col3">{{category[current].title}}</view>
<image :class="isZhuan?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
<!-- 下拉列表 -->
<view v-if="isZhuan" class="posia bacf radius10 xial-box">
<view class="pad-zy20 xial-item-box">
<view @tap="chooseXia(index)" :class="current==index?'pcol':''" v-for="(item,index) in category" :key="index">{{item.title}}</view>
</view>
</view>
</view>
</view>
<view v-else class="tc tank-box-itemone">{{contentVal}}</view>
<view :class="isCenter?'disjcac':'disjb'" class="fon28 colf pad-x30 pad-zy30 tc">
<view @tap="cancleEv" v-if="!isCenter" class="pad-sx20 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">{{clearVal}}</view>
<view @tap="comfirEv" :style="{background:publicColor}" class="pad-sx20 radius10 tank-btn">{{comfrimVal}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"pupo",
props:{
isShowT:{
type:Boolean,
default:false
},
isCenter:{//按钮是否居中,或只显示蓝色按钮
type:Boolean,
default:false
},
contentVal:{
type:String,
default:'是否清除历史搜索?'
},
clearVal:{//取消文本
type:String,
default:'取消'
},
comfrimVal:{//确认文本
type:String,
default:'确认'
},
isXiala:{
type:Boolean,
default:false
},
category:{
type:Array,
default:function(){
return ['许嵩']
}
}
},
data() {
return {
publicColor:uni.getStorageSync('publicColor'),
isZhuan:false,
current:0
};
},
methods:{
comfirEv(){//确认事件
this.isZhuan = false
this.current = 0
this.$emit('comfirmev')
},
cancleEv(){//取消事件
this.isZhuan = false
this.current = 0
this.$emit('cancleev')
},
chooseXia(index){
this.current = index
this.$emit('chooseXiaT',this.category[index])
},
openXia(){
this.isZhuan = !this.isZhuan
}
}
}
</script>
<style>
</style>