new-uniapp-h5/pages/takeaway/compontents/smallMaterial.vue

<template>
	<view>
		<!-- <view @click="check()">
            校验
        </view> -->
		<view v-for="(item, index) of list" :key="index">
			<view class="m-tit" :class="{ stars: item.is_nes == 1 }">{{ item.name }}</view>
			<view class="skuList">
				<view class="item"
					:class="{ checked: selectThe[item.id] && selectThe[item.id].includes(JSON.stringify(e)) }"
					@click="checked(item.id, e, item.is_mul)" v-for="e of item.group">
					{{ e.name }}

					<view class="price" v-if="e.price">
						{{ e.price }} 元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			small_goods: {
				type: Array,
				default: () => ([])
			},
			smallPrice: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				selectThe: {}
			}
		},
		watch: {
			selectThe() {
				this.$emit("update:smallPrice", Object.values(this.selectThe).flat(Infinity).reduce((price, item) => {
					return price += JSON.parse(item).price
				}, 0))
			}
		},
		computed: {
			selectIDS() {

				function fromEntries(entries) {
					if (!Array.isArray(entries)) {
						throw new TypeError('Argument should be an array');
					}

					var result = {};

					for (var i = 0; i < entries.length; i++) {
						var entry = entries[i];

						if (!Array.isArray(entry) || entry.length !== 2) {
							throw new TypeError('Each entry should be an array with two elements');
						}

						var key = entry[0];
						var value = entry[1];

						result[key] = value;
					}

					return result;
				}

				let arr = []
				arr = fromEntries(Object.entries(this.selectThe).filter(([key, val]) => Boolean(val)))

				return Object.values(arr).map(({
					id
				}) => id)
			},
			selectPrice() {
				let price = 0

				for (const smallMaterial of Object.values(this.selectThe)) {
					if (!smallMaterial) continue
					price += smallMaterial.price
				}

				return price
			},
			list() {
				return this.small_goods.map(item => ({
					...item,
					group: JSON.parse(item.group)
				}))
			},
			dataMap() {
				return this.small_goods.reduce((obj, item) => {
					obj[item.id] = item
					return obj
				}, {})
			},
			priceAll() {
				this.$emit("update:smallPrice", Object.values(this.selectThe).flat(Infinity).reduce((price, item) => {
					return price += JSON.parse(item).price
				}, 0))
				return Object.values(this.selectThe).flat(Infinity).reduce((price, item) => {
					return price += JSON.parse(item).price
				}, 0)
			}
		},
		methods: {
			checked(id, e, is_mul) {
				if (this.selectThe[id] && this.selectThe[id].includes(JSON.stringify(e))) {
					const index = this.selectThe[id].findIndex(item => item === JSON.stringify(e))
					this.selectThe[id].splice(index, 1)
				} else {
					// 单选
					if (is_mul != 1) {
						console.log("单选");
						this.selectThe[id] = []
						console.log(this.selectThe[id]);
					} else {
						this.selectThe[id] = this.selectThe[id] || []
					}
					this.selectThe[id].push(JSON.stringify(e))
					console.log(this.selectThe[id]);
				}

				this.selectThe = JSON.parse(JSON.stringify(this.selectThe))
			},
			check() {
				console.log(Object.entries(this.dataMap));
				for (const [key, val] of Object.entries(this.dataMap)) {
					if (val.is_nes == 1) {
						if (Array.isArray(this.selectThe[key])) {
							if (this.selectThe[key].length === 0) {
								console.log("请选择" + val.name);
								uni.$u.toast("请选择" + val.name);

								this.$emit("select", [null, false])
								return [null, false]
							}
						} else {
							console.log("请选择" + val.name);
							uni.$u.toast("请选择" + val.name);
							this.$emit("select", [null, false])
							return [null, false]
						}
					}

				}
				this.$emit("select", [this.selectThe, false])
				const result = Object.entries(this.selectThe).reduce((arr, [key, val], index) => {
					arr[index] = {
						"id": key,
						"name": this.dataMap[key].name,
						"group_item": val.map(item => JSON.parse(item))
					}

					return arr
				}, [])
				return [result, true]
			}
		}
	}
</script>

<style scoped lang="scss">
	.m-tit {
		padding: 30rpx 0 0;
		font-size: 26rpx;
		font-weight: bold;
		color: #262626;
	}

	.stars {
		position: relative;

		&::after {
			content: "*";
			color: #f0250e;

			padding-left: 4px;
			position: absolute;
		}
	}

	.skuList {
		display: flex;
		flex-wrap: wrap;

		.item {
			position: relative;
			margin: 24rpx 24rpx 0 0;
			padding: 14rpx 24rpx;

			border-radius: 100rpx;
			background: #f2f1f2;
			color: #262626;

			font-size: 14px;

			display: flex;
			align-items: center;
			overflow: hidden;

			.price {
				// background-color: red;
				margin-left: 12rpx;
				border-left: 2px solid #ffffff;

				// margin: -14rpx -18rpx;
				padding-left: 12rpx;

			}
		}

		.disabled {
			color: #8c8c8c;

			&:after {
				content: "";
				position: absolute;
				left: 20rpx;
				top: 50%;
				right: 20rpx;
				height: 1px;
				background: #8c8c8c;
			}
		}

		.checked {
			background: #fbeceb;
			color: #f0250e;

			// .price {
			//     background-color: red;
			//     padding: 14rpx 28rpx;
			//     margin-left: 10px;
			//     color: white;
			// }
		}
	}
</style>