充值页面；支付方式页面；支付成功页面；

pages.json

@@ -192,6 +192,28 @@
 			{
 				"navigationBarTitleText" : "明细筛选"
 			}
+		},
+		{
+			"path" : "pages/self/wallet/recharge",
+			"style" : 
+			{
+				"navigationBarTitleText" : "充值"
+			}
+		},
+		{
+			"path" : "pages/self/wallet/pay",
+			"style" : 
+			{
+				"navigationBarTitleText" : "支付方式"
+			}
+		},
+		{
+			"path" : "pages/self/wallet/success",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"backgroundColor": "#fff"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/wallet/index.vue

@@ -16,10 +16,9 @@
 			</view>
 		</view>
 		<view class="nav-panel">
-			<view class="item" v-for="(item,index) in navList" :key="index" @click="handleNav(item.value)">
+			<view class="item" v-for="(item, index) in navList" :key="index" @click="handleNav(item.value)">
 				<view class="icon">
-					<image :class="'icon-img icon-img-'+item.value" :src="`../../../static/svg/wallet_nav_${item.value}.svg`">
-					</image>
+					<image :class="'icon-img icon-img-' + item.value" :src="`../../../static/svg/wallet_nav_${item.value}.svg`"></image>
 				</view>
 				<view class="label">
 					{{ item.label }}
@@ -35,41 +34,48 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				navList: [{
+export default {
+	data() {
+		return {
+			navList: [
+				{
 					label: '资金明细记录',
 					value: 1
-				}, {
+				},
+				{
 					label: '我要充值',
 					value: 2
-				}, {
+				},
+				{
 					label: '我要提现',
 					value: 3
-				}, {
+				},
+				{
 					label: '设置',
 					value: 4
-				}, ]
-			}
-		},
-		methods: {
-
+				}
+			]
+		};
+	},
+	methods: {
 		handleNav(val) {
 			let url = '';
 			switch (val) {
 				case 1:
 					url = 'record';
 					break;
+				case 2:
+					url = 'recharge';
+					break;
 			}
 			uni.navigateTo({
 				url
 			});
 		}
-		}
 	}
+};
 </script>
 
 <style lang="scss" scoped>
-	@import 'index.scss';
-</style>
+@import 'index.scss';
+</style>

pages/self/wallet/pay.vue

@@ -0,0 +1,125 @@
+<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>

pages/self/wallet/recharge.vue

@@ -0,0 +1,59 @@
+<template>
+	<view class="page-wrap">
+		<view class="phone">18863100789</view>
+		<view class="money-group">
+			<view class="item" v-for="(item, index) in moneyList" :key="index" @click="handleOpenPay(item)">{{ item }}元</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			moneyList: [100, 200, 500, 1000, 2000, 5000]
+		};
+	},
+	methods: {
+		handleOpenPay(val){
+			uni.navigateTo({
+				url: 'pay'
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.phone {
+	padding: 89.29rpx 42.58rpx 0;
+	font-size: 49.45rpx;
+	color: #333;
+	&::after {
+		content: '当前操作用户';
+		display: block;
+		font-size: 27.47rpx;
+		color: #999;
+		margin-left: 12.36rpx;
+	}
+}
+.money-group{
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	padding: 41.21rpx 31.59rpx;
+	.item{
+		width: 219.78rpx;
+		height: 123.63rpx;
+		background: #fff;
+		border-radius: 10.99rpx;
+		border: 1rpx solid #e0e0e0;
+		box-sizing: border-box;
+		line-height: 120.88rpx;
+		text-align: center;
+		font-size: 38.46rpx;
+		color: #7F2508;
+		margin-bottom: 13.74rpx;
+	}
+}
+</style>

pages/self/wallet/success.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="page-wrap">
+		<image class="success" src="../../../static/svg/success.svg"></image>
+		<view class="text">支付成功</view>
+		<view class="money">500.00</view>
+		<button class="btn" @click="handleBack">返回企业钱包</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			handleBack(){
+				uni.navigateBack({
+					delta: 2
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.page-wrap{
+	min-height: 100%;
+	padding-top: 130.49rpx;
+	box-sizing: border-box;
+	text-align: center;
+	background: #fff;
+	border-top: 1rpx solid #e0e0e0;
+	.success{
+		width: 137.36rpx;
+		height: 137.36rpx;
+	}
+	.text{
+		font-size: 32.97rpx;
+		color: #333;
+		margin: 41.21rpx 0 5.49rpx;
+	}
+	.money{
+		font-size: 43.96rpx;
+		color: #333;
+		&:before{
+			content: '￥';
+			font-size: 32.97rpx;
+		}
+	}
+	.btn{
+		width: 576.92rpx;
+		height: 75.55rpx;
+		line-height: 75.55rpx;
+		background: #00d2c3;
+		border-radius: 8.24rpx;
+		font-size: 30.22rpx;
+		color: #fff;
+		margin-top: 217.03rpx;
+	}
+}
+</style>