123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977 |
- <template>
- <div class="bind-page">
- <s-header title="绑定银行卡" :noback="false" :isBorder="false"></s-header>
- <div class="main-content">
- <!-- 步骤条 -->
- <div class="step-container">
- <van-steps :active="currentStep" active-color="#4d6add">
- <van-step>证件信息</van-step>
- <van-step>结算信息</van-step>
- <van-step>信息审核</van-step>
- <van-step>签约</van-step>
- </van-steps>
- </div>
- <!-- 证件信息 -->
- <div v-if="currentStep === 0" class="card-section">
- <van-tabs v-model:active="merchantType" title-active-color="#4d6add">
- <!-- 个人商户 -->
- <van-tab
- title="个人商户"
- :disabled="joinPayMchNo != null && merchantType === 1"
- >
- <div class="upload-card">
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 收款人证件(大陆)
- </h3>
- <div class="upload-group">
- <van-uploader
- v-model="idCardFront"
- :max-count="1"
- class="custom-uploader"
- name="idCardFront"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item">
- <van-icon name="photo" size="32" color="#4d6add" />
- <p>上传人像面</p>
- </div>
- </template>
- </van-uploader>
- <van-uploader
- v-model="idCardBack"
- :max-count="1"
- class="custom-uploader"
- name="idCardBack"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item">
- <van-icon name="photo" size="32" color="#4d6add" />
- <p>上传国徽面</p>
- </div>
- </template>
- </van-uploader>
- </div>
- </div>
- </van-tab>
- <!-- 企业商户 -->
- <van-tab
- title="企业商户"
- :disabled="joinPayMchNo != null && merchantType === 0"
- >
- <div class="upload-card">
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 法人证件信息(大陆)
- </h3>
- <div class="upload-group">
- <van-uploader
- v-model="idCardFront"
- :max-count="1"
- class="custom-uploader"
- name="idCardFront"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item">
- <van-icon name="photo" size="32" color="#4d6add" />
- <p>上传人像面</p>
- </div>
- </template>
- </van-uploader>
- <van-uploader
- v-model="idCardBack"
- :max-count="1"
- class="custom-uploader"
- name="idCardBack"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item">
- <van-icon name="photo" size="32" color="#4d6add" />
- <p>上传国徽面</p>
- </div>
- </template>
- </van-uploader>
- </div>
- <h3 class="upload-title" style="margin-top: 20px">
- <span class="title-decoration"></span>
- 营业执照
- </h3>
- <van-uploader
- v-model="businessLicense"
- :max-count="1"
- class="custom-uploader"
- name="businessLicense"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item single">
- <van-icon name="description" size="32" color="#4d6add" />
- <p>上传营业执照</p>
- </div>
- </template>
- </van-uploader>
- </div>
- </van-tab>
- </van-tabs>
- </div>
- <!-- 结算信息 -->
- <div v-if="currentStep === 1" class="card-section">
- <van-tabs v-model:active="merchantType" title-active-color="#4d6add">
- <!-- 个人商户 -->
- <van-tab title="个人商户" :disabled="merchantType === 1">
- <div class="upload-card">
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 银行卡正面
- </h3>
- <van-uploader
- v-model="bankCard"
- :max-count="1"
- class="custom-uploader"
- name="bankCard"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item single">
- <van-icon name="card" size="32" color="#4d6add" />
- <p>上传银行卡正面</p>
- </div>
- </template>
- </van-uploader>
- </div>
- </van-tab>
- <!-- 企业商户 -->
- <van-tab title="企业商户" :disabled="merchantType === 0">
- <div class="upload-card">
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 开户许可证
- </h3>
- <van-uploader
- v-model="accountLicense"
- :max-count="1"
- class="custom-uploader"
- name="accountLicense"
- :after-read="afterRead"
- >
- <template #default>
- <div class="upload-item single">
- <van-icon name="description" size="32" color="#4d6add" />
- <p>上传开户许可证</p>
- </div>
- </template>
- </van-uploader>
- </div>
- </van-tab>
- </van-tabs>
- </div>
- <!-- 信息审核步骤 -->
- <div v-if="currentStep === 2" class="review-section">
- <van-collapse v-model="activeCollapse">
- <!-- 基础信息 -->
- <van-collapse-item title="主体信息" name="1">
- <van-cell
- title="商户类型"
- :value="merchantType === 0 ? '个人商户' : '企业商户'"
- />
- <template v-if="merchantType === 0">
- <van-cell title="姓名" :value="formData.name" />
- <van-cell title="身份证号" :value="formData.idNumber" />
- <van-cell title="有效期" :value="formData.validDate" />
- <van-cell title="手机号" :value="formData.phone" />
- <van-cell title="联系人" :value="formData.contactName" />
- <van-cell title="手机号" :value="formData.contactPhone" />
- </template>
- <template v-else>
- <van-cell title="企业名称" :value="formData.companyName" />
- <van-cell title="营业执照号" :value="formData.licenseNo" />
- <van-cell title="注册日期" :value="formData.companyDate" />
- <van-cell title="法人姓名" :value="formData.name" />
- <van-cell title="法人身份证" :value="formData.idNumber" />
- <van-cell title="法人手机号" :value="formData.phone" />
- <van-cell title="有效期" :value="formData.validDate" />
- <van-cell title="联系人" :value="formData.contactName" />
- <van-cell title="联系人手机号" :value="formData.contactPhone" />
- </template>
- </van-collapse-item>
- <!-- 银行信息 -->
- <van-collapse-item title="结算信息" name="2">
- <van-cell
- title="账户类型"
- :value="merchantType === 0 ? '个人账户' : '企业账户'"
- />
- <van-cell
- :title="merchantType === 0 ? '银行卡号' : '对公账号'"
- :value="formData.bankCardNo"
- />
- <van-cell
- v-if="merchantType === 1"
- title="联行号"
- :value="formData.bankChannelNo"
- />
- <van-cell
- title="结算方式"
- :value="formData.settMode === '1' ? '自动结算' : '手动提现'"
- />
- <van-cell title="到账时效" value="D1" />
- </van-collapse-item>
- </van-collapse>
- </div>
- <!-- 签约确认步骤 -->
- <div v-if="currentStep === 3" class="sign-section">
- <div class="upload-card">
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 信息认证状态
- </h3>
- <!-- 信息认证状态 -->
- <div class="audit-status-bar" :class="infoStatusClass">
- <div class="status-content">
- <van-icon :name="infoStatusIcon" class="status-icon" />
- <div class="status-text">
- <p class="main-text">{{ infoStatusMainText }}</p>
- <p class="sub-text">{{ infoStatusSubText }}</p>
- </div>
- </div>
- <van-button
- v-if="infoStatus == 2"
- size="small"
- type="primary"
- plain
- @click="handleInfoReupload"
- >
- 修改信息
- </van-button>
- </div>
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 证件审核状态
- </h3>
- <!-- 审核状态栏 -->
- <div class="audit-status-bar" :class="statusClass">
- <div class="status-content">
- <van-icon :name="statusIcon" class="status-icon" />
- <div class="status-text">
- <p class="main-text">{{ statusMainText }}</p>
- <p class="sub-text">{{ statusSubText }}</p>
- </div>
- </div>
- <van-button
- v-if="auditStatus == 2"
- size="small"
- type="primary"
- plain
- @click="handleInfoReupload"
- >
- 上传
- </van-button>
- </div>
- <!-- 签约说明 -->
- <div class="sign-notice" v-if="signStatus != 1">
- <van-icon name="warning" color="#FF9500" />
- <span>请确认所有状态通过后,点击下方按钮完成签约</span>
- </div>
- <h3 class="upload-title">
- <span class="title-decoration"></span>
- 签约状态
- </h3>
- <!-- 签约状态栏 -->
- <div class="audit-status-bar" :class="signStatusClass">
- <div class="status-content">
- <van-icon :name="signStatusIcon" class="status-icon" />
- <div class="status-text">
- <p class="main-text">{{ signStatusMainText }}</p>
- <p class="sub-text">{{ signStatusSubText }}</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 其他步骤内容 -->
- <!-- 操作按钮 -->
- <div class="action-section">
- <!-- 条件显示提示语 -->
- <div v-if="currentStep === 0 && merchantType === 1" class="action-notice">
- <van-icon name="warning" class="notice-icon" />
- <span>请确认上传法人证件信息与营业执照主体一致</span>
- </div>
- <div class="action-buttons">
- <van-button
- v-if="currentStep > 0 && currentStep < 3 && auditStatus != 1"
- round
- class="prev-btn"
- @click="currentStep--"
- >
- 上一步
- </van-button>
- <van-button
- v-if="currentStep == 2 && auditStatus == 1"
- round
- class="prev-btn"
- @click="currentStep--"
- >
- 上一步
- </van-button>
- <van-button
- v-if="currentStep < 3"
- round
- type="primary"
- class="next-btn"
- @click="handleNextStep"
- >
- 下一步
- </van-button>
- <van-button
- v-if="currentStep == 3 && signStatus != 1"
- round
- type="primary"
- class="next-btn"
- @click="handleNextStep"
- >
- 立即签约
- </van-button>
- <van-button
- v-if="
- currentStep == 3 &&
- auditStatus == 1 &&
- infoStatus == 1 &&
- signStatus == 1
- "
- round
- type="primary"
- class="next-btn"
- @click="updateBankCard"
- >
- 修改银行卡
- </van-button>
- </div>
- </div>
- <!-- 信息确认 ActionSheet -->
- <van-action-sheet
- v-model:show="showConfirmSheet"
- title="信息确认"
- :round="false"
- class="custom-actionsheet"
- >
- <!-- 证件信息 -->
- <div class="sheet-content" v-if="currentStep === 0">
- <van-form @submit="confirmInfo(0)">
- <!-- 个人商户表单 -->
- <template v-if="merchantType === 0">
- <!-- 收款人证件信息-->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 16px; color: #333"
- >收款人证件信息</span
- >
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.name"
- label="姓名"
- placeholder="请输入姓名"
- required
- :rules="[{ required: true, message: '请输入姓名' }]"
- />
- <van-field
- v-model="formData.idNumber"
- label="身份证号"
- placeholder="请输入身份证号"
- :formatter="formatIdCard"
- required
- :rules="[{ required: true, message: '请输入身份证号' }]"
- />
- <van-field
- v-model="formData.validDate"
- label="有效期限"
- placeholder="请选择有效期"
- readonly
- clickable
- required
- @click="showDatePicker = true"
- :rules="[{ required: true, message: '请选择有效期' }]"
- />
- <van-field
- v-model="formData.phone"
- label="收款人手机号"
- placeholder="收款人手机号"
- :formatter="formatPhone"
- required
- :rules="[
- {
- required: true,
- message: '请输入11位手机号',
- validator: (val) =>
- /^1[3-9]\d{9}$/.test(val.replace(/\s/g, '')),
- },
- ]"
- />
- <!-- 联系人信息 -->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 16px; color: #333">联系人信息</span>
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.contactName"
- label="联系人姓名"
- placeholder="请输入联系人姓名"
- :disabled="joinPayMchNo != null"
- :rules="[{ required: true, message: '请输入联系人姓名' }]"
- required
- />
- <van-field
- v-model="formData.contactPhone"
- label="联系人手机号"
- placeholder="请输入联系人手机号"
- :formatter="formatPhone"
- :disabled="joinPayMchNo != null"
- required
- :rules="[
- {
- required: true,
- message: '请输入11位手机号',
- validator: (val) =>
- /^1[3-9]\d{9}$/.test(val.replace(/\s/g, '')),
- },
- ]"
- />
- </template>
- <!-- 企业商户表单 -->
- <template v-else>
- <!-- 法人信息 -->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 0.45rem; color: #333"
- >法人证件信息</span
- >
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.name"
- label="法人姓名"
- placeholder="请输入法人姓名"
- required
- :rules="[{ required: true, message: '请输入法人姓名' }]"
- />
- <van-field
- v-model="formData.idNumber"
- label="法人身份证"
- placeholder="请输入法人身份证"
- :rules="[{ required: true, message: '请输入法人身份证' }]"
- :formatter="formatIdCard"
- required
- />
- <van-field
- v-model="formData.validDate"
- label="有效期限"
- placeholder="请选择有效期"
- :rules="[{ required: true, message: '请选择有效期' }]"
- readonly
- clickable
- required
- @click="showDatePicker = true"
- />
- <van-field
- v-model="formData.phone"
- label="法人手机号"
- placeholder="请输入法人手机号"
- :formatter="formatPhone"
- required
- :rules="[
- {
- required: true,
- message: '请输入11位手机号',
- validator: (val) =>
- /^1[3-9]\d{9}$/.test(val.replace(/\s/g, '')),
- },
- ]"
- />
- <!-- 联系人信息 -->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 0.45rem; color: #333"
- >联系人信息</span
- >
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.contactName"
- label="联系人姓名"
- placeholder="请输入联系人姓名"
- :rules="[{ required: true, message: '请输入联系人姓名' }]"
- required
- />
- <van-field
- v-model="formData.contactPhone"
- label="联系人手机号"
- placeholder="请输入联系人手机号"
- :formatter="formatPhone"
- required
- :rules="[
- {
- required: true,
- message: '请输入11位手机号',
- validator: (val) =>
- /^1[3-9]\d{9}$/.test(val.replace(/\s/g, '')),
- },
- ]"
- />
- <!-- 营业执照信息 -->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 0.45rem; color: #333"
- >营业执照信息</span
- >
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.licenseNo"
- label="执照编号"
- placeholder="请输入营业执照编号"
- :rules="[{ required: true, message: '请输入营业执照编号' }]"
- required
- />
- <van-field
- v-model="formData.companyName"
- label="企业名称"
- placeholder="请输入企业全称"
- :rules="[{ required: true, message: '请输入企业全称' }]"
- required
- />
- <van-field
- v-model="formData.companyDate"
- label="注册日期"
- placeholder="请选择注册日期"
- :rules="[{ required: true, message: '请选择注册日期' }]"
- readonly
- clickable
- required
- @click="showCompanyDatePicker = true"
- />
- </template>
- <div class="confirm-buttons">
- <van-button
- round
- block
- type="primary"
- class="confirm-btn"
- native-type="submit"
- >
- 确认信息
- </van-button>
- </div>
- </van-form>
- </div>
- <!-- 银行卡信息 -->
- <div class="sheet-content" v-if="currentStep === 1">
- <van-form @submit="confirmInfo(1)">
- <!-- 个人商户表单 -->
- <template v-if="merchantType === 0">
- <!-- 银行卡信息-->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 0.45rem; color: #333"
- >银行卡信息</span
- >
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.bankCardNo"
- label="银行账号"
- placeholder="请输入银行账号"
- required
- :rules="[{ required: true, message: '请输入银行账号' }]"
- />
- <van-field label="结算方式" required>
- <template #input>
- <div class="settlement-container">
- <van-radio-group
- v-model="formData.settMode"
- direction="horizontal"
- >
- <van-radio name="1" checked-color="#4d6add" icon-size="18px"
- >自动结算</van-radio
- >
- <van-radio name="2" checked-color="#4d6add" icon-size="18px"
- >手动提现</van-radio
- >
- </van-radio-group>
- <!-- 新增提示语 -->
- <div class="settlement-tip">
- <van-icon name="info" color="#999" size="14px" />
- <span>24小时内到账</span>
- </div>
- </div>
- </template>
- </van-field>
- </template>
- <!-- 企业商户表单 -->
- <template v-else>
- <!-- 法人信息 -->
- <van-cell>
- <template #title>
- <div class="custom-title">
- <span class="blue-line"></span>
- <span style="font-size: 0.45rem; color: #333"
- >开户许可证信息</span
- >
- </div>
- </template>
- </van-cell>
- <van-field
- v-model="formData.bankCardNo"
- label="对公账号"
- placeholder="请输入对公账号"
- required
- :rules="[{ required: true, message: '请输入对公账号' }]"
- />
- <van-field
- v-model="formData.bankChannelNo"
- label="联行号"
- placeholder="请输入联行号"
- required
- :rules="[{ required: true, message: '请输入联行号' }]"
- />
- <van-field label="结算方式" required>
- <template #input>
- <div class="settlement-container">
- <van-radio-group
- v-model="formData.settMode"
- direction="horizontal"
- >
- <van-radio name="1" checked-color="#4d6add" icon-size="18px"
- >自动结算</van-radio
- >
- <van-radio name="2" checked-color="#4d6add" icon-size="18px"
- >手动提现</van-radio
- >
- </van-radio-group>
- <!-- 新增提示语 -->
- <div class="settlement-tip">
- <van-icon name="info" color="#999" size="14px" />
- <span>自动结算和手工提现均为次日到账</span>
- </div>
- </div>
- </template>
- </van-field>
- </template>
- <div class="confirm-buttons">
- <van-button
- round
- block
- type="primary"
- class="confirm-btn"
- native-type="submit"
- >
- 确认信息
- </van-button>
- </div>
- </van-form>
- </div>
- </van-action-sheet>
- <!-- 组合选择器弹窗 -->
- <van-popup
- v-model:show="showDatePicker"
- round
- position="bottom"
- class="custom-date-picker"
- >
- <van-date-picker
- v-model="validDate"
- title="选择日期"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="idDateConfirm"
- />
- </van-popup>
- <!-- 公司注册日期选择器弹窗 -->
- <van-popup
- v-model:show="showCompanyDatePicker"
- round
- position="bottom"
- class="custom-date-picker"
- >
- <van-date-picker
- v-model="companyDate"
- title="选择日期"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="companyDateConfirm"
- @cancel="showCompanyDatePicker = false"
- />
- </van-popup>
- </div>
- </template>
- <script>
- import {
- showConfirmDialog,
- showToast,
- showFailToast,
- showSuccessToast,
- } from "vant";
- import { getLoginUser } from "../../common/js/utils";
- import sHeader from "../../components/SimpleHeader";
- import {
- idCardRecognition,
- createMch,
- getJoinPayMch,
- uploadPhotos,
- updateApproveStatus,
- updateMchApproveStatus,
- updateMchSignStatus,
- altMchSign,
- getPhotos,
- } from "../../service/purse/index.js";
- import { ref, computed, onMounted } from "vue";
- import dateUtil from "../../utils/dateUtil";
- import router from "../../router";
- export default {
- components: { sHeader },
- setup() {
- const user = getLoginUser();
- const currentStep = ref(0);
- const merchantType = ref(0);
- //
- const activeCollapse = ref(["1", "2"]);
- // 图片信息
- const idCardFront = ref([]);
- const idCardBack = ref([]);
- const businessLicense = ref([]);
- const bankCard = ref([]);
- const accountLicense = ref([]);
- // 企业法人确认
- const legalPersonName = ref('');
- // 确认信息弹窗
- const showConfirmSheet = ref(false);
- // 日期选择
- const showDatePicker = ref(false);
- const showCompanyDatePicker = ref(false);
- const minDate = ref(new Date(2000, 0, 1));
- const maxDate = ref(new Date(2099, 11, 31));
- const companyDate = ref(["2022", "06", "01"]);
- // 身份证有效期限
- const validDate = ref(["2022", "06", "01"]);
- // 信息认证状态(0: 未认证 1: 已认证 2: 认证失败)
- const infoStatus = ref(0);
- // 信息认证计算属性
- const infoStatusClass = computed(() => ({
- "audit-status-bar--warning": infoStatus.value === 0,
- "audit-status-bar--success": infoStatus.value === 1,
- "audit-status-bar--error": infoStatus.value === 2,
- }));
- const infoStatusIcon = computed(
- () =>
- ({
- 0: "clock",
- 1: "passed",
- 2: "warning",
- }[infoStatus.value])
- );
- const infoStatusMainText = computed(
- () =>
- ({
- 0: "信息认证中",
- 1: "认证成功",
- 2: "认证失败",
- }[infoStatus.value])
- );
- const infoStatusSubText = ref("");
- // 证照审核状态(0: 审核中 1: 通过 2: 未通过)
- const auditStatus = ref(0);
- // 计算属性
- const statusClass = computed(() => {
- return {
- "audit-status-bar--success": auditStatus.value === 1,
- "audit-status-bar--warning": auditStatus.value === 0,
- "audit-status-bar--error": auditStatus.value === 2,
- };
- });
- const statusIcon = computed(() => {
- return {
- 0: "clock",
- 1: "passed",
- 2: "warning",
- }[auditStatus.value];
- });
- const statusMainText = computed(() => {
- return {
- 0: "资料审核中",
- 1: "所有资料已通过审核",
- 2: "审核未通过",
- }[auditStatus.value];
- });
- const statusSubText = ref("");
- // 签约状态(0: 未签约 1: 已签约 2: 签约失败)
- const signStatus = ref(0);
- const signStatusIcon = computed(() => {
- return {
- 0: "clock",
- 1: "passed",
- 2: "warning",
- }[signStatus.value];
- });
- const signStatusClass = computed(() => {
- return {
- "audit-status-bar--success": signStatus.value === 1,
- "audit-status-bar--warning": signStatus.value === 0,
- "audit-status-bar--error": signStatus.value === 2,
- };
- });
- const signStatusMainText = computed(() => {
- return {
- 0: "未签约",
- 1: "签约成功",
- 2: "签约失败",
- }[signStatus.value];
- });
- const signStatusSubText = computed(() => {
- return {
- 0: "请完成签约流程",
- 1: "签约成功,可前往绑定机器",
- 2: "请重新上传符合要求的证件",
- }[signStatus.value];
- });
- // 证照上传状态
- const uploadStatus = ref(0);
- // 汇聚ID
- const joinPayMchID = ref(null);
- // 汇聚商户编号
- const joinPayMchNo = ref(null);
- // 信息
- const formData = ref({
- // 收款人/法人信息
- merchantType: 10, // 商户类型,“0”为个人,“1”为企业
- name: "", // 身份证名称
- idNumber: "", // 身份证
- validDate: "", // 身份证有效期限
- phone: "", // 手机号
- // 联系人信息
- contactName: "", // 联系人姓名
- contactPhone: "", // 联系人手机号
- // 营业执照信息
- licenseNo: "", // 营业执照编号
- companyName: "", // 企业名称
- companyDate: "", // 企业注册日期
- // 银行卡信息
- bankName: "", // 银行名称
- bankCardNo: "", // 银行卡号
- bankCardType: "0", // 银行卡类型,“0”为对公卡,“1”为对私卡
- settMode: "1", // 结算方式,“1”为自动结算,“2”为手动提现
- // 开户许可证信息
- bankChannelNo: "", // 联行号
- });
- // 提交参数
- const submitParam = ref({
- adminId: user.id, // 用户ID
- altMchName: "", // 收账方名称
- altMchNo: "", // 收账方账号
- altMerchantType: 10, // 收账方商户类型,10:个人,11:个体工商户,12:企业
- // 收款人/法人信息
- legalPerson: "", // 法人名称
- idCardNo: "", // 身份证
- idCardExpiry: "", // 身份证有效期
- phoneNo: "", // 法人手机号
- // 联系人信息
- busiContactName: "", // 业务联系人姓名
- busiContactMobileNo: "", // 业务联系人手机
- // 银行卡信息
- bankAccountType: 1, // 银行卡类型, 4:对公,1:对私
- bankAccountName: "", // 银行账户名称
- bankAccountNo: "", // 银行账号
- bankChannelNo: "", // 联行号
- settMode: 1, // 结算方式,“1”为自动结算,“2”为手动提现
- settDateType: 1, // 结算周期类型 * 1 工作日,2 自然日,3 月结日; integer(int32) 默认填1
- riskDay: 1, // 结算周期; integer(int32) 默认填1
- // 营业执照信息
- licenseNo: "", // 营业执照编号
- licenseExpiry: "", // 营业执照有效期
- bindingSteps: 0, // 绑定步骤
- });
- // 上传证照
- const afterRead = async (file, type) => {
- try {
- const fileData = new FormData();
- fileData.append("file", file.file);
- fileData.append("adminId", user.id);
- fileData.append("imageType", type.name);
- const { data } = await idCardRecognition(fileData);
- if (data.code === "00000") {
- console.log(data.data);
- switch (type.name) {
- // 身份证人像面
- case "idCardFront":
- console.log(idCardFront.value);
- formData.value.name = data.data.name;
- formData.value.idNumber = data.data.idCard;
- break;
- // 身份证国徽面
- case "idCardBack":
- if (data.data.idCardEndDate) {
- validDate.value = data.data.idCardEndDate.split(".");
- formData.value.validDate = validDate.value.join("-");
- } else {
- // 长期身份证
- validDate.value = data.data.idCardStartDate.split(".");
- formData.value.validDate = validDate.value.join("-");
- }
- break;
- // 营业执照
- case "businessLicense":
- formData.value.licenseNo = data.data.businessLicenseNo;
- formData.value.companyName = data.data.businessLicenseName;
- formData.value.companyDate = dateUtil.formatDate(
- data.data.businessLicenseValidDate
- );
- companyDate.value = formData.value.companyDate.split("-");
- legalPersonName.value = data.data.legalPerson;
- break;
- // 银行卡正面
- case "bankCard":
- formData.value.bankCardNo = data.data.bankCardNo;
- break;
- // 开户许可证
- case "accountLicense":
- formData.value.bankCardNo = data.data.accountNo;
- break;
- }
- }
- } catch (error) {
- console.log(error);
- }
- };
- // 确认日期选择
- const idDateConfirm = () => {
- formData.value.validDate = validDate.value.join("-");
- showDatePicker.value = false;
- };
- const companyDateConfirm = () => {
- formData.value.companyDate = companyDate.value.join("-");
- showCompanyDatePicker.value = false;
- };
- // 确认信息
- const confirmInfo = (value) => {
- console.log(formData.value);
- showConfirmDialog({
- message: "确认信息无误?",
- })
- .then(async () => {
- if (value === 0) {
- // 证件信息
- if (merchantType.value === 0) {
- // 个人
- submitParam.value.altMchName = formData.value.name;
- submitParam.value.altMerchantType = 10;
- submitParam.value.legalPerson = formData.value.name;
- submitParam.value.idCardNo = formData.value.idNumber.replace(
- /\s/g,
- ""
- );
- submitParam.value.idCardExpiry = formData.value.validDate;
- submitParam.value.phoneNo = formData.value.phone.replace(
- /\s/g,
- ""
- );
- submitParam.value.busiContactName = formData.value.contactName;
- submitParam.value.busiContactMobileNo =
- formData.value.contactPhone.replace(/\s/g, "");
- } else {
- // 企业
- submitParam.value.altMerchantType = 12;
- if (legalPersonName.value != formData.value.name) {
- showToast("法人姓名与营业执照主体不一致!");
- return;
- }
- submitParam.value.legalPerson = formData.value.name;
- submitParam.value.idCardNo = formData.value.idNumber.replace(
- /\s/g,
- ""
- );
- submitParam.value.idCardExpiry = formData.value.validDate;
- submitParam.value.phoneNo = formData.value.phone.replace(
- /\s/g,
- ""
- );
- submitParam.value.busiContactName = formData.value.contactName;
- submitParam.value.busiContactMobileNo =
- formData.value.contactPhone.replace(/\s/g, "");
- submitParam.value.altMchName = formData.value.companyName;
- submitParam.value.licenseNo = formData.value.licenseNo;
- submitParam.value.licenseExpiry = formData.value.companyDate;
- }
- submitParam.value.bindingSteps = 0;
- }
- if (value === 1) {
- // 结算信息
- if (merchantType.value === 0) {
- // 个人
- submitParam.value.bankAccountType = 1;
- submitParam.value.bankAccountName = formData.value.name;
- submitParam.value.bankAccountNo = formData.value.bankCardNo;
- } else {
- // 企业
- submitParam.value.bankAccountType = 4;
- submitParam.value.bankAccountName = formData.value.companyName;
- submitParam.value.bankAccountNo = formData.value.bankCardNo;
- submitParam.value.bankChannelNo = formData.value.bankChannelNo;
- }
- submitParam.value.settMode = formData.value.settMode == "1" ? 1 : 2;
- submitParam.value.bindingSteps = 1;
- }
- try {
- const { data } = await createMch(submitParam.value);
- if (data.code === "00000") {
- currentStep.value++;
- } else {
- showToast(data.message);
- }
- } catch (error) {
- console.log(error);
- }
- console.log("提交参数", submitParam.value);
- showConfirmSheet.value = false;
- })
- .catch(() => {
- return;
- });
- };
- // 回显数据
- const getMchInfo = async () => {
- try {
- const { data } = await getJoinPayMch({ adminId: user.id });
- if (data.code === "00000") {
- joinPayMchID.value = data.data.id;
- if (data.data.altMchNo != null && data.data.altMchNo != "") {
- joinPayMchNo.value = data.data.altMchNo;
- }
- formData.value.merchantType = data.data.altMerchantType;
- if (formData.value.merchantType === 12) {
- merchantType.value = 1;
- }
- formData.value.name = data.data.legalPerson;
- formData.value.idNumber = data.data.idCardNo;
- formData.value.validDate = data.data.idCardExpiry;
- formData.value.phone = data.data.phoneNo;
- formData.value.contactName = data.data.busiContactName;
- formData.value.contactPhone = data.data.busiContactMobileNo;
- formData.value.licenseNo = data.data.licenseNo;
- formData.value.companyName = data.data.bankAccountName;
- formData.value.companyDate = data.data.licenseExpiry;
- formData.value.bankName = data.data.bankAccountName;
- formData.value.bankCardNo = data.data.bankAccountNo;
- formData.value.bankChannelNo = data.data.bankChannelNo;
- formData.value.settMode = data.data.settMode == 1 ? "1" : "2";
- // 步骤
- currentStep.value = data.data.bindingSteps;
- // 认证状态
- switch (data.data.status) {
- case "0":
- // 认证中
- infoStatus.value = 0;
- infoStatusSubText.value = "预计3分钟内完成认证";
- break;
- case "1":
- // 认证成功
- infoStatus.value = 1;
- infoStatusSubText.value = "认证信息已验证通过";
- break;
- case "2":
- // 认证失败
- infoStatus.value = 2;
- infoStatusSubText.value = data.data.bizMsg;
- break;
- }
- // 图片上传状态
- switch (data.data.step) {
- case "0":
- // 未上传
- uploadStatus.value = 0;
- break;
- case "1":
- // 已上传
- uploadStatus.value = 1;
- break;
- }
- // 图片审核状态
- switch (data.data.approveStatus) {
- case "审核中":
- auditStatus.value = 0;
- statusSubText.value = "预计3分钟内完成审核";
- changeApproveStatus();
- break;
- case "审核通过":
- auditStatus.value = 1;
- statusSubText.value = "审核通过";
- break;
- case "审核不通过":
- auditStatus.value = 2;
- statusSubText.value = data.data.approveNote;
- changeApproveStatus();
- break;
- }
- // 签约状态
- switch (data.data.signStatus) {
- case "签约成功":
- // 未签约
- signStatus.value = 1;
- break;
- default:
- // 已签约
- break;
- }
- console.log("回显数据", formData.value);
- }
- } catch (error) {
- console.log(error);
- }
- };
- // 获取图片
- const getUserLicense = async () => {
- try {
- const { data } = await getPhotos({
- adminId: user.id,
- });
- if (data.code === "00000") {
- console.log("图片", data.data);
- if (data.data.idCardFront) {
- idCardFront.value = [
- {
- url: "data:image/jpeg;base64," + data.data.idCardFront,
- isImage: true,
- },
- ];
- }
- if (data.data.idCardBack) {
- idCardBack.value = [
- {
- url: "data:image/jpeg;base64," + data.data.idCardBack,
- isImage: true,
- },
- ];
- }
- if (data.data.bankCard) {
- bankCard.value = [
- {
- url: "data:image/jpeg;base64," + data.data.bankCard,
- isImage: true,
- },
- ];
- }
- if (data.data.businessLicense) {
- businessLicense.value = [
- {
- url: "data:image/jpeg;base64," + data.data.businessLicense,
- isImage: true,
- },
- ];
- }
- if (data.data.accountLicense) {
- accountLicense.value = [
- {
- url: "data:image/jpeg;base64," + data.data.accountLicense,
- isImage: true,
- },
- ];
- }
- }
- } catch (error) {
- console.log(error);
- }
- };
- onMounted(async () => {
- await getMchInfo();
- await getUserLicense();
- if (currentStep.value === 3) {
- changeApproveStatus();
- changeMchApproveStatus();
- changeSignStatus();
- }
- });
- const handleNextStep = () => {
- if (currentStep.value === 0) {
- // 先检查是否上传证件照
- if (merchantType.value === 0) {
- if (idCardFront.value.length === 0 || idCardBack.value.length === 0) {
- showToast("请先上传相关证照");
- return;
- }
- } else {
- if (businessLicense.value.length === 0) {
- showToast("请先上传相关证照");
- return;
- }
- }
- showConfirmSheet.value = true;
- }
- if (currentStep.value === 1) {
- // 先检查是否银行卡或者开户开户许可证
- if (merchantType.value === 0) {
- if (bankCard.value.length === 0) {
- showToast("请先上传银行卡");
- return;
- }
- } else {
- if (accountLicense.value.length === 0) {
- showToast("请先上传开户许可证");
- return;
- }
- }
- showConfirmSheet.value = true;
- }
- if (currentStep.value === 2) {
- showConfirmDialog({
- message: "请再次确认信息无误?",
- })
- .then(async () => {
- // 初次提交
- submitParam.value.bindingSteps = 2;
- try {
- const { data } = await createMch(submitParam.value);
- if (data.code === "00000") {
- // 提交成功,看图片是否上传
- const params = {
- id: joinPayMchID.value,
- adminId: user.id,
- altMerchantType: formData.value.merchantType,
- status: "0",
- };
- if (uploadStatus.value === 1 && auditStatus.value === 1) {
- // 上传了,调用修改接口
- params.status = "1";
- }
- try {
- const { data } = await uploadPhotos(params);
- if (data.code === "00000") {
- // 上传成功
- uploadStatus.value = 1;
- auditStatus.value = 0;
- statusSubText.value = "预计3分钟内完成审核";
- } else {
- showToast(data.message);
- }
- } catch (error) {
- console.log(error);
- }
- infoStatus.value = 0;
- infoStatusSubText.value = "预计3分钟内完成认证";
- currentStep.value++;
- } else {
- showToast(data.message);
- }
- } catch (error) {
- console.log(error);
- }
- })
- .catch(() => {
- return;
- });
- }
- if (currentStep.value === 3) {
- if (infoStatus.value != 1) {
- showToast("请确认认证通过");
- return;
- }
- if (auditStatus.value != 1) {
- showToast("请确认证件审核通过");
- return;
- }
- showConfirmDialog({
- message: "确认签约?",
- })
- .then(async () => {
- // 签约
- try {
- const { data } = await altMchSign({ id: joinPayMchID.value });
- if (data.code === "00000") {
- showSuccessToast("签约成功");
- setTimeout(() => {
- router.go(0);
- }, 1000);
- } else {
- showFailToast(data.message);
- }
- } catch (error) {
- console.error("请求发生错误:", error);
- }
- })
- .catch(() => {
- return;
- });
- }
- };
- // 更新图片审核情况
- const changeApproveStatus = async () => {
- const { data } = await updateApproveStatus({ id: joinPayMchID.value });
- if (data.code === "00000") {
- if (data.data === "P1000") {
- auditStatus.value = 1;
- statusSubText.value = "审核通过";
- }
- }
- };
- // 更新商户认证状态
- const changeMchApproveStatus = async () => {
- const { data } = await updateMchApproveStatus({ id: joinPayMchID.value });
- if (data.code === "00000") {
- if (data.data === "P1000") {
- auditStatus.value = 1;
- statusSubText.value = "审核通过";
- }
- }
- };
- // 更新签约状态
- const changeSignStatus = async () => {
- const { data } = await updateMchSignStatus({ id: joinPayMchID.value });
- if (data.code === "00000") {
- if (data.data === "P1000") {
- auditStatus.value = 1;
- statusSubText.value = "审核通过";
- }
- }
- };
- // 跳转修改认证信息
- const handleInfoReupload = () => {
- currentStep.value = 0;
- };
- // 修改银行卡
- const updateBankCard = () => {
- currentStep.value = 1;
- };
- const handlePrevStep = () => {
- if (currentStep.value > 0) currentStep.value--;
- };
- // 格式化身份证号码
- const formatIdCard = (value) => {
- // 步骤1:过滤非法字符(保留数字和X)
- let val = value.replace(/[^\dXx]/g, "");
- // 步骤2:自动大写转换
- val = val.toUpperCase();
- // 步骤3:智能分段(前6位+8位+4位)
- const parts = [];
- if (val.length > 6) {
- parts.push(val.substr(0, 6));
- val = val.substr(6);
- }
- if (val.length > 8) {
- parts.push(val.substr(0, 8));
- val = val.substr(8);
- }
- parts.push(val);
- // 步骤4:组合分段并限制最大长度
- return parts.join(" ").substr(0, 21);
- };
- // 格式化手机
- const formatPhone = (value) => {
- // 1. 去除非数字字符并截取前11位
- const phone = value.replace(/\D/g, "").slice(0, 11);
- // 2. 按 3-4-4 格式添加空格
- return phone.replace(/(\d{3})(\d{0,4})(\d{0,4})/, (_, $1, $2, $3) => {
- let formatted = $1;
- if ($2) formatted += ` ${$2}`;
- if ($3) formatted += ` ${$3}`;
- return formatted;
- });
- };
- return {
- // 响应式数据
- currentStep,
- merchantType,
- idCardFront,
- idCardBack,
- businessLicense,
- bankCard,
- accountLicense,
- formData,
- minDate,
- maxDate,
- companyDate,
- validDate,
- activeCollapse,
- auditStatus,
- statusClass,
- statusIcon,
- statusMainText,
- statusSubText,
- infoStatusClass,
- infoStatusIcon,
- infoStatusMainText,
- infoStatusSubText,
- infoStatus,
- signStatus,
- signStatusClass,
- signStatusIcon,
- signStatusMainText,
- signStatusSubText,
- joinPayMchNo,
- // 方法
- handleNextStep,
- handlePrevStep,
- afterRead,
- formatIdCard,
- formatPhone,
- idDateConfirm,
- confirmInfo,
- companyDateConfirm,
- handleInfoReupload,
- updateBankCard,
- // 弹窗
- showConfirmSheet,
- showDatePicker,
- showCompanyDatePicker,
- };
- },
- };
- </script>
- <style lang="less" scoped>
- .bind-page {
- background: #f8f9ff;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- }
- .main-content {
- flex: 1;
- overflow-y: auto;
- }
- .main-content::-webkit-scrollbar {
- width: 6px;
- background: #f1f1f1;
- }
- .main-content::-webkit-scrollbar-thumb {
- background: #c1c1c1;
- border-radius: 3px;
- }
- .step-container {
- background: white;
- padding: 15px;
- margin: 10px;
- border-radius: 12px;
- box-shadow: 0 2px 8px rgba(77, 106, 221, 0.05);
- :deep(.van-step__title) {
- font-size: 0.35rem;
- }
- }
- .card-section {
- margin: 10px;
- }
- .upload-card {
- background: white;
- border-radius: 0 0 12px 12px;
- padding: 20px;
- box-shadow: 0 4px 12px rgba(77, 106, 221, 0.08);
- .upload-title {
- // color: #4d6add;
- font-size: 16px;
- // margin-bottom: 15px;
- position: relative;
- padding-left: 12px;
- /* 留出装饰条位置 */
- .title-decoration {
- position: absolute;
- left: 0;
- top: 55%;
- transform: translateY(-50%);
- width: 3px;
- height: 16px;
- background: #4d6add;
- border-radius: 2px;
- }
- }
- }
- .upload-group {
- display: grid;
- grid-template-columns: 1.2fr 1fr;
- gap: 10px;
- margin-bottom: 15px;
- }
- .upload-item {
- border: 2px dashed #e0e3ff;
- border-radius: 10px;
- padding: 20px;
- text-align: center;
- transition: all 0.3s;
- width: 3rem;
- p {
- color: #666;
- margin-top: 8px;
- font-size: 12px;
- }
- &.single {
- grid-column: span 2;
- }
- &:active {
- border-color: #4d6add;
- background: rgba(77, 106, 221, 0.05);
- }
- }
- .custom-uploader :deep(.van-uploader__preview-image) {
- width: 4rem !important;
- height: 2.8rem !important;
- border-radius: 6px;
- }
- .custom-uploader :deep(.van-uploader__preview) {
- width: 4rem !important;
- height: 100% !important;
- margin: 0 !important;
- }
- /* 信息审核样式 */
- .review-section {
- padding: 12px;
- .van-collapse-item__content {
- padding: 0;
- }
- .van-cell {
- background: #f8f9ff;
- margin: 4px 0;
- border-radius: 6px;
- }
- }
- .sign-section {
- margin: 10px;
- .audit-status-bar {
- background: #f8f9ff;
- border-radius: 8px;
- padding: 16px;
- margin: 20px 10px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: 1px solid transparent;
- .status-content {
- display: flex;
- align-items: center;
- gap: 12px;
- .status-icon {
- font-size: 22px;
- }
- .status-text {
- line-height: 1.4;
- .main-text {
- color: #333;
- font-weight: 500;
- font-size: 14px;
- }
- .sub-text {
- color: #666;
- font-size: 12px;
- }
- }
- }
- // 不同状态样式
- &--success {
- border-color: #38b48d;
- background: #e8faf0;
- .status-icon {
- color: #38b48d;
- }
- }
- &--warning {
- border-color: #ff9500;
- background: #fff4e8;
- .status-icon {
- color: #ff9500;
- }
- }
- &--error {
- border-color: #ff4d4f;
- background: #ffecec;
- .status-icon {
- color: #ff4d4f;
- }
- }
- }
- .sign-notice {
- margin-top: 20px;
- padding: 12px;
- background: #fffbe8;
- border-radius: 6px;
- color: #ff9500;
- font-size: 13px;
- display: flex;
- align-items: center;
- gap: 8px;
- .van-icon {
- flex-shrink: 0;
- }
- }
- }
- .preview-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 10px;
- padding: 8px;
- .preview-item {
- position: relative;
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
- .van-image {
- width: 100%;
- height: 120px;
- }
- .file-name {
- position: absolute;
- bottom: 0;
- width: 100%;
- padding: 4px;
- background: rgba(0, 0, 0, 0.6);
- color: white;
- font-size: 12px;
- text-align: center;
- }
- }
- }
- /* 固定底部容器 */
- .action-section {
- position: sticky;
- bottom: 0;
- left: 0;
- right: 0;
- background: #ffffff;
- padding: 12px 16px;
- box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
- z-index: 100;
- }
- /* 提示语样式 */
- .action-notice {
- display: flex;
- align-items: center;
- margin-bottom: 12px;
- padding: 8px 12px;
- background: #fffbe8;
- border-radius: 6px;
- color: #ed6a0c;
- font-size: 13px;
- line-height: 1.5;
- animation: slideUp 0.3s ease;
- }
- .notice-icon {
- margin-right: 6px;
- font-size: 16px;
- flex-shrink: 0;
- }
- /* 按钮容器 */
- .action-buttons {
- display: flex;
- gap: 10px;
- .prev-btn {
- flex: 2;
- border-color: #4d6add;
- color: #4d6add;
- margin: 0 10px;
- }
- .next-btn {
- flex: 2;
- background: #4d6add;
- margin: 0 10px;
- }
- :deep(.van-button__text) {
- font-size: 16px;
- }
- }
- /* 主要内容区域需要添加底部padding防遮挡 */
- // .main-content {
- // // padding-bottom: 10px;
- // /* 根据实际高度调整 */
- // }
- /* 动画效果 */
- @keyframes slideUp {
- from {
- transform: translateY(20px);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
- /* 自定义 ActionSheet 样式 */
- :deep(.van-action-sheet) {
- border-radius: 16px 16px 0 0;
- overflow: visible;
- .van-action-sheet__header {
- font-size: 18px;
- color: #4d6add;
- font-weight: 500;
- padding: 18px 16px;
- background: linear-gradient(to bottom, #f8f9ff, white 60%);
- }
- }
- .sheet-content {
- padding: 0 16px 20px;
- max-height: 70vh;
- // overflow-y: auto;
- .van-cell {
- background: #f8f9ff;
- margin: 8px 0;
- border-radius: 8px;
- &::after {
- display: none;
- }
- &__title {
- flex: none;
- width: 80px;
- }
- }
- /* 自定义标题样式 */
- .custom-title {
- display: flex;
- align-items: center;
- padding: 5px 0;
- }
- .blue-line {
- display: inline-block;
- width: 4px;
- height: 16px;
- background: #4d6add;
- margin-right: 8px;
- border-radius: 2px;
- }
- .van-field {
- margin: 12px 0;
- background: #f8f9ff;
- border-radius: 8px;
- padding: 8px 16px;
- :deep(.van-field__label) {
- width: 80px;
- color: #666;
- }
- :deep(.van-field__control) {
- color: #333;
- font-weight: 500;
- }
- }
- /* 结算方式容器 */
- .settlement-container {
- display: flex;
- flex-direction: column;
- gap: 8px;
- width: 100%;
- }
- /* 提示语样式 */
- .settlement-tip {
- display: flex;
- align-items: center;
- color: #999;
- font-size: 12px;
- /* 对齐单选按钮 */
- line-height: 1.4;
- .van-icon {
- margin-right: 4px;
- }
- }
- }
- .confirm-buttons {
- padding: 15px 0;
- .confirm-btn {
- background: #4d6add;
- border: none;
- font-size: 16px;
- &:active {
- opacity: 0.9;
- }
- }
- }
- .custom-date-picker {
- width: 100%;
- }
- /* 调整列宽 */
- .year-column {
- width: 35% !important;
- }
- .month-column {
- width: 30% !important;
- }
- .day-column {
- width: 35% !important;
- }
- /* 长期选项样式 */
- .van-picker-column__item--longterm {
- color: #1989fa;
- font-weight: bold;
- }
- /* 适配移动端 */
- @media (max-width: 480px) {
- .upload-item {
- padding: 15px;
- }
- .upload-group {
- gap: 8px;
- }
- .sheet-content {
- padding: 0 12px 20px;
- .van-cell,
- .van-field {
- margin: 6px 0;
- }
- }
- .settlement-tip {
- font-size: 11px;
- }
- :deep(.van-action-sheet__header) {
- padding: 14px 12px;
- font-size: 16px;
- }
- }
- </style>
|