新增进件管理
This commit is contained in:
116
src/api/common/index.ts
Normal file
116
src/api/common/index.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 获取所有地域
|
||||
* @param params
|
||||
* @returns
|
||||
*/
|
||||
export const getRegion = () => {
|
||||
return request<any, any[]>({
|
||||
url: `/system/admin/common/region`,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有银行
|
||||
* @param params
|
||||
* @returns
|
||||
*/
|
||||
export const getBankInfo = (params: Object) => {
|
||||
return request<any, any[]>({
|
||||
url: `/system/admin/common/bankInfo`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 类目信息表
|
||||
* @returns
|
||||
*/
|
||||
export const getCategory = () => {
|
||||
return request<any, any[]>({
|
||||
url: `/system/admin/common/category`,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
||||
interface getBankBranchListParams {
|
||||
province?: string; // 省份
|
||||
city?: string; // 城市
|
||||
instId?: string; // 顶级机构ID
|
||||
}
|
||||
/**
|
||||
* 获取所有支行
|
||||
* @params
|
||||
* province?: string; // 省份
|
||||
* city?: string; // 城市
|
||||
* instId?: string; // 顶级机构ID
|
||||
* @returns
|
||||
*/
|
||||
export const getBankBranchList = (params: getBankBranchListParams) => {
|
||||
return request<any, any[]>({
|
||||
url: `/order/admin/data/entryManager/bankBranchList`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 申请进件
|
||||
* @data Object
|
||||
* @returns
|
||||
*/
|
||||
export const entryManagerPost = (data: Object) => {
|
||||
return request<any, any[]>({
|
||||
url: `/order/admin/data/entryManager`,
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 申请进件
|
||||
* @data {
|
||||
* url string 图片地址
|
||||
* type string 可选
|
||||
* IdCard 身份证
|
||||
* BankCard 银行卡
|
||||
* BusinessLicense 营业执照
|
||||
* }
|
||||
* @returns
|
||||
*/
|
||||
export const getInfoByImg = (params: Object) => {
|
||||
return request<any, any[]>({
|
||||
url: `/order/admin/data/entryManager/getInfoByImg`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取进件信息详情
|
||||
* @data { shopId }
|
||||
* @returns
|
||||
*/
|
||||
export const entryManagerDetail = (params: Object) => {
|
||||
return request<any, any[]>({
|
||||
url: `/order/admin/data/entryManager`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取进件列表
|
||||
* @data { params }
|
||||
* @returns
|
||||
*/
|
||||
export const entryManagerList = (params: Object) => {
|
||||
return request<any, any[]>({
|
||||
url: `/order/admin/data/entryManager/list`,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
@@ -172,12 +172,12 @@ const onError = (error: any) => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 1px var(--el-border-color) solid;
|
||||
border-radius: 5px;
|
||||
// border: 1px var(--el-border-color) solid;
|
||||
// border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
// &:hover {
|
||||
// border-color: var(--el-color-primary);
|
||||
// }
|
||||
|
||||
&__delete-btn {
|
||||
position: absolute;
|
||||
|
||||
@@ -299,4 +299,18 @@ export function includesString(target, searchStr, options = {}) {
|
||||
|
||||
// 4. 执行包含判断
|
||||
return processedTarget.includes(processedSearch);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验手机号码（中国大陆）
|
||||
* - 支持 11 位手机号，号段 13x-19x
|
||||
* @param {string} phone
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function isValidMobile(phone: string): boolean {
|
||||
if (!phone && phone !== 0) return false;
|
||||
const s = String(phone).trim();
|
||||
// 中国大陆手机号正则：以1开头，第二位3-9，后面9位数字，总共11位
|
||||
const mobileRegex = /^1[3-9]\d{9}$/;
|
||||
return mobileRegex.test(s);
|
||||
}
|
||||
|
||||
997
src/views/applyments/applyment_in.vue
Normal file
997
src/views/applyments/applyment_in.vue
Normal file
@@ -0,0 +1,997 @@
|
||||
<!-- 选择商户以及进件渠道 -->
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="gyq_content" ref="containerRef">
|
||||
<div class="row">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="250px" label-position="right">
|
||||
<el-form-item label="选择商户类型" prop="merchantBaseInfo.userType">
|
||||
<el-radio-group v-model="form.merchantBaseInfo.userType">
|
||||
<el-radio label="个体商户" value="0"></el-radio>
|
||||
<el-radio label="企业商户" value="1"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div class="title_row">
|
||||
<div class="t">
|
||||
<el-text size="large" type="primary">商户基础信息</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="企业类型" v-if="form.merchantBaseInfo.userType == 1">
|
||||
<el-radio-group v-model="form.merchantBaseInfo.companyChildType">
|
||||
<el-radio label="普通企业" value="1"></el-radio>
|
||||
<el-radio label="事业单位" value="2"></el-radio>
|
||||
<el-radio label="政府机关" value="3"></el-radio>
|
||||
<el-radio label="社会组织" value="4"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户简称" prop="merchantBaseInfo.shortName">
|
||||
<el-input v-model.trim="form.merchantBaseInfo.shortName" placeholder="请输入商户简称"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="行业类别码" prop="merchantBaseInfo.mccCode">
|
||||
<selectCategory v-model="form.merchantBaseInfo.mccCode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付宝账号" prop="merchantBaseInfo.alipayAccount">
|
||||
<el-input v-model.trim="form.merchantBaseInfo.alipayAccount" placeholder="请输入支付宝账号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人类型">
|
||||
<el-radio-group v-model="form.merchantBaseInfo.contactPersonType">
|
||||
<el-radio label="经营者/法定代表人" :value="'LEGAL'"></el-radio>
|
||||
<el-radio label="经办人" :value="'SUPER'"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="证件类型">
|
||||
<el-radio-group v-model="form.merchantBaseInfo.certType">
|
||||
<el-radio label="身份证" value="0"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人身份证号" prop="merchantBaseInfo.contactPersonId">
|
||||
<el-input v-model.trim="form.merchantBaseInfo.contactPersonId" placeholder="请输入联系人身份证号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate">
|
||||
<el-date-picker v-model="form.merchantBaseInfo.contactPersonIdStartDate" type="date" placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人证件有效期结束日期" prop="merchantBaseInfo.contactPersonIdEndDate">
|
||||
<div class="center">
|
||||
<el-date-picker v-model="form.merchantBaseInfo.contactPersonIdEndDate" type="date" placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||||
<el-checkbox
|
||||
@change="e => e ? form.merchantBaseInfo.contactPersonIdEndDate = longTime : form.merchantBaseInfo.contactPersonIdEndDate = ''">长期有效</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人身份证正面照片" prop="merchantBaseInfo.contactIdCardFrontPic.url">
|
||||
<div class="column">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.merchantBaseInfo.contactIdCardFrontPic.url"
|
||||
@on-success="contactIdCardFrontPicUpload" />
|
||||
<div class="tips">(上传图片自动识别 身份证名称 身份证号)</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人身份证反面照片" prop="merchantBaseInfo.contactIdCardBackPic.url">
|
||||
<div class="column">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.merchantBaseInfo.contactIdCardBackPic.url"
|
||||
@on-success="contactIdCardBackPicUpload" />
|
||||
<div class="tips">(上传图片自动识别 有效期)</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人手机号" prop="merchantBaseInfo.contactPhone">
|
||||
<el-input v-model.trim="form.merchantBaseInfo.contactPhone" placeholder="请输入联系人手机号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人地址" prop="merchantBaseInfo.contactAddr">
|
||||
<el-input v-model.trim="form.merchantBaseInfo.contactAddr" placeholder="请输入联系人地址"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人电子邮箱" prop="merchantBaseInfo.contactEmail">
|
||||
<el-input v-model.trim="form.merchantBaseInfo.contactEmail" placeholder="请输入联系人电子邮箱"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<div class="title_row">
|
||||
<div class="t">
|
||||
<el-text size="large" type="primary">法人信息</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="身份证手持图片" prop="legalPersonInfo.idCardHandPic.url">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardHandPic.url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证正面图片" prop="legalPersonInfo.idCardFrontPic.url">
|
||||
<div class="column">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardFrontPic.url"
|
||||
@on-success="idCardFrontPicSuccess" />
|
||||
<div class="tips">(上传图片自动识别 身份证名称 身份证号)</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证反面图片" prop="legalPersonInfo.idCardBackPic.url">
|
||||
<div class="column">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardBackPic.url"
|
||||
@on-success="idCardBackPicSuccess" />
|
||||
<div class="tips">(上传图片自动识别 有效期)</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人姓名" prop="legalPersonInfo.legalPersonName">
|
||||
<el-input v-model.trim="form.legalPersonInfo.legalPersonName" placeholder="请输入法定代表人姓名"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人身份证号" prop="legalPersonInfo.legalPersonId">
|
||||
<el-input v-model.trim="form.legalPersonInfo.legalPersonId" placeholder="请输入法定代表人身份证号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人身份证开始日期" prop="legalPersonInfo.legalIdPersonStartDate">
|
||||
<el-date-picker v-model="form.legalPersonInfo.legalIdPersonStartDate" type="date" placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人身份证结束日期" prop="legalPersonInfo.legalPersonIdEndDate">
|
||||
<div class="center">
|
||||
<el-date-picker v-model="form.legalPersonInfo.legalPersonIdEndDate" type="date" placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||||
<el-checkbox
|
||||
@change="e => e ? form.legalPersonInfo.legalPersonIdEndDate = longTime : form.legalPersonInfo.legalPersonIdEndDate = ''">长期有效</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人手机号" prop="legalPersonInfo.legalPersonPhone">
|
||||
<el-input v-model.trim="form.legalPersonInfo.legalPersonPhone" placeholder="请输入法定代表人手机号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人电子邮箱" prop="legalPersonInfo.legalPersonEmail">
|
||||
<el-input v-model.trim="form.legalPersonInfo.legalPersonEmail" placeholder="请输入法定代表人电子邮箱"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人性别" prop="legalPersonInfo.legalGender">
|
||||
<el-radio-group v-model="form.legalPersonInfo.legalGender">
|
||||
<el-radio label="男" :value="'0'"></el-radio>
|
||||
<el-radio label="女" :value="'1'"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人联系地址" prop="legalPersonInfo.legalAddress">
|
||||
<el-input v-model.trim="form.legalPersonInfo.legalAddress" placeholder="请输入法定代表人联系地址"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<div class="title_row">
|
||||
<div class="t">
|
||||
<el-text size="large" type="primary">营业执照信息</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="营业执照全称" prop="businessLicenceInfo.licenceName">
|
||||
<el-input v-model.trim="form.businessLicenceInfo.licenceName" placeholder="请输入营业执照全称"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业执照注册号" prop="businessLicenceInfo.licenceNo">
|
||||
<el-input v-model.trim="form.businessLicenceInfo.licenceNo" placeholder="请输入营业执照注册号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业执照有效期开始日期" prop="businessLicenceInfo.licenceStartDate">
|
||||
<el-date-picker v-model="form.businessLicenceInfo.licenceStartDate" type="date" placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="营业执照有效期结束日期" prop="businessLicenceInfo.licenceEndDate">
|
||||
<div class="center">
|
||||
<el-date-picker v-model="form.businessLicenceInfo.licenceEndDate" type="date" placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||||
<el-checkbox
|
||||
@change="e => e ? form.businessLicenceInfo.licenceEndDate = longTime : form.businessLicenceInfo.licenceEndDate = ''">长期有效</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="注册地址" prop="businessLicenceInfo.registeredAddress">
|
||||
<el-input v-model.trim="form.businessLicenceInfo.registeredAddress" placeholder="请输入注册地址"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="营业执照照片" prop="businessLicenceInfo.licensePic.url">
|
||||
<div class="column">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.businessLicenceInfo.licensePic.url"
|
||||
@on-success="licensePicSuccess" />
|
||||
<div class="tips">(上传图片自动识别 营业执照编号)</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="title_row">
|
||||
<div class="t">
|
||||
<el-text size="large" type="primary">门店信息</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="商户归属省市区" prop="storeInfo.mercProvCode">
|
||||
<selectAddress v-model:provCode="form.storeInfo.mercProvCode" v-model:cityCode="form.storeInfo.mercCityCode"
|
||||
v-model:areaCode="form.storeInfo.mercAreaCode" v-model:prov="form.storeInfo.mercProv"
|
||||
v-model:city="form.storeInfo.mercCity" v-model:area="form.storeInfo.mercArea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="营业地址" prop="storeInfo.businessAddress">
|
||||
<el-input v-model.trim="form.storeInfo.businessAddress" placeholder="请输入营业地址"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="经营场所内设照片" prop="storeInfo.insidePic.url">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.storeInfo.insidePic.url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="门头照" prop="storeInfo.doorPic.url">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.storeInfo.doorPic.url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收银台照" prop="storeInfo.cashierDeskPic.url">
|
||||
<single-image-upload :maxFileSize="2" v-model="form.storeInfo.cashierDeskPic.url" />
|
||||
</el-form-item>
|
||||
<div class="title_row">
|
||||
<div class="t">
|
||||
<el-text size="large" type="primary">结算信息</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="结算类型" prop="settlementInfo.settlementType">
|
||||
<el-radio-group v-model="form.settlementInfo.settlementType">
|
||||
<el-radio label="非法人结算" value="0" disabled></el-radio>
|
||||
<el-radio label="法人结算" value="1"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算卡类型" prop="settlementInfo.settlementCardType">
|
||||
<el-radio-group v-model="form.settlementInfo.settlementCardType">
|
||||
<el-radio label="对私借记卡" :value="'11'"></el-radio>
|
||||
<el-radio label="对公借记卡" :value="'21'"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算卡号" prop="settlementInfo.settlementCardNo">
|
||||
<el-input v-model.trim="form.settlementInfo.settlementCardNo" placeholder="请输入结算卡号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户名称" prop="settlementInfo.settlementName">
|
||||
<el-input v-model.trim="form.settlementInfo.settlementName" placeholder="请输入开户名称"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算银行预留手机号" prop="settlementInfo.bankMobile">
|
||||
<el-input v-model.trim="form.settlementInfo.bankMobile" placeholder="请输入结算银行预留手机号"
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户行省市区" prop="settlementInfo.openAccProvinceId">
|
||||
<selectAddress v-model:provCode="form.settlementInfo.openAccProvinceId"
|
||||
v-model:cityCode="form.settlementInfo.openAccCityId" v-model:areaCode="form.settlementInfo.openAccAreaId"
|
||||
v-model:prov="form.settlementInfo.openAccProvince" v-model:city="form.settlementInfo.openAccCity"
|
||||
v-model:area="form.settlementInfo.openAccArea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户行" prop="settlementInfo.bankInstId">
|
||||
<selectBank :province="form.settlementInfo.openAccProvince" :city="form.settlementInfo.openAccCity"
|
||||
v-model:bankInstId="form.settlementInfo.bankInstId" v-model:bankName="form.settlementInfo.bankName"
|
||||
v-model:bank-branch-code="form.settlementInfo.bankBranchCode"
|
||||
v-model:bank-branch-name="form.settlementInfo.bankBranchName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="银行卡正面" prop="settlementInfo.bankCardFrontPic.url">
|
||||
<div class="column">
|
||||
<SingleImageUpload v-model="form.settlementInfo.bankCardFrontPic.url"
|
||||
@on-success="bankCardFrontPicSuccess" />
|
||||
<div class="tips">(上传图片自动识别 银行卡号)</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="银行卡反面" prop="settlementInfo.bankCardBackPic.url">
|
||||
<SingleImageUpload v-model="form.settlementInfo.bankCardBackPic.url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开户许可证" prop="settlementInfo.openAccountLicencePic.url">
|
||||
<SingleImageUpload v-model="form.settlementInfo.openAccountLicencePic.url" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="btn_wrap" :style="{ width: `${containerDomInfo.width}px`, left: `${containerDomInfo.left}px` }">
|
||||
<div class="btn_content">
|
||||
<div class="btn">
|
||||
<el-button type="primary" size="large" style="width: 100%;" :loading="loading"
|
||||
@click="submitForm">提交</el-button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button style="width: 100%;" size="large" @click="router.back()">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import selectAddress from "./components/selectAddress.vue";
|
||||
import selectBank from "./components/selectBank.vue";
|
||||
import selectCategory from "./components/selectCategory.vue";
|
||||
import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
|
||||
import { entryManagerPost, getInfoByImg, entryManagerDetail } from '@/api/common'
|
||||
import dayjs from "dayjs";
|
||||
import { isValidMobile } from "@/utils";
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const containerRef = ref<any>(null)
|
||||
|
||||
const containerDomInfo = ref({
|
||||
left: 0,
|
||||
width: 0
|
||||
})
|
||||
|
||||
const longTime = ref('2099-12-31')
|
||||
|
||||
// 获取进件详情
|
||||
async function getDetailAjax(shopId: string, licenceNo: string) {
|
||||
try {
|
||||
const res = await entryManagerDetail({
|
||||
shopId: shopId,
|
||||
licenceNo: licenceNo
|
||||
})
|
||||
|
||||
console.log('getDetailAjax===', res);
|
||||
|
||||
// 如果接口返回数组，则取第一个元素；否则直接使用返回对象，使用断言避免类型不匹配
|
||||
form.value = (Array.isArray(res) ? res[0] : res) as any
|
||||
|
||||
console.log('getDetailAjax.form.value===', form.value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
containerDomInfo.value = containerRef.value?.getBoundingClientRect() ?? {}
|
||||
|
||||
const shopId: string = String(route.query.shopId ?? '')
|
||||
const licenceNo: string = String(route.query.licenceNo ?? '')
|
||||
if (shopId && licenceNo) {
|
||||
getDetailAjax(shopId, licenceNo)
|
||||
}
|
||||
})
|
||||
|
||||
const formRef = ref<any>(null);
|
||||
// const form = ref({
|
||||
// shopId: route.query.shopId,
|
||||
// merchantCode: '',
|
||||
// // 【必填】商户基础信息
|
||||
// merchantBaseInfo: {
|
||||
// userType: 0, // 0: 个体商户;1: 企业商户;3: 小微商户 暂不支持
|
||||
// shortName: '', // 商户简称--企业、个体必填
|
||||
// mccCode: '', // 行业类别码--必填
|
||||
// alipayAccount: '', // 【必填】支付宝账号
|
||||
// contactPersonType: 'LEGAL', // 联系人类型 LEGAL: 经营者/法定代表人 SUPER: 经办人 默认LEGAL
|
||||
// contactName: '', // 联系人姓名
|
||||
// certType: 0, // 证件类型 目前只支持身份证 传值：0
|
||||
// contactPersonId: '', // 联系人身份证号
|
||||
// contactPersonIdStartDate: '', // 联系人证件有效期开始日期
|
||||
// contactPersonIdEndDate: '', // 联系人证件有效期结束日期
|
||||
// // 联系人身份证反面照片
|
||||
// contactIdCardBackPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 联系人身份证正面照片
|
||||
// contactIdCardFrontPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// contactPhone: '', // 联系人手机号
|
||||
// contactAddr: '', // 联系人地址
|
||||
// contactEmail: '', // 联系人电子邮箱
|
||||
// companyChildType: 1, // 企业类型，1：普通企业，2：事业单位，3：政府机关，4：社会组织 默认值:1
|
||||
// },
|
||||
// // 【必填】法人信息
|
||||
// legalPersonInfo: {
|
||||
// legalPersonName: '', // 法定代表人姓名
|
||||
// legalPersonId: '', // 法定代表人身份证号
|
||||
// legalIdPersonStartDate: '', // 法定代表人证件有效期开始日期
|
||||
// legalPersonIdEndDate: '', // 法定代表人证件有效期结束日期
|
||||
// legalPersonPhone: '', // 法定代表人手机号
|
||||
// legalPersonEmail: '', // 法定代表人电子邮箱
|
||||
// legalGender: '', // 法人性别（0男 1女）
|
||||
// legalAddress: '', // 法人联系地址
|
||||
// // 身份证手持 图片
|
||||
// idCardHandPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 身份证正面 图片
|
||||
// idCardFrontPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 身份证反面 图片
|
||||
// idCardBackPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// },
|
||||
// // 【必填】营业执照信息
|
||||
// businessLicenceInfo: {
|
||||
// licenceName: '', // 营业执照全称--非小微必填
|
||||
// licenceNo: '', // 营业执照注册号--非小微必填
|
||||
// licenceStartDate: '', // 营业执照有效期开始日期--非小微必填
|
||||
// licenceEndDate: '', // 营业执照有效期结束日期--非小微必填
|
||||
// registeredAddress: '', // 注册地址--非小微必填
|
||||
// licensePic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// },
|
||||
// // 【必填】门店信息
|
||||
// storeInfo: {
|
||||
// mercProvCode: '', // 【必填】商户归属省Code
|
||||
// mercCityCode: '', // 【必填】商户归属市Code
|
||||
// mercAreaCode: '', // 【必填】商户归属区Code
|
||||
// mercProv: '', // 商户归属省
|
||||
// mercCity: '', // 商户归属市
|
||||
// mercArea: '', // 商户归属区
|
||||
// businessAddress: '', // 【必填】 营业地址
|
||||
// // 经营场所内设照片
|
||||
// insidePic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 门头照
|
||||
// doorPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 收银台照
|
||||
// cashierDeskPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// },
|
||||
// // 【必填】结算信息
|
||||
// settlementInfo: {
|
||||
// settlementType: 1, // 结算类型 0:非法人结算, 1:法人结算
|
||||
// noLegalName: '', // 非法人姓名
|
||||
// noLegalId: '', // 非法人身份证号
|
||||
// settlementCardType: '', // 结算卡类型 必填 11 对私借记卡（结算卡正面照、结算卡反面照图片必传） 21 对公借记卡（只须结算卡正面照片）
|
||||
// settlementCardNo: '', // 结算卡号
|
||||
// settlementName: '', // 开户名称
|
||||
// bankMobile: '', // 结算银行预留手机号
|
||||
// openAccProvinceId: '', // 开户行省ID
|
||||
// openAccCityId: '', // 开户行市ID
|
||||
// openAccAreaId: '', // 开户行区ID
|
||||
// openAccProvince: '', // 开户行省
|
||||
// openAccCity: '', // 开户行市
|
||||
// openAccArea: '', // 开户行区
|
||||
// bankName: '', // 开户行别名名称 bankAlias
|
||||
// bankInstId: '', // 开户行缩写 bankCode
|
||||
// bankType: '', // 开户行编号 bankAliasCode
|
||||
// bankBranchName: '', // 支行开户行行别名称 branchName
|
||||
// bankBranchCode: '', // 支行开户行编号 bankCode
|
||||
// // 银行卡正面
|
||||
// bankCardFrontPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 银行卡反面
|
||||
// bankCardBackPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 开户许可证
|
||||
// openAccountLicencePic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 非法人手持结算授权书
|
||||
// noLegalHandSettleAuthPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 非法人结算授权书
|
||||
// noLegalSettleAuthPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 非法人身份证正面
|
||||
// noLegalIdCardFrontPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// // 非法人身份证反面
|
||||
// noLegalIdCardBackPic: {
|
||||
// url: '',
|
||||
// wechatId: '', // 微信图片ID
|
||||
// alipayId: '', // 支付宝图片ID
|
||||
// },
|
||||
// }
|
||||
// });
|
||||
|
||||
const form = ref({
|
||||
"shopId": "138",
|
||||
"merchantCode": "",
|
||||
"merchantBaseInfo": {
|
||||
"userType": 1,
|
||||
"shortName": "菲慕斯博",
|
||||
"mccCode": "A0003_B0046",
|
||||
"alipayAccount": "18191655977",
|
||||
"contactPersonType": "LEGAL",
|
||||
"contactName": "",
|
||||
"certType": 0,
|
||||
"contactPersonId": "612501199212187875",
|
||||
"contactPersonIdStartDate": "2019-02-01",
|
||||
"contactPersonIdEndDate": "2039-02-01",
|
||||
"contactIdCardBackPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/df744d901e45480284fdca519ed99713.png",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"contactIdCardFrontPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/624a1bba691b4468b078407e216288fc.png",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"contactPhone": "18191655977",
|
||||
"contactAddr": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
|
||||
"contactEmail": "892675422@qq.com",
|
||||
"companyChildType": 1
|
||||
},
|
||||
"legalPersonInfo": {
|
||||
"legalPersonName": "蔺佳佳",
|
||||
"legalPersonId": "612501199212187875",
|
||||
"legalIdPersonStartDate": "2019-02-01",
|
||||
"legalPersonIdEndDate": "2039-02-01",
|
||||
"legalPersonPhone": "18191655977",
|
||||
"legalPersonEmail": "892675422@qq.com",
|
||||
"legalGender": "0",
|
||||
"legalAddress": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
|
||||
"idCardHandPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/7984afd823fe4f0da51d4b245bf5db25.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"idCardFrontPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/88819f6ae3404c199526c159e4d58fd9.png",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"idCardBackPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/0f3d15a9498e4853aeb8c579698955d9.png",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
}
|
||||
},
|
||||
"businessLicenceInfo": {
|
||||
"licenceName": "西安菲慕斯博市场营销策划有限公司",
|
||||
"licenceNo": "91610131MA6TXACP28",
|
||||
"licenceStartDate": "2021-02-24",
|
||||
"licenceEndDate": "2099-12-31",
|
||||
"registeredAddress": "陕西省西安市高新区科技路37号海星城市广场B座2002-080室",
|
||||
"licensePic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/9d8e1118c44e46d29078968aa309db02.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
}
|
||||
},
|
||||
"storeInfo": {
|
||||
"mercProvCode": "610000",
|
||||
"mercCityCode": "610100",
|
||||
"mercAreaCode": "610113",
|
||||
"mercProv": "陕西省",
|
||||
"mercCity": "西安市",
|
||||
"mercArea": "雁塔区",
|
||||
"businessAddress": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
|
||||
"insidePic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/cd9629863a114ee3842e4616ec730cd6.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"doorPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/ec5bafd00f96466fb3efe545a058f08b.png",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"cashierDeskPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/057c0781e07c46d785b38a3c0ac2cba4.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
}
|
||||
},
|
||||
"settlementInfo": {
|
||||
"settlementType": 1,
|
||||
"noLegalName": "",
|
||||
"noLegalId": "",
|
||||
"settlementCardType": "21",
|
||||
"settlementCardNo": "611011580000054186",
|
||||
"settlementName": "西安银行",
|
||||
"bankMobile": "18191655977",
|
||||
"openAccProvinceId": "610000",
|
||||
"openAccCityId": "610100",
|
||||
"openAccAreaId": "610113",
|
||||
"openAccProvince": "陕西省",
|
||||
"openAccCity": "西安市",
|
||||
"openAccArea": "雁塔区",
|
||||
"bankName": "長安銀行",
|
||||
"bankInstId": "XAB",
|
||||
"bankType": "",
|
||||
"bankBranchName": "",
|
||||
"bankBranchCode": "",
|
||||
"bankCardFrontPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/41410600705d4ebe98442b935a4f63b0.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"bankCardBackPic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/c82d5579145e4668ba7c201733b8e5b9.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"openAccountLicencePic": {
|
||||
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/c989896f18724fe4b2d5254e97065a65.jpg",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalHandSettleAuthPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalSettleAuthPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalIdCardFrontPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
},
|
||||
"noLegalIdCardBackPic": {
|
||||
"url": "",
|
||||
"wechatId": "",
|
||||
"alipayId": ""
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
'merchantBaseInfo.userType': [{ required: true, message: '请选择商户类型', trigger: 'change' }],
|
||||
'merchantBaseInfo.shortName': [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
|
||||
'merchantBaseInfo.mccCode': [{ required: true, message: '请输入行业类别码', trigger: 'change' }],
|
||||
'merchantBaseInfo.alipayAccount': [{ required: true, message: '请输入支付宝账号', trigger: 'blur' }],
|
||||
'merchantBaseInfo.contactPersonId': [{ required: true, message: '请输入联系人身份证号', trigger: 'blur' }],
|
||||
'merchantBaseInfo.contactPersonIdStartDate': [{ required: true, message: '请选择联系人证件有效期开始日期', trigger: 'change' }],
|
||||
'merchantBaseInfo.contactPersonIdEndDate': [{ required: true, message: '请选择联系人证件有效期结束日期', trigger: 'change' }],
|
||||
'merchantBaseInfo.contactIdCardFrontPic.url': [{ required: true, message: '请上传联系人身份证正面照片', trigger: 'blur' }],
|
||||
'merchantBaseInfo.contactIdCardBackPic.url': [{ required: true, message: '请上传联系人身份证反面照片', trigger: 'blur' }],
|
||||
'merchantBaseInfo.contactPhone': [
|
||||
{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (!isValidMobile(value)) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
'merchantBaseInfo.contactAddr': [{ required: true, message: '请输入联系人地址', trigger: 'blur' }],
|
||||
'merchantBaseInfo.contactEmail': [{ required: true, message: '请输入联系人电子邮箱', trigger: 'blur' }],
|
||||
'legalPersonInfo.idCardHandPic.url': [{ required: true, message: '请上传身份证手持图片', trigger: 'blur' }],
|
||||
'legalPersonInfo.idCardFrontPic.url': [{ required: true, message: '请上传身份证正面图片', trigger: 'blur' }],
|
||||
'legalPersonInfo.idCardBackPic.url': [{ required: true, message: '请上传身份证反面图片', trigger: 'blur' }],
|
||||
'legalPersonInfo.legalPersonName': [{ required: true, message: '请输入法定代表人姓名', trigger: 'blur' }],
|
||||
'legalPersonInfo.legalPersonId': [{ required: true, message: '请输入法定代表人身份证号', trigger: 'blur' }],
|
||||
'legalPersonInfo.legalIdPersonStartDate': [{ required: true, message: '请输入法定代表人身份证开始日期', trigger: 'blur' }],
|
||||
'legalPersonInfo.legalPersonIdEndDate': [{ required: true, message: '请输入法定代表人身份证结束日期', trigger: 'blur' }],
|
||||
'legalPersonInfo.legalPersonPhone': [
|
||||
{ required: true, message: '请输入法定代表人手机号', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (!isValidMobile(value)) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
'legalPersonInfo.legalPersonEmail': [{ required: true, message: '请输入法定代表人电子邮箱', trigger: 'blur' }],
|
||||
'legalPersonInfo.legalGender': [{ required: true, message: '请选择法定代表人性别', trigger: 'change' }],
|
||||
'legalPersonInfo.legalAddress': [{ required: true, message: '请输入法定代表人联系地址', trigger: 'blur' }],
|
||||
// 营业执照信息
|
||||
'businessLicenceInfo.licenceName': [{ required: true, message: '请输入营业执照全称', trigger: 'blur' }],
|
||||
'businessLicenceInfo.licenceNo': [{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }],
|
||||
'businessLicenceInfo.licenceStartDate': [{ required: true, message: '请输入营业执照有效期开始日期', trigger: 'blur' }],
|
||||
'businessLicenceInfo.licenceEndDate': [{ required: true, message: '请输入营业执照有效期结束日期', trigger: 'blur' }],
|
||||
'businessLicenceInfo.registeredAddress': [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
|
||||
'businessLicenceInfo.licensePic.url': [{ required: true, message: '请上传营业执照照片', trigger: 'blur' }],
|
||||
// 门店信息
|
||||
'storeInfo.mercProvCode': [{ required: true, message: '请选择商户归属省市区', trigger: 'change' }],
|
||||
'storeInfo.mercCityCode': [{ required: true, message: '请选择商户归属市', trigger: 'change' }],
|
||||
'storeInfo.mercAreaCode': [{ required: true, message: '请选择商户归属区', trigger: 'change' }],
|
||||
'storeInfo.businessAddress': [{ required: true, message: '请输入营业地址', trigger: 'blur' }],
|
||||
'storeInfo.insidePic.url': [{ required: true, message: '请上传经营场所内设照片', trigger: 'blur' }],
|
||||
'storeInfo.doorPic.url': [{ required: true, message: '请上传门头照', trigger: 'blur' }],
|
||||
'storeInfo.cashierDeskPic.url': [{ required: true, message: '请上传收银台照', trigger: 'blur' }],
|
||||
// 结算信息
|
||||
'settlementInfo.settlementType': [{ required: true, message: '请选择结算类型', trigger: 'change' }],
|
||||
'settlementInfo.settlementCardType': [{ required: true, message: '请选择结算卡类型', trigger: 'change' }],
|
||||
'settlementInfo.settlementCardNo': [{ required: true, message: '请输入结算卡号', trigger: 'blur' }],
|
||||
'settlementInfo.settlementName': [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
|
||||
'settlementInfo.bankMobile': [
|
||||
{ required: true, message: '请输入结算银行预留手机号', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (!isValidMobile(value)) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
'settlementInfo.openAccProvinceId': [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
console.log('form.value.settlementInfo.openAccProvinceId', form.value.settlementInfo.openAccProvinceId);
|
||||
console.log('form.value.settlementInfo.openAccCityId', form.value.settlementInfo.openAccCityId);
|
||||
console.log('form.value.settlementInfo.openAccAreaId', form.value.settlementInfo.openAccAreaId);
|
||||
|
||||
if (form.value.settlementInfo.openAccProvinceId == '' || form.value.settlementInfo.openAccCityId == '' || form.value.settlementInfo.openAccAreaId == '') {
|
||||
callback(new Error('请选择开户行省市区'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
'settlementInfo.bankInstId': [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (form.value.settlementInfo.bankInstId == '') {
|
||||
callback(new Error('请选择开户行以及支行'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
'settlementInfo.bankCardFrontPic.url': [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传银行卡正面图片',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
'settlementInfo.bankCardBackPic.url': [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传银行卡反面图片',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
'settlementInfo.openAccountLicencePic.url': [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传开户许可证图片',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 联系人身份证正面照片
|
||||
async function contactIdCardFrontPicUpload(url: string) {
|
||||
try {
|
||||
const res: any = await getInfoByImg({
|
||||
url: url,
|
||||
type: 'IdCard'
|
||||
})
|
||||
form.value.merchantBaseInfo.contactPersonId = res.subImages[0].kvInfo.data.idNumber
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 联系人身份证反面照片
|
||||
async function contactIdCardBackPicUpload(url: any) {
|
||||
try {
|
||||
const res: any = await getInfoByImg({
|
||||
url: url,
|
||||
type: 'IdCard'
|
||||
})
|
||||
let date = res.subImages[0].kvInfo.data.validPeriod.split('-')
|
||||
form.value.merchantBaseInfo.contactPersonIdStartDate = dayjs(date[0]).format('YYYY-MM-DD')
|
||||
form.value.merchantBaseInfo.contactPersonIdEndDate = dayjs(date[1]).format('YYYY-MM-DD')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 法人信息 身份证正面图片
|
||||
async function idCardFrontPicSuccess(url: string) {
|
||||
try {
|
||||
const res: any = await getInfoByImg({
|
||||
url: url,
|
||||
type: 'IdCard'
|
||||
})
|
||||
form.value.legalPersonInfo.legalPersonName = res.subImages[0].kvInfo.data.name
|
||||
form.value.legalPersonInfo.legalPersonId = res.subImages[0].kvInfo.data.idNumber
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 法人信息 身份证反图片
|
||||
async function idCardBackPicSuccess(url: string) {
|
||||
try {
|
||||
const res: any = await getInfoByImg({
|
||||
url: url,
|
||||
type: 'IdCard'
|
||||
})
|
||||
let date = res.subImages[0].kvInfo.data.validPeriod.split('-')
|
||||
form.value.legalPersonInfo.legalIdPersonStartDate = dayjs(date[0]).format('YYYY-MM-DD')
|
||||
form.value.legalPersonInfo.legalPersonIdEndDate = dayjs(date[1]).format('YYYY-MM-DD')
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 营业执照信息 营业执照照片
|
||||
async function licensePicSuccess(url: string) {
|
||||
try {
|
||||
const res: any = await getInfoByImg({
|
||||
url: url,
|
||||
type: 'BusinessLicense'
|
||||
})
|
||||
let data = res.subImages[0].kvInfo.data
|
||||
// console.log('营业执照照片', data);
|
||||
form.value.businessLicenceInfo.licenceName = data.companyName
|
||||
form.value.businessLicenceInfo.licenceNo = data.creditCode
|
||||
// form.value.businessLicenceInfo.licenceStartDate = data.companyName
|
||||
// form.value.businessLicenceInfo.licenceEndDate = data.companyName
|
||||
form.value.businessLicenceInfo.registeredAddress = data.businessAddress
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 结算信息 银行卡正面
|
||||
async function bankCardFrontPicSuccess(url: string) {
|
||||
try {
|
||||
const res: any = await getInfoByImg({
|
||||
url: url,
|
||||
type: 'BankCard'
|
||||
})
|
||||
let data = res.subImages[0].kvInfo.data
|
||||
// console.log('银行卡正面', data);
|
||||
form.value.settlementInfo.settlementCardNo = data.cardNumber
|
||||
form.value.settlementInfo.bankName = data.bankName
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
function submitForm() {
|
||||
console.log('提交的表单数据：', form.value);
|
||||
console.log('formRef', formRef.value);
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
console.log('valid===', valid);
|
||||
if (valid) {
|
||||
console.log('表单验证通过，可以提交');
|
||||
try {
|
||||
loading.value = true
|
||||
await entryManagerPost(form.value)
|
||||
ElNotification({
|
||||
title: '注意',
|
||||
message: '提交成功',
|
||||
type: 'success'
|
||||
})
|
||||
router.back()
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
loading.value = false
|
||||
} else {
|
||||
console.log('表单验证失败，请检查输入项');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
padding: 14px;
|
||||
|
||||
.gyq_content {
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tips {
|
||||
--bg: #ffeed8;
|
||||
font-size: 12px;
|
||||
background-color: var(--bg);
|
||||
color: #c57000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--bg);
|
||||
border-radius: 4px;
|
||||
transform: rotate(-45deg);
|
||||
top: -7px;
|
||||
left: 40px;
|
||||
transform-origin: center;
|
||||
translate: -50% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title_row {
|
||||
padding: 14px 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ececec;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.t {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
padding: 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 10px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
.btn_content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
|
||||
.btn {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
src/views/applyments/components/selectAddress.vue
Normal file
128
src/views/applyments/components/selectAddress.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="center">
|
||||
<el-select placeholder="请选择省" style="width: 100px;" v-model="provCode" @change="provChange">
|
||||
<el-option v-for="item in provList" :key="item.regionId" :label="item.regionName" :value="item.regionId" />
|
||||
</el-select>
|
||||
<el-select placeholder="请选择市" style="width: 100px;" :disabled="!provCode" v-model="cityCode" @change="cityChange">
|
||||
<el-option v-for="item in cityList" :key="item.regionId" :label="item.regionName" :value="item.regionId" />
|
||||
</el-select>
|
||||
<el-select placeholder="请选择区" style="width: 100px;" :disabled="!cityCode" v-model="areaCode" @change="areaChange">
|
||||
<el-option v-for="item in areaList" :key="item.regionId" :label="item.regionName" :value="item.regionId" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { getRegion } from "@/api/common";
|
||||
|
||||
const provList = ref<any[]>([]);
|
||||
const cityList = ref<any[]>([]);
|
||||
const areaList = ref<any[]>([]);
|
||||
|
||||
const provCode = defineModel("provCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 监听省份code变化
|
||||
watch(provCode, async (n, o) => {
|
||||
if (n !== undefined && n) {
|
||||
await getRegionAjax()
|
||||
provChange(n, true)
|
||||
}
|
||||
}, {
|
||||
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
|
||||
})
|
||||
|
||||
const cityCode = defineModel("cityCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 监听市区code变化
|
||||
watch(cityCode, async (n, o) => {
|
||||
if (n !== undefined && n) {
|
||||
await getRegionAjax()
|
||||
cityChange(n, true)
|
||||
}
|
||||
}, {
|
||||
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
|
||||
})
|
||||
|
||||
const areaCode = defineModel("areaCode", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const prov = defineModel("prov", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const city = defineModel("city", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
const area = defineModel("area", {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 省份变化 e code isEcho是否回显
|
||||
function provChange(e: string, isEcho: boolean = false) {
|
||||
if (!isEcho) {
|
||||
cityCode.value = "";
|
||||
areaCode.value = "";
|
||||
cityList.value = [];
|
||||
areaList.value = [];
|
||||
}
|
||||
const provObj = provList.value.find((item) => item.regionId == e);
|
||||
prov.value = provObj ? provObj.regionName : "";
|
||||
if (provObj && provObj.children) {
|
||||
cityList.value = provObj.children;
|
||||
}
|
||||
}
|
||||
|
||||
// 市区变化
|
||||
function cityChange(e: string, isEcho: boolean = false) {
|
||||
if (!isEcho) {
|
||||
areaCode.value = "";
|
||||
areaList.value = [];
|
||||
}
|
||||
const cityObj = cityList.value.find((item) => item.regionId == e);
|
||||
city.value = cityObj ? cityObj.regionName : "";
|
||||
if (cityObj && cityObj.children) {
|
||||
areaList.value = cityObj.children;
|
||||
}
|
||||
}
|
||||
|
||||
// 区变化
|
||||
function areaChange(e: string) {
|
||||
const areaObj = areaList.value.find((item) => item.regionId == e);
|
||||
area.value = areaObj ? areaObj.regionName : "";
|
||||
}
|
||||
|
||||
// 获取省市区数据
|
||||
async function getRegionAjax() {
|
||||
try {
|
||||
const res = await getRegion();
|
||||
provList.value = res;
|
||||
} catch (error) {
|
||||
console.error('获取省市区数据失败：', error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getRegionAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
</style>
|
||||
135
src/views/applyments/components/selectBank.vue
Normal file
135
src/views/applyments/components/selectBank.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="select_bank">
|
||||
<!-- 银行 -->
|
||||
<el-select v-model="bankInstId" placeholder="请选择银行，可搜索" style="width: 200px;" filterable remote
|
||||
:remote-method="remoteGetBank" :loading="loading" remote-show-suffix @change="bankChange" :disabled="!province">
|
||||
<el-option v-for="item in bankList" :key="item.bankAliasCode" :label="item.bankAlias" :value="item.bankCode" />
|
||||
</el-select>
|
||||
<!-- 支行 -->
|
||||
<el-select v-model="bankBranchCode" placeholder="请选择支行" style="width: 200px;" :disabled="!bankInstId"
|
||||
@change="bankBranchChange">
|
||||
<el-option v-for="item in bankBranchList" :key="item.bankCode" :label="item.branchName"
|
||||
:value="item.bankCode"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getBankInfo, getBankBranchList } from "@/api/common";
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
province: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
city: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const bankAlias = ref('')
|
||||
|
||||
const bankList = ref<Array<{ id: string; bankAlias: string, bankCode: string, bankAliasCode: string }>>([]);
|
||||
|
||||
const bankInstId = defineModel('bankInstId', {
|
||||
type: String,
|
||||
default: "",
|
||||
});
|
||||
|
||||
// 监听银行code变化
|
||||
watch(bankInstId, async (n, o) => {
|
||||
if (n !== undefined && n) {
|
||||
await getBankInfoAjax()
|
||||
bankChange(n)
|
||||
}
|
||||
}, {
|
||||
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
|
||||
})
|
||||
|
||||
const bankName = defineModel('bankName', {
|
||||
type: String,
|
||||
default: "",
|
||||
})
|
||||
|
||||
// 选择银行
|
||||
function bankChange(e: any) {
|
||||
let obj = bankList.value.find(item => item.bankCode == e)
|
||||
if (obj && obj.id) {
|
||||
bankName.value = obj.bankAlias
|
||||
bankInstId.value = obj.bankCode
|
||||
getBankBranchListAjax(obj.bankCode)
|
||||
}
|
||||
}
|
||||
|
||||
// 支行开户行编号 bankCode
|
||||
const bankBranchCode = defineModel('bankBranchCode', {
|
||||
type: String,
|
||||
default: "",
|
||||
})
|
||||
|
||||
// 支行开户行行别名称 branchName
|
||||
const bankBranchName = defineModel('bankBranchName', {
|
||||
type: String,
|
||||
default: "",
|
||||
})
|
||||
|
||||
// 选择支行
|
||||
function bankBranchChange(e: string) {
|
||||
let obj = bankBranchList.value.find(item => item.bankCode == e)
|
||||
if (obj && obj.bankCode) {
|
||||
bankBranchName.value = obj.branchName
|
||||
}
|
||||
}
|
||||
|
||||
// 支行列表
|
||||
const bankBranchList = ref<Array<{ bankCode: string; branchName: string }>>([]);
|
||||
async function getBankBranchListAjax(bankCode: string) {
|
||||
try {
|
||||
const res = await getBankBranchList({
|
||||
province: props.province,
|
||||
city: props.city,
|
||||
instId: bankCode,
|
||||
})
|
||||
bankBranchList.value = res
|
||||
} catch (error) {
|
||||
console.log('', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 远程搜索
|
||||
function remoteGetBank(query: string) {
|
||||
if (query) {
|
||||
bankNameValue.value = query
|
||||
getBankInfoAjax()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取银行列表
|
||||
const bankNameValue = ref('')
|
||||
async function getBankInfoAjax() {
|
||||
try {
|
||||
loading.value = true
|
||||
const res: any = await getBankInfo({ page: 1, size: 100, bankName: bankNameValue.value });
|
||||
bankList.value = res.records || [];
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getBankInfoAjax()
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select_bank {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
</style>
|
||||
43
src/views/applyments/components/selectCategory.vue
Normal file
43
src/views/applyments/components/selectCategory.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<el-cascader v-model="modelValue" placeholder="请选择类目" filterable :options="options" :props="props"
|
||||
style="width: 300px;"></el-cascader>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getCategory } from '@/api/common'
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: ''
|
||||
})
|
||||
|
||||
const options = ref([])
|
||||
|
||||
const props = ref({
|
||||
children: 'child',
|
||||
emitPath: false
|
||||
})
|
||||
|
||||
// 获取类目
|
||||
async function getCategoryAjax() {
|
||||
try {
|
||||
const res = await getCategory()
|
||||
res.map(item => {
|
||||
item.label = item.firstCategory
|
||||
item.child.map(val => {
|
||||
val.label = `${val.secondCategory}`
|
||||
val.value = `${val.firstCategoryCode}_${val.secondCategoryCode}`
|
||||
})
|
||||
})
|
||||
options.value = res
|
||||
console.log('options.value', options.value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCategoryAjax()
|
||||
})
|
||||
</script>
|
||||
162
src/views/applyments/components/selectShopsDialog.vue
Normal file
162
src/views/applyments/components/selectShopsDialog.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-dialog title="请选择用户" width="1000px" v-model="visible">
|
||||
<div class="content">
|
||||
<el-form :model="queryForm" inline>
|
||||
<!-- <el-form-item>
|
||||
<el-input v-model="queryForm.no" placeholder="请输入商户号" />
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-input v-model="queryForm.shopName" placeholder="请输入商户名称" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">查询</el-button>
|
||||
<el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading" stripe border
|
||||
style="width: 100%; margin-top: 20px;">
|
||||
<el-table-column label="商户名称" prop="shopName"></el-table-column>
|
||||
<el-table-column label="联系人姓名" prop="contactName"></el-table-column>
|
||||
<el-table-column label="联系人电话" prop="phone"></el-table-column>
|
||||
<el-table-column label="店铺类型" prop="shopType" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="typeFilter(scope.row.shopType).type">{{ typeFilter(scope.row.shopType).label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="row mt14">
|
||||
<el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
|
||||
:page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="">确定</el-button>
|
||||
</div>
|
||||
</template> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import ShopApi from "@/api/account/shop";
|
||||
|
||||
// 店铺类型过滤器
|
||||
type TagType = 'primary' | 'success' | 'danger' | 'info' | 'warning';
|
||||
function typeFilter(shopType: string): { value: string; label: string; type: TagType } {
|
||||
const typs: Array<{ value: string; label: string; type: TagType }> = [
|
||||
{
|
||||
value: 'only',
|
||||
label: '单店',
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
value: 'chain',
|
||||
label: '连锁',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
value: 'join',
|
||||
label: '加盟',
|
||||
type: 'danger'
|
||||
}
|
||||
];
|
||||
|
||||
const obj = typs.find(item => item.value === shopType);
|
||||
return obj ? obj : { value: shopType, label: shopType, type: 'info' };
|
||||
}
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const queryForm = ref({
|
||||
shopName: "",
|
||||
});
|
||||
|
||||
// 分页大小发生变化
|
||||
function handleSizeChange(e: number) {
|
||||
tableData.size = e;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 分页发生变化
|
||||
function handleCurrentChange(e: number) {
|
||||
tableData.page = e;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 查询
|
||||
function searchHandle() {
|
||||
tableData.page = 1;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 重置
|
||||
function resetHandle() {
|
||||
queryForm.value.shopName = "";
|
||||
tableData.page = 1;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
const tableData = reactive({
|
||||
loading: false,
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
list: [],
|
||||
});
|
||||
|
||||
// 获取店铺列表
|
||||
async function getTableData() {
|
||||
try {
|
||||
tableData.loading = true;
|
||||
const res: any = await ShopApi.getList({
|
||||
page: tableData.page,
|
||||
size: tableData.size,
|
||||
shopName: queryForm.value.shopName,
|
||||
});
|
||||
tableData.list = res.records;
|
||||
tableData.total = res.totalRow;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
tableData.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: 'success', row: any): void;
|
||||
}>();
|
||||
|
||||
function selectHandle(row: any) {
|
||||
console.log("选择商户：", row);
|
||||
emits('success', row);
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
function show() {
|
||||
visible.value = true;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.row {
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
src/views/applyments/components/singCodeDialog.vue
Normal file
38
src/views/applyments/components/singCodeDialog.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-dialog title="签约码" width="350px" v-model="visible">
|
||||
<div class="wrap">
|
||||
<el-image :src="url" style="width: 200px;height: 200px;"></el-image>
|
||||
<el-text>请前往{{ type == 1 ? '支付宝' : '微信' }}进行扫码</el-text>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const url = ref('')
|
||||
const type = ref(1)
|
||||
|
||||
function show(url, type) {
|
||||
visible.value = true
|
||||
url.value = url
|
||||
type.value = type
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
268
src/views/applyments/index.vue
Normal file
268
src/views/applyments/index.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<!-- 进件管理 -->
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="gyq_content">
|
||||
<div class="row">
|
||||
<el-form :model="queryForm" inline>
|
||||
<el-form-item label="商户类型">
|
||||
<el-select v-model="queryForm.userType" style="width: 200px;">
|
||||
<el-option v-for="item in userTypeList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺名称">
|
||||
<el-input style="width: 200px;" v-model="queryForm.shopName" placeholder="请输入店铺名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="进件状态">
|
||||
<el-select v-model="queryForm.status" style="width: 200px;">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付宝账号">
|
||||
<el-input style="width: 200px;" v-model="queryForm.alipayAccount" placeholder="请输入支付宝账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" :loading="tableData.loading" @click="queryHandle">查询</el-button>
|
||||
<el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-button type="primary" icon="Plus" @click="selectShopsDialogRef?.show()">发起进件</el-button>
|
||||
</div>
|
||||
<div class="row mt14">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading" stripe border>
|
||||
<el-table-column label="商户号" prop="merchantCode" width="200"></el-table-column>
|
||||
<el-table-column label="商户简称" prop="shortName" width="150"></el-table-column>
|
||||
<el-table-column label="商户类型" prop="userType" width="120">
|
||||
<template v-slot="scope">
|
||||
{{ userTypeListFilter(scope.row.userType).label }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="绑定店铺名称" prop="shopName" width="200"></el-table-column>
|
||||
<el-table-column label="支付宝进件状态" prop="alipayStatus" min-width="200">
|
||||
<template v-slot="scope">
|
||||
<div class="column">
|
||||
<div>{{ statusListFilter(scope.row.alipayStatus).label }}</div>
|
||||
<el-text type="danger" v-if="scope.row.alipayStatus == 'REJECTED'">{{ scope.row.alipayErrorMsg
|
||||
}}</el-text>
|
||||
<el-link type="primary" v-if="scope.row.alipayStatus == 'SIGN '"
|
||||
@click="singCodeDialogRef?.show(scope.row.alipaySignUrl, 1)">查看签约码</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="微信进件状态" prop="wechatStatus" min-width="200">
|
||||
<template v-slot="scope">
|
||||
<div class="column">
|
||||
<div>{{ statusListFilter(scope.row.wechatStatus).label }}</div>
|
||||
<el-text type="danger" v-if="scope.row.wechatStatus == 'REJECTED'">{{ scope.row.wechatErrorMsg
|
||||
}}</el-text>
|
||||
<el-link type="primary" v-if="scope.row.wechatStatus == 'SIGN '"
|
||||
@click="singCodeDialogRef?.show(scope.row.wechatSignUrl, 2)">查看签约码</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" prop="updateTime" width="200"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150">
|
||||
<template v-slot="scope">
|
||||
<el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
|
||||
<el-button link type="primary" @click="toDetail(scope.row)">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="row mt14">
|
||||
<el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
|
||||
:page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择商户 -->
|
||||
<selectShopsDialog ref="selectShopsDialogRef" @success="selectSuccessHandle" />
|
||||
<!-- 显示签约码 -->
|
||||
<singCodeDialog ref="singCodeDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRouter } from 'vue-router';
|
||||
import selectShopsDialog from "./components/selectShopsDialog.vue";
|
||||
import singCodeDialog from "./components/singCodeDialog.vue";
|
||||
import { entryManagerList } from '@/api/common'
|
||||
|
||||
const singCodeDialogRef = ref(null)
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const selectShopsDialogRef = ref(null);
|
||||
|
||||
// 选择商户成功回调
|
||||
function selectSuccessHandle(shop) {
|
||||
console.log('选择的商户：', shop);
|
||||
router.push({ name: 'applyment_in', query: { shopId: shop.id } });
|
||||
}
|
||||
|
||||
const userTypeList = ref([
|
||||
{
|
||||
value: '0',
|
||||
label: '个体商户'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '企业商户'
|
||||
},
|
||||
])
|
||||
|
||||
function userTypeListFilter(userType) {
|
||||
let obj = userTypeList.value.find(item => item.value == userType)
|
||||
if (obj) {
|
||||
return obj
|
||||
} else {
|
||||
return {
|
||||
label: userType,
|
||||
value: userType
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const statusList = ref([
|
||||
{
|
||||
value: 'WAIT',
|
||||
label: '待提交'
|
||||
},
|
||||
{
|
||||
value: 'INIT',
|
||||
label: '待处理'
|
||||
},
|
||||
{
|
||||
value: 'AUDIT',
|
||||
label: '待审核'
|
||||
},
|
||||
{
|
||||
value: 'SIGN',
|
||||
label: '待签约'
|
||||
},
|
||||
{
|
||||
value: 'FINISH',
|
||||
label: '已完成'
|
||||
},
|
||||
{
|
||||
value: 'REJECTED',
|
||||
label: '失败'
|
||||
},
|
||||
])
|
||||
|
||||
function statusListFilter(status) {
|
||||
let obj = statusList.value.find(item => item.value == status)
|
||||
if (obj) {
|
||||
return obj
|
||||
} else {
|
||||
return {
|
||||
label: status,
|
||||
value: status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const queryForm = ref({
|
||||
userType: '',
|
||||
shopName: '',
|
||||
status: '',
|
||||
alipayAccount: ''
|
||||
});
|
||||
|
||||
function queryHandle() {
|
||||
tableData.page = 1
|
||||
getTableData()
|
||||
}
|
||||
|
||||
function resetHandle() {
|
||||
queryForm.value.userType = ''
|
||||
queryForm.value.shopName = ''
|
||||
queryForm.value.status = ''
|
||||
queryForm.value.alipayAccount = ''
|
||||
queryHandle()
|
||||
}
|
||||
|
||||
const tableData = reactive({
|
||||
loading: false,
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
list: [],
|
||||
})
|
||||
|
||||
// 分页大小发生变化
|
||||
function handleSizeChange(e) {
|
||||
tableData.size = e;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 分页发生变化
|
||||
function handleCurrentChange(e) {
|
||||
tableData.page = e;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 获取表格数据
|
||||
async function getTableData() {
|
||||
try {
|
||||
tableData.loading = true
|
||||
const res = await entryManagerList({
|
||||
page: tableData.page,
|
||||
size: tableData.size,
|
||||
...queryForm.value
|
||||
})
|
||||
tableData.list = res.records
|
||||
tableData.total = res.totalRow
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
tableData.loading = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 跳转编辑页面
|
||||
function toDetail(row) {
|
||||
const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
|
||||
router.push({
|
||||
name: 'applyment_in',
|
||||
query: {
|
||||
shopId: row.shopId,
|
||||
licenceNo: businessLicenceInfo.licenceNo
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTableData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
padding: 14px;
|
||||
|
||||
.gyq_content {
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
71
src/views/applyments/select_shop.vue
Normal file
71
src/views/applyments/select_shop.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<!-- 选择商户以及进件渠道 -->
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="gyq_content">
|
||||
<div class="row">
|
||||
<el-form :model="queryForm" inline>
|
||||
<el-form-item label="请选择用户">
|
||||
<el-input placeholder="用户号/名称/手机号" readonly @click="selectShopsDialogRef?.show()"
|
||||
v-model="queryForm.shopName">
|
||||
<template #suffix>
|
||||
<div class="center">
|
||||
<el-icon v-if="queryForm.shopName" @click.stop="queryForm.shopName = ''">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
<el-icon @click="selectShopsDialogRef?.show()" style="cursor: pointer;">
|
||||
<Search />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Plus">新增用户</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<selectShopsDialog ref="selectShopsDialogRef" @success="selectShopSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import selectShopsDialog from "./components/selectShopsDialog.vue";
|
||||
|
||||
const selectShopsDialogRef = ref<InstanceType<typeof selectShopsDialog> | null>(null);
|
||||
|
||||
const queryForm = ref({
|
||||
shopName: ""
|
||||
});
|
||||
|
||||
// 选择商户成功回调
|
||||
function selectShopSuccess(shop: any) {
|
||||
console.log('选择的商户：', shop);
|
||||
queryForm.value.shopName = shop.shopName;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
padding: 14px;
|
||||
|
||||
.gyq_content {
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
&.mt14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user