feat: 钱包

wupengfei

2 天以前 84609d384c2f0abfcfcb23cbfe1be5922425842a

feat: 钱包

 apps/bMiniApp/src/app.config.ts

@@ -117,9 +117,12 @@
        'flexJobManage/flexJobManage',
        'flexJobDetailFromManage/flexJobDetailFromManage',
        'flexJobSign/flexJobSign',
        'flexJobManageExtraPage/flexJobManageExtraPage',
      ],
    },
    {
      root: 'subpackages/extraPage',
      pages: ['extraPage/extraPage'],
    },
  ],
  // preloadRule: {
  //   'pages/mine/index': {

 apps/bMiniApp/src/constants/router.ts

@@ -17,7 +17,6 @@
  flexJobManage = '/subpackages/flexJobManage/flexJobManage/flexJobManage',
  flexJobDetailFromManage = '/subpackages/flexJobManage/flexJobDetailFromManage/flexJobDetailFromManage',
  flexJobSign = '/subpackages/flexJobManage/flexJobSign/flexJobSign',
  flexJobManageExtraPage = '/subpackages/flexJobManage/flexJobManageExtraPage/flexJobManageExtraPage',

  // userInfo = '/subpackages/setting/userInfo/userInfo',
  // setting = '/subpackages/setting/setting/setting',
@@ -51,4 +50,6 @@

  jobApplicationManage = '/subpackages/jobApplicationManage/jobApplicationManage/jobApplicationManage',
  jobApplicationDetail = '/subpackages/jobApplicationManage/jobApplicationDetail/jobApplicationDetail',

  extraPage = '/subpackages/extraPage/extraPage/extraPage',
}

 apps/bMiniApp/src/subpackages/extraPage/extraPage/extraPage.config.ts

copy from apps/cMiniApp/src/subpackages/authentication/extraPage/extraPage.config.ts
copy to apps/bMiniApp/src/subpackages/extraPage/extraPage/extraPage.config.ts

 apps/bMiniApp/src/subpackages/extraPage/extraPage/extraPage.vue

copy from apps/cMiniApp/src/subpackages/authentication/extraPage/extraPage.vue
copy to apps/bMiniApp/src/subpackages/extraPage/extraPage/extraPage.vue

 apps/bMiniApp/src/subpackages/flexJobManage/flexJobManage/InnerPage.vue

@@ -72,7 +72,7 @@
} from '@12333/constants';
import * as enterpriseEmployeeServices from '@12333/services/apiV2/enterpriseEmployee';
import Taro from '@tarojs/taro';
import { Message, setOSSLink } from '@12333/utils';
import { Message, openDocument, setOSSLink } from '@12333/utils';

defineOptions({
  name: 'InnerPage',
@@ -104,10 +104,11 @@
);

function checkContract(item: API.GetEnterpriseEmployeesQueryResultItem) {
  const encodedUrl = encodeURIComponent(setOSSLink(item.contractUrl));
  Taro.navigateTo({
    url: `${RouterPath.flexJobManageExtraPage}?url=${encodedUrl}`,
  });
  if (!item.contractUrl) {
    Message.warning('协议无法查看，请稍后再试');
    return;
  }
  openDocument(setOSSLink(item.contractUrl));
}

function goDetail(item: API.GetEnterpriseEmployeesQueryResultItem) {

 apps/bMiniApp/src/subpackages/flexJobManage/flexJobManageExtraPage/flexJobManageExtraPage.config.ts

File was deleted

 apps/bMiniApp/src/subpackages/flexJobManage/flexJobManageExtraPage/flexJobManageExtraPage.vue

File was deleted

 apps/cMiniApp/src/app.config.ts

@@ -66,7 +66,6 @@
        'authenticationResult/authenticationResult',
        'authenticationRealName/authenticationRealName',
        'authenticationFace/authenticationFace',
        'extraPage/extraPage',
      ],
    },
    {
@@ -82,7 +81,6 @@
        'mineCollectTask/mineCollectTask',
        'mineAgreementSign/mineAgreementSign',
        'mineAgreementSignDetail/mineAgreementSignDetail',
        'mineAgreementSignExtraPage/mineAgreementSignExtraPage',
        'setting/setting',
      ],
    },
