retailStore/pages/selfCenter/cashoutPage/index.vue

<template>
	<view>
		
		<view class="header-box"></view>
		<view class="header-title">
			<text style="margin-top: 4%;">已提现(元)</text>
			<text style="margin-top: 2%;font-size: 36rpx;">165.25</text>
		    <view class="apply-cash-box" @click.stop="goApplyCash">
				<text>申请提现</text>
				<image src="/static/arrow-go2.png" mode=""></image>
			</view>
		</view>
		
		
		<view class="count-deatil-box">
			
			<view class="count-detail-title">
				提现明细
			</view>
			
			<view class="leader-info" v-for="item in cashOutList" :key='item.id'>
				<view class="leader-column">
					<view>
						<text style="font-size: 30rpx;">{{item.time}}</text>
					</view>
				</view>
				<view class="display-column">
					<view class="count-sum">
						{{item.money}}
					</view>
					<view class="count-sum" style="color: #ccc;">
						{{item.status}}
					</view>
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
var md5 = require('../../../common/md5.js')
//0进行中 ， 1已到账
export default {
	data() {
		return {
			title: 'selfCenter',
			cashOutList: [
				{
					money: '28.35',
					time: '2019-02-14 00:00',
					status:'进行中',
					id: 1
				},
				{
					money: '66.12',
					time: '2019-02-15 00:00',
					status:'已到账',
					id: 2
				},
				{
					money: '32.15',
					time: '2019-02-15 01:00',
					status:'进行中',
					id:3
				},
				{
					money: '12.00',
					time: '2019-02-16 00:00',
					status:'已到账',
					id: 4
				}
			]
		};
	},
	onLoad() {
		this.getCashOutList()
	},
	methods: {
		goApplyCash(){
			uni.navigateTo({
				url: '/pages/selfCenter/cashoutPage/applyPage/index',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		 getCashOutList(){
			 let that = this;
			 uni.request({
				url: getApp().globalData.shareUrl, //需要设置为全局
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					method: 'getWithdrawdepositList',
					timestamp: getApp().globalData.globalTimestamp, //Date.now()
					page: '',
					pageSize:'',
					uid:getApp().globalData.user_id,
					sign: md5('getWithdrawdepositList' + getApp().globalData.globalTimestamp)
				},
				success: res => {
					if (res.data.code === 200) {
						console.log(res.data.msg)
						//that.cashOutList = res.data.msg
					}
				}
			 });
		}
	}
};
</script>

<style>
	.header-box {
		width: 100%;
		height: 180rpx;
		background: #1a9ed3;
	}
	
	.header-title {
		width: 93%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		z-index: 99;
		border-radius: 10rpx;
		font-size: 30rpx;
		margin: -13% auto;
		margin-bottom: 3%;
		position: relative;
	}
	.count-sum {
		color: red;
		font-size: 28rpx;
	}
	
	.count-deatil-box {
		width: 93%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		margin: 0 auto;
	}
	.count-detail-title {
		width: 89%;
		border-bottom: 1px solid #dbdbdb;
		padding: 10px;
		font-size: 32rpx;
	}
	
.leader-info {
	width: 90%;
	display: flex;
	align-items: center;
	background: #fff;
	padding: 20rpx;
	border-bottom: 1px solid #ccc;
}
.leader-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 90rpx;
	font-size: 28rpx;
	margin-right: 20%;
	width: 400rpx;
	line-height: 90rpx;
}

.display-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.apply-cash-box {
	position: absolute;
	right: 5px;
	top: 14px;
	display: flex;
	align-items: center
}
.apply-cash-box image {
	width: 48rpx;
	height: 48rpx;
}
</style>