zhwl-miniapp/pages/my/openCard.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="con">
			<view class="form">
				<view class="list">
					<view class="label">姓名<text class="red">*</text></view>
					<input type="text" :adjust-position="false" v-model="form.name" disabled placeholder="请输入联系人姓名" />
                    <view class="list_btn" @click="toMin">去修改</view>
				</view>
				<view class="list">
					<view class="label">手机号<text class="red">*</text></view>
					<input type="number" :adjust-position="false" v-model="form.phone" disabled placeholder="请输入手机号" />
				</view>
			</view>
			<view class="row">
				<view class="label">充值金额<text class="red">*</text></view>
				<view class="sum">
                    <input type="number" v-model="form.balance" @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="num">{{item}}</text>
				</view>
			</view>
			<view class="btn" @click="getOpen">开卡</view>
		</view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            paddingTop: 0,
            bgColor: '#FFF',
			form: {
				name: '',
				phone: '',
				balance: null
			},
			sumList: [100, 200, 300, 400, 500, 600],
			activeSum: null
        }
    },
    async onShow () {
        let user = await this.$http.getUserInfo();
        if (!user.data || (!user.data.name || !user.data.mobile)) {
            uni.showToast({ mask: true, title: '请完善个人信息', icon: 'none' })
            setTimeout(() => {
                uni.navigateTo({ url: '/pages/my/myProfile' })
            }, 1500)
            return false;
        }
        this.form.name = user.data.name;
        this.form.phone = user.data.mobile;
        this.paddingTop = this.$paddingTop;
    },
    methods: {
        toMin () {
            setTimeout(() => {
                uni.navigateTo({ url: '/pages/my/myProfile' })
            }, 1500)
        },
        checkActiveSum () {
            let num = this.form.balance;
            num = (num.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
            this.$nextTick(() => {
                this.form.balance = num;
            })
        },
		changeSum(e) {
			this.activeSum = e;
			this.form.balance = e;
		},
		async getOpen() {
			if (!this.form.name) {
				uni.showToast({ mask: true, title: '请输入姓名', icon: 'none' });
				return;
			}
			if (!this.form.phone) {
				uni.showToast({ mask: true, title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!this.form.balance) {
				uni.showToast({ mask: true, title: '请选择充值金额', icon: 'none' });
				return;
			}
			let info = await this.$http.postPrepaidCard(this.form);
			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
                		})
                		setTimeout(() => {
                			uni.navigateBack()
                		}, 1500)
                	},
                	fail: (err) => {
                        uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
                        setTimeout(() => {
                        	uni.navigateBack()
                        }, 1500)
                		
                	}
                });
			} else {
				uni.$u.toast(info.msg);
			}
		}
    }
}
</script>

<style lang="scss">
page{ background: #F6F6F6; }
.uni-container{
    width: 100%;
	.con {
		padding: 32rpx 24rpx;
		.form{
			padding: 0 32rpx; background: #FFFFFF; border-radius: 10rpx;
			.list{
				height: 106rpx; line-height: 106rpx; border-bottom: 1rpx solid #E8E8E8; display: flex; align-items: center; position: relative; box-sizing: border-box; padding-right: 120rpx;
				&:last-child{ border-bottom: 0; }
				.label{ font-size: 28rpx; color: rgba(0,0,0,0.85); width: 170rpx; }
				input{ flex: 1; height: 100%; color: rgba(0,0,0,0.85); font-size: 28rpx; }
				/deep/.input-placeholder { font-weight: 400; font-size: 28rpx; color: rgba(0,0,0,0.25); }
                .list_btn{ color: #03AE80; font-size: 28rpx; width: 120rpx; height: 70rpx; line-height: 70rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
			}
		}
		.row {
			padding: 0 32rpx; height: 92rpx; background: #FFFFFF; border-radius: 10rpx; display: flex; align-items: center; margin-top: 20rpx;
			.label { font-size: 28rpx; color: rgba(0,0,0,0.85); width: 170rpx; }
			.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; }
				.num { font-size: 32rpx; font-weight: Bold; }
			}
			.active { background: rgba(3,174,128,0.03); border: 2rpx solid #03AE80; }
		}
		.btn { margin: 48rpx 0 32rpx; width: 702rpx; height: 96rpx; background: #03AE80; border-radius: 64rpx; line-height: 96rpx; text-align: center; font-size: 32rpx; color: #FFFFFF; }
		.red { color: #FF3333; }
	}
}
</style>