@@ -94,6 +92,9 @@
        'unboundBankCard/unboundBankCard',
        'incomeDetail/incomeDetail',
        'incomeDetailInfo/incomeDetailInfo',
        'withdraw/withdraw',
        'withdrawResult/withdrawResult',
        'withdrawDetailInfo/withdrawDetailInfo',
      ],
    },
    {
@@ -122,6 +123,10 @@
      root: 'subpackages/user',
      pages: ['complaint/complaint'],
    },
    {
      root: 'subpackages/extraPage',
      pages: ['extraPage/extraPage'],
    },
  ],
  // preloadRule: {
  //   'pages/mine/index': {

 apps/cMiniApp/src/assets/wallet/icon-wallet-alipay.png

 apps/cMiniApp/src/assets/wallet/icon-wallet-bank.png

 apps/cMiniApp/src/assets/wallet/icon-wallet-step-wait.png

 apps/cMiniApp/src/assets/wallet/icon-wallet-wechat.png

 apps/cMiniApp/src/constants/router.ts

@@ -29,7 +29,6 @@
  authenticationJBR = '/subpackages/authentication/authenticationJBR/authenticationJBR',
  authenticationRealName = '/subpackages/authentication/authenticationRealName/authenticationRealName',
  authenticationFace = '/subpackages/authentication/authenticationFace/authenticationFace',
  extraPage = '/subpackages/authentication/extraPage/extraPage',
  citySelect = '/subpackages/city/citySelect/citySelect',

  mineSign = '/subpackages/mine/mineSign/mineSign',
@@ -38,7 +37,6 @@
  mineCollectTask = '/subpackages/mine/mineCollectTask/mineCollectTask',
  mineAgreementSign = '/subpackages/mine/mineAgreementSign/mineAgreementSign',
  mineAgreementSignDetail = '/subpackages/mine/mineAgreementSignDetail/mineAgreementSignDetail',
  mineAgreementSignExtraPage = '/subpackages/mine/mineAgreementSignExtraPage/mineAgreementSignExtraPage',
  setting = '/subpackages/mine/setting/setting',

  mineWallet = '/subpackages/wallet/mineWallet/mineWallet',
@@ -46,6 +44,9 @@
  bindBankCard = '/subpackages/wallet/bindBankCard/bindBankCard',
  incomeDetail = '/subpackages/wallet/incomeDetail/incomeDetail',
  incomeDetailInfo = '/subpackages/wallet/incomeDetailInfo/incomeDetailInfo',
  withdraw = '/subpackages/wallet/withdraw/withdraw',
  withdrawResult = '/subpackages/wallet/withdrawResult/withdrawResult',
  withdrawDetailInfo = '/subpackages/wallet/withdrawDetailInfo/withdrawDetailInfo',

  mineCurriculumVitae = '/subpackages/curriculum/mineCurriculumVitae/mineCurriculumVitae',
  editMineInfo = '/subpackages/curriculum/editMineInfo/editMineInfo',
@@ -55,4 +56,6 @@
  mineCertificateAddOrEdit = '/subpackages/curriculum/mineCertificateAddOrEdit/mineCertificateAddOrEdit',
  mineDetailedInfo = '/subpackages/curriculum/mineDetailedInfo/mineDetailedInfo',
  expectPosition = '/subpackages/curriculum/expectPosition/expectPosition',

  extraPage = '/subpackages/extraPage/extraPage/extraPage',
}

 apps/cMiniApp/src/subpackages/extraPage/extraPage/extraPage.config.ts

 apps/cMiniApp/src/subpackages/extraPage/extraPage/extraPage.vue

 apps/cMiniApp/src/subpackages/mine/mineAgreementSignDetail/InnerPage.vue

@@ -137,7 +137,7 @@
    let res = await enterpriseEmployeeServices.personalUserElectronSign(params);
    if (res) {
      const encodedUrl = encodeURIComponent(res.signContractLongUrl);
      Taro.navigateTo({ url: `${RouterPath.mineAgreementSignExtraPage}?url=${encodedUrl}` });
      Taro.navigateTo({ url: `${RouterPath.extraPage}?url=${encodedUrl}` });
    }
    // }
    // if (detail.value?.contractTemplateAccess === EnumElectronSignAccess.AlipaySign) {

 apps/cMiniApp/src/subpackages/mine/mineAgreementSignExtraPage/mineAgreementSignExtraPage.config.ts

