hotel-tablecloth-uniapp-24-08-29/components/user/selectProductUnit.vue

<template>
	<view class="page">
		<view class="submit-unit">
			<view class="title">
				颜色选择
			</view>
			<view class="list">
				<view :class="{act : colorIndex == index}" 
				v-for="(item, index) in colorList"
					@click="selectUnit(item, index, 0)" :key="index">
					{{ item }}
				</view>
			</view>
		</view>
		
		<view class="submit-unit">
			<view class="title">
				尺寸选择
			</view>
			<view class="list">
				<view 
				:class="{act : sizeIndex == index, 
				del : getUnitClassDel(item, index)}" 
				v-for="(item, index) in sizeList"
					@click="selectUnit(item, index, 1)" :key="index">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let defaultKey = '默认'
	export default {
		props : {
			list : {
				default : []
			},
		},
		computed : {
			unitMap(){
				let map = {}
				
				this.list.forEach(n => {
					
					let color = n.colour || defaultKey
					let title = n.title || defaultKey
					
					let key = color + ':' + title
					
					n.unitKeyName = color + ',' + title
					
					map[key] = n
				})
				
				return map
			},
			// 尺寸列表
			sizeList(){
				return [...new Set(this.list.map(n => n.title || defaultKey))]
			},
			// 颜色列表
			colorList(){
				return [...new Set(this.list.map(n => n.colour || defaultKey))]
			},
		},
		data() {
			return {
				unitKey : '',
				colorIndex : 0,
				sizeIndex : 0,
			}
		},
		mounted() {
			if(!this.unitKey && this.list.length > 0){
				this.selectUnit(this.colorList[0], 0, 0)
			}
		},
		methods: {
			selectUnit(item, index, type){
				if(type == 0){
					let color = this.colorList[index]
					for(let key in this.unitMap){
						if(key.startsWith(color)){
							this.unitKey = key
							break
						}
					}
				}else{
					// 判断是否有货
					if(this.getUnitClassDel(item, index, type)){
						return
					}
					let color = this.colorList[this.colorIndex]
					let size = this.sizeList[index]
					this.unitKey = color + ':' + item
				}
				this.updateIndexAll()
				this.$emit('selectUnit', this.unitMap[this.unitKey])
			},
			getUnitClassDel(item, index, type){
				let key = this.colorList[this.colorIndex] + ':' + item
				return !this.unitMap[key]
			},
			// 更新索引
			updateIndexAll(){
				let key = this.unitKey
				
				this.colorList.forEach((n, i) => {
					if(key.startsWith(n + ':')){
						this.colorIndex = i
					}
				})
				this.sizeList.forEach((n, i) => {
					if(key.endsWith(':' + n)){
						this.sizeIndex = i
					}
				})
			},
			setUnitById(id){
				for(let key in this.unitMap){
					if(this.unitMap[key].id == id){
						this.unitKey = key
					}
				}
				this.updateIndexAll()
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.submit-unit {
		padding: 30rpx;
		background-color: #fff;
	
		.title {
			font-size: 28rpx;
			font-weight: 600;
		}
	
		.list {
			display: flex;
			flex-wrap: wrap;
			font-size: 22rpx;
	
			.act {
				color: $uni-color;
				border: 1px solid $uni-color;
				background-color: #F9E7DE;
			}
			
			.del{
				opacity: 0.3;
				&::after{
					content: '【无货】';
				}
			}
	
			view {
				border-radius: 15rpx;
				width: 320rpx;
				background-color: #eee;
				border: 1px solid #eee;
				margin: 10rpx;
				display: flex;
				justify-content: center;
				padding: 15rpx 0;
				overflow: hidden;
			}
		}
	}
}
</style>