index.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. <template>
  2. <!-- 备用提现账号 -->
  3. <div class="huifuPage flex-col">
  4. <s-header :name="$t('huifuMch.standbyWithdrawalAccountNo')" :noback="false"></s-header>
  5. <!-- 申请表单 -->
  6. <div class="huifuform flex-col" v-if="showStatus == null">
  7. <van-form @submit="onSubmit">
  8. <div class="huifuBox">
  9. <div class="van-cell van-field">
  10. <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.merchantType') }}</span></div>
  11. <div class="van-cell__value van-field__value radioBox">
  12. <van-radio-group v-model="type" direction="horizontal">
  13. <van-radio name="0" icon-size="18px">{{ $t('huifuMch.personal') }}</van-radio>
  14. <van-radio name="1" icon-size="18px">{{ $t('huifuMch.enterprise') }}</van-radio>
  15. </van-radio-group>
  16. </div>
  17. </div>
  18. <van-field v-model="regName" name="regName" :label="$t('huifuMch.huifuRegName')"
  19. :placeholder="$t('huifuMch.huifuRegNamePlaceholder')"
  20. :rules="[{ required: true, message: $t('huifuMch.huifuRegNamePlaceholder') }]" />
  21. <van-field v-model="shortName" name="shortName" :label="$t('huifuMch.shortNameLabel')"
  22. :placeholder="$t('huifuMch.shortNamePlaceholder')" />
  23. <div v-if="type == 1">
  24. <van-field v-model="registeredAddress" is-link readonly name="registeredAddress"
  25. :label="$t('huifuMch.huifuRegisteredAddress')"
  26. :placeholder="$t('huifuMch.huifuRegisteredAddressPlaceholder')"
  27. :rules="[{ required: true, message: $t('huifuMch.huifuRegisteredAddressPlaceholder') }]"
  28. @click="showReAddress = true" />
  29. <van-field v-model="regDetail" name="regDetail" :label="$t('huifuMch.huifuRegDetail')"
  30. :placeholder="$t('huifuMch.huifuRegDetailPlaceholder')"
  31. :rules="[{ required: true, message: $t('huifuMch.huifuRegDetailPlaceholder') }]" />
  32. </div>
  33. </div>
  34. <div class="huifuBox" v-if="type == 1">
  35. <van-field v-model="companyFoundDate" readonly name="companyFoundDate" :label="$t('huifuMch.companyFoundDate')"
  36. :placeholder="$t('huifuMch.companyFoundDatePlaceholder')" @click="showFoundDate = true"
  37. :rules="[{ required: true, message: $t('huifuMch.companyFoundDatePlaceholder') }]" />
  38. <van-field v-model="licenseCode" name="licenseCode" :label="$t('huifuMch.licenseCode')"
  39. :placeholder="$t('huifuMch.licenseCodePlaceholder')"
  40. :rules="[{ required: true, message: $t('huifuMch.licenseCodePlaceholder') }]" />
  41. <div class="van-cell van-field">
  42. <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.validityType') }}</span></div>
  43. <div class="van-cell__value van-field__value radioBox">
  44. <van-radio-group v-model="licenseValidityType" direction="horizontal">
  45. <van-radio name="1" icon-size="18px">{{ $t('huifuMch.permanent') }}</van-radio>
  46. <van-radio name="0" icon-size="18px">{{ $t('huifuMch.noPermanent') }}</van-radio>
  47. </van-radio-group>
  48. </div>
  49. </div>
  50. <van-field v-model="beginDateLicense" readonly name="beginDateLicense" :label="$t('huifuMch.beginDate')"
  51. :placeholder="$t('huifuMch.beginDatePlaceholder')" @click="showBeginDateLicense = true"
  52. :rules="[{ required: true, message: $t('huifuMch.beginDatePlaceholder') }]" />
  53. <van-field v-if="licenseValidityType == 0" v-model="endDateLicense" readonly name="endDateLicense"
  54. :label="$t('huifuMch.endDate')" :placeholder="$t('huifuMch.endDatePlaceholder')" @click="showEndDateLicense = true"
  55. :rules="[{ required: true, message: $t('huifuMch.endDatePlaceholder') }]" />
  56. </div>
  57. <div class="huifuBox">
  58. <van-field v-model="name" name="name" :label="$t('huifuMch.huifuContactName')"
  59. :placeholder="$t('huifuMch.huifuContactNamePlaceholder')"
  60. :rules="[{ required: true, message: $t('huifuMch.huifuContactNamePlaceholder') }]" />
  61. <van-field v-model="phone" name="phone" :label="$t('huifuMch.huifuContactMobile')"
  62. :placeholder="$t('huifuMch.huifuContactMobilePlaceholder')"
  63. :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: $t('huifuMch.huifuContactMobileMessage') }]" />
  64. <van-field v-model="email" name="email" :label="$t('huifuMch.huifuContactEmail')"
  65. :placeholder="$t('huifuMch.huifuContactEmailPlaceholder')"
  66. :rules="[{ required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: $t('huifuMch.huifuContactEmailMessage') }]" />
  67. <van-field v-model="businessAddress" is-link readonly name="businessAddress"
  68. :label="$t('huifuMch.huifuBusinessAddress')" :placeholder="$t('huifuMch.huifuBusinessAddressPlaceholder')"
  69. :rules="[{ required: true, message: $t('huifuMch.huifuBusinessAddressPlaceholder') }]"
  70. @click="showArea = true" />
  71. <van-field v-model="detailAddr" name="detailAddr" :label="$t('huifuMch.huifuOperatingAddress')"
  72. :placeholder="$t('huifuMch.huifuOperatingAddressPlaceholder')"
  73. :rules="[{ required: true, message: $t('huifuMch.huifuOperatingAddressPlaceholder') }]" />
  74. <van-field v-if="type == 1" v-model="servicePhone" name="servicePhone" :label="$t('huifuMch.huifuServicePhone')"
  75. :placeholder="$t('huifuMch.huifuServicePhonePlaceholder')"
  76. :rules="[{ required: true, message: $t('huifuMch.huifuServicePhonePlaceholder') }]" />
  77. </div>
  78. <div class="huifuBox">
  79. <div class="van-cell van-field" v-if="type == 1">
  80. <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.cardType') }}</span></div>
  81. <div class="van-cell__value van-field__value radioBox">
  82. <van-radio-group v-model="cardType" direction="horizontal">
  83. <van-radio name="1" icon-size="18px">{{ $t('huifuMch.personalAccount') }}</van-radio>
  84. <van-radio name="0" icon-size="18px">{{ $t('huifuMch.corporateAccount') }}</van-radio>
  85. </van-radio-group>
  86. </div>
  87. </div>
  88. <van-field v-model="cardName" name="cardName" :label="$t('huifuMch.huifuCardName')"
  89. :placeholder="$t('huifuMch.huifuCardNamePlaceholder')"
  90. :rules="[{ required: true, message: $t('huifuMch.huifuCardNamePlaceholder') }]" />
  91. <van-field v-model="cardNo" name="cardNo" :label="$t('huifuMch.huifuCardNo')"
  92. :placeholder="$t('huifuMch.huifuCardNoPlaceholder')"
  93. :rules="[{ required: true, message: $t('huifuMch.huifuCardNoPlaceholder') }]" />
  94. <van-field v-if="cardType == '1'" v-model="mp" name="mp" :label="$t('huifuMch.huifuMp')"
  95. :placeholder="$t('huifuMch.huifuMpPlaceholder')"
  96. :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: $t('huifuMch.huifuContactMobileMessage') }]" />
  97. <van-field v-if="cardType == 0" v-model="branchCode" name="branchCode" :label="$t('huifuMch.branchCode')"
  98. :placeholder="$t('huifuMch.branchCodePlaceholder')"
  99. :rules="[{ required: true, message: $t('huifuMch.branchCodePlaceholder') }]" />
  100. <van-field v-if="cardType == 0" v-model="openLicenceNo" name="openLicenceNo"
  101. :label="$t('huifuMch.openLicenceNo')" :placeholder="$t('huifuMch.openLicenceNoPlaceholder')"
  102. :rules="[{ required: true, message: $t('huifuMch.openLicenceNoPlaceholder') }]" />
  103. <van-field v-if="cardType == '1'" v-model="bankAddress" is-link readonly name="bankAddress" :label="$t('huifuMch.huifuBankAddress')"
  104. :placeholder="$t('huifuMch.huifuBankAddressPlaceholder')"
  105. :rules="[{ required: true, message: $t('huifuMch.huifuBankAddressPlaceholder') }]"
  106. @click="showBankAddress = true" />
  107. <van-field v-model="certNo" name="certNo" :label="$t('huifuMch.huifuCertNo')"
  108. :placeholder="$t('huifuMch.huifuCertNoPlaceholder')"
  109. :rules="[{ required: true, pattern: /^\d{17}[\dXx]$/, message: $t('huifuMch.huifuCertNoMessage') }]" />
  110. <van-field v-if="cardType == '0'" v-model="certAddress" name="certAddress" :label="$t('huifuMch.certAddress')"
  111. :placeholder="$t('huifuMch.certAddressPlaceholder')"
  112. :rules="[{ required: true, message: $t('huifuMch.certAddressPlaceholder') }]" />
  113. <div class="van-cell van-field">
  114. <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.certType') }}</span></div>
  115. <div class="van-cell__value van-field__value radioBox">
  116. <van-radio-group v-model="certValidityType" direction="horizontal">
  117. <van-radio name="1" icon-size="18px">{{ $t('huifuMch.permanent') }}</van-radio>
  118. <van-radio name="0" icon-size="18px">{{ $t('huifuMch.noPermanent') }}</van-radio>
  119. </van-radio-group>
  120. </div>
  121. </div>
  122. <van-field v-model="beginDate" readonly name="beginDate" :label="$t('huifuMch.beginDate')"
  123. :placeholder="$t('huifuMch.beginDatePlaceholder')" @click="showBeginDate = true"
  124. :rules="[{ required: true, message: $t('huifuMch.beginDatePlaceholder') }]" />
  125. <van-field v-if="certValidityType == 0" v-model="endDate" readonly name="endDate"
  126. :label="$t('huifuMch.endDate')" :placeholder="$t('huifuMch.endDatePlaceholder')" @click="showEndDate = true"
  127. :rules="[{ required: true, message: $t('huifuMch.endDatePlaceholder') }]" />
  128. </div>
  129. <!-- 地址弹窗 -->
  130. <van-popup v-model:show="showArea" position="bottom">
  131. <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
  132. </van-popup>
  133. <van-popup v-model:show="showBankAddress" position="bottom">
  134. <van-area :area-list="areaList" :columns-num="2" @confirm="onConfirmBankAddress"
  135. @cancel="showBankAddress = false" />
  136. </van-popup>
  137. <van-popup v-model:show="showReAddress" position="bottom">
  138. <van-area :area-list="areaList" @confirm="onConfirmReAddress" @cancel="showReAddress = false" />
  139. </van-popup>
  140. <!-- 时间弹窗 -->
  141. <van-popup v-model:show="showEndDateLicense" position="bottom">
  142. <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEndDateLicense"
  143. @cancel="showEndDateLicense = false" />
  144. </van-popup>
  145. <van-popup v-model:show="showBeginDateLicense" position="bottom">
  146. <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmBeginDateLicense"
  147. @cancel="showBeginDateLicense = false" />
  148. </van-popup>
  149. <van-popup v-model:show="showFoundDate" position="bottom">
  150. <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmFoundDate"
  151. @cancel="showFoundDate = false" />
  152. </van-popup>
  153. <van-popup v-model:show="showBeginDate" position="bottom">
  154. <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmBeginDate"
  155. @cancel="showBeginDate = false" />
  156. </van-popup>
  157. <van-popup v-model:show="showEndDate" position="bottom">
  158. <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEndDate"
  159. @cancel="showEndDate = false" />
  160. </van-popup>
  161. <van-row justify="space-around" style="padding: 3em; background-color: #f6f7f9;">
  162. <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="submit">{{
  163. $t('huifuMch.submit') }}
  164. </van-button>
  165. </van-row>
  166. </van-form>
  167. </div>
  168. <!-- 上传图片 -->
  169. <div class="upLoad flex-col" v-if="showStatus == '0'">
  170. <van-cell title="身份证" size="large" icon="contact" />
  171. <div class="uploader-container">
  172. <van-uploader v-model="certBackPic" accept=".jpg,.jpeg,.png" :preview-size="[320, 180]"
  173. style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
  174. :after-read="upCertBackPic" upload-text="点击上传身份证正面照片" capture="camera" image-fit="contain" :max-count="1" />
  175. <van-uploader v-model="certFrontPic" accept=".jpg,.jpeg,.png" :preview-size="[320, 180]"
  176. style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
  177. :after-read="upCertFrontPic" upload-text="点击上传身份证背面照片" capture="camera" image-fit="contain" :max-count="1" />
  178. </div>
  179. <div v-if="type == '1'">
  180. <van-cell title="营业执照" size="large" icon="contact" />
  181. <div class="uploader-container">
  182. <van-uploader v-model="licensePic" accept=".jpg,.jpeg,.png" :preview-size="[320, 180]"
  183. style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
  184. :after-read="upLicensePic" upload-text="点击上传营业执照" capture="camera" image-fit="contain" :max-count="1" />
  185. </div>
  186. </div>
  187. <div v-if="cardType == '1'">
  188. <van-cell title="结算卡" size="large" icon="debit-pay" />
  189. <div class="uploader-container">
  190. <van-uploader v-model="cardFrontPic" accept=".jpg,.jpeg,.png" :preview-size="[320, 180]"
  191. style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
  192. :after-read="upCardFrontPic" upload-text="点击上传结算卡正面照片" capture="camera" image-fit="contain" :max-count="1" />
  193. </div>
  194. </div>
  195. <div v-if="cardType == '0'">
  196. <van-cell title="开户许可证" size="large" icon="debit-pay" />
  197. <div class="uploader-container">
  198. <van-uploader v-model="regAcctPic" accept=".jpg,.jpeg,.png" :preview-size="[320, 180]"
  199. style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
  200. :after-read="upRegAcctPic" upload-text="点击上传开户许可证照片" capture="camera" image-fit="contain" :max-count="1" />
  201. </div>
  202. </div>
  203. <van-row justify="space-around" style="padding: 3em;">
  204. <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="sumbit" @click="submitCheck">{{
  205. $t('huifuMch.submit') }}
  206. </van-button>
  207. </van-row>
  208. </div>
  209. <!-- 审核状态 -->
  210. <div v-if="showStatus == '1' || showStatus == '2' || showStatus == '3' || showStatus == '4'">
  211. <van-cell value="" size="large">
  212. <!-- 使用 title 插槽来自定义标题 -->
  213. <template #title>
  214. <span class="custom-title">审核状态: </span>
  215. <span v-if="showStatus == '1' || showStatus == '4'" class="custom-title" style="color: #FFA500;">审核中</span>
  216. <span v-if="showStatus == '2'" class="custom-title" style="color: #00FF00;">审核通过</span>
  217. <span v-if="showStatus == '3'" class="custom-title" style="color: #FF0000;">审核失败</span>
  218. <!-- <div :style=statusColor value="审核中"></div> -->
  219. </template>
  220. </van-cell>
  221. <div class="parent-container" v-if="huifuMchCheck.type == '0'">
  222. <span>{{ $t('huifuMch.merchantType') }}:个人</span>
  223. <span>{{ $t('huifuMch.huifuRegName') }}:{{ huifuMchCheck.regName }}</span>
  224. <span>{{ $t('huifuMch.shortNameLabel') }}:{{ huifuMchCheck.shortName }}</span>
  225. <span>{{ $t('huifuMch.huifuContactName') }}:{{ huifuMchCheck.name }}</span>
  226. <span>{{ $t('huifuMch.huifuContactMobile') }}:{{ huifuMchCheck.phone }}</span>
  227. <span>{{ $t('huifuMch.huifuContactEmail') }}:{{ huifuMchCheck.email }}</span>
  228. <span>{{ $t('huifuMch.huifuBusinessAddress') }}:{{ huifuMchCheck.detailAddr }}</span>
  229. <span>{{ $t('huifuMch.huifuCardName') }}:{{ huifuMchCheck.cardName }}</span>
  230. <span>{{ $t('huifuMch.huifuCardNo') }}:{{ huifuMchCheck.cardNo }}</span>
  231. <span>{{ $t('huifuMch.huifuMp') }}:{{ huifuMchCheck.mp }}</span>
  232. <span>{{ $t('huifuMch.huifuCertNo') }}:{{ huifuMchCheck.certNo }}</span>
  233. </div>
  234. <div class="parent-container" v-if="huifuMchCheck.type == '1'">
  235. <span>{{ $t('huifuMch.merchantType') }}:企业</span>
  236. <span>{{ $t('huifuMch.huifuRegName') }}:{{ huifuMchCheck.regName }}</span>
  237. <span>{{ $t('huifuMch.shortNameLabel') }}:{{ huifuMchCheck.shortName }}</span>
  238. <span>{{ $t('huifuMch.companyFoundDate') }}:{{ huifuMchCheck.foundDate }}</span>
  239. <span>{{ $t('huifuMch.licenseCode') }}:{{ huifuMchCheck.licenseCode }}</span>
  240. <span>{{ $t('huifuMch.huifuRegDetail') }}:{{ huifuMchCheck.regDetail }}</span>
  241. <span>{{ $t('huifuMch.huifuContactName') }}:{{ huifuMchCheck.name }}</span>
  242. <span>{{ $t('huifuMch.huifuContactMobile') }}:{{ huifuMchCheck.phone }}</span>
  243. <span>{{ $t('huifuMch.huifuContactEmail') }}:{{ huifuMchCheck.email }}</span>
  244. <span>{{ $t('huifuMch.huifuBusinessAddress') }}:{{ huifuMchCheck.detailAddr }}</span>
  245. <span>{{ $t('huifuMch.huifuServicePhone') }}:{{ huifuMchCheck.servicePhone }}</span>
  246. <span>{{ $t('huifuMch.cardType') }}:{{ huifuMchCheck.cardType == '1'? $t('huifuMch.personalAccount'):$t('huifuMch.corporateAccount') }}</span>
  247. <span>{{ $t('huifuMch.huifuCardName') }}:{{ huifuMchCheck.cardName }}</span>
  248. <span>{{ $t('huifuMch.huifuCardNo') }}:{{ huifuMchCheck.cardNo }}</span>
  249. <span>{{ $t('huifuMch.huifuMp') }}:{{ huifuMchCheck.mp }}</span>
  250. <span>{{ $t('huifuMch.huifuCertNo') }}:{{ huifuMchCheck.certNo }}</span>
  251. <span v-if="huifuMchCheck.cardType == '0'">{{ $t('huifuMch.openLicenceNo') }}:{{ huifuMchCheck.openLicenceNo }}</span>
  252. <span v-if="huifuMchCheck.cardType == '0'">{{ $t('huifuMch.branchCode') }}:{{ huifuMchCheck.branchCode }}</span>
  253. </div>
  254. <van-row v-if="showStatus == '2' || showStatus == '3'" justify="space-around" style="padding: 3em;">
  255. <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="sumbit" @click="updateHuifu">{{
  256. $t('huifuMch.update') }}
  257. </van-button>
  258. </van-row>
  259. </div>
  260. </div>
  261. </template>
  262. <script>
  263. import { onMounted, reactive, toRefs, ref } from "vue";
  264. import sHeader from "@/components/SimpleHeader";
  265. import dateUtil from "@/utils/dateUtil";
  266. import { Toast } from "vant";
  267. import { areaList } from "@vant/area-data";
  268. import { saveHuifuMch, getHuifuMchCheck, uploadPic, submitHuifuCheck } from "@/service/huifuMch";
  269. import { getLoginUser } from "@/common/js/utils";
  270. import { useRouter } from "vue-router";
  271. import { useI18n } from "vue-i18n";
  272. export default {
  273. components: { sHeader },
  274. setup() {
  275. // 引入语言
  276. const { t } = useI18n();
  277. const router = useRouter();
  278. const user = getLoginUser();
  279. const huifuMchCheck = ref(null); // 审核信息
  280. const businessAddress = ref(''); //经营地址
  281. const registeredAddress = ref(''); //注册地址
  282. const bankAddress = ref(''); // 银行地址
  283. const showArea = ref(false); // 是否弹窗
  284. const showBankAddress = ref(false);
  285. const showReAddress = ref(false);
  286. const companyFoundDate = ref(''); // 成立日期
  287. const showFoundDate = ref(false);
  288. const beginDateLicense = ref(''); // 营业执照有效开始日期
  289. const showBeginDateLicense = ref(false);
  290. const endDateLicense = ref(''); // 营业执照有效截止日期
  291. const showEndDateLicense= ref(false);
  292. const beginDate = ref(''); // 有效期开始日期
  293. const showBeginDate = ref(false);
  294. const endDate = ref(''); // 有效期截日期
  295. const showEndDate = ref(false);
  296. const showStatus = ref(null);
  297. const certBackPic = ref();
  298. const certFrontPic = ref();
  299. const cardFrontPic = ref();
  300. const licensePic = ref();
  301. const regAcctPic = ref();
  302. let addParams = reactive({
  303. adminId: user.id, // 当前登录账户的id
  304. type: '0', // 类型 String 必填 对公企业:type=0; 个人:type=1
  305. regName: '', // 商户名称
  306. shortName: '', // 商户简称
  307. foundDate: '', // 成立时间
  308. licenseCode: '', // 营业执照编号
  309. licenseValidityType: "1", // 营业执照有效期类型
  310. licenseBeginDate: '', // 营业执照有效开始日期
  311. licenseEndDate: '', // 营业执照有效截止日期
  312. regProvId: '', // 注册省编码
  313. regAreaId: '', // 注册市编码
  314. regDistrictId: '', // 注册区编码
  315. regDetail: '', // 注册详细地址
  316. name: '', // 联系人姓名
  317. phone: '', // 联系人手机号码
  318. email: '', // 联系人邮箱
  319. provId: '', // 省编码
  320. areaId: '', // 省编码
  321. districtId: '', // 市编码
  322. detailAddr: '', // 经营地址
  323. servicePhone: '', // 客服电话
  324. cardName: '', // 卡户名
  325. cardType: '1', // 结算账户类型,“0”为对公账户,“1”为个人账户
  326. cardNo: '', // 银行卡号
  327. branchCode: '', // 联行号
  328. openLicenceNo: '', // 基本存款账户编号或核准号
  329. cardProvId: '', // 省编码
  330. cardAreaId: '', // 省编码
  331. mp: '', // 结算手机号
  332. certNo: '', // 身份证号
  333. certAddress: '', // 身份证地址
  334. certValidityType: '1', // 身份证有效期类型
  335. certBeginDate: '', // 有效期开始日期
  336. certEndDate: '', // 有效期截止日期
  337. });
  338. // 上传身份证正面
  339. const upCertBackPic = async (file) => {
  340. file.status = 'uploading';
  341. file.message = '上传中...';
  342. // 此时可以自行将文件上传至服务器
  343. // const fileObject = new File([file.content], file.file.name, { type: file.file.type });
  344. const formData = new FormData();
  345. formData.append('file', file.file, file.file.name);
  346. formData.append('adminId', user.id);
  347. formData.append('fileType', "F03");
  348. console.log(formData.get("file"));
  349. try {
  350. const { data } = await uploadPic(formData);
  351. if (data.code == "00000") {
  352. console.log(data);
  353. file.status = 'done';
  354. } else {
  355. file.status = 'failed';
  356. file.message = '上传失败';
  357. }
  358. } catch {
  359. file.status = 'failed';
  360. file.message = '上传失败';
  361. }
  362. };
  363. // 上传身份证背面
  364. const upCardFrontPic = async (file) => {
  365. file.status = 'uploading';
  366. file.message = '上传中...';
  367. // 此时可以自行将文件上传至服务器
  368. // const fileObject = new File([file.content], file.file.name, { type: file.file.type });
  369. const formData = new FormData();
  370. formData.append('file', file.file, file.file.name);
  371. formData.append('adminId', user.id);
  372. formData.append('fileType', "F13");
  373. console.log(formData.get("file"));
  374. try {
  375. const { data } = await uploadPic(formData);
  376. if (data.code == "00000") {
  377. console.log(data);
  378. file.status = 'done';
  379. } else {
  380. file.status = 'failed';
  381. file.message = '上传失败';
  382. }
  383. } catch {
  384. file.status = 'failed';
  385. file.message = '上传失败';
  386. }
  387. };
  388. // 上传结算卡正面
  389. const upCertFrontPic = async (file) => {
  390. file.status = 'uploading';
  391. file.message = '上传中...';
  392. // 此时可以自行将文件上传至服务器
  393. const fileObject = new File([file.content], file.file.name, { type: file.file.type });
  394. const formData = new FormData();
  395. formData.append('file', fileObject);
  396. formData.append('adminId', user.id);
  397. formData.append('fileType', "F02");
  398. console.log(formData.get("file"));
  399. try {
  400. const { data } = await uploadPic(formData);
  401. if (data.code == "00000") {
  402. console.log(data);
  403. file.status = 'done';
  404. } else {
  405. file.status = 'failed';
  406. file.message = '上传失败';
  407. }
  408. } catch {
  409. file.status = 'failed';
  410. file.message = '上传失败';
  411. }
  412. };
  413. // 上传营业执照
  414. const upLicensePic = async (file) => {
  415. file.status = 'uploading';
  416. file.message = '上传中...';
  417. // 此时可以自行将文件上传至服务器
  418. const fileObject = new File([file.content], file.file.name, { type: file.file.type });
  419. const formData = new FormData();
  420. formData.append('file', fileObject);
  421. formData.append('adminId', user.id);
  422. formData.append('fileType', "F07");
  423. console.log(formData.get("file"));
  424. try {
  425. const { data } = await uploadPic(formData);
  426. if (data.code == "00000") {
  427. console.log(data);
  428. file.status = 'done';
  429. } else {
  430. file.status = 'failed';
  431. file.message = '上传失败';
  432. }
  433. } catch {
  434. file.status = 'failed';
  435. file.message = '上传失败';
  436. }
  437. };
  438. // 上传开户许可证
  439. const upRegAcctPic = async (file) => {
  440. file.status = 'uploading';
  441. file.message = '上传中...';
  442. // 此时可以自行将文件上传至服务器
  443. const fileObject = new File([file.content], file.file.name, { type: file.file.type });
  444. const formData = new FormData();
  445. formData.append('file', fileObject);
  446. formData.append('adminId', user.id);
  447. formData.append('fileType', "F08");
  448. console.log(formData.get("file"));
  449. try {
  450. const { data } = await uploadPic(formData);
  451. if (data.code == "00000") {
  452. console.log(data);
  453. file.status = 'done';
  454. } else {
  455. file.status = 'failed';
  456. file.message = '上传失败';
  457. }
  458. } catch {
  459. file.status = 'failed';
  460. file.message = '上传失败';
  461. }
  462. };
  463. const onOversize = (file) => {
  464. console.log(file);
  465. Toast('文件大小不能超过 2MB');
  466. };
  467. // 地址选择
  468. const onConfirm = (areaValues) => {
  469. console.log(areaValues)
  470. showArea.value = false;
  471. businessAddress.value = areaValues
  472. .filter((item) => !!item)
  473. .map((item) => item.name)
  474. .join('/');
  475. addParams.provId = areaValues[0]?.code || '';
  476. addParams.areaId = areaValues[1]?.code || '';
  477. addParams.districtId = areaValues[2]?.code || '';
  478. // addParams.detailAddr = areaValues[0].name + areaValues[1].name + areaValues[2].name;
  479. };
  480. const onConfirmBankAddress = (areaValues) => {
  481. console.log(areaValues)
  482. showBankAddress.value = false;
  483. bankAddress.value = areaValues
  484. .filter((item) => !!item)
  485. .map((item) => item.name)
  486. .join('/');
  487. addParams.cardProvId = areaValues[0]?.code || '';
  488. addParams.cardAreaId = areaValues[1]?.code || '';
  489. };
  490. const onConfirmReAddress = (areaValues) => {
  491. showReAddress.value = false;
  492. registeredAddress.value = areaValues
  493. .filter((item) => !!item)
  494. .map((item) => item.name)
  495. .join('/');
  496. addParams.regProvId = areaValues[0]?.code || '';
  497. addParams.regAreaId = areaValues[1]?.code || '';
  498. addParams.regDistrictId = areaValues[2]?.code || '';
  499. };
  500. // 时间选择
  501. const onConfirmEndDateLicense = (value) => {
  502. endDateLicense.value = dateUtil.formateDate(value, "yyyy-MM-dd");
  503. addParams.licenseEndDate = endDateLicense.value.replace(/-/g, "");
  504. showEndDateLicense.value = false;
  505. };
  506. const onConfirmBeginDateLicense = (value) => {
  507. beginDateLicense.value = dateUtil.formateDate(value, "yyyy-MM-dd");
  508. addParams.licenseBeginDate = beginDateLicense.value.replace(/-/g, "");
  509. showBeginDateLicense.value = false;
  510. };
  511. const onConfirmFoundDate = (value) => {
  512. companyFoundDate.value = dateUtil.formateDate(value, "yyyy-MM-dd");
  513. addParams.foundDate = companyFoundDate.value.replace(/-/g, "");
  514. showFoundDate.value = false;
  515. };
  516. const onConfirmBeginDate = (value) => {
  517. beginDate.value = dateUtil.formateDate(value, "yyyy-MM-dd");
  518. addParams.certBeginDate = beginDate.value.replace(/-/g, "");
  519. showBeginDate.value = false;
  520. };
  521. const onConfirmEndDate = (value) => {
  522. endDate.value = dateUtil.formateDate(value, "yyyy-MM-dd");
  523. addParams.certEndDate = endDate.value.replace(/-/g, "");
  524. showEndDate.value = false;
  525. };
  526. onMounted(async () => {
  527. const { data } = await getHuifuMchCheck({ adminId: user.id });
  528. console.log(data.data);
  529. if (data.data != null) {
  530. huifuMchCheck.value = data.data;
  531. showStatus.value = huifuMchCheck.value.status;
  532. addParams.type = huifuMchCheck.value.type;
  533. addParams.cardType = huifuMchCheck.value.cardType;
  534. }
  535. });
  536. // 提交审核
  537. const submitCheck = async () => {
  538. if (certBackPic.value == null) {
  539. Toast("请上传身份证正面照片");
  540. return;
  541. } else if (certFrontPic.value == null) {
  542. Toast("请上传身份证背面照片");
  543. return;
  544. }
  545. if(addParams.cardType == '1') {
  546. if (cardFrontPic.value == null) {
  547. Toast("请上传结算卡正面照片");
  548. return;
  549. }
  550. } else {
  551. if (licensePic.value == null) {
  552. Toast("请上传营业执照照片");
  553. return;
  554. }
  555. if (regAcctPic.value == null) {
  556. Toast("请上传开户许可证照片");
  557. return;
  558. }
  559. }
  560. const { data } = await submitHuifuCheck(addParams);
  561. if (data.code == "00000") {
  562. console.log(data);
  563. Toast.success(t('huifuMch.submittedSuccessfully'));
  564. setTimeout(() => {
  565. router.go(0);
  566. }, 1500);
  567. } else {
  568. Toast.fail(`${t('huifuMch.submitFailed')} ${data.message}`);
  569. }
  570. }
  571. // 跳转到修改页面
  572. const updateHuifu = async () => {
  573. router.push("/huifuMchEdit");
  574. }
  575. // 提交审核表单
  576. const onSubmit = async () => {
  577. console.log('onSubmit', addParams);
  578. saveHuifuMchFun();
  579. };
  580. const saveHuifuMchFun = async () => {
  581. const { data } = await saveHuifuMch(addParams);
  582. if (data.code === "00000") {
  583. Toast.success(t('huifuMch.submittedSuccessfully'));
  584. setTimeout(() => {
  585. router.go(0);
  586. }, 1500);
  587. } else {
  588. Toast.fail(`${t('huifuMch.submitFailed')} ${data.message}`);
  589. }
  590. console.log("onSubmit", data);
  591. };
  592. return {
  593. ...toRefs(addParams),
  594. onSubmit,
  595. showStatus,
  596. businessAddress,
  597. bankAddress,
  598. registeredAddress,
  599. huifuMchCheck,
  600. areaList,
  601. beginDateLicense,
  602. endDateLicense,
  603. companyFoundDate,
  604. beginDate,
  605. endDate,
  606. showArea,
  607. showBankAddress,
  608. showReAddress,
  609. showBeginDateLicense,
  610. showEndDateLicense,
  611. showFoundDate,
  612. showBeginDate,
  613. showEndDate,
  614. onConfirm,
  615. onConfirmBankAddress,
  616. onConfirmReAddress,
  617. onConfirmBeginDateLicense,
  618. onConfirmEndDateLicense,
  619. onConfirmFoundDate,
  620. onConfirmBeginDate,
  621. onConfirmEndDate,
  622. minDate: new Date(2000, 0, 1),
  623. maxDate: new Date(2035, 11, 31),
  624. licensePic,
  625. regAcctPic,
  626. certBackPic,
  627. certFrontPic,
  628. upLicensePic,
  629. upRegAcctPic,
  630. upCertBackPic,
  631. upCertFrontPic,
  632. upCardFrontPic,
  633. cardFrontPic,
  634. submitCheck,
  635. onOversize,
  636. updateHuifu
  637. };
  638. },
  639. };
  640. </script>
  641. <style lang="less" scoped>
  642. @import "../../common/style/common.less";
  643. @import "./index.less";
  644. </style>