179 lines
5.9 KiB
Vue
179 lines
5.9 KiB
Vue
|
<template>
|
|||
|
<view class="uni-container">
|
|||
|
<u-navbar :autoBack="true" :placeholder="true" :bgColor="bgColor">
|
|||
|
<view slot='center' style="font-size: 36rpx; font-weight: bold;">一卡通</view>
|
|||
|
</u-navbar>
|
|||
|
<view class="noData" v-if="!detail">
|
|||
|
<image class="img" src="../../static/image/mine/noData.png" mode=""></image>
|
|||
|
<view class="label">暂无一卡通~</view>
|
|||
|
<view class="btn btn1" @click="getOpen">去开卡</view>
|
|||
|
</view>
|
|||
|
<view class="con" v-if="detail">
|
|||
|
<view class="card">
|
|||
|
<image class="img" src="../../static/image/mine/card.png" mode=""></image>
|
|||
|
<view class="text">
|
|||
|
<view class="label">卡内余额</view>
|
|||
|
<view class="num">{{detail.balance}}</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="h4">余额充值</view>
|
|||
|
<view class="row">
|
|||
|
<view class="label1">充值金额<text class="red">*</text></view>
|
|||
|
<view class="sum">
|
|||
|
<input type="number" v-model="activeSum" @input="checkActiveSum" placeholder="请输入充值金额" />
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="sum-box">
|
|||
|
<view :class="['sum-item', activeSum == item ? 'active' : '']" v-for="(item, index) in sumList" :key="index" @click="changeSum(item)">
|
|||
|
¥<text class="num1">{{item}}</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="btn btn2" @click="recharge">充值</view>
|
|||
|
<view class="row1" @click="goRecord">
|
|||
|
<view class="label">
|
|||
|
<image class="icon" src="../../static/image/mine/ywjl.png" mode=""></image>
|
|||
|
消费记录
|
|||
|
</view>
|
|||
|
<uni-icons class="icon" type="right"></uni-icons>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
export default {
|
|||
|
data () {
|
|||
|
return {
|
|||
|
paddingTop: 0,
|
|||
|
bgColor: '#FFF',
|
|||
|
detail: null,
|
|||
|
sumList: [100, 200, 300, 400, 500, 600],
|
|||
|
activeSum: null
|
|||
|
}
|
|||
|
},
|
|||
|
onLoad () {
|
|||
|
this.paddingTop = this.$paddingTop;
|
|||
|
},
|
|||
|
onShow () {
|
|||
|
this.getPrepaidCard();
|
|||
|
},
|
|||
|
methods: {
|
|||
|
checkActiveSum () {
|
|||
|
let num = this.activeSum;
|
|||
|
num = (num.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
|
|||
|
this.$nextTick(() => {
|
|||
|
this.activeSum = num;
|
|||
|
})
|
|||
|
},
|
|||
|
async getPrepaidCard() {
|
|||
|
let info = await this.$http.getPrepaidCard();
|
|||
|
this.detail = info.data;
|
|||
|
},
|
|||
|
changeSum(e) {
|
|||
|
this.activeSum = e;
|
|||
|
},
|
|||
|
getOpen() {
|
|||
|
uni.navigateTo({ url: '/pages/my/openCard' })
|
|||
|
},
|
|||
|
goRecord() {
|
|||
|
uni.navigateTo({ url: `/pages/my/consumeRecord?accountNo=${this.detail.accountNo}` })
|
|||
|
},
|
|||
|
async recharge() {
|
|||
|
if (!this.activeSum) {
|
|||
|
uni.showToast({ mask: true, title: '请选择充值金额', icon: 'none' });
|
|||
|
return;
|
|||
|
}
|
|||
|
let obj = { amount: this.activeSum, accountNo: this.detail.accountNo };
|
|||
|
let info = await this.$http.recharge(obj);
|
|||
|
if (info.code === 200) {
|
|||
|
let prepayId = JSON.parse(info.data.tradeSession);
|
|||
|
uni.requestPayment({
|
|||
|
provider: 'wxpay',
|
|||
|
timeStamp: prepayId.timeStamp,
|
|||
|
nonceStr: prepayId.nonceStr,
|
|||
|
package: prepayId.packageValue,
|
|||
|
signType: prepayId.signType,
|
|||
|
paySign: prepayId.paySign,
|
|||
|
success: (res) => {
|
|||
|
uni.showToast({
|
|||
|
title: '充值成功',
|
|||
|
mask: true
|
|||
|
})
|
|||
|
this.activeSum = null;
|
|||
|
this.getPrepaidCard();
|
|||
|
},
|
|||
|
fail: (err) => {
|
|||
|
uni.hideLoading();
|
|||
|
uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
} else {
|
|||
|
uni.$u.toast(info.msg);
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss">
|
|||
|
page{ background: #F6F6F6; }
|
|||
|
.uni-container{
|
|||
|
width: 100%;
|
|||
|
.btn { width: 702rpx; height: 96rpx; background: #03AE80; border-radius: 64rpx; line-height: 96rpx; text-align: center; font-size: 32rpx; color: #FFFFFF; }
|
|||
|
.noData {
|
|||
|
margin-top: 210rpx; text-align: center;
|
|||
|
.img { width: 438rpx; height: 387rpx; margin: 0 auto; }
|
|||
|
.label { font-size: 28rpx; color: #666666; }
|
|||
|
.btn1 { margin: 100rpx auto 0; }
|
|||
|
}
|
|||
|
.con {
|
|||
|
padding: 32rpx 24rpx;
|
|||
|
.card {
|
|||
|
position: relative;
|
|||
|
.img { width: 702rpx; height: 252rpx; }
|
|||
|
.text {
|
|||
|
position: absolute; left: 32rpx; top: 32rpx;
|
|||
|
.label { font-size: 24rpx; color: #FFFFFF; }
|
|||
|
.num { margin-top: 32rpx; font-weight: bold; font-size: 48rpx; color: #FFFFFF; }
|
|||
|
}
|
|||
|
}
|
|||
|
.h4 { margin: 32rpx 0 20rpx; font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); }
|
|||
|
.row {
|
|||
|
width: 702rpx; height: 92rpx; background: #FFFFFF; border-radius: 10rpx; display: flex; align-items: center;
|
|||
|
.label1 {
|
|||
|
font-size: 28rpx; color: rgba(0,0,0,0.85); margin: 0 36rpx 0 32rpx;
|
|||
|
.red { color: #FF3333; }
|
|||
|
}
|
|||
|
.sum {
|
|||
|
font-size: 28rpx; color: rgba(0,0,0,0.65); flex: 1;
|
|||
|
input{ width: 100%; height: 100%; display: block; }
|
|||
|
}
|
|||
|
}
|
|||
|
.sum-box {
|
|||
|
display: flex; align-items: center; flex-wrap: wrap;
|
|||
|
.sum-item {
|
|||
|
margin: 20rpx 21rpx 0 0; width: 216rpx; height: 96rpx; background: #FFFFFF; border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|||
|
line-height: 96rpx; text-align: center; border: 2rpx solid #FFFFFF; font-size: 28rpx; color: #03AE80;
|
|||
|
&:nth-child(3n) { margin-right: 0; }
|
|||
|
.num1 { font-size: 32rpx; font-weight: Bold; }
|
|||
|
}
|
|||
|
.active { background: rgba(3,174,128,0.03); border: 2rpx solid #03AE80; }
|
|||
|
}
|
|||
|
.btn2 { margin: 48rpx 0 32rpx; }
|
|||
|
.row1 {
|
|||
|
width: 702rpx; height: 92rpx; display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box;
|
|||
|
.label {
|
|||
|
font-size: 28rpx; color: rgba(0,0,0,0.85); display: flex; align-items: center;
|
|||
|
.icon { width: 44rpx; height: 44rpx; margin-right: 8rpx; }
|
|||
|
}
|
|||
|
.icon {
|
|||
|
/deep/.uniui-right {
|
|||
|
font-size: 34rpx !important;
|
|||
|
color: rgba(0,0,0,0.85)!important;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</style>
|