更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 pda/pages/index/set.vue

对比新文件
@@ -0,0 +1,161 @@
<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>