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
					:style="{'background-image':`url(${picBase+'mjl_c_bg.png'})`}">
					<!-- <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
					:style="{'background-image':`url(${picBase+'mjl_c_bg.png'})`}">
					<!-- <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 {
				picBase: this.$picBase2,

				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 = [1, 1]
				} 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 = [1, 1]
				} 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>