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 class="title lf-m-t-40">
			<image src="../../static/images/plane_ticket.png" class="icon-img"></image>
			<text class="lf-m-l-10">机票酒店</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5 select-box">
			<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">
			<image src="../../static/images/travel.png" class="icon-img"></image>
			<text class="lf-m-l-10">旅游度假</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5 select-box">
			<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">
			<image src="../../static/images/jieson.png" class="icon-img"></image>
			<text class="lf-m-l-10">接送服务</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5 select-box">
			<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">
			<image src="../../static/images/other.png" class="icon-img"></image>
			<text class="lf-m-l-10">其他精选</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5 select-box">
			<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 class="title lf-m-t-40">
			<image src="../../static/images/strategy.png" class="icon-img"></image>
			<text class="lf-m-l-10">攻略社区</text>
		</view>
		<view class="lf-flex-wrap lf-p-l-5 select-box">
			<view class="select-item" hover-class="lf-opacity" 
				v-for="(item, index) in strategy_list" :key="index" 
				v-if="!item.checked" @click="activaItem(item, index, 'strategy_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
				}], // 其他精选
				strategy_list: [{
					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;
		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>