企业钱包

pages.json

@@ -171,6 +171,13 @@
 			{
 				"navigationBarTitleText" : "订单详情"
 			}
+		},
+		{
+			"path" : "pages/self/wallet/index",
+			"style" : 
+			{
+				"navigationBarTitleText" : "企业钱包"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/index.scss

@@ -80,7 +80,6 @@
 			right: 0;
 			height: 1rpx;
 			background: #e0e0e0;
-			transform: scaleY(.5);
 		}
 
 		.item {
@@ -100,7 +99,6 @@
 				top: 0;
 				bottom: 0%;
 				background: #e0e0e0;
-				transform: scaleX(.5);
 			}
 
 			&:first-child::before {

pages/self/index.vue

@@ -166,6 +166,9 @@ export default {
 				case 3:
 					url = 'invoice/index';
 					break;
+				case 4:
+					url = 'wallet/index';
+					break;
 			}
 			uni.navigateTo({
 				url

pages/self/order/detail.vue

@@ -224,11 +224,13 @@
 				margin: -5.49rpx 0;
 			}
 		}
-		.arrow-row{
-			.label{
+
+		.arrow-row {
+			.label {
 				flex: 1;
 			}
-			.arrow{
+
+			.arrow {
 				width: 32.97rpx;
 				height: 32.97rpx;
 			}

pages/self/wallet/index.scss

@@ -0,0 +1,112 @@
+.header-panel{
+	height: 215.66rpx;
+	background: #ffd102;
+	overflow: hidden;
+	.avatar{
+		float: left;
+		width: 109.89rpx;
+		height: 109.89rpx;
+		border-radius: 50%;
+		margin: 27.47rpx 27.47rpx 0 41.21rpx;
+	}
+	.name{
+		font-size: 32.97rpx;
+		color: #060606;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin: 38.46rpx 0 6.87rpx;
+	}
+	.desc{
+		font-size: 27.47rpx;
+		color: #333;
+	}
+}
+.total-panel{
+	width: 686.81rpx;
+	height: 219.78rpx;
+	border-radius: 16.48rpx 16.48rpx 0 0;
+	background: #fff;
+	margin: -54.95rpx auto 0;
+	display: flex;
+	.col{
+		flex: 1;
+		color: #333;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		&+.col::before{
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 1rpx;
+			height: 137.36rpx;
+			background: #e0e0e0;
+		}
+		.money{
+			font-size: 49.45rpx;
+		}
+		.label{
+			font-size: 27.47rpx;
+			margin-top: 27.47rpx;
+		}
+	}
+}
+.nav-panel{
+	background: #fff;
+	width: 686.81rpx;
+	margin: 48.08rpx auto 0;
+	.item{
+		height: 96.15rpx;
+		display: flex;
+		align-items: center;
+		padding: 0 27.47rpx;
+		border-top: 1rpx solid #e0e0e0;
+		&:first-child{
+			border: none;
+		}
+	}
+	.icon{
+		width: 43.96rpx;
+		height: 43.96rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 13.74rpx;
+		&-img{
+			width: 38.46rpx;
+			height: 38.46rpx;
+			&-1{
+				width: 43.96rpx;
+				height: 43.96rpx;
+			}
+		}
+	}
+	.label{
+		flex: 1;
+		font-size: 27.47rpx;
+		color: #333;
+	}
+	.arrow{
+		width: 34.34rpx;
+		height: 34.34rpx;;
+	}
+}
+.foot-panel{
+	position: fixed;
+	left: 50%;
+	bottom: 41.21rpx;
+	white-space: nowrap;
+	transform: translateX(-50%);
+	font-size: 21.98rpx;
+	color: #999;
+	text-align: center;
+	.link{
+		display: block;
+		color: #0384D6;
+	}
+}

pages/self/wallet/index.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="page-wrap">
+		<view class="header-panel">
+			<image class="avatar" src="../../../static/img_avatar.png" mode="aspectFill"></image>
+			<view class="name">天津超易达胜科技发展有限公司</view>
+			<view class="desc">911201033006420997</view>
+		</view>
+		<view class="total-panel">
+			<view class="col">
+				<view class="money">4539.58</view>
+				<view class="label">账户余额</view>
+			</view>
+			<view class="col">
+				<view class="money">360429.26</view>
+				<view class="label">累计消费</view>
+			</view>
+		</view>
+		<view class="nav-panel">
+			<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>
+				</view>
+				<view class="label">
+					{{ item.label }}
+				</view>
+				<image class="arrow" src="../../../static/svg/arrow.svg"></image>
+			</view>
+		</view>
+		<view class="foot-panel">
+			<text class="link">了解企业钱包</text>
+			本服务由鑫鑫园区小程序提供
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				navList: [{
+					label: '资金明细记录',
+					value: 1
+				}, {
+					label: '我要充值',
+					value: 2
+				}, {
+					label: '我要提现',
+					value: 3
+				}, {
+					label: '设置',
+					value: 4
+				}, ]
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import 'index.scss';
+</style>