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 scrollLog = reactive({
		data: [],
		pageNum: 1,
		pageSize: 30,
		total: 0,
	})
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo || {}
		return result
	})
	// 我的钱包
	const wallet = computed(() => {
		let result = store.state.purse || {}
		return result
	})
	// 待释放
	const releasedList = ref([])

	onLoad(() => {
		// 获取待释放
		getReleased()
		// 获取钱包
		util.getPurse()
	})

	// 获取待释放
	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} 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" @click="link('/pages/index/wallet/merchantBill')">
			<text>商家账单</text>
			<uni-icons type="right" color="" />
		</view>

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

		<!-- 待释放 -->
		<uni-popup ref="released" type="center">
			<view class="releasedAlt 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>
					</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%);
	}

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

		.scroll {
			height: 50vh;
		}
	}

	// 入驻
	.setted {
		width: 562rpx;
		height: 516rpx;
		background-image: linear-gradient(143deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		border-radius: 20rpx;

		// 标题
		.title {
			top: 80rpx;
			left: 30rpx;
		}

		// 卡通
		.cartoon {
			top: 20rpx;
			right: -50rpx;
			width: 280rpx;
			height: 400rpx;
		}

		// 福利
		.weal {
			width: 562rpx;
			height: 268rpx;

			// 背景
			.bg {
				border-radius: 20rpx;
			}
		}
	}

	// 立即入驻
	.button {
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .3);
	}

	// 关闭
	.close {
		width: 86rpx;
		height: 86rpx;
		margin: 0 auto;
		border-radius: 50%;
		background-color: #999999;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
	}
</style>