feat: 任务详情

zhengyiming

2025-02-11 d4afc7562a9e2eab52e552834dd7c4c653da6c01

feat: 任务详情

 apps/bMiniApp/src/components/Menu/menu.scss

@@ -16,8 +16,10 @@
  &.nut-menu {
    .nut-menu__bar {
      box-shadow: none;
      padding: 0 48rpx;
      // padding: 0 48rpx;
      padding: 0;
      justify-content: space-between;
      background-color: transparent;
      .nut-menu__item {
        flex: none;
        .nut-menu__title-text {

 apps/cMiniApp/project.config.json

@@ -51,5 +51,5 @@
        "ignore": [],
        "include": []
    },
    "appid": "wx88251c84f5cd886b"
    "appid": "wxb9e0baf4f87aa0de"
}

 apps/cMiniApp/project.private.config.json

@@ -9,6 +9,13 @@
        "miniprogram": {
            "list": [
                {
                    "name": "任务详情",
                    "pathName": "subpackages/task/taskDetail/taskDetail",
                    "query": "id=c4cfe028-23e7-0be8-ee56-3a11e3743b9d",
                    "launchMode": "default",
                    "scene": null
                },
                {
                    "name": "",
                    "pathName": "pages/mine/index",
                    "query": "",

 apps/cMiniApp/src/app.config.ts

@@ -68,6 +68,10 @@
      root: 'subpackages/city',
      pages: ['citySelect/citySelect'],
    },
    {
      root: 'subpackages/task',
      pages: ['taskDetail/taskDetail'],
    },
  ],
  // preloadRule: {
  //   'pages/mine/index': {

 apps/cMiniApp/src/assets/task/icon-attention-active.png

 apps/cMiniApp/src/assets/task/icon-attention.png

 apps/cMiniApp/src/assets/task/icon-safe.png

 apps/cMiniApp/src/assets/task/icon-share.png

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

@@ -30,9 +30,9 @@

.bole-cell-wrapper {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 24px;
  border-radius: 12px;
  padding: 36px 34px;
  margin-bottom: 20px;

  .cell-title-wrapper {
    display: flex;
@@ -64,9 +64,9 @@

    .cell-title-large {
      font-weight: 600;
      font-size: 32px;
      font-size: 30px;
      color: boleGetCssVar('text-color', 'primary');
      line-height: 44px;
      line-height: 42px;
      @include ellipsis;
    }
  }

 apps/cMiniApp/src/components/Menu/Menu.vue

@@ -17,8 +17,8 @@
            <view class="nut-menu__title-text">{{ item.renderTitle() }}</view>
            <span class="nut-menu__title-icon">
              <slot name="icon">
                <RectUp v-if="direction === 'up'" :size="12" />
                <RectDown v-else :size="12" />
                <TriangleUp v-if="direction === 'up'" :size="12" />
                <TriangleDown v-else :size="12" />
              </slot>
            </span>
          </view>
@@ -30,7 +30,7 @@
</template>
<script lang="ts">
import Taro, { usePageScroll } from '@tarojs/taro';
import { RectUp, RectDown } from '@nutui/icons-vue-taro';
import { RectUp, RectDown, TriangleDown, TriangleUp } from '@nutui/icons-vue-taro';
import { useTaroRect } from 'senin-mini/hooks';
import './menu.scss';

@@ -40,6 +40,8 @@
  components: {
    RectDown,
    RectUp,
    TriangleDown,
    TriangleUp,
  },
  props: {
    activeColor: {

 apps/cMiniApp/src/components/Menu/menu.scss

@@ -4,7 +4,7 @@
  color: boleGetCssVar('text-color', 'primary');

  .nut-menu__title-icon {
    color: #000;
    color: boleGetCssVar('text-color', 'secondary');
  }

  .nut-menu__title.active {
@@ -16,13 +16,15 @@
  &.nut-menu {
    .nut-menu__bar {
      box-shadow: none;
      padding: 0 48rpx;
      // padding: 0 48rpx;
      padding: 0;
      justify-content: space-between;
      background-color: transparent;
      .nut-menu__item {
        flex: none;
        .nut-menu__title-text {
          padding-left: 0;
          font-size: 24rpx;
          font-size: 26rpx;
          color: #000;
        }
      }

 apps/cMiniApp/src/constants/router.ts

@@ -8,12 +8,16 @@
  mine = '/pages/mine/index',
  editRichContent = '/subpackages/editRichContent/editRichContent',

  taskDetail = '/subpackages/task/taskDetail/taskDetail',

  // userInfo = '/subpackages/setting/userInfo/userInfo',
  // setting = '/subpackages/setting/setting/setting',
  // privacyAgreement = '/subpackages/setting/privacyAgreement/privacyAgreement',
  // cooperation = '/subpackages/setting/cooperation/cooperation',
  // faq = '/subpackages/setting/faq/faq',

  complaint = '/subpackages/user/complaint/complaint',

  authenticationHome = '/subpackages/authentication/authenticationHome/authenticationHome',
  authenticationResult = '/subpackages/authentication/authenticationResult/authenticationResult',
  authenticationFaRen = '/subpackages/authentication/authenticationFaRen/authenticationFaRen',

 apps/cMiniApp/src/pages/home/HomeQueryMenuView.vue

New file
@@ -0,0 +1,44 @@
<template>
  <QueryMenuView @close="emit('close')">
    <div class="home-query-menu-view">
      <QueryMenuItem title="结算方式">
        <ProRadio v-model="gender" :value-enum="GenderText" show-all-btn></ProRadio>
      </QueryMenuItem>
      <QueryMenuItem title="员工福利">
        <ProRadio v-model="gender" :value-enum="GenderText" show-all-btn></ProRadio>
      </QueryMenuItem>
      <QueryMenuItem title="性别要求">
        <ProRadio v-model="gender" :value-enum="GenderText" show-all-btn></ProRadio>
      </QueryMenuItem>
    </div>
  </QueryMenuView>
</template>

<script setup lang="ts">
import { QueryMenuView, QueryMenuItem, ProRadio } from '@12333/components';
import { GenderText } from '@12333/constants';

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

// type Props = {};

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

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

const gender = defineModel<number | string>('gender');
</script>

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

.home-query-menu-view {
  max-height: 400px;
  padding: 30px;
  overflow: auto;
}
</style>

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

@@ -8,7 +8,12 @@
    <div class="home-header">
      <div class="home-searchbar-wrapper">
        <div class="searchbar-container">
          <BlSearchbar v-model.trim="searchValue" placeholder="搜索任务"></BlSearchbar>
          <BlSearchbar
            v-model.trim="searchValue"
            placeholder="搜索任务"
            @search="handleSearch"
            @change="handleSearch"
          ></BlSearchbar>
        </div>
        <div class="city-btn" @click="goCitySelect">
          <Location2 :size="16" />
@@ -27,24 +32,22 @@
      v-model="queryState.orderType"
      name="home-tab"
      :showPaneContent="false"
      :showSmile="false"
      class="home-tabs"
      isTransparent
      title-gutter="12"
      title-gutter="8"
      title-scroll
    >
      <ProTabPane :title="`推荐`" :pane-key="HomeOrderType.Recommend"></ProTabPane>
      <ProTabPane :title="`最新`" :pane-key="HomeOrderType.LastShelfTime"></ProTabPane>
      <template #right>
        <Menu>
          <MenuItem
            v-model="queryState.orderByProperty"
            title="筛选"
            ref="selectItem"
            :options="[
              { text: '排序', value: 'userId' },
              { text: '按关注时间', value: 'creationTime' },
            ]"
          />
          <MenuItem title="筛选" ref="selectItem">
            <HomeQueryMenuView
              v-model:gender="queryState.gender"
              @close="handleMenuSelectClose"
            ></HomeQueryMenuView>
          </MenuItem>
        </Menu>
      </template>
    </ProTabs>
@@ -54,7 +57,7 @@
      :key="queryState.orderType"
    >
      <template #renderItem="{ item }">
        <TaskCard />
        <TaskCard @click="goTaskDetail(item)" />
      </template>
    </InfiniteLoading>
  </PageLayoutWithBg>
@@ -69,23 +72,20 @@
import _ from 'lodash';
import IconLogo from '@/assets/home/icon-logo.png';
import { useInfiniteLoading } from '@12333/hooks';
import { OrderInputType } from '@12333/constants';
import { OrderInputType, Gender } from '@12333/constants';
import * as orderServices from '@12333/services/api/Order';
import { TaskCard, ProTabs, ProTabPane } from '@12333/components';
import { HomeOrderType } from './constants';
import HomeQueryMenuView from './HomeQueryMenuView.vue';

const { locationCity } = useUser();

Taro.usePageScroll(() => {
  console.log('11', 11);
});

const searchValue = ref('');

const queryState = reactive({
  searchValueTrim: '',
  orderType: HomeOrderType.Recommend,
  orderByProperty: 'userId',
  gender: '' as any as Gender,
});

const handleSearch = _.debounce(function () {
@@ -129,6 +129,18 @@
    queryKey: ['orderServices/getFrontOrderList', queryState],
  }
);

const selectItem = ref();

function handleMenuSelectClose() {
  selectItem.value?.toggle?.();
}

function goTaskDetail(item: API.FrontOrderList) {
  Taro.navigateTo({
    url: `${RouterPath.taskDetail}?id=${item.id}`,
  });
}
</script>

<style lang="scss">

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

New file
@@ -0,0 +1,101 @@
<template>
  <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch">
    <ContentScrollView style="background-color: transparent">
      <Cell :title="'客房服务员'" titleSize="large">
        <template #title-right>
          <img :src="IconAttentioActive" class="taskDetail-attention-icon" />
        </template>
        <div class="taskDetail-time">2025年2月5日 至 2025年3月5日</div>
        <div class="task-card-welfare-wrapper">
          <div class="task-card-welfare-list">
            <div class="task-card-welfare-list-item">日结</div>
            <div class="task-card-welfare-list-item">男女不限</div>
            <div class="task-card-welfare-list-item">包三餐</div>
          </div>
          <TaskPrice :value="212" />
        </div>
        <div class="taskDetail-address-wrapper">
          <div class="taskDetail-address-title-wrapper">
            <img :src="IconAttentioActive" class="taskDetail-address-title-icon" />
            <div class="taskDetail-address-title">宁波柏悦酒店</div>
          </div>
          <div class="taskDetail-address-info-wrapper">
            <div class="taskDetail-address-info">宁波市鄞州区东钱湖大堰路188号宁波柏悦酒店</div>
            <RectRight :size="6" class="taskDetail-address-info-icon" />
          </div>
        </div>
      </Cell>
      <Cell>
        <template #title>
          <div class="safe-cell-title-wrapper">
            <img :src="IconSafe" class="safe-cell-title-icon" />
            <div class="safe-cell-title">安全提示</div>
          </div>
        </template>
        <div class="safe-cell-content">
          该信息由用户自主发布，如遇虚假信息、诈骗、传销等违法违规行为，请立即
          <div class="safe-cell-content-btn" @click="goComplaint">投诉举报</div>
        </div>
      </Cell>
    </ContentScrollView>
    <PageFooter>
      <PageFooterAction
        :icon="IconShare"
        text="分享"
        :isFlex="false"
        openType="share"
      ></PageFooterAction>
      <PageFooterBtn type="primary">报名</PageFooterBtn>
    </PageFooter>
  </LoadingLayout>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
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 IconAttention from '@/assets/task/icon-attention.png';
import IconAttentioActive from '@/assets/task/icon-attention-active.png';
import { RectRight } from '@nutui/icons-vue-taro';
import IconShare from '@/assets/task/icon-share.png';
import IconSafe from '@/assets/task/icon-safe.png';
import './taskDetail.scss';

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

const router = Taro.useRouter();
const taskId = router.params?.id ?? '';

const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['orderServices/getOrdeForDetail', taskId],
  queryFn: async () => {
    return await orderServices.getOrdeForDetail(
      { id: taskId },
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.OrderInfoDto),
  onSuccess(data) {
    if (data.isExistTradeChatRecord) setTrue();
  },
});

const { isCollapse, setTrue } = useToggle();

function goComplaint() {
  Taro.navigateTo({
    url: `${RouterPath.complaint}?id=${taskId}`,
  });
}
</script>

 apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.config.ts

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

 apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss

New file
@@ -0,0 +1,119 @@
@import '@/styles/common.scss';

.taskDetail-page-wrapper {
  .taskDetail-attention-icon {
    margin-left: 10px;
    width: 32px;
    height: 32px;
  }

  .taskDetail-time {
    font-size: 24px;
    color: boleGetCssVar('text-color', 'regular');
    line-height: 36px;
    margin-bottom: 16px;
  }

  .task-card-welfare-wrapper {
    display: flex;
    align-items: flex-start;
    padding-bottom: 48px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 12px;

    .task-card-welfare-list {
      flex: 1;
      display: flex;
      min-width: 0;
      flex-wrap: wrap;
      min-height: 40px;
      row-gap: 6px;
      column-gap: 18px;
      margin-right: 10px;

      .task-card-welfare-list-item {
        font-size: 24px;
        color: #ff7d00;
        line-height: 36px;
      }
    }
  }

  .taskDetail-address-wrapper {
    padding: 28px 32px 14px;
    background: #f9fbff;
    border-radius: 8px;

    .taskDetail-address-title-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 22px;

      .taskDetail-address-title-icon {
        width: 40px;
        height: 40px;
        margin-right: 8px;
      }

      .taskDetail-address-title {
        flex: 1;
        min-width: 0;
        @include ellipsis;
        font-size: 28px;
        color: boleGetCssVar('text-color', 'primary');
        line-height: 42px;
      }
    }

    .taskDetail-address-info-wrapper {
      display: flex;
      align-items: center;

      .taskDetail-address-info {
        flex: 1;
        min-width: 0;
        @include ellipsis;
        font-weight: 400;
        font-size: 24px;
        color: boleGetCssVar('text-color', 'regular');
        line-height: 36px;
      }

      .taskDetail-address-info-icon {
        color: boleGetCssVar('text-color', 'secondary');
        margin-left: 10px;
      }
    }
  }

  .safe-cell-title-wrapper {
    display: flex;
    align-items: center;

    .safe-cell-title-icon {
      width: 32px;
      height: 32px;
      margin-right: 8px;

      .safe-cell-title {
        font-weight: 600;
        font-size: 28px;
        color: boleGetCssVar('text-color', 'primary');
        line-height: 40px;
      }
    }
  }

  .safe-cell-content {
    font-size: 24px;
    color: boleGetCssVar('text-color', 'secondary');
    text-align: left;
    word-break: break-all;
    line-height: 34px;

    .safe-cell-content-btn {
      color: boleGetCssVar('color', 'primary');
      display: inline;
    }
  }
}

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

New file
@@ -0,0 +1,17 @@
<template>
  <PageLayoutWithBg class="taskDetail-page-wrapper" title="任务详情">
    <InnerPage />
  </PageLayoutWithBg>
</template>

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

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

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

 packages/components/src/Card/TaskCard.vue

@@ -2,7 +2,7 @@
  <div class="task-card-wrapper">
    <div class="task-card-title-wrapper">
      <div class="task-card-title">客房服务员</div>
      <TaskPrice />
      <TaskPrice :value="212" />
    </div>
    <div class="task-card-welfare-list">
      <div class="task-card-welfare-list-item">日结</div>
@@ -82,7 +82,7 @@

  .task-card-time {
    font-size: 24px;
    color: boleGetCssVar('text-color', 'secondary');
    color: boleGetCssVar('text-color', 'regular');
    line-height: 36px;
    margin-bottom: 6px;
  }
@@ -111,7 +111,7 @@

      .task-card-footer-address {
        font-size: 22px;
        color: boleGetCssVar('text-color', 'secondary');
        color: boleGetCssVar('text-color', 'regular');
        line-height: 36px;
        flex: 1;
        min-width: 0;

 packages/components/src/Card/TaskPrice.vue

@@ -1,6 +1,6 @@
<template>
  <div class="task-price">
    <div class="task-price-decimal">55</div>
    <div class="task-price-decimal">{{ value }}</div>
    <div class="task-price-unit">元/小时</div>
  </div>
</template>
@@ -29,6 +29,7 @@
    font-size: 32px;
    line-height: 40px;
    margin-right: 8px;
    font-weight: 600;
  }

  .task-price-unit {

 packages/components/src/Form/ProRadio.vue

New file
@@ -0,0 +1,54 @@
<template>
  <nut-radio-group v-model="model" direction="horizontal">
    <nut-radio
      v-for="item in optionsWithAll"
      :key="item.value"
      :label="item.value"
      :value="item.value"
      shape="button"
      >{{ item.text }}</nut-radio
    >
  </nut-radio-group>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { convertOptions, ValueEnum } from 'senin-mini/utils';

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

type Props = {
  showAllBtn?: boolean;
  allBtnLabel?: string;
  allBtnValue?: string | number | null;
  enumLabelKey?: string;
  enumValueKey?: string;
  valueEnum?: ValueEnum;
};

const props = withDefaults(defineProps<Props>(), {
  allBtnLabel: '不限',
  allBtnValue: '',
  enumLabelKey: 'name',
  enumValueKey: 'id',
});

const model = defineModel<string | number>();

const options = computed(() =>
  convertOptions(props.valueEnum, props.enumLabelKey, props.enumValueKey)
);

const optionsWithAll = computed(() => {
  if (props.showAllBtn) {
    return [{ text: props.allBtnLabel, value: props.allBtnValue }, ...options.value];
  }
  return options.value;
});
</script>

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

 packages/components/src/Menu/QueryMenuItem.vue

New file
@@ -0,0 +1,39 @@
<template>
  <div class="query-menu-item">
    <div class="query-menu-item-title">
      {{ title }}
    </div>
    <slot></slot>
  </div>
</template>

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

type Props = {
  title?: string;
};

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

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

.query-menu-item {
  margin-bottom: 34px;

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

  .query-menu-item-title {
    font-size: 28px;
    color: #536077;
    line-height: 32px;
    margin-bottom: 30px;
  }
}
</style>

 packages/components/src/Menu/QueryMenuView.vue

New file
@@ -0,0 +1,47 @@
<template>
  <div class="query-menu-view">
    <slot></slot>
    <div class="bole-menu-item__footer">
      <div class="bole-menu-item__button-wrapper">
        <nut-button
          shape="square"
          class="dark-btn"
          type="primary"
          :color="Colors.Info"
          @click="handleCancel"
        >
          取消
        </nut-button>
        <nut-button shape="square" type="primary" @click="handleConfirm">确认</nut-button>
      </div>
    </div>
  </div>
</template>

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

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

// type Props = {};

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

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

function handleCancel() {
  emit('close');
}

function handleConfirm() {
  emit('close');
}
</script>

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

 packages/components/src/Tabs/ProTabs.vue

@@ -2,7 +2,10 @@
  <view
    ref="container"
    class="nut-tabs"
    :class="[direction, { fullHeight, noContent: !showPaneContent, flexTitle }]"
    :class="[
      direction,
      { fullHeight, noContent: !showPaneContent, flexTitle, noSmile: !showSmile },
    ]"
  >
    <div :class="['pro-tabs__titles_wrapper', { isTransparent }]">
      <scroll-view
@@ -533,4 +536,32 @@
    }
  }
}

.nut-tabs.noSmile {
  .nut-tabs__titles.tabs-scrollview {
    height: 86rpx;

    .nut-tabs__list {
      height: 86rpx;
    }

    .nut-tabs__titles-item__smile {
      display: none !important;
    }

    .nut-tabs__titles-item {
      .nut-tabs__titles-item__text {
        padding-top: 8rpx;
      }

      &.active {
        .nut-tabs__titles-item__text {
          padding-top: 0;
          font-size: 32rpx;
          transition: all 0.3s ease;
        }
      }
    }
  }
}
</style>

 packages/components/src/Tabs/tabs.ts

@@ -90,6 +90,10 @@
    type: Boolean,
    default: false,
  },
  showSmile: {
    type: Boolean,
    default: true,
  },
};

export const TypeOfFun = (value: any) => {

 packages/components/src/index.ts

@@ -18,3 +18,7 @@
export { default as AreaTreeSelect } from './AreaTreeSelect/AreaTreeSelect.vue';
export { default as Elevator } from './Elevator/Elevator.vue';
export { default as TaskCard } from './Card/TaskCard.vue';
export { default as TaskPrice } from './Card/TaskPrice.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';