index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
  1. <template>
  2. <!-- 提现账号 -->
  3. <div class="shandeMchPage flex-col"
  4. :class="{ page1: pageType === '1', page2: pageType === '2', page3: pageType === '3', page4: pageType === '4' }">
  5. <s-header :name="$t('joinpayMch.withdrawalAccountNo')" :noback="false"></s-header>
  6. <div class="shandeMchBox flex-col">
  7. <div class="topSpeed" v-if="pageType !== '4'"
  8. :class="{ page1: pageType === '1', page2: pageType === '2', page3: pageType === '3' }"></div>
  9. <div v-if="pageType === '1' || pageType === '4'">
  10. <van-form @submit="saveJoinPayMchFun">
  11. <van-field v-model="altMchName" name="altMchName" :label="$t('joinpayMch.merchantNameLabel')" readonly />
  12. <van-field v-model="altMchNo" name="altMchNo" :label="$t('joinpayMch.merchantAccountLabel')" readonly />
  13. <van-field v-model="altMchShortName" name="altMchShortName" :label="$t('joinpayMch.merchantAbbreviationLabel')"
  14. readonly />
  15. <div class="van-cell van-field requiredLeft">
  16. <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.merchantType') }}:</span></div>
  17. <div class="van-cell__value van-field__value radioBox">
  18. <van-radio-group v-model="altMerchantType" direction="horizontal" @change="fieldUpdate">
  19. <van-radio name="10" icon-size="18px">{{ $t('joinpayMch.personal') }}</van-radio>
  20. <van-radio name="11" icon-size="18px">{{ $t('joinpayMch.individualBusinesses') }}</van-radio>
  21. <van-radio name="12" icon-size="18px">{{ $t('joinpayMch.enterprise') }}</van-radio>
  22. </van-radio-group>
  23. </div>
  24. </div>
  25. <div class="intervalRow"></div>
  26. <van-field class="requiredLeft" v-model="busiContactName" name="busiContactName"
  27. :label="$t('joinpayMch.contactNameLabel')" :placeholder="$t('joinpayMch.contactNamePlaceholder')"
  28. :rules="[{ required: true, message: $t('joinpayMch.contactNamePlaceholder') }]"
  29. @update:model-value="fieldUpdate" />
  30. <van-field class="requiredLeft" v-model="busiContactMobileNo" name="busiContactMobileNo"
  31. :label="$t('joinpayMch.cellPhoneLabel')" :placeholder="$t('joinpayMch.cellPhonePlaceholder')"
  32. :rules="[{ required: true, message: $t('joinpayMch.cellPhonePlaceholder') }]"
  33. @update:model-value="fieldUpdate" />
  34. <van-field class="requiredLeft" v-model="legalPerson" name="legalPerson"
  35. :label="$t('joinpayMch.nameOfLegalPerson/IndividualLabel')"
  36. :placeholder="$t('joinpayMch.nameOfLegalPerson/IndividualPlaceholder')"
  37. :rules="[{ required: true, message: $t('joinpayMch.nameOfLegalPerson/IndividualPlaceholder') }]"
  38. @update:model-value="fieldUpdate" />
  39. <van-field class="requiredLeft" v-model="phoneNo" name="phoneNo"
  40. :label="$t('joinpayMch.phoneNumberOfLegalPerson/IndividualLabel')"
  41. :placeholder="$t('joinpayMch.phoneNumberOfLegalPerson/IndividualPlaceholder')"
  42. :rules="[{ required: true, message: $t('joinpayMch.phoneNumberOfLegalPerson/IndividualPlaceholder') }]"
  43. @update:model-value="fieldUpdate" />
  44. <van-field class="requiredLeft" v-model="idCardNo" name="idCardNo" :label="$t('joinpayMch.IDLabel')"
  45. :placeholder="$t('joinpayMch.IDPlaceholder')"
  46. :rules="[{ required: true, message: $t('joinpayMch.IDPlaceholder') }]" @update:model-value="fieldUpdate" />
  47. <van-cell :title="$t('joinpayMch.validityOfIDCard')" :value="idCardExpiry" @click="idCardExpiryShow = true" />
  48. <van-calendar v-model:show="idCardExpiryShow" @confirm="idCardExpiryOnConfirm" color="#4d6add" />
  49. <div class="van-cell van-field" v-if="pageType === '4'">
  50. <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.pictureReview') }}:</span></div>
  51. <div class="van-cell__value van-field__value radioBox"
  52. style="display: flex; justify-content: space-around; align-items: center;">
  53. {{ approveStatus }}
  54. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" @click='updateSentImage()'>
  55. {{ $t('joinpayMch.reUpload') }}</van-button>
  56. </div>
  57. </div>
  58. <div class="van-cell van-field" v-if="pageType === '4'">
  59. <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.signingStatus') }}:</span></div>
  60. <div class="van-cell__value van-field__value radioBox"
  61. style="display: flex; justify-content: space-around; align-items: center;">
  62. {{ signStatus }}
  63. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" @click='altMchSignFun()'>{{
  64. $t('joinpayMch.signAContract') }}
  65. </van-button>
  66. </div>
  67. </div>
  68. <div class="intervalRow"></div>
  69. <div class="van-cell van-field requiredLeft">
  70. <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.accountType') }}:</span></div>
  71. <div class="van-cell__value van-field__value radioBox">
  72. <van-radio-group v-model="bankAccountType" direction="horizontal" @change="fieldUpdate">
  73. <van-radio name="1" icon-size="18px">{{ $t('joinpayMch.debitCard') }}</van-radio>
  74. <van-radio name="4" icon-size="18px">{{ $t('joinpayMch.corporateAccount') }}</van-radio>
  75. </van-radio-group>
  76. </div>
  77. </div>
  78. <van-field class="requiredLeft" v-model="bankAccountName" name="bankAccountName"
  79. :label="$t('joinpayMch.bankAccountNameLabel')" :placeholder="$t('joinpayMch.bankAccountNamePlaceholder')"
  80. :rules="[{ required: true, message: $t('joinpayMch.bankAccountNamePlaceholder') }]"
  81. @update:model-value="fieldUpdate" />
  82. <van-field class="requiredLeft" v-model="bankAccountNo" name="bankAccountNo"
  83. :label="$t('joinpayMch.bankAccountLabel')" :placeholder="$t('joinpayMch.bankAccountPlaceholder')"
  84. :rules="[{ required: true, message: $t('joinpayMch.bankAccountPlaceholder') }]"
  85. @update:model-value="fieldUpdate" />
  86. <div :class="{ requiredLeft: bankAccountType === '4' }">
  87. <van-field v-model="bankChannelNo" name="bankChannelNo" :label="$t('joinpayMch.interBankNoLabel')"
  88. :placeholder="$t('joinpayMch.interBankNoPlaceholder')"
  89. :rules="[{ required: bankAccountType === '4', message: $t('joinpayMch.interBankNoPlaceholder') }]"
  90. @update:model-value="fieldUpdate" />
  91. <van-field v-model="licenseNo" name="licenseNo" :label="$t('joinpayMch.businessLicenseNoLabel')"
  92. :placeholder="$t('joinpayMch.businessLicenseNoPlaceholder')"
  93. :rules="[{ required: bankAccountType === '4', message: $t('joinpayMch.businessLicenseNoPlaceholder') }]"
  94. @update:model-value="fieldUpdate" />
  95. <van-cell :title="$t('joinpayMch.validityOfBusinessLicenseLabel')" :value="licenseExpiry"
  96. @click="licenseExpiryShow = true" />
  97. <van-calendar v-model:show="licenseExpiryShow" @confirm="licenseExpiryOnConfirm" color="#4d6add" />
  98. </div>
  99. <div class="intervalRow"></div>
  100. <div class="van-cell van-field">
  101. <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.settlementMethod') }}:</span></div>
  102. <div class="van-cell__value van-field__value radioBox">
  103. <van-radio-group v-model="settMode" direction="horizontal" @change="fieldUpdate">
  104. <van-radio name="1" icon-size="18px">{{ $t('joinpayMch.autoSettlementByConvergence') }}</van-radio>
  105. <van-radio name="2" icon-size="18px">{{ $t('joinpayMch.manuallySettledByMerchantPlatform') }}</van-radio>
  106. </van-radio-group>
  107. </div>
  108. </div>
  109. <div class="van-cell van-field">
  110. <div class="van-cell__title van-field__label"><span>{{ $t('joinpayMch.settlementCycleType') }}:</span></div>
  111. <div class="van-cell__value van-field__value radioBox">
  112. <van-radio-group v-model="settDateType" direction="horizontal" @change="fieldUpdate">
  113. <van-radio name="1" icon-size="18px">{{ $t('joinpayMch.weekDay') }}</van-radio>
  114. <van-radio name="2" icon-size="18px">{{ $t('joinpayMch.naturalDay') }}</van-radio>
  115. <van-radio name="3" icon-size="18px">{{ $t('joinpayMch.monthlySettlementDate') }}</van-radio>
  116. </van-radio-group>
  117. </div>
  118. </div>
  119. <van-field v-model="riskDay" name="riskDay" :label="$t('joinpayMch.settlementCycleLabel')"
  120. :placeholder="$t('joinpayMch.settlementCyclePlaceholder')" @update:model-value="fieldUpdate" />
  121. <van-field v-model="manageScope" name="manageScope" :label="$t('joinpayMch.natureOfBusinessLabel')"
  122. :placeholder="$t('joinpayMch.natureOfBusinessPlaceholder')" @update:model-value="fieldUpdate" />
  123. <van-field v-model="manageAddr" name="manageAddr" :label="$t('joinpayMch.businessAddressLabel')"
  124. :placeholder="$t('joinpayMch.businessAddressPlaceholder')" @update:model-value="fieldUpdate" />
  125. <!-- 操作 -->
  126. <van-row justify="space-around" style="padding: 1em">
  127. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" native-type="submit">{{
  128. $t('joinpayMch.submitDataForReview') }}
  129. </van-button>
  130. </van-row>
  131. </van-form>
  132. </div>
  133. <div v-if="pageType === '2'" class="joinPayMch2">
  134. <img src='../../assets/joinPayMch/center.png' style="width: 50%; margin-top: 3em;" />
  135. <div v-if="joinPayMchType === '0'" style="width: 100%;">
  136. <div style="width: 100%; text-align: center;">
  137. <span style=" font-size: 1.4em; font-weight: bold; line-height: 3;">{{
  138. $t('joinpayMch.thePlatformAdministratorIsReviewing') }}</span>
  139. </div>
  140. <div style="width: 100%; text-align: center;">
  141. <span style="line-height: 1.2;">{{ $t('joinpayMch.youCan') }}<span
  142. style="color: #4d6add; text-decoration: underline;" @click='updateJoinPay()'>{{
  143. $t('joinpayMch.withdrawAndRevise') }}</span></span>
  144. </div>
  145. </div>
  146. <div v-if="joinPayMchType === '2' || joinPayMchType === '3'" style="width: 100%;">
  147. <div style="width: 100%; text-align: center;">
  148. <span style=" font-size: 1.4em; font-weight: bold; line-height: 3; color: #ee0a24;">{{
  149. $t('joinpayMch.failedToPassTheReview') }}</span>
  150. </div>
  151. <div style="width: 100%; text-align: center;">
  152. <span style="line-height: 1.2;">{{ $t('joinpayMch.failedToPassTheReview') }},<span
  153. style="color: #4d6add; text-decoration: underline;" @click='pageType = "1"'>{{
  154. $t('joinpayMch.clickHereToFillInTheInformationAgain') }}</span></span>
  155. </div>
  156. </div>
  157. <div v-if="joinPayMchStep === '0'">
  158. <div style="width: 100%; text-align: center;">
  159. <span style=" font-size: 1.4em; font-weight: bold; line-height: 3; color: #07c160;">{{
  160. $t('joinpayMch.approvalPassed') }}</span>
  161. </div>
  162. <div style="width: 100%; text-align: center;">
  163. <span style="line-height: 1.2;">{{ $t('joinpayMch.approvalPassed') }},{{ $t('joinpayMch.youCan') }}<span
  164. style="color: #4d6add; text-decoration: underline;" @click='pageType = "1"'>{{
  165. $t('joinpayMch.clickHereToFillInAgainAndSubmitForReview') }}</span></span>
  166. </div>
  167. <van-row justify="space-around" style="padding: 1em">
  168. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" @click='pageType = "3"'>
  169. {{ $t('joinpayMch.nextGoToUploadIDPhotos') }}</van-button>
  170. </van-row>
  171. </div>
  172. </div>
  173. <div v-if="pageType === '3'">
  174. <van-form @submit="sentImageFun">
  175. <div class="upLoaderRow">
  176. <div class="baseRow flex-row justify-between">
  177. <div class="group2 flex-col"></div>
  178. <span class="baseText">{{ $t('joinpayMch.uploYourIdCard') }}</span>
  179. </div>
  180. <div class="cardRow">
  181. <div class="cardLi">
  182. <van-uploader v-model="cardNegativeList" :max-size="2 * 1024 * 1024" :max-count="1"
  183. :after-read="afterRead" @oversize="onOversize" />
  184. <p>{{ $t('joinpayMch.uploPortrait') }}</p>
  185. </div>
  186. <div class="cardLi">
  187. <van-uploader v-model="cardPositiveList" :max-size="2 * 1024 * 1024" :max-count="1"
  188. :after-read="afterRead" @oversize="onOversize" />
  189. <p>{{ $t('joinpayMch.uploNatiEmblem') }}</p>
  190. </div>
  191. </div>
  192. </div>
  193. <div class="upLoaderRow" v-if="bankAccountType === '4'">
  194. <div class="baseRow flex-row justify-between">
  195. <div class="group2 flex-col"></div>
  196. <span class="baseText">{{ $t('joinpayMch.businessLicensePlace') }}</span>
  197. </div>
  198. <div class="cardRow">
  199. <div class="cardLi">
  200. <van-uploader v-model="tradeLicenceList" :max-size="2 * 1024 * 1024" :max-count="1"
  201. :after-read="afterRead" @oversize="onOversize" />
  202. <p>{{ $t('joinpayMch.businessLicense') }}</p>
  203. </div>
  204. </div>
  205. </div>
  206. <div class="upLoaderRow" v-if="bankAccountType === '4'">
  207. <div class="baseRow flex-row justify-between">
  208. <div class="group2 flex-col"></div>
  209. <span class="baseText">{{ $t('joinpayMch.accountOpeningLicensePlace') }}</span>
  210. </div>
  211. <div class="cardRow">
  212. <div class="cardLi">
  213. <van-uploader v-model="openAccountLicenceList" :max-size="2 * 1024 * 1024" :max-count="1"
  214. :after-read="afterRead" @oversize="onOversize" />
  215. <p>{{ $t('joinpayMch.accountOpeningLicense') }}</p>
  216. </div>
  217. </div>
  218. </div>
  219. <van-row justify="space-around" style="padding: 1em">
  220. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" native-type="submit">{{
  221. $t('joinpayMch.submissions') }}
  222. </van-button>
  223. </van-row>
  224. </van-form>
  225. </div>
  226. </div>
  227. </div>
  228. </template>
  229. <script>
  230. import { onMounted, reactive, toRefs, ref } from "vue";
  231. import sHeader from "../../components/SimpleHeader";
  232. import { showFailToast, showSuccessToast } from "vant";
  233. import { getOneJoinPayMch, saveJoinPayMch, updateJoinPayMchCheck, sentImage, altMchSign } from '../../service/joinpayMch';
  234. import { getLoginUser, styleUrl } from "../../common/js/utils";
  235. import dateUtil from "../../utils/dateUtil";
  236. import { useI18n } from "vue-i18n";
  237. export default {
  238. components: { sHeader },
  239. setup() {
  240. // 引入语言
  241. const { t } = useI18n();
  242. const user = getLoginUser();
  243. const idCardExpiryShow = ref(false);
  244. const idCardExpiryOnConfirm = (value) => {
  245. idCardExpiryShow.value = false;
  246. addParams.idCardExpiry = dateUtil.formateDate(value, "yyyy-MM-dd");
  247. fieldUpdate();
  248. };
  249. const licenseExpiryShow = ref(false);
  250. const licenseExpiryOnConfirm = (value) => {
  251. licenseExpiryShow.value = false;
  252. addParams.licenseExpiry = dateUtil.formateDate(value, "yyyy-MM-dd");
  253. fieldUpdate();
  254. };
  255. let addParams = reactive({
  256. adminId: user.id, // 当前登录账户的id Long 必填
  257. altMchName: '', // 分账方名称; string 必填
  258. altMchNo: '', // 分账方账号; string 必填
  259. altMchShortName: '', // 分账方商户简称; string
  260. altMerchantType: '10', // 分账方商户类型,10:个人,11:个体工商户,12:企业; integer(int32) 必填
  261. busiContactName: '', // 业务联系人姓名; string 必填
  262. busiContactMobileNo: '', // 业务联系人手机; string 必填
  263. legalPerson: '', // 法人; string 必填
  264. phoneNo: '', // 电话; string 必填
  265. idCardNo: '', // 身份证; string 必填
  266. idCardExpiry: '', // 身份证有效期; string
  267. bankAccountType: 1, // 账户类型 * 1 借记卡,4 对公账户; integer(int32) 必填
  268. bankAccountName: '', // 银行账户名称,分账方结算银行账户名称; string 必填
  269. bankAccountNo: '', // 银行账号; string 必填
  270. bankChannelNo: '', // 联行号; string 对公账户;必填
  271. licenseNo: '', // 营业执照编号; string 对公账户;必填
  272. licenseExpiry: '', // 营业执照有效期; string
  273. settMode: 1, // 结算方式 * 1 由汇聚自动结算 * 2 由商户平台手工结算(结算接口); integer(int32) 默认填1
  274. settDateType: 1, // 结算周期类型 * 1 工作日,2 自然日,3 月结日; integer(int32) 默认填1
  275. riskDay: 1, // 结算周期; integer(int32) 默认填1
  276. manageScope: '', // 经营范围; string
  277. manageAddr: '', // 经营地址; string
  278. bizCode: '', // 业务响应码; string
  279. loginName: '', // 分账方登录名,即邮箱; string
  280. });
  281. let cardPositiveList = ref([]);
  282. let cardNegativeList = ref([]);
  283. let tradeLicenceList = ref([]);
  284. let openAccountLicenceList = ref([]);
  285. let sentImageForm = reactive({
  286. cardPositive: '', // 身份证正面 String 必填
  287. cardNegative: '', // 身份证背面 String 必填
  288. tradeLicence: '', // 营业执照图片 String Type=0时必填
  289. openAccountLicence: '', // 开户许可证 String Type=0时必填
  290. type: '', // 账户类型 String 必填 0:对公;1,个人
  291. status: '0', // 第几次提交 String 必填 0,第一次提交;1,第n次提交(重新上传)
  292. });
  293. const pageType = ref('1');
  294. const joinPayMchType = ref(null);
  295. const joinPayMchStep = ref(null);
  296. let joinPayMchID = null;
  297. const approveStatus = ref(null);
  298. const signStatus = ref(null);
  299. let isMemoryFormType = false;
  300. onMounted(async () => {
  301. styleUrl('joinpayMch');
  302. getOneJoinPayMchFun();
  303. });
  304. // 获取备用提现账号回显
  305. const getOneJoinPayMchFun = async () => {
  306. const { data } = await getOneJoinPayMch({ adminId: user.id });
  307. if (data.code === "00000") {
  308. if (data.data.type === '2' || data.data.type === '3' || data.data.type === '0') {
  309. joinPayMchType.value = data.data.type;
  310. pageType.value = '2';
  311. }
  312. if ((data.data.type === null || data.data.type === '1') && data.data.step === '0') {
  313. pageType.value = '2';
  314. joinPayMchStep.value = '0';
  315. }
  316. if ((data.data.type === null || data.data.type === '1') && data.data.step === '1') {
  317. pageType.value = '4';
  318. }
  319. console.log('pageType', pageType.value);
  320. joinPayMchID = data.data.id;
  321. approveStatus.value = data.data.approveStatus;
  322. signStatus.value = data.data.signStatus;
  323. addParams.altMchName = data.data.altMchName;
  324. addParams.altMchNo = data.data.altMchNo;
  325. addParams.altMchShortName = data.data.altMchShortName;
  326. addParams.altMerchantType = data.data.altMerchantType ? data.data.altMerchantType.toString() : '';
  327. addParams.busiContactName = data.data.busiContactName;
  328. addParams.busiContactMobileNo = data.data.busiContactMobileNo;
  329. addParams.legalPerson = data.data.legalPerson;
  330. addParams.phoneNo = data.data.phoneNo;
  331. addParams.idCardNo = data.data.idCardNo;
  332. if (data.data.idCardExpiry) {
  333. addParams.idCardExpiry = dateUtil.formateDate(new Date(data.data.idCardExpiry), "yyyy-MM-dd");
  334. }
  335. addParams.bankAccountType = data.data.bankAccountType ? data.data.bankAccountType.toString() : '';
  336. addParams.bankAccountName = data.data.bankAccountName;
  337. addParams.bankAccountNo = data.data.bankAccountNo;
  338. addParams.bankChannelNo = data.data.bankChannelNo;
  339. addParams.licenseNo = data.data.licenseNo;
  340. if (data.data.licenseExpiry) {
  341. addParams.licenseExpiry = dateUtil.formateDate(new Date(data.data.licenseExpiry), "yyyy-MM-dd");
  342. }
  343. addParams.settMode = data.data.settMode ? data.data.settMode.toString() : '';
  344. addParams.settDateType = data.data.settDateType ? data.data.settDateType.toString() : '';
  345. addParams.riskDay = data.data.riskDay;
  346. addParams.manageScope = data.data.manageScope;
  347. addParams.manageAddr = data.data.manageAddr;
  348. addParams.bizCode = data.data.bizCode;
  349. addParams.loginName = data.data.loginName;
  350. } else {
  351. pageType.value = '1';
  352. showFailToast(data.message);
  353. }
  354. memoryForm();
  355. isMemoryFormType = true;
  356. };
  357. // 记忆表单
  358. const memoryForm = () => {
  359. const formDataString = localStorage.getItem('joinPayMchForm');
  360. if (formDataString) {
  361. const formData = JSON.parse(formDataString);
  362. Object.keys(formData).forEach(key => {
  363. addParams[key] = formData[key];
  364. });
  365. }
  366. };
  367. // 提交审批表单
  368. const saveJoinPayMchFun = async () => {
  369. const params = Object.assign({}, addParams);
  370. params.altMerchantType = parseInt(params.altMerchantType);
  371. params.bankAccountType = parseInt(params.bankAccountType);
  372. params.settMode = parseInt(params.settMode);
  373. params.settDateType = parseInt(params.settDateType);
  374. const { data } = await saveJoinPayMch(addParams);
  375. if (data.code === "00000") {
  376. showSuccessToast(t(('joinpayMch.submittedSuccessfully')));
  377. // 提交成功后删除记忆的表单
  378. localStorage.removeItem('joinPayMchForm');
  379. location.reload();
  380. } else {
  381. showFailToast(`${t('joinpayMch.submitFailed')} ${data.message}`);
  382. }
  383. };
  384. // 撤回
  385. const updateJoinPay = async () => {
  386. const { data } = await updateJoinPayMchCheck({ id: joinPayMchID });
  387. if (data.code === "00000") {
  388. showSuccessToast(t('joinpayMch.withdrawalSucceeded'));
  389. location.reload();
  390. } else { showFailToast(`${data.message}`); }
  391. }
  392. // 图片上传表单提交
  393. const sentImageFun = async () => {
  394. const params = {
  395. id: joinPayMchID,
  396. type: addParams.bankAccountType === '4' ? '0' : '1',
  397. status: sentImageForm.status,
  398. tradeLicence: null,
  399. openAccountLicence: null
  400. };
  401. if (cardNegativeList.value.length < 1) { showFailToast(t('joinpayMch.uploPortrait')); return; }
  402. if (cardPositiveList.value.length < 1) { showFailToast(t('joinpayMch.uploNatiEmblem')); return; }
  403. params.cardPositive = cardPositiveList.value[0].content;
  404. params.cardNegative = cardNegativeList.value[0].content;
  405. if (addParams.bankAccountType === '4') {
  406. if (tradeLicenceList.value.length < 1) { showFailToast(t('joinpayMch.businessLicensePlace')); return; }
  407. if (openAccountLicenceList.value.length < 1) { showFailToast(t('joinpayMch.accountOpeningLicensePlace')); return; }
  408. }
  409. if (tradeLicenceList.value.length > 0) { params.tradeLicence = tradeLicenceList.value[0].content; }
  410. if (openAccountLicenceList.value.length > 0) { params.openAccountLicence = openAccountLicenceList.value[0].content; }
  411. const { data } = await sentImage(params);
  412. if (data.code === "00000") {
  413. showSuccessToast(t('joinpayMch.uploadSucceeded'));
  414. location.reload();
  415. } else { showFailToast(`${data.message}`); }
  416. }
  417. // 图片重新上传触发
  418. const updateSentImage = () => {
  419. sentImageForm.status = '1';
  420. pageType.value = '3';
  421. }
  422. // 签约触发
  423. const altMchSignFun = async () => {
  424. const { data } = await altMchSign({ id: joinPayMchID });
  425. if (data.code === "00000") {
  426. showSuccessToast(t('joinpayMch.signingSuccessfully'));
  427. location.reload();
  428. } else { showFailToast(`${data.message}`); }
  429. }
  430. // 记录表单填写
  431. const fieldUpdate = () => {
  432. console.log('fieldUpdate');
  433. if (isMemoryFormType) {
  434. localStorage.setItem('joinPayMchForm', JSON.stringify(addParams));
  435. }
  436. };
  437. // 文件上传
  438. const afterRead = (file) => {
  439. console.log('afterRead', file);
  440. console.log('afterRead', file.content);
  441. console.log(cardPositiveList);
  442. }
  443. const onOversize = () => { showFailToast(t('joinpayMch.exceedPictSize')); }
  444. return {
  445. pageType,
  446. joinPayMchType,
  447. joinPayMchStep,
  448. ...toRefs(addParams),
  449. ...toRefs(sentImageForm),
  450. cardPositiveList,
  451. cardNegativeList,
  452. tradeLicenceList,
  453. openAccountLicenceList,
  454. saveJoinPayMchFun,
  455. updateJoinPay,
  456. sentImageFun,
  457. approveStatus,
  458. signStatus,
  459. updateSentImage,
  460. altMchSignFun,
  461. idCardExpiryShow,
  462. idCardExpiryOnConfirm,
  463. licenseExpiryShow,
  464. licenseExpiryOnConfirm,
  465. fieldUpdate,
  466. afterRead,
  467. onOversize
  468. };
  469. },
  470. };
  471. </script>
  472. <style lang="less" scoped>
  473. @import "../../common/style/common.less";
  474. </style>