<template> <view> <view class="block"> <view class="title"> 我的账户 </view> <view class="content"> <input type="number" class="my" placeholder="请输入手机号码" v-model="inputPhone" /> </view> </view> <view class="block"> <view class="title"> 充话费 </view> <view class="content"> <view class="amount"> <view class="list"> <view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount)" :class="{'on':amount == inputAmount}"> <view class="heTitle">{{amount}}元</view> <view class="mitext">售价{{amount}}元</view> </view> </view> <!-- <view class="num"> <view class="text"> 自定义充值金额 </view> <view class="input"> <input type="number" v-model="inputAmount" /> </view> </view> --> </view> </view> </view> <view class="pay"> <view class="btn" @tap="doDeposit">立即充值</view> </view> </view> </template> <script> export default { data() { return { inputAmount:'',//金额, inputPhone : '', //手机号码 amountList:[30,50,100,200,300,500]//预设3个可选快捷金额 }; }, methods:{ select(amount){ this.inputAmount = amount; }, doDeposit(){ if (parseFloat(this.inputAmount).toString() == "NaN") { uni.showToast({title:'请输入正确金额',icon:'none'}); return ; } if(this.inputAmount<=0){ uni.showToast({title:'请输入大于0的金额',icon:'none'}); return ; } if(parseFloat(this.inputAmount).toFixed(2)!=parseFloat(this.inputAmount)){ uni.showToast({title:'最多只能输入两位小数哦~',icon:'none'}); return ; } //模板模拟支付,实际应用请调起微信/支付宝 uni.showLoading({ title:'支付中...' }); setTimeout(()=>{ uni.hideLoading(); uni.showToast({ title:'支付成功' }); setTimeout(()=>{ uni.redirectTo({ url:'../../pay/success/success?amount='+this.inputAmount }); },300); },700) } }, onLoad() { }, } </script> <style lang="scss"> .block{ width: 94%; padding: 20upx 3%; .title{ width: 100%; font-size: 34upx; } .content{ .my{ width: 100%; height: 120upx; display: flex; align-items: center; font-size: 38upx; border-bottom: solid 1upx #eee; } .amount{ width: 100%; .list{ // display: flex; justify-content: space-between; padding: 20upx 0; height: 270upx; .box{ width: 30%; margin-right: 3%; margin-top: 20upx; float: left; height: 120upx; // display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 10upx; box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.05); font-size: 36upx; background-color: #f1f1f1; color: #0083f5; &.on{ background-color: #0083f5; color: #ffffff; } } .heTitle{ margin-top: 15upx; width: 100%; font-size: 15px; } .mitext{ margin-top: 10upx; width: 100%; font-size: 12px; } } .num{ margin-top: 40upx; display: flex; justify-content: flex-end; align-items: center; .text{ padding-right: 10upx; font-size: 30upx; } .input{ width: 28.2vw; border-bottom: solid 2upx #999; justify-content: flex-end; align-items: center; input{ margin: 0 20upx; height: 60upx; font-size: 30upx; color: #0083f5; justify-content: flex-end; align-items: center; } } } } .pay-list{ width: 100%; border-bottom: solid 1upx #eee; .row{ width: 100%; height: 120upx; display: flex; align-items: center; .left{ width: 100upx; flex-shrink: 0; display: flex; align-items: center; image{ width: 80upx; height: 80upx; } } .center{ width: 100%; font-size: 30upx; } .right{ width: 100upx; flex-shrink: 0; display: flex; justify-content: flex-end; } } } } } .pay{ margin-top: 100upx; width: 100%; display: flex; justify-content: center; flex-wrap: wrap; .btn{ width: 70%; height: 80upx; border-radius: 80upx; display: flex; justify-content: center; align-items: center; color: #fff; background-color: #0083f5; box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2); } .tis{ margin-top: 10upx; width: 100%; font-size: 24upx; display: flex; justify-content: center; align-items: baseline; color: #999; .terms{ color: #5a9ef7; } } } </style>