zhwl-miniapp/pages/my/IPass.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>