<template>
	<view class="content">
		<!-- 钱包 -->
		<view class="recharge-me">
			<view class="wallet-content">
				<view class="h-balance-wrap">
					<view class="h-balance">
						<view class="recharge-balance">
							<view class="h-nav-img">
								<image src="../../static/transaction/u1.png" mode=""></image>
							</view>
							<view class="name">储值余额</view>
							<view class="balance-value">￥
								<text v-if="userInfo.rechargeBalance">{{ userInfo.rechargeBalance }}</text>
								<text v-else>0</text>
							</view>
						</view>
						<view class="recharge-balance">
							<view class="h-nav-img">
								<image src="../../static/transaction/u3.png" mode=""></image>
							</view>
							<view class="name">赠送余额</view>
							<view class="balance-value">￥
								<text v-if="userInfo.rewardBalance" class="">{{ userInfo.rewardBalance }}</text>
								<text v-else>0</text>
							</view>
						</view>
						<view class="recharge-balance">
							<view class="h-nav-img">
								<image src="../../static/transaction/u4.png" mode=""></image>
							</view>
							<view class="name">赠送优惠券</view>
							<view class="balance-value">
								<text v-if="userInfo.coupon">{{ userInfo.coupon }}</text>
								<text v-else>0</text>
							</view>
						</view>
					</view>
					<view class="horizontal-dashed-line"></view>
					<view class="btn">
						<view @click="gotoTransactionRecords()" class="item-btn">
							<text>交易记录</text>>
						</view>
						<view class="dashed-line"></view>
						<view @click="gotoTransactionOrderRecords()" class="item-btn">
							<text>储值订单</text>>
						</view>
					</view>
				</view>

				<view class="skill-sequence-panel-content-wrapper">
					<!--左边虚化-->
					<!-- <view class="hide-content-box hide-content-box-left"></view> -->
					<!--右边虚化-->
					<!-- <view class="hide-content-box hide-content-box-right"></view> -->
					<scroll-view scroll-x="true" class="kite-classify-scroll">
						<view @click="selectActiveRecharge(item, index)" class="kite-classify-cell shadow"
							v-for="(item, index) in rechargeList" :key="index">
							<view v-if="currentTab === index" class="h-bg-img">
								<image src="../../static/transaction/u2.png" mode=""></image>
							</view>
							<view v-else class="h-bg-img">
								<image src="../../static/recharge/dianka.png" mode=""></image>
							</view>
							<view class="content">
								<view class="money">
									￥<text class="v">{{ item.reachPrice }}</text>
								</view>
								<view class="desc">
									<text>{{ item.name }} </text>
									<!-- <text>充￥{{item.reachPrice}}赚送￥{{item.discountsPrice}}</text> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- 充值按钮 -->
				<view v-if="rechargeList.length > 0" @click="submitOrder()" class="h-submit-btn">
					<text>立即充值</text>
				</view>

				<!-- 用户充值协议 -->
				<view class="recharge-agreement">
					<view class="radio-group">
						<radio @click="toggleSelection" class="v-text" :checked="isSelected">我已阅读并同意</radio>
						<text @click="gotoTermOfService(8)" class="h-btn">《储值协议》</text>
					</view>
				</view>

				<!-- 使用说明 -->
				<view class="h-desc">
					<view class="title">
						<text>使用说明</text>
					</view>
					<view class="h-content">

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {

	data() {
		return {
		}
	},
	onLoad() {

	},
	methods: {
	}
}
</script>

<style scoped lang="scss">
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>
