dou_applet/components/classify.vue

<template>
	<view class="mask" @click="closeEvent" @touchmove.stop.prevent="()=>false">
		<view class="content" @click.stop="closeEvent(1)" :style="'padding-bottom:'+isIpx?130:110+'rpx'">
			<view class="titleBox">
				<text></text>
				<text>{{choiceTitle}}</text>
				<image src="/static/new_close.png" mode="widthFix" class="close" @click.stop="closeEvent"></image>
			</view>
			<view class="selected">
				已选：<span>{{choiceData.main.category_name + (choiceData.secondLevel.category_name ? (' > ' + choiceData.secondLevel.category_name) : '') + (choiceData.threeLevel.category_name ? (' > ' + choiceData.threeLevel.category_name) : '')}}</span>
			</view>
			<view class="container">
				<view class="categoryTitle" style="margin-top:0">主分类：</view>
				<view class="stageView">
					<view :class="['item',choiceData.main.category_name == item.category_name ? 'item_active' :'']" @click.stop="levelEvent(item,'secondLevel')" :style="!item.child?'justify-content:center':''" v-for="(item,index) in categoryList" :key='item.id'>
						<text>{{item.category_name}}</text>
						<i class="iconfont icon-down_icon jt" v-if="item.child"></i>
						<!-- <image src="../static/jt.png" mode="widthFix" class="jt" v-if="item.child"></image> -->
						<view v-else></view>
					</view>
				</view>
				<template v-if="secondLevelList.length!=0">
					<view class="categoryTitle wrongMainTitle">{{choiceData.main.category_name}}：</view>
					<view class="stageView">
						<view :class="['item',choiceData.secondLevel.category_name == item.category_name ? 'item_active' :'']" @click.stop="levelEvent(item,'threeLevel')" :style="!item.child?'justify-content:center':''" v-for="(item,index) in secondLevelList" :key='item.id'>
							<text>{{item.category_name}}</text>
							<i class="iconfont icon-down_icon jt" v-if="item.child"></i>
							<!-- <image src="../static/jt.png" mode="widthFix" class="jt" ></image> -->
							<view v-else></view>
						</view>
					</view>
				</template>
				<template v-if="threeLevelList.length!=0">
					<view class="categoryTitle wrongMainTitle">{{choiceData.secondLevel.category_name}}：</view>
					<view class="stageView">
						<view :class="['item',choiceData.threeLevel.category_name == item.category_name ? 'item_active' :'']" @click.stop="levelEvent(item,'lastLevel')" :style="!item.child?'justify-content:center':''" v-for="(item,index) in threeLevelList" :key='item.id'>
							<text>{{item.category_name}}</text>
							<i class="iconfont icon-down_icon jt" v-if="item.child"></i>
							<!-- <image src="../static/jt.png" mode="widthFix" class="jt" v-if="item.child"></image> -->
							<view v-else></view>
						</view>
					</view>
				</template>
				<button class="selfButton" :hover-stop-propagation='true' @click.stop="submitEvent">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "classify",
		props: {
			choiceTitle: {
				type: String,
				default: '账号分类筛选'
			}
		},
		data() {
			return {
				isIpx: this.$store.state.systemInfo.isIpx,
				categoryList:[],
				secondLevelList:[],
				threeLevelList:[],
				choiceData:{
					main:{},
					secondLevel:{},
					threeLevel:{}
				}
			};
		},
		created() {
			if(this.$store.state.brandCategoryList&&this.$store.state.brandCategoryList.length!=0){
				this.categoryList = this.$store.state.brandCategoryList;
				this.choiceData.main = this.categoryList[0];
			}else{
				this.getCategory()
			}
		},
		methods: {
			submitEvent(){
				this.$emit('getData',this.choiceData)
				this.$emit('close')
			},
			closeEvent(type) {
				if (type == 1) {
					return
				}
				this.$emit('close')
			},
			levelEvent(data,type){
				if(type=='lastLevel'){
					this.choiceData.threeLevel = {
						category_name:data.category_name,
						id:data.id
					}
					return
				}
				if(data.child){
					if(type=='secondLevel'){
						this.choiceData.main = {
							category_name:data.category_name,
							id:data.id
						}
						this.choiceData.threeLevel = {};
						this.choiceData.secondLevel = {};
						if(data.child){
							this.secondLevelList = data.child
							this.threeLevelList = []
						}
					}
					if(type=='threeLevel'){
						this.choiceData.secondLevel = {
							category_name:data.category_name,
							id:data.id
						}
						this.choiceData.threeLevel = {};
						if(data.child){
							this.threeLevelList = data.child
						}
					}
				}else{
					if(type=='secondLevel'){
						this.choiceData.main = {
							category_name:data.category_name,
							id:data.id
						}
						this.choiceData.threeLevel = {};
						this.choiceData.secondLevel = {};
						this.secondLevelList = []
						this.threeLevelList = [];
					}
					if(type == 'threeLevel'){
						this.choiceData.threeLevel = {};
						this.choiceData.secondLevel = {
							category_name:data.category_name,
							id:data.id
						}
						this.threeLevelList = []
					}
				}
			},
			getCategory(){
				this.$req(this.$api.category_list,'get',{},(res)=>{
					if(res && res.errno == 0){
						this.categoryList = [{category_name:'不限',id:''}]
						this.categoryList = this.categoryList.concat(res.rst);
						this.choiceData.main = this.categoryList[0]
						this.$store.state.brandCategoryList = this.categoryList;
					}else{
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.mask .content {
		width: 100%;
		min-height: 300rpx;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 10rpx 30rpx 160rpx;
	}

	.titleBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		color: #000000;
	}

	.titleBox text {
		font-size: 30rpx;
	}

	.close {
		width: 30rpx;
		height: 30rpx;
		padding: 30rpx;
		padding-right: 0;
	}
	.container{
		max-height: 60vh;
		min-height: 800rpx;
		overflow-y: auto;
	}
	.selected{
		font-size: 24rpx;
		color: #666;
		padding-bottom: 20rpx;
		span{
			color: #fe9400;
			background: #fff3e3;
			display: inline-block;
			padding: 2px 4px;
			border-radius: 4px;
		}
	}
	.stageView{
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0;
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 23%;
			background: #f4f4f4;
			border-radius: 50rpx;
			padding: 10rpx 0rpx;
			margin: 10rpx 0;
			margin-right: 2.3%;
			&:nth-of-type(4n){
				margin-right: 0;
			}
			text{
				color: #333;
				font-size: 24rpx;
			}
			.jt{
				color: #616161;
				font-size: 20rpx;
				transform: scale(0.6);
			}
		}
		.item_active{
			background: #fff3e3;
			text{
				color: #fe9400;
			}
			.itemIcon{
				border-color: #fe9400;
			}
			.jt{
				color: #fe9400;
			}
		}
	}
	.categoryTitle{
		font-size: 28rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
		color: #333333;
	}
	.wrongMainTitle{
		border-top: 1px solid #f9f9f9;
		padding-top: 30rpx;
	}
	.selfButton{
		background: #fe9400;
		color: #FFFFFF;
		border: none;
		font-size: 30rpx;
		line-height: 80rpx;
		width: 80%;
		border-radius: 80rpx;
		margin-top:40rpx;
	}
</style>