MeiMeiZhuan/pages/wallet/accounts.vue

<template>
	<view class="content">
		<view class="list">
			<radio-group @change="tabRadio">
				<!-- #ifndef MP -->
				<label>
					<view class="box" @click="navTo('/pages/wallet/alipay')">
						<view class="icon iconfont iconzhifubao"></view>
						<view class="title-box">
							<view class="title"><text>支付宝</text></view>
						</view>
						<view class="right"><image src="../../static/img/img01.png"></image></view>
					</view>
				</label>
				<!-- #endif -->
				
				<label>
					<view class="box" @click="navTo('/pages/wallet/weixin')">
						<view class="icon iconfont iconweixin1"></view>
						<view class="title-box">
							<view class="title"><text>微信</text></view>
							<!-- <view class="node"><text>真实姓名(代勇明)</text></view> -->
						</view>
						<view class="right"><image src="../../static/img/img01.png"></image></view>
					</view>
				</label>
				<label>
					<view class="box1" @click="navTo('/pages/wallet/bankcard')">
						<view class="box1-top"><image src="../../static/img/img31.jpg"></image></view>
						<view class="title-box">
							<view class="title"><text>银行卡</text></view>
							<!-- <view class="node"><text>真实姓名(代勇明)</text></view> -->
						</view>
						<view class="right"><image src="../../static/img/img01.png"></image></view>
					</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
// #ifdef H5
import { rechargeWechat } from '@/api/wallet.js';
// #endif
// #ifdef MP
import { rechargeRoutine } from '@/api/wallet.js';
// #endif
import { mapState } from 'vuex';
export default {
	data() {
		return {
		};
	},
	onLoad(options) {},
	methods: {
		// 跳转
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}

.add-btn {
	&.modified {
		color: $base-color;
	}
	&.up {
		background:$base-color;
		color: #fff;
	}
	display: flex;
	align-items: center;
	justify-content: center;
	width: 560rpx;
	height: 80rpx;
	margin: 0 auto;
	margin-top: 60rpx;
	font-size: $font-lg;
	border-radius: 40rpx;
}

.list {
	padding:0 30rpx;
	background-color: #ffffff;
	.box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		border-bottom: 1px solid $border-color-light;
	}
	.box1{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
	}
	.icon {
		font-size: 48rpx;
		padding-right: 20rpx;
	}
	.iconweixin1 {
		color: #18bf16;
	}
	.iconzhifubao {
		color: #08aaec;
	}
	.title-box {
		flex-grow: 1;
		text-align: left;
		.title {
			font-size: $font-base + 2rpx;
			color: #333333;
		}
	}
	.right{
		image {
			width: 13rpx;
			height: 25rpx;
		}
	}
	
	image {
		width: 48rpx;
		height: 37rpx;
		margin-right: 20rpx;
	}
}
/deep/ .uni-radio-input {
	width: 45rpx;
	height: 45rpx;
}
.active-bg {
	background-color: $color-gray !important;
}
</style>