XEH-miniProgram/pages/self/wallet/pay.vue

<template>
	<view class="page-wrap">
		<view class="header-panel">
			企业钱包 - 充值
			<view class="money">5000.00</view>
		</view>
		<view class="title-row">线上支付</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/icon_pay_ccb.png"></image>
			<view class="name">建行善付通</view>
			<image class="checkbox" src="../../../static/icon_checkbox.png"></image>
		</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/icon_pay_wx.png"></image>
			<view class="name">微信</view>
		</view>
		<view class="title-row">线下支付</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/svg/wallet_pay.svg"></image>
			<view class="name">公对公转账</view>
		</view>
		<view class="pay-row">
			<image class="icon" src="../../../static/icon_pay_other.png"></image>
			<view class="name">其他方式</view>
		</view>
		<button class="pay-btn" @click="handlePay">确认支付</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handlePay(){
				uni.redirectTo({
					url: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.header-panel{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 32.97rpx;
	padding: 0 27.47rpx;
	background: #fff;
	height: 109.89rpx;
	border-top: 1rpx solid #e0e0e0;
	.money{
		font-size: 41.21rpx;
		color: #F97631;
		&:before{
			content: '￥';
			font-size: 24.73rpx;
		}
	}
}
.title-row{
	height: 82.42rpx;
	padding: 27.47rpx 27.47rpx 0;
	box-sizing: border-box;
	font-size: 27.47rpx;
	color: #666;
}
.pay-row{
	background: #fff;
	height: 96.15rpx;
	display: flex;
	align-items: center;
	padding: 0 27.47rpx;
	position: relative;
	&::after{
		content: '';
		position: absolute;
		right: 27.47rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 30.22rpx;
		height: 30.22rpx;
		border-radius: 50%;
		border: 1rpx solid #d6d6d6;
		box-sizing: border-box;
	}
	&+.pay-row{
		border-top: 1rpx solid #d6d6d6;
	}
	.icon{
		width: 38.46rpx;
		height: 41.21rpx;
		margin-right: 24.73rpx;
	}
	.name{
		flex: 1;
		font-size: 27.47rpx;
		color: #333;
	}
	.checkbox{
		width: 32.97rpx;
		height: 32.97rpx;
		position: absolute;
		right: 27.47rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}
}
.pay-btn{
	width: 631.87rpx;
	height: 75.55rpx;
	line-height: 75.55rpx;
	background: #f97631;
	border-radius: 8.24rpx;
	font-size: 30.22rpx;
	color: #fff;
	margin: 82.42rpx auto 0;
}
</style>