|
@@ -0,0 +1,308 @@
|
|
|
|
+<!-- -->
|
|
|
|
+<template>
|
|
|
|
+ <div class="m-container">
|
|
|
|
+ <h2>
|
|
|
|
+ <el-page-header @back="onCancel"
|
|
|
|
+ :content="(pageType == 'create' ? '创建账号' : '修改账号')"></el-page-header>
|
|
|
|
+ </h2>
|
|
|
|
+ <div class="m-core" style="overflow: hidden">
|
|
|
|
+ <el-col :span="10">
|
|
|
|
+ <el-form :model="form" :rules="rules" ref="accountForm" label-position="right" label-width="180px">
|
|
|
|
+ <el-form-item label="商户号" prop="memberId">
|
|
|
|
+ <el-input v-model="form.memberId" placeholder="请输入商户号"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="公司名称" prop="name">
|
|
|
|
+ <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="公司法人" prop="legalPerson">
|
|
|
|
+ <el-input v-model="form.legalPerson" placeholder="请输入公司法人"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="公司法人手机号" prop="legalMp">
|
|
|
|
+ <el-input v-model="form.legalMp" placeholder="请输入公司法人手机号"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="法人身份证号" prop="legalCertId">
|
|
|
|
+ <el-input v-model="form.legalCertId" placeholder="请输入法人身份证号"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="身份证有效期" prop="legalCertIdExpires">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="form.legalCertIdExpires"
|
|
|
|
+ :picker-options="{ firstDayOfWeek:1 }"
|
|
|
|
+ value-format="yyyyMMDD"
|
|
|
|
+ type="date"
|
|
|
|
+ placeholder="请选择身份证有效期">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="银行卡号" prop="cardNo">
|
|
|
|
+ <el-input v-model="form.cardNo" placeholder="请输入银行卡号"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="所属银行" prop="bankCode">
|
|
|
|
+ <el-select v-model="form.bankCode"
|
|
|
|
+ placeholder="请选择所属银行">
|
|
|
|
+ <el-option v-for="(item, index) in backList" :key="index" :label="item.title"
|
|
|
|
+ :value="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="省市" required>
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item prop="provCode">
|
|
|
|
+ <el-select v-model="form.provCode" style="width: 98% !important" @change="onProvChange" placeholder="请选择省份">
|
|
|
|
+ <el-option v-for="(item, index) in cityList" :key="index" :label="item.title"
|
|
|
|
+ :value="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item prop="areaCode">
|
|
|
|
+ <el-select v-model="form.areaCode" style="width: 100% !important" placeholder="请选择城市">
|
|
|
|
+ <el-option v-for="(item, index) in selectListCity" :key="index" :label="item.title"
|
|
|
|
+ :value="item.value"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="统一社会信用码" prop="socialCreditCode">
|
|
|
|
+ <el-input v-model="form.socialCreditCode" placeholder="请输入统一社会信用码"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="统一社会信用码有效期" prop="socialCreditCodeExpires">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="form.socialCreditCodeExpires"
|
|
|
|
+ :picker-options="{ firstDayOfWeek:1 }"
|
|
|
|
+ value-format="yyyyMMDD"
|
|
|
|
+ type="date"
|
|
|
|
+ placeholder="请选择统一社会信用码有效期">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="经营范围" prop="businessScope">
|
|
|
|
+ <!-- <el-input v-model="form.businessScope" placeholder="请输入经营范围"></el-input> -->
|
|
|
|
+ <el-input type="textarea" :rows="3" v-model="form.businessScope" placeholder="请输入经营范围"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="公司地址" prop="address">
|
|
|
|
+ <el-input v-model="form.address" placeholder="请输入公司地址"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="证照文件" prop="multipartFile">
|
|
|
|
+ <!-- <el-input type="file" class="uploadFile" v-model="form.multipartFile"></el-input> -->
|
|
|
|
+ <el-upload
|
|
|
|
+ class="avatar-upload"
|
|
|
|
+ ref="upload"
|
|
|
|
+ action="/api-web/uploadFile"
|
|
|
|
+ :on-preview="handlePreview"
|
|
|
|
+ :on-remove="handleRemove"
|
|
|
|
+ :on-change="handleChange"
|
|
|
|
+ :file-list="fileList"
|
|
|
|
+ :multiple="false"
|
|
|
|
+ :limit="1"
|
|
|
|
+ :auto-upload="false">
|
|
|
|
+ <el-button slot="trigger" type="primary">选取文件</el-button>
|
|
|
|
+ <!-- ,且不超过500kb -->
|
|
|
|
+ <div slot="tip" style="display: inline; padding-left: 20px;" class="el-upload__tip">只能上传一个文件</div>
|
|
|
|
+ </el-upload>
|
|
|
|
+ <!-- <el-upload class="avatar-uploader"
|
|
|
|
+ action="/api-web/uploadFile"
|
|
|
|
+ :headers="headers"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
|
+ <img v-if="form.multipartFile"
|
|
|
|
+ :src="form.coverImg"
|
|
|
|
+ class="avatar" />
|
|
|
|
+ <i v-else
|
|
|
|
+ class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
+ </el-upload> -->
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="邮编" prop="zipCode">
|
|
|
|
+ <el-input v-model="form.zipCode" placeholder="请输入邮编"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="备注">
|
|
|
|
+ <el-input type="textarea" :rows="3" v-model="form.memo" placeholder="请输入备注"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button >取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="onSubmit('accountForm')">确 定</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </el-col>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { cityJson } from "./cityJson";
|
|
|
|
+import { bankJson } from "./bankJson";
|
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
|
+import load from '@/utils/loading'
|
|
|
|
+import { createMember } from './api.js'
|
|
|
|
+import { isvalidPhone } from '@/utils/validate'
|
|
|
|
+let validPhone = (rule, value, callback) => {
|
|
|
|
+ if (!value) {
|
|
|
|
+ callback(new Error('请输入公司法人手机号'))
|
|
|
|
+ } else if (!isvalidPhone(value)) {
|
|
|
|
+ callback(new Error('请输入正确的11位手机号码'))
|
|
|
|
+ } else {
|
|
|
|
+ callback()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+export default {
|
|
|
|
+ name: 'ADaPayAccount',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ pageType: this.$route.query.type,
|
|
|
|
+ backList: bankJson,
|
|
|
|
+ cityList: cityJson,
|
|
|
|
+ selectListCity: [],
|
|
|
|
+ headers: {
|
|
|
|
+ Authorization: getToken()
|
|
|
|
+ },
|
|
|
|
+ fileList: [],
|
|
|
|
+ files: null, // 上传对象
|
|
|
|
+ form: {
|
|
|
|
+ memberId: null,
|
|
|
|
+ name: null,
|
|
|
|
+ legalPerson: null,
|
|
|
|
+ legalMp: null,
|
|
|
|
+ legalCertId: null,
|
|
|
|
+ legalCertIdExpires: null,
|
|
|
|
+ cardNo: null,
|
|
|
|
+ bankCode: null,
|
|
|
|
+ provCode: null,
|
|
|
|
+ areaCode: null,
|
|
|
|
+ socialCreditCode: null,
|
|
|
|
+ socialCreditCodeExpires: null,
|
|
|
|
+ businessScope: null,
|
|
|
|
+ address: null,
|
|
|
|
+ multipartFile: null,
|
|
|
|
+ zipCode: null,
|
|
|
|
+ memo: null
|
|
|
|
+ },
|
|
|
|
+ rules: {
|
|
|
|
+ memberId: [{required: true, message:'请输入商户号', trigger: 'blur'}],
|
|
|
|
+ name: [{required: true, message:'请输入公司名称', trigger: 'blur'}],
|
|
|
|
+ legalPerson: [{required: true, message:'请输入公司法人', trigger: 'blur'}],
|
|
|
|
+ legalMp: [{ type: 'number', required: true, validator: validPhone, trigger: 'blur' }],
|
|
|
|
+ legalCertId: [{required: true, message:'请输入法人身份证号', trigger: 'blur'}],
|
|
|
|
+ legalCertIdExpires: [{required: true, message:'请选择身份证有效期', trigger: 'change'}],
|
|
|
|
+ cardNo: [{required: true, message:'请输入银行卡号', trigger: 'blur'}],
|
|
|
|
+ bankCode: [{required: true, message:'请选择所属银行', trigger: 'change'}],
|
|
|
|
+ provCode: [{required: true, message:'请选择省份', trigger: 'change'}],
|
|
|
|
+ areaCode: [{required: true, message:'请选择城市', trigger: 'change'}],
|
|
|
|
+ socialCreditCode: [{required: true, message:'请输入统一社会信用码', trigger: 'blur'}],
|
|
|
|
+ socialCreditCodeExpires: [{required: true, message:'请选择统一社会信用码有效期', trigger: 'change'}],
|
|
|
|
+ businessScope: [{required: true, message:'请输入经营范围', trigger: 'blur'}],
|
|
|
|
+ address: [{required: true, message:'请输入公司地址', trigger: 'blur'}],
|
|
|
|
+ multipartFile: [{required: true, message:'请上传证照文件', trigger: 'change'}],
|
|
|
|
+ zipCode: [{required: true, message:'请输入邮编', trigger: 'blur'}]
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {},
|
|
|
|
+ activated() {},
|
|
|
|
+ methods: {
|
|
|
|
+ async onSubmit (formName) {
|
|
|
|
+ console.log(this.form)
|
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ const form = this.form
|
|
|
|
+ let formData = new FormData()
|
|
|
|
+ formData.append("memberId", form.memberId)
|
|
|
|
+ formData.append("name", form.name)
|
|
|
|
+ formData.append("legalPerson", form.legalPerson)
|
|
|
|
+ formData.append("legalMp", form.legalMp)
|
|
|
|
+ formData.append("legalCertId", form.legalCertId)
|
|
|
|
+ formData.append("legalCertIdExpires", form.legalCertIdExpires)
|
|
|
|
+ formData.append("cardNo", form.cardNo)
|
|
|
|
+ formData.append("bankCode", form.bankCode)
|
|
|
|
+ formData.append("provCode", form.provCode)
|
|
|
|
+ formData.append("areaCode", form.areaCode)
|
|
|
|
+ formData.append("socialCreditCode", form.socialCreditCode)
|
|
|
|
+ formData.append("socialCreditCodeExpires", form.socialCreditCodeExpires)
|
|
|
|
+ formData.append("businessScope", form.businessScope)
|
|
|
|
+ formData.append("address", form.address)
|
|
|
|
+ formData.append("multipartFile", form.multipartFile)
|
|
|
|
+ formData.append("zipCode", form.zipCode)
|
|
|
|
+ formData.append("memo", form.memo)
|
|
|
|
+ createMember(formData).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleChange(file) {
|
|
|
|
+ console.log(file)
|
|
|
|
+ this.files = file
|
|
|
|
+ this.form.multipartFile = file.raw
|
|
|
|
+ },
|
|
|
|
+ handleRemove(file, fileList) {
|
|
|
|
+ console.log(file, fileList);
|
|
|
|
+ this.files = null
|
|
|
|
+ },
|
|
|
|
+ handlePreview(file) {
|
|
|
|
+ console.log(file);
|
|
|
|
+ },
|
|
|
|
+ onProvChange(value) {
|
|
|
|
+ this.form.areaCode = null
|
|
|
|
+ this.cityList.forEach(item => {
|
|
|
|
+ if(item.value == value) {
|
|
|
|
+ this.selectListCity = item.cities
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onCancel () {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: "/insideSetting/adapayManager"
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
+.el-input, .el-textarea, .el-select {
|
|
|
|
+ width: 100% !important;
|
|
|
|
+}
|
|
|
|
+.el-button--primary {
|
|
|
|
+ background: #14928a;
|
|
|
|
+ border-color: #14928a;
|
|
|
|
+ color: #fff;
|
|
|
|
+ &:hover,
|
|
|
|
+ &:active,
|
|
|
|
+ &:focus {
|
|
|
|
+ background: #14928a;
|
|
|
|
+ border-color: #14928a;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+/deep/.avatar-uploader {
|
|
|
|
+ .el-upload {
|
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ position: relative;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ &:hover {
|
|
|
|
+ border-color: #409EFF;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.uploadFile {
|
|
|
|
+ /deep/.el-input__inner {
|
|
|
|
+ padding: 0;
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.avatar-uploader-icon {
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ color: #8c939d;
|
|
|
|
+ width: 178px;
|
|
|
|
+ height: 178px;
|
|
|
|
+ line-height: 178px;
|
|
|
|
+ text-align: center;
|
|
|
|
+}
|
|
|
|
+.avatar {
|
|
|
|
+ width: 178px;
|
|
|
|
+ height: 178px;
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+</style>
|