uniDataCenter/pages/index/livingdata.vue

<template>
  <view>
    <view class="unit_pad flex-between livingtotal">
      <text class="fWeight600 f40">直播间成交额</text>
      <view class="flex" style="justify-content: flex-end;align-items: flex-end;">
        <text class="c-F39F2F" style="font-size:36rpx;line-height: 62rpx;margin-right: 10rpx;">¥</text>
        <text class="c-F39F2F f60">{{scorePreview&&scorePreview.total_money || scorePreview&&scorePreview.total_money == 0 ? $formatNum(scorePreview.total_money) : '-'}}</text>
      </view>
    </view>
    <!--自定义指标-->
    <view class="flexWrap livingBox" style="padding: 20rpx 10rpx">
      <view v-for="l in livingData_all" v-if="l.checked == 1" :key="l.key" class="livingItem">
        <view>
          <image :src="l.other.icon" alt="" mode="heightFix"></image>
        </view>
        <view class="f26">{{l.name}}</view>
        <view>
          <text class="f28 fWeight600">{{l.value || l.value == 0 ? $formatNum(l.value) : '-'}}</text>
          <text class="f20 lMar8">{{l.other.unit}}</text>
        </view>
      </view>
      <view class="livingItem" @click="showDrawer">
        <view class="f50">+</view>
        <view class="f28">自定义</view>
      </view>
    </view>
    <!--正在直播-->
    <view v-if="livingList&&livingList.length>0" class="livingListBox">
      <view class="splitLine"></view>
      <view class="unit_pad flex-between">
        <view>
          <text class="livingTxt">正在直播</text>
          <image src="../../static/live.gif" alt="" mode="widthFix" style="width: 30rpx;margin-left: 10rpx"></image>
        </view>
        <view class="flex" style="justify-content: flex-end;flex:1;">
          <template v-for="(l,index) in livingList">
            <view v-if="index<6" :key="l.user_id">
              <image :src="l.cover_img" alt="" class="livingImg"></image>
            </view>
          </template>
        </view>
      </view>
    </view>

    <uni-drawer ref="showlivingMask" mode="left">
      <scroll-view style="height: 100%;width: 550rpx" scroll-y="true" class="drawerBox">
        <view class="f32 c-BCBCBC" style="padding: 120rpx 40rpx 20rpx">编辑</view>
        <view v-for="(l,idx) in livingData_all" :key="l.key" class="drawer_item" :class="idx == livingData_all.length-1 ? '' : 'drawer_item_border'">
          <view class="f28">{{ l.name }}</view>
          <view class="f42" @click="save_Data(l)">
            <text class="minus" v-if="l.checked == 1">-</text>
            <text v-else>+</text>
          </view>
        </view>
      </scroll-view>
    </uni-drawer>
  </view>
</template>
<script>
export default {
  data(){
    return{
      livingList: [],
      scorePreview: {},
      livingData_all: [],//所有自定义数据
      old_livingData_all:[],
      have_livdata_len: 0,//当前所选指标的个数
    }
  },
  methods:{
    showDrawer () {
      this.$refs.showlivingMask.open();
    },
    init_uType_non3(){
      // this.get_living_Data()//获取自定义所有数据
      // this.get_livingList()//正在直播
      // this.get_scorePreview()//直播数据
      let pro1 = new Promise((resolve, reject)=>{
        this.get_living_Data(()=>{
          resolve()
        })
      })
      let pro2 = new Promise((resolve, reject)=>{
        this.get_livingList(()=>{
          resolve()
        })
      })
      // let pro3 = new Promise((resolve, reject)=>{
      //   this.get_scorePreview(()=>{
      //     resolve()
      //   })
      // })
      Promise.all([pro1,pro2]).then(()=>{
        this.$hide_init_loading()
        uni.stopPullDownRefresh()
        this.$emit('livingTimerEdit',
          setTimeout(()=>{
            this.init_uType_non3()
          },10*1000)
        )
      })
    },
    get_living_Data (cb) {
      this.$req(this.$api.search_config_all, 'get', {
        type: 'XCX_INDEX_DATA_PREVIEW',
        method: 'user'
      }, (res) => {
        if (res && res.errno == 0) {
          this.old_livingData_all = res.rst.seting[0].list
          this.old_livingData_all.forEach(l => {
            if (l.checked == 1) {
              this.have_livdata_len += 1
            }
          })
          this.get_scorePreview(cb)
        }else{
          cb ? cb() : ''
        }
      }, (err)=>{
        cb ? cb() : ''
      })
    },
    get_livingList (cb) {
      this.$req(this.$api.market_livingList, 'get', {}, (res) => {
        cb ? cb() : ''
        if (res && res.errno == 0) {
          this.livingList = res.rst.list;
        }
      },(err)=>{
        cb ? cb() : ''
      })
    },
    get_scorePreview (cb) {
      this.$req(this.$api.market_scorePreview, 'get', {}, (res) => {
        cb ? cb() : ''
        if (res && res.errno == 0) {
          this.scorePreview = res.rst
          if (!res.rst) { return false }
          this.old_livingData_all.forEach(l => {
            l.value = res.rst[l.key]
          })
          this.livingData_all = this.old_livingData_all
        }
      },(err)=>{
        cb ? cb() : ''
      })
    },
    save_Data (l) { //保存还显示的数据项
      if (l.checked == 1) {
        if (this.have_livdata_len <= 4) {
          uni.showToast({
            title: '最少选择4项',
            icon: 'none',
            duration: 2000
          })
          return false
        }
        l.checked = 0
        this.have_livdata_len -= 1
      } else {
        l.checked = 1
        this.have_livdata_len += 1
      }
      let lastcolumn = []
      this.livingData_all.forEach(l => {
        if (l.checked == 1) {
          lastcolumn.push(l.key)
        }
      })
      this.$req(this.$api.save_checked_status, 'post', {
        type: 'XCX_INDEX_DATA_PREVIEW',
        column: lastcolumn
      })
    },
  }
}

</script>
<style scoped lang="scss">
.unit_pad {
  padding: 20rpx 32rpx;
}
.livingListBox{
  background-color: #373E4E;
  .livingImg {
    width: 76rpx;
    height: 76rpx;
    border: 1px solid #f5225c;
    margin-left: 6rpx;
    border-radius: 50%;
  }
  .splitLine {
    height: 16rpx;
    background-color: #262C38;
  }
}

.livingtotal {
  background: #1B1E25;
  border-bottom: 2px solid #303643;
}

.livingBox {
  background: #1B1E25;
  .livingItem {
    width: 25%;
    text-align: center;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .livingTxt {
    font-size: 32rpx;
    font-weight: 600;
  }
}
.drawerBox {
  background-color: #2a2c3b;
  .drawer_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 60rpx 26rpx 40rpx;
    .minus {
      background-color: red;
      border-radius: 50%;
      width: 40rpx;
      height: 40rpx;
      line-height: 32rpx;
      text-align: center;
      display: inline-block;
    }
  }
  .drawer_item_border {
    border-bottom: 1px solid #585c69;
  }
}
</style>