邓平艺
5 years ago
2 changed files with 225 additions and 0 deletions
@ -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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue