school_uni/package1/myCenter/wallet.vue

<template>
	<!-- 我的钱包 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					我的钱包
				</view>
			</view>
		</view>
		<view class="content">
			<view style="width: 100%;height: 100px;border: 1px solid red;">
				<view>用户余额(元)</view>
				<view>268.50</view>
				<view>
					钱包安全保障中
				</view>
				<view @tap="withDraw" class="">
					提现
				</view>
			</view>
			<view style="display: flex;">
				<view style="flex: 1;border: 1px solid green;height: 80px;">
					<view>配送兼职佣金(元)</view>
					<view>156.80</view>
				</view>
				<view style="flex: 1;border: 1px solid orange;height: 80px;">
					<view>店铺余额(元)</view>
					<view>111.70</view>
					<view @tap="$refs.shopPopup.open()" >
						筛选
					</view>
				</view>
			</view>
			<view class="">
				<view class="" style="display: flex;height: 30px;line-height: 30px;">
					<view class="" style="flex:1;">
						余额明细
					</view>
					<view class="" style="flex:1;">
						筛选全部
					</view>
				</view>
				<view class="" style="display: flex;text-align: center;height: 80px;border: 1px solid #000;">
					<view style="flex: 1;text-align: left;">
						<img src="/static/images/dingdan/dd0.png" alt="" style="width: 50px;height: 50px;background-size: 100%;">
					</view>
					<view class="" style="flex: 1;">
						<view class="">
							配送兼职收入
						</view>
						<view class="">
							订单号:#8257461
						</view>
					</view>
					<view class="" style="flex: 1;">
						<view class="">
							-23.50
						</view>
						<view class="">
							05-20 18:30
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="shopPopup" type="bottom" background-color="#F5F8F5">
			<view style="width: 100%; height: 800rpx; display: flex; flex-direction: column;">
				<view style="height: 100rpx; line-height: 100rpx; text-align: center; font-size: 32rpx; font-weight: bold; border-bottom: 1px solid #eee; position: relative; background: #fff;">
					选择店铺
					<uni-icons type="closeempty" size="24" @tap="$refs.couponPopup.close()" style="position: absolute; right: 30rpx; top: 0;"></uni-icons>
				</view>
				<view class="">
					<view>我的店铺一</view>
					<view>我的店铺二</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			//提现
			withDraw(){
				uni.showToast({
					title:'提现成功'
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}
	
	.content{
		position: absolute;
		top: 200rpx;
		width: 95%;
		margin-left: 2.5%;
	}
	
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
		bottom: 0;
		left: 20rpx;
	}
	.title-name{
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
</style>