NN2025081602/addons/min-exam/pages/account/withdrawLog.vue

<template>
	<!-- 首页 -->
	<view id="app" :style="'width: '+boxWidth+'px;min-height: '+boxHeight+'px'">
		<navbar title="提现记录" :leftUrl="type>0?'':'/pages/account/withdraw'" :showLeft="true" :bgColor="'transparent'"
			:place="true">
		</navbar>
		<view class="main" v-if="loaded">
			<view class="loading" v-if="loading && (!dataList || dataList.length<=0)">
			</view>
			<uv-empty class="empty" v-else-if="!dataList || dataList.length<=0" mode="data" text="暂无记录"
				icon="/static/images/icon-empty.png" icon-size="20" width="90" height="90"></uv-empty>
			<view class="list-box" v-else>
				<view class="list-item" v-for="(v,k) in dataList" :key="k">
					<view class="icon">
						<uv-image src="/static/images/icon-coin.png" width="2.75rem" height="2.75rem"
							shape="circle"></uv-image>
					</view>
					<view class="info">
						<view class="title">
							申请提现{{v.money}}元
						</view>
						<view class="time">
							{{v.time_text}}
						</view>
					</view>
					<view class="action-box">
						<view :class="['status','status4']" v-if="v.pay_status==2 && v.status==2">
							已完成
						</view>
						<view @click="showRemark(v)" :class="['status','status'+v.status]" v-else-if="v.status==3">
							查看驳回
						</view>
						<view :class="['status','status'+v.status]" v-else-if="v.status==2">
							待打款
						</view>
						<view :class="['status','status'+v.status]" v-else>
							待审核
						</view>
					</view>
				</view>
			</view>
		</view>

		<showModal ref="uvModal"></showModal>
		<uv-loading-icon class="loading" :show="loading" textSize="30rpx" color="var(--color)"
			:customStyle="{position:'absolute',top:'50%',left:0,right:0}"></uv-loading-icon>

	</view>
</template>

<script>
	import navbar from "../../components/navbar.vue"
	import showModal from "../../components/showModal.vue"
	export default {
		components: {
			navbar,
			showModal
		},
		data() {
			return {
				loaded: false,
				boxWidth: 360,
				boxHeight: 600,
				type: 0,
				params: {
					page: 1,
					status: 0,
					type: 2,
					pageSize: 15,
					loaded: false,
				},
				// 接单列表
				dataList: [],
			};
		},
		onLoad(e) {
			this.type = typeof(e.type) != 'undefined' ? e.type : 0;
		},
		onShow() {
			const windowInfo = uni.getWindowInfo();
			this.boxHeight = windowInfo.windowHeight
			this.boxWidth = windowInfo.windowWidth

			this.init()
		},
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (!this.params.loaded) {
				this.params.page++;
				this.getList()
			}

			uni.stopPullDownRefresh()
		},
		methods: {
			init() {
				this.params.page = 1;
				this.getList();
			},
			showRemark(row) {
				this.$refs.uvModal.open({
					title: '驳回原因',
					content: row.confirm_remark,
					confirmText: '关闭',
					confirmColor: "linear-gradient(to right, #31A5FF, #0974FF)",
				});
			},
			// 列表
			async getList() {
				let _this = this
				this.loading = true;
				const res = await this.$request.api('/account/balance', this.params)
				this.loading = false;
				this.loaded = true;
				if (res.success == true) {
					if (this.params.page == 1) {
						this.dataList = res.data.list
					} else if (res.data.list.length > 0) {
						this.dataList = this.goodsList.concat(res.data.list)
					} else {
						this.params.loaded = true
					}
				} else if (res.code == '403') {
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "linear-gradient(to right, #31A5FF, #0974FF)",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login?type=order'
							})
						}
					});
				} else {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : ''
					if (msg) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}

				}
			},
		}
	};
</script>

<style lang="scss">
	page,
	body {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.main {
		margin: 4rem .75rem;

		.empty {
			padding-top: 5rem;
		}

		.list-box {
			margin-top: 1.25rem;
			padding-bottom: 4.5rem;

			.list-item {
				padding: .75rem;
				background-color: #fff;
				margin-bottom: 1.125rem;
				border-radius: 1rem;
				display: flex;
				flex-direction: row;
				align-items: center;

				.info {
					flex: 1;
					margin: 0 .75rem;

					.title {
						font-size: 1rem;
						font-weight: 500;
						padding-bottom: .25rem;
					}

					.time {
						font-size: .875rem;
						color: var(--text-color);
					}
				}

				.action-box {
					.status {
						font-size: 1rem;
						font-weight: normal;
						color: var(--color);
					}

					.status4 {
						color: forestgreen;
					}

					.status3 {
						color: orangered;
					}

					.status2 {
						color: orange;
					}
				}

				.money {
					font-size: 1.25rem;
					font-weight: 500;
					color: var(--color);
				}
			}
		}
	}
</style>