feat: mine

wupengfei

9 天以前 0d86b7da2c9341e009adeda25b75a7e01445c272

feat: mine

 apps/bMiniApp/project.private.config.json

@@ -81,5 +81,5 @@
            ]
        }
    },
    "libVersion": "3.7.3"
    "libVersion": "3.9.0"
}

 apps/bMiniApp/src/pages/mine/index.vue

@@ -42,7 +42,7 @@
            <div class="mine-go-login" v-else>去登录</div>
          </div>
        </template>
        <!-- <div class="mine-business-card">
        <div class="mine-business-card">
          <div class="mine-business-card-item">
            <img class="mine-business-card-item-icon" :src="IconBusinessCard" alt="" />
            <div class="mine-business-card-item-text">我的电子名片</div>
@@ -50,7 +50,7 @@
          <div class="mine-business-card-btn">
            <nut-button type="info">递名片</nut-button>
          </div>
        </div> -->
        </div>
      </UserHomeTopView>
      <template v-if="isLogin">
        <div class="mine-content-record">

 apps/cMiniApp/project.private.config.json

@@ -60,5 +60,5 @@
            ]
        }
    },
    "libVersion": "3.7.3"
    "libVersion": "3.9.0"
}

 apps/cMiniApp/src/app.config.ts

@@ -83,6 +83,16 @@
      ],
    },
    {
      root: 'subpackages/wallet',
      pages: [
        'mineWallet/mineWallet',
        'bindBankCard/bindBankCard',
        'unboundBankCard/unboundBankCard',
        'incomeDetail/incomeDetail',
        'incomeDetailInfo/incomeDetailInfo',
      ],
    },
    {
      root: 'subpackages/curriculum',
      pages: [
        'editMineInfo/editMineInfo',

 apps/cMiniApp/src/constants/router.ts

@@ -37,6 +37,12 @@
  mineAgreementSignDetail = '/subpackages/mine/mineAgreementSignDetail/mineAgreementSignDetail',
  setting = '/subpackages/mine/setting/setting',

  mineWallet = '/subpackages/wallet/mineWallet/mineWallet',
  unboundBankCard = '/subpackages/wallet/unboundBankCard/unboundBankCard',
  bindBankCard = '/subpackages/wallet/bindBankCard/bindBankCard',
  incomeDetail = '/subpackages/wallet/incomeDetail/incomeDetail',
  incomeDetailInfo = '/subpackages/wallet/incomeDetailInfo/incomeDetailInfo',

  mineCurriculumVitae = '/subpackages/curriculum/mineCurriculumVitae/mineCurriculumVitae',
  editMineInfo = '/subpackages/curriculum/editMineInfo/editMineInfo',
  mineJobIntention = '/subpackages/curriculum/mineJobIntention/mineJobIntention',

 apps/cMiniApp/src/pages/mine/index.vue

@@ -50,14 +50,14 @@
      </UserHomeTopView>
    </ContentView>
    <ContentScrollView v-if="isLogin" class="mine-content-scroll-view">
      <!-- <List class="mine-list-wrapper mine-balance">
      <List class="mine-list-wrapper mine-balance">
        <div class="mine-balance-title">我的余额</div>
        <div class="mine-balance-money">￥{{ toThousand(100) }}</div>
        <div class="mine-balance-btn">
        <div class="mine-balance-btn" @click="goMineWallet">
          进入我的钱包
          <img :src="IconArrow" class="mine-balance-btn-icon" />
        </div>
      </List> -->
      </List>
      <List class="mine-list-wrapper mine-order-list">
        <div class="mine-order-list-title">
          <div class="mine-order-list-title-text">我的订单</div>
@@ -160,6 +160,10 @@
function goMineAgreementSign() {
  goPage(RouterPath.mineAgreementSign);
}

function goMineWallet() {
  goPage(RouterPath.mineWallet);
}
</script>

<style lang="scss">

 apps/cMiniApp/src/subpackages/curriculum/mineCurriculumVitae/InnerPage.vue

@@ -40,7 +40,9 @@
          </div>
          <div class="mine-curriculum-info-item-detail">
            {{
              `${detail?.resumeBaseInfo?.age}岁 | ${detail?.resumeBaseInfo?.socialIdentityName} | ${detail?.resumeBaseInfo?.educationalLevelName}`
              `${detail?.resumeBaseInfo?.age ?? ''}岁 | ${
                detail?.resumeBaseInfo?.socialIdentityName
              } | ${detail?.resumeBaseInfo?.educationalLevelName}`
            }}
          </div>
        </div>

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

New file
@@ -0,0 +1,106 @@
<template>
  <ContentScrollView>
    <div class="bind-bank-card-wrapper">
      <div class="bg-left-top"></div>
      <div class="bind-bank-card-content">
        <div class="bank-card-name">{{ '招商银行' }}</div>
        <div class="bank-card-number">{{ '**** **** **** 1234' }}</div>
        <div class="bank-card-type">{{ '储蓄卡' }}</div>
      </div>
      <div class="bg-right-bottom"></div>
    </div>
    <div class="bind-bank-card-tips">目前只支持一张银行卡，如需换卡请先解绑</div>
  </ContentScrollView>
  <PageFooter :isOnlyAction="false">
    <PageFooterBtn type="primary" @click="handleUnbind()">解绑银行卡</PageFooterBtn>
  </PageFooter>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user';
import Taro from '@tarojs/taro';

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

const userStore = useUserStore();

function handleUnbind() {}
</script>

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

.bindBankCard-page-wrapper {
  .bind-bank-card-wrapper {
    margin: 20px auto 0;
    width: 660px;
    height: 360px;
    padding: 60px 72px;
    background: linear-gradient(134deg, #6c7ff6 0%, #7996f7 100%);
    box-shadow: 0px 4 10px 5px rgba(122, 151, 248, 0.3);
    border-radius: 22px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;

    .bg-left-top {
      position: absolute;
      width: 148px;
      height: 130px;
      background-color: #7c8ef7;
      top: 0;
      left: 0;
      border-radius: 0 0 148px 0;
      z-index: 0;
    }

    .bind-bank-card-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      position: relative;
      z-index: 1;

      .bank-card-name {
        font-size: 40px;
        font-weight: 600;
        color: #ffffff;
      }

      .bank-card-number {
        font-size: 32px;
        color: #ffffff;
        font-weight: 600;
      }

      .bank-card-type {
        font-size: 24px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .bg-right-bottom {
      position: absolute;
      width: 306px;
      height: 306px;
      background: #7d98f7;
      left: 360px;
      top: 180px;
      border-radius: 50%;
      z-index: 0;
    }
  }

  .bind-bank-card-tips {
    margin: 66px auto 0;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    color: boleGetCssVar('text-color', 'secondary');
  }
}
</style>

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

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

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

New file
@@ -0,0 +1,18 @@
<template>
  <PageLayout class="bindBankCard-page-wrapper" :title="'绑定银行卡'">
    <InnerPage></InnerPage>
  </PageLayout>
</template>

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

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

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

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

New file
@@ -0,0 +1,64 @@
<template>
  <List>
    <IncomeDetailListItem :item="'收入:￥600.00'">
      <template #title>
        <div class="income-detail-time-picker">
          <ChooseInputWithPicker v-model="form.month" :value-enum="TaskStatusText" />
        </div>
      </template>
    </IncomeDetailListItem>
    <IncomeDetailListItem
      :title="'收入-宁波人力无忧'"
      :item="'2024.12.20 13:30:30'"
      :value="'+300.00'"
      @click="goIncomeDetailInfo()"
    >
    </IncomeDetailListItem>
  </List>
</template>

<script setup lang="ts">
import { List, IncomeDetailListItem, ChooseInputWithPicker } from '@12333/components';
import { TaskStatusText, TaskStatus } from '@/constants';
import { useUserStore } from '@/stores/modules/user';
import Taro from '@tarojs/taro';

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

const userStore = useUserStore();

const form = reactive({
  month: TaskStatus.All,
});

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

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

.incomeDetail-page-wrapper {
  .income-detail-time-picker {
    .nut-input {
      border-bottom: none;
      padding: 0;

      .input-text {
        font-size: 20px;
        font-weight: 500;
        height: 28px;
      }

      .nut-input-right-box {
        display: none;
      }
    }
  }
}
</style>

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

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

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

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

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

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

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

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

New file
@@ -0,0 +1,84 @@
<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>
  <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">{{ '33.33元' }}</div>
      </template>
    </ListItem>
  </List>
</template>

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

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

const userStore = useUserStore();
</script>

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

.incomeDetailInfo-page-wrapper {
  .income-detail-info-money {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ffffff;
    padding: 70px 0;

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

      .income-detail-info-money-value-unit {
        font-size: 32px;
      }

      .income-detail-info-money-value-num {
        font-size: 64px;
      }
    }

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

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

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

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

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

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

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

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

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

New file
@@ -0,0 +1,52 @@
<template>
  <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 Taro from '@tarojs/taro';
import { Message } from '@12333/utils';

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

const userStore = useUserStore();

const isBinding = ref(false);

function goIncomeDetail() {
  Taro.navigateTo({
    url: `${RouterPath.incomeDetail}`,
  });
}
function goBankBind() {
  // Message.confirm({ message: '完成实名认证后才可进行银行卡绑定' }).then(() => {
  //   Taro.navigateTo({
  //     url: `${RouterPath.authenticationHome}`,
  //   });
  // });
  Taro.navigateTo({
    url: `${isBinding.value ? RouterPath.bindBankCard : RouterPath.unboundBankCard}`,
  });
}
</script>

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

.bind-bank-card {
  color: boleGetCssVar('text-color', 'regular');
  font-size: 24px;
}
</style>

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

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

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

New file
@@ -0,0 +1,18 @@
<template>
  <PageLayout class="mineWallet-page-wrapper" :title="'我的钱包'">
    <InnerPage></InnerPage>
  </PageLayout>
</template>

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

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

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

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

New file
@@ -0,0 +1,135 @@
<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>
      <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="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.phoneNumber"
          class="nut-input-text bole-input-text"
          placeholder="请填写经办人的手机号码"
          type="text"
        >
          <template #right>
            <ProFormCaptcha
              :onGetCaptcha="() => onGetCaptcha(form.phoneNumber)"
              phonePropName="phoneNumber"
              :validateField="formRef?.validate"
            ></ProFormCaptcha>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item label="短信验证码:" class="bole-form-item" prop="verificationCode" required>
        <nut-input
          v-model.trim="form.verificationCode"
          class="nut-input-text bole-input-text"
          placeholder="请输入验证码"
          type="number"
        />
      </nut-form-item>
    </nut-form>
  </ContentScrollView>
  <PageFooter>
    <PageFooterBtn type="primary" @click="handleConfirm">绑定银行卡</PageFooterBtn>
  </PageFooter>
</template>

<script setup lang="ts">
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import { ProFormCaptcha } from 'senin-mini/components';
import { Message } from '@12333/utils';
import { VerificationCodeBusinessType } from '@12333/constants';
import * as commonServices from '@12333/services/api/Common';
import * as userResumeServices from '@12333/services/api/userResume';
import Taro from '@tarojs/taro';
import { useQuery } from '@tanstack/vue-query';

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

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

const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['userResumeServices/getUserResumeBaseInfo'],
  queryFn: async () => {
    return await userResumeServices.getUserResumeBaseInfo({
      showLoading: false,
    });
  },
  placeholderData: () => ({} as API.UserResumeBaseInfoOutput),
  onSuccess(data) {
    form.name = data.name;
    form.phoneNumber = data.phoneNumber;
  },
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入持卡人' }],
  phoneNumber: [{ required: true, message: '请输入手机号' }],
});

async function onGetCaptcha(phoneNumber: string) {
  await commonServices.sendPhoneCertificationVerificationCode(
    {
      name: form.name,
      identity: form.name,
      mobile: form.phoneNumber,
      businessType: VerificationCodeBusinessType.UserCertificationPhoneCertification,
    },
    { showLoading: false }
  );
}

const formRef = ref<any>(null);
function handleConfirm() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      confirm();
    }
  });
}

