web-zk-h5/components/bonus/sbydsy.vue

<template>
  <view class="main">
	  <view v-if="userInfo.pkCountry!=1" class="top">
		  <view class="search-bottom">
			<view class="time-text">{{'查询时间'}}</view>
			<view class="time1">
				<picker :value="query.startDate" mode="date" @change="bindDateChange">
					<view v-if="query.startDate!=''" class="uni-input">{{query.startDate}}</view>
					<view v-else class="uni-input">{{'开始日期'}}</view>
				</picker>
			</view>
			<view class="text_s">{{'至'}}</view>
			<view class="time1">
				<picker :value="query.endDate" mode="date" @change="bindDateChange1">
					<view v-if="query.endDate!=''" class="uni-input">{{query.endDate}}</view>
					<view v-else class="uni-input">{{'结束日期'}}</view>
				</picker>
			</view>
			<view class="search-icons" @click="submit">
				<image class="search-icon-s" src="../../static/images/search.png"></image>
			</view>
		  </view>
		  
	  </view>
	  <view class="search-content">
		  <view class="search-list">
			<view v-for="item in dataList" class="search-view">
				<view class="flex_s">
					<view class="data-left">
						{{'奖金日期'}}
					</view>
					<view class="data-right">
						{{item.settleDate}}
					</view>
				</view>
				<view class="flex_s">
					<view class="data-left">
						{{'圣宝云代直推收益'}}(¥)
					</view>
					<view class="data-right">
						{{item.cloudDirectIncome | numberToCurrency}}
					</view>
				</view>
				<view class="flex_s">
					<view class="data-left">
						{{'圣宝云代首购收益'}}(¥)
					</view>
					<view class="data-right">
						{{item.cloudRepurIncome | numberToCurrency}}
					</view>
				</view>
				<view class="flex_s">
					<view class="data-left">
						{{'平台服务费'}}(¥)
					</view>
					<view class="data-right">
						{{item.serviceSpend | numberToCurrency}}
					</view>
				</view>
				<view class="flex_s">
					<view class="data-left">
						{{'实发小计'}}(¥)
					</view>
					<view class="data-right">
						{{item.cloudRealSubtotal | numberToCurrency}}
					</view>
				</view>
				<view class="border_s">
					<view class="button"  v-if="checkRule==true" @click="urlTap">
						{{'查看详情'}}
					</view>
				</view>
				<view style="clear: both;"></view>
				<view style="height: 20rpx;background-color: #fff;"></view>
			</view>
		  </view>
	  </view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
		getBonusTypeList:[],
		index:null,
		dataList:[],
		userInfo:[],
		query:{
			startDate:'',
			endDate:'',
			sourceMemberCode:'',
			sourceMemberName:'',
			pkBonusItems: ''
		},
		page:{
			pageNum:1,
			pageSize:50
		}
    }
  },
    props:["num","checkRule"],
  onLoad() {

  },
  created() {
  // this.getType()
   this.userInfo = uni.getStorageSync('User')
  this.getDataList()
  },
  methods: {
	  urlTap() {
	      uni.navigateTo({ url: '/pages/bonusSource/index' })
	    },
	  	getInfo(){
	  		 api.getInfo().then(res => {
	  				if (res) {
	  				 this.userInfo = res.data
	  				}
	  			  }).catch(error => {
	  				reject(error)
	  			  })  
	  		},
	  submit() {
		this.getDataList()  
	  },
	  getType(){
		 api.getBonusType().then(res => {
		        if (res) {
		         this.getBonusTypeList = res.rows
		        }
		      }).catch(error => {
		        reject(error)
		      })  
	  },
	  bindPickerChange(e) {
		  this.index = e.detail.value
	  },
	  bindDateChange(e) {
		 this.query.startDate = e.detail.value
	  },
	  bindDateChange1(e) {
	     this.query.endDate = e.detail.value
	  },
	  getDataList(num) {
		api.queryBonusCloud(this.query,`?pageNum=${num||1}&pageSize=${this.page.pageSize}`).then(res => {
		       if (res) {
		        this.dataList.push(...res.rows)
		       }
		     }).catch(error => {
		       reject(error)
		     })    
	  },
	  submit() {
		  
	  },
  },
}
</script>
<style>
	.border_s{
		border-bottom: 1rpx solid #eee;
		height: 10rpx;
	}
	.button{
		padding: 0 30rpx;
		/* width: 150rpx; */
		height: 52rpx;
		line-height: 52rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		background: #005BAC;
		margin: 30rpx 0 0 0;
		float: right;
		border-radius: 24rpx;
	}
	.type{
		color: #005BAC !important;
	}
	.flex_s{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-bottom: 15rpx;
	}
	.data-left{
		color: #999;
		font-size: 26rpx;
	}
	.data-right{
		color: #333;
		font-size: 26rpx;
	}
	.search-view{
	/* display: flex; */
		/* justify-content: space-between; */
		padding: 30rpx 20rpx 0 20rpx;
		border-bottom: 20rpx solid #eee;
		/* border-bottom: 1px solid #eee; */
		margin:0 ;
	}
	.search-list{
		margin-bottom: 25rpx;
		background-color: #fff;
	}
	.search-content{
		margin-top: 25rpx;
	}
	.text_s{
		color: #333;
		font-size: 26rpx;
	}
	.search-icon-s{
		width: 22rpx;
		height: 22rpx;
	}
	.search-icons{
		width: 47rpx;
		height: 47rpx;
		background: #005BAC;
		border-radius: 50%;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 20rpx 0 0;
	}
	.time1{
		width: 158rpx;
		height: 75rpx;
		border-bottom: 1rpx solid #eee;
		margin: 0 50rpx 30rpx  50rpx;
		color: #999;
		text-align: center;
		font-size: 24rpx;
		/* margin-bottom: 30rpx; */
	}
	.time-text{
		color: #999;
		font-size: 26rpx;
	}
	.search-bottom{
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		margin-left: 20rpx;
	}
	.texts{
		color: #333;
		font-size: 26rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* width:200rpx; */
		text-align: right;
	}
	.select-text{
		display: flex;
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #333;
		position: relative;
	}
	.selIcon{
		width: 20rpx;
		height: 20rpx;
		margin-top: 10rpx;
		margin-left: 5rpx;
	}
	.text-s{
		font-size: 26rpx;
		color: #999;
		margin-right: 10rpx;
	}
	.place{
		font-size: 26rpx;
		color: #999;
	}
	.border-colors{
		border: none;
		font-size: 26rpx;
		color: #333;
		margin-left:30rpx;
	}
	page{
		background-color: #f2f2f2;
	}
	.search-icon{
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		left: 30rpx;
		top: 12rpx;
		image{
			
		}
	}
	.search-bg{
	
	}
	.top{
		/* height: 200rpx; */
		background-color: #fff;
		padding: 20rpx 0 20rpx 0;
	}
	.search-tops{
		display: flex;
		justify-content: space-between;
		height: 65rpx;
		line-height: 65rpx;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #eee;
	}
	.search-bg{
		width: 432rpx;
		height:35rpx;
		background: #F5F6F8;
		border-radius: 33rpx;
		display: flex;
		position: relative;
		padding: 20rpx 50rpx;
		margin-left: 20rpx;
	}
</style>