Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增] 完成添加频道页面UI

test
邓平艺 5 years ago
parent
6b10c591d4
commit
e58c646db0
2 changed files with 225 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      pages.json
  2. 219
      pages/channel/index.vue

6
pages.json
View File

@ -109,6 +109,12 @@
"style": {
"navigationBarTitleText": "关于我们"
}
},
{
"path": "pages/channel/index",
"style": {
"navigationBarTitleText": "添加频道"
}
}
],
"globalStyle": {

219
pages/channel/index.vue
View File

@ -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