398 lines
9.3 KiB
Vue
398 lines
9.3 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
|
|
<view class="box_">
|
|
<!-- -->
|
|
<view class="box_bs">
|
|
<view class="">结算账户类型</view>
|
|
<view class="dis_">
|
|
<view class="size_">对公账户</view>
|
|
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- -->
|
|
<view class="title_">
|
|
结算账户证明
|
|
</view>
|
|
<view class="upload-box">
|
|
<u-upload :fileList="fileList1" @afterRead="addInfoImg" @delete="deletePic" name="1" multiple
|
|
:maxCount="1" width="300" height="150">
|
|
<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 350px;height: 150px;"></image>
|
|
</u-upload>
|
|
</view>
|
|
<view class="box_bs">
|
|
<view class="">账户号</view>
|
|
<view class="right_size">
|
|
<input type="text" v-model="formData.bankAccountNo" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<view class="box_bs">
|
|
<view class="">账户名称</view>
|
|
<view class="right_size">
|
|
<input type="text" v-model="formData.settleAccName" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<view class="box_bs">
|
|
<view class="">银行名称</view>
|
|
<view class="dis_" @click="gobankList()">
|
|
<view class="size_" v-if="formData.issBankIdName">{{formData.issBankIdName}}</view>
|
|
<view class="size_" v-else>请选择</view>
|
|
|
|
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box_bs">
|
|
<view class="">开户行</view>
|
|
<view class="dis_" @click="selectKh()">
|
|
|
|
<view class="size_" v-if="formData.bankProvinceName">
|
|
{{formData.bankProvinceName+formData.bankCityName}}
|
|
</view>
|
|
<view class="size_" v-else>请选择</view>
|
|
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="box_bs" v-if="formData.issBankIdName&&formData.bankCityName">
|
|
<view class=""></view>
|
|
<view class="dis_" @click="selectBranch()">
|
|
|
|
<view class="size_" v-if="formData.bankOutletsName">
|
|
{{formData.bankOutletsName}}
|
|
</view>
|
|
<view class="size_" v-else>请选择支行</view>
|
|
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="box_bs">
|
|
<view class="">结算周期</view>
|
|
<view class="dis_">
|
|
|
|
<view class="size_">
|
|
{{this.formData.settlementCycleName}}
|
|
</view>
|
|
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="button_p" @click="nextStep()">
|
|
<view class="">下一步</view>
|
|
</view>
|
|
<level-linkage valueName="code" keyName="name" ref="selectKind" :pickerValueDefault="kindDefault"
|
|
@onConfirm="kindConfirm" themeColor='#007AFF'></level-linkage>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from '../../components/header/headers.vue'
|
|
import request from '../../utils/request.js'
|
|
import upload from '@/utils/upload.js'
|
|
import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
overlayShow: false,
|
|
titles: "结算卡信息录入",
|
|
msg: "1",
|
|
dataList: [],
|
|
fileList1: [],
|
|
fileList2: [],
|
|
show: false,
|
|
status: 'loading',
|
|
formData: {
|
|
areaType: "4", //商户类型 7 企业写死
|
|
legalPerson: {
|
|
address: "",
|
|
backPic: "",
|
|
backPicUrl: "",
|
|
certEffectDate: "",
|
|
certExaDate: "",
|
|
certNo: "",
|
|
certType: "11",
|
|
certTypeName: "身份证",
|
|
city: "",
|
|
cityName: "",
|
|
county: "",
|
|
countyName: "",
|
|
email: "",
|
|
facePic: "",
|
|
facePicUrl: "",
|
|
firstCareerName: "",
|
|
firstCareerNo: "",
|
|
gender: "1",
|
|
mobileNo: "",
|
|
nation: "CHN",
|
|
nationLabel: "中国",
|
|
participantName: "",
|
|
province: "",
|
|
provinceName: "",
|
|
secondCareerName: "",
|
|
secondCareerNo: "",
|
|
sort: 0,
|
|
thirdCareerName: "",
|
|
thirdCareerNo: ""
|
|
},
|
|
contacts: {
|
|
county: "",
|
|
},
|
|
openAccount: "",
|
|
openAccountUrl: "",
|
|
rate: "0.25",
|
|
steps: "3", //步骤当前页面写死第一页，
|
|
|
|
},
|
|
merchantId: null,
|
|
kindDefault: [0, 0],
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options && options.merchantId) {
|
|
this.merchantId = options.merchantId
|
|
this.getMerchantInfo()
|
|
}
|
|
this.getBankArea()
|
|
let that = this
|
|
uni.$on("chooseBankZcy2", function(data) {
|
|
that.chooseBankOk(data)
|
|
})
|
|
uni.$on("chooseBranchZcy2", function(data) {
|
|
that.chooseBranchOk(data)
|
|
})
|
|
|
|
|
|
},
|
|
|
|
components: {
|
|
headers,
|
|
levelLinkage
|
|
},
|
|
methods: {
|
|
selectBranch() {
|
|
uni.navigateTo({
|
|
url: '/homePages/enterpriseMerchant/bankBranchList?bankCode=' + this.formData.issBankId +
|
|
"&code=" + this.formData.bankCity
|
|
})
|
|
},
|
|
kindConfirm(data) {
|
|
// 银行地址选择
|
|
this.formData.bankProvinceName = data.firstPick.name
|
|
this.formData.bankProvince = data.firstPick.code
|
|
this.formData.bankCityName = data.secondPick.name
|
|
this.formData.bankCity = data.secondPick.code
|
|
},
|
|
async getBankArea() {
|
|
let res = await request({
|
|
url: 'app/drop/getBankArea',
|
|
method: 'get'
|
|
})
|
|
if (res.code == 0) {
|
|
this.bankArea = res.data
|
|
this.$refs.selectKind.init(res.data);
|
|
}
|
|
},
|
|
selectKh() {
|
|
this.$refs.selectKind.open();
|
|
},
|
|
chooseBranchOk(data) {
|
|
this.formData.bankOutletsName = data.bankBranchName
|
|
this.formData.bankOutlets = data.bankBranchCode
|
|
},
|
|
chooseBankOk(data) {
|
|
this.formData.issBankIdName = data.bankName
|
|
this.formData.issBankId = data.bankCode
|
|
this.formData.bankOutletsName = null
|
|
this.formData.bankOutlets = null
|
|
|
|
},
|
|
gobankList() {
|
|
uni.navigateTo({
|
|
url: '/homePages/enterpriseMerchant/bankList'
|
|
})
|
|
},
|
|
async getMerchantInfo() {
|
|
let ress = await request({
|
|
url: 'app/report/newBaseInfo',
|
|
method: 'post',
|
|
data: {
|
|
objectId: this.merchantId
|
|
}
|
|
})
|
|
this.formData = ress.data
|
|
this.formData.steps = '4'
|
|
//账户类型
|
|
this.formData.settleAccType = "0030"
|
|
this.formData.settleAccTypeName = "对公账户"
|
|
this.formData.settlementCycle = "T1"
|
|
this.formData.settlementCycleName = "次工作日自动结算(T+1)"
|
|
if (this.formData.settleAccPicUrl) {
|
|
this.fileList1 = []
|
|
let tempImg1 = {
|
|
url: this.formData.settleAccPicUrl
|
|
}
|
|
this.fileList1.push(tempImg1)
|
|
}
|
|
|
|
},
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
|
|
},
|
|
async uploadFile(url, fileName, type) {
|
|
uni.showLoading({
|
|
title: '上传中'
|
|
});
|
|
this.overlayShow = true
|
|
upload({
|
|
url: 'app/report/fileUplod',
|
|
filePath: url,
|
|
formData: {
|
|
type: null,
|
|
fileName: fileName
|
|
}
|
|
|
|
}).then((res) => {
|
|
let that = this
|
|
if (res.code == 0) {
|
|
this.formData.settleAccPic = res.data.externalKey
|
|
this.formData.settleAccPicUrl = res.data.imgUrl
|
|
}
|
|
}).finally((res) => {
|
|
this.overlayShow = false
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
//银行卡信息
|
|
async addInfoImg(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
|
const result = await this.uploadFile(lists[i].url, lists[i].name, event.name)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
|
|
},
|
|
async nextStep() {
|
|
let res = await request({
|
|
url: 'app/report/newBaseInfoSaveOrUpdate',
|
|
method: 'post',
|
|
data: this.formData
|
|
})
|
|
if (res.code == 0) {
|
|
|
|
uni.navigateTo({
|
|
url: '/homePages/enterpriseMerchant/BusinessPhotos?merchantId=' + res
|
|
.merchantId
|
|
})
|
|
|
|
}
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #f4f5f6;
|
|
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
background: #f4f5f6;
|
|
box-sizing: border-box;
|
|
padding-top: 88px;
|
|
padding-bottom: 88px;
|
|
}
|
|
|
|
.box_ {
|
|
width: 95%;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: #fff;
|
|
margin: 15px auto;
|
|
}
|
|
|
|
.box_bs {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 10px 0px;
|
|
color: #aeaeae;
|
|
border-bottom: 1px solid #eeeeee;
|
|
}
|
|
|
|
.dis_ {
|
|
display: flex;
|
|
}
|
|
|
|
.size_ {
|
|
margin-right: 5px;
|
|
color: #000;
|
|
}
|
|
|
|
.title_ {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin: 10px 0px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.upload-box {
|
|
width: 100%;
|
|
margin: 5px 0px;
|
|
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.upload-title {
|
|
font-size: 16px;
|
|
margin-right: 10%;
|
|
|
|
}
|
|
|
|
.right_size {
|
|
text-align: right;
|
|
}
|
|
|
|
.button_p {
|
|
width: 100%;
|
|
background: #E4612E;
|
|
height: 55px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|