TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

充值，共力人生

Browse Source
This commit is contained in:
唐明明
2022-06-08 19:26:51 +08:00
parent bc8ff42533
commit 64ddd2547d
157 changed files with 2441 additions and 2001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
pages/account/recharge.vue
View File

@@ -1,19 +1,195 @@
<template>
<view>
充值
<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 => {
console.log(res)
uni.requestPayment({
provider: 'wxpay',
orderInfo: res,
success: res => {
console.log(res)
},
fail(err) {
console.log(err)
}
})
}).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>