antissoft / antissoft.shangten.wechar

<template>
	<view class="whole">
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<!-- wyPromotion 我的推广 -->
		<!-- 球形进度条 -->
		<view class="progressBall">
			<vus-sphere-progress :percent="balance" :width="282" :text="false">
				<view slot="text">
					<view class="withdrawableCash">可提取</view>
					<view class="x">{{balance}}<text class="withdrawableCash">元</text></view>
				</view>
			</vus-sphere-progress>

			<!-- 自定义颜色，分别为：['背景','底部','顶部']  -->
			<!-- <vus-sphere-progress :percent="percent" :color="['#333','#2a4','#c00']"></vus-sphere-progress> -->

			<!-- 关闭水泡 -->
			<!-- <vus-sphere-progress :percent="percent" :sphere="{bubble:false}"></vus-sphere-progress> -->

			<!-- 设置图标 -->
			<!-- <vus-sphere-progress :percent="percent" :sphere="{icon:['vi-bolt','font-szie:18px;color:#fff;']}"></vus-sphere-progress> -->
		</view>
		<view class="applicationEmbodiment" @click="destoonMoney">
			申请提现
		</view>
		<view class="withdrawalDetails">
			提现明细
		</view>
		<view class="end-title">
			　　<view class="a" style="border-left: 0;">时间</view>
			　<view class="a">金额(元)</view>
			　　<view class="a">状态</view>
		</view>
		<!-- 明细 -->
		<!-- <view class="detailed"> -->
		<ul class="ul">
			<li class="li" v-for="(item,index) in modellist" :key="index">
				<view class="time textcolor">
					{{item.add_time}}
				</view>
				<view class="amountOfMoney time textcolor">
					￥{{item.money/100}}
				</view>
				<view class="state time textcolor-x">
					{{item.status==0?'成功':'失败'}}
				</view>
			</li>

		</ul>
		<!-- </view> -->
	</view>
</template>

<script>
	// 球形进度条
	import vusSphereProgress from '@/components/vus-sphere-progress/vus-sphere-progress.vue';
	import utils from '../../service/utils.js'
	export default {
		data() {
			return {
				// 分单位
				balance: 0,
				moneymodel: {
					"status": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				modellist: []
			}
		},
		onLoad(item) {
			this.ShowMoneyList()
			let data = JSON.parse(decodeURIComponent(item.usermodel))
			console.log('接收参数对象', data)
			this.balance = data.balance / 100
		},
		methods: {
			// 申请提现
			destoonMoney() {
				uni.navigateTo({
					url: '../PayMoney/PayMoney?balance=' + encodeURIComponent(JSON.stringify(this.balance))
				})
			},
			// 显示提现数据
			ShowMoneyList() {
				this.API.GetMoneyList(this.moneymodel).then(res => {
					console.log('提现数据', res)
					res.data.data.rows.forEach((item, index) => {
						item.add_time = utils.formatTime(item.add_time, "yyyy-MM-dd HH:mm:ss")
					})
					this.modellist = res.data.data.rows
				})
			}
		},
		components: {
			vusSphereProgress
		}
	}
</script>

<style>
	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		/* border-radius:50% 50% 0 0 ; */
		background-size: 100% 100%;
		z-index: -1;
	}
	/* 根属性 */
	.whole {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* background-color: #008000; */
		/* justify-content: center; */
	}
	.withdrawableCash {
		color: #FFA36E;
		font-size: 21rpx !important;
		/* background-color: #007AFF; */
	}
	.x {
		font-size: 60rpx;
		color: #FFA36E;
	}
	/* 进度球 */
	.progressBall {
		margin: 50rpx auto;
		/* width: 276rpx; */
		/* height: 276rpx; */
	}
	/* .uni-view{
	background-color: #007AFF !important;
} */
	/* 申请体现 */
	.applicationEmbodiment {
		width: 214rpx;
		height: 60rpx;
		background-color: #f5eab3;
		text-align: center;
		line-height: 60rpx;
		color: #000;
		margin: 0 auto;
		border-radius: 30rpx;
		font-size: 16px;
		box-shadow: 0 0 3px #f5eab3;
		border: 2px solid #f5eab3;
	}
	/* 体现明细 */
	.withdrawalDetails {
		width: 100%;
		height: 84rpx;
		background-color: #1f1f1f;
		text-align: center;
		line-height: 84rpx;
		margin-top: 20px;
		color: #FFFFFF;
		font-size: 22px;
	}
	/* 时间/金额/状态 */
	.end-title {
		display: flex;
		/* flex-direction: row; */
		justify-content: space-around;
		align-items: center;
		background-color: #1f1f1f;
		color: #a59e7a;
		font-size: 14px;
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
	}
	/* .end-title view{
		    flex-grow: 1;
		    text-align: center;
		} */
	.a {
		display: flex;
		background-color: #292929;
		justify-content: center;
		align-items: center;
		border-left: #f5eab3 2rpx solid;
		/* text-align: center; */
		flex: 1;
		height: 30px;
		line-height: 30px;
		color: #FFFFFF;
	}
	/* 状态明细 */
	/* 	.detailed{
		width: 100%;
		height: 50rpx;
		background-color: #007AFF;
	} */
	.ul {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 28px;
		line-height: 28px;
		/* background-color: #007AFF; */
		/* flex-direction: column; */
		/* align-items: center; */
		list-style: none;
		justify-content: center;
	}
	.li {
		/* background-color: #007AFF; */
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 22rpx;
		line-height: 28px;
		border-bottom: 1px solid #808080;
		/* padding-top: 5px; */
		/* text-align: center; */
		/* margin: 0 auto; */
	}
	.time {
		flex: 1;
		background-color: #1F1F1F;
		text-align: center;
	}
	.textcolor {
		color: #FFFFFF;
	}
	.textcolor-x {
		color: #FDC56A;
	}
</style>