yicangzongtai_app_240321/pages/operationCenter/newPull.vue

<template>
  <view class="main">
    <view class="head">
      <navbar :config="config" backColor="#666"></navbar>
      <view class="mydata">
        <view class="mydata_l">
          <image :src="userInfo.head_photo" mode="" v-if="userInfo.head_photo"></image>
          <image :src="$mConfig.staticUrl+'/head-on.png'" mode="" v-else></image>
          <view>
            <view>{{userInfo.real_name}}</view>
            <view>{{ userInfo.grade == 1 ? '店长' : '普通会员' }}</view>
          </view>
        </view>
        <view class="mydata_r">合计：<text>{{num}}</text>人</view>
      </view>
      <view class="head_shade"></view>
    </view>
    <view class="listBox">
      <!-- <view class="listBox_tab" v-if="tabArr.length>7">
				<view :class="{active:selTabIndex==1}" @click="switchTab(1)">创客({{tabArr[1].num}})</view>
				<view :class="{active:selTabIndex==2}" @click="switchTab(2)">爱心小屋({{tabArr[2].num}})</view>
				<view :class="{active:selTabIndex==3}" @click="switchTab(3)">服务驿站({{tabArr[3].num}})</view>
				<view :class="{active:selTabIndex==4}" @click="switchTab(4)">服务中心({{tabArr[4].num}})</view>
				<view :class="{active:selTabIndex==5}" @click="switchTab(5)">市级({{tabArr[5].num}})</view>
				<view :class="{active:selTabIndex==6}" @click="switchTab(6)">省级公司({{tabArr[6].num}})</view>
				<view :class="{active:selTabIndex==7}" @click="switchTab(7)">大区公司({{tabArr[7].num}})</view>
			</view> -->

      <view class="item" v-for="(v,i) in list" :key="i">
        <view class="item_l">
          <image :src="v.head_photo" mode="" v-if="v.head_photo"></image>
          <image :src="$mConfig.staticUrl+'/head-on.png'" mode="" v-else></image>
          <view>
            <view class="item_l_name">{{v.real_name||v.nickname || v.nickname_desensitized}}</view>
            <view class="item_l_tel">{{v.mobile}}</view>
            <view class="item_l_time">入驻时间:{{v.register_time}}</view>
          </view>
        </view>
        <view class="item_r">
          <view>{{ v.grade == 1 ? '店长' : '普通会员' }}</view>
          <view>{{ v.activating ? '激活' : '未激活' }}</view>
        </view>
      </view>
      <view>
        <noData v-if="list.length<=0"></noData>
      </view>
    </view>
  </view>
</template>

<script>
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '推广拉新',
          color: '#1a1a1a',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: 'black',
          // backgroundImg:"/static/operationCenter/headBg.png"
        },
        selTabIndex: 0,
        list: [],
        userInfo: {},
        num: 0,
        tabArr: []
      }
    },
    onLoad(options) {
      this.userInfo = JSON.parse(options.userInfo);
      // this.getTabNum()
      this.getList()
    },
    methods: {

      // 获取列表
      getList() {
        this.$http.get('/account/myPartner')
          .then(res => {
            if (res && res.code == 200) {
              this.list = res.data;
              if (this.selTabIndex == 0) {
                this.num = this.list.length
              }
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    .head {
      // background: linear-gradient(180deg,#2bba26 0%, #047753 100%);
      width: 100%;
      // height: 380rpx;
      background: url('/static/convenienceService/detailsBg.png')0 0 no-repeat;
      background-size: 752rpx 510rpx;
      position: relative;

      /deep/ .hx-navbar__fixed {
        background: url('/static/convenienceService/detailsBg.png')0 0 no-repeat;
        background-size: 752rpx 510rpx;
      }

      .mydata {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 30rpx 80rpx 30rpx;

        .mydata_l {
          display: flex;
          align-items: center;

          image {
            width: 115rpx;
            height: 115rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          view {
            font-size: 32rpx;
            color: #FFFFFF;
          }
        }

        .mydata_r {
          font-size: 28rpx;
          color: #FFFFFF;

          text {
            font-size: 36rpx;
          }
        }
      }

      .head_shade {
        width: 100%;
        height: 40rpx;
        position: absolute;
        bottom: -2rpx;
        left: 0;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 0 0;
      }
    }

    .listBox {
      padding: 0 30rpx;
      overflow: auto;

      .listBox_tab {
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid #E6E6E6;
        background: #FFFFFF;
        overflow: auto;

        >view {
          font-size: 30rpx;
          color: #1A1A1A;
          position: relative;
          font-weight: 700;
          flex-shrink: 0;
          padding: 0 20rpx;
          padding-bottom: 30rpx;
        }

        >.active {
          color: #22A834;

          &::after {
            display: block;
            width: 100%;
            height: 4rpx;
            content: "";
            background: #22A834;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }

      .item {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #E6E6E6;

        .item_l {
          display: flex;

          image {
            width: 106rpx;
            height: 106rpx;
            border-radius: 50%;
            margin-right: 50rpx;
          }

          >view {
            line-height: 34rpx;
          }

          .item_l_name {
            font-size: 28rpx;
            color: #1A1A1A;
          }

          .item_l_tel,
          .item_l_time {
            font-size: 24rpx;
            color: #999999;
          }
        }

        .item_r {
          text-align: right;

          view {
            font-size: 24rpx;
            color: #FA6138;

            &:first-child {
              margin-bottom: 37rpx;
            }
          }

        }
      }
    }
  }
</style>