|
|
<template> <view class="form"> <view class="card"> <view class="row" @click="showReason=true"> <view class="lab">退款原因</view> <mySelect placeholder="请选择" :value="FormData.reasonName" style="flex: 1;"></mySelect> <view class="icon"> <u-icon name="arrow-right"></u-icon> </view> </view> <!-- <view class="tpsBlue">此操作容易造成您已有学时丢失，请谨慎！</view> --> <view class="row"> <view class="lab">退款金额</view> <view class="val"> <u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.amount" @blur="changePrice"></u--input> </view> </view> <view class="tpsHui">退款金额不可超过¥ {{$u.utils.priceTo(info.totalAmount)}}</view> </view> <view class="h1">收款信息</view> <view class="card"> <view class="row"> <view class="lab">持卡人</view> <view class="val"> <u--input placeholder="请输入" border="none" clearable v-model="FormData.stuName"></u--input> </view> </view> <view class="row"> <view class="lab">手机号</view> <view class="val"> <view class="flex-b"> <view class="inputBox"> <u--input placeholder="请输入" border="none" type="number" maxlength="11" v-model="FormData.mobile"></u--input> </view> <view class="code" @click='goSms' :class="{active: isPhone&&!codeOn}">{{codeText}}</view> </view> </view> </view> <view class="row"> <view class="lab" >验证码</view> <view class="val"> <u--input placeholder="请输入" border="none" type="number" maxlength="11" v-model="FormData.code"></u--input> </view> </view> <view class="row"> <view class="lab">卡号</view> <view class="val"> <view class="flex-b"> <view class="inputBox"> <u--input placeholder="请输入" border="none" clearable v-model="FormData.idCard"></u--input> </view> <view class="scan"> <image src="@/static/images/userCenter/btn_yinhangkax.png" mode=""></image> </view> </view> </view> </view> <view class="row"> <view class="lab">开户行</view> <view class="val"> <u--input placeholder="请输入" border="none" clearable v-model="FormData.bankName"></u--input> </view> </view> </view> <view class="btnBg" @click="applyOnlineFundFn">提交</view> <u-picker :show="showReason" :columns="reasonArr" keyName="label" @confirm="confirmReason" @cancel="showReason=false"></u-picker> </view></template>
<script> import { getdictDataList, applyOnlineFund, getLoginCode } from '@/config/api.js' export default { props: ['info', 'orderId'], data() { return { FormData: { reasonType: '', reasonName: '', mobile: '', amount: '', stuName: '' }, FormDataToast: { reasonName: '请选择退款原因', amount: '请输入退款金额', stuName: '请输入持卡人', mobile: '请输入手机号', code: '请输入验证码', idCard: '请输入卡号', bankName: '请输入开启行' }, showReason: false , codeOn: false, reasonArr: [], codeText: '发送验证码', } }, computed: { isPhone() { return uni.$u.test.mobile(this.FormData.mobile) } }, created() { this.getdictDataListFn() }, methods: { // 申请退款
applyOnlineFundFn() { let _this = this uni.showModal({ title: '确定要提交申请退款吗？', content: '提交申请后，待教练和驾校审核通过即可收到退款~', success: async ()=> { _this.onsubmit() } }) }, // 提交表单
async onsubmit() { for(let key in this.FormDataToast) { if(!this.FormData[key]) { return this.$u.toast(this.FormDataToast[key]) } } if(!this.isBankCardNumber(this.FormData.idCard)) return this.$u.toast('请输入正确的银行卡号') let obj = Object.assign({},this.FormData) obj.idCard = obj.idCard.replace(/\s/g, ''); obj.studentId = this.studentId obj.orderId = this.orderId obj.feeType = this.info.orderType const res = await applyOnlineFund(obj) if(res.code==0) { this.$u.toast('申请退款成功') this.FormData = { reasonType: '', reasonName: '', mobile: '', amount: '', stuName: '', bankName: '', idCard: '', code: '' } setTimeout(()=>{ this.$goPage('/pages/mineEntry/myOrder/detail/detail?orderId='+this.orderId+'&refundId='+res.data) },1500) } // console.log(res)
}, changePrice() { let maxPrice = this.$u.utils.priceTo(this.info.totalAmount) if(this.FormData.amount*1>maxPrice) { this.FormData.amount = '' return this.$u.toast('金额不得超过￥'+maxPrice) } }, async getdictDataListFn() { const {data: res} = await getdictDataList() this.reasonArr = [ res ] // console.log(res)
}, confirmReason(val) { let item = val.value[0] this.FormData.reasonName = item.label this.FormData.reasonType = item.value this.showReason = false console.log(item) }, // 基本的校验银行卡规则
isBankCardNumber(cardNumber) { // 去除空格
cardNumber = cardNumber.replace(/\s/g, ''); // 银行卡号一般为 12-19 位数字
const regex = /^[0-9]{12,19}$/; return regex.test(cardNumber); }, // 发送短信验证码
async goSms() { if (!this.FormData.mobile) return this.$u.toast('请输入手机号'); if (!this.isPhone) return this.$u.toast('手机号格式有误'); if (this.codeOn) return this.codeOn = true; let _this = this getLoginCode({ // codeType: 1,
mobile: this.FormData.mobile, scene: 1, }).then(()=>{ // 获取验证码
var time = 60; var timer = setInterval(() => { time--; _this.codeText = time + "秒后重新发送" if (time == 0) { clearInterval(timer); _this.codeText = "获取验证码"; _this.codeOn = false; } }, 1000); }).catch(()=>{ _this.codeOn = false; }) }, } }</script>
<style lang="scss" scoped> .h1 { margin: 20rpx 0; } .card { padding: 12rpx 28rpx; margin-bottom: 24rpx; .row { display: flex; align-items: center; justify-content: space-between; height: 80rpx; line-height: 80rpx; .lab { font-size: 28rpx; color: #333; font-weight: 500; width: 152rpx; } .val { flex: 1; &.tpsBlue { font-size: 24rpx; } .flex-b { .scan { width: 44rpx; height: 44rpx; } .code { flex-shrink: 0; color: #ADADAD; &.active { color: $themC; } } } } .icon { u-icon { } } } .tpsBlue { color: $themC; margin-bottom: 10rpx; padding-left: 152rpx; font-size: 24rpx; } .tpsHui { font-size: 24rpx; color: #ADADAD; padding: 0rpx 0 16rpx 0; } } .btnBg { width: 396rpx; margin: 94rpx auto; } </style>
|
