parent
f8f7114fc9
commit
939d6656c8
@ -0,0 +1,233 @@ |
||||
<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: #f06c7a; |
||||
&.on{ |
||||
background-color: #f06c7a; |
||||
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: #f06c7a; |
||||
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: #f06c7a; |
||||
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> |
||||
Loading…
Reference in new issue