web-base-h5/pages/bonus/index.vue

<template>
	<view class="main">
		<scroll-view class="left_scrol_style" scroll-x="false" scroll-y="true">
			<view class="top-lists" v-if="navList.length > 0">
				<view v-for="(item, index) in navList" v-show="item.menuKey!=''" :key="index"
					:class="navIndex == item.path ? 'styles' : ''" class="nav-view" @click="clickHref(item.path)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<view class="sum-val">
			<view v-if="monthIncomeTotal" >本月合计: <span>{{monthIncomeTotal | toThousandthAndKeepDecimal}}</span></view>
			<view>昨日合计: <span>{{toSum | toThousandthAndKeepDecimal}}</span></view>
		</view>
		<template>
			<sgsy v-if="navIndex==0" ref="sgsyData" :checkRule="marketList[0].isShow" :num="page.pageNum" />
			<fgsy v-if="navIndex==1" ref="sgsyData" :checkRule="marketList[0].isShow" />
			<hignfsy v-if="navIndex==2" ref="sgsyData" :checkRule="marketList[0].isShow" />
			<hfsy v-if="navIndex==3" ref="sgsyData" :checkRule="marketList[0].isShow" />
			<sbydsy v-if="navIndex==4" ref="sgsyData" :checkRule="marketList[0].isShow" />
			<fgqsy v-if="navIndex==5" ref="sgsyData" :checkRule="marketList[0].isShow" />
			<ckkj v-if="navIndex==6" ref="sgsyData" :checkRule="marketList[0].isShow" />
		</template>
	</view>
</template>

<script>
	import * as api from '@/config/login.js'
	import * as apis from '@/config/market.js'
	import * as api1 from '@/config/bonus.js'
	import {
		setToken
	} from '@/config/auth.js'
	import store from '@/store'
	import sgsy from '@/components/bonus/sgsy.vue'
	import fgsy from '@/components/bonus/fgsy.vue'
	import hignfsy from '@/components/bonus/hignfsy.vue'
	import hfsy from '@/components/bonus/hfsy.vue'
	import sbydsy from '@/components/bonus/sbydsy.vue'
	import fgqsy from '@/components/bonus/fgqsy.vue'
	import ckkj from '@/components/bonus/ckkj.vue'
	export default {
		data() {
			return {
				toSum: 0,
				index: null,
				userInfo: [],
				marketList: [{
					text: '奖金来源',
					id: 3,
					path: "/marketDynamics",
					name: 'bonusSource',
					isShow: false,
				}, ],
				navList: [{
						name: '首购收益',
						path: 0,
						value: "firstPurchase",
						menuKey: ''
					},
					{
						name: '复购收益',
						path: 1,
						value: "repurchaseEarnings",
						menuKey: ''
					},
					{
						name: '海粉收益',
						path: 2,
						value: "hignFans",
						menuKey: ''
					},
					{
						name: '海粉收益',
						path: 3,
						value: "seaFans",
						menuKey: ''
					},
					// { name: '圣宝云代收益',path:4,value:"sbyd",menuKey:''},
					{
						name: '复购券收益',
						path: 5,
						value: "repurchaseTicket",
						menuKey: ''
					},
					// {
					// 	name: '创客空间收益',
					// 	path: 6,
					// 	value: "markerSpaceEarnings",
					// 	menuKey: ''
					// },
				],
				navIndex: 0,
				page: {
					pageSize: 50,
					pageNum: 1,
				},
				monthIncomeTotal: 0,
			}
		},
		components: {
			sgsy,
			fgsy,
			hignfsy,
			hfsy,
			sbydsy,
			fgqsy,
			ckkj
		},
		onLoad() {
			this.getMenuLists()
			this.getSum()
		},
		methods: {
			getSum() {
				api1.queryBonusTotal({}).then((res) => {
					console.log(res, '....res====aa')
					this.toSum = res.rows[0].realIncomeTotal
					this.monthIncomeTotal = res.rows[0].monthIncomeTotal
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			clickHref(index) {
				let that = this;
				this.navIndex = index
				this.page.pageNum = 1
			},
			getMenuLists() {
				api.menuList().then((res) => {
					console.log(res, '....resmenu')
					res.data.forEach((item) => {
						this.navList.forEach((items) => {
							if (item.menuKey == items.value) {
								items.menuKey = item.menuKey
							}
						})
						if (this.marketList[0].name == item.menuKey) {
							this.marketList[0].isShow = true
						}
					})
				})
			},
			// async onReachBottom() {
			// 	this.page.pageNum+1
			// 	this.$refs.sgsyData.getDataList(this.page.pageNum+=1);
			// },
		},
	}
</script>
<style lang="scss">
	.sum-val {
		background-color: #fff;
		// height: 100rpx;
		line-height: 60rpx;
		text-align: right;
		margin-top: 10rpx;
		padding-right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		span {
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 10rpx;
		}
	}

	/*左侧分类视图*/
	.left_scrol_style {
		white-space: nowrap;
		width: 100%;
		background: #fff;
	}

	.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: 30rpx;
		height: 30rpx;
		margin: 5rpx 0 0 20rpx;
	}

	page {
		background-color: #f2f2f2;
	}

	.styles {
		border: none !important;
		color: #fff !important;
		background: #005BAC;
	}

	.top-lists {
		width: fit-content;
		display: flex;
		padding: 30rpx 30rpx 0 0;
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;

		.nav-view {
			width: 200rpx;
			cursor: pointer;
			padding: 0 26rpx;
			height: 44rpx;
			border-radius: 10rpx;
			border: 1rpx solid #999999;
			font-size: 14rpx;
			text-align: center;
			line-height: 44rpx;
			margin-left: 20rpx;
			color: #999;
		}
	}
</style>