jiuyiUniapp/jiuyi2/pages/index/wallet/bill.vue

<script setup>
	// 我的账单
	import {
		onMounted,
		computed,
		reactive,
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	// 
	import api from '@/api/index.js'
	// 工具库
	import util from '@/common/js/util.js'
	// 列表
	const list = reactive({
		pageSize: 10,
		pageNum: 1,
		data: [],
		total: 0,
	})
	// 类型列表
	const typeList = reactive([{
			name: '全部',
			id: 'balance,score,fruit',
		},
		{
			name: '余额',
			id: 'balance',
		},
		{
			name: '积分',
			id: 'score',
		},
		// {
		// 	name: '种子',
		// 	id: 'seed',
		// },
		{
			name: '榴莲果',
			id: 'fruit',
		}
	])
	// 类型索引
	const typeIndex = ref(0)

	onLoad(() => {
		// 获取列表
		getList()
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载当前列表
		refreshList()
	})

	// 重载当前列表
	function refreshList() {
		list.pageNum = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 获取列表
	function getList() {
		api.mine.getWalletBillList({
			query: {
				pageSize: list.pageSize,
				pageNum: list.pageNum,
				type: typeList[typeIndex.value].id,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = 0
				list.data.push(...rs.rows.map(item => {
					// 交易类型
					item.typeName = typeList.find(type => type.id == item.type).name
					return item
				}))
				list.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			// 停止下拉刷新
			uni.stopPullDownRefresh()
		})
	}

	/**
	 * 账单
	 * @param {Object} index
	 */
	function handleTypeIndex(index) {
		if (typeIndex.value === index) return
		typeIndex.value = index
		// 重载当前列表
		refreshList()
	}
</script>

<template>
	<view class="app">
		<view class="typeList df bfff shadow">
			<view class="item f1 fmid fdc" v-for="(item,index) in typeList" :class="{active: index == typeIndex}"
				@click="handleTypeIndex(index)">
				<view class="txt">{{item.name}}</view>
				<view class="line"></view>
			</view>
		</view>

		<view class="ghost"></view>

		<view class="listBox mtb30 mlr30">
			<view class="list oh mtb30 plr30 bfff br20" v-for="(item,index) in list.data" :key="item.id">
				<view class="line ptb20 tac">
					<view class="title mtb30">{{item.reason}}</view>
					<view class="price mtb30 c111">
						<text class="numer b">{{item.amount}}</text>
					</view>
				</view>

				<view class="line f28">
					<view class="df aic mtb20">
						<view class="key w150">明细类型</view>
						<view class="value f1 c999">{{item.typeName}}</view>
					</view>

					<view class="df aic mtb20">
						<view class="key w150">交易时间</view>
						<view class="value f1 c999">{{item.createTime}}</view>
					</view>

					<view class="df aic mtb20" @click.stop="util.copyText(item.transactionId)">
						<view class="key w150">订单流水</view>
						<view class="value f1 thd c999">{{item.transactionId}}</view>
						<image class="copy wh24" src="/static/copy.png" mode="aspectFit" />
					</view>
				</view>

				<view class="line ptb20 rows" v-if="0">
					<view class="key">查看详情</view>
					<uni-icons type="right" />
				</view>
			</view>
		</view>

		<view class="fill"></view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.ghost,
	.typeList {
		height: 100rpx;
	}

	// 类型列表
	.typeList {
		position: fixed;
		top: clac(-window-top + 0);
		left: 0;
		right: 0;
		z-index: 10;

		.item {
			color: #999;
			transition: .3s;

			.line {
				width: 80rpx;
				height: 6rpx;
				margin-top: 5rpx;
				background-color: #333;
				border-radius: 20rpx;
				opacity: 0;
				transition: .3s;
			}

			&.active {
				color: #333;

				.line {
					opacity: 1;
				}
			}
		}
	}

	// 列表盒子
	.listBox {

		// 列表
		.list {

			.line+.line {
				border-top: 2rpx solid #ddd;
			}

			// 
			.price {
				.unit {
					// font-size: 40rpx;
				}

				.numer {
					font-size: 60rpx;
				}
			}
		}
	}
</style>