qd_81fang/pages/wallet/index.vue

<template>
	<block>
		<view class="topBack" :style="'top: ' + menuButton.top + 'px'">
			<!-- <text class="ico-moon icon-leftarrow" wx:if="{{pages > 1}}" bindtap="toPage" data-mold="back"></text> -->

			<image v-if="pages > 1" @tap="toback"
				src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/f566738e424f33a415dea22dc4e11eec.png"
				class="ico-moon"></image>

			<image mode="heightFix" :style="'height: ' + menuButton.height * 2 + 'rpx'" @tap="toPage"
				data-url="/pages/tabbar/index/index" class="h-backBtn" v-else
				src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/2847/41c5f36528b8f4204130c4977c1ec2c5.png">
			</image>
			<view class="userName">钱包</view>
		</view>

		<view class="tpBg"></view>

		<view class="content">
			<view class="box">
				<view class="totalAllTitle">可提现金额(元)</view>
				<view class="total">
					<view class="totalNum">{{ info.money }}</view>
				</view>

				<view class="datas">
					<view class="dataItem">
						<view>冻结金额(元)</view>
						<view>{{ info.rozenAmount }}</view>
						<image
							src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0a57e6af52d6001a69c585478c71f8b6.png"
							mode="widthFix" class="iicon"></image>
					</view>

					<view class="dataItem">
						<view>累计提现(元)</view>
						<view>{{ info.cumulativembodiment }}</view>
					</view>

					<view class="dataItem">
						<view>累计收益(元)</view>
						<view>{{ info.cumulativencome }}</view>
					</view>
				</view>

				<view class="btns">
					<view class="totalJump btn1" @tap="toPage" data-url="/pages/wallet/cashlist" :data-type="type">
						<view>提现记录</view>
					</view>

					<view class="totalJump" @tap="toPage" data-url="/pages/Withdrawal/index" :data-type="type">
						<view>申请提现</view>
					</view>
				</view>
			</view>


			<view class="box1">

				<view class="iItem" @tap="toPage" :data-url="item.url" :data-name="item.name"
					v-for="(item, index) in list" :key="index">
					<view class="iLeft">
						<image :src="item.icon" mode="widthFix"></image>
						<view>{{ item.name }}</view>
					</view>



					<view class="rWrap">
						<view class="intergal" v-if="item.name=='我的积分'">
							{{info.score}}
						</view>
						<image
							src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/9badd173c236af20edc6f800111d24c3.png"
							mode="widthFix" class="iRight"></image>
					</view>


				</view>
			</view>

			<view class="box1">
				<view class="iItem" @tap="toPage" :data-url="item.url" v-for="(item, index) in list2" :key="index">
					<view class="iLeft">
						<image :src="item.icon" mode="widthFix"></image>
						<view>{{ item.name }}</view>
					</view>

					<image
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/9badd173c236af20edc6f800111d24c3.png"
						mode="widthFix" class="iRight"></image>
				</view>
			</view>


		</view>




	</block>
</template>
<script module="parse" lang="wxs">
	module.exports = {
		filterTime: function(time) {

			console.log(time)

			var nowDate = getDate(time * 1000);
			var year = nowDate.getFullYear();
			var month = nowDate.getMonth() + 1;
			var date = nowDate.getDate();
			var hours = nowDate.getHours();
			var minutes = nowDate.getMinutes();
			var seconds = nowDate.getSeconds();

			month = month > 9 ? month : '0' + month;
			date = date > 9 ? date : '0' + date;
			hours = hours > 9 ? hours : '0' + hours;
			minutes = minutes > 9 ? minutes : '0' + minutes;
			seconds = seconds > 9 ? seconds : '0' + seconds;

			return year + '-' + month + '-' + date + " " + hours + ":" + minutes + ":" + seconds;

		}
	}
