<template>
	<view class="task">
		<view class="task-navbar">
			<u-navbar title="我的钱包" back-icon-color="#333333" title-color="#333333" :background="background"></u-navbar>
		</view>
		<view class="task-hd">
			<view class="a">
				<view class="fl">我的账户:</view>
				<view class="fr">
					<view class="li">
						<view class="txt"><text>{{info.totalCoins}}</text>个<view class="zhe">约{{(info.totalCoins/info.transMoneyBill).toFixed(1)}}元</view></view>
						<view class="txt1">金币</view>
						
					</view>
					<view class="li">
						<view class="txt"><text>{{info.totalMoney}}</text>元</view>
						<view class="txt1">余额</view>
					</view>
				</view>
			</view>
			<view class="a">
				<view class="fl">今日收益:</view>
				<view class="fr">
					<view class="li">
						<view class="txt"><text>{{info.nowCoins}}</text>个<view class="zhe">约{{(info.nowCoins/info.transMoneyBill).toFixed(1)}}元</view></view>
						<view class="txt1">金币</view>
						
					</view>
					<view class="li">
						<view class="txt"><text>{{info.nowMoney}}</text>元</view>
						<view class="txt1">余额</view>
					</view>
				</view>
			</view>
			<view class="c">
				<view class="fl">{{info.transMoneyBill}}金币=1元</view>
				<view class="fr">
					<view class="btn" @click="openPage(1)">提现</view>
					<view class="btn" @click="openPage(2)">充值</view>
				</view>
			</view>
		</view>
		<view class="task-bd">
			<view class="tab">
				<u-tabs :list="list" bg-color="transparent" active-color="#222222" inactive-color="#666666" font-size="30" :active-item-style="activeStyle" bar-height="10" bar-width="60" v-model="current" @change="changeTabs"></u-tabs>
			</view>
			<view class="list">
				<view class="item" v-for="(a,i) in info.recordList" :key="i">
					<view class="a">
						<view class="fl">{{a.title}}
							<view class="status">审核中</view>
							<view class="status-01">已拒绝</view>
							<view class="status-02">已打款</view>
							<view class="txt">{{a.status==1?'-':'+'}}<text>{{a.coins}}</text>{{a.danwei==1?'金币':'元'}}</view>
						</view>
						<view class="fr" >
							{{a.createTime}}<text>退款</text><view class="tui" v-if="a.type==5">{{a.remark}}</view>
						</view>
						<view class="err" v-if="a.refuseReason">拒绝原因：{{a.refuseReason}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list:[{'name': '社交记录'},{'name': '任务记录'},{'name': '陪玩记录'},{'name': '充值记录'},{'name': '提现记录'},{'name': '邀请记录'}],
				activeStyle:{'fontSize': '35rpx'},
				background: {
					// 导航栏背景图
					background: 'url(https://api.lyiyuan.cn/profile/upload/static/task-bg.png) center top no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: '100 auto',
				},
				info: {},
			};
		},
		onShow() {
			this.userWallet();
		},
		methods: {
			openPage(index){
				if(index == 1){
					uni.navigateTo({
						url: "/pages/users/withdrawal/index"
					})
				}else{
					uni.navigateTo({
						url: "/pages/users/recharge/index"
					})
				}
			},
			async userWallet() {
				const { code, data } = await this.$api.userWallet({
					userId: uni.getStorageSync("userInfo").id,
					type: 1
				})
				if(code == 200){
					this.info = data;
				}
			},
			changeTabs(index){
				this.current = index
			},
		}
	}
</script>

<style scoped lang="scss">
.task{
	background: url(https://api.lyiyuan.cn/profile/upload/static/task-bg.png) center top no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	min-height: 100vh;
	&-hd{
		width: 700rpx;
		height: 395rpx;
		background: linear-gradient(90deg, #17150E, #373632);
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 0 20rpx 0 35rpx;
		box-sizing: border-box;
		.a{
			width: 100%;
			display: flex;
			align-items: flex-start;
			padding-top: 40rpx;
			.fl{
				font-weight: 500;
				font-size: 30rpx;
				color: #E7D4B8;
				line-height: 60rpx;
				margin-right: 35rpx;
			}
			.fr{
				flex: 1;
				.li{
					width: 40%;
					position: relative;
					float: left;
					&:first-child{
						width: 60%;
					}
					.txt{
						font-weight: 500;
						font-size: 24rpx;
						color: #E7D4B8;
						display: flex;
						align-items: center;
						text-align: center;
						text{
							font-size: 44rpx;
						}
					}
					.txt1{
						font-weight: 500;
						font-size: 24rpx;
						color: #E7D4B8;
						margin-left: 30rpx;
					}
					.zhe{
						min-width: 84rpx;
						padding: 0 10rpx;
						line-height: 44rpx;
						text-align: center;
						background: #FED0A7;
						border-radius: 10rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #693A16;
						margin-left: 20rpx;
						position: relative;
						&::after{
							content: "";
							width: 0;
							height: 0;
							border: 10rpx solid transparent;
							border-right: 10rpx solid #FED0A7;
							position: absolute;
							left: -18rpx;
							top: 10rpx;
							z-index: 2;
						}
					}
				}
			}
		}
		.c{
			padding-top: 30rpx;
			border-top: 1px solid #43423F;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.fl{
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(231, 212, 184, 0.6);
			}
			.fr{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.btn{
					width: 120rpx;
					line-height: 60rpx;
					background: #FED0A7;
					border-radius: 60rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #693A16;
					margin-left: 20rpx;
				}
			}
		}
	}
	&-bd{
		.tab{
			margin-top: 20rpx;
			overflow: hidden;
		}
		.list{
			padding: 0 25rpx 25rpx;
			overflow: hidden;
			.item{
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				position: relative;
				.err{
					font-weight: 500;
					font-size: 24rpx;
					color: #FC2C2C;
					margin-top: 10rpx;
				}
				.fr{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
					text{
						position: absolute;
						right: 0;
						bottom: 0;
						z-index: 1;
						width: 100rpx;
						height: 44rpx;
						background: linear-gradient(0deg, #000000, #3D3B38);
						border-radius: 20rpx 0px 20rpx 0px;
						line-height: 44rpx;
						text-align: center;
						display: block;
						font-size: 20rpx;
						color: #FFFFFF;
					}
					.tui{
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						float: right;
					}
				}
				.fl{
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.status{
						width: 80rpx;
						line-height: 36rpx;
						background: #FFA643;
						border-radius: 10rpx;
						text-align: center;
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
					.status-01{
						width: 80rpx;
						line-height: 36rpx;
						background: #FC2C2C;
						border-radius: 10rpx;
						text-align: center;
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
					.status-02{
						width: 80rpx;
						line-height: 36rpx;
						background: #222222;
						border-radius: 10rpx;
						text-align: center;
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
					.txt{
						font-weight: 500;
						font-size: 24rpx;
						color: #222222;
						text{
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
}
</style>
