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 class="lf-m-r-24">{{ key }}</text>
				<text class="lf-iconfont lf-icon-cuo 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-item1" 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: [],
				my_list: [],
				content_list: []
			}
		},
		onLoad(){
			this.getMyChancel()
		},
		methods: {
			//我的频道列表
			getMyChancel(){
				this.$http(this.API.API_MYCHANNEL).then(res => {
					this.my_list = res.data;
					if(this.my_list) {
						this.getChannel()
					}
					
				})
			},
			updateChannel(type) {
				this.$http(this.API.API_EDITCHANNEL,{channels: this.chanel_id},{showLoading:false}).then(res => {
					// if(type == 1) {
					// 	this.$msg('添加频道成功')
					// }else {
					// 	this.$msg('取消频道成功')
					// }
				}).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);
						}else {
							this.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)
								})
							}
						})
					})
					
					this.channel_list.forEach((item,index) => {
						item.content.forEach((item2,index2) => {
							this.my_list.forEach((item3,index3) => {
								if(item3 == item2.id) {
									this.activaItem(item2,index2,index,item,1)
								}
							})
						})
					})
				}).catch(err => {
					
				})
			},
			// 添加频道
			activaItem(item2, index2, index, item,type){
				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;
					}
				}
				if(type != 1) {
					this.updateChannel(1);
				}
				
			},
			// 移除频道
			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(2);
			}
		}
	}
</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: max-content;
		padding: 0 40rpx 0 20rpx;
		height: 82rpx;
		border: 1rpx solid #999999;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		line-height: 82rpx;
		background-color: #FFFFFF;
		margin-right: -2rpx;
		margin-top: -2rpx;
		box-sizing: border-box;
	}
	
	.select-item1{
		width: max-content;
		padding: 0 20rpx;
		height: 82rpx;
		border: 1rpx solid #999999;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		line-height: 82rpx;
		background-color: #FFFFFF;
		// margin-right: -2rpx;
		// margin-top: -2rpx;
		box-sizing: border-box;
		margin: 6rpx;
		border-radius: 20rpx;
	}
	.active{
		border: 1rpx solid #FF0000;
		color: #FF0000;
		background-color: #FFF8F8;
		position: relative;
		border-radius: 5rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		// text-align: left;
		// display: flex;
		// justify-content: space-between;
		// box-sizing: border-box;
		// padding: 0 10rpx;
		.remove-icon{
			position: absolute;
			right: 22rpx;
			top: 0;
			color: #FF0000;
			font-size: 24rpx;
		}
	}
	.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>