tearoom/page_user/chongzhi.vue

<template>
	<view class="page">
		<u-navbar title="账户充值" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar">
		</u-navbar>
        <image src="https://api.ccttiot.com/smartmeter/img/static/uTDP47Cowrvt1ZnhBEv8" mode="" class="imgbj"></image>
        <view class="topyue">
        	<image src="https://api.ccttiot.com/smartmeter/img/static/uzZg6YljFqKFxiNaigKV" class="imgpic" mode=""></image>
			<view class="top">
				账户余额（元）
			</view>
			<view class="price">
				2568.00
			</view>
			<view class="mingxi" @click="btnmx">
                消费明细 <image src="https://api.ccttiot.com/smartmeter/img/static/uXWltzqFG5ZoTU0aiguI" mode=""></image>				
			</view>
        </view>
		<view class="bd">
			<view class="bdbox">
				<view class="cxprice">
					充值金额
				</view>
				<view class="list">
					<view class="list_item" v-for="(item,index) in 5" :id="tabindex == index ? 'active' : ''" @click="btntab(index)" :key="index">
						<text class="one" :id="tabindex == index ? 'active' : ''">￥300</text>
						<text :id="tabindex == index ? 'active' : ''">到账450</text>
					</view>
				</view>
				<view class="cxprice" style="margin-top: 64rpx;margin-bottom: 28rpx;">
					充值说明：
				</view>
				<view class="tishi">
					1、充值余额永久有效，不支持退款；
				</view>
				<view class="tishi">
					2、充值余额可用于门店的预定、订单续单；
				</view>
				<view class="tishi">
					3、充值余额支持购买套餐；
				</view>
				<view class="tishi" style="display: flex;align-items: center;">
					4、充值余额仅限指定门店使用 <view @click="btnmd">查看可用门店 <image src="https://api.ccttiot.com/smartmeter/img/static/ugiD72nWCEkSrO71mrBP" mode=""></image> </view>
				</view>
			</view>
		</view>
        <view class="chadianp" v-if="mendianflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uQ9Lap86n7hzNGtzAVIV" mode=""></image>
			<view class="name">
				余额适用门店
			</view>
			<view class="list">
				<view class="list_item" v-for="(item,inde) in 10" :key="index">
					【宁德-某某路店】
				</view>
			</view>
			<view class="anniu" @click="mendianflag = false">
				我知道了
			</view>
        </view>
		<view class="mask" v-if="mendianflag"></view>
		<view class="anniu">
			立即充值
		</view> 

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "",
                },
				tabindex:-1,
				mendianflag:false
			}
		},
		onLoad() {

		},
		methods: {
			// 点击切换充值金额
			btntab(index){
				this.tabindex = index
			},
			// 点击查看门店
			btnmd(){
				this.mendianflag = true
			},
			// 点击跳转到余额使用明细页
			btnmx(){
				uni.navigateTo({
					url:'/page_user/pricemx'
				})
			}
		}
	}
</script>

<style lang="scss">
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .5;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
	}
	#active{
		background: #48893B !important;
		color: #fff !important;
	}
	page {
		background: #fff;
		.chadianp{ 
			width: 674rpx;
			height: 880rpx;
			background: linear-gradient( 180deg, #DEF1DA 18%, #FFFFFF 20%, #FFFFFF 100%);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			position: fixed;
			top: 352rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
			padding: 0 40rpx;
			box-sizing: border-box;
			.name{
				font-weight: 600;
				font-size: 48rpx;
				color: #48893B;
				height: 164rpx;
				line-height: 164rpx;
			}
			.anniu{
				width: 406rpx;
				height: 86rpx;
				line-height: 86rpx;
				background: #48893B;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom: 54rpx;
			}
			image{
				width: 166rpx;
				height: 164rpx;
				position: fixed;
				top: 0;
				right: 0;
			}
			.list{
				width: 100%;
				height: 520rpx;
				overflow: scroll;
				.list_item{
					margin-top: 40rpx;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}
		}
		.anniu{
			width: 674rpx;
			height: 96rpx;
			background: #48893B;
			border-radius: 53rpx 53rpx 53rpx 53rpx;
			text-align: center;
			line-height: 96rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			position: fixed;
			left: 50%;
			bottom: 106rpx;
			transform: translateX(-50%);
		}
		.bd{
			position: relative;
			.bdbox{
				.list{
					display: flex;
					flex-wrap: wrap;
					margin-top: 32rpx;
					.list_item{
						margin: 6rpx;
						width: 214rpx;
						height: 124rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #7C7C7C;
						text-align: center;
						padding-top: 20rpx;
						box-sizing: border-box;
						text{
							font-size: 24rpx;
							color: #3D3D3D;
							display: block;
						}
						.one{
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;
						}
					}
				}
				position: absolute;
				top: 0;
				left: 0;
				width: 750rpx;
				height: 1145rpx;
				background: #FFFFFF;
				border-radius:  30rpx 30rpx 0 0;
				padding: 44rpx 38rpx;
				box-sizing: border-box;
				.cxprice{
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
				.tishi{
					font-size: 26rpx;
					color: #3D3D3D;
					margin-bottom: 14rpx;
					view{
						color: #48893B;
						display: flex;
						align-items: center;
						margin-left: 6rpx;
						image{
							margin-left: 10rpx;
							width: 14rpx;
							height: 36rpx;
						}
					}
				}
			}
		}
		.topyue{
			position: relative;
			padding: 34rpx 74rpx;
			box-sizing: border-box;
			margin-top: 26rpx;
			.top{
				font-weight: 600;
				font-size: 32rpx;
				color: #48893B;
			}
			.price{
				font-weight: 600;
				font-size: 72rpx;
				color: #48893B;
				margin-top: 14rpx;
			}
			.mingxi{
				font-size: 28rpx;
				color: #48893B;
				display: flex;
				align-items: center;	
				margin-top: 26rpx;
				image{
					width: 14rpx;
					height: 36rpx;
					margin-left: 4rpx;
					margin-top: 4rpx;
				}
			}
			.imgpic{
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 674rpx;
				height: 336rpx;
				z-index: -1;
			}
		}
		.imgbj{
			width: 750rpx;
			height: 572rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

</style>