feat: mine

wupengfei

2025-02-14 b61e0dd54ca5adf96bea4fd1f92d498fe5245ff4

feat: mine

 apps/bMiniApp/project.private.config.json

@@ -14,6 +14,20 @@
                    "query": "",
                    "launchMode": "default",
                    "scene": null
                },
                {
                    "name": "工作台",
                    "pathName": "pages/workbenches/workbenches",
                    "query": "",
                    "launchMode": "default",
                    "scene": null
                },
                {
                    "name": "发布招聘",
                    "pathName": "subpackages/task/publishTask/publishTask",
                    "query": "",
                    "launchMode": "default",
                    "scene": null
                }
            ]
        }

 apps/bMiniApp/src/app.config.ts

@@ -1,7 +1,7 @@
export default defineAppConfig({
  entryPagePath: 'pages/home/index',
  pages: ['pages/home/index', 'pages/mine/index', 'pages/workbenches/workbenches'],
  requiredPrivateInfos: ['getLocation'],
  requiredPrivateInfos: ['getLocation', 'chooseLocation'],
  permission: {
    'scope.userLocation': {
      desc: '你的位置信息将用于小程序数据的效果展示',
@@ -75,6 +75,10 @@
      ],
    },
    {
      root: 'subpackages/task',
      pages: ['publishTask/publishTask'],
    },
    {
      root: 'subpackages/city',
      pages: ['citySelect/citySelect'],
    },

 apps/bMiniApp/src/assets/workbenches/icon-accept-manage.png

 apps/bMiniApp/src/assets/workbenches/icon-flexjob-manage.png

 apps/bMiniApp/src/assets/workbenches/icon-person-manage.png

 apps/bMiniApp/src/assets/workbenches/icon-publish-task.png

 apps/bMiniApp/src/assets/workbenches/icon-task-manage.png

 apps/bMiniApp/src/components/Chunk/Cell.vue

@@ -1,5 +1,5 @@
<template>
  <div class="bole-cell-wrapper" v-bind="$attrs">
  <div class="bole-cell-wrapper">
    <div class="cell-title-wrapper" v-if="showTitle">
      <slot name="title">
        <div :class="titleSize === 'normal' ? 'cell-title' : 'cell-title-large'">{{ title }}</div>

 apps/bMiniApp/src/constants/router.ts

@@ -25,4 +25,6 @@
  setting = '/subpackages/mine/setting/setting',
  mineFavorites = '/subpackages/mine/mineFavorites/mineFavorites',
  mineContactRecord = '/subpackages/mine/mineContactRecord/mineContactRecord',

  publishTask = '/subpackages/task/publishTask/publishTask',
}

 apps/bMiniApp/src/constants/task.ts

New file
@@ -0,0 +1,64 @@
export enum TaskStatus {
  All = 0,
  WaitSign = 10,
  Effect = 20,
  Terminated = 30,
}

export const TaskStatusText = {
  [TaskStatus.All]: '全部',
  [TaskStatus.WaitSign]: '待签约',
  [TaskStatus.Effect]: '生效中',
  [TaskStatus.Terminated]: '已终止',
};

export const TaskStatusColor = {
  [TaskStatus.WaitSign]: '#FF7D00',
  [TaskStatus.Effect]: '#3A71FF',
  [TaskStatus.Terminated]: '#9FA4AC',
};

export enum SalaryTimeTypeEnum {
  /**
   * 月薪
   */
  Month = 10,
  /**
   * 周薪
   */
  Week = 20,
  /**
   * 日薪
   */
  Day = 30,
  /**
   * 时薪
   */
  Hour = 40,
}

export const SalaryTimeTypeEnumText = {
  [SalaryTimeTypeEnum.Month]: '月薪',
  [SalaryTimeTypeEnum.Week]: '周薪',
  [SalaryTimeTypeEnum.Day]: '日薪',
  [SalaryTimeTypeEnum.Hour]: '时薪',
};

export const SalaryTimeTypeEnumUnit = {
  [SalaryTimeTypeEnum.Month]: '元/月',
  [SalaryTimeTypeEnum.Week]: '元/周',
  [SalaryTimeTypeEnum.Day]: '元/天',
  [SalaryTimeTypeEnum.Hour]: '元/小时',
};

export enum SalaryType {
  month = 10,
  week = 20,
  day = 30,
}

export const SalaryTypeText = {
  [SalaryType.month]: '月结',
  [SalaryType.week]: '周结',
  [SalaryType.day]: '日结',
};

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

@@ -163,26 +163,6 @@

    .mine-content-service-list {
      display: flex;

      .mine-content-service--list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 60px;

        .mine-content-service--list-item-icon {
          width: 72px;
          height: 72px;
          margin-bottom: 24px;
        }

        .mine-content-service--list-item-text {
          font-size: 24px;
          line-height: 36px;
          color: boleGetCssVar('text-color', 'regular');
        }
      }
    }
  }


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

