xusfood_client/center/recharge.vue

<template>
	<view class="">
		<u-navbar
			title="充值"
			:autoBack="true"
			bgColor="#00A447"
			leftIconColor="#fff"
			:titleStyle="{color:'#fff'}"
			:safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="top-bg"></view>
		<view class="page-wrap">
			<view class="num-wrap">
				<view class="title">充值</view>
				<view class="inner u-flex u-row-around u-flex-wrap">
					<view class="num-item" 
						:class="{active:activeIndex == index}" 
						@click="numClick(index)"
						v-for="(item,index) in numItem" :key="item">
						¥ {{item}}
					</view>
				</view>
				<view class="full-btn" @click="submit">充 值</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex:0,
				numItem:[500,10000,15000]
				
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		methods: {
			numClick(index){
				this.activeIndex = index
			},
			submit(){
				let num = this.numItem[this.activeIndex];
				console.log('num',num);
				return
				this.$u.api.charge({num:num}).then(res=>{
					console.log('res',res.data);
				}).catch(err=>{
					console.log('charge',err);
				})
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.top-bg{
	width: 100%;
	height: 450rpx;
	background-color: #00A447;
	border-radius: 0 0 20% 20%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:-1;
}
.num-wrap{
	padding: 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	.title{
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	.inner{
		margin-bottom: 40rpx;
		.num-item{
			width: 30%;
			height: 260rpx;
			line-height: 260rpx;
			background-color: #EBF8F1;
			border: 4rpx solid #EBF8F1;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
			&.active{
				border-color: #00A447;
			}
		}
	}
	.full-btn{
		background-color: #FFB600;;
	}
}
</style>