我的钱包

src/pages.json

@@ -163,6 +163,7 @@
 						"navigationBarTitleText": "我的钱包",
 						"enablePullDownRefresh": false,
 						"disableScroll": true,
+						"navigationStyle": "custom", // 隐藏系统导航栏
 						"navigationBarBackgroundColor":"#F4F5F7"
 					}
 				}

src/pages/mine/wallet/index.vue

 <template>
-	<view>
-		
+	<view class="wallet-view">
+		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="我的钱包" titleColor="#333333" :border-bottom="false"></u-navbar>
+		<image class="header-image" mode="widthFix" :src="qianbaobeijing"></image>
+		<view class="survey-view">
+			<view class="survey-top-view">
+				<view class="survey-top-left">
+					<view>账户总资产（元）</view>
+					<view>{{info.totalPayAmount}}</view>
+				</view>
+				<view class="survey-top-right">
+					<u-button>提现</u-button>
+				</view>
+			</view>
+			<view class="survey-bottom-view">
+				<view v-for="(value, key) in items" :key="key">
+					<view>{{value}}</view>
+					<view>{{info[key]}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="content-view">
+			<view v-for="(item, index) in lists" :class="['content-list', {'first': index==0}]" :key="index">
+				<view class="content-list-left">
+					<image class="content-list-image" :src="item.icon"></image>
+					<view class="content-list-text">
+						<view class="content-list-text-title">{{item.title}}</view>
+						<view>{{item.content}}</view>
+					</view>
+				</view>
+				<view class="content-list-right">
+					<text class="content-list-right-text">点击查看</text>
+					<u-icon name="arrow-right"></u-icon>
+				</view>
+			</view>
+		</view>
+		<view class="list-view">
+			
+		</view>
 	</view>
 </template>
 
@@ -8,15 +44,126 @@
 	export default {
 		data() {
 			return {
-				
+				info: {
+					canApplyAmount: 0, // 可提现金额	
+					saveApplyCount: 0, // 已申请提现的支付单数	
+					canApplyCount: 0, // 可申请提现的支付单数	
+					saveAndApplyAmount: 0, // 已申请提现金额	
+					totalPayAmount: 0, // 总共收入
+					/* 还没对字段名 */
+					dairuzhang: 0, // 预计待入账
+				}
 			}
 		},
+		computed: {
+			lists() {
+				return [{
+					title: '结算账单',
+					content: '展示您已提现的账单信息',
+					icon: this.imageUrl + 'jiesuan.png'
+				},{
+					title: '收入流水',
+					content: '当前展示最近5条，点击查看全部',
+					icon: this.imageUrl + 'liushui.png'
+				}]
+			},
+			items() {
+				return {canApplyAmount:'可提现（元）', dairuzhang:'预计待入账（元）'}
+			},
+			imageUrl() {
+				return process.uniEnv.qn_base_url
+			},
+			qianbaobeijing() {
+				return this.imageUrl + 'qianbaobeijing.png'
+			},
+		},
 		methods: {
 			
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.wallet-view {
+		position: relative;
+		height: 100vh;
+		overflow: auto;
+		background-color: #F4F5F7;
+		
+		.header-image {
+			position: absolute;
+			width: 100%;
+			margin-left: 4rpx;
+			margin-top: 10rpx;
+		}
+		.survey-view {
+			position: relative;
+			height: 400rpx;
+			margin: 30rpx 30rpx 10rpx 30rpx;
+			color: #FFFFFF;
+			padding: 30rpx;
+			.survey-top-view {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+				.survey-top-left {
+					
+				}
+				.survey-top-right {
+					
+				}
+			}
+			.survey-bottom-view {
+				display: flex;
+				justify-content: space-between;
+			}
+		}
+			
+		.content-view {
+			position: relative;
+			padding: 0 30rpx;
+			.content-list {
+				height: 140rpx;
+				border-radius: 12rpx;
+				display: flex;
+				justify-content: space-between;
+				padding: 30rpx;
+				background-color: #FFFFFF;
+				&.first {
+					margin-bottom: 20rpx;
+				}
+				.content-list-left {
+					display: flex;
+					.content-list-image {
+						width: 56rpx;
+						height: 56rpx;
+						margin-top: 2rpx;
+					}
+					.content-list-text {
+						font-size: 24rpx;
+						color: #666666;
+						margin-left: 20rpx;
+						.content-list-text-title {
+							font-size: 32rpx;
+							color: #333333;
+						}
+					}
+				}
+				.content-list-right {
+					color: #2272FF;
+					font-size: 26rpx;
+					.content-list-right-text {
+						margin-right: 4rpx;
+					}
+				}
+			}
+		}
+			
+		.list-view {
+			position: relative;
+			
+			
+		}
+	}
 
 </style>