duantuihe/pages/my/myRecord/index.vue

<template>
	<view class="container">
		<navBar title="我的记录" :back="true" color="#333333" background="#FFFFFF" />
<view class="mainBox">
	 <!-- <u-sticky bgColor="#fff"> -->
	   <u-tabs :current="tabIndex" :list="list1" :scrollable="false" @click="tabclick" lineColor="#007AFF" :activeStyle="activeStyle" :itemStyle="itemStyle" lineWidth="24"></u-tabs>
	  <!-- </u-sticky> -->
	
<view class="list" v-if="tabIndex==0">
	
	<view class="empty" style="margin-top: 50%;" v-if="chargeList.length==0">
		<u-empty
		        mode="data"		
		/>
	</view>
	<view class="item" v-for="(item,index) in chargeList" v-else>
		<!-- <image src="../../../static/other/icon2.png" mode="" class="water"></image> -->
		<view class="top">
			<view class="name">
				{{item.config_data.title}}
			</view>
			<view class="money">
				￥{{item.amount}}
			</view>
		</view>
		<view class="bot">
			<view class="count">
				次数+{{item.diamond}}
			</view>
			<view class="time">
				{{item.created_at}}
			</view>
		</view>
	</view>
</view>



<view class="list" v-else>
	<view class="empty" style="margin-top: 50%;" v-if="cusumerList.length==0">
		<u-empty
		        mode="data"		
		/>
	</view>
	
	<view class="item" v-for="(item,index) in cusumerList" v-else>
		<!-- <image src="../../../static/other/icon2.png" mode="" class="water"></image> -->
		<view class="top">
			<view class="name">
				{{item.nickname}}
			</view>
			<view class="money">
				剩余{{item.surplus_diamond}}
			</view>
		</view>
		<view class="bot">
			<view class="count">
				次数-{{item.plot}}
			</view>
			<view class="time">
				{{item.created_at}}
			</view>
		</view>
	</view>
</view>
</view>
	
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'
	
	import {
		getChargeRecord,
		getConsumerRecord
	} from '@/api/index/index.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				tabIndex:0,
				activeStyle:{
					color:'#007AFF',
					'font-size': '28rpx',
					'font-family': 'PingFang-SC, PingFang-SC',
					'font-weight': 'bold'
				},
				itemStyle:{
					width:'50%',
					// background:'#fff',
					display: 'flex',
					'justify-content': 'center',
					'align-items': 'center',
					height: '80rpx'
				},
list1: [{
                    name: '充值记录',
                }, {
                    name: '消费记录',
                }],
				chargeList:[],
				cusumerList:[]
			}
		},
		onLoad(o) {
if(o.tabIndex){
	this.tabIndex=Number(o.tabIndex)
}

this.getChargeRecord()
this.getConsumerRecord()
		},
		methods: {
			
			async getChargeRecord() {
						let res1 = await getChargeRecord()
						console.log('充值记录返回值--------2', res1);
						if (res1.code == 0) {
							this.chargeList=res1.data.data
							// this.chargeList=[]
						} else {
						this.$toast(res1.message)
						}
					},

async getConsumerRecord() {
						let res1 = await getConsumerRecord()
						console.log('消耗记录返回值--------2', res1);
						if (res1.code == 0) {
							this.cusumerList=res1.data.data
							// this.cusumerList=[]
						} else {
						this.$toast(res1.message)
						}
					},
tabclick(e){
	console.log(e,e.index);
	this.tabIndex=e.index
}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>