shop-applet/pages/users/gather_list/index.vue

<template>
	<view class="list">
		<view class="head">
			<view class="head_conent">
				<view class="sum">
					<view class="text">已提现金额</view>
					<u-count-to class="num" style="color: #F84221;" :startVal="0" :endVal="sumTofixed" :decimals="2"
						bold font-size="22"></u-count-to>
				</view>
				<view class="line"></view>
				<view class="sum">
					<view class="text">已提现次数</view>
					<u-count-to class="num" :startVal="0" :endVal="all_count" bold font-size="22"></u-count-to>
				</view>
			</view>
		</view>

		<view class="search">
			<view class="search-time" @click="onOpenTime">
				<text class="month">{{where.start_time + (where.end_time ? ( ' 至 ' + where.end_time):'')}}</text>
				<u-icon name="arrow-down" color="#333" :bold="true"></u-icon>
			</view>
			<view class="total">已提现金额{{extractSum}}</view>
		</view>

		<view class="recoder" v-if="UserApplylist.length > 0">
			<view class="card" v-for="(item,index) in UserApplylist" :key="index">
				<view class="right">
					<view class="item" style="justify-content: flex-start;">
						<text class="rest">余额提现至</text>
						<text class="code">({{item.financial_account.bank_code}})</text>
						<text class="withdraw-type legal_company"
							:style="{background:item.checkType==1?'#F55726':''}">{{item.checkType ==1 ?'对公':'法人'}}</text>
					</view>
					<view class="item">
						<view class="item_title">
							<text>{{`${item.financial_account.bank}`}}</text>
						</view>
						<view class="item_money">+{{item.extract_money}}</view>
					</view>
					<view class="item">
						<view class="item-time">{{item.create_time}}</view>
						<view class="item_status audit" v-if="item.status == 0">待审核</view>
						<view class="item_status trans" v-if="item.status == 1 && ((!item.image || !item.image[0]))">
							待转账
						</view>
						<view class="item_status done" v-if="item.status == 1 && item.image  && item.image[0]"
							@click="handleView(item)">
							已转账
							<u-icon name="arrow-right" color="#46B03A" size="14"></u-icon>
						</view>
						<view class="item_status lose" v-if="item.status == -1">审核不通过</view>
					</view>
				</view>
				<view class="remark" v-if="item.status == -1">备注:{{item.refusal}}</view>
			</view>

			<view style="color:#afafaf;" class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>

		<u-empty v-else text="暂无记录~" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>

		<!-- 时间组件 -->
		<h-datetime-picker ref="pickerDate" @reset="reset" @confirm="confirm"
			:params="{year: true,month: true,day: false,hour: false,minute: false,second: false,timestamp: true,}"></h-datetime-picker>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getAdminApplyListAPI
	} from '@/api/user.js';
	import Loading from '@/components/Loading/index.vue';
	export default {
		components: {
			Loading
		},
		data() {
			return {
				currTab: 0, //自定义选择时间tab
				sum: 0,
				count: 0,
				scrollTop: 0,
				endDate: '',
				merId: '',
				UserApplylist: [],

				loaded: false,
				loading: false,
				loadTitle: '加载更多',
				where: {
					page: 1,
					limit: 15,
					keyword: '',
					start_time: '',
					end_time: ''
				},
				all_extract: 0,
				all_count: 0,
				extractSum: 0,
			}
		},
		computed: {
			sumTofixed() {
				return this.returnFloat(this.all_extract)
			}
		},

		onLoad(option) {
			this.merId = option.mer_id;
			this.where.start_time = new Date().format('yyyy-MM');
			this.ApplyList();
		},

		// 下拉到底部
		onReachBottom() {
			this.ApplyList();
		},

		methods: {
			// 选择时间
			onOpenTime() {
				this.$refs.pickerDate.open()
			},

			// 确认
			confirm(e) {
				if (e.time) {
					this.where.start_time = e.time;
					this.where.end_time = '';
				} else {
					this.where.start_time = e.start_time.time;
					this.where.end_time = e.end_time.time;
				}
				this.where.page = 1;
				this.loaded = false;
				this.UserApplylist = [];
				this.ApplyList();
			},

			// 重置
			reset(e) {
				this.where.page = 1;
				this.loaded = false;
				this.UserApplylist = [];
				this.where.end_time = '';
				this.where.start_time = new Date().format('yyyy-MM');
				this.ApplyList();
			},

			// 查看
			handleView(item) {
				if (!item.image || item.length == 0) return;
				uni.previewImage({
					urls: [...item.image]
				})
			},

			ApplyList() {
				var that = this;
				if (that.loading || that.loaded) return;
				that.loading = true;
				that.loadTitle = '';

				getAdminApplyListAPI(this.merId, this.where).then(res => {
					that.loading = false;
					that.loaded = res.data.list.length < that.where.limit;
					that.UserApplylist.push.apply(that.UserApplylist, res.data.list);
					that.where.page = that.where.page + 1;
					that.loadTitle = that.loaded ? '已全部加载~' : '加载更多';

					//截取银行卡后四位
					this.UserApplylist.forEach(item => {
						item.financial_account.bank_code = item.financial_account.bank_code.substr(-4)
					});

					this.count = res.data.count;
					this.extractSum = res.data.extractSum || 0; //已提现金额
					this.all_count = res.data.all_count || 0;
					this.all_extract = res.data.all_extract || 0;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				})
			},

			/**数字强制转为两位小数*/
			returnFloat(value) {
				var value = Math.round(parseFloat(value) * 100) / 100;
				var xsd = value.toString().split(".");
				if (xsd.length == 1) {
					value = value.toString() + ".00";
					return value;
				}
				if (xsd.length > 1) {
					if (xsd[1].length < 2) {
						value = value.toString() + "0";
					}
					return value;
				}
			},
		},
	}
