<!-- 充值 -->
<template>

	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 导航 -->
		<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
			<view class="ss-flex-2 ss-col-center">
				<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
				<view style="margin-left: 15rpx; color: #3D444E; font-size: 28rpx">充值</view>
			</view>
			<view class="ss-flex-1"></view>
			<text class="textIcon icon-kefu icon-navigation"></text>
			<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
		</view>

		<view class="card-info">
			<view class="account-box">
				充值账号：1887263535687326735
			</view>
			<view class="account-box" style="border: none;">
				账号余额：416.00
			</view>
		</view>
		<view class="maney-box">
			<view class="ss-flex-2 ss-col-center cz-box">
				<view class="ss-flex-1"></view>
				<view style="margin-right: 20rpx;">技师充值</view>
				<view style="color:#36AFCA;margin-right: 10rpx;">平台充值</view>
			</view>
			<uni-easyinput errorMessage v-model="code" focus placeholder="请输入技师工号"></uni-easyinput>
			<view style="font-size:30rpx;color:#3D444D;margin-bottom: 20rpx;margin-top: 10rpx;">充值金额：</view>
			<uni-easyinput errorMessage v-model="value" focus placeholder="请输入金额"
				v-if="navtionIndex==10"></uni-easyinput>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;flex-wrap: wrap;">
				<view class="maney-number-box" v-for="i in 5" :key="i"
					:style="i==navtionIndex?'background-color: #36AFCA;color:#fff;border:none;':''" @click="onClick(i)">
					200</view>
				<view class="maney-number-box"
					:style="navtionIndex==10?'background-color: #36AFCA;color:#fff;border:none;':''"
					@click="activeInfo">其他金额</view>
			</view>
		</view>
		<view class="type-box">
			支付方式
		</view>
		<view class="ss-flex-2 ss-col-center zf-type-box">
			<text class="textIcon icon-fanhui icon-navigation"></text>
			<view style="margin-left: 15rpx; color: #3D444E; font-size: 26rpx">微信支付</view>
			<view class="ss-flex-1"></view>
			<radio
			  :checked="state.wxzf"
			  color="var(--ui-BG-Main)"
			  style="transform: scale(0.8)"
			  activeBackgroundColor="#FC495C"
			   @tap.stop="onChange('wxzf')"
			/>
		</view>
		<view class="ss-flex-2 ss-col-center zf-type-box">
			<text class="textIcon icon-fanhui icon-navigation"></text>
			<view style="margin-left: 15rpx; color: #3D444E; font-size: 26rpx">支付宝支付</view>
			<view class="ss-flex-1"></view>
			<radio
			  :checked="state.zfbzf"
			  color="var(--ui-BG-Main)"
			  style="transform: scale(0.8)"
			  activeBackgroundColor="#FC495C"
			   @tap.stop="onChange('zfbzf')"
			/>
		</view>
		<view class="ss-flex-2 ss-col-center zf-type-box">
			<text class="textIcon icon-fanhui icon-navigation"></text>
			<view style="margin-left: 15rpx; color: #3D444E; font-size: 26rpx">好友代付</view>
			<view class="ss-flex-1"></view>
			<text class="textIcon icon-gengduo icon-navigation"></text>
		</view>
		<view class="ss-flex-2 ss-col-center">
			<view class="ss-flex-1"></view>
			<radio
			  :checked="selectInfo"
			  color="var(--ui-BG-Main)"
			  style="transform: scale(0.8)"
			  activeBackgroundColor="#36AFCA"
			  @tap.stop="onClickInfo"
			/>
			<view class="read-box">我已阅读并同意 <text style="color: #239E55;">《订单须知》</text> </view>
		</view>
		<view class="recharge-box">确定充值</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();
	const selectInfo=ref(false)
	const onClickInfo=async()=>{
		selectInfo.value=!selectInfo.value
	}
	// 选中什么支付方式
	const state = reactive({
	  yuezf: false,
	  wxzf:false,
	  zfbzf:false
	});
	
	// 勾选协议
	function onChange(name) {
	  state[name] = !state[name];
	  let arr=Object.keys(state)
	  for(let i=0;i<arr.length;i++){
		  let item=arr[i]
		  if(item!=name){
			  state[item]=false
		  }
	  }
	}

	const navtionIndex = ref(1)
	const onClick = async (num) => {
		navtionIndex.value = num
	}
	const activeInfo = async () => {
		navtionIndex.value = 10
	}
	// 返回首页
	const backPage = async () => {
		uni.navigateBack({
			delta:1
		});
	};
	
	const code=ref('')

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped>
	/deep/.uni-easyinput__content-input {
		height: 60rpx;
	}
</style>
<style scoped lang="scss">
	.cz-box{
		width: 100%;
		box-sizing: border-box;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}
	.recharge-box{
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		text-align: center;
		padding: 20rpx 20rpx;
		color: #35AFC9;
		background-color: #fff;
		border: 1rpx solid #35AFC9;
		border-radius: 15rpx;
		margin-top: 30rpx;
	}
	.read-box{
		padding: 20rpx 10rpx;
		color: #5B6068;
		font-size: 22rpx;
	}
	.zf-type-box{
		width: 95%;
		min-height: 80rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 10rpx 25rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
	}
	.type-box{
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 24rpx;
		color: #3D444E;
	}
	.maney-number-box {
		width: 210rpx;
		padding: 15rpx;
		border-radius: 10rpx;
		border: 1rpx solid #36AFCA;
		color: #36AFCA;
		font-size: 26rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.maney-box {
		width: 95%;
		min-height: 240rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
	}

	.account-box {
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #fff;
		border-bottom: 1rpx solid #fff;
	}

	.card-info {
		width: 95%;
		min-height: 200rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #36AFCA;
		margin-top: 20rpx;
		padding: 20rpx 0rpx;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>