LocalLivingServicesUniapp/pages/store/settings.vue

<template>
	<view>
		<!-- <cu-custom bgColor="bg-fff" :isBack="true">
			<block slot="content">店铺设置</block>
		</cu-custom> -->
		<view class="top"></view>
		<!-- <view class="head">
			<view class="handle">
				<view class="head_left">
					<span class="cuIcon-back" @click="back"></span>
				</view>
				<span class="center">店铺设置</span>
				<view class="head_right">
				</view>
			</view>
		</view> -->
		<u-navbar title="店铺设置" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="bg-fff" v-for="ele in ulList" :key="ele.name">
			<view class=" cu-form-group" :style="ele.name == '基本信息' ? 'margin-top:0' : ''">
				<view class="content ">
					<text class="text-bold">{{ ele.name }}</text>
					<i class="text-bg "></i>
				</view>
			</view>
			<view v-for="val in ele.liList" :key="val.label">
				<view class="cu-form-group justify-between">
					<view class="title" v-if="val.status" style="display: flex;align-items: center;">
						<text>{{ val.label }}  </text>
						<text v-if="val.status=='headPhotoStatus'" style="font-size: 20rpx;color: #7e7e7e;margin: 0 10rpx;">门头照</text>
						<text v-if="indexOption[val.status] == 0" class="bg-orange">待审核</text>
						<text v-if="indexOption[val.status] == 1" class="bg-grey">审核通过</text>
						<text v-if="indexOption[val.status] == 2" class="bg-pink">审核驳回</text>
					</view>
					<view>
						<text style="color: #C7C6CA ;" @click="jump(val)"
							v-if="val.status == 'advertising' || val.status == 'headPhoto'">去上传</text>
						<text style="color: #C7C6CA ;" @click="jump(val)" v-else>去配置</text>
						<text class='cuIcon-right' style="color: #C7C6CA ;"></text>
					</view>
				</view>
				<view v-if="val.label == '服务设施'" style="padding-left: 42upx;">
					<text v-for="(tag, index) in selectTags" :key="index" class="tag-type tag-type-po">
						{{ tag }}
					</text>
				</view>
				<view v-if="val.label == '其他'" style="padding-left: 42upx;" @click="jumpOther">
					
				</view>
			</view>
			
		</view>
		<view class="other-tag">
			<view class="title" v-for="(item,index) in otherTags" :key="index">
				<span>{{item.className}}</span> 
				<view class="scene" v-for="(row,index) in item.localMerchantOtherVoList" :key="index">
				 <span>{{row.attribute}}</span>	
					<view class="item" >
					 <span v-for="(sun,index) in row.attributeValue.split(',')" :key="index">{{sun}}</span>	
					</view>
				</view>
			</view>
		</view>
		<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>
				<view class=" flex sub-bottom justify-between">
					<button class="cu-btn round line-gray  shadow" @click=" $refs.popup.close()">取消</button>
					<button style="width:77%" class="cu-btn bg-blue  round shadow" @click="submit">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		USER_INFO
	} from "@/common/util/constants"
	export default {
	
		data() {
			return {
				selectTags: [],
				tags: ['停车位', '休息室', 'WIFI', '空调', '茶点', '洗手间'], // 你的标签数组
				selectedIndices: [], // 用于存储被选中的标签索引
				ulList: [{
						name: '基本信息',
						liList: [{
								label: '店铺信息',
								status: 'status'
							}, {
								label: '品牌信息',
								status: 'logoStatus'
							}, {
								label: '经营信息',
								status: ' '
							},
							{
								label: '广告素材',
								// status: 'advertising'
									status: 'videoStatus'
							},
							{
								label: '商户照片',
								status: 'headPhotoStatus'
							},
						],
					},
					{
						name: '其他信息',
						liList: [{
							label: '经营资质',
							status: 'specialStatus'
						}, {
							label: '服务设施',
							status: ' '
						},  {
							label: '其他',
							status: ' '
						},],
					}

				],

				merchantId: '',
				indexOption: {},
				otherTags:[]
			}
		},
		async onShow() {

			this.merchantId = uni.getStorageSync(USER_INFO).merchantId;

			let res = await this.$http.get("/merchant/localMerchantInfo/queryAppInfoById?id=" + this.merchantId)
			if (res.data.success) {
				this.selectTags = res.data.result.content ? res.data.result.content.split(',').filter(id => id !== '') : []

				this.indexOption = res.data.result
				console.log(this.indexOption)
				uni.setStorageSync('address', {lng:res.data.result.longitude,lat:res.data.result.latitude,address:res.data.result.address});
				uni.setStorageSync('currentAddress', {name:res.data.result.address});
				
			} else {
				this.$tip.toast(res.data.message);
			}
			this.getOther()
		},
		methods: {
			
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getOther(){
				this.$http.get('/localOther/localMerchantOther/queryById?id='+this.merchantId).then(res => {
					console.log(res)
					this.otherTags = res.data.result
				})
			},
			submit() {
				
				let code = !!this.indexOption.content ? '/merchant/localMerchantService/edit' :
					'/merchant/localMerchantService/add'

				this.$http.post(code, {
					merchantId: this.merchantId,
					content: this.selectedIndices.join(',')
				}).then(res => {
					if (res.data.success) {
						this.$tip.success(res.data.result || '成功')
						uni.redirectTo({
							url: '/pages/store/settings'
						});
					} else {
						this.$tip.error(res.data.message);
					}
				})
			},
			// 检查一个标签是否被选中
			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);
				}
			},
			jump(item) {
				const queryString = encodeURIComponent(JSON.stringify(this.indexOption))
				if (item.label == '店铺信息') {
					uni.navigateTo({
						url: `/pages/login/settled?params=${queryString}`
					});
				}
				if (item.label == '品牌信息') {
					uni.navigateTo({
						url: `/pages/store/brandMessage?params=${queryString}`
					});
				}
				if (item.label == '经营信息') {
					uni.navigateTo({
						url: `/pages/store/businessInfor?params=${queryString}`
					});
				}
				if (item.label == '经营资质') {
					uni.navigateTo({
						url: `/pages/store/businessQua?params=${queryString}`
					});
				}
				if (item.label == '服务设施') {
					this.$refs.popup.open()
					this.selectedIndices = [...this.selectTags]
				}
				if (item.label == '广告素材') {
					uni.navigateTo({
						url: `/pages/store/advertising?params=${queryString}`
					});
				}
				if (item.label == '商户照片') {
					uni.navigateTo({
						url: `/pages/store/headPhoto?params=${queryString}`
					});
				}
				if (item.label == '其他') {
					uni.navigateTo({
						url: `/pages/store/otherSet?params=${queryString}`
					});
				}

			}
		}
	}
