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>