CommunityApp/pagesM/pages/mine_income.vue

<template>
  <view class="container">
	 <view class="topView">
	 	 <view class="moneyLabel">
			 <text>总金额 (元)</text>
		 </view>
		 <view class="moneyNum">
			 <text>{{data.total?data.total:'0.00'}}</text>
		 </view> 
		 <view class="allMoney">
		 	  <text>累计收益：{{data.settled?data.settled:'0.00'}}元</text>
		 </view> 
		 <view class="redLabel1">
		 	  <text>每月1日系统自动结算收益金额</text>
		 </view> 
		 <view class="detailView">
		 	 <view>
		 	 	  <text class="label1">账户余额</text>
				  <text class="label2">{{data.balance?data.balance:'0.00'}}</text>
		 	 </view> 
			 <view>
			 	  <text class="label1">待结算金额</text>
				  <text class="label2">{{data.frozen?data.frozen:'0.00'}}</text>
			 </view> 
		 </view>  
	 </view>
	 <view class="item_list">
	 	<view class="item" v-for="(item, index) in inComeItemList" :key="index" @tap="tapToMenu(index)">
	 		<view class="item_content">
	 			<image :src="item.itemIcon"></image>
	 			<text>{{ item.itemName }}</text>
	 		</view>
	 		<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
	 	</view>
	 </view>
	 <view v-if="!isPromoter" class="btnView">
		 <view   class="btn" @tap="tapToMenu(3)">
		 	<Text>团长申请</text>
		 </view>
		 <view   class="btn1" @tap="tapToMenu(4)">
		 	<Text>残忍拒绝</text>
		 </view>
	 </view>
  </view>
</template>

<script>
 

export default {
  components: {
 
  },
  data() {
    return {
		data:null,
      memberId: 0,
	  isPromoter:false,
	  inComeItemList: [
	  	{
	  		itemName: '结算记录',
	  		itemIcon: 'http://139.9.103.171:1888/img/image/settlementRecordsIcon.png'
	  	},
	  	{
	  		itemName: '收益记录',
	  		itemIcon: 'http://139.9.103.171:1888/img/image/incomeRecord_icon.png'
	  	}, 
	  	// {
	  	// 	itemName: '我邀请的人',
	  	// 	itemIcon: 'http://139.9.103.171:1888/img/image/inViteRecordIcon.png'
	  	// } 
	  ],
    }
  },
  methods: {
	tapToMenu(idx) { 
			if(idx==0||idx==1||idx==2){
				if(!this.$auth.isPromoter())return;
			}
				switch (idx) { 
					case 0: // 结算记录
						uni.navigateTo({
							url: '/pagesM/pages/balance_records'
						});
						break;
					case 1: // 收益记录
						uni.navigateTo({
							url: '/pagesM/pages/earn_records'
						});
						break;
					case 2: // 我邀请的人
						uni.navigateTo({
							url: '/pagesM/pages/my_invite'
						});
						break;   
					case 3: // 申请推广
						uni.navigateTo({
							url: '/pagesM/pages/applyToPromotion'
						});
						break;   
					case 4: // 拒绝
						uni.navigateBack({
							delta:1
						})
						break;  
					default:
						break;
				}
			},
		onLoadPage() {
		  this.memberId = this.$auth.getMemberId();
		  if(this.$auth.isPromoter()){
			  this.isPromoter = true;
		  }
		  this.getData();
		},
		async getData(){
			let resp = await this.$api.distributionCommission({
				_isShowLoading: true
			})
			this.data = resp
		}
  }
 
}
</script>

<style lang="scss" scoped>
 .container {
	 padding-top: 20rpx;
	 background-color: #F6F4F5;
	 width: 100vw;
	 height: 100vh;
	 font-family: 'PingFang-SC-Bold';
 }
  .topView{
	  margin-left: 20rpx;  
	  border-radius: 20rpx;
	  width: 710rpx;
	  height:540rpx;
	  background-color: #ffffff;
  }
  .moneyLabel{ 
	  padding-top: 99rpx;
	  width: 710rpx; 
	  justify-content: center; 
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	  
	  text{
		  color: #333333; 
		  font-size: 30rpx;
	  }
  }
  .moneyNum{
	  padding-top: 10rpx;
	  width: 710rpx; 
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	  text{
		color: $dt-color-primary; 
		font-size: 72rpx;   
	  }
  }
  .allMoney{
  	  padding-top: -30rpx;
  	  width: 710rpx; 
  		display: flex;
  		flex-direction: row;
  		align-items: center;
  		justify-content: center;
  	  text{
  		color: #333333; 
  		font-size: 24rpx;   
  	  }
  }
  .redLabel1{
  	  padding-top: 15rpx;
  	  width: 710rpx; 
  		display: flex;
  		flex-direction: row;
  		align-items: center;
  		justify-content: center;
  	  text{
  		color: #EA7A7A; 
  		font-size: 24rpx;  
		 background-color:#EEEEEE ;
		 padding-left: 6rpx;
		 padding-right: 6rpx;
		 border-radius: 15rpx;
  	  }
  }
  .detailView{
  	  padding-top: 50rpx;
  	  width: 710rpx; 
  		display: flex;
  		flex-direction: row;
  		align-items: center;
  		justify-content: space-around;
  	  view{  
		  display: flex;
		  flex-direction: column;
		  justify-content: center; 
		  align-items: center;
		text{
			color: #EA7A7A;
			font-size: 24rpx;   
		}
		.label1{
			color: #999999;
			font-size: 24rpx;   
		}
		.label2{
			margin-top: 10rpx;
			color:#333333;
			font-size: 36rpx;
		}
  	  }
  }
  
  .item_list {
  	display: flex;
  	flex-direction: column;
  	background: #fff;
  	margin-top: 20upx;
      margin-left: 20rpx;
  	margin-right: 20rpx;
  	border-radius: 20rpx;
  	.item {
  		display: flex;
  		flex-direction: row;
  		align-items: center;
  		justify-content: space-between;
  		padding: 0 30upx;
  		height: 90upx;
  		border-bottom: 1upx solid #e5e5e5;
  
  		.item_content {
  			display: flex;
  			flex-direction: row;
  			align-items: center;
  
  			image {
  				width: 38upx;
  				height: 38upx;
  			}
  
  			text {
  				font-size: 28upx;
  				color: #333333;
  				margin-left: 20upx;
  			}
  		}
  
  		image {
  			width: 10upx;
  			height: 18upx;
  		}
  	}
  
  	.item:last-child {
  		border: none;
  	}
  }
  .btnView{
	  margin-top: 119rpx;
	  width: 100vw;
	  display: flex;
	  flex-direction: row;  
	  align-items: center;
	  .btn{
		  width: 247rpx;
		  height:88rpx;
		  background-color: $dt-color-primary;
		  border-radius: 15rpx; 
		  padding-top: 5rpx; 
		  margin-left: 79rpx;
		  text-align: center;
		  text{   
			  line-height:88rpx ;
			  color:#ffffff;
			  font-size: 30rpx;
		  }
	  }
	  .btn1{
			  margin-left: 104rpx;
	  		  width: 247rpx;
	  		  height:88rpx;
	  		  background-color: #ffffff;
	  		  border-radius: 15rpx; 
	  		  padding-top: 5rpx;  
			  text-align: center;
	  		  text{ 
			  line-height:88rpx ;
	  			  color:#999999;
	  			  font-size: 30rpx;
	  		  }
	  }
  }
</style>