File was deleted

 apps/cMiniApp/src/subpackages/mine/mineAgreementSignExtraPage/mineAgreementSignExtraPage.vue

File was deleted

 apps/cMiniApp/src/subpackages/wallet/incomeDetail/InnerPage.vue

@@ -1,10 +1,23 @@
<template>
  <ProTabs
    v-model="queryState.status"
    name="home-tab"
    :showPaneContent="false"
    class="home-tabs"
    isTransparent
    title-gutter="12"
    title-scroll
  >
    <ProTabPane :title="`全部`" :pane-key="0"></ProTabPane>
    <ProTabPane :title="`收入`" :pane-key="1"></ProTabPane>
    <ProTabPane :title="`提现`" :pane-key="2"></ProTabPane>
  </ProTabs>
  <List>
    <IncomeDetailListItem :item="'收入:￥600.00'">
    <IncomeDetailListItem :item="`收入：￥${toThousand(100)} 提现：￥${toThousand(200)}`">
      <template #title>
        <div class="income-detail-time-picker">
          <ChooseInputWithDatePicker
            v-model="form.month"
            v-model="queryState.month"
            type="year-month"
            format="YYYY年M月"
            :max-date="nowDate"
@@ -13,22 +26,41 @@
        </div>
      </template>
    </IncomeDetailListItem>
  </List>
  <InfiniteLoading
    scrollViewClassName="common-infinite-scroll-list home-list"
    v-bind="infiniteLoadingProps"
    :key="queryState.status"
  >
    <template #renderItem="{ item }">
    <IncomeDetailListItem
      :title="'收入-宁波人力无忧'"
        :funds="'+300.00'"
      :item="'2024.12.20 13:30:30'"
      :value="'+300.00'"
        :value="'钱包余额：300.00'"
      @click="goIncomeDetailInfo()"
    >
    </IncomeDetailListItem>
  </List>
    </template>
  </InfiniteLoading>
</template>

<script setup lang="ts">
import { List, IncomeDetailListItem, ChooseInputWithDatePicker } from '@12333/components';
import {
  List,
  IncomeDetailListItem,
  ChooseInputWithDatePicker,
  ProTabs,
  ProTabPane,
} from '@12333/components';
import { useUserStore } from '@/stores/modules/user';
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import dayjs from 'dayjs';
import { useInfiniteLoading } from '@12333/hooks';
import { EnumPagedListOrder } from '@12333/constants';
import { toThousand } from '@12333/utils';
import * as taskServices from '@12333/services/apiV2/task';

defineOptions({
  name: 'InnerPage',
@@ -36,14 +68,40 @@

const userStore = useUserStore();
const nowDate = dayjs().toDate();
const form = reactive({

const queryState = reactive({
  month: dayjs().format('YYYY年M月'),
  status: 0,
});

function goIncomeDetailInfo() {
const { infiniteLoadingProps } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.GetPersonalApplyTaskInfosQuery = {
      pageModel: {
        rows: 20,
        page: pageParam,
        orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
      },
    };
    if (Number(queryState.status)) {
      params.status = queryState.status;
    }
    return taskServices.getPersonalApplyTaskInfos(params, {
      showLoading: false,
    });
  },
  {
    queryKey: ['taskServices/getPersonalApplyTaskInfos', queryState],
  }
);

function goIncomeDetailInfo(row?) {
  Taro.navigateTo({
    url: `${RouterPath.incomeDetailInfo}`,
  });
  // Taro.navigateTo({
  //   url: `${RouterPath.withdrawDetailInfo}`,
  // });
}
</script>

@@ -76,5 +134,17 @@
      left: 220px;
    }
  }

  .common-infinite-scroll-list {
    background-color: #ffffff;
  }

  .pro-list {
    background: transparent;
  }

  .nut-input {
    background: transparent;
  }
}
</style>

 apps/cMiniApp/src/subpackages/wallet/incomeDetail/incomeDetail.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout class="incomeDetail-page-wrapper" :title="'收入明细'">
  <PageLayout class="incomeDetail-page-wrapper" :title="'收支明细'">
    <InnerPage></InnerPage>
  </PageLayout>
</template>

 apps/cMiniApp/src/subpackages/wallet/incomeDetailInfo/InnerPage.vue

