fourPayProject/51uni/homePages/merchantsMerchant/InformationEntry.vue

394 lines
9.4 KiB
Vue
Raw Normal View History

2025-03-31 10:23:28 +08:00
<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="title_">
商户信息
</view>
<view class="box_bs">
<view class="">名称</view>
<view class="right_size">
<input type="text" placeholder="请输入" v-model="formData.merchantName" />
</view>
</view>
<view class="box_bs">
<view class="">商户简称</view>
<view class="right_size">
<input type="text" placeholder="请输入" v-model="formData.abbreviation" />
</view>
</view>
<view class="box_bs">
<view class="">商户归属地</view>
<view class="dis_" @click="openLevel()">
<view class="dis_">
<view v-if="!formData.merProvinceNames" class="size_">请选择</view>
<view v-else class="size_">
{{this.formData.merProvinceNames+this.formData.merRegionNames+this.formData.merCountyNames}}
</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
<u-icon name="map-fill" color="#E4612E" size="20"></u-icon>
</view>
</view>
<view class="box_bs">
<view class="">详情地址</view>
<view class="right_size">
<input type="text" placeholder="请填写" v-model="formData.merAddress" />
</view>
</view>
<view class="box_bs">
<view class="">行业分类</view>
<view class="dis_" @click="selectPick()">
<view v-if="!formData.merTertiaryBusKindName" class="size_">请选择</view>
<view v-else class="size_">
{{this.formData.merTertiaryBusKindName}}
</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs">
<view class="">年营业收入</view>
<view class="dis_" style="width: 75%; align-items: center;">
<ep-select v-model="formData.annualIncomeUnit" :options="capitalUnits"
@change="change"></ep-select>
<view class="input_color">
<input type="number" v-model="formData.annualIncome" />
</view>
<view style="width: 50px;margin-left: 5px;">万元</view>
</view>
</view>
</view>
<view class="box_">
<view class="title_">
商户费率
</view>
<view class="box_bs">
<view class="">微信费率(%)</view>
<view class="right_size">
<input type="number" placeholder="请填写" v-model="formData.wxRate" />
</view>
</view>
<view class="box_bs">
<view class="">支付宝费率(%)</view>
<view class="right_size">
<input type="number" placeholder="请填写" v-model="formData.aliRate" />
</view>
</view>
<view class="box_bs">
<view class="">云闪付费率(%)</view>
<view class="right_size">
<input type="number" placeholder="请填写" v-model="formData.unionPayRate" />
</view>
</view>
</view>
<view class="box_">
<view class="title_">
场景说明
</view>
<u--textarea v-model="formData.scenarioDescription" placeholder="请输入内容"></u--textarea>
</view>
<view class="button_p" @click="nextStep()">
<view class="">下一步</view>
</view>
<level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"
themeColor='#007AFF'></level-linkage>
<level-linkage valueName="busId" keyName="busName" 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 levelLinkage from "@/components/three-level-linkage/linkage.nvue"
export default {
data() {
return {
titles: "商户信息录入",
msg: "1",
merchantId: 1000022008,
dataList: [],
show: false,
status: 'loading',
select: '',
pickData: {
columns: [],
show: false,
pickType: null, //下部选择器类型certSelect 证件选择
title: ""
},
formData: {
areaType: "7", //商户类型 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: ""
},
openAccount: "",
openAccountUrl: "",
rate: "0.25",
steps: "2" //步骤当前页面写死第一页
},
pickerValueDefault: [14, 0, 0],
kindDefault: [0, 0],
chinaArea: [],
capitalUnits: [],
businessKinds: []
}
},
onLoad(options) {
if (options && options.merchantId) {
this.merchantId = options.merchantId
}
this.getMerchantInfo()
this.getChinaArea()
this.getCorCapitalUnit()
this.getBusinessKind()
},
components: {
headers,
levelLinkage
},
methods: {
selectPick() {
this.$refs.selectKind.open();
},
kindConfirm(data) {
// 行业选择后
this.formData.merSecondaryBusKindName = data.firstPick.busName
this.formData.merSecondaryBusKind = data.firstPick.busId
this.formData.merTertiaryBusKindName = data.secondPick.busName
this.formData.merTertiaryBusKind = data.secondPick.busId
},
onConfirm(data) {
// 地区选择确认后选中的数据
this.formData.merProvinceNames = data.firstPick.name
this.formData.merProvince = data.firstPick.code
this.formData.merProvinceId = data.firstPick.code
this.formData.merRegionNames = data.secondPick.name
this.formData.merRegion = data.secondPick.code
this.formData.merRegionId = data.secondPick.code
this.formData.merCountyNames = data.thirdPick.name
this.formData.merCounty = data.thirdPick.code
this.formData.merCountyId = data.thirdPick.code
},
async getChinaArea() {
let res = await request({
url: 'app/drop/getChinaArea',
method: 'get'
})
if (res.code == 0) {
this.chinaArea = res.data
this.$refs.levelLinkage.init(res.data);
}
},
openLevel() {
this.$refs.levelLinkage.open();
},
async getMerchantInfo() {
let ress = await request({
url: 'app/report/newBaseInfo',
method: 'post',
data: {
objectId: this.merchantId
}
})
this.formData = ress.data
this.formData.steps = '2'
if (!this.formData.annualIncomeUnit) {
this.formData.annualIncomeUnit = 'CNY'
}
if (!this.formData.corKind) {
this.formData.corKind = 13
}
console.log(this.formData, 'this.formData.corKind');
},
change(e) {
console.log('select = ', e)
},
async nextStep() {
//小微商户字段重复使用进行赋值
this.formData.shortName = this.formData.merchantName
this.formData.merProvinceName = this.formData.merProvinceNames
this.formData.merRegionName = this.formData.merRegionNames
this.formData.merCountyName = this.formData.merCountyNames
this.formData.merAddr = this.formData.merAddress
let res = await request({
url: 'app/report/newBaseInfoSaveOrUpdate',
method: 'post',
data: this.formData
})
if (res.code == 0) {
uni.navigateTo({
url: '/homePages/merchantsMerchant/debitCard?merchantId=' + res.merchantId
})
}
},
goback() {
uni.navigateBack()
},
async getCorCapitalUnit() {
this.capitalUnits = await this.$getDictList('pos_merchant_extend_corCapitalUnit')
},
async getBusinessKind() {
let res = await request({
url: 'app/drop/getBusinessKind',
method: 'get'
})
if (res.code == 0) {
this.businessKinds = res.data
this.$refs.selectKind.init(res.data);
}
}
}
}
</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;
}
</style>