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

<script setup>
	/**
	 * 我的钱包
	 */
	import {
		onMounted,
		computed,
		reactive,
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		useStore,
	} from 'vuex'
	// api
	import api from "@/api/index.js"
	// 工具库
	import util from '@/common/js/util.js'
	// 代理
	const {
		proxy
	} = getCurrentInstance()
	const store = useStore()
	// 待入帐列表
	const releasedList = ref([])
	// 积分变动记录
	const scrollLog = reactive({
		data: [],
		pageNum: 1,
		pageSize: 30,
		total: 0,
	})
	// 收益明细列表
	const getLog = reactive({
		data: [],
		pageNum: 1,
		pageSize: 30,
		total: 0,
	})
	// 收益类型列表
	const getTypeList = reactive([{
		type: 0,
		name: '待结算',
	}, {
		type: 1,
		name: '待入账',
	}, {
		type: 2,
		name: '已入账',
	}])
	// 收益类型列表索引
	const getTypeListIndex = ref(0)
	// 待释放列表
	const releasedLst = ref([])
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo || {}
		return result
	})
	// 我的钱包
	const wallet = computed(() => {
		let result = store.state.purse || {}
		return result
	})

	onLoad(() => {
		// 获取待释放
		getReleased()
		// 获取收益列表
		getGetList()
		// 获取钱包
		util.getPurse()
	})

	// 重载收益列表
	function refreshMoreGetList() {
		getLog.pageNum = 1
		// 获取收益列表
		getGetList()
	}

	// 获取更多收益列表
	function getMoreGetList() {
		if (getLog.total <= getLog.data.length) return
		getLog.pageNum++
		// 获取收益列表
		getGetList()
	}

	// 获取收益列表
	function getGetList() {
		api.mine.getGetList({
			query: {
				pageSize: getLog.pageSize,
				pageNum: getLog.pageNum,
			},
			data: {
				status: getTypeList[getTypeListIndex.value].type,
			},
		}).then(rs => {
			if (rs.code == 200) {
				if (getLog.pageNum === 1) getLog.data.length = 0
				// 
				getLog.data.push(...rs.rows)
				// 
				getLog.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取待释放
	function getReleased() {
		api.mine.releasedList({}).then(rs => {
			if (rs.code == 200) {
				releasedList.value = rs.data
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 收益类型下标
	 * @param {Object} index
	 */
	function handleGetTypeIndex(index) {
		if (getTypeListIndex.value === index) return
		getTypeListIndex.value = index
		getLog.data.length = 0
		// 重载收益列表
		refreshMoreGetList()
	}

	/**
	 * 跳转
	 * @param {Object} url 路径
	 */
	function link(url) {
		uni.navigateTo({
			url: url
		});
	}
</script>

<template>
	<view class="app plr60">
		<!-- 我的钱包 -->
		<view class="board mt60 ptb25 plr30 c111 f28 br25">
			<view class="">总资产(余额)</view>

			<view class="balance rows">
				<view class="price dib mtb10 ptb10 plr15 c333 f48 bfff br15">
					<text>{{wallet.balance || 0}}</text>
				</view>

				<view class="">
					<navigator url="/pages/index/wallet/topUp" hover-class="none">
						<view class="btn sm bar black plr20">充值</view>
					</navigator>
					<navigator url="/pages/index/wallet/get" hover-class="none">
						<view class="btn sm bar black mt20 plr20">提现</view>
					</navigator>
				</view>
			</view>

			<view class="mtb10">可用积分 {{wallet.score || 0}}</view>
		</view>

		<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" @click="$refs.released.open()">
			<text>待入账列表</text>
			<uni-icons type="right" color="" />
		</view>

		<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" @click="link('/pages/index/wallet/bill')">
			<text>我的账单</text>
			<uni-icons type="right" color="" />
		</view>

		<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10">
			<text>商家明细</text>
			<uni-icons type="right" color="" />
		</view>

		<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" @click="$refs.get.open()">
			<text>我的收益</text>
			<uni-icons type="right" color="" />
		</view>

		<!-- 待释放 -->
		<uni-popup ref="released" type="center">
			<view class="releasedAlt alertContainer oh popMid bfff br20">
				<view class="header rows ptb20 plr20 c333 f34 b">
					<view class="title">待入账列表</view>
					<uni-icons type="closeempty" @click="$refs.released.close()" />
				</view>

				<view class="main mtb20 plr30">
					<scroll-view scroll-y="true" class="scroll">
						<view class="list c333 f30" v-for="(item,index) in releasedList" :key="index">
							<view class="item mtb30">
								<text>待释放{{item.mount}}</text>
								<text v-if="item.type === 0">积分</text>
								<text v-else-if="item.type === 1">榴莲果</text>
								<text v-else-if="item.type === 2">积分</text>
							</view>
						</view>
						<view class="nomore" v-if="releasedList[0]">暂无更多~</view>
						<view class="nomore" v-if="!releasedList[0]">暂无内容~</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<!-- 收益 -->
		<uni-popup ref="get" type="center">
			<view class="getAlt alertContainer oh popMid bfff br20">
				<view class="header rows ptb20 plr20 c333 f34 b">
					<view class="title">我的收益</view>
					<uni-icons type="closeempty" @click="$refs.get.close()" />
				</view>

				<view class="tab">
					<view class="item fmid fdc ptb10" :class="{'active':index === getTypeListIndex}"
						v-for="(item,index) in getTypeList" :key="index" @click="handleGetTypeIndex(index)">
						<view>{{item.name}}</view>
					</view>
				</view>

				<view class="main mtb20 plr30">
					<scroll-view scroll-y="true" class="scroll" @scrolltolower="getMoreGetList">
						<view class="list c333 f30">
							<view class="item mtb30 f32" v-for="(item,index) in getLog.data" :key="index">
								<view>{{item.typeName}}{{item.amount}}</view>
								<view class="time mt10 c999 f28 ">{{item.createTime}}</view>
							</view>
						</view>
						<view class="nomore" v-if="!getLog.data[0]">暂无内容~</view>
						<view class="nomore" v-else-if="getLog.data.length === getLog.total">暂无更多~</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	// 板子
	.board {
		background-image: linear-gradient(130deg, rgb(233, 170, 80) 0%, rgb(249, 217, 89) 50%, rgb(233, 170, 80) 100%);
	}

	// 待释放弹窗
	.alertContainer {
		.header {
			border-bottom: 2rpx solid #ddd;
		}

		// tab
		.tab {
			display: flex;

			// 单项
			.item {
				flex: 1;
				color: #999;

				&.active {
					font-weight: 600;
					color: #333;
				}
			}
		}

		.scroll {
			height: 50vh;
		}
	}
</style>