async function confirm() {
  try {
    let params: API.SaveUserResumeBaseInfoInput = {
      name: form.name,
      phoneNumber: form.phoneNumber,
    };
    let res = await userResumeServices.saveUserResumeBaseInfo(params);
    if (res) {
      Message.success('保存成功', {
        onClosed() {
          Taro.navigateTo({
            url: `${RouterPath.mineCurriculumVitae}`,
          });
        },
      });
    }
  } catch (error) {}
}
</script>

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

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

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

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

New file
@@ -0,0 +1,17 @@
<template>
  <PageLayout class="unboundBankCard-page-wrapper" title="绑定银行卡" has-border>
    <InnerPage></InnerPage>
  </PageLayout>
</template>

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

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

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

 packages/components/src/List/IncomeDetailListItem.vue

New file
@@ -0,0 +1,78 @@
<template>
  <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>
      </slot>
      <div class="income-detail-list-item-content">
        <div class="income-detail-list-item-content-item">{{ item }}</div>
        <div class="income-detail-list-item-content-value" v-if="showValue">{{ value }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'IncomeDetailListItem',
});

type Props = {
  title?: string;
  item?: string;
  value?: string;
  showValue?: boolean;
  showBorder?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  showValue: true,
  showBorder: true,
});
</script>

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

