smartmeter-app/pages/userpage/czindex.vue

<template>
	<view>
		<u-navbar title="充值" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'></u-navbar>
			<view class="cont">
				<view class="jglist_box">
					<view class="jgli" v-for="(item,index) in jglist" :key="index" :class="jgindex==index? 'act1':''" @click="cgIdx(index)">
						{{item}}
					</view>
				</view>
				<view class="ipt_box" >
					<view class="ipt">
						<u-input v-model="value" :type="type" :border="border"  placeholder='自定义' placeholder-style="font-size: 32rpx;color: #A6A6A6;" @click="ckinpt()"/>
					</view>
					
					<view class="txt" style="margin-left: auto;margin-right: 20rpx;">
						元
					</view>
				</view>
				<view class="info_card">
					<view class="info_li">
						<view class="text">充值金额：50元</view>
						<view class="txt">
							
						</view>
					</view>
					<view class="info_li">
						<view class="text">到账电量：80.23度</view>
						<view class="txt">
							(单价0.6元/度)
						</view>
					</view>
					<view class="info_li">
						<view class="text">充值金额：50元</view>
						<view class="txt" @click="showtip=!showtip">
							查看明细 <u-icon name="arrow-down" v-show="showtip"></u-icon>  <u-icon name="arrow-up" v-show="showtip==false"></u-icon>
						</view>
					</view>
					<view class="tip" v-if="showtip">
						<view class="tip_txt">
							平台服务费：0.30
						</view>
					</view>
				</view>
				<view class="cztip">
					<view class="cztip_li">
						充值须知
						
					</view>
					<view class="cztip_li">
						
						1.充值时与蓝牙设备保持三米以内
						
					</view>
					<view class="cztip_li">
						
						2.支付成功后，需点击“完成”按钮，请勿直接退出
						
					</view>
					<view class="cztip_li">
						
						3.若发生充值异常，可以在“我的”，“常见问题”中排查
					</view>
				</view>
				<view class="patBtn" @click="payBtn()">
					立即支付
				</view>
				<u-mask :show="tipshow" @click="tipshow = false" z-index='10'>
						
				</u-mask>
				<view class="tip_box">
					<view class="cont">
						<view class="tit">温馨提示</view>
						<view class="texts">
							充值金额不低于10元
						</view>
						<view class="tip_btn">
							好的
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				jgindex:0,
				jglist:[
					'50元',
					'100元',
					'150元',
					'200元',
					'300元',
					'500元',
				],
				value: '',
				type: 'text',
				border: false,
				showtip:false,
				tipshow:true
				
			}
		},
		methods: {
			tobd(){
				uni.navigateTo({
					url:''
				})
			},
			cgIdx(idx){
				this.jgindex=idx
			},
			ckinpt(){
				this.jgindex=-1
			}
		}
	}
</script>

<style lang="scss" >
	page{
		background: #F7FAFE;
	}
.cont{
	width: 648rpx;
	margin: 16rpx auto 0;
	display: flex;
	// justify-content: center;
	flex-wrap: wrap;
	.jglist_box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.jgli:nth-child(3n) {
		    margin-right: 0;
		}
		.jgli{
			margin-top: 40rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 188rpx;
			height: 122rpx;
			background:  #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			border-radius: 20rpx;
			
			font-weight: 400;
			font-size: 32rpx;
			color: #383838;
			
		}
		.act1{
			background: #2A82E4;
			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	}
	.ipt_box{
		width: 420rpx;
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #A6A6A6;
		.ipt{
			margin-left: 20rpx;
			margin-right: 10rpx;
			/deep/.u-input__input{
				font-size: 32rpx !important;
				color: #A6A6A6 !important;
			}
		}
		
	}
	.info_card{
		margin-top: 46rpx;
		padding:20rpx 28rpx 40rpx 36rpx ;
		width: 648rpx;
		// height: 266rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
		display: flex;
		flex-wrap: wrap;
		.info_li{
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #383838;
			}
			.txt{
				font-weight: 400;
				font-size: 20rpx;
				color: #383838;
			}
		}
		.tip{
			display: flex;
			align-items: center;
			width: 576rpx;
			height: 70rpx;
			background-image: url('@/static/tpbg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.tip_txt{
				margin-left: 38rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #3D3D3D;
			}
		}
	}
	.cztip{
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		.cztip_li{
			width: 100%;
			font-weight: 400;
			font-size: 20rpx;
			color: #FF8D1A;
			line-height: 36rpx;
		}
	}
	.patBtn{
		margin-top: 152rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 590rpx;
		height: 84rpx;
		background: #2A82E4;
		border-radius: 50rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF
	}
	.tip_box{
	 display: flex;
	    align-items: center;
	    justify-content: center;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 12;
	    height: 100%;
		.cont{
			display: flex;
			justify-content: center;
			width: 616rpx;
			height: 360rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.tit{
				margin-top: 44rpx;
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 48rpx;
				color: #262B37;
			}
			.texts{
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #262B37;
			}
			.tip_btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 266rpx;
				height: 96rpx;
				background: #2A82E4;
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
}
</style>