zhwl-miniapp/pages/my/openCard.vue

166 lines
5.9 KiB
Vue
Raw Normal View History

2025-06-26 12:38:35 +08:00
<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>