@@ -52,6 +52,7 @@
          </div>
        </div> -->
      </UserHomeTopView>
      <template v-if="isLogin">
      <div class="mine-content-record">
        <div class="mine-content-record-item" @click="goMineFavorites">
          <img class="mine-content-record-item-icon" :src="IconCollect" alt="" />
@@ -68,23 +69,19 @@
      </div>
      <Cell :title="'更多服务'" class="mine-content-service">
        <div class="mine-content-service-list">
          <div class="mine-content-service--list-item">
            <img class="mine-content-service--list-item-icon" :src="IconFinance" alt="" />
            <div class="mine-content-service--list-item-text">财务管理</div>
          </div>
          <div class="mine-content-service--list-item">
            <img class="mine-content-service--list-item-icon" :src="IconRealName" alt="" />
            <div class="mine-content-service--list-item-text">企业实名</div>
          </div>
          <div class="mine-content-service--list-item" @click="goSetting">
            <img class="mine-content-service--list-item-icon" :src="IconSetting" alt="" />
            <div class="mine-content-service--list-item-text">设置</div>
          </div>
            <TaskDetailWelfareItem :icon="IconFinance" text="财务管理"></TaskDetailWelfareItem>
            <TaskDetailWelfareItem :icon="IconRealName" text="企业实名"></TaskDetailWelfareItem>
            <TaskDetailWelfareItem
              :icon="IconSetting"
              text="设置"
              @click="goSetting"
            ></TaskDetailWelfareItem>
        </div>
      </Cell>
      <nut-button type="info" class="mine-content-logout" @click="handleLoginout"
        >退出登录</nut-button
      >
      </template>
    </ContentView>
  </PageLayoutWithBg>
</template>
@@ -106,6 +103,7 @@
import { Message } from '@12333/utils';
import { useUserStore } from '@/stores/modules/user';
import { useQueryClient } from '@tanstack/vue-query';
import { TaskDetailWelfareItem } from '@12333/components';

const userStore = useUserStore();
const queryClient = useQueryClient();

 apps/bMiniApp/src/pages/workbenches/InnerPage.vue

@@ -1,13 +1,85 @@
<template>
  <div>InnerPage</div>
  <ContentView>
    <div class="workbenches-banner-wrapper">
      <nut-swiper :auto-play="3000">
        <nut-swiper-item v-for="(item, index) in list" :key="index">
          <img :src="item" class="banner-img" draggable="false" />
        </nut-swiper-item>
      </nut-swiper>
    </div>

    <Cell :show-title="false" class="workbenches-cell">
      <CellChunk title="任务">
        <div class="workbenches-cell-list">
          <TaskDetailWelfareItem :icon="IconPublishTask" text="发布任务" @click="goPublishTask" />
          <TaskDetailWelfareItem :icon="IconPersonManage" text="用人管理" />
        </div>
      </CellChunk>
      <CellChunk title="用人">
        <div class="workbenches-cell-list">
          <TaskDetailWelfareItem :icon="IconFlexjobManage" text="灵工管理" />
          <TaskDetailWelfareItem :icon="IconTaskManage" text="任务管理" />
          <TaskDetailWelfareItem :icon="IconAcceptManage" text="验收管理" />
        </div>
      </CellChunk>
    </Cell>
  </ContentView>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import { TaskDetailWelfareItem } from '@12333/components';
import { RouterPath } from '@/constants';
import IconAcceptManage from '@/assets/workbenches/icon-accept-manage.png';
import IconFlexjobManage from '@/assets/workbenches/icon-flexjob-manage.png';
import IconPersonManage from '@/assets/workbenches/icon-person-manage.png';
import IconPublishTask from '@/assets/workbenches/icon-publish-task.png';
import IconTaskManage from '@/assets/workbenches/icon-task-manage.png';

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

const list = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
]);