@@ -1,11 +1,5 @@
<template>
  <div class="income-detail-info-money">
    <div class="income-detail-info-money-value">
      <div class="income-detail-info-money-value-unit">￥</div>
      <div class="income-detail-info-money-value-num">{{ '33.33' }}</div>
    </div>
    <div class="income-detail-info-money-type">{{ '收入' }}</div>
  </div>
  <WithdrawMoneyCard :money="100" title="收入"></WithdrawMoneyCard>
  <List>
    <ListItem title="流水号" :show-arrow="false">
      <template #extra>
@@ -22,12 +16,12 @@
        <div class="income-detail-info-value">{{ '2024.11.13' }}</div>
      </template>
    </ListItem>
    <ListItem title="结算单内容" :show-arrow="false">
    <ListItem title="工资单内容" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '33.33元' }}</div>
      </template>
    </ListItem>
    <ListItem title="结算单内容" :show-arrow="false">
    <ListItem title="工资单内容" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '33.33元' }}</div>
      </template>
@@ -36,7 +30,7 @@
</template>

<script setup lang="ts">
import { List, ListItem } from '@12333/components';
import { List, ListItem, WithdrawMoneyCard } from '@12333/components';
import { useUserStore } from '@/stores/modules/user';

defineOptions({

 apps/cMiniApp/src/subpackages/wallet/incomeDetailInfo/incomeDetailInfo.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout class="incomeDetailInfo-page-wrapper" :title="'收入详情'" developing>
  <PageLayout class="incomeDetailInfo-page-wrapper" :title="'收入详情'">
    <InnerPage></InnerPage>
  </PageLayout>
</template>

 apps/cMiniApp/src/subpackages/wallet/mineWallet/InnerPage.vue

@@ -1,21 +1,16 @@
<template>
  <div class="mine-wallet-balance">
    <WithdrawMoneyCard :money="100" :title="`提现-${'支付宝'}提现`"></WithdrawMoneyCard>
    <nut-button type="primary" class="mine-wallet-balance-btn" @click="goWithdraw">提现</nut-button>
  </div>
  <List>
    <ListItem title="收入明细" @click="goIncomeDetail"> </ListItem>
    <ListItem title="银行卡" @click="goBankBind">
      <template #extra>
        <div class="bind-bank-card">
          {{ isBinding ? '已绑定' : '未绑定、立即绑定' }}
        </div>
      </template>
    </ListItem>
  </List>
</template>

<script setup lang="ts">
import { List, ListItem } from '@12333/components';
import { useUserStore } from '@/stores/modules/user';
import { List, ListItem, WithdrawMoneyCard } from '@12333/components';
import Taro from '@tarojs/taro';
import { Message } from '@12333/utils';

defineOptions({
  name: 'InnerPage',
@@ -31,21 +26,44 @@
  });
}

const goBankBind = useAccessReal(
const goWithdraw = useAccessReal(
  () => {
    Taro.navigateTo({
      url: `${isBinding.value ? RouterPath.bindBankCard : RouterPath.unboundBankCard}`,
      url: `${RouterPath.withdraw}`,
    });
  },
  { message: '完成实名认证后才可进行银行卡绑定' }
  { message: '完成实名认证后才可提现' }
);
// const goBankBind = useAccessReal(
//   () => {
//     Taro.navigateTo({
//       url: `${isBinding.value ? RouterPath.bindBankCard : RouterPath.unboundBankCard}`,
//     });
//   },
//   { message: '完成实名认证后才可进行银行卡绑定' }
// );
</script>

<style lang="scss">
@import '@/styles/common.scss';

.bind-bank-card {
  color: boleGetCssVar('text-color', 'regular');
  font-size: 24px;
.mine-wallet-balance {
  text-align: center;
  padding: 40px 0 60px;

  .mine-wallet-balance-item {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 40px;

    &.money {
      font-size: 48px;
      font-weight: 500;
    }
  }

  .mine-wallet-balance-btn {
    width: 60%;
  }
}
</style>

 apps/cMiniApp/src/subpackages/wallet/withdraw/InnerPage.vue

New file
@@ -0,0 +1,122 @@
<template>
  <ContentScrollView :paddingH="false">
    <nut-form :model-value="form" ref="formRef" :rules="rules">
      <nut-form-item label="提现金额:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入提现金额" />
      </nut-form-item>
      <div class="withdraw-divider">
        <div class="withdraw-divider-text">{{ `当前账户余额${'188.88'}元，` }}</div>
        <div class="withdraw-divider-btn">全部提现</div>
      </div>
      <nut-form-item label-width="0" class="bole-form-item">
        <nut-radio-group class="withdraw-form-wrapper" v-model="form.alipay">
          <div class="withdraw-form-item">
            <nut-radio label="alipay"> {{ '提现到支付宝' }} </nut-radio>
            <img :src="IconWalletAlipay" class="withdraw-icon" />
          </div>
          <!-- <div class="withdraw-form-item">
            <nut-radio label="wechat"> {{ '提现到微信' }} </nut-radio>
            <img :src="IconWalletWechat" class="withdraw-icon" />
          </div>
          <div class="withdraw-form-item">
            <nut-radio label="bank"> {{ '提现到银行卡' }} </nut-radio>
            <img :src="IconWalletBank" class="withdraw-icon" />
          </div> -->
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item label="支付宝户名:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入支付宝户名" />
      </nut-form-item>
      <nut-form-item label="身份证号:" class="bole-form-item" prop="name">
        <nut-input v-model.trim="form.name" placeholder="请输入身份证号" />
      </nut-form-item>
      <nut-form-item label="支付宝账号:" class="bole-form-item" prop="phoneNumber" required>
        <nut-input v-model.trim="form.name" placeholder="请输入支付宝账号/手机号" />
      </nut-form-item>
    </nut-form>
  </ContentScrollView>
  <PageFooter>
    <PageFooterBtn type="plain" @click="goBack">取消</PageFooterBtn>
    <PageFooterBtn type="primary" @click="handleConfirm">确认提现</PageFooterBtn>
  </PageFooter>
</template>

<script setup lang="ts">
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import IconWalletAlipay from '@/assets/wallet/icon-wallet-alipay.png';
import IconWalletWechat from '@/assets/wallet/icon-wallet-wechat.png';
import IconWalletBank from '@/assets/wallet/icon-wallet-bank.png';
import { goBack } from '@/utils';
import Taro from '@tarojs/taro';

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

const form = reactive({
  name: '',
  alipay: 'alipay',
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入' }],
});

const formRef = ref<any>(null);
function handleConfirm() {
  Taro.navigateTo({
    url: `${RouterPath.withdrawResult}`,
  });
  // if (!formRef.value) return;
  // formRef.value.validate().then(({ valid, errors }: any) => {
  //   if (valid) {
  //     confirm();
  //   }
  // });
}

async function confirm() {
  try {
  } catch (error) {}
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.withdraw-page-wrapper {
  .withdraw-divider {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: boleGetCssVar('text-color', 'secondary');
    padding: 20px 40px;

    .withdraw-divider-btn {
      color: boleGetCssVar('color', 'primary');
    }
  }

  .withdraw-form-wrapper {
    width: 100%;

    .withdraw-form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 40px;
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }

      .withdraw-icon {
        width: 36px;
        height: 36px;
        display: inline-block;
      }
    }
  }
}
</style>

 apps/cMiniApp/src/subpackages/wallet/withdraw/withdraw.config.ts

copy from apps/cMiniApp/src/subpackages/authentication/extraPage/extraPage.config.ts
copy to apps/cMiniApp/src/subpackages/wallet/withdraw/withdraw.config.ts

 apps/cMiniApp/src/subpackages/wallet/withdraw/withdraw.vue

New file
@@ -0,0 +1,17 @@
<template>
  <PageLayout class="withdraw-page-wrapper" title="提现" has-border>
    <InnerPage></InnerPage>
  </PageLayout>
</template>

<script setup lang="ts">
import InnerPage from './InnerPage.vue';

defineOptions({
  name: 'withdraw',
});
</script>

<style lang="scss">
@import '@/styles/common.scss';
</style>

 apps/cMiniApp/src/subpackages/wallet/withdrawDetailInfo/InnerPage.vue

New file
@@ -0,0 +1,55 @@
<template>
  <WithdrawMoneyCard :money="100" :title="`提现-${'支付宝'}提现`"></WithdrawMoneyCard>
  <List>
    <ListItem title="提现单号" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
      </template>
    </ListItem>
    <ListItem title="提现金额" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '宁波人力无忧' }}</div>
      </template>
    </ListItem>
    <ListItem title="提现方式" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '2024.11.13' }}</div>
      </template>
    </ListItem>
    <ListItem title="服务费" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '33.33元' }}</div>
      </template>
    </ListItem>
    <ListItem title="支付宝户名" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
      </template>
    </ListItem>
    <ListItem title="支付宝账号" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
      </template>
    </ListItem>
    <ListItem title="实际到账" :show-arrow="false">
      <template #extra>
        <div class="income-detail-info-value">{{ '33.33元' }}</div>
      </template>
    </ListItem>
  </List>
