MoeNovaClient/pages/my/wallet.vue

<template>
	<view class="wallet-page">
		<view class="card-item card-item1" @click="goPage('/pages/vip/M_purchase')">
			<view class="card-item-title">
				<image src="../../static/icon/coin_m.png" mode="widthFix"></image>我的M币
			</view>
			<view class="card-item-balance">
				<view class="card-item-balance-num">{{ num_gmm }}</view>
				<view class="card-item-balance-btn scale-tap">充值</view>
			</view>
		</view>
		<view class="card-item card-item2" @click=" goPage('/pages/my/job?type=recharge') ">
			<view class="card-item-title">
				<image src="../../static/icon/coin_cd.png" mode="widthFix"></image>钱包余额
			</view>
			<view class="card-item-balance">
				<view class="card-item-balance-num">{{ num_gmd }}</view>
				<view class="card-item-balance-btn scale-tap">兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num_gmd: 0,
			num_gmm: 0,
		}
	},
	onLoad() {
		this.getDetail()
	},
	methods: {
		goPage(url) {
			setTimeout(() => {
				uni.navigateTo({
					url: url
				})
			}, 300)
		},
		getDetail() {
			uni.request({
				url: this.$apiHost + "/User/getinfo",
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					console.log(res.data);
					if (res.data) { 
						this.num_gmd = res.data.num_gmd
						this.num_gmm = res.data.num_gmm
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background: #F2F6F2;
}

.wallet-page {
	padding: 0 32rpx;
	width: 100vw;
	box-sizing: border-box;

	.card-item {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
		background: url('../../static/me/wallet_card_bg1.png') no-repeat center center / 100% 100%;
		padding: 28rpx 28rpx 38rpx 38rpx;
		margin-top: 20rpx;

		.card-item-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			padding-bottom: 28rpx;
		}

		.card-item-balance {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card-item-balance-num {
				font-size: 52rpx;
				font-weight: 400;
				font-family: 'PingFang SC-Bold';

			}

			.card-item-balance-btn {
				width: 122rpx;
				height: 60rpx;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		&.card-item1 {
			.card-item-title {
				color: #fff;
			}

			.card-item-balance {
				.card-item-balance-num {
					color: #ACF934;
				}
			}

			.card-item-balance-btn {
				background: linear-gradient(225deg, #E8FFC3, #ACF934);
				font-size: 26rpx;
				color: #1F1F1F;
			}
		}

		&.card-item2 {
			background: url('../../static/me/wallet_card_bg2.png') no-repeat center center / 100% 100%;
			color: #1F1F1F;

			.card-item-balance {
				.card-item-balance-num {}
			}

			.card-item-balance-btn {
				color: #ACF934;
				background: #1F1F1F;
			}
		}
	}
}
</style>