<template>
|
<view class="main_app">
|
<template v-for="item in platformGroupList">
|
<view class="title">
|
<view class="icon"></view>
|
<view class="name">{{item.name}}</view>
|
</view>
|
<view class="data_list">
|
<view
|
class="item"
|
:class="{ active: platform.showConfig }"
|
v-for="(platform, i) in item.platformList"
|
:key="platform.id"
|
@click="platformClick(platform.id)"
|
>
|
{{platform.name}}
|
</view>
|
</view>
|
</template>
|
<view class="btns">
|
<div class="btn" @click="$goBack">取消</div>
|
<div class="btn active" @click="updUserPlatform">确定</div>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { getPlatformGroupList, updUserPlatformConfig } from '@/api'
|
export default {
|
data() {
|
return {
|
platformGroupList: []
|
}
|
},
|
onLoad() {
|
this.getPlatformGroup()
|
},
|
methods: {
|
updUserPlatform(){
|
const { platformGroupList } = this
|
let ids = []
|
platformGroupList.forEach(item => {
|
item.platformList.forEach(platform => {
|
if(platform.showConfig){
|
ids.push(platform.id)
|
}
|
})
|
})
|
updUserPlatformConfig({ids}).then(res => {
|
this.showToast('更新成功')
|
this.$goBack()
|
})
|
},
|
platformClick(id) {
|
const { platformGroupList } = this
|
platformGroupList.forEach(item => {
|
item.platformList.forEach(platform => {
|
if(platform.id === id){
|
platform.showConfig = !platform.showConfig
|
}
|
})
|
})
|
},
|
getPlatformGroup() {
|
getPlatformGroupList({
|
queryData: 0,
|
queryType: 1
|
}).then(res => {
|
this.platformGroupList = res.data || []
|
})
|
},
|
}
|
}
|
</script>
|
<style lang="scss">
|
page {
|
background-color: #f5f9f8;
|
}
|
.main_app {
|
padding: 0rpx;
|
.data_list {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 20rpx;
|
padding: 30rpx;
|
background-color: #fff;
|
&:nth-last-child(1){
|
margin-bottom: 120rpx;
|
}
|
.item {
|
width: 220rpx;
|
height: 80rpx;
|
background: #f3f3f3;
|
border-radius: 40rpx;
|
line-height: 80rpx;
|
text-align: center;
|
margin-bottom: 15rpx;
|
font-size: 30rpx;
|
margin-right: 15rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
&:nth-of-type(3n){
|
margin-right: 0;
|
}
|
}
|
.active {
|
background: $uni-color-primary;
|
color: #fff;
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39, 155, 170, 0.4);
|
}
|
}
|
.title {
|
display: flex;
|
align-items: center;
|
padding: 30rpx 30rpx 0;
|
background-color: #fff;
|
.icon {
|
width: 22rpx;
|
height: 22rpx;
|
margin-right: 16rpx;
|
border: 6rpx solid $uni-color-primary;
|
border-radius: 50%;
|
}
|
.name {
|
font-weight: 600;
|
font-size: 34rpx;
|
color: #111111;
|
}
|
}
|
}
|
.btns{
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 750rpx;
|
height: 120rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0,0,0,0.1);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 30rpx;
|
.btn{
|
width: 336rpx;
|
height: 88rpx;
|
background: #FFFFFF;
|
border-radius: 44rpx;
|
border: 1rpx solid #999999;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 32rpx;
|
color: #333333;
|
}
|
.active{
|
background: $uni-color-primary;
|
color: #fff;
|
}
|
}
|
</style>
|
