mall-front-app/pages/user/wallet/scoreToMoney.vue

<!-- 我的佣金 -->
<template>
	<s-layout class="wallet-wrap" :bgStyle="{'backgroundColor':'#ffffff'}" title="佣金兑换" navbar="normal">
		<view class="score-box bg-white ss-flex-col ss-row-center ">
			<view >
				<view class="all-title ss-m-r-8 " style="border: 4rpx solid var(--ui-BG-Main);
    width: 100%;
    box-sizing: border-box;
    height: 120rpx;text-indent: 20rpx;border-radius: 20rpx;line-height: 120rpx;">到数字人民币钱包：钱包地址/未绑定----></view>
			</view>

			<view class="ss-m-y-80 ">
				<view class="all-title ss-m-r-8 ss-m-b-10">提现金额</view>
				<view class="all-title ss-m-r-8 ss-m-y-30">
					<input class="uni-input " style="border: 4rpx solid var(--ui-BG-Main);
    width: 100%;
    box-sizing: border-box;
    height: 100rpx;text-indent: 20rpx;border-radius: 20rpx;" type="number" placeholder="请输入金额" />
				</view>
				<view class="all-title ss-m-r-8 ss-m-b-10 text-center">您当前可兑换金额:￥0</view>
			</view>
			<view class="ss-m-b-40 ss-flex ss-row-center">
				<view class="all-title ss-m-r-80" @tap="sheep.$router.back('/pages/user/wallet/score')">
					<button class="btn ss-reset-button ui-Shadow-Main">
						取消
					</button>
				</view>
				<view class="all-title ss-m-r-8">
					<button class="btn ss-reset-button ui-Shadow-Main">
						确定
					</button>
				</view>

			</view>

		</view>

	</s-layout>

</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import _ from 'lodash';
	import dayjs from 'dayjs';
	import PointApi from '@/sheep/api/member/point';
	import {
		resetPagination
	} from '@/sheep/util';

	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const sys_navBar = sheep.$platform.navbar;

	const state = reactive({
		currentTab: 0,
		pagination: {
			list: 0,
			total: 0,
			pageSize: 6,
			pageNo: 1,
		},
		loadStatus: '',
		date: [],
		today: '',
		showModel: false,
		showQueModel: false
	});
	const close = () => {
		state.showModel = false
		state.showQueModel = false
	}
	const tabMaps = [{
			name: '全部',
			value: 'all',
		},
		{
			name: '收入',
			value: 'true',
		},
		{
			name: '支出',
			value: 'false',
		},
	];

	const dateFilterText = computed(() => {
		if (state.date[0] === state.date[1]) {
			return state.date[0];
		} else {
			return state.date.join('~');
		}
	});

	async function getLogList() {
		state.loadStatus = 'loading';
		let {
			code,
			data
		} = await PointApi.getPointRecordPage({
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
			addStatus: state.currentTab > 0 ? tabMaps[state.currentTab].value : undefined,
			'createTime[0]': state.date[0] + ' 00:00:00',
			'createTime[1]': state.date[1] + ' 23:59:59',
		});
		if (code !== 0) {
			return;
		}
		state.pagination.list = data.list;
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	onLoad(() => {
		state.today = dayjs().format('YYYY-MM-DD');
		state.date = [state.today, state.today];
		getLogList();
	});

	function onChange(e) {
		state.currentTab = e.index;
		resetPagination(state.pagination);
		getLogList();
	}

	function onChangeTime(e) {
		state.date[0] = e[0];
		state.date[1] = e[e.length - 1];
		resetPagination(state.pagination);
		getLogList();
	}

	function onLoadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getLogList();
	}

	onReachBottom(() => {
		onLoadMore();
	});
</script>

<style lang="scss" scoped>
	.score-box {
		margin: 20rpx;
		border-radius: 20rpx;
		padding-top: 50rpx;
	}

	input {}



	.btn {
		width: 200rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: $white;
		position: relative;
		z-index: 1;
	}
</style>