feat: 支付宝充值

wupengfei

6 小时以前 b52bec54f02f5b894d5dde30f8f05b76c71771ba

feat: 支付宝充值

 src/hooks/useUser.ts

@@ -5,10 +5,11 @@
export function useUser() {
  const userStore = useUserStore();

  const { userId, userInfo } = storeToRefs(userStore);
  const { userId, userInfo, userDetail } = storeToRefs(userStore);

  return {
    user: userInfo,
    userId: userId,
    userDetail: userDetail,
  };
}

 src/store/modules/user.ts

@@ -8,6 +8,9 @@
  setUserInfo,
  getUserInfo,
  md5Encrypt,
  getUserDetail,
  setUserDetail,
  removeUserDetail,
} from '@/utils';
import { resetRouter, router } from '@/router';
import { useTagsViewStoreHook } from './tagsView';
@@ -20,15 +23,18 @@
export interface UserState {
  token: string;
  userInfo: API.LoginCommandCallback;
  userDetail?: Nullable<API.GetEnterpriseLoginInfoQueryResult>;
}

function getDefaultState() {
  const accessToken = getToken();
  const userInfo = getUserInfo();
  const userDetail = getUserDetail();

  return {
    token: accessToken,
    userInfo: userInfo || {},
    userDetail: userDetail,
  } as UserState;
}

@@ -57,6 +63,11 @@
      setUserInfo(userInfo);
    },

    setUserDetail(detail: API.GetEnterpriseLoginInfoQueryResult) {
      this.userDetail = detail;
      setUserDetail(detail);
    },

    // 用户登入
    async loginByUsername(params: API.PasswordLoginCommand) {
      let res = await authServices.passwordLogin(
@@ -74,7 +85,21 @@
      if (res) {
        this.setToken(res.accessToken);
        this.setUserInfo(res);
        this.getCurrentUserInfo();
      }
    },

    async getCurrentUserInfo() {
      try {
        let res = await authServices.getEnterpriseLoginInfo({}, { showLoading: false });
        if (res) {
          // res.frontStatus = getUserCertificationFrontStatusAdapter(
          //   res.userCertificationStatus,
          //   res.userCertificationAuditStatus
          // );
          this.setUserDetail(res);
        }
      } catch (error) {}
    },

    // 登出 清空缓存
@@ -82,6 +107,7 @@
      return new Promise(async (resolve) => {
        removeToken();
        removeUserInfo();
        removeUserDetail();
        this.resetState();
        resetRouter();
        myClient.removeQueries();

 src/utils/storage/auth.ts

@@ -4,6 +4,7 @@
  TOKEN_KEY: 'TOKEN__',
  REFRESH_TOKEN_KEY: 'REFRESH__TOKEN__',
  USER_INFO_KEY: 'USER__INFO__',
  USER_DETAIL_KEY: 'USER_DETAIL_KEY',
};

export function getToken() {
@@ -41,3 +42,15 @@
export function removeUserInfo() {
  return storageLocal.removeItem(StorageKey.USER_INFO_KEY);
}

export function getUserDetail() {
  return storageLocal.getItem<API.GetEnterpriseLoginInfoQueryResult>(StorageKey.USER_DETAIL_KEY);
}

export function setUserDetail(userDetail: API.GetEnterpriseLoginInfoQueryResult) {
  return storageLocal.setItem(StorageKey.USER_DETAIL_KEY, userDetail);
}

export function removeUserDetail() {
  return storageLocal.removeItem(StorageKey.USER_DETAIL_KEY);
}

 src/views/ServiceChargeManage/ServiceChargeManage.vue

@@ -89,6 +89,8 @@
    </AppContainer>
    <UploadStatementDialog v-bind="dialogProps" />
    <SettleDetailDialog v-bind="dialogSettleProps" />
    <RechargeEnterpriseWalletDialog v-bind="dialogRechargeProps" />
    <AlipayWalletRecharge v-bind="dialogAlipayWalletProps" />
  </LoadingLayout>
</template>

@@ -117,9 +119,12 @@
} from '@/constants';
import { downloadFileByUrl, setOssFileName } from '@/utils';
import * as taskServices from '@/services/api/task';
import * as enterpriseWalletServices from '@/services/api/enterpriseWallet';
import { ModelValueType } from 'element-plus';
import UploadStatementDialog from './components/UploadStatementDialog.vue';
import SettleDetailDialog from './components/SettleDetailDialog.vue';
import RechargeEnterpriseWalletDialog from './components/RechargeEnterpriseWalletDialog.vue';
import AlipayWalletRecharge from './components/AlipayWalletRecharge.vue';
import { Message } from '@bole-core/core';

defineOptions({
@@ -207,6 +212,8 @@
]);

const router = useRouter();

const { userDetail } = useUser();

const eventContext = useGlobalEventContext();

@@ -311,11 +318,52 @@
    let params: API.SureTaskSettlementCommand = {
      taskInfoId: settleEditForm.id,
    };
    let res = await taskServices.sureTaskSettlement(params);
    let res = await taskServices.sureTaskSettlement(params, {
      skipErrorHandler: true,
    });
    if (res) {
      Message.successMessage('操作成功');
      getList(paginationState.pageIndex);
    }
  } catch (error) {
    if (error?.info?.errorCode == 's510') {
      handleRechargeAdd();
    }
  }
}

