From e58c646db02eeaf85fed8f7ef85a798bec8573a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Wed, 7 Jul 2021 12:01:08 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A2=91=E9=81=93=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json              |   6 ++
 pages/channel/index.vue | 219 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 225 insertions(+)
 create mode 100644 pages/channel/index.vue

diff --git a/pages.json b/pages.json
index 19575d1..5525a57 100644
--- a/pages.json
+++ b/pages.json
@@ -109,6 +109,12 @@
 			"style": {
 				"navigationBarTitleText": "关于我们"
 			}
+		},
+		{
+			"path": "pages/channel/index",
+			"style": {
+				"navigationBarTitleText": "添加频道"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/channel/index.vue b/pages/channel/index.vue
new file mode 100644
index 0000000..6b309dc
--- /dev/null
+++ b/pages/channel/index.vue
@@ -0,0 +1,219 @@
+<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>