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

<template>
<view class="list">
		<view class="head">
			<view class="head_conent">
				<view class="tatil">
					<view class="sum">
						<u-count-to :startVal="0" :endVal="count"></u-count-to>
						<h3>提现次数</h3>
					</view>
					<view class="sum">
						<u-count-to :startVal="0" :endVal="sumTofixed" :decimals="2"></u-count-to>
						<h3>提现总额</h3>
				
					</view>
				</view>
			</view>
			<view class="tixian" @click="tixian">
				立即提现
			</view>
		</view>
		<view class="public-wrapper">
			<view class="title">
				提现详情
			</view>
			<view class="conter">
				<view class="data">编号</view>
				<view class="browse">银行</view>
				<view class="turnover">日期</view>
				<view class="money">金额(元)</view>
			</view>
			<view class="footer">

				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class=" footer_list" v-for="(item,index) in UserApplylist" :key="index">
						<view class="data">{{index+1}}</view>
						<view class="browse">{{item.financial_account.bank}}</view>
						<view class="turnover">{{item.create_time}}</view>
						<view class="money">{{item.extract_money}}</view>
					</view>
				</scroll-view>

			</view>
		</view>
	</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'
	export default {
		data() {
			return {
				sum: 0,
				count:0,
				scrollTop: 0,
				merId: '',
				UserApplylist:[]
			}
		},
		computed: {
			sumTofixed(){
				return this.returnFloat(this.sum)
			}
		},
		watch: {

		},
		onLoad(option) {
			this.merId = option.mer_id
			console.log(this.merId);
			this.ApplyList()
			// this.UserApplylist.forEach((item)=>{
			// 	console.log(item.extract_money);
			// })
		},
		methods: {
			/**数字强制转为两位小数*/
			 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;
			 }
			},
			tixian() {
				uni.navigateBack({
					delta: 1
				});
			},
			ApplyList(){
				getAdminApplyListAPI(this.merId).then(res=>{
					console.log(res);
					this.UserApplylist=res.data.list
					this.count=this.UserApplylist.length
					this.UserApplylist.forEach(item=>{
						item.create_time=item.create_time.substr(0,10)
						console.log(parseInt(item.extract_money));
					})
					for(let i =0; i<this.UserApplylist.length; i++){
						this.sum+=parseInt(this.UserApplylist[i].extract_money)
					}
				}).catch(err=>{	
					console.log(err);
				})
			}
		},

	}
</script>

<style lang="scss">
	.list {
		.head {
			width: 100%;
			height: 150px;
			display: flex;
			background-image: linear-gradient(90deg, #FA6514 0%, #E93323 100%);
			position: relative;

			.head_conent {
				width: 90%;
				height: 150px;
				background-color: #fff;
				margin: 50px auto;
				border-radius: 15px;
				box-shadow: 0px 0px 5px rgba(#FA6514, 0.5);

				.tatil {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 100%;

					.sum {
						text-align: center;
						margin-top: 30px;

						h3 {
							margin-top: 15px;
							font-size: 18px;
							font-weight: 700;
							color: #E93323;
						}
					}
				}
			}

			.tixian {
				position: absolute;
				background-image: linear-gradient(90deg, #FA6514 0%, #E93323 100%);
				box-shadow: 0px 0px 5px rgba(#FA6514, 0.5);
				width: 100px;
				height: 40px;
				line-height: 40px;
				border-radius: 30px;
				text-align: center;
				font-size: 18px;
				color: #fff;
				font-weight: 700;
				left: 37%;
				top: 150px;
			}
		}

		.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;

				.data {
					width: 40px;
				}

				.browse {
					width: 110px;
				}

				.turnover {
					width: 110px;
				}

				.money {
					width: 60px;
				}
			}

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

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

						.data {
							width: 40px;
						}

						.browse {
							width: 110px;
						}

						.turnover {
							width: 110px;
						}

						.money {
							width: 60px;
						}
					}
				}

			}

		}
	}
</style>