tuanfeng-shop-user/pages/tabbar/user/components/myPurse.vue

<template>
	<view class="MyPurseView">
		<view class=" font-weight-bold Purse">我的钱包</view>
		<view class="totalItemBox">
			<view class="item">
				<p>{{ accountInfo.price || '0.00' }}</p>
				<view @click="go('/pages_category_page2/userModule/memberAccount')" style="margin-top: 15rpx;font-size: 26rpx;color: #979797;">账户余额 ></view>
				<!-- <view style="font-size: 24upx;color: #999999;">去提现 ></view> -->
			</view>
			<view class="item">
				<p>{{ accountInfo.userVoucher || '0.00' }}</p>
				<view @click="go('/pages_category_page2/userModule/memberAccount')" style="margin-top: 15rpx;font-size: 26rpx;color: #979797;">代金券 ></view>
			</view>
			<view class="item">
				<p>{{ memberData.credit || '0.00' }}</p>
				<view @click="go('/pages_category_page1/integral/index')" style="margin-top: 15rpx;font-size: 26rpx;color: #979797;">积分 ></view>
				<!-- <view style="font-size: 24upx;color: #999999;">去提现 ></view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { getDistributorApi } from '@/api/user'
const NET = require('@/utils/request')
const API = require('@/config/api')
export default {
	name: 'myPurse',
	data() {
		return {
			accountInfo: {},
			memberData: {}
		};
	},
	created() {
		getDistributorApi({}).then((res) => { // 获取余额和带金卷数量
			this.accountInfo = res.data
			// console.log(this.accountInfo)
		}).catch((e) => {
			console.log(e)
		})
		
		if(uni.getStorageSync('storage_userInfo')){ // 获取余额和带金卷数量获取积分数量
			this.memberData = uni.getStorageSync('storage_userInfo')
		}else {
			NET.request(API.GetUser, {}, 'GET').then((res) => {
				this.memberData = res.data
			 uni.setStorageSync('storage_userInfo', this.memberData)
			}).catch((res) => {
				console.error(res)
			})
		}
	},
	methods: {
		go(url) {
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style lang="scss">
.Purse {
	font-size: 30rpx;
}
.MyPurseView {
	box-sizing: border-box;
	padding: 21rpx 25rpx 30rpx 25rpx;
	margin-bottom: 30rpx;
	margin-top: 33rpx;
	width: 100%;
	border-radius: 20rpx;
	background: #FFFFFF;
	.totalItemBox {
		padding: 0 70rpx;
		display: flex;
		justify-content: space-between;
	
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
	
			>p:nth-of-type(1) {
				margin-top: 18rpx;
				font-weight: 900;
				font-size: 36rpx;
			}
		}
	}
}
</style>