const {
  dialogProps: dialogRechargeProps,
  handleAdd: handleRechargeAdd,
  editForm: rechargeEditForm,
} = useFormDialog({
  onConfirm: rechargeEnterpriseWallet,
  defaultFormParams: {
    amount: null as number,
    remark: '',
  },
});

const { dialogProps: dialogAlipayWalletProps, handleAdd: handleAlipayWalletAdd } = useFormDialog({
  onConfirm: rechargeEnterpriseWallet,
  defaultFormParams: {
    alipayUrl: '',
  },
});

async function rechargeEnterpriseWallet() {
  try {
    let params: API.RechargeEnterpriseWalletCommand = {
      access: EnumEnterpriseWalletAccess.Alipay,
      amount: rechargeEditForm.amount,
      remark: rechargeEditForm.remark,
    };
    let res = await enterpriseWalletServices.rechargeEnterpriseWallet(params);
    if (res) {
      handleAlipayWalletAdd({
        alipayUrl: res.payUrl,
      });
    }
  } catch (error) {}
}


 src/views/ServiceChargeManage/components/AlipayWalletRecharge.vue

New file
@@ -0,0 +1,24 @@
<template>
  <ProDialog title="支付宝充值" v-model="visible" destroy-on-close draggable>
    <iframe v-if="form.alipayUrl" width="100%" height="600px" :src="form.alipayUrl"></iframe>
  </ProDialog>
</template>

<script setup lang="ts">
import { ProDialog } from '@bole-core/components';

defineOptions({
  name: 'AlipayWalletRecharge',
});

type Form = {
  alipayUrl: string;
};

const form = defineModel<Form>('form');
const visible = defineModel({ type: Boolean });
</script>

<style lang="scss" scoped>
@use '@/style/common.scss' as *;
</style>

 src/views/ServiceChargeManage/components/RechargeEnterpriseWalletDialog.vue

New file
@@ -0,0 +1,109 @@
<template>
  <ProDialog
    title="钱包充值"
    v-model="visible"
    @close="onDialogClose"
    destroy-on-close
    draggable
    :width="700"
  >
    <ProForm :model="form" ref="dialogForm" label-width="120px">
      <ProFormItemV2
        label="充值金额："
        prop="amount"
        :check-rules="[{ message: '请输入充值金额' }]"
      >
        <ProFormInputNumber
          placeholder="请输入充值金额"
          v-model.trim="form.amount"
          :controls="false"
          :min="0"
        ></ProFormInputNumber>
      </ProFormItemV2>
      <ProFormItemV2 label="备注" prop="remark">
        <ProFormTextArea placeholder="请输入备注" v-model="form.remark"></ProFormTextArea>
      </ProFormItemV2>
    </ProForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('onCancel')">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </ProDialog>
  <!-- <AlipayWalletRecharge v-bind="dialogAlipayWalletProps" /> -->
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus';
import {
  ProDialog,
  ProForm,
  ProFormInputNumber,
  ProFormItemV2,
  ProFormTextArea,
  useFormDialog,
} from '@bole-core/components';
import * as enterpriseWalletServices from '@/services/api/enterpriseWallet';
import AlipayWalletRecharge from './AlipayWalletRecharge.vue';

defineOptions({
  name: 'RechargeEnterpriseWalletDialog',
});

type Form = {
  title?: string;
  amount: number;
  remark: string;
};

const visible = defineModel({ type: Boolean });

const form = defineModel<Form>('form');

const emit = defineEmits<{
  (e: 'onConfirm'): void;
  (e: 'onCancel'): void;
}>();

const dialogForm = ref<FormInstance>();

// const { dialogProps: dialogAlipayWalletProps, handleAdd: handleAlipayWalletAdd } = useFormDialog({
//   onConfirm: rechargeEnterpriseWallet,
//   defaultFormParams: {
//     alipayUrl: '',
//   },
// });

// async function rechargeEnterpriseWallet() {
//   try {
//     let params: API.RechargeEnterpriseWalletCommand = {
//       access: EnumEnterpriseWalletAccess.Alipay,
//       amount: form.value.amount,
//       remark: form.value.remark,
//     };
//     let res = await enterpriseWalletServices.rechargeEnterpriseWallet(params);
//     if (res) {
//       handleAlipayWalletAdd({
//         alipayUrl: res.payUrl,
//       });
//     }
//   } catch (error) {}
// }

function onDialogClose() {
  if (!dialogForm.value) return;
  dialogForm.value.resetFields();
}

function handleConfirm() {
  if (!dialogForm.value) return;
  dialogForm.value.validate((valid) => {
    if (valid) {
      emit('onConfirm');
    } else {
      return;
    }
  });
}
</script>