554 lines
13 KiB
Vue
554 lines
13 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-overlay :show="overlayShow"></u-overlay>
|
||
<view class="container">
|
||
<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
|
||
<view class="box_">
|
||
<view class="bs_img">
|
||
<view class="fifty">
|
||
<u-upload :fileList="fileList1" @afterRead="addInfoImg" @delete="deletePic" name="1" multiple
|
||
:maxCount="1" width="150" height="100">
|
||
<image src="/static/imgs/yhkzm.png" mode="widthFix" style="width: 150px;height: 100px;">
|
||
</image>
|
||
</u-upload>
|
||
<view class="" style="margin-top: 10px;">银行卡正面</view>
|
||
</view>
|
||
<view class="fifty">
|
||
<u-upload :fileList="fileList2" @afterRead="addInfoImg" @delete="deletePic" name="2" multiple
|
||
:maxCount="1" width="150" height="100">
|
||
<image src="/static/imgs/yhkfm.png" mode="widthFix" style="width: 150px;height: 100px;">
|
||
</image>
|
||
</u-upload>
|
||
<view class="" style="margin-top: 10px;">银行卡反面</view>
|
||
</view>
|
||
</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="number" v-model="formData.settleMobile" 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_" @click="selectSettle()">
|
||
<view v-if="!formData.settlementCycle" class="size_">请选择</view>
|
||
<view v-else class="size_">
|
||
{{this.formData.settlementCycleName}}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="box_bs" style="border: none;">
|
||
<view class="">签约期限</view>
|
||
<view class="dis_" v-if="this.formData.openAccEffectDate">
|
||
<view class="size_">{{this.formData.openAccEffectDate+'-'+this.formData.openAccExpDate}}</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="right-box">(期满双方如无异议自动续签一年)</view>
|
||
</view>
|
||
|
||
|
||
<view class="button_p" @click="nextStep()">
|
||
<view class="">下一步</view>
|
||
</view>
|
||
<u-picker :show="pickData.show" :columns="pickData.columns" :title="pickData.title" keyName="label"
|
||
@confirm="confirm" @cancel="cancel" @close="cancel"></u-picker>
|
||
<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 {
|
||
titles: "结算卡信息录入",
|
||
msg: "1",
|
||
overlayShow: false,
|
||
dataList: [],
|
||
fileList1: [],
|
||
fileList2: [],
|
||
value1: '',
|
||
pickData: {
|
||
columns: [],
|
||
show: false,
|
||
pickType: null, //下部选择器类型：certSelect 证件选择
|
||
title: ""
|
||
},
|
||
show: false,
|
||
status: 'loading',
|
||
select: '',
|
||
formData: {
|
||
areaType: "7", //商户类型 7 小微 写死
|
||
openAccEffectDate: "",
|
||
openAccExpDate: "",
|
||
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: ""
|
||
},
|
||
openAccount: "",
|
||
openAccountUrl: "",
|
||
rate: "0.25",
|
||
steps: "3" //步骤当前页面写死第一页
|
||
},
|
||
options: [{
|
||
value: "1",
|
||
label: "人民币"
|
||
}, {
|
||
value: "2",
|
||
label: "刀乐"
|
||
}, {
|
||
value: "3",
|
||
label: "英镑",
|
||
disabled: true
|
||
}],
|
||
merchantId: 1000022008,
|
||
kindDefault: [0, 0],
|
||
bankArea: []
|
||
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.merchantId) {
|
||
this.merchantId = options.merchantId
|
||
}
|
||
this.getMerchantInfo()
|
||
this.getSettleCycles()
|
||
this.getBankArea()
|
||
let that = this
|
||
uni.$on("chooseBankZcy", function(data) {
|
||
that.chooseBankOk(data)
|
||
})
|
||
uni.$on("chooseBranchZcy", function(data) {
|
||
that.chooseBranchOk(data)
|
||
})
|
||
},
|
||
components: {
|
||
headers,
|
||
levelLinkage
|
||
},
|
||
methods: {
|
||
selectBranch() {
|
||
uni.navigateTo({
|
||
url: '/homePages/merchantsMerchant/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/merchantsMerchant/bankList'
|
||
})
|
||
},
|
||
// 性别点击取消
|
||
cancel() {
|
||
this.pickData.show = false
|
||
},
|
||
// 弹窗确认
|
||
confirm(e) {
|
||
this.pickData.show = false
|
||
this.formData.settlementCycle = e.value[0].value
|
||
this.formData.settlementCycleName = e.value[0].label
|
||
},
|
||
selectSettle() {
|
||
this.pickData.title = "请选择结算周期"
|
||
this.pickData.show = true
|
||
},
|
||
async getSettleCycles() {
|
||
this.pickData.columns = []
|
||
let tempData = await this.$getDictList('pos_merchant_settlement_cycle')
|
||
this.pickData.columns.push(tempData)
|
||
},
|
||
async getMerchantInfo() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
this.overlayShow = true
|
||
let ress = await request({
|
||
url: 'app/report/newBaseInfo',
|
||
method: 'post',
|
||
data: {
|
||
objectId: this.merchantId
|
||
}
|
||
})
|
||
this.formData = ress.data
|
||
this.formData.settleAccType = '0010'
|
||
this.formData.steps = '3'
|
||
const date = new Date();
|
||
const year = date.getFullYear();
|
||
const month = ("0" + (date.getMonth() + 1)).slice(-2);
|
||
const day = ("0" + date.getDate()).slice(-2);
|
||
//签约有效期
|
||
this.formData.openAccEffectDate = year + month + day
|
||
this.formData.openAccExpDate = (year + 1) + month + day
|
||
//处理图片问题
|
||
if (this.formData.bankPhotoFrontUrl) {
|
||
this.fileList1 = []
|
||
let tempImg1 = {
|
||
url: this.formData.bankPhotoFrontUrl,
|
||
}
|
||
this.fileList1.push(tempImg1)
|
||
}
|
||
if (this.formData.bankPhotoBackUrl) {
|
||
this.fileList2 = []
|
||
let tempImg2 = {
|
||
url: this.formData.bankPhotoBackUrl
|
||
}
|
||
this.fileList2.push(tempImg2)
|
||
}
|
||
uni.hideLoading()
|
||
this.overlayShow = false
|
||
|
||
},
|
||
async uploadFile(url, fileName, type) {
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
});
|
||
this.overlayShow = true
|
||
upload({
|
||
url: 'app/report/fileUplod',
|
||
filePath: url,
|
||
formData: {
|
||
type: 3,
|
||
fileName: fileName
|
||
}
|
||
|
||
}).then((res) => {
|
||
let that = this
|
||
if (res.code == 0) {
|
||
if (type == 1) {
|
||
|
||
this.formData.bankPhotoFront = res.data.externalKey
|
||
this.formData.bankPhotoFrontUrl = res.data.imgUrl
|
||
//银行卡正面
|
||
let bankCardData = JSON.parse(res.data.bankCardData)
|
||
|
||
if (bankCardData && bankCardData.code == '0' && bankCardData.data) {
|
||
|
||
//卡号
|
||
this.formData.bankAccountNo = bankCardData.data.cardNo
|
||
|
||
//处理code
|
||
request({
|
||
url: 'app/drop/getBankByName?bankName=' + bankCardData.data
|
||
.bankName,
|
||
method: 'get'
|
||
}).then((resss) => {
|
||
if (resss.code == 0) {
|
||
//银行名称
|
||
that.formData.issBankIdName = resss.data.bankName
|
||
that.formData.issBankId = resss.data.bankCode
|
||
this.formData.bankOutletsName = null
|
||
this.formData.bankOutlets = null
|
||
}
|
||
})
|
||
|
||
|
||
|
||
}
|
||
} else if (type == 2) {
|
||
//银行卡反面
|
||
this.formData.bankPhotoBack = res.data.externalKey
|
||
this.formData.bankPhotoBackUrl = res.data.imgUrl
|
||
}
|
||
|
||
}
|
||
|
||
|
||
}).finally((res) => {
|
||
this.overlayShow = false
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
|
||
},
|
||
//银行卡信息
|
||
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].url.split('/').pop(), 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++
|
||
}
|
||
|
||
},
|
||
change(e) {
|
||
console.log('select = ', this.select)
|
||
},
|
||
|
||
async nextStep() {
|
||
uni.showLoading({
|
||
title: '提交中'
|
||
});
|
||
this.overlayShow = true
|
||
let res = await request({
|
||
url: 'app/report/newBaseInfoSaveOrUpdate',
|
||
method: 'post',
|
||
data: this.formData
|
||
})
|
||
if (res.code == 0) {
|
||
uni.hideLoading()
|
||
this.overlayShow = false
|
||
uni.navigateTo({
|
||
url: '/homePages/merchantsMerchant/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;
|
||
}
|
||
|
||
.input_color {
|
||
width: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 36px;
|
||
border: 2px solid #efefef;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.right-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
color: #aeaeae;
|
||
font-size: 14px;
|
||
margin: 10px 0px;
|
||
}
|
||
|
||
.bs_img {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.fifty {
|
||
width: 50%;
|
||
text-align: center;
|
||
|
||
box-sizing: border-box;
|
||
padding-left: 15px;
|
||
font-size: 14px;
|
||
|
||
}
|
||
</style>
|