function goPage(routeName: string) {
  Taro.navigateTo({
    url: routeName,
  });
}

function goPublishTask() {
  goPage(RouterPath.publishTask);
}
</script>

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

.workbenches-page-wrapper {
  .workbenches-banner-wrapper {
    .banner-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
    }
  }

  .workbenches-cell {
    margin-top: 24px;

    .cell-title-wrapper {
      margin-bottom: 36px;
    }

    .workbenches-cell-list {
      display: flex;
    }
  }
}
</style>

 apps/bMiniApp/src/subpackages/task/publishTask/InnerPage.vue

New file
@@ -0,0 +1,209 @@
<template>
  <ContentScrollView :paddingH="false">
    <nut-form :model-value="form" ref="formRef" :rules="rules">
      <nut-form-item label="任务名称:" class="bole-form-item" prop="name" label-width="90px">
        <nut-input v-model="form.name" placeholder="请输入任务名称"> </nut-input>
      </nut-form-item>
      <nut-form-item
        label="服务费:"
        class="bole-form-item"
        prop="salaryTimeType"
        required
        label-width="90px"
      >
        <nut-radio-group v-model="form.salaryTimeType" direction="horizontal">
          <BlRadio :label="Number(key)" v-for="(val, key) in SalaryTimeTypeEnumText" :key="key">{{
            val
          }}</BlRadio>
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item label=" " class="bole-form-item" prop="welfare" label-width="90px">
        <div class="bole-form-input-wrapper">
          <nut-input
            v-model.trim="form.welfare"
            class="nut-input-text bole-input-text"
            placeholder="请输入服务费"
            type="text"
          />
          <div class="form-input-unit">{{ SalaryTimeTypeEnumUnit[form.salaryTimeType] }}</div>
        </div>
      </nut-form-item>
      <nut-form-item
        label="结算方式:"
        class="bole-form-item"
        prop="salaryType"
        required
        label-width="90px"
      >
        <nut-radio-group v-model="form.salaryType" direction="horizontal">
          <BlRadio :label="Number(key)" v-for="(val, key) in SalaryTypeText">{{ val }}</BlRadio>
        </nut-radio-group>
      </nut-form-item>
      <nut-form-item label="福利:" class="bole-form-item" prop="welfare" label-width="90px">
        <ChooseInputWithPicker
          v-model="form.welfare"
          placeholder="请选择福利"
          :value-enum="TaskStatusText"
        />
      </nut-form-item>
      <nut-form-item
        label="年龄范围:"
        class="bole-form-item"
        prop="ageStart"
        required
        label-width="90px"
      >
        <div class="bole-form-input-wrapper">
          <NumberInput
            v-model.trim="form.ageStart"
            class="nut-input-text bole-input-text"
            placeholder="请选择年龄范围"
            :min="1"
          />
          <div class="form-input-separator">至</div>
          <NumberInput
            v-model.trim="form.ageEnd"
            class="nut-input-text bole-input-text"
            placeholder="请选择年龄范围"
            :min="1"
          />
        </div>
      </nut-form-item>
      <nut-form-item label="性别:" class="bole-form-item" prop="welfare" label-width="90px">
        <ChooseInputWithPicker
          v-model="form.welfare"
          placeholder="请选择性别要求"
          :value-enum="TaskStatusText"
        />
      </nut-form-item>
      <nut-form-item label="资格证书:" class="bole-form-item" prop="welfare" label-width="90px">
        <ChooseInputWithPicker
          v-model="form.welfare"
          placeholder="请选择要求的资格证书"
          :value-enum="TaskStatusText"
        />
      </nut-form-item>
      <nut-form-item label="任务地点" class="bole-form-item" prop="weMapInfo" required>
        <ChooseLocationInput placeholder="请选择任务所在地" v-model="form.weMapInfo" />
      </nut-form-item>
      <nut-form-item label="详细地址:" class="bole-form-item" prop="name" label-width="90px">
        <nut-input v-model="form.name" placeholder="请输入详细地址"> </nut-input>
      </nut-form-item>
      <nut-form-item
        label="任务开始日期:"
        class="bole-form-item"
        prop="startDate"
        label-width="90px"
      >
        <ChooseInputWithDatePicker v-model="form.startDate"></ChooseInputWithDatePicker>
      </nut-form-item>
      <nut-form-item label="任务结束日期:" class="bole-form-item" prop="endDate" label-width="90px">
        <ChooseInputWithDatePicker v-model="form.endDate"></ChooseInputWithDatePicker>
      </nut-form-item>
    </nut-form>
  </ContentScrollView>
  <PageFooter>
    <PageFooterBtn type="primary" plain @click="handleCancel">取消</PageFooterBtn>
    <PageFooterBtn type="primary" @click="handleConfirm">发布</PageFooterBtn>
  </PageFooter>
