woqi-fencheng-h5/pages/index.vue

<template>
	<view>
		<view class="top">

			<view class="tab">
				<view :class="currentTab==0 ? 'active-tab':'tab-item'" @click="changeTab(0)">
					当天收益
				</view>
				<view :class="currentTab==1 ? 'active-tab':'tab-item'" @click="changeTab(1)">
					当月收益
				</view>
			</view>
			<view class="update-time">
				<image src="../static/upload.png" mode=""></image>
				<text class="">更新于: {{ currentIncome.time}}</text>
			</view>

			<view class="area">{{area_name}}</view>
			<view class="" v-if="currentTab==0">

				<view class="top_top">
					<view class="left">
						<view class="text">今日总收益</view>
						<view class="money1">
							<text style="font-size:30upx;margin-right:5upx">￥</text><text
								style="font-size: 50upx;">{{currentIncome.order_money}}</text>
						</view>
					</view>
				</view>
				<view class="top-bt">

					<view class="right">
						<view class="text">订单笔数</view>
						<view class="money">
							<text>{{currentIncome.order_nums}}</text><text
								style="font-size:24upx;margin-left:5upx">笔</text>
						</view>
					</view>
					<view class="right">
						<view class="text">退款金额</view>
						<view class="money">
							<text
								style="font-size:30upx;margin-right:5upx">￥</text><text>{{currentIncome.refund_money}}</text>
						</view>
					</view>
					<view class="right">
						<view class="text">退款笔数</view>
						<view class="money">
							<text>{{currentIncome.refund_nums}}</text><text
								style="font-size:24upx;margin-left:5upx">笔</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="currentTab==1">
				<view class="top_top">
					<view class="left">
						<view class="text">本月总收入</view>
						<view class="money1">
							<text style="font-size:30upx;margin-right:5upx">￥</text><text
								style="font-size: 50upx;">{{currentIncome.total_money}}</text>
						</view>
					</view>
				</view>
				<view class="top-bt">
					<view class="left">
						<view class="text">本月订单收益</view>
						<view class="money">
							<text style="font-size:24upx;">￥</text><text>{{currentIncome.money}}</text>
						</view>
					</view>
					<view class="right">
						<view class="text">本月订单退款</view>
						<view class="money">
							<text
								style="font-size:30upx;margin-right:5upx">￥</text><text>{{currentIncome.refund_money}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- <view class="select">
				<picker mode="selector" :value="index" @change="bindDateChange" :range="time">
					<view class="picker">
						{{time[index]}}
					</view>
					<image src="../static/down-arrow.png" class="selectDate"></image>
				</picker>
			</view> -->
			<view v-for="(item,index) in incomeList" :key="index" @click="item.money!='0.00' ? bikeDayIncome(item):''"
				v-if="incomeList!=''">
				<view class="day">{{item.day}}</view>
				<view class="list-out">
					<view class="list">
						<view class="list-left">
							<view>
								<view class="totle-money">

									￥{{item.money}}
								</view>

							</view>
						</view>

						<view class="list-right">
							<view class="tip-money">{{item.nums}}笔</view>

							<image class="image" src="../static/jiantou.png"></image>
						</view>
					</view>
					<view class="list-bt">
						<view class="tip-money">
							<view class="money-text">
								总收入：￥{{item.total_money}}，退款：￥{{item.refund_money}}
							</view>
							<view class="money-text">
								充值金额：￥{{item.recharge_money}}，充值人数：{{item.recharge_nums}}人
							</view>
							<view class="money-text">
								骑行卡金额：￥{{item.ride_card_money}}，骑行卡数量：{{item.ride_card_nums}}张
							</view>
						</view>
					

					</view>

				</view>
			</view>
			<view v-if="incomeList==''" class="none" style="height:260upx;">
				<!-- <image src="/image/none.png" style="width:128upx;height:128upx;"></image> -->
				<text style="font-size:26upx;">当前暂无收益</text>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				index: 0,
				type: 0, //日期类型0近30天 1近3个月 2近1年
				time: ['近30天', '近15周', '近12个月'],
				tab: ['按月查看', '按天查看'],
				incomeList: [], //收益列表
				profit: [],
				currentIncome: '',
				page: 1,
				currentTab: 0,
				area_name: uni.getStorageSync('area_name')
			}
		},
		onLoad() {
			this.incomeLists()
			this.dayIncomeList()
		},
		onReachBottom: function() {
			if (!this.links) {
				uni.showToast({
					title: '暂无数据',
					icon: 'none'
				})
				return;
			} else {
				let page = this.page
				page++
				this.page = page
				this.incomeLists()
			}
		},
		methods: {
			bindDateChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.incomeList = []
				this.incomeLists()
			},
			//切换按天查看或者按月查看
			changeTab(e) {
				this.currentTab = e
				if (e == 0) {
					this.dayIncomeList()
				} else {
					this.getCurrent()
				}
			},
			dayIncomeList: function() {
				app.request('/day', '', 'get').then(res => {
					console.log(res, '--------------')
					this.currentIncome = res.data.data
				})
			},
			incomeLists: function() {
				uni.showLoading()
				var that = this
				let date = {
					type: that.index,
					page: that.page
				}
				app.request('/earnings', date, 'GET').then(res => {
					uni.hideLoading()
					let arr = res.data.data.data
					this.incomeList = that.incomeList.concat(arr),
						this.links = res.data.data.meta.pagination.links.next
					console.log(res, "收益列表")
				})
			},
			getCurrent() {
				app.request('/earnings-statistics', '', 'get').then(res => {
					console.log(res, '--------------')
					this.currentIncome = res.data.data
					let date = new Date()
					let year = date.getFullYear(); //获取完整的年份(4位)
					let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
					month = month >= 10 ? month : '0' + month
					let day = date.getDate(); //获取当前日(1-31)
					day = day >= 10 ? day : '0' + day
					let time = year + '-' + month + '-' + day
					this.currentIncome.time = time
				})
			},
			//跳转收入页面
			bikeDayIncome(e) {
				console.log(e, 'ppppppppp')
				let data = e
				uni.navigateTo({
					url: './dayIncome?day=' + data.day
				})
			},
		}
	}
