uniapp-hainan/pages/channel/index.vue

<template>
	<view class="content">
		<!-- 我的频道，已选的 -->
		<view class="title">
			<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>
				<u-icon name="lock-fill" class="remove-icon"></u-icon>
			</view>
		</view>
		<!-- 机票酒店 -->
		<view class="title lf-m-t-40">
			<u-icon name="lock-fill"></u-icon>
			<text class="lf-m-l-10">机票酒店</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5">
			<view class="select-item" hover-class="lf-opacity" 
				v-for="(item, index) in plane_ticket_list" :key="index" 
				v-if="!item.checked" @click="activaItem(item, index, 'plane_ticket_list')">{{ item.name }}
			</view>
		</view>
		<!-- 旅游度假 -->
		<view class="title lf-m-t-40">
			<u-icon name="lock-fill"></u-icon>
			<text class="lf-m-l-10">旅游度假</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5">
			<view class="select-item" hover-class="lf-opacity" 
				v-for="(item, index) in travel_list" :key="index" 
				v-if="!item.checked" @click="activaItem(item, index, 'travel_list')">{{ item.name }}
			</view>
		</view>
		<!-- 接送服务 -->
		<view class="title lf-m-t-40">
			<u-icon name="lock-fill"></u-icon>
			<text class="lf-m-l-10">接送服务</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5">
			<view class="select-item" hover-class="lf-opacity" 
				v-for="(item, index) in jieson_list" :key="index" 
				v-if="!item.checked" @click="activaItem(item, index, 'jieson_list')">{{ item.name }}
			</view>
		</view>
		<!-- 其他精选 -->
		<view class="title lf-m-t-40">
			<u-icon name="lock-fill"></u-icon>
			<text class="lf-m-l-10">其他精选</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5">
			<view class="select-item" hover-class="lf-opacity" 
				v-for="(item, index) in other_list" :key="index" 
				v-if="!item.checked" @click="activaItem(item, index, 'other_list')">{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				select_list: {}, // 当前选中的频道
				plane_ticket_list: [{
					name: '多地比价',
					key: 'a1',
					checked: false
				},{
					name: '降价提醒',
					key: 'a2',
					checked: false
				},{
					name: '团体机票',
					key: 'a3',
					checked: false
				}], // 机票酒店
				travel_list: [{
					name: '周边游',
					checked: false
				},{
					name: '国内游',
					checked: false
				},{
					name: '主题玩法',
					checked: false
				},{
					name: '尾单特卖',
					checked: false
				},{
					name: '邮轮',
					checked: false
				},{
					name: '汽车·船票',
					checked: false
				},{
					name: '定制游',
					checked: false
				}], // 旅游度假
				jieson_list: [{
					name: '接送机',
					checked: false
				},{
					name: '接送火车',
					checked: false
				},{
					name: '打车',
					checked: false
				},{
					name: '按天包车',
					checked: false
				},{
					name: '定制包车',
					checked: false
				},{
					name: '国内租车',
					checked: false
				},{
					name: '境外租车',
					checked: false
				}], // 接送服务
				other_list: [{
					name: '每日签到',
					checked: false
				},{
					name: '会员中心',
					checked: false
				},{
					name: '任务中心',
					checked: false
				},{
					name: '智慧旅游',
					checked: false
				},{
					name: '兑换会员',
					checked: false
				},{
					name: '旅盟',
					checked: false
				}], // 其他精选
			}
		},
		onLoad(){
			
		},
		methods: {
			// 添加频道
			activaItem(item, index, list_name){
				let select_list = this.select_list;
				if(!select_list[item.name]){
					if(Object.keys(select_list).length > 12){
						this.$msg('最多只能添加12个频道哦')
					}else{
						this.select_list[item.name] = list_name;
						this[list_name][index].checked = true;
					}
				}
			},
			// 移除频道
			cancelItem(key){
				// 源数据状态改变
				let list = this[this.select_list[key]];
				list.forEach(item => {
					if(item.name == key){
						item.checked = false;
					}
				});
				// 清除选中的对象
				delete this.select_list[key];
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		padding: 30rpx 32rpx;
	}
	.title{
		color: #222222;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}
	.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: 2rpx;
			top: 2rpx;
			color: #FF0000;
		}
	}
	.lf-p-l-5{
		padding-left: 5rpx;
	}
</style>