You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
8.5 KiB
322 lines
8.5 KiB
<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" @click="scanningBanksClick">
|
|
<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, scanningBanks } from '@/config/api.js'
|
|
import { H5_API, WX_API,httpPrefix } from '@/config/site.config.js';
|
|
import { chooseImages } from '@/config/utils.js'
|
|
const _url = H5_API + WX_API + httpPrefix + 'app/apply-order/scanningBanks.do';
|
|
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()
|
|
console.log('_url')
|
|
console.log(_url)
|
|
},
|
|
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;
|
|
})
|
|
},
|
|
async scanningBanksClick() {
|
|
// let filePath = await chooseImages(2)
|
|
let _this = this
|
|
let timer = new Date() * 1
|
|
let token = 'Bearer '+ this.$store.state.user.vuex_loginInfo.accessToken
|
|
|
|
uni.chooseImage({
|
|
count: 1, //允许选择的数量
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], //从相册选择
|
|
success: res => {
|
|
// 上传图片到服务器
|
|
console.log(res.tempFilePaths[0])
|
|
uni.uploadFile({
|
|
url: _url,//接口
|
|
filePath: res.tempFilePaths[0],//要上传的图片的本地路径
|
|
name: 'file',
|
|
|
|
formData: {
|
|
path: 'complain/'+ uni.$u.date(timer, 'yyyy-mm-dd')+'/'+timer + '-'+ 'scanningBanks',
|
|
type: 1,
|
|
fileSuffix: "png"
|
|
},
|
|
header: {
|
|
Authorization: token,
|
|
'tenant-id': '1704459882232553474'
|
|
},
|
|
success(res) {
|
|
console.log('上传成功')
|
|
let res2 = JSON.parse(res.data)
|
|
if(res2.code==0) {
|
|
}
|
|
// _this.imgArr.push(res2.data)
|
|
console.log(res2)
|
|
uni.hideLoading();
|
|
},
|
|
complete: (comp)=> {console.log(comp)}
|
|
})
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|