提现页面；提现成功页面；钱包设置页面；

App.vue

@@ -88,12 +88,22 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 /*每个页面公共css */
 @import '@/common/uni.css';
 page {
 	height: 100%;
 	background: #f3f3f3;
+	&:before{
+		content: '';
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		z-index: 1;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
 }
 button::after{
 	display: none;

pages.json

@@ -208,12 +208,33 @@
 			}
 		},
 		{
-			"path" : "pages/self/wallet/success",
+			"path" : "pages/self/wallet/paySuccess",
 			"style" : 
 			{
 				"navigationBarTitleText" : "",
 				"backgroundColor": "#fff"
 			}
+		},
+		{
+			"path" : "pages/self/wallet/cash",
+			"style" : 
+			{
+				"navigationBarTitleText" : "提现"
+			}
+		},
+		{
+			"path" : "pages/self/wallet/cashSuccess",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/self/wallet/setting",
+			"style" : 
+			{
+				"navigationBarTitleText" : "钱包设置"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/order/index.scss

@@ -1,132 +1,132 @@
 .page-wrap {
-		padding-top: 82.42rpx;
-	}
+	padding-top: 82.42rpx;
+}
+
+.tabs-panel {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	height: 82.42rpx;
+	background: #fff;
+	display: flex;
+	z-index: 1;
 
-	.tabs-panel {
-		position: fixed;
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
 		left: 0;
-		top: 0;
 		right: 0;
-		height: 82.42rpx;
-		background: #fff;
-		display: flex;
-		z-index: 1;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
 
-		&::before,
-		&::after {
+	&::before {
+		top: 0;
+	}
+
+	&::after {
+		bottom: 0;
+	}
+
+	.item {
+		flex: 1;
+		text-align: center;
+		font-size: 27.47rpx;
+		color: #999;
+		line-height: 82.42rpx;
+		position: relative;
+
+		& + .item::before {
 			content: '';
 			position: absolute;
 			left: 0;
-			right: 0;
-			height: 1rpx;
+			top: 0;
+			bottom: 0;
+			width: 1rpx;
 			background: #e0e0e0;
 		}
+	}
 
-		&::before {
-			top: 0;
-		}
+	.active {
+		color: #00bcd2;
 
 		&::after {
-			bottom: 0;
+			content: '';
+			position: absolute;
+			left: 0%;
+			right: 0%;
+			bottom: 0%;
+			height: 5.49rpx;
+			background: #00bcd2;
+			z-index: 1;
 		}
+	}
+}
 
-		.item {
+.order-panel {
+	padding: 13.74rpx 0;
+	.item {
+		background: #fff;
+		& + .item {
+			margin-top: 13.74rpx;
+		}
+	}
+	.head {
+		display: flex;
+		align-items: center;
+		padding: 0 27.47rpx;
+		height: 82.42rpx;
+		border-bottom: 1rpx solid #e0e0e0;
+		.icon {
+			width: 35.71rpx;
+			height: 35.71rpx;
+		}
+		.business {
+			margin: 0 13.74rpx;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 			flex: 1;
-			text-align: center;
 			font-size: 27.47rpx;
-			color: #999;
-			line-height: 82.42rpx;
-			position: relative;
-
-			&+.item::before {
-				content: '';
-				position: absolute;
-				left: 0;
-				top: 0;
-				bottom: 0;
-				width: 1rpx;
-				background: #e0e0e0;
-			}
+			color: #333;
 		}
-
-		.active {
-			color: #00bcd2;
-
-			&::after {
-				content: '';
-				position: absolute;
-				left: 0%;
-				right: 0%;
-				bottom: 0%;
-				height: 5.49rpx;
-				background: #00bcd2;
-				z-index: 1;
-			}
+		.state {
+			font-size: 27.47rpx;
+			color: #f97631;
 		}
 	}
-
-	.order-panel {
-		padding: 13.74rpx 0;
-		.item{
-			background: #fff;
-			&+.item{
-				margin-top: 13.74rpx;
-			}
+	.content {
+		position: relative;
+		height: 206.04rpx;
+		padding: 27.47rpx 219.78rpx 27.47rpx 27.47rpx;
+		box-sizing: border-box;
+		.name {
+			font-size: 32.97rpx;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			margin-bottom: 10.99rpx;
+		}
+		.text {
+			font-size: 27.47rpx;
+			color: #999;
 		}
-		.head{
-			display: flex;
-			align-items: center;
-			padding: 0 27.47rpx;
-			height: 82.42rpx;
-			border-bottom: 1rpx solid #e0e0e0;
-			.icon{
-				width: 35.71rpx;
-				height: 35.71rpx;
-			}
-			.business{
-				margin: 0 13.74rpx;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				flex: 1;
-				font-size: 27.47rpx;
-				color: #333;
-			}
-			.state{
-				font-size: 27.47rpx;
-				color: #F97631;
-			}
+		.money {
+			font-size: 27.47rpx;
+			color: #666;
+			white-space: nowrap;
+			position: absolute;
+			top: 96.15rpx;
+			right: 27.47rpx;
 		}
-		.content{
-			position: relative;
-			height: 206.04rpx;
-			padding: 27.47rpx 219.78rpx 27.47rpx 27.47rpx;
-			box-sizing: border-box;
-			.name{
-				font-size: 32.97rpx;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				margin-bottom: 10.99rpx;
-			}
-			.text{
-				font-size: 27.47rpx;
-				color: #999;
-			}
-			.money{
-				font-size: 27.47rpx;
-				color: #666;
-				white-space: nowrap;
-				position: absolute;
-				top: 96.15rpx;
-				right: 27.47rpx;
-			}
-			.sub{
-				position: absolute;
-				right: 27.47rpx;
-				top: 54.95rpx;
-				font-size: 27.47rpx;
-				color: #666;
-			}
+		.sub {
+			position: absolute;
+			right: 27.47rpx;
+			top: 54.95rpx;
+			font-size: 27.47rpx;
+			color: #666;
 		}
-	}
+	}
+}

pages/self/wallet/cash.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="page-wrap">
+		<view class="header-panel">
+			提现金额
+			<view class="input-wrap">
+				<input class="input" type="digit" maxlength="10" />
+			</view>
+			<view class="money">
+				可提金额 3296.00 元，
+				<text class="btn">全部提现</text>
+			</view>
+		</view>
+		<view class="title-row">提现至</view>
+		<view class="pay-row">
+			<image class="icon" src="../../../static/icon_pay_ccb.png"></image>
+			<view class="name">
+				建行善付通
+				<text class="desc">6222 8042 5063 2401 868</text>
+			</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">
+				绑定微信
+				<text class="desc">18863100789</text>
+			</view>
+		</view>
+		<view class="pay-row">
+			<image class="icon" src="../../../static/svg/wallet_pay.svg"></image>
+			<view class="name">
+				公对公转账
+				<text class="desc">招商银行 70260122000076868</text>
+			</view>
+		</view>
+		<view class="pay-row">
+			<image class="icon" src="../../../static/icon_pay_other.png"></image>
+			<view class="name">
+				其他
+				<text class="desc">线下人工处理</text>
+			</view>
+		</view>
+		<button class="submit-btn" @click="handleCash">申请提现</button>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {
+		handleCash() {
+			uni.redirectTo({
+				url: 'cashSuccess'
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.header-panel {
+	height: 274.73rpx;
+	background: #fff;
+	padding: 27.47rpx;
+	box-sizing: border-box;
+	font-size: 27.47rpx;
+	color: #666;
+	.input-wrap {
+		width: 631.87rpx;
+		border-bottom: 1rpx solid #e0e0e0;
+		margin: 48.08rpx auto 0;
+		height: 61.81rpx;
+		position: relative;
+		&:before {
+			content: '￥';
+			font-size: 27.47rpx;
+			position: absolute;
+			left: 20.6rpx;
+			bottom: 6.87rpx;
+		}
+		.input {
+			font-size: 49.45rpx;
+			color: #000;
+			width: 100%;
+			height: 100%;
+			padding-left: 54.95rpx;
+		}
+	}
+	.money {
+		font-size: 24.73rpx;
+		color: #999;
+		margin: 20.6rpx 0 0 54.95rpx;
+	}
+	.btn {
+		font-size: 24.73rpx;
+		color: #0384d6;
+	}
+}
+.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: 109.89rpx;
+	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;
+		.desc {
+			display: block;
+			color: #999;
+		}
+	}
+	.checkbox {
+		width: 32.97rpx;
+		height: 32.97rpx;
+		position: absolute;
+		right: 27.47rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
+}
+.submit-btn {
+	width: 631.87rpx;
+	height: 75.55rpx;
+	line-height: 75.55rpx;
+	background: #079eff;
+	border-radius: 8.24rpx;
+	font-size: 30.22rpx;
+	color: #fff;
+	margin: 82.42rpx auto 0;
+}
+</style>

pages/self/wallet/cashSuccess.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="page-wrap">
+		<image class="success" src="../../../static/svg/success.svg"></image>
+		<text class="text">提现申请已提交\n我们会尽快处理，请注意查收</text>
+		<view class="money">2000.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;
+	.success{
+		width: 137.36rpx;
+		height: 137.36rpx;
+	}
+	.text{
+		display: block;
+		font-size: 32.97rpx;
+		color: #333;
+		margin: 41.21rpx 0 27.47rpx;
+	}
+	.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>

pages/self/wallet/index.vue

@@ -67,6 +67,12 @@ export default {
 				case 2:
 					url = 'recharge';
 					break;
+				case 3:
+					url = 'cash';
+					break;
+				case 4:
+					url = 'setting';
+					break;
 			}
 			uni.navigateTo({
 				url

pages/self/wallet/pay.vue

@@ -37,7 +37,7 @@
 		methods: {
 			handlePay(){
 				uni.redirectTo({
-					url: 'success'
+					url: 'paySuccess'
 				})
 			}
 		}

pages/self/wallet/success.vue

@@ -31,7 +31,6 @@
 	box-sizing: border-box;
 	text-align: center;
 	background: #fff;
-	border-top: 1rpx solid #e0e0e0;
 	.success{
 		width: 137.36rpx;
 		height: 137.36rpx;

pages/self/wallet/setting.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="page-wrap">
+		<view class="title-row">安全设置</view>
+		<view class="text-row">
+			<view class="label">启用钱包</view>
+			<switch checked color="#409eff" style="transform: scale(0.7)" />
+		</view>
+		<view class="text-row">
+			<view class="label">支付和提现时需短信验证</view>
+			<switch checked color="#409eff" style="transform: scale(0.7)" />
+		</view>
+		<view class="text-row">
+			<view class="label">验证手机</view>
+			<view class="text">18863100789</view>
+			<image class="arrow" src="../../../static/svg/arrow.svg"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.title-row {
+	height: 82.42rpx;
+	padding: 27.47rpx 27.47rpx 0;
+	box-sizing: border-box;
+	font-size: 27.47rpx;
+	color: #666;
+}
+.text-row {
+	height: 96.15rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 41.21rpx;
+	font-size: 27.47rpx;
+	color: #333;
+	background: #fff;
+	& + .text-row {
+		border-top: 1rpx solid #e0e0e0;
+	}
+	.text {
+		flex: 1;
+		text-align: right;
+		color: #515151;
+	}
+	.arrow {
+		width: 34.34rpx;
+		height: 34.34rpx;
+	}
+	switch{
+		margin-right: -13.74rpx;
+	}
+}
+</style>