</script>
<style scoped lang="scss">
	page {
		background: #F8F8FA;
	}
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background: linear-gradient(87deg, #FFFFFF 0%, #A3CDFF 100%), linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
	}
	.head {
		width: 100%;
		background: #ffffff;
	
		.handle {
			height: 112rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 24rpx;
			position: relative;
	
			.head_left {
				font-size: 40rpx;
			}
	
			.center {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 30rpx;
				font-weight: 600;
			}
	
			.head_right {
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				span {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					font-size: 28rpx;
					justify-content: center;
					align-items: center;
				}
			}
		}
	
	}

	.cu-form-group {
		margin: 18upx 42upx;
	}

	/* .cu-form-group+.cu-form-group{
    border:none;
	border-top: 1upx solid #eee;

} */
	.cu-form-group:not(.bg-fff :has(+ .cu-form-group)) {
		border: none
	}

	.bg-orange {
		background: #FBF9E4;
		color: #F6863E;
		font-size: 24upx;
		padding: 6upx 10upx;
		margin-left: 12upx;
	}

	.bg-grey {
		background: #F3F3F3;
		color: #7E7E7E;
		font-size: 24upx;
		padding: 6upx 10upx;
		margin-left: 12upx;
	}

	.bg-pink {
		background: #FBE5E4;
		color: #F34F4F;
		font-size: 24upx;
		padding: 6upx 10upx;
		margin-left: 12upx;
	}

	.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;
			}
		}
	}

	.tag-type {
		display: inline-block;
		font-size: 26upx;
		width: 150upx;
		height: 54upx;
		color: #333333;
		margin: 18upx 33upx 0 0;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #C2C2C2;
		text-align: center;
		line-height: 54upx;
	}

	.tag-type-po {
		background: rgba(68, 154, 255, 0.1);
		border: 1px solid #449AFF;
		color: #2983EC;
		margin: 0 24upx 18upx 0;

	}

	.selected-background {
		color: #2983EC;
		position: relative;
		background: rgba(68, 154, 255, 0.1);
		border: 1px solid #449AFF;
	}

	.selected-background ::after {
		content: '';
		position: absolute;
		top: -1px;
		right: -1px;
		width: 22upx;
		height: 22upx;
		background-image: url('/static/store/xuanzhong.png');
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 0 5px 0 0;
	}

	.sub-bottom {
		width: 100%;
		background: #FFFFFF;
		padding: 27upx 0;

	}

	.title {
		text {
			height: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.other-tag{
		width: 95%;
		margin: 0 auto;
		padding: 24rpx 32rpx;
		background-color: #fff;
		.title{
			span{
				display: inline-block;
				font-weight: 500;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}
		}
		.scene{
			span{
					display: inline-block;
				font-size: 24rpx;
				color: #666666;
					margin-bottom: 0rpx;
			}
		}
		.item{
			width: 100%;
			display: flex;
			align-items: center;
			span{
				display: inline-block;
				width: 120rpx;
				height: 49rpx;
				background: rgba(68,154,255,0.1);
				border-radius: 4rpx ;
				font-size: 22rpx;
				color: #2983EC;
				margin: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>