<template>
	<view class="page-container">
		<view class="status-bar"></view>
		<view class="page-head">
		  <view class="page-head-btn" @click="back">
		    <uni-icons type="back" color="#fff" size="26"></uni-icons>
		  </view>
		  <view class="page-head-title">金币钱包</view>
		 
		</view>
		<view class="coin-wallet justify-between align-center">
			<view class="">
				<view class="title2">可提现总金额</view>
				<view class=" ">
					<view class="money">
						<text>¥</text>{{data.user_money || '0.00'}}
					</view>
				</view>
				<!--   <navigator url="/pages/user/withdrawal" hover-class="none" class="withdraw-button">
          去提现
        </navigator> -->
			</view>
			<view class="coin-num ">
				<view>当前拥有金币</view>
				<image src="/static/icon/icon-sign-in.png" />
				<text>{{data.user_coin || 0}}</text>
			</view>
		</view>
		<view v-if="data.cash_ratio" class="coin-remarks">
			注：金币兑换人民币比例为{{data.cash_ratio}}:1（{{data.cash_ratio}}金币兑换1.0元，{{data.cash_ratio*10}}金币兑换
			{{data.cash_ratio}}.0元，以此类推…）
		</view>
		<view class="coin-nav justify-between">
			<view class="nav-item">
				<navigator url="/pages/user/share-money" hover-class="none" class="flex-col">
					<image src="/static/icon/icon-extension.png" mode="widthFix" />
					<text class="name">推广赚钱</text>
				</navigator>
			</view>
			<view class="nav-item">
				<navigator url="/pages/user/vip-exchange" hover-class="none" class="flex-col">
					<image src="/static/icon/icon-exchange.png" mode="widthFix" />
					<text class="name">会员兑换</text>
				</navigator>
			</view>
			<view class="nav-item">
				<navigator url="/pages/user/coin-exchange" hover-class="none" class="flex-col">
					<image src="/static/icon/icon-gold.png" mode="widthFix" />
					<text class="name">金币兑换</text>
				</navigator>
			</view>
			<view class="nav-item">
				<navigator url="/pages/user/coin-record" hover-class="none" class="flex-col">
					<image src="/static/icon/icon-revenue.png" mode="widthFix" />
					<text class="name">金币记录</text>
				</navigator>
			</view>
		</view>
		<view class="justify-between align-center" style="padding: 0 20px;">
			<navigator url="/pages/user/withdrawal"  class="share-button"
				style="background-color: #EF8F4B;">
				提现
			</navigator>
			<navigator url="/pages/user/share"  class="share-button">
				立即推广
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		user
	} from '@/utils/api'

	export default {
		data() {
			return {
				data: {}
			}
		},
		async onLoad() {
			await this.$onLaunched
			const token = getApp().globalData.userToken
			if (!token) {
				uni.redirectTo({
					url: '/pages/user/login'
				})
			} else {
				this.getData()
			}
		},
		methods: {
			getData() {
				user.wallet().then(res => {
					if (res.code == 1) {
						this.data = res.data
						this.data.user_money = this.data.user_coin > 0 ? parseFloat(this.data.user_coin / this.data
							.cash_ratio).toFixed(2) : '0.00'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		background-color: $uni-bg-color;
		padding: 15px 0;

		.coin-wallet {
			text-align: center;
			margin:20rpx auto;
			padding: 15px 30px;
			background-image: url(@/static/images/species.png);
			background-size: 100% 100%;
			width: 95%;
			height: 129px;
			border-radius: 8px;
			display: flex;

			.title2 {
				margin-bottom: 4px;
				font-size: 15px;
				font-weight: 400;
				color: #FFFFFF;
			}

			.money {
				font-weight: 700;
				font-size: 36px;
				color: #fff;

				uni-text {
					font-size: 18px;
					margin-right: 5px;
				}
			}

			.withdraw-button {
				width: 80px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				background: linear-gradient(111deg, #ffc340, #ffe55c);
				font-size: 15px;
				font-weight: 500;
				color: #fff;
				border-radius: 16px;
			}

			.coin-num {
				font-weight: 500;
				font-size: 14px;
				color: #fff;

				uni-text {
					font-size: 36px;
					margin-right: 5px;
				}

				uni-image {
					width: 18px;
					height: 18px;
					margin: 0 5px;
				}
			}
		}

		.coin-remarks {
			padding: 0 15px;
			font-size: 13px;
			font-weight: 400;
			color: #9798a1;
			line-height: 1.8;
		}

		.coin-nav {
			padding: 5px;
			flex-wrap: wrap;
			width: 100%;

			.nav-item {
				width: 50%;
				padding: 10px;
				align-self: center;

				uni-navigator {
					width: 100%;
					height: 85px;
					background-color: #fefaf2;
					border-radius: 8px;
					align-items: center;
					justify-content: center;

					uni-image {
						width: 30px;
					}

					.name {
						font-size: 15px;
						text-align: center;
						font-weight: 400;
						color: #1a1a2a;
						margin-top: 10px;
					}
				}

				&:nth-child(2) {
					uni-navigator {
						background-image: url(@/static/images/jinbi.png);
						background-size: 100% 100%;
					}
				}

				&:nth-child(3) {
					uni-navigator {
						background-image: url(@/static/images/vipduihuan.png);
						background-size: 100% 100%;
					}
				}

				&:nth-child(4) {
					uni-navigator {
						background-image: url(@/static/images/jilu.png);
						background-size: 100% 100%;
					}
				}
			}
		}

		.share-button {
			margin: 30px 15px 0;
			width: 150px;
			height: 48px;
			line-height: 44px;
			background-color: $uni-color-primary;
			border-radius: 22px;
			font-size: 15px;
			font-weight: 500;
			color: #fff;
			text-align: center;
		}
	}
</style>