</script>

<style lang="scss">
	.list {

		.search {
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx 0rpx 48rpx;
			height: 90rpx;
			background: #f5f5f5;

			.search-time {
				display: flex;

				.month {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-right: 6rpx;
				}
			}

			.total {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.head {
			position: sticky;
			z-index: 10;
			width: 694rpx;
			margin: 28rpx auto 00rpx;
			padding: 28rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-shadow: 0rpx 4rpx 10rpx 2rpx rgba(161, 161, 161, 0.4);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.head_conent {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.line {
					width: 1rpx;
					height: 70rpx;
					background-color: #dfdfdf;
				}

				.sum {
					flex: 1;
					text-align: center;
					color: #737373;
					font-size: 30rpx;

					.num {
						font-size: 48.06rpx;
						margin-bottom: 15rpx;
						font-weight: bold;
					}

					.text {
						margin-bottom: 24rpx;
						font-size: 28rpx;
						color: #666666;
					}
				}
			}
		}

		.public-wrapper {
			width: 90%;
			margin: 70px auto;
			box-shadow: 0px 0px 5px rgba(#FA6514, 0.7);
			border-radius: 10px;

			.title {
				font-size: 18px;
				font-weight: 700;
				padding: 10px 0 0 10px;
			}

			.conter {
				display: flex;
				align-items: center;
				padding: 10px 0 0 10px;
				text-align: center;
			}

			.footer {
				.scroll-Y {
					max-height: 60vh;

					.footer_list {
						display: flex;
						align-items: center;
						padding: 10px 0 0 10px;
						text-align: center;
					}
				}
			}
		}

		.recoder {
			padding: 0 28rpx 28rpx 28rpx;

			.time {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 45rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 30rpx;
					height: 30rpx;
					transform: rotate(90deg);
					margin-left: 10rpx;
				}
			}

			.card {
				width: 694rpx;
				background: #FFFFFF;
				border-radius: 21rpx 21rpx 21rpx 21rpx;
				opacity: 1;
				padding: 28rpx;
				margin-bottom: 20rpx;

				.right {
					flex: 1;

					.item {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.rest {
							margin-right: 10rpx;
							font-size: 28rpx;
							color: #333333;
						}

						.code {
							margin-right: 10rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						.legal_company {
							font-size: 24rpx;
							color: #FFFFFF;
							background: #72BE53;
							border-radius: 6rpx;
							padding: 2rpx 10rpx;
						}

						.legal_person {
							font-size: 24rpx;
							color: #FFFFFF;
							background: #FF8056;
							border-radius: 6rpx;
							padding: 2rpx 10rpx;
						}

						.item-time {
							font-size: 28rpx;
							color: #666666;
						}

						&_title {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						&_money {
							font-weight: bold;
							font-size: 36rpx;
							color: #F55726;
						}

						&_brank {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #737373;
							line-height: 39rpx;
						}

						&_time {
							font-size: 23rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #B3B3B3;
							line-height: 34rpx;
						}

						.item_status {
							display: flex;
							justify-content: center;
							align-items: center;
							height: 44rpx;
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							padding: 2rpx 16rpx;
							font-size: 28rpx;
						}

						.audit {
							background: rgba(38, 172, 245, .2);
							color: #26ACF5;
						}

						.trans {
							background: rgba(245, 87, 38, .2);
							color: #F55726;
						}

						.done {
							display: flex;
							background: rgba(70, 176, 58, .2);
							color: #46B03A;
						}

						.lose {
							background: rgba(102, 102, 102, .2);
							color: #666;
						}
					}

					.item-title {
						justify-content: flex-start;

						text {
							&:nth-child(1) {
								width: 198rpx;
								height: 40rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 51rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							&:nth-child(1) {
								width: 198rpx;
								height: 40rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 51rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}


						}
					}
				}

				.remark {
					word-wrap: break-word;
					font-size: 24rpx;
					color: #F55726;
					font-weight: bold;
				}
			}
		}
	}
</style>