</template>

<script setup lang="ts">
import { List, ListItem, WithdrawMoneyCard } from '@12333/components';
import { useUserStore } from '@/stores/modules/user';

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

const userStore = useUserStore();
</script>

<style lang="scss">
@import '@/styles/common.scss';
</style>

 apps/cMiniApp/src/subpackages/wallet/withdrawDetailInfo/withdrawDetailInfo.config.ts

copy from apps/cMiniApp/src/subpackages/authentication/extraPage/extraPage.config.ts
copy to apps/cMiniApp/src/subpackages/wallet/withdrawDetailInfo/withdrawDetailInfo.config.ts

 apps/cMiniApp/src/subpackages/wallet/withdrawDetailInfo/withdrawDetailInfo.vue

New file
@@ -0,0 +1,18 @@
<template>
  <PageLayout class="withdrawDetailInfo-page-wrapper" :title="'提现详情'">
    <InnerPage></InnerPage>
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';

defineOptions({
  name: 'withdrawDetailInfo',
});
</script>

<style lang="scss">
@import '@/styles/common.scss';
</style>

 apps/cMiniApp/src/subpackages/wallet/withdrawResult/InnerPage.vue

New file
@@ -0,0 +1,125 @@
<template>
  <ContentScrollView :paddingH="false">
    <div class="withdraw-result-step-wrapper">
      <div class="withdraw-result-step-title">余额提现</div>
      <nut-steps
        class="withdraw-result-step-content"
        progress-dot
        direction="vertical"
        :current="2"
      >
        <nut-step title="发起提现" :content="dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')">
        </nut-step>
        <nut-step
          title="机构处理中"
          :content="`预计${dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}前到账`"
        >
          <template #icon>
            <img class="withdraw-result-step-icon-wait" :src="IconWalletStepWait" alt="" />
          </template>
        </nut-step>
        <nut-step title="提现到账" :content="dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')">
        </nut-step>
      </nut-steps>
    </div>
    <List>
      <ListItem title="提现单号" :show-arrow="false">
        <template #extra>
          <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
        </template>
      </ListItem>
      <ListItem title="提现金额" :show-arrow="false">
        <template #extra>
          <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
        </template>
      </ListItem>
      <ListItem title="提现方式" :show-arrow="false">
        <template #extra>
          <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
        </template>
      </ListItem>
      <template v-if="walletType === 'alipay'">
        <ListItem title="支付宝户名" :show-arrow="false">
          <template #extra>
            <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
          </template>
        </ListItem>
        <ListItem title="支付宝账号" :show-arrow="false">
          <template #extra>
            <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
          </template>
        </ListItem>
      </template>
      <template v-if="walletType === 'bank'">
        <ListItem title="银行卡号" :show-arrow="false">
          <template #extra>
            <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
          </template>
        </ListItem>
        <ListItem title="开户行" :show-arrow="false">
          <template #extra>
            <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
          </template>
        </ListItem>
      </template>
      <ListItem title="服务费" :show-arrow="false">
        <template #extra>
          <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
        </template>
      </ListItem>
      <ListItem title="实际到账" :show-arrow="false">
        <template #extra>
          <div class="income-detail-info-value">{{ '5893485943859843095843' }}</div>
        </template>
      </ListItem>
    </List>
  </ContentScrollView>
  <PageFooter>
    <PageFooterBtn type="primary" @click="handleConfirm">完成</PageFooterBtn>
  </PageFooter>
