transfer.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913
  1. <template>
  2. <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
  3. <cwg-header :title="t('Home.page_customer.item5')" />
  4. <view id="custom_Transfer" class="transfer-page">
  5. <view class="main-content">
  6. <!-- 步骤1:选择转出账户 -->
  7. <view class="box box-step1">
  8. <view class="b-card">
  9. <view class="card-top">
  10. <view class="card-row">
  11. <view class="tit">
  12. <text class="iconfont icon-caret-right"></text>
  13. <span>{{ t('Custom.Transfer.Title1') }}</span>
  14. </view>
  15. </view>
  16. <view class="card-row">
  17. <cwg-combox v-model:value="loginValue" :clearable="false" :options="withdrawDisplayList"
  18. :placeholder="t('placeholder.choose')" />
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- 步骤2:转账表单 -->
  24. <view class="box box-step2" v-if="step2">
  25. <view class="b-card">
  26. <view class="card-top">
  27. <view class="card-row card-tit">
  28. <view class="title-wrapper">
  29. <view class="tit">
  30. <text class="iconfont icon-caret-right"></text>
  31. <span>{{ t('Custom.Transfer.Title2') }}</span>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="card-row">
  36. <cwg-combox v-model:value="transferType" :clearable="false"
  37. :options="transferTypeOptions" :placeholder="t('placeholder.choose')" />
  38. </view>
  39. <uni-forms ref="formRef" :model="form" :rules="rules" label-position="top"
  40. validate-trigger="submit">
  41. <view class="form-row">
  42. <view class="form-col">
  43. <!-- 转出账户 -->
  44. <uni-forms-item :label="t('Custom.Transfer.TransferAccounts')"
  45. name="withdrawLogin">
  46. <cwg-combox :disabled="true" v-model:value="form.withdrawLogin"
  47. :clearable="false" :options="withdrawDisplayList"
  48. :placeholder="t('placeholder.choose')" />
  49. </uni-forms-item>
  50. </view>
  51. <view class="form-col">
  52. <!-- 转入账户 -->
  53. <uni-forms-item :label="t('Custom.Transfer.IntoAccount')" name="depositLogin"
  54. :error-message="depositErrorMessage">
  55. <cwg-combox v-model:value="form.depositLogin" :clearable="false"
  56. :options="depositDisplayList" :placeholder="t('placeholder.choose')" />
  57. </uni-forms-item>
  58. </view>
  59. </view>
  60. <view class="form-row">
  61. <view class="form-col">
  62. <!-- 货币类型 -->
  63. <uni-forms-item :label="t('Custom.Transfer.CurrencyType')" name="currency">
  64. <cwg-combox v-model:value="form.currency" :clearable="false"
  65. :options="currencyOptions" :placeholder="t('placeholder.choose')" />
  66. </uni-forms-item>
  67. </view>
  68. <view class="form-col">
  69. <!-- 转账金额 -->
  70. <uni-forms-item :label="t('Custom.Transfer.Amount')" name="amount"
  71. :error-message="amountErrorMessage">
  72. <uni-easyinput v-model="form.amount" :placeholder="t('placeholder.input')"
  73. @blur="validateAmount" />
  74. </uni-forms-item>
  75. </view>
  76. </view>
  77. <view class="form-row">
  78. <view class="form-col-full">
  79. <uni-forms-item>
  80. <view class="tips">
  81. <view class="title">{{ t('Custom.Transfer.Tips') }}</view>
  82. <view>{{ t('Custom.Transfer.Tips1') }}</view>
  83. <view>{{ t('Custom.Transfer.Tips2') }}</view>
  84. <view>{{ t('Custom.Transfer.Tips3') }}</view>
  85. <view>{{ t('Custom.Transfer.Tips4') }}</view>
  86. </view>
  87. </uni-forms-item>
  88. </view>
  89. </view>
  90. <view class="form-row">
  91. <button class="s-btn reselect" type="primary" @click="toTransfer">{{ locale === 'es'
  92. ?
  93. 'Enviar solicitud' : t('Btn.Submit') }}</button>
  94. </view>
  95. </uni-forms>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. <!-- 失败弹窗 -->
  101. <cwg-error-popup v-model:visible="dialogError" @confirm="closeDia" :responseMessage="RES" />
  102. <!-- 成功弹窗 -->
  103. <cwg-success-popup v-model:visible="dialogSuccess" @confirm="closeDia" />
  104. <!-- 等待弹窗 -->
  105. <cwg-wait-popup v-model:visible="dialogCheckWait" type="center" :mask-click="false" :showFooters="false" />
  106. </view>
  107. </cwg-page-wrapper>
  108. </template>
  109. <script setup>
  110. import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
  111. import { useI18n } from 'vue-i18n'
  112. import { onLoad, onReady } from '@dcloudio/uni-app'
  113. import { getCurrentInstance } from 'vue'
  114. import { isAfterJuly28 } from '@/utils/dateUtils'
  115. import { customApi } from '@/service/custom'
  116. import { financialApi } from '@/service/financial'
  117. import { ibApi } from '@/service/ib'
  118. // import ServiceA from "@/service/activity"; // 原注释保留
  119. import useUserStore from '@/stores/use-user-store'
  120. const userStore = useUserStore()
  121. const customInfo = computed(() => {
  122. return userStore?.userInfo?.customInfo || {}
  123. })
  124. import Config from '@/config/index'
  125. const { Code } = Config
  126. const { t } = useI18n()
  127. // 获取全局实例(用于访问 Session、$pigeon 等)
  128. const { proxy } = getCurrentInstance()
  129. const Session = proxy?.Session
  130. const $pigeon = proxy?.$pigeon
  131. // 响应式数据
  132. const loginValue = ref(null)
  133. const flag = ref(false)
  134. const RES = ref('') // 弹窗响应信息
  135. const loginOptions = ref([])
  136. const toOptions = ref([])
  137. // 跨系统内转下拉数据
  138. const accountList = ref([])
  139. const systemTransferType = ref(0)
  140. const step2 = ref(false)
  141. const transferType = ref('internal')
  142. const amountLimits = reactive({
  143. minAmount: '',
  144. maxAmount: '',
  145. })
  146. const form = reactive({
  147. currency: 'USD',
  148. depositLogin: null,
  149. withdrawLogin: null,
  150. amount: ''
  151. })
  152. const dialogSuccess = computed(() => dialogCheck.value && dialogVisible.value)
  153. const dialogError = computed(() => dialogCheck.value && !dialogVisible.value)
  154. const dialogCheck = ref(false)
  155. const dialogVisible = ref(false)
  156. const dialogCheckWait = ref(false)
  157. const pageQuery = ref({})
  158. const rules = {
  159. withdrawLogin: {
  160. rules: [
  161. {
  162. required: true,
  163. errorMessage: t('vaildate.select.empty')
  164. },
  165. ],
  166. },
  167. depositLogin: {
  168. rules: [
  169. {
  170. required: true,
  171. errorMessage: t('vaildate.select.empty')
  172. },
  173. ],
  174. },
  175. amount: {
  176. rules: [
  177. {
  178. required: true,
  179. errorMessage: t('vaildate.amount.format'),
  180. },
  181. {
  182. validateFunction: (rule, value, data, callback) => {
  183. console.log(rule, value, data, callback, 2121212);
  184. if (!value) {
  185. callback(t('vaildate.amount.format'))
  186. } else if (
  187. amountLimits.minAmount &&
  188. amountLimits.maxAmount &&
  189. (parseFloat(amountLimits.minAmount) > parseFloat(value) ||
  190. parseFloat(amountLimits.maxAmount) < parseFloat(value))
  191. ) {
  192. callback(t('vaildate.amount.amount') +
  193. amountLimits.minAmount +
  194. '-' +
  195. amountLimits.maxAmount)
  196. } else if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)) {
  197. callback(t('vaildate.amount.format'))
  198. }
  199. return true
  200. }
  201. },
  202. ],
  203. }
  204. }
  205. function validateAmount() {
  206. const amount = form.amount
  207. if (!amount) {
  208. amountErrorMessage.value = t('vaildate.amount.format')
  209. return false
  210. }
  211. const numValue = parseFloat(amount)
  212. if (isNaN(numValue)) {
  213. amountErrorMessage.value = t('vaildate.amount.format')
  214. return false
  215. }
  216. if (amountLimits.minAmount && numValue < parseFloat(amountLimits.minAmount)) {
  217. amountErrorMessage.value = t('vaildate.amount.amount') + amountLimits.minAmount + '-' + amountLimits.maxAmount
  218. return false
  219. }
  220. if (amountLimits.maxAmount && numValue > parseFloat(amountLimits.maxAmount)) {
  221. amountErrorMessage.value = t('vaildate.amount.amount') + amountLimits.minAmount + '-' + amountLimits.maxAmount
  222. return false
  223. }
  224. if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(amount)) {
  225. amountErrorMessage.value = t('vaildate.amount.format')
  226. return false
  227. }
  228. amountErrorMessage.value = ''
  229. return true
  230. }
  231. // 模板引用(对应原 this.$refs.form)
  232. const formRef = ref(null)
  233. // 计算属性
  234. const getInfoAgentTransfer = computed(() => {
  235. return customInfo.value?.agentTransfer
  236. })
  237. // 单位类型
  238. function groupCurrency(type) {
  239. const map = { GBP: ': £', USD: ': $', EUR: ': €', USC: ': ¢' }
  240. return map[type] || ': $'
  241. }
  242. // 单位类型
  243. function groupCurrency1(type) {
  244. const map = { GBP: '£', USD: '$', EUR: '€', USC: '¢' }
  245. return map[type] || '$'
  246. }
  247. // 账户类型
  248. function groupTypeName(type) {
  249. const typeMap = {
  250. '1': t('AccountType.ClassicAccount'),
  251. '2': t('AccountType.SeniorAccount'),
  252. '3': isAfterJuly28() ? '--' : t('AccountType.AgencyAccount'),
  253. '5': t('AccountType.SpeedAccount'),
  254. '6': t('AccountType.SpeedAccount'),
  255. '7': t('AccountType.StandardAccount'),
  256. '8': t('AccountType.CentAccount')
  257. }
  258. return typeMap[type] || ''
  259. }
  260. const closeDia = () => {
  261. formRef.value?.clearValidate()
  262. step2.value = false
  263. loginValue.value = null
  264. form.depositLogin = null
  265. form.withdrawLogin = null
  266. form.amount = ''
  267. transferType.value = 'internal'
  268. dialogCheck.value = false
  269. dialogVisible.value = false
  270. }
  271. const submitting = ref(false);
  272. const toTransfer = async () => {
  273. // 防止重复提交
  274. if (submitting.value) return;
  275. submitting.value = true;
  276. try {
  277. // 表单验证(验证失败会抛出异常)
  278. await formRef.value?.validate()
  279. // 检查活动参与情况(仅内部转账检查转出账户)[保留注释]
  280. if (transferType.value === 'internal') {
  281. // 活动检查代码已注释,保留原样
  282. }
  283. dialogCheckWait.value = true;
  284. let res;
  285. if (transferType.value === 'internal') {
  286. res = await financialApi.TransferApply({ ...form });
  287. } else if (transferType.value === 'agent') {
  288. res = await ibApi.agentTransCtaferApply({ ...form });
  289. } else if (transferType.value === 'system') {
  290. const selectedAccount = accountList.value.find(item => item.login === form.depositLogin);
  291. res = await financialApi.transferSystemApply({
  292. currency: form.currency,
  293. depositLogin: form.depositLogin,
  294. withdrawLogin: form.withdrawLogin,
  295. amount: form.amount,
  296. depositPlatform: selectedAccount?.platform || 'MT4',
  297. depositCurrency: selectedAccount?.currency || form.currency,
  298. depositType: selectedAccount?.type || 2,
  299. });
  300. }
  301. dialogCheckWait.value = false;
  302. if (res.code == Code.StatusOK) {
  303. dialogCheck.value = true;
  304. dialogVisible.value = true;
  305. } else {
  306. RES.value = res.msg;
  307. dialogCheck.value = true;
  308. dialogVisible.value = false;
  309. }
  310. } catch (error) {
  311. console.log(error, 12121);
  312. if (error instanceof Array) {
  313. uni.showToast({ title: error[0].errorMessage, icon: 'none' });
  314. return
  315. } else {
  316. console.log(232312);
  317. RES.value = error.msg;
  318. dialogCheck.value = true;
  319. dialogVisible.value = false;
  320. }
  321. } finally {
  322. submitting.value = false;
  323. flag.value = false;
  324. resetForm()
  325. if (dialogCheckWait.value) dialogCheckWait.value = false;
  326. }
  327. };
  328. const cancle = () => {
  329. step2.value = false
  330. loginValue.value = null
  331. transferType.value = 'internal'
  332. }
  333. // 转出账户列表
  334. const withdrawDisplayList = computed(() => {
  335. return loginOptions.value.map(item => ({
  336. text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
  337. value: item.login,
  338. disable: isWithdrawDisabled(item)
  339. }))
  340. })
  341. const transferTypeOptions = computed(() => [
  342. { value: 'internal', text: t('Home.page_customer.item5') },
  343. ...(getInfoAgentTransfer.value ? [{ value: 'agent', text: t('Home.page_ib.item9') }] : []),
  344. // ...(systemTransferType.value === 1 ? [{ value: 'system', text: t('Home.page_ib.item9') }] : []),
  345. ]);
  346. const currencyOptions = ref([{ value: 'USD', text: 'USD' }])
  347. // 转入账户列表
  348. const depositDisplayList = computed(() => {
  349. return toOptions.value.map(item => ({
  350. text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
  351. value: item.login,
  352. disable: isDepositDisabled(item)
  353. }))
  354. })
  355. // 转出账户是否禁用
  356. const isWithdrawDisabled = (item) => {
  357. const closeFunc = item.closeFunctions || []
  358. const transType = transferType.value // transferType 是 ref
  359. return (
  360. closeFunc.indexOf('5') !== -1 || // 包含'5'时禁用
  361. closeFunc.indexOf('6') !== -1 || // 包含'6'时禁用
  362. (transType === 'agent' && closeFunc.indexOf('3') !== -1) ||
  363. (transType === 'internal' && closeFunc.indexOf('7') !== -1) ||
  364. (transType === 'system' && closeFunc.indexOf('7') !== -1)
  365. )
  366. }
  367. // 转入账户是否禁用
  368. function isDepositDisabled(item) {
  369. const closeFunc = item.closeFunctions || []
  370. if (transferType.value === 'agent' && closeFunc.indexOf('3') !== -1) return true
  371. if (transferType.value === 'internal' && closeFunc.indexOf('7') !== -1) return true
  372. if (transferType.value === 'system' && closeFunc.indexOf('7') !== -1) return true
  373. return false
  374. }
  375. const getDateList = async () => {
  376. let res = await customApi.CustomDropdown({ platform: '' })
  377. if (res.code == Code.StatusOK) {
  378. loginOptions.value = res.data
  379. nextTick(() => {
  380. handleRouteParams()
  381. })
  382. } else {
  383. $pigeon?.MessageError(res.msg)
  384. }
  385. }
  386. // 获取代理列表
  387. const getAgentList = async () => {
  388. let res = await financialApi.getAgentList({})
  389. if (res.code == Code.StatusOK) {
  390. toOptions.value = res.data
  391. } else {
  392. $pigeon?.MessageError(res.msg)
  393. }
  394. }
  395. //获取内转数额区间
  396. const getAmount = async () => {
  397. let res = await financialApi.transferInfo({})
  398. if (res.code == Code.StatusOK) {
  399. Object.assign(amountLimits, res.data)
  400. } else {
  401. $pigeon?.MessageError(res.msg)
  402. }
  403. }
  404. // 获取跨系统转账下拉列表
  405. const getTransferSystemDropdown = async () => {
  406. let res = await financialApi.transferSystemDropdown({})
  407. if (res.code == Code.StatusOK && res.data) {
  408. systemTransferType.value = res.data.transferType ?? 0
  409. console.log(systemTransferType.value, 'systemTransferType')
  410. accountList.value = res.data.accountList || []
  411. }
  412. }
  413. // 生命周期
  414. onLoad((options) => {
  415. pageQuery.value = options
  416. })
  417. // 更新转出账户选项
  418. function updateToOptions() {
  419. toOptions.value = []
  420. if (transferType.value === 'internal') {
  421. loginOptions.value.forEach(item => {
  422. if (form.withdrawLogin != null || item.login != form.withdrawLogin) {
  423. toOptions.value.push(item)
  424. }
  425. })
  426. } else if (transferType.value === 'agent') {
  427. getAgentList()
  428. } else if (transferType.value === 'system') {
  429. toOptions.value = accountList.value.filter(item => form.withdrawLogin != null || item.login != form.withdrawLogin)
  430. }
  431. }
  432. // 处理路由参数
  433. function handleRouteParams() {
  434. nextTick(() => {
  435. const loginNum = Number(pageQuery.value.login)
  436. form.withdrawLogin = loginNum
  437. step2.value = true
  438. loginValue.value = loginNum
  439. console.log(loginValue.value, form.withdrawLogin, withdrawDisplayList.value);
  440. })
  441. updateToOptions()
  442. }
  443. onMounted(() => {
  444. getDateList()
  445. getAmount()
  446. getTransferSystemDropdown()
  447. })
  448. const resetForm = async () => {
  449. await nextTick();
  450. formRef.value?.clearValidate();
  451. form.customBankCode = ""
  452. form.depositLogin = null
  453. // form.withdrawLogin = null
  454. form.amount = ""
  455. amountErrorMessage.value = ""
  456. submitting.value = false;
  457. flag.value = false;
  458. // loginValue.value = null
  459. }
  460. // 侦听器
  461. watch(loginValue, (newVal) => {
  462. if (newVal != null) {
  463. step2.value = true
  464. form.withdrawLogin = Number(newVal)
  465. form.depositLogin = null
  466. form.amount = ''
  467. amountErrorMessage.value = ''
  468. toOptions.value = []
  469. if (transferType.value === 'internal') {
  470. // 内部转账逻辑
  471. loginOptions.value.forEach((item) => {
  472. if (item.login != newVal) {
  473. toOptions.value.push(item)
  474. }
  475. })
  476. } else if (transferType.value === 'agent') {
  477. // 代理内转逻辑
  478. getAgentList()
  479. } else if (transferType.value === 'system') {
  480. // 跨系统内转,排除当前选择的转出账户
  481. toOptions.value = accountList.value.filter(
  482. (item) => item.login != form.withdrawLogin
  483. )
  484. }
  485. }
  486. })
  487. watch(transferType, (newVal) => {
  488. if (form.depositLogin) {
  489. form.depositLogin = null
  490. }
  491. if (loginValue.value && step2.value) {
  492. toOptions.value = []
  493. if (newVal === 'internal') {
  494. // 内部转账逻辑
  495. loginOptions.value.forEach((item) => {
  496. if (item.login != loginValue.value) {
  497. toOptions.value.push(item)
  498. }
  499. })
  500. } else if (newVal === 'agent') {
  501. // 代理内转逻辑
  502. getAgentList()
  503. } else if (newVal === 'system') {
  504. // 跨系统内转,排除当前选择的转出账户
  505. toOptions.value = accountList.value.filter(
  506. (item) => item.login != form.withdrawLogin
  507. )
  508. }
  509. }
  510. })
  511. </script>
  512. <style lang="scss" scoped>
  513. @import "@/uni.scss";
  514. .transfer-page {
  515. width: 100%;
  516. padding-bottom: px2rpx(20);
  517. .main-content {
  518. text-align: left;
  519. .box {
  520. padding-top: px2rpx(5);
  521. color: #303133;
  522. .b-card {
  523. background-color: #fff;
  524. margin-bottom: px2rpx(10);
  525. border-radius: px2rpx(6);
  526. box-shadow: 0 px2rpx(1) px2rpx(6) 0 rgba(0, 0, 0, 0.05);
  527. &:hover {
  528. box-shadow: 0 px2rpx(2) px2rpx(8) 0 rgba(0, 0, 0, 0.1);
  529. }
  530. .card-top {
  531. padding: px2rpx(15) px2rpx(20);
  532. .card-row {
  533. margin-bottom: px2rpx(12);
  534. &:last-child {
  535. margin-bottom: 0;
  536. }
  537. }
  538. .tit {
  539. font-size: px2rpx(16);
  540. margin-bottom: px2rpx(12);
  541. font-weight: 600;
  542. .iconfont {
  543. font-size: px2rpx(18);
  544. margin-right: px2rpx(8);
  545. color: #409eff;
  546. }
  547. }
  548. .title-wrapper {
  549. display: flex;
  550. justify-content: space-between;
  551. align-items: center;
  552. }
  553. }
  554. }
  555. }
  556. .box-step2 {
  557. .form-row {
  558. display: flex;
  559. flex-wrap: wrap;
  560. margin: 0 px2rpx(-5);
  561. margin-bottom: px2rpx(12);
  562. gap: px2rpx(12);
  563. &:last-child {
  564. margin-bottom: 0;
  565. }
  566. .form-col {
  567. flex: 1;
  568. min-width: px2rpx(140);
  569. @media screen and (max-width: 991px) {
  570. flex: 0 0 100%;
  571. width: 100%;
  572. }
  573. }
  574. .form-col-full {
  575. width: 100%;
  576. padding: 0 px2rpx(5);
  577. }
  578. }
  579. .tips {
  580. line-height: 1.8;
  581. font-size: px2rpx(12);
  582. color: #909399;
  583. background-color: #f9f9f9;
  584. padding: px2rpx(12);
  585. border-radius: px2rpx(4);
  586. border-left: px2rpx(2) solid #409eff;
  587. .title {
  588. font-weight: 600;
  589. margin-bottom: px2rpx(6);
  590. color: #606266;
  591. }
  592. }
  593. }
  594. }
  595. .picker-select {
  596. background-color: #f5f7fa;
  597. border: 1px solid #dcdfe6;
  598. border-radius: px2rpx(4);
  599. padding: px2rpx(12) px2rpx(14);
  600. font-size: px2rpx(14);
  601. color: #606266;
  602. line-height: 1.4;
  603. width: 100%;
  604. box-sizing: border-box;
  605. &:hover {
  606. border-color: #409eff;
  607. }
  608. &.picker-disabled {
  609. background-color: #f5f7fa;
  610. color: #c0c4cc;
  611. cursor: not-allowed;
  612. }
  613. }
  614. .disabled-input {
  615. background-color: #f5f7fa;
  616. border: 1px solid #dcdfe6;
  617. border-radius: px2rpx(4);
  618. padding: px2rpx(12) px2rpx(14);
  619. font-size: px2rpx(14);
  620. color: #606266;
  621. width: 100%;
  622. box-sizing: border-box;
  623. }
  624. .m-input {
  625. background-color: #f5f7fa;
  626. border: 1px solid #dcdfe6;
  627. border-radius: px2rpx(4);
  628. padding: px2rpx(12) px2rpx(14);
  629. font-size: px2rpx(14);
  630. width: 100%;
  631. box-sizing: border-box;
  632. &:focus {
  633. border-color: #409eff;
  634. outline: none;
  635. box-shadow: 0 0 0 px2rpx(1) rgba(64, 158, 255, 0.2);
  636. }
  637. }
  638. .popup-content {
  639. padding: px2rpx(30) px2rpx(20);
  640. text-align: center;
  641. min-width: px2rpx(250);
  642. max-width: 80%;
  643. margin: 0 auto;
  644. @media screen and (max-width: 991px) {
  645. min-width: 80%;
  646. max-width: 90%;
  647. margin: 0 px2rpx(10);
  648. }
  649. position: relative;
  650. .icon {
  651. .iconfont {
  652. font-size: px2rpx(60);
  653. display: block;
  654. margin: 0 auto;
  655. }
  656. .icon-chenggong {
  657. color: #67c23a;
  658. }
  659. .icon-jingshi {
  660. color: #f56c6c;
  661. }
  662. .icon-dengdai {
  663. color: #e6a23c;
  664. }
  665. }
  666. .des1 {
  667. font-weight: 600;
  668. font-size: px2rpx(16);
  669. margin: px2rpx(20) 0 px2rpx(15);
  670. color: #303133;
  671. line-height: 1.4;
  672. padding: 0 px2rpx(10);
  673. }
  674. .dialog-footer {
  675. display: flex;
  676. justify-content: center;
  677. gap: px2rpx(10);
  678. margin-top: px2rpx(10);
  679. @media (max-width: 750rpx) {
  680. flex-direction: column;
  681. align-items: center;
  682. gap: px2rpx(6);
  683. }
  684. button {
  685. min-width: px2rpx(90);
  686. padding: 0 px2rpx(12);
  687. border-radius: px2rpx(4);
  688. font-size: px2rpx(14);
  689. transition: all 0.3s ease;
  690. cursor: pointer;
  691. &[type="primary"] {
  692. background-color: #409eff;
  693. color: #fff;
  694. border: none;
  695. &:hover {
  696. background-color: #66b1ff;
  697. transform: translateY(px2rpx(-1));
  698. box-shadow: 0 px2rpx(2) px2rpx(6) 0 rgba(64, 158, 255, 0.3);
  699. }
  700. &:active {
  701. background-color: #3a8ee6;
  702. transform: translateY(0);
  703. }
  704. }
  705. &:not([type="primary"]) {
  706. background-color: #fff;
  707. border: 1px solid #dcdfe6;
  708. color: #606266;
  709. &:hover {
  710. border-color: #409eff;
  711. color: #409eff;
  712. transform: translateY(px2rpx(-1));
  713. }
  714. &:active {
  715. transform: translateY(0);
  716. }
  717. }
  718. }
  719. }
  720. }
  721. .wait-popup {
  722. .des1 {
  723. margin-top: px2rpx(10);
  724. }
  725. .icon {
  726. .iconfont {
  727. animation: spin 1s linear infinite;
  728. }
  729. }
  730. }
  731. }
  732. // 动画
  733. @keyframes popupFadeIn {
  734. from {
  735. opacity: 0;
  736. transform: scale(0.9);
  737. }
  738. to {
  739. opacity: 1;
  740. transform: scale(1);
  741. }
  742. }
  743. @keyframes fadeIn {
  744. from {
  745. opacity: 0;
  746. transform: translateY(px2rpx(10));
  747. }
  748. to {
  749. opacity: 1;
  750. transform: translateY(0);
  751. }
  752. }
  753. @keyframes pulse {
  754. 0% {
  755. transform: scale(1);
  756. }
  757. 50% {
  758. transform: scale(1.05);
  759. }
  760. 100% {
  761. transform: scale(1);
  762. }
  763. }
  764. @keyframes spin {
  765. from {
  766. transform: rotate(0deg);
  767. }
  768. to {
  769. transform: rotate(360deg);
  770. }
  771. }
  772. // 表单错误信息样式
  773. .uni-forms-item__error {
  774. font-size: px2rpx(12);
  775. color: #f56c6c;
  776. margin-top: px2rpx(4);
  777. }
  778. // 适配不同屏幕尺寸(媒体查询中的 750rpx 保持不变)
  779. @media (max-width: 750rpx) {
  780. .transfer-page {
  781. .main-content {
  782. padding: px2rpx(8);
  783. .box {
  784. .b-card {
  785. .card-top {
  786. padding: px2rpx(12) px2rpx(16);
  787. .tit {
  788. font-size: px2rpx(14);
  789. .iconfont {
  790. font-size: px2rpx(16);
  791. }
  792. }
  793. }
  794. }
  795. }
  796. }
  797. .s-btn {
  798. font-size: px2rpx(14);
  799. padding: px2rpx(10) px2rpx(16);
  800. }
  801. .popup-content {
  802. padding: px2rpx(20) px2rpx(16);
  803. .icon {
  804. .iconfont {
  805. font-size: px2rpx(50);
  806. }
  807. }
  808. .des1 {
  809. font-size: px2rpx(14);
  810. margin: px2rpx(15) 0 px2rpx(10);
  811. }
  812. .dialog-footer {
  813. button {
  814. min-width: px2rpx(80);
  815. font-size: px2rpx(13);
  816. }
  817. }
  818. }
  819. }
  820. }
  821. </style>