工作台

pages/account/logs.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="content">
+		<u-sticky bgColor="#f8f8f8">
+			<u-tabs
+				:current="current"
+				:list="tabs"
+				:scrollable="false"
+				lineColor="#446EFE"
+				@click="onTabs"
+			></u-tabs>
+		</u-sticky>
+		<!-- 账户记录 -->
+		<view class="logs" v-if="list.length > 0">
+			<view class="log-item" v-for="(item, index) in list" :key="index">
+				<view class="log-flex">
+					<view class="title nowrap">{{item.rule.title}}{{item.rule.remark}}</view>
+					<view class="price">{{item.amount}}</view>
+				</view>
+				<view class="log-flex">
+					<view class="time">{{item.created_at}}</view>
+					<view class="state">{{item.frozen.text}}</view>
+				</view>
+			</view>
+			<u-loadmore v-if="pagesShow" :status="status" />
+		</view>
+		<view v-else class="list-null">
+			<u-empty
+				mode="history"
+				icon="http://cdn.uviewui.com/uview/empty/history.png"
+				text="暂无相关账户记录"
+			>
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { log } from '@/apis/interfaces/account.js'
+	export default {
+		data() {
+			return {
+				tabs		: [
+					{ val: 'out', name: '消费记录' },
+					{ val: 'in', name: '充值记录' }
+				],
+				current		: 0,
+				list		: [],
+				page		: {
+					current	: 1,
+					has_more: false,
+				},
+				pagesShow	: false,
+				status  	: ''
+			};
+		},
+		created() {
+			this.current = this.$Route.query.type
+			this.getLog()
+		},
+		methods: {
+			onTabs(e){
+				if(this.current === e.index) return
+				this.current = e.index
+				this.page.current = 1
+				this.getLog()
+			},
+			// 获取列表
+			getLog(){
+				log({
+					type: this.tabs[this.current].val,
+					page: this.page.current
+				}).then(res => {
+					let { logs } = res;
+					let atList   = logs.page.current == 1 ? [] : this.list
+					this.list = atList.concat(logs.data)
+					this.page = logs.page
+					this.pagesShow = false
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			}
+		},
+		onReachBottom() {
+			this.pagesShow = true;
+			if(this.page.has_more){
+				this.status    = 'loading';
+				this.page.current++
+				this.getLog()
+				return
+			}
+			this.status    = 'nomore';
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 记录空
+	.list-null{
+		height: 80vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	// 记录
+	.logs{
+		padding: 30rpx;
+		box-sizing: border-box;
+		.log-item{
+			background: white;
+			padding: 30rpx;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+			.log-flex{
+				padding: 5rpx 0;
+				display: flex;
+				justify-content: space-between;
+				line-height: 40rpx;
+				align-items: center;
+				.title{
+					font-weight: bold;
+					font-size: 32rpx;
+					width: calc(100% - 200rpx);
+				}
+				.price{
+					font-size: 32rpx;
+					width: 200rpx;
+					text-align: right;
+					font-weight: bold;
+					color: $main-color;
+				}
+				.time{
+					font-size: 28rpx;
+					color: gray;
+				}
+				.state{
+					font-size: 28rpx;
+				}
+			}
+		}
+	}
+</style>