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