358 lines
8.2 KiB
Vue
358 lines
8.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="header">
|
||
<view class="header-icon">
|
||
<u-icon name="tags-fill" color="white" size="32"></u-icon>
|
||
</view>
|
||
<view class="header-title">收款方银行信息</view>
|
||
<view class="header-content">
|
||
<view class="header-flex">
|
||
<label>开户银行</label>
|
||
<view>{{bankData.name}}</view>
|
||
</view>
|
||
<view class="header-flex">
|
||
<label>银行卡号</label>
|
||
<view>{{bankData.no}}</view>
|
||
</view>
|
||
<view class="header-flex">
|
||
<label>支付金额</label>
|
||
<view>{{price}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="remarkText" v-if="type == 'edit'">
|
||
<text class="name">驳回原因：</text>{{remark}}
|
||
</view>
|
||
<view class="form">
|
||
<view class="cover-header">
|
||
<view>
|
||
<view class="cover-title">上传打款凭证</view>
|
||
<view class="cover-subtitle">长按图片可删除已上传图片</view>
|
||
</view>
|
||
<view class="cover-num">{{pathArr.length}}/9</view>
|
||
</view>
|
||
<view class="cover-flex">
|
||
<view class="cover-item" v-for="(item, index) in pathArr" :key="index" @longpress="onRemove(index)">
|
||
<image class="cover-item-src" :src="item" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="cover-item border" @click="albumClick" v-if="pathArr.length < 9">
|
||
<image class="cover-item-add" src="@/static/icons/img_add.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="form-input">
|
||
<label>打款金额</label>
|
||
<input type="digit" maxlength="20" v-model="price" placeholder="请输入打款金额">
|
||
</view>
|
||
<view class="form-input">
|
||
<label>汇款姓名</label>
|
||
<input type="text" maxlength="8" v-model="name" placeholder="请输入打款人姓名">
|
||
</view>
|
||
<view class="form-input form-upd">
|
||
<label>打款凭证</label>
|
||
<image class="form-upd-img" @click="albumClick" :src="showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||
</view> -->
|
||
<view class="idcardBtn">
|
||
<button class="idcardBtn-go" @click="issueForm">确认提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { uploads } from '@/apis/interfaces/uploading'
|
||
import { bankInfo, offlineOpen, bankSee, bankEdit } from '@/apis/interfaces/synthesis'
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderType: '', // 订单类型
|
||
bankData : '', // 账户信息
|
||
price : '', // 打款金额
|
||
name : '', // 打卡账户
|
||
pathArr : [], // 凭证图片
|
||
type : '', // 是否为编辑
|
||
remark : '', // 驳回原因
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.type = this.$Route.query.type
|
||
this.price = this.$Route.query.price
|
||
// 查看打款凭证-查看提交信息
|
||
this.yearServe();
|
||
// 查看提交信息
|
||
if(this.$Route.query.type == 'edit') {
|
||
bankSee(this.$Route.query.payId,{
|
||
order_type : this.$Route.query.orderType,
|
||
order_id : this.$Route.query.orderId
|
||
}).then(res => {
|
||
// 这里需要重新处理打款信息
|
||
this.price = res.price
|
||
this.name = res.name
|
||
this.pathArr = res.cover
|
||
this.remark = res.remark
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 查看打款凭证
|
||
yearServe(page){
|
||
bankInfo().then(res => {
|
||
this.bankData = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 请上传转款电子回单
|
||
albumClick() {
|
||
var _this = this
|
||
uni.chooseImage({
|
||
count : 9 - this.pathArr.length,
|
||
sizeType : ['original', 'compressed'],
|
||
sourceType : ['album','camera'],
|
||
success: path=> {
|
||
let { tempFilePaths } = path
|
||
let paths = tempFilePaths.map((val, index) => {
|
||
return {
|
||
name: 'file' + index,
|
||
uri : val
|
||
}
|
||
})
|
||
uploads(paths).then(res => {
|
||
|
||
|
||
|
||
this.pathArr = this.pathArr.concat(res.url)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
});
|
||
},
|
||
|
||
// 表单提交
|
||
issueForm(e) {
|
||
let data = {
|
||
order_type : this.$Route.query.orderType.replace(/\-/g, '\\'),
|
||
order_id : this.$Route.query.orderId,
|
||
price : this.price,
|
||
cover : this.pathArr
|
||
}
|
||
if(this.$Route.query.type == 'edit') {
|
||
bankEdit(this.$Route.query.payId, data).then(res => {
|
||
this.onBack()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
return
|
||
}
|
||
offlineOpen(data).then(res => {
|
||
this.onBack()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 删除图片数据
|
||
onRemove(index){
|
||
uni.vibrateShort()
|
||
this.pathArr.splice(index, 1)
|
||
},
|
||
|
||
// 返回上一页
|
||
onBack(){
|
||
uni.showModal({
|
||
title : '提示',
|
||
content : '打款凭证已提交，请耐心等待审核',
|
||
showCancel : false,
|
||
success : modalRes => {
|
||
if(modalRes.confirm){
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background-color: $window-color;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
padding: 80rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
// 驳回原因
|
||
.remarkText{
|
||
background: white;
|
||
margin-top: 30rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
line-height: 50rpx;
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
color: gray;
|
||
.name{
|
||
color: $text-price;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
// form
|
||
.form{
|
||
background: white;
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 30rpx;
|
||
// 上传图片数组
|
||
.cover-header{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 30rpx;
|
||
.cover-title{ line-height: 50rpx; font-size: 32rpx; color: #333; font-weight: bold; }
|
||
.cover-subtitle{ line-height: 40rpx; font-size: 28rpx; color: gray; }
|
||
.cover-num{ font-weight: bold; color: $main-color; line-height: 50rpx; font-size: 30rpx; }
|
||
}
|
||
.cover-flex{
|
||
margin: -10rpx -20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.cover-item{
|
||
position: relative;
|
||
width: calc(33.33% - 40rpx);
|
||
margin: 20rpx;
|
||
padding-top: calc(33.33% - 40rpx);
|
||
background: #f8f8f8;
|
||
.cover-item-src{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.cover-item-add{
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-top: -34rpx;
|
||
margin-left: -34rpx;
|
||
}
|
||
}
|
||
}
|
||
// 表单
|
||
.form-input{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
@extend .border-solid;
|
||
label{
|
||
color: gray;
|
||
font-size: 32rpx;
|
||
width: 200rpx;
|
||
}
|
||
input{
|
||
flex: 1;
|
||
height: 90rpx;
|
||
text-align: right;
|
||
font-size: 32rpx;
|
||
}
|
||
// 上传
|
||
.form-upd-img{
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
}
|
||
.idcardBtn{
|
||
padding-top: 30rpx;
|
||
.idcardBtn-go{
|
||
background: $main-color;
|
||
color: white;
|
||
font-size: 34rpx;
|
||
line-height: 100rpx;
|
||
height: 100rpx;
|
||
padding: 0;
|
||
font-weight: bold;
|
||
border-radius: 20rpx;
|
||
&::after{ display: none; }
|
||
}
|
||
}
|
||
}
|
||
// header
|
||
.header{
|
||
background: white;
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
padding: 80rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.header-icon{
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -49rpx;
|
||
margin-left: -49rpx;
|
||
background: $main-color;
|
||
color: white;
|
||
height: 98rpx;
|
||
width: 98rpx;
|
||
line-height: 98rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.header-title{
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
.header-content{
|
||
background: $window-color;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
font-size: 32rpx;
|
||
.header-flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
label{
|
||
color: gray;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|