perry-mall/components/pupo.vue

<template>
	<view v-if="isShowT" class="disjcac posAll" @tap="closeXial">
		<view class="bacf radius20 width100 tank-box">
			<view v-if="isXiala" class="pad-x20">
				<view class="mar-s30 mar-x40 tc">请选择客服</view>
				<view @tap.stop="openXia" class="disjbac radius10 pad-zy20 mar-zy20 xialak mar-x50 posir">
					<view class="col3" v-if="!isTag">{{category[current].title}}</view>
					<view class="col3 disac width100" v-if="isTag"><input class="width100 mar-y20" disabled v-model="tagStr"></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" v-if="!isTag">
							<view @tap.stop="chooseXia(index)":class="current==index?'pcol':''" v-for="(item,index) in category" :key="index">{{item.title}}</view>
						</view>
						<!-- 标签下拉 -->
						<view class="pad-zy20 xial-item-box" v-if="isTag">
							<!-- <view class="disac" @tap.stop="quanEv" :class="isAll?'pcol':''">
								<checkbox style="width: 60rpx;height: 60rpx;display: inherit;" color="#3875F6" :checked="isAll" />
								全选
							</view> -->
							<view @tap.stop="chooseXiaTag(index)" class="disac" :class="item.checked?'pcol':''" v-for="(item,index) in category" :key="index">
								<view v-if="" class="disac">
									<checkbox style="width: 60rpx;height: 60rpx;display: inherit;" color="#3875F6" :data-id="item.id" :checked="item.checked" />
								</view>
								{{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 ['许嵩']
				}
			},
			isTag:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				publicColor:uni.getStorageSync('publicColor'),
				isZhuan:false,
				current:0,
				tagIds:[],
				tagVal:[],
				tagStr:'请选择',
				isAll:false
			};
		},
		methods:{
			// 关闭下拉
			closeXial(){
				this.isZhuan = false;
			},
			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
			},
			// 标签单选
			chooseXiaTag(index){
				let isexistence = this.tagIds.indexOf(this.category[index].id);
				this.category[index].checked = !this.category[index].checked;
				if(isexistence!=-1){
					this.tagIds.splice(isexistence,1);
					this.tagVal.splice(isexistence,1)
				} else {
					this.tagIds.push(this.category[index].id)
					this.tagVal.push(this.category[index].title)
				}
				this.tagStr = this.tagVal.join(',')
				// 单选时，控制全选按钮是否选中
				if(this.tagIds.length==this.category.length){
					this.isAll = true;
				} else this.isAll = false;
				if(!this.tagIds.length) {
					this.tagStr = '请选择'
				}
				this.$emit('chooseXiaT',{arr:this.category,id:this.tagIds.join(',')})
			},
			// 标签全选
			quanEv(){
				this.isAll = !this.isAll;
				this.tagIds = [];
				this.tagVal = [];
				if(this.isAll){
					this.category.forEach(item=>{
						item.checked = true;
						this.tagIds.push(item.id)
						this.tagVal.push(item.title)
					})
					this.tagStr = this.tagVal.join(',')
				} else {
					this.category.forEach(item=>{item.checked = false;})
					this.tagStr = '请选择'
				}
				this.$emit('chooseXiaT',{arr:this.category,id:this.tagIds.join(',')})
			},
		}
	}
</script>

<style>

</style>