</template>

<script setup lang="ts">
import { List, ListItem } from '@12333/components';
import dayjs from 'dayjs';
import IconWalletStepWait from '@/assets/wallet/icon-wallet-step-wait.png';

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

const walletType = ref('alipay');

async function handleConfirm() {
  try {
  } catch (error) {}
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.withdrawResult-page-wrapper {
  .withdraw-result-step-wrapper {
    padding: 20px 60px;

    .withdraw-result-step-title {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 40px;
    }

    .withdraw-result-step-content {
      .nut-step-main {
        margin-bottom: 20px;
      }

      .withdraw-result-step-icon-wait {
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>

 apps/cMiniApp/src/subpackages/wallet/withdrawResult/withdrawResult.config.ts

copy from apps/cMiniApp/src/subpackages/authentication/extraPage/extraPage.config.ts
copy to apps/cMiniApp/src/subpackages/wallet/withdrawResult/withdrawResult.config.ts

 apps/cMiniApp/src/subpackages/wallet/withdrawResult/withdrawResult.vue

New file
@@ -0,0 +1,17 @@
<template>
  <PageLayout class="withdrawResult-page-wrapper" title="提现" has-border>
    <InnerPage></InnerPage>
  </PageLayout>
</template>

<script setup lang="ts">
import InnerPage from './InnerPage.vue';

defineOptions({
  name: 'withdrawResult',
});
</script>

<style lang="scss">
@import '@/styles/common.scss';
</style>

 apps/packages/components/assets/wallet/icon-wallet-alipay.png

 packages/components/src/Card/WithdrawMoneyCard.vue

New file
@@ -0,0 +1,63 @@
<template>
  <div class="withdraw-money-card">
    <div class="withdraw-money-card-value">
      <div class="withdraw-money-card-value-unit">￥</div>
      <div class="withdraw-money-card-value-num">{{ toThousand(props.money) }}</div>
    </div>
    <div class="withdraw-money-card-type">{{ props.title }}</div>
  </div>
</template>

<script setup lang="ts">
import { toThousand } from '@12333/utils';

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

type Props = {
  money: number;
  title: string;
};

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'update:checkedId', value: string): void;
}>();
</script>

<style lang="scss">
@import '@/styles/common.scss';

.withdraw-money-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // background-color: #ffffff;
  padding: 70px 0;

  .withdraw-money-card-value {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: boleGetCssVar('text-color', 'primary');

    .withdraw-money-card-value-unit {
      font-size: 32px;
    }

    .withdraw-money-card-value-num {
      font-size: 64px;
    }
  }

  .withdraw-money-card-type {
    margin-top: 10px;
    font-weight: 400;
    font-size: 28px;
    color: boleGetCssVar('text-color', 'primary');
  }
}
</style>

 packages/components/src/List/IncomeDetailListItem.vue

@@ -2,7 +2,10 @@
  <div class="income-detail-list-item">
    <div class="income-detail-list-item-inner" :class="{ 'border-none': !showBorder }">
      <slot name="title">
        <div class="income-detail-list-item-title">{{ title }}</div>
        <div class="income-detail-list-item-title">
          <div class="income-detail-list-item-title-text">{{ title }}</div>
          <div class="income-detail-list-item-title-value">{{ funds }}</div>
        </div>
      </slot>
      <div class="income-detail-list-item-content">
        <div class="income-detail-list-item-content-item">{{ item }}</div>
@@ -19,6 +22,7 @@

type Props = {
  title?: string;
  funds?: string;
  item?: string;
  value?: string;
  showValue?: boolean;
@@ -52,26 +56,18 @@
      font-size: 24px;
      color: boleGetCssVar('text-color', 'primary');
      line-height: 34px;
      display: flex;
      justify-content: space-between;
    }

    .income-detail-list-item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .income-detail-list-item-content-item {
        font-weight: 400;
        font-size: 20px;
      font-size: 22px;
        color: boleGetCssVar('text-color', 'secondary');
        line-height: 44px;
      }

      .income-detail-list-item-content-value {
        font-weight: 500;
        font-size: 30px;
        color: boleGetCssVar('text-color', 'primary');
        line-height: 44px;
      }
    }
  }
}

 packages/components/src/index.ts

@@ -25,6 +25,7 @@
export { default as TaskCheckFileCard } from './Card/TaskCheckFileCard.vue';
export { default as MineAgreementSignCard } from './Card/MineAgreementSignCard.vue';
export { default as JobApplicationCard } from './Card/JobApplicationCard.vue';
export { default as WithdrawMoneyCard } from './Card/WithdrawMoneyCard.vue';
export { default as MyTaskCard } from './Card/MyTaskCard.vue';
export { default as SignCard } from './Card/SignCard.vue';
export { default as FlexJobCard } from './Card/FlexJobCard.vue';