</script>

<style>
	/* pages/mineIncome/mineIncome.wxss */
	page {
		background-color: rgba(238, 238, 238, 1);
	}

	.area {
		color: #ffffff;
		font-size: 30upx;
		margin-bottom: 36upx;
	}

	.top {
		background: linear-gradient(52deg, #FF5B50 0%, #FF7D45 100%);
		padding: 0upx 0 37upx 0;
		text-align: center;
	}

	.tab {
		display: flex;
		height: 80upx;
		padding: 0 20upx;
		font-size: 30upx;
		line-height: 80upx;
		text-align: left;
		color: #FFFFFF;
		background-color: rgba(255, 231, 231, 0.3);
		/* opacity: 0.8; */
	}

	.tab-item,
	.active-tab {
		flex: 1;
		margin: 0 70upx;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
	}

	.active-tab {
		color: #FFFFFF;
		font-size: 34upx;
		font-weight: 500;
		border-bottom: solid 3upx #FFFFFF;
	}

	.update-time {
		text-align: left;
		height: 70upx;
		padding: 0 20upx;
		font-size: 26upx;
		line-height: 70upx;

		color: #FFFFFF;

		/* background-color: rgba(255, 231, 231, 0.3); */
	}

	.select-tab {
		height: 50upx;
		width: 50upx;
		display: inline-block;
		vertical-align: middle;
	}

	.update-time image {
		height: 26upx;
		width: 26upx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10upx;
	}

	.top_top {
		display: flex;
		align-items: center;
		margin-bottom: 60upx;
	}

	.text {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.8;
	}

	.money1 {
		margin-top: 15upx;
		font-size: 40upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.money {

		margin-top: 15upx;
		font-size: 40upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

	}

	.money image {
		display: inline-block;
		vertical-align: middle;
		height: 30upx;
		width: 30upx;
		margin-left: 15upx;
	}

	.money1 image {
		display: inline-block;
		vertical-align: middle;
		height: 30upx;
		width: 30upx;
		margin-left: 15upx;
	}

	.left {
		flex: 1;
	}

	.top-bt {
		display: flex;
	}

	.top-bt .left {
		flex: 1;
		border-right: solid 1upx rgba(238, 238, 238, 1);
	}

	.right {
		flex: 1;
	}

	.select {
		margin-top: 20upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #202020;
	}

	.content {
		padding: 30upx;
	}

	.day {
		padding-left: 28upx;
		margin-top: 40upx;
		font-size: 24upx;
		color: #747474;
		margin-bottom: 20upx;
	}

	.list-out {
		background-color: #ffffff;
		border-radius: 10upx;
		padding: 20upx 20upx;
	}

	.list {
		display: flex;
		align-items: center;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #202020;
		justify-content: space-between;
		padding-bottom: 15upx;
		border-bottom: solid 0.5upx #e8e8e8;
	}



	.list-left {
		display: flex;
		width: 90%;
	}

	.totle-money {
		font-size: 44upx;
	}

	.list-left {
		flex: 1;
		width: 80%;
	}

	.tip-money {
		flex: 1;
		color: #b3b3b3;
		/* text-align: center; */
		font-size: 24upx;
		margin: 20upx 0;

	}

	.money-text {
		margin-bottom: 15upx;
	}

	.list-right {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image {
		height: 30upx;
		width: 30upx;
	}

	.list-right .tip-money {
		display: inline-block;
		/* margin-top: -3upx; */
		vertical-align: top;
	}

	.none {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 150upx;
		height: 500upx;
		justify-content: space-around;
	}

	.none view {
		width: 533upx;
		height: 76upx;
		background: #FC512E;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.picker {
		display: inline-block;
		vertical-align: middle;
	}

	.selectDate {
		margin-left: 25upx;
		display: inline-block;
		vertical-align: middle;
		height: 30upx;
		width: 30upx;
	}
</style>