lcoco/pages/wallet/model/recharge.vue

<template>
	<view>
		<view class="index">
			<image class="index-bg" src="@/static/img/perfect/img2.png" mode="scaleToFill"></image>
			<view class="head-money">
				<view class="sys-color-794B06 sys-size-28">我的JM币</view>
				<view class="head-mongy-1">
					<image src="@/static/img/tabBar/index.png" mode=""></image>
					<view class="sys-size-52 sys-color-362100 sys-weight-600">138</view>
				</view>
			</view>
		</view>
		<view class="t-box sys-background-FFDFC3">
			<view class="sys-background-gray-f"></view>
		</view>
		<view class="box-sizing-border box-card">
			<view class="card-list">
				<view class="card-list-nav box-sizing-border" 
				:class="fromData.moneyId===item.id?'s-view':'n-view'"
				@click="selectFun(1,item)"
				v-for="(item,i) in list" :key="i">
					<view class="list-top">
						<image src="@/static/img/tabBar/index.png" mode=""></image>
						<view class="sys-size-40 sys-color-gray-3 sys-weight-600">{{item.b}}</view>
					</view>
					<view class="sys-size-24 sys-color-gray-6">￥{{item.money}}</view>
				</view>
				<view class="card-list-nav" v-if="list.length>3&&list.length%3!=0"></view>
			</view>
			<view class="m-26 sys-size-24 sys-color-gray-9" @click="selectFun(2)">充值即代表同意《积且充值协议》</view>
			<view class="card-button sys-background-41AAEE sys-size-32 sys-color-white" @click="selectFun(3)">
				<image src="@/static/img/tabBar/index.png" mode=""></image>支付宝支付
			</view>
			<view class="card-button sys-background-6DCF06 sys-size-32 sys-color-white" @click="selectFun(4)">
				<image src="@/static/img/tabBar/index.png" mode=""></image>微信支付
			</view>
			
			<view class="sys-size-32 sys-color-gray-3 sys-weight-600">我的道具</view>
			<image class="crad-f" src="@/static/img/perfect/img2.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				fromData:{
					moneyId:1,
				},
				list:[
					{money:6,b:60,id:1,},
					{money:16,b:160,id:2,},
					{money:26,b:260,id:3,},
					{money:36,b:360,id:4,},
					{money:46,b:460,id:5,},
				],
			}
		},
		methods:{
			selectFun(type,item){
				if(type === 1){
					this.fromData.moneyId = item.id
				}else if(type === 2){
					// 积且充值协议跳转
				}else if(type === 3){
					// 支付宝支付
				}else if(type === 4){
					// 微信支付
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.m-26{
		margin: 26rpx 0;
	}
	.index{
		width: 100%;
		height: 436rpx;
		position: relative;
		
		.index-bg{
			width: 100%;
			height: 436rpx;
		}
		.head-money{
			position: absolute;
			left: 54rpx;
			bottom: 76rpx;
			.head-mongy-1{
				display: flex;
				align-items: center;
				margin-top: 26rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
			}
		}
	}
	.t-box{
		height: 30rpx;
		view{
			height: 30rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
		}
	}
	.box-card{
		min-height: 100rpx;
		padding: 70rpx 32rpx 10rpx 32rpx;
		.card-list{
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			.card-list-nav{
				width: 220rpx;
				height: 132rpx;
				border-radius: 12rpx;
				margin-bottom: 14rpx;
				text-align: center;
				.list-top{
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx 0 4rpx 0;
					image{
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
				}
			}
			.s-view{
				border: 2rpx solid #FE6915;
			}
			.n-view{
				border: 2rpx solid #F2F2F2;
			}
		}
		.card-button{
			width: 686rpx;
			height: 88rpx;
			border-radius: 16rpx;
			line-height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 24rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
		.crad-f{
			width: 100%;
			height: 160rpx;
			border-radius: 20rpx;
			margin-top: 34rpx;
		}
	}
</style>