</template>

<script setup lang="ts">
import {
  TaskStatus,
  TaskStatusText,
  SalaryTypeText,
  SalaryType,
  SalaryTimeTypeEnum,
  SalaryTimeTypeEnumText,
  SalaryTimeTypeEnumUnit,
} from '@/constants/task';
import { useUser } from '@/hooks';
import {
  ChooseInputWithPicker,
  ChooseInputWithDatePicker,
  NumberInput,
  ChooseLocationInput,
  Radio as BlRadio,
} from '@12333/components';
import { FormValidator } from '@12333/utils';
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import Taro from '@tarojs/taro';

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

const { userDetail } = useUser();

const form = reactive({
  name: '',
  welfare: TaskStatus.All,
  salaryTimeType: SalaryTimeTypeEnum.Month,
  salaryType: SalaryType.month,
  startDate: '',
  endDate: '',
  ageStart: '',
  ageEnd: '',
  weMapInfo: {} as WeMapModel,
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入任务名称' }],

  weMapInfo: [
    { required: true, message: '请设置工作地点', validator: FormValidator.validatorWeMap },
  ],

  ageStart: [
    {
      required: true,
      message: '请输入年龄要求',
      validator: () => {
        if (!form.ageStart) {
          return Promise.reject('请输入年龄要求');
        }
        if (!form.ageEnd) {
          return Promise.reject('请输入年龄要求');
        }
        if (Number(form.ageEnd) <= Number(form.ageStart)) {
          return Promise.reject('最大年龄不能小于最小年龄');
        }
        return Promise.resolve(true);
      },
    },
  ],
});
const formRef = ref<any>(null);
function handleConfirm() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      confirm();
    }
  });
}

function confirm() {}

function handleCancel() {
  Taro.navigateBack();
}
</script>

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

.publishTask-page-wrapper {
  .bole-form-input-wrapper {
    display: flex;
    align-items: center;
  }

  .form-input-unit {
    margin-left: 10px;
    color: boleGetCssVar('text-color', 'primary');
    flex-shrink: 0;
  }
}
</style>

 apps/bMiniApp/src/subpackages/task/publishTask/publishTask.config.ts

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

 apps/bMiniApp/src/subpackages/task/publishTask/publishTask.vue

New file
@@ -0,0 +1,17 @@
<template>
  <PageLayout class="publishTask-page-wrapper" :title="'发布招聘'" has-border>
    <InnerPage></InnerPage>
  </PageLayout>
</template>

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

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

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

 apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue

@@ -28,11 +28,11 @@
      <Cell :show-title="false">
        <CellChunk title="福利信息">
          <div class="taskDetail-welfare-list">
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" />
            <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" />
            <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" />
            <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" />
            <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" />
          </div>
        </CellChunk>
        <CellChunk title="报名条件">
@@ -86,7 +86,7 @@
import { useQuery } from '@tanstack/vue-query';
import * as orderServices from '@12333/services/api/Order';
import { useToggle } from 'senin-mini/hooks';
import { TaskPrice } from '@12333/components';
import { TaskPrice, TaskDetailWelfareItem } from '@12333/components';
import IconAttention from '@/assets/task/icon-attention.png';
import IconAttentioActive from '@/assets/task/icon-attention-active.png';
import { RectRight } from '@nutui/icons-vue-taro';
@@ -95,7 +95,6 @@
import IconSafe from '@/assets/task/icon-safe.png';
import IconLocaltion from '@/assets/task/icon-localtion.png';
import './taskDetail.scss';
import TaskDetailWelfareItem from '../components/TaskDetailWelfareItem.vue';
import CompanyDesc from '../components/CompanyDesc.vue';

