LocalLivingServicesUniapp/pages/store/otherSet.vue

<template>
	<view class="other" style="background: #F7F8FC;">
		<cu-custom bgColor="bg-fff" :isBack="true">
			<block slot="content"> 其他</block>
		</cu-custom>
		<view class="center">
			<view class=" cu-form-group" style="margin: 0;">
				<view class="content ">
					<text class="text-bold">其他 </text>
					<i class="text-bg " style="width: 100%;"></i>
				</view>
			</view>
			<view>
				<view class="" style="display: flex;align-items: center;height: 55rpx;margin-bottom: 16rpx;">
					<text style="width: 104rpx;font-size: 26rpx;">选择分类</text>
					<view class="" style="flex: 1; text-align: end;" @click="isShow = true">
						<span style="color: #333333;font-size: 24rpx;margin-right: 15rpx;" v-if="name">{{name}}</span>
						<span style="color: #999999;font-size: 24rpx;margin-right: 15rpx;" v-else>去选择</span>
					</view>
					<u-icon name="arrow-right" style="margin-left: 17rpx;color: #C7C6CA"></u-icon>
				</view>
				
				<view class="" v-for="(item,index) in tags" :key="item.id" style="display: flex;align-items: center;height: 55rpx;margin-bottom: 20rpx;" 	v-if="tags.length>0">
					<text style="width: 104rpx;font-size: 26rpx;">{{item.attribute}}</text>
					<view class="" style="flex: 1; text-align: end;" @click="open(index)">
						<span v-if="activeTag.length>0">{{showTags}}</span>
						<span style="color: #999999;font-size: 24rpx;margin-right: 15rpx;" v-if="activeTag.length==0">去选择</span>
					</view>
					<u-icon name="arrow-right" style="margin-left: 17rpx;color: #C7C6CA"></u-icon>
				</view>

			</view>
		</view>
		<selectService v-if="isShow" @transmitType="confirmLocality" @cutPopup="isShow = false" />
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="popup-title">
					<text>请选择门店支持的用餐场景</text>
					<image src="/static/store/detele.png" mode="aspectFit" @click=" $refs.popup.close()"></image>
				</view>
				<view style="padding-bottom:20upx;border-bottom: 1px solid #EEEEEE;">
					<!-- <text v-for="(tag, index) in tags" :key="index" class="tag-type"
						:class="{ 'selected-background': isSelected(tag) }" :style="tag == '空调' ? 'margin-right:0' : ''"
						@click="toggleSelection(tag)">
						{{ tag }}
					</text> -->
					<view class="" >
						<view class="item-box" v-if="tags.length>0">
							<view class="item" :class="row.select?'active':''" v-for="(row,index) in tags[levelIndex].attributeValueList"
								:key="index" @click="selectItem(row)">
								{{row.value}}
								<image src="/static/index/select.png" mode="" v-if="row.select"></image>
							</view>
						</view>
					</view>
				</view>
				<view class=" flex sub-bottom justify-between" style="padding:16rpx 24rpx;">
					<button style="width:100%;background: linear-gradient( 90deg, #77B6FF 0%, #449AFF 100%);"
						class="cu-btn bg-blue  round shadow" @click="submit">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import selectService from '../../components/selectService.vue'
	export default {
		components: {
			selectService
		},
		data() {
			return {
				isShow: false,
				form: {},
				id: '',
				name: '',
				selectTags: [],
				isTag: false,
				tags: [],
				selectedIndices: [], // 用于存储被选中的标签索引
				activeTag: [],
				showTags: '',
				levelIndex:0
			}
		},
		methods: {
			open(index){
				this.$refs.popup.open(),
				this.levelIndex = index
			},
			//选择类型
			confirmLocality(data) {
				this.id = data.id
				this.name = data.name
				this.isShow = false
				let merchantId = uni.getStorageSync('login_user_info').merchantId
				this.$http.get("/localOther/localProductClassValue/queryByClassId?id=" + this.id + '&merchantId=' + merchantId)
					.then(res => {
						console.log(res)
						if (res.data.success) {
							this.tags = res.data.result
						} else {}
					})
			},
			selectItem(row) {
				row.select = !row.select
			},
			submit() {
			    // 提前获取 merchantId
			    const merchantId = uni.getStorageSync('login_user_info').merchantId;
			    
			    // 处理选中的标签
			    let selectedTags = this.tags.flatMap(item => {
			        return item.attributeValueList
			            .filter(row => row.select)
			            .map(row => ({
			                tag: row.value
			            }));
			    });
			
			    this.activeTag.push(...selectedTags);
			    this.showTags = this.activeTag.slice(0, 3).map(tag => tag.tag).join(',');
			    const lastItem = this.tags[this.tags.length - 1];
					console.log(merchantId)
			    let data = {
			        attribute: lastItem?.attribute,
			        attributeValue: this.activeTag.map(tag => tag.tag).join(','),
			        classId: lastItem?.classId,
			        merchantId: merchantId // 确保merchantId包含在数据中
			    };
			
			    this.$http.post('/localOther/localMerchantOther/add', data)
			        .then(res => {
			            console.log(res);
									if(res.data.code == 200){
										this.$refs.popup.close()
										// uni.navigateTo({
										// 	url:'/pages/store/settings'
										// })
									}
			        })
			        .catch(err => {
			            console.error(err);
			        });
			},

			// 检查一个标签是否被选中
			isSelected(tag) {
				return this.selectedIndices.includes(tag);
			},
			// 切换标签的选中状态
			toggleSelection(tag) {
				const indexIndex = this.selectedIndices.indexOf(tag);
				if (indexIndex > -1) {
					// 如果标签已经被选中，则移除它
					this.selectedIndices.splice(indexIndex, 1);
				} else {
					// 如果标签没有被选中，则添加它
					this.selectedIndices.push(tag);
				}
			},
		},
		onLoad(options) {
			// let dat = JSON.parse(options.params)
			// console.log(dat)
		}
	}
</script>

<style scoped lang="scss">
	.other {
		width: 100vw;
		height: 100vh;
	}

	.center {
		border-top: 1px solid #f0f3f5;
		padding: 0px 40rpx;
		background-color: #fff;
	}

	.popup-box {
		background: #FFFFFF;
		padding: 0 27upx;
		border-radius: 20px 20px 0px 0px;

		.popup-title {
			padding: 22upx 0;
			position: relative;
			text-align: center;
			font-weight: 500;
			font-size: 34upx;
			color: #333333;
			border-bottom: 1px solid #EEEEEE;

			image {
				position: absolute;
				right: 0;
				width: 42upx;
				height: 42upx;
			}
		}
	}

	.item-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 24rpx;

		.item {
			width: 144rpx;
			height: 52rpx;
			border-radius: 4rpx;
			border: 1px solid #C2C2C2;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-bottom: 24rpx;
			position: relative;

			image {
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		.active {
			background: rgba(68, 154, 255, 0.1);
			border: 1px solid #449AFF;
			color: #2983EC;
		}
	}
</style>