recruitment-wechat-uniapp-241012/pages_order/mine/IntegralRecord.vue

<template>
	<!-- 积分记录 -->
	<view class="IntegralRecord">
		<navbar :title="title" leftClick @leftClick="leftClick" />
		
		<view class="const">
			<view class="number">
				当前积分
				<view>
					0
				</view>
			</view>
			<view class="bottom">
				<view>
					正式积分：0
				</view>
				<view>
					临时积分：0
				</view>
			</view>
		</view>
		
		<view class="">
			<uv-tabs :list="tabs"
			lineColor="#3796F8"
			lineHeight="8rpx"
			lineWidth="50rpx"
			@click="clickTabs"></uv-tabs>
		</view>
		
		<view class="tab-box">
			<view class="tab-box1" v-if="agentFlow && agentFlow.total">
				<uv-cell center border :title="item.title"
				v-for="(item, index) in agentFlow.records"
				:value="x[item.type] + item.money" :label="item.createTime" />
			</view>
			<view 
			style="padding: 100rpx 0;"
			v-else>
				<uv-empty 
				mode="history"
				textSize="28rpx"
				iconSize="100rpx"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title : '积分记录',
				agentFlow : {
					total : 0,
					records : [
						{
							type : 0,
							money : 100,
							createTime : '2024-04-02 20:00',
							title : "佣金提现",
						},
						{
							type : 0,
							money : 100,
							createTime : '2024-04-02 20:00',
							title : "佣金提现",
						},
						{
							type : 0,
							money : 100,
							createTime : '2024-04-02 20:00',
							title : "佣金提现",
						},
					]
				},
				x : ['+', '-' , '-' , '+'],
				status : 0,
				tabs: [
					{
						name: '收入'
					},
					{
						name: '消耗'
					},
				],
				type : 0,
			}
		},
		onLoad(e) {
			this.status = e.status
		},
		methods: {
			leftClick() {		//返回钱包
				uni.navigateBack(-1)
			},
			getAgentFlow(){		//获取流水记录
				let type = this.status;
				this.$api('getAgentFlow', { type }, res => {
					if(res.code == 200){
						this.agentFlow = res.result
					}
				})
			},
			clickTabs({index}) {
				this.type = index
			},
		}
	}
</script>

<style lang="scss" scoped>
.IntegralRecord{
	width: 750rpx;
	background: #fff;
	margin: 0 auto;
	min-height: 100vh;
	.const{
		display: flex;
		flex-direction: column;
		margin: 40rpx 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;
		border-radius: 20rpx;
		overflow: hidden;
		.number{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx;
			background-color: $uni-color;
			color: #fff;
			view{
				font-size: 40rpx;
				font-weight: 900;
			}
		}
		.bottom{
			color: $uni-color;
			display: flex;
			view{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
			}
			view:nth-child(1){
				border-right: 1rpx solid $uni-color;
			}
		}
	}
	.tab-box{
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}
}
</style>