bank-account.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!-- 绑定支付宝帐号 alipayAccount -->
  2. <template>
  3. <view>
  4. <!-- 标题栏 -->
  5. <view class="head-box ss-m-b-60">
  6. <view class="head-title ss-m-b-20">
  7. {{ userInfo.bankName && userInfo.accountName && userInfo.bankAccount ? t('account.change_bank_card') : t('account.bind_bank_card') }}
  8. </view>
  9. <!-- <view class="head-subtitle">请绑定已实名认证的支付宝开户行</view> -->
  10. </view>
  11. <!-- 表单项 -->
  12. <uni-forms ref="alipayAccountRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
  13. labelWidth="160" labelAlign="left" class="loginUniForm" >
  14. <uni-forms-item :label="t('account.bank_branch')" class="loginUniFormItem">
  15. <uni-easyinput :placeholder="t('account.bank_branch_example')" v-model="state.model.bankName" :inputBorder="false">
  16. </uni-easyinput>
  17. </uni-forms-item>
  18. <uni-forms-item :label="t('account.account_holder')" class="loginUniFormItem">
  19. <uni-easyinput :placeholder="t('account.account_holder_name')" v-model="state.model.accountName" :inputBorder="false">
  20. </uni-easyinput>
  21. </uni-forms-item>
  22. <uni-forms-item :label="t('account.bank_account_number')" name="bankCode" class="loginUniFormItem">
  23. <uni-easyinput :placeholder="t('account.bank_account_number')" v-model="state.model.bankAccount" :inputBorder="false">
  24. </uni-easyinput>
  25. </uni-forms-item>
  26. </uni-forms>
  27. <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
  28. <!-- <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
  29. 忘记密码
  30. </button> -->
  31. <button class="ss-reset-button login-btn-start" @tap="submit">{{ t('common.confirm') }}</button>
  32. </view>
  33. </view>
  34. </template>
  35. <script setup>
  36. import {
  37. ref,
  38. reactive,
  39. unref,
  40. computed
  41. } from 'vue';
  42. import sheep from '@/sheep';
  43. import {
  44. bankCode
  45. } from '@/sheep/validate/form';
  46. import {
  47. showAuthModal,
  48. closeAuthModal
  49. } from '@/sheep/hooks/useModal';
  50. import AuthUtil from '@/sheep/api/member/auth';
  51. import UserApi from '@/sheep/api/member/user';
  52. import {
  53. onLoad
  54. } from '@dcloudio/uni-app';
  55. import { t } from '@/locale'
  56. const userInfo = computed(() => sheep.$store('user').userInfo);
  57. const alipayAccountRef = ref(null);
  58. const emits = defineEmits(['onConfirm']);
  59. const props = defineProps({
  60. agreeStatus: {
  61. type: Boolean,
  62. default: false,
  63. },
  64. });
  65. // 数据
  66. const state = reactive({
  67. model: {
  68. accountName: '', // 开户名
  69. bankName: '', // 开户行
  70. bankAccount:'',//银行账号
  71. },
  72. rules:{
  73. bankCode
  74. }
  75. });
  76. // 开户行登录
  77. async function submit() {
  78. // 表单验证
  79. if(!state.model.accountName || !state.model.bankName || !state.model.bankAccount){
  80. return false;
  81. }
  82. const validate = await unref(alipayAccountRef)
  83. .validate()
  84. .catch((error) => {
  85. console.log('error: ', error);
  86. });
  87. if (!validate) return;
  88. // 同意协议
  89. // if (!props.agreeStatus) {
  90. // emits('onConfirm', true)
  91. // sheep.$helper.toast('请勾选同意');
  92. // return;
  93. // }
  94. // 提交数据
  95. const {
  96. code
  97. } = await UserApi.updateUserBankAccount({
  98. accountName: state.model.accountName,
  99. bankName: state.model.bankName,
  100. bankAccount: state.model.bankAccount,
  101. });
  102. // const {
  103. // code,
  104. // data
  105. // } = await AuthUtil.login(state.model);
  106. if (code === 0) {
  107. uni.showToast({
  108. icon: 'success',
  109. title: t('account.change_password'),
  110. });
  111. closeAuthModal();
  112. uni.$emit('bankAccountChangeComplete');
  113. }
  114. }
  115. onLoad(async (options) => {
  116. // getUserInfo();
  117. state.model.accountName = userInfo.value.accountName;
  118. state.model.bankName = userInfo.value.bankName;
  119. state.model.bankAccount = userInfo.value.bankAccount;
  120. });
  121. </script>
  122. <style lang="scss" scoped>
  123. @import '../index.scss';
  124. .login-btn-start {
  125. background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  126. width: 100%;
  127. height: 80rpx;
  128. font-size: 32rpx;
  129. }
  130. .loginUniForm {
  131. border: 1rpx solid #d6d6d6;
  132. padding: 10rpx 15rpx;
  133. border-radius: 10rpx;
  134. }
  135. .loginUniFormItem {
  136. border-bottom: 1rpx solid #d6d6d6;
  137. padding-bottom: 10rpx;
  138. }
  139. .loginUniFormItem:last-child {
  140. border-bottom: none;
  141. padding-top: 10rpx;
  142. }
  143. ::v-deep .loginUniFormItem .uni-forms-item__inner {
  144. padding-bottom: 0;
  145. }
  146. ::v-deep .loginUniFormItem .uni-error-message {
  147. bottom: -20rpx;
  148. }
  149. </style>