XEH-miniProgram/pages/self/wallet/index.vue

<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: {

		handleNav(val) {
			let url = '';
			switch (val) {
				case 1:
					url = 'record';
					break;
			}
			uni.navigateTo({
				url
			});
		}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>