<template> <view class="box"> <view class="tabBob"> <view class="tabline" @click="tabcl(1)"> <view class="tabTxt" :class="{tabActive:tabindex==1}">一级人脉</view> <view class="tabkk" v-if="tabindex==1"></view> </view> <view class="tabline" @click="tabcl(2)"> <view class="tabTxt" :class="{tabActive:tabindex==2}">二级人脉</view> <view class="tabkk" v-if="tabindex==2"></view> </view> <view class="tabline" @click="tabcl(3)"> <view class="tabTxt" :class="{tabActive:tabindex==3}">三级人脉</view> <view class="tabkk" v-if="tabindex==3"></view> </view> </view> <view style="height: 100rpx;"></view> <view class="line" v-for="(item,index) in list"> <view class="linetop"> <view class="name">{{item.WxNickName?item.wxNickName:''}}</view> <view class="amount">¥{{item.money}}</view> </view> <view class="lineCOnt"> <view class="lineline"> <view class="lineContLeft"> <image src="../../static/timg/icon_dianhua.png" mode="" class="lineContLeftImg"></image> <view class="lineContLeftMs">{{item.MobilePhone}}</view> </view> <view class="lineTIme" v-if="tabindex==1">一级人脉</view> <view class="lineTIme" v-if="tabindex==2">二级人脉</view> <view class="lineTIme" v-if="tabindex==3">三级人脉</view> </view> <view class="lineline"> <view class="lineContLeft"> <image src="../../static/timg/icon_danhao.png" mode="" class="lineContLeftImg"></image> <view class="lineContLeftMs">{{item.BizCode}}</view> </view> <view class="lineTIme">{{item.BizPayTime}}</view> </view> </view> </view> <nodata v-if="list.length==0"></nodata> </view> </template> <script> import nodata from '../../components/nodata/nodata.vue' export default { components: { nodata }, data() { return { tabindex:1, themeColor:'', userInfo:'', list:'' } }, onLoad(opt) { this.themeColor = uni.getStorageSync("themeColor"); this.userInfo = uni.getStorageSync("userInfo"); this.getList() }, onShow() { }, methods: { tabcl(num){ this.tabindex=num; this.getList() }, getList(){ uni.showLoading({ title: '加载中' }) this.$http('openMCustomer/getRebateList', { type:this.tabindex }, 'GET').then(res => { uni.hideLoading(); this.list = res.data; //var data=res.data.Items; //this.list=this.list.concat(data); //console.log('list+=', this.queryShopList); }) } }, onPullDownRefresh(){ //this.page=1; //this.list=[]; this.getList(); setTimeout(() => { uni.stopPullDownRefresh(); // 关闭下拉刷新 }, 2000); } } </script> <style scoped lang="less"> .box { width: 100vw; min-height: 100vh; background: #F4F5F7; } .tabBob{ display: flex; justify-content: space-around; background: #FFFFFF; padding-bottom: 10rpx; width: 100%; position: fixed; left: 0; top: 0; } .tabTxt{ padding-top: 23rpx;padding-bottom: 8rpx; } .tabActive{ color: #FF0000 !important; } .tabkk{ width: 40rpx; height: 4rpx; background: #FF0000; margin: 0 auto; } .lineContLeftImg{ width: 30rpx; height: 30rpx; margin-right: 10rpx; } .line{ width: 702rpx; background: #FFFFFF; border-radius: 10rpx; margin-bottom: 20rpx; margin-left: 24rpx; } .linetop{ display: flex; justify-content: space-between; font-size: 30rpx; padding: 20rpx; padding-bottom: 0; } .lineline{ display: flex; justify-content: space-between; padding: 20rpx; font-weight: 400; color: #999999; font-size: 24rpx; line-height: 30rpx; } .lineContLeft{ display: flex; } .name{ font-weight: 500; color: #3C3C3C; } .amount{ color: #FF0000; } </style>