peiwan-uniapp/pages/clerk/detail/components/gameBox.vue

<template>
	<view>
		<view class="option-box">
			<view class="tag-box">
				<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
				<view class="name">服务类型</view>
			</view>
			<view class="span-box">
				<view @click="changeGame(option)" class="span" :class="catId == option.id ? 'active': '' " v-for="(option,t) in optionList">{{option.name}}</view>
			</view>
		</view>
		
		<view class="option-box" v-if="categoryList.length > 0">
			<view class="tag-box">
				<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
				<view class="name">选项</view>
			</view>
			<view class="span-box">
				<view @click="changeCategory(option)" class="span" :class="gameId == option.id ? 'active': '' " v-for="(option,t) in categoryList">{{option.name}}</view>
			</view>
		</view>
		
		<view class="option-box" v-if="goodsList.length > 0">
			<view class="tag-box">
				<u-icon name="tags" color="#f6f6f6" size="34"></u-icon>
				<view class="name">选项</view>
			</view>
			<view class="span-box">
				<view @click="changeGoods(option)" class="span" :class="goodsId == option.id ? 'active': '' " v-for="(option,t) in goodsList">{{option.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		props: {
			optionList: {
				type: Array,
				default: [],
			},
			modelValue: {
			  type: Object,
			  default: {}
			},
		},
		data() {
			return {
				catId: -1,
				gameId: -1,
				goodsId: -1,
				categoryList: [],
				goodsList: [],
				goodsList: [],
			}
		},
		methods: {
			changeGame(e) {
				this.gameId = -1;
				this.goodsId = -1;
				
				this.catId = e.id;
				if(e.categoryList){
					this.goodsList = [];
					this.categoryList = e.categoryList;
				}else{
					this.categoryList = [];
					this.goodsList = e.goodsList;
				}
				
				var node = {
					catId: this.catId,
					gameId: this.gameId,
					goodsId: this.goodsId,
					price: 0,
				}
				this.$emit('update:modelValue', node); 
			},
			changeCategory(e) {
				this.goodsId = -1;
				this.gameId = e.id;
				this.goodsList = e.goodsList;
				
				var node = {
					catId: this.catId,
					gameId: this.gameId,
					goodsId: this.goodsId,
					price: 0,
				}
				this.$emit('update:modelValue', node); 
			},
			changeGoods(e) {
				this.goodsId = e.id;
				var node = {
					catId: this.catId,
					gameId: this.gameId,
					goodsId: this.goodsId,
					price: e.price,
				}
				this.$emit('update:modelValue', node); 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.option-box {
		margin-bottom: 10px;
		
		.tag-box {
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			
			.name {
				font-size: 28rpx;
				color: #333;
				margin-left: 5px;
			}
		}
		
		.span-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			
			.span {
				background-color: #f6f6f6;
				padding: 14rpx 20rpx;
				border-radius: 40px;
				margin-right: 12px;
				margin-bottom: 12px;
				min-width: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #949494;
			}
			
			.active {
				background-color: var(--ui-BG-Main);
				color: #fff;
			}
		}
	}
</style>