</script>
<script>
	// pages/backstage/index/index.js
	var app = getApp();

	export default {
		data() {
			return {
				list: [
					// {
					// 	name: '我的积分',
					// 	icon: 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/89582b899d26a1e1a17afcfca97dc74b.png',
					// 	url: '/pages/wallet/integral'
					// },
					{
						name: '账单明细',
						icon: 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/6018ceee3ac59c3908e093b84046a61b.png',
						url: '/pages/wallet/paylist'
					},
					{
						name: '银行卡列表',
						icon: 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/89582b899d26a1e1a17afcfca97dc74b.png',
						url: '/pages/Withdrawal/banklist'
					},


				],

				list2: [{
						name: '我的团队',
						icon: 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/612dcfbf599a0be79cab31e7e9ceb651.png',
						url: '/pages/term/index'
					},
					{
						name: '我的海报',
						icon: 'https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/62a474930ae8d8dcfee4636acfc7c00a.png',
						url: '/pages/poster/index'
					}
				],


				info: {

				},

				pages: '',

				menuButton: {
					top: '',
					height: 0
				},

				Page: 0
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			let page = getCurrentPages();
			var menuButton = uni.getMenuButtonBoundingClientRect();
			console.log(menuButton);

			this.pages = page.length,
			this.menuButton = menuButton,
			this.getinfo();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {

		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			async getinfo() {

				let data = await this.$api.request('/wallet/index');


				console.log(data)

				this.info = data;




			},


			toPage(e) {

				app.globalData.toPage(e);

			},

			toback() {
				uni.navigateBack({
					delta: 1
				});
			},


		}
	};
</script>
<style>
	page {
		background: #F4F5F9;
	}

	.topBack {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		margin-top: 2rpx;
		display: flex;
		align-items: center;
	}

	.topBack .ico-moon {
		padding: 0 0rpx 0 30rpx;
		width: 70rpx;
		height: 40rpx;
	}

	.h-backBtn {
		margin-left: 30rpx;
	}

	.homeImg {
		height: 40rpx;
		width: 40rpx;
		margin-right: 10rpx;
	}




	.userName {
		font-size: 28rpx;
		color: #fff;
		margin-left: 20rpx;
		font-size: 36rpx;
	}

	.tpBg {
		background: #FE5879;
		background-size: 100% 100%;
		width: 100%;
		height: 380rpx;
	}

	.content {
		margin: -180rpx 30rpx 25rpx;
	}

	.box {
		border-radius: 12rpx;
		background: #fff;

		padding: 50rpx 20rpx 40rpx;

		margin-bottom: 25rpx;
	}

	.totalAllTitle {
		color: #9194A6;
		margin-bottom: 28rpx;
		text-align: center;
	}

	.total {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;

	}

	.totalNum {
		font-size: 50rpx;
	}

	.totalJump {
		display: flex;
		align-items: center;
		width: 220rpx;
		height: 70rpx;
		justify-content: center;
		background: #FB4C6F;
		border-radius: 12rpx;
		border-radius: 12rpx;
	}


	.totalJump>view {
		font-size: 28rpx;
		color: #fff;

	}



	.totalJump>image {
		width: 14rpx;
		margin-left: 14rpx;
		margin-top: 5rpx;
	}


	.tip {
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.iItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 0;
		border-bottom: 1px solid #E4E5EE;
	}

	.iItem:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.iLeft {
		display: flex;
		align-items: center;
	}

	.iLeft>image {
		width: 40rpx;
	}

	.iLeft>view {
		font-size: 28rpx;
		margin-left: 32rpx;
	}

	.iRight {
		width: 12rpx;
	}

	.datas {
		padding-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 36rpx;
		border-bottom: 1px solid #E4E5EE;
		margin-bottom: 30rpx;
	}


	.dataItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}


	.dataItem>view:nth-child(1) {
		color: #9194A6;
	}

	.dataItem>view:nth-child(2) {
		margin-top: 15rpx;
		font-size: 30rpx;
	}

	.iicon {
		width: 28rpx;
		position: absolute;
		top: 4rpx;
		right: -38rpx;

	}


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

	}


	.btn1 {
		background: #fff;
		border: 1px solid #9194A6;
		color: #011B33 !important;
	}


	.btn1>view {

		color: #011B33 !important;
	}


	.box1 {
		border-radius: 12rpx;
		background: #fff;

		padding: 50rpx;

		margin-bottom: 25rpx;
		padding-top: 0;
	}


	.iItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 0;
		border-bottom: 1px solid #e4e5ee;
	}

	.iItem:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.iLeft {
		display: flex;
		align-items: center;
	}

	.iLeft>image {
		width: 40rpx;
	}

	.iLeft>view {
		font-size: 28rpx;
		margin-left: 32rpx;
	}

	.iRight {
		width: 12rpx;
	}

	view {
		font-size: 24rpx;
	}

	.rWrap {

		display: flex;
		align-items: center;

	}

	.intergal {
		color: #000000;
		font-size: 30rpx;
		margin-right: 12rpx;
	}
</style>