nk-shop2.0/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="30" :endVal="500"></u-count-to>
						<h3>提现次数</h3>
					</view>
					<view class="sum">
						<u-count-to :startVal="0" :endVal="a"></u-count-to>
						<h3>提现总额</h3>
					</view>
				</view>
			</view>
			<view class="tixian" @click="navigator(`/pages/users/embody/embody?mer_id=${merId}`)">
				申请提现
			</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">
						<view class="data">1</view>
						<view class="browse">中国农业银行</view>
						<view class="turnover">3月17</view>
						<view class="money">4000</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>
	// +----------------------------------------------------------------------

	export default {
		data() {
			return {
				a: 99999999,
				scrollTop: 0,
				merId:''
			}
		},
		computed: {},
		watch: {

		},
		onLoad(option) {
			this.merId = option.mer_id
		},
		methods: {
			navigator(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</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>