WashingCar-frontend-Ver3.0/pages/myBalance/myBalance.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="myBalance">
		<view class="top">
			
		</view>
		<view class="charge-header" :class="{chargeActive:balance.vip===1}">
			<view class="charge-header-box">
				<view class="charge-header-box-left">
					<view class="title">
						<img class="title-i" src="https://www.jiubaotongxue.love/image/demo53.png" alt="" />
						<text class="title-t">总金额（元）</text>
					</view>
					<view class="strongeTxt">
						{{balance.balance}}
					</view>
					<view class="bt">
						当前余额适用于平台全门店
					</view>
				</view>
				<view class="charge-header-box-right">
					<text class="jiaobiao" v-if="balance.vip===1">至尊会员</text>
					<img class="jiaobiao" src="https://www.jiubaotongxue.love/image/vip6.png" alt="" v-if="balance.vip===0"  />
					<img class="header-img" :src="wxImg ? wxImg :'https://www.jiubaotongxue.love/image/demo32.png'" alt="" />
				</view>
			</view>
			<view class="charge-header-bottom">
				<view class="charge-header-bottom-left" @click="explainBtn">
					余额说明
				</view>
				|
				<view class="charge-header-bottom-left" @click="secondBright">
					余额明细
				</view>
			</view>
		</view>
	</view>
	<explain v-if="explainShow===1" @close="close"></explain>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {onLoad} from '@dcloudio/uni-app'
	import {balances}from '../../stor/balances/balances.js'
	import { storeToRefs } from 'pinia';
	const b = balances()
	const wxImg = ref()
	const {balance} =  storeToRefs(b)
	b.getBalanceApi()
	const titles = ref('我的余额')
	const bgcolor= ref('#fff')
	const color = ref('#000')
	onLoad(()=>{
		wxImg.value=uni.getStorageSync('wxImg')
	})
	const explainShow = ref(0)
	
	const explainBtn = () => {
		explainShow.value = 1
	}
	const close = (val) => {
		explainShow.value = val
	}
	const secondBright = () => {
		uni.navigateTo({
			url: "/pages/balance/balance"
		})
	}
</script>

<style lang="scss">
	.myBalance{
		width: 100%;
		height: 100%;
		background-color: #f1f4fb;
		position: absolute;
		.top{
			width: 100%;
			height: 11%;
			
		}
		.charge-header {
			width: 90%;
			height: 308rpx;
			background: linear-gradient(270deg, #1B7BEA 0%, #7EB6FE 100%);
			border: 1rpx solid #02a7f0;
			border-bottom: none;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 32rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		
			.charge-header-box {
				width: 100%;
				height: 244rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				.charge-header-box-left {
					width: 70%;
					height: 244rpx;
		
					.title {
						width: 100%;
						height: 40rpx;
						display: flex;
						margin-top: 40rpx;
		
						.title-i {
							display: block;
							width: 40rpx;
							height: 40rpx;
							margin-left: 40rpx;
		
						}
		
						.title-t {
							display: block;
							font-size: 28rpx;
							color: white;
							margin-left: 10rpx;
						}
					}
		
					.strongeTxt {
						width: 100%;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 64rpx;
						box-sizing: border-box;
						padding-left: 40rpx;
						color: white;
						margin-top: 6rpx;
					}
		
					.bt {
						width: 100%;
						height: 32rpx;
						line-height: 32rpx;
						box-sizing: border-box;
						padding-left: 30rpx;
						font-size: 22rpx;
						color: white;
						margin-top: 10rpx;
					}
		
				}
		
				.charge-header-box-right {
					width: 30%;
					height: 224rpx;
		
					.jiaobiao {
						display: block;
						width: 124rpx;
						height: 52rpx;
						margin-top: 12rpx;
						margin-left: 79rpx;
						border-radius: 20rpx 0rpx 0rpx 20rpx;
						background-color: #797372;
						font-size: 22rpx;
						color: #fad590;
						text-align: center;
						line-height: 52rpx;
					}
		
					.header-img {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						margin-top: 38rpx;
						margin-left: 80rpx;
					}
				}
			}
		
			.charge-header-bottom {
				// margin-top: 20rpx;
				width: 100%;
				height: 64rpx;
				background-color: #2e8af5;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: white;
		
				.charge-header-bottom-left {
					width: 50%;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 26rpx;
				}
			}
		}
		.chargeActive{
			background-image: url("https://www.jiubaotongxue.love/image/zhizun1.png");
			.charge-header-bottom{
				background-color: #3e3d3a;
				color:#fad590
			}
		}
	}
</style>