web-store-retail-h5/components/bonus/sgsy.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 style="height: 20rpx;"></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">
							{{'直推收益'}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.directIncome| toThousandthAndKeepDecimal }}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{'拓展收益'}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.expandIncome| toThousandthAndKeepDecimal}}
						</view>
					</view>
					<view class="flex_s">
					<view class="data-left">
						{{'辅导收益'}}({{ isLocaled() }})
					</view>
					<view class="data-right">
						{{item.coachIncome | toThousandthAndKeepDecimal}}
					</view>
				</view>
				<!-- <view class="flex_s">
					<view class="data-left">
						{{'分红收益'}}({{ isLocaled() }})
					</view>
					<view class="data-right">
						{{item.shareIncome| toThousandthAndKeepDecimal}}
					</view>
				</view> -->
					<view class="flex_s" v-if="userInfo.pkCountry==1">
						<view class="data-left">
							{{'服务补贴'}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.serviceIncome| toThousandthAndKeepDecimal}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							级差收益({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.repurRangeIncome| toThousandthAndKeepDecimal}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{$t('直推级差')}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.globalPoints| toThousandthAndKeepDecimal}}
						</view>
					</view>
					<view class="flex_s" v-if="userInfo.pkCountry==1">
						<view class="data-left">
							{{'重复消费'}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.backPoints| toThousandthAndKeepDecimal}}
						</view>
					</view>
					<view class="flex_s" v-if="userInfo.pkCountry==1">
						<view class="data-left">
							{{'平台服务费'}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.serviceSpend| toThousandthAndKeepDecimal}}
						</view>
					</view>
					<view class="flex_s">
						<view class="data-left">
							{{'实发小计'}}({{ isLocaled() }})
						</view>
						<view class="data-right">
							{{item.purRealSubtotal| toThousandthAndKeepDecimal}}
						</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'
	import {
		isLocaled
	} from '@/util/numberToCurrency'

	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: {
			isLocaled,
			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.queryBonusFirst(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>