uniDataCenter/components/selfIndicato...

<template>
  <view class="drawerBox">
    <view class="explainTitle">设置自定义指标</view>
    <view class="explainTitle_small">勾选您关心的直播间数据指标,最少 <text class="css_4">4</text> 项</view>
    <view v-for="(d,didx) in dataList" :key="didx" class="dataList_item">
      <view class="bigTitle">{{d.group_name}}</view>
      <view>
        <view class="smallTitle" v-for="l in d.list" :key="l.key">
          <view @click="switchBox(l)">
            <view v-if="l.checked==1" class="iconfont icon-queren_icon"></view>
            <view class="chossenoBox" v-else></view>
          </view>
          {{l.name}}
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="cancel" @click="closeDrawer">取消</view>
      <view class="confirm" @click="submitSelf">确定</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "selfIndicators",
  data(){
    return{
      dataList:[],
      opaFlag:true,//是否可以编辑,true可以
    }
  },
  methods:{
    judgeItemLen(){ //判断选中的个数
      this.opaFlag = true
      let columnok = []
      this.dataList.forEach(d=>{
        d.list.forEach(l=>{
          if(l.checked==1){
            columnok.push(l.key)
          }
        })
      })
      if(columnok.length <= 4){
        uni.showToast({
          title:'最少选择4项!',
          icon:'none',
          duration:2000
        })
        this.opaFlag = false
      }
    },
    get_all_dot(){
      this.$req(this.$api.search_config_all,'get',{
        type: "SMALLAPP_LIVE_EFFECT_LIST"
      },(res)=>{
        if(res && res.errno == 0){
          this.dataList = res.rst.seting
        }
      })
    },
    switchBox(l){
      if(l.checked == 1){
        this.judgeItemLen()
        if(this.opaFlag){
          l.checked = 0
        }
      }else{
        l.checked = 1
      }
    },
    closeDrawer(){
      this.$emit('closeindicatorDrawer',0)
    },
    submitSelf(){
      let columnok = []
      this.dataList.forEach(d=>{
        d.list.forEach(l=>{
          if(l.checked==1){
            columnok.push(l.key)
          }
        })
      })
      this.$req(this.$api.save_checked_status,'post',{
        type: "SMALLAPP_LIVE_EFFECT_LIST",
        column: columnok
      },(res)=>{
        uni.showToast({
          title:res.err,
          icon:'none',
          duration:2000
        })
        if(res&&res.errno == 0){
          this.$emit('closeindicatorDrawer',1)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.drawerBox{
  background-color: #2A2C3B;
  height: 100%;
  width: 750rpx;
  color: #fff;
  padding: 60rpx 50rpx;
  .explainTitle{
    font-size: 36rpx;

  }
  .explainTitle_small{
    font-size: 24rpx;
    color: #757D9C;
    margin-top: 10rpx;
    .css_4{
      font-weight: 600;
      color: #fff;
      font-size: 34rpx;
      padding: 8rpx;

    }

  }
  .dataList_item{
    .bigTitle{
      font-size: 28rpx;
      color: #B1BADC;
      margin-top: 46rpx;

    }
    .smallTitle{
      font-size: 28rpx;
      width: 50%;
      margin-top: 20rpx;
      display: inline-flex;
      align-items: center;
      .chossenoBox{
        display: inline-block;
        width: 28rpx;
        height: 28rpx;
        border-radius: 2px;
        border: 1px solid #414452;
        margin-right: 12rpx;
      }
      .iconfont{
        font-size: 14rpx;
        display: inline-block;
        width: 28rpx;
        height: 28rpx;
        border-radius: 2px;
        margin-right: 12rpx;
        background: #4388FC;
        line-height: 28rpx;
        text-align: center;
      }
    }

  }
  .footer{
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .cancel{
      font-size: 28rpx;
      color: #747474;
      border-radius: 4px;
      border: 1px solid #747474;
      padding: 20rpx 50rpx;
    }
    .confirm{
      font-size: 28rpx;
      color: #fff;
      border-radius: 4px;
      border: 1px solid #5B80F4;
      padding: 20rpx 50rpx;
      background: #5B80F4;
      margin-left: 20rpx;
    }
  }

}
</style>