transfer.vue 29 KB

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