defineOptions({

 packages/components/assets/components/icon-location.png

 packages/components/src/Card/TaskDetailWelfareItem.vue

File was renamed from apps/cMiniApp/src/subpackages/task/components/TaskDetailWelfareItem.vue
@@ -1,20 +1,21 @@
<template>
  <div class="taskDetail-welfare-list-item">
    <img :src="IconAttentioActive" class="taskDetail-welfare-list-item-icon" />
    <div class="taskDetail-welfare-list-item-text">高温补贴</div>
    <img :src="icon" class="taskDetail-welfare-list-item-icon" />
    <div class="taskDetail-welfare-list-item-text">{{ text }}</div>
  </div>
</template>

<script setup lang="ts">
import IconAttentioActive from '@/assets/task/icon-attention-active.png';

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

// type Props = {};
type Props = {
  icon: string;
  text: string;
};

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

<style lang="scss">

 packages/components/src/Input/ChooseLocationInput.vue

New file
@@ -0,0 +1,103 @@
<template>
  <nut-input
    class="nut-input-text bole-input-text"
    type="text"
    input-align="right"
    readonly
    @click="handleChooseLocation"
    :modelValue="props.modelValue.address"
    alwaysEmbed
  >
    <template #clear>
      <slot name="clear"></slot>
    </template>
    <template #left>
      <slot name="left"></slot>
    </template>
    <template #right>
      <slot name="right">
        <img :src="IconLocation" class="choose-location-input-icon" />
      </slot>
    </template>
  </nut-input>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import IconLocation from '../../assets/components/icon-location.png';
import { computed } from 'vue';
import { useAllAreaList } from '@12333/hooks';

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

type Props = {
  modelValue: WeMapModel;
};

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: Props['modelValue']): void;
}>();

const { findAreaCodeFromName } = useAllAreaList();

const innerModelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
});

function handleChooseLocation() {
  Taro.chooseLocation({
    success: function (res) {
      console.log('res: ', res);
      const latitude = res.latitude as unknown as number;
      const longitude = res.longitude as unknown as number;
      let provinceName = '';
      let cityName = '';
      let countyName = '';
      let nameList = res.address.match(
        /.+?(省|行政区|市|自治区|自治州|行政单位|盟|市辖区|旗|海域|岛|县|区)/g
      );
      if (nameList) {
        if (nameList?.length === 2) {
          provinceName = nameList[0];
          cityName = nameList[0];
          countyName = nameList[1];
        } else {
          provinceName = nameList[0];
          cityName = nameList[1];
          countyName = nameList[2];
        }
      }
      emit('update:modelValue', {
        latitude,
        longitude,
        provinceName,
        cityName,
        countyName,
        provinceCode: findAreaCodeFromName(provinceName),
        cityCode: findAreaCodeFromName(cityName),
        countyCode: findAreaCodeFromName(countyName),
        address: res.address,
      });
    },
  });
}
</script>

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

.choose-location-input-icon {
  width: 19px;
  height: 25px;
  margin-left: 10px;
}
</style>

 packages/components/src/index.ts

@@ -13,6 +13,7 @@
export { default as ChooseInputWithDatePicker } from './Input/ChooseInputWithDatePicker.vue';
export { default as ChooseInputWithAreaPicker } from './Input/ChooseInputWithAreaPicker.vue';
export { default as ChooseInputWithAreaSheet } from './Input/ChooseInputWithAreaSheet.vue';
export { default as ChooseLocationInput } from './Input/ChooseLocationInput.vue';
export { default as PreviewImage } from './Image/PreviewImage.vue';
export { default as ImageGrid } from './Image/ImageGrid.vue';
export { default as AutoWidthImage } from './Image/AutoWidthImage.vue';
@@ -23,6 +24,7 @@
export { default as MyTaskCard } from './Card/MyTaskCard.vue';
export { default as FlexJobCard } from './Card/FlexJobCard.vue';
export { default as TaskPrice } from './Card/TaskPrice.vue';
export { default as TaskDetailWelfareItem } from './Card/TaskDetailWelfareItem.vue';
export { default as QueryMenuView } from './Menu/QueryMenuView.vue';
export { default as QueryMenuItem } from './Menu/QueryMenuItem.vue';
export { default as ProRadio } from './Form/ProRadio.vue';

 packages/components/types/global.d.ts

@@ -17,3 +17,15 @@
  const componentOptions: ComponentOptions
  export default componentOptions
}

declare interface WeMapModel {
  latitude?: number;
  longitude?: number;
  provinceName?: string;
  cityName?: string;
  countyName?: string;
  provinceCode?: number;
  cityCode?: number;
  countyCode?: number;
  address?: string;
}