guanmao-wxapp/pages/mine/customer/tag.vue

<template>
	<view class="app-container">
		<view class="list-container">
			<block v-for="(item, index) in tagList" :key='index'>
				<view class="item">
					<view class="top">
						<view class="title">{{item.tagGroupName}}</view>
					</view>
					<view class="tags">
						<block v-for="(it, idx) in item.tags" :key='idx'>
							<view class="tag" :class="it.tagged ? 'current':''" @tap="changeTag(index, idx)">{{it.tagName}}</view>
						</block>
					</view>
				</view>
			</block>
			
			<view class="item">
				<view class="top">
					<view class="title">自定义标签</view>
				</view>
				<view class="tags">
					<block v-for="(item, index) in customTagList" :key='index'>
						<view class="tag current">{{item}}<image src="@/static/icon/close2.png" class="close" @tap="deleteTag(index)"></image></view>
					</block>
					<view class="tag add" @tap="isShowDialog = true"><image src="@/static/icon/add.png"></image>新建标签</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-container">
			<view class="button" @tap="submitForm">保存</view>
		</view>
		
		<view class="global-mask" v-show="isShowDialog"></view>
		<view class="global-dialog" v-show="isShowDialog" style="top: 40%;">
			<view class="title">新建标签</view>
			<view class="input">
				<input type="text" placeholder="标签名称" v-model="newTagName">
			</view>
			<view class="btn">
				<view class="left" @tap="isShowDialog = false">取消</view>
				<view class="right" @tap="addTag()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unionId: null,
				tagList: [],
				customTagList: [],
				isShowDialog: false,
				newTagName: '',
				
				oldTagIds: [],
			}
		},
		
		onLoad({unionId}) {
			this.unionId = unionId;
			
			this.getTagList();
		},
		
		methods: {
			// 获取标签列表
			getTagList() {
				this.$axios({
					url: '/tag/wx/tag/list',
					method: 'get',
					params: {
						unionId: this.unionId
					},
				}).then(res => {
					this.tagList = res.data.tagGroupBeanList;
					this.customTagList = res.data.tagNameList;
					
					for (let i = 0; i < this.tagList.length; i++) {
						for (let j = 0; j < this.tagList[i].tags.length; j++) {
							if(this.tagList[i].tags[j].tagged) {
								this.oldTagIds.push(this.tagList[i].tags[j].tagId);
							}
						}
					}
					console.log(this.oldTagIds);
				})
			},
			
			// 新建标签
			addTag() {
				if(!this.newTagName) {
					return this.$toast('请填写标签名称');
				}
				this.customTagList.push(this.newTagName);
				this.newTagName = '';
				this.isShowDialog = false;
			},
			
			// 删除标签
			deleteTag(index) {
				this.customTagList.splice(index, 1);
			},
			
			// 切换标签
			changeTag(index, idx) {
				this.tagList[index].tags[idx].tagged = !this.tagList[index].tags[idx].tagged;
			},
			
			// 保存
			submitForm() {
				let tagList = [];
				let oldTagIds = this.oldTagIds;
				let newTagIds = [];
				let delTagIds = [];
				// 查出选中的标签
				for (let i = 0; i < this.tagList.length; i++) {
					for (let j = 0; j < this.tagList[i].tags.length; j++) {
						if(this.tagList[i].tags[j].tagged) {
							tagList.push(this.tagList[i].tags[j]);
							newTagIds.push(this.tagList[i].tags[j].tagId);
						}
					}
				}
				// 查出被删除的标签
				for (let k = 0; k < oldTagIds.length; k++) {
					if(newTagIds.indexOf(oldTagIds[k]) < 0) {
						delTagIds.push(oldTagIds[k]);
					}
				}
				
				let params = {
					unionId: this.unionId,
					saveTags: this.customTagList,
					delTags: delTagIds,
					addTags: tagList
				}
				this.$axios({
					url: '/tag/custom/edit',
					type: 'application/json',
					params,
					isLoading: 1,
				}).then(res => {
					this.$successToast('操作成功');
					setTimeout(() => {
						uni.$emit('refreshCustomerData');
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		padding: 20rpx 20rpx 120rpx;
		box-sizing: border-box;
	}
	.list-container {
		.item {
			border-bottom: 1px solid #E5E5E5;
			.top {
				.title {
					font-size: 28rpx;
					color: #666666;
					line-height: 70rpx;
				}
			}
			.tags {
				display: flex;
				flex-wrap: wrap;
				.tag {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					padding: 0 16rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					background: #ffffff;
					color: #666666;
					border: 1px solid #eaeaea;
					.close {
						width: 20rpx;
						height: 20rpx;
						display: block;
						margin-left: 20rpx;
					}
					&:last-child {
						margin-right: 0;
					}
					&.current {
						background: #FFD6BB;
						color: #FE781F;
						border: 1px solid rgba($color: #FE781F, $alpha: 0.4);
					}
					&.add {
						image {
							width: 20rpx;
							height: 20rpx;
							display: block;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	.global-dialog {
		.input {
			display: flex;
			justify-content: center;
			margin-bottom: 50rpx;
			input {
				width: 500rpx;
				height: 84rpx;
				background: #F3F3F3;
				border-radius: 10rpx;
				padding: 0 20rpx;
			}
		}
	}
	.bottom-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		.button {
			width: 100%;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
			border-radius: 72rpx;
			background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>