web-africa-h5/pages/user/my-wallet/cash-detail.vue

<template>
	<view>
		<view class="content">
			<view class="contentList" v-for="(item, index) in listData" :key="index">
				<!-- 钱包类型 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_535') }}</view>
					<view class="line_content ">{{ item.pkAccountVal }}</view>
				</view>
				<!-- 提现金额 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MY_WAL_26') }}</view>
					<view class="line_content">{{ item.cashAmount }}</view>
				</view>
				<!-- 手续费 -->
				<!-- <view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_553') }}</view>
					<view class="line_content">{{ item.serviceCharge }}</view>
				</view> -->
				<!-- 个税 -->
				<!-- <view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_554') }}</view>
					<view class="line_content">{{ item.incomeTax }}</view>
				</view> -->
				<!-- 实发金额 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_542') }}</view>
					<view class="line_content">{{ item.issuedAmount }}</view>
				</view>
				<!-- 银行名称 -->
				<view class="linebox">
					<view class="line_title">{{ $t('CK_KS_41') }}</view>
					<view class="line_content">{{ item.bankName }}</view>
				</view>
				<!-- 银行账户 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_538') }}</view>
					<view class="line_content">{{ item.cardNumber }}</view>
				</view>
				<!-- 开户姓名 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_539') }}</view>
					<view class="line_content">{{ item.accountName }}</view>
				</view>
				<!-- 审核状态 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MY_CK_7') }}</view>
					<view class="line_content">{{ item.approveStateVal }}</view>
				</view>
				<!-- 申请日期 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_707') }}</view>
					<view class="line_content">{{ item.creationTime }}</view>
				</view>
				<!-- 备注 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MY_WAL_22') }}</view>
					<view class="line_content">{{ item.remarks }}</view>
				</view>
				<!-- 状态 -->
				<view class="linebox">
					<view class="line_title">{{ $t('MN_F_T_474') }}</view>
					<view class="line_content">{{ item.statusVal }}</view>
				</view>
				<!-- 操作 -->
				<view class="linebox" style="border-bottom: none;">
					<view class="line_title">{{ $t('MY_ORD_14') }}</view>
					<view @click="cancelFunc(item)" class="line_content thesuccess" v-if="item.approveState == 1 && item.status == 0">{{ $t('MN_F_50') }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			/*有没有等多*/
			no_more: false,
			/*是否正在加载*/
			loading: true,
			listData: [],
			form: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0
		};
	},
	onShow() {
		/*获取数据*/
		this.listData = [];
		this.form.pageNum = 1;
		this.getData();
	},
	onReachBottom() {
		let self = this;
		if (self.form.pageNum * self.form.pageSize < self.total) {
			self.form.pageNum++;
			self.getData();
		}
		self.no_more = true;
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	methods: {
		cancelFunc(e) {
			let self = this;
			uni.showModal({
				title: self.$t('w_0034'),
				content: self.$t('MN_F_T_911'),
				success(o) {
					if (o.confirm) {
						self._get(
							'member/api/withdraw/cancel',
							{
								pkId: e.pkId
							},
							function(res) {
								uni.showModal({
									title: self.$t('w_0034'),
									content: self.$t('MY_CK_35'),
									success() {
										self.getData();
									}
								});
							}
						);
					}
				}
			});
		},
		getData() {
			let self = this;
			self.loading = true;
			var formdata = self.form;
			uni.showLoading({
				title:'Loading...'
			})
			self._get(
				'member/api/withdraw/list-detail',
				formdata,
				function(res) {
					self.listData = res.rows;
					self.total = res.total;
					if (self.total < self.form.pageNum * self.form.pageSize) {
						self.no_more = true;
					}
				},
				{},
				() => {
					uni.hideLoading();
					self.loading = false;
				}
			);
		}
	}
};
</script>

<style lang="scss">
.content .contentList {
	background-color: #fff;
	margin: 5px 0;
	box-shadow: 0px 1px 5px 0px hsla(0, 0%, 80%, 0.4);
	border-radius: 5px;
}
.content {
	background: #f2f2f2;
	padding: 5px 12px;
}
.content .contentList .linebox {
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
	font-size: 13px;
}

.content .contentList .linebox .line_content {
	font-weight: 700;
	color: #333;
}
.content .contentList .linebox .line_content.thesuccess {
	color: #c8161d;
}
</style>