198 lines
4.7 KiB
Vue
198 lines
4.7 KiB
Vue
<template>
|
||
<view class="recharge">
|
||
<view class="recharge-block">
|
||
<view class="recharge-title">
|
||
充值金额 <uni-icons class="recharge-title-icon" size="20" @click="rechargeToast" type="info-filled" color="#ddd"></uni-icons>
|
||
</view>
|
||
<view class="recharge-input">
|
||
<label>￥</label>
|
||
<input type="digit" v-model="priceValue" placeholder="输入充值金额" />
|
||
</view>
|
||
</view>
|
||
<view class="recharge-block">
|
||
<view class="recharge-title">
|
||
快速充值
|
||
</view>
|
||
<view class="recharge-fast">
|
||
<view class="recharge-fast-item" @click="onRecharge(50)">
|
||
<view class="recharge-fast-price">50<text>元</text></view>
|
||
<view class="recharge-fast-numb">50<text>DT积分</text></view>
|
||
</view>
|
||
<view class="recharge-fast-item" @click="onRecharge(100)">
|
||
<view class="recharge-fast-price">100<text>元</text></view>
|
||
<view class="recharge-fast-numb">100<text>DT积分</text></view>
|
||
</view>
|
||
<view class="recharge-fast-item" @click="onRecharge(200)">
|
||
<view class="recharge-fast-price">200<text>元</text></view>
|
||
<view class="recharge-fast-numb">200<text>DT积分</text></view>
|
||
</view>
|
||
<view class="recharge-fast-item" @click="onRecharge(500)">
|
||
<view class="recharge-fast-price">500<text>元</text></view>
|
||
<view class="recharge-fast-numb">500<text>DT积分</text></view>
|
||
</view>
|
||
<view class="recharge-fast-item" @click="onRecharge(1000)">
|
||
<view class="recharge-fast-price">1000<text>元</text></view>
|
||
<view class="recharge-fast-numb">1000<text>DT积分</text></view>
|
||
</view>
|
||
<view class="recharge-fast-item" @click="onRecharge(5000)">
|
||
<view class="recharge-fast-price">5000<text>元</text></view>
|
||
<view class="recharge-fast-numb">5000<text>DT积分</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="recharge-btn">
|
||
<button :disabled="this.priceValue === ''" @click="onRecharge">充值</button>
|
||
<view class="recharge-text">提示：暂时仅支持使用微信支付充值</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { recharge } from "@/apis/interfaces/account"
|
||
export default {
|
||
data() {
|
||
return {
|
||
priceValue: ''
|
||
};
|
||
},
|
||
methods: {
|
||
// 充值说明
|
||
rechargeToast(){
|
||
uni.showModal({
|
||
title: '充值说明',
|
||
content: '充值比例为1：1',
|
||
showCancel:false
|
||
})
|
||
},
|
||
|
||
// 充值
|
||
onRecharge(value){
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
})
|
||
recharge({
|
||
amount: typeof(value) === 'number' ? value: this.priceValue
|
||
}).then(res => {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
orderInfo: res,
|
||
success: res => {
|
||
console.log(res)
|
||
},
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: err.errMsg,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
console.log('充值记录')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.recharge{
|
||
background: $window-color;
|
||
min-height: 100vh;
|
||
padding-top: $padding;
|
||
box-sizing: border-box;
|
||
.recharge-block{
|
||
background-color: white;
|
||
border-radius: $radius;
|
||
padding: $padding;
|
||
margin: 0 $margin $margin $margin;
|
||
.recharge-title{
|
||
font-weight: bold;
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
line-height: 50rpx;
|
||
.recharge-title-icon{
|
||
margin-left: $margin/2;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.recharge-input{
|
||
position: relative;
|
||
height: 90rpx;
|
||
padding-left: 40rpx;
|
||
padding-top: 20rpx;
|
||
label{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
line-height: 74rpx;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
input{
|
||
height: 90rpx;
|
||
font-size: 46rpx;
|
||
}
|
||
}
|
||
}
|
||
// 充值金额选择
|
||
.recharge-fast{
|
||
padding-top: $padding/2;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 0 -10rpx;
|
||
&-item{
|
||
width: calc(33.33% - 20rpx);
|
||
margin: 10rpx;
|
||
text-align: center;
|
||
border:solid 1px $main-color;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
height: 140rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
.recharge-fast-numb{
|
||
font-size: 24rpx;
|
||
color: gray;
|
||
}
|
||
.recharge-fast-price{
|
||
color: $main-color;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
// 充值
|
||
.recharge-btn{
|
||
padding: $padding;
|
||
button{
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
background: $main-color;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
border-radius: 45rpx;
|
||
&::after{
|
||
display: none;
|
||
}
|
||
&[disabled]{
|
||
opacity: .6;
|
||
}
|
||
}
|
||
.recharge-text{
|
||
padding: $padding 0;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
color: gray;
|
||
}
|
||
}
|
||
}
|
||
</style>
|