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;
				case 2:
					url = 'recharge';
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

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