.income-detail-list-item {
  padding: 0 boleGetCssVar('size', 'body-padding-h');

  .income-detail-list-item-inner {
    padding: 24px 0 18px;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    flex-direction: column;

    &.border-none {
      border-bottom: none;
    }

    .income-detail-list-item-title {
      font-weight: 400;
      font-size: 24px;
      color: boleGetCssVar('text-color', 'primary');
      line-height: 34px;
    }

    .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;
        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;
      }
    }
  }
}
</style>

 packages/components/src/index.ts

@@ -8,6 +8,7 @@
export { default as ProTabPane } from './Tabs/ProTabPane.vue';
export { default as List } from './List/List.vue';
export { default as ListItem } from './List/ListItem.vue';
export { default as IncomeDetailListItem } from './List/IncomeDetailListItem.vue';
export { default as NumberInput } from './Input/NumberInput.vue';
export { default as ChooseInputWithPicker } from './Input/ChooseInputWithPicker.vue';
export { default as ChooseInputWithDatePicker } from './Input/ChooseInputWithDatePicker.vue';

 packages/services/api/typings.d.ts

@@ -852,7 +852,7 @@

  type FlexTaskSettleTypeEnum = 10 | 20 | 30;

  type FlexTaskWorkerHireEnum = 10 | 20 | 30;
  type FlexTaskWorkerHireEnum = 1 | 10 | 20 | 30 | 40;

  type FlexWorkerEleSignEnum = 10 | 20 | 30;