uniapp-hainan/pages/channel/index.vue

<template>
	<view class="content">
		<!-- 我的频道，已选的 -->
		<view class="title lf-font-bold">
			<text>我的频道</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5">
			<view class="select-item active" hover-class="lf-opacity" 
				v-for="(item, key, index) in select_list" :key="index" 
				@click="cancelItem(key)">
				<text>{{ key }}</text>
				<text class="lf-iconfont lf-icon-cuowu remove-icon"></text>
			</view>
		</view>
		<!-- 机票酒店 -->
		<view v-for="(item,index) of channel_list">
			<view class="title lf-m-t-40">
				<image src="../../static/images/plane_ticket.png" class="icon-img"></image>
				<text class="lf-m-l-10">{{item.name}}</text>
			</view>
			<view class="lf-flex-wrap lf-p-l-5 select-box">
				<view class="select-item" hover-class="lf-opacity" 
					v-for="(item2, index2) in item.content" :key="index2" 
					v-if="!item2.checked" @click="activaItem(item2, index2, index, item)">{{ item2.name }}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				select_list: {}, // 当前选中的频道
				channel_list: [],
				chanel_id: [],
			}
		},
		onLoad(){
			this.getChannel()
		},
		methods: {
			updateChannel() {
				this.$http(this.API.API_EDITCHANNEL,{channels: this.chanel_id},{showLoading:false}).then(res => {
					console.log(res)
				}).catch(err => {
					
				})
			},
			//频道列表
			getChannel() {
				this.$http(this.API.API_CHANNEL).then(res => {
					let list = [];
					res.data.forEach(item => {
						if(item.pid == 0) {
							item.content = [];
							list.push(item);
						}
					})
					this.channel_list = list;
					
					res.data.forEach(item => {
						this.channel_list.forEach((item2,index) => {
							if(item.pid == item2.id) {
								this.channel_list[index].content.push(item);
								this.channel_list[index].content.forEach((item3,index3) => {
									this.$set(this.channel_list[index].content[index3],'checked',false)
								})
							}
						})
					})
				}).catch(err => {
					
				})
			},
			// 添加频道
			activaItem(item2, index2, index, item){
				let select_list = this.select_list;
				if(!select_list[item2.name]){
					if(Object.keys(select_list).length > 11){
						this.$msg('最多只能添加12个频道哦')
					}else{
						this.select_list[item2.name] = {p_index: index, c_index: index2};
						this.chanel_id.push(item2.id);
						this.channel_list[index].content[index2].checked = true;
					}
				}
				this.updateChannel();
			},
			// 移除频道
			cancelItem(key){
				// 源数据状态改变
				let item = this.select_list[key];
				let list = this.channel_list[item.p_index].content[item.c_index];
				let id = this.channel_list[item.p_index].content[item.c_index].id;
				list.checked = false;
				// this.chanel_id.filter(t => t != id)
				this.chanel_id.forEach((item,index) => {
					if(this.chanel_id[index] == id) {
						this.chanel_id.splice(index, 1)
					}
				});
				// 清除选中的对象
				delete this.select_list[key];
				this.updateChannel();
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		padding: 30rpx 32rpx;
	}
	.title{
		color: #222222;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	.select-item{
		width: 170rpx;
		height: 82rpx;
		border: 1rpx solid #999999;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		line-height: 82rpx;
		background-color: #FFFFFF;
		margin-right: -1rpx;
		margin-top: -1rpx;
		box-sizing: border-box;
	}
	.active{
		border: 1rpx solid #1998FE;
		color: #1998FE;
		position: relative;
		// text-align: left;
		// display: flex;
		// justify-content: space-between;
		// box-sizing: border-box;
		// padding: 0 10rpx;
		.remove-icon{
			position: absolute;
			right: 0rpx;
			top: -28rpx;
			color: #FF0000;
			font-size: 26rpx;
		}
	}
	.lf-p-l-5{
		padding-left: 5rpx;
	}
	// .select-box{
	// 	overflow: hidden;
	// 	padding-top: 1rpx;
	// 	width: 100%;
	// 	height: max-content;
	// 	border-radius: 5rpx;
	// }
	.icon-img{
		width: 41rpx;
		height: 40rpx;
	}
</style>