From 8ddaa42086bc67dac16ea596d212b79d3b832313 Mon Sep 17 00:00:00 2001 From: zhengyiming <540361168@qq.com> Date: 星期三, 12 二月 2025 14:58:45 +0800 Subject: [PATCH] fix: task --- apps/cMiniApp/src/components/Chunk/CellChunk.vue | 38 ++ apps/cMiniApp/src/pages/home/index.vue | 43 --- apps/cMiniApp/src/subpackages/task/components/CompanyDesc.vue | 80 ++++++ apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss | 28 ++ apps/cMiniApp/src/pages/task/InnerPage.vue | 74 +++++ apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.vue | 66 +++++ packages/components/src/Card/MineAgreementSignCard.vue | 8 apps/cMiniApp/src/components/Chunk/Cell.vue | 4 packages/components/src/Card/TaskCard.vue | 29 + apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.config.ts | 3 apps/cMiniApp/src/assets/task/icon-no-certified.png | 0 packages/components/src/index.ts | 2 apps/cMiniApp/src/constants/router.ts | 1 apps/cMiniApp/src/app.config.ts | 6 packages/components/src/Calendar/Calendar.vue | 43 +++ apps/cMiniApp/src/custom-tab-bar/index.tsx | 2 apps/cMiniApp/src/subpackages/task/components/TaskDetailWelfareItem.vue | 44 +++ apps/cMiniApp/src/hooks/index.ts | 1 apps/cMiniApp/src/hooks/task.ts | 55 ++++ apps/cMiniApp/project.private.config.json | 14 + packages/components/src/Card/card.ts | 3 apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue | 41 +++ /dev/null | 4 apps/cMiniApp/src/subpackages/task/components/CompanyTaskList.vue | 29 ++ apps/cMiniApp/src/subpackages/task/components/CompanyInfo.vue | 107 ++++++++ apps/cMiniApp/src/pages/task/task.vue | 10 packages/components/src/Card/MyTaskCard.vue | 39 +++ 27 files changed, 705 insertions(+), 69 deletions(-) diff --git a/apps/cMiniApp/project.private.config.json b/apps/cMiniApp/project.private.config.json index dbee23d..5f1d7c2 100644 --- a/apps/cMiniApp/project.private.config.json +++ b/apps/cMiniApp/project.private.config.json @@ -9,6 +9,20 @@ "miniprogram": { "list": [ { + "name": "浠诲姟", + "pathName": "pages/task/task", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "鍏徃璇︽儏", + "pathName": "subpackages/task/companyDetail/companyDetail", + "query": "id=c4cfe028-23e7-0be8-ee56-3a11e3743b9d", + "launchMode": "default", + "scene": null + }, + { "name": "浠诲姟璇︽儏", "pathName": "subpackages/task/taskDetail/taskDetail", "query": "id=c4cfe028-23e7-0be8-ee56-3a11e3743b9d", diff --git a/apps/cMiniApp/src/app.config.ts b/apps/cMiniApp/src/app.config.ts index 74b8cf2..98e7b84 100644 --- a/apps/cMiniApp/src/app.config.ts +++ b/apps/cMiniApp/src/app.config.ts @@ -84,7 +84,11 @@ }, { root: 'subpackages/task', - pages: ['taskDetail/taskDetail'], + pages: ['taskDetail/taskDetail', 'companyDetail/companyDetail'], + }, + { + root: 'subpackages/user', + pages: ['complaint/complaint'], }, ], // preloadRule: { diff --git a/apps/cMiniApp/src/assets/task/icon-no-certified.png b/apps/cMiniApp/src/assets/task/icon-no-certified.png new file mode 100644 index 0000000..8f29a60 --- /dev/null +++ b/apps/cMiniApp/src/assets/task/icon-no-certified.png Binary files differ diff --git a/apps/cMiniApp/src/components/Chunk/Cell.vue b/apps/cMiniApp/src/components/Chunk/Cell.vue index 4b91124..5aec162 100644 --- a/apps/cMiniApp/src/components/Chunk/Cell.vue +++ b/apps/cMiniApp/src/components/Chunk/Cell.vue @@ -1,6 +1,6 @@ <template> <div class="bole-cell-wrapper"> - <div class="cell-title-wrapper"> + <div class="cell-title-wrapper" v-if="showTitle"> <slot name="title"> <div :class="titleSize === 'normal' ? 'cell-title' : 'cell-title-large'">{{ title }}</div> <slot name="title-right"></slot> @@ -18,10 +18,12 @@ type Props = { title?: string; titleSize?: 'large' | 'normal'; + showTitle?: boolean; }; const props = withDefaults(defineProps<Props>(), { titleSize: 'normal', + showTitle: true, }); </script> diff --git a/apps/cMiniApp/src/components/Chunk/CellChunk.vue b/apps/cMiniApp/src/components/Chunk/CellChunk.vue new file mode 100644 index 0000000..138267f --- /dev/null +++ b/apps/cMiniApp/src/components/Chunk/CellChunk.vue @@ -0,0 +1,38 @@ +<template> + <div class="cell-chunk-wrapper"> + <div class="cell-title-wrapper"> + <slot name="title"> + <div :class="titleSize === 'normal' ? 'cell-title' : 'cell-title-large'">{{ title }}</div> + <slot name="title-right"></slot> + </slot> + </div> + <slot></slot> + </div> +</template> + +<script setup lang="ts"> +defineOptions({ + name: 'CellChunk', +}); + +type Props = { + title?: string; + titleSize?: 'large' | 'normal'; +}; + +const props = withDefaults(defineProps<Props>(), { + titleSize: 'normal', +}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.cell-chunk-wrapper { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } +} +</style> diff --git a/apps/cMiniApp/src/constants/router.ts b/apps/cMiniApp/src/constants/router.ts index ae46868..a13e4ca 100644 --- a/apps/cMiniApp/src/constants/router.ts +++ b/apps/cMiniApp/src/constants/router.ts @@ -11,6 +11,7 @@ editRichContent = '/subpackages/editRichContent/editRichContent', taskDetail = '/subpackages/task/taskDetail/taskDetail', + companyDetail = '/subpackages/task/companyDetail/companyDetail', // userInfo = '/subpackages/setting/userInfo/userInfo', // setting = '/subpackages/setting/setting/setting', diff --git a/apps/cMiniApp/src/custom-tab-bar/index.tsx b/apps/cMiniApp/src/custom-tab-bar/index.tsx index 703b631..1645110 100644 --- a/apps/cMiniApp/src/custom-tab-bar/index.tsx +++ b/apps/cMiniApp/src/custom-tab-bar/index.tsx @@ -128,7 +128,7 @@ ></TarBarItem> <TarBarItem - text="娑堟伅" + text="浠诲姟" icon="../assets/tabbar/icon-task.png" activeIcon="../assets/tabbar/icon-task-active.png" pagePath={TabBarPageRouter.Task} diff --git a/apps/cMiniApp/src/hooks/index.ts b/apps/cMiniApp/src/hooks/index.ts index 04721e7..bb5aa48 100644 --- a/apps/cMiniApp/src/hooks/index.ts +++ b/apps/cMiniApp/src/hooks/index.ts @@ -3,3 +3,4 @@ export * from './access'; export * from './login'; export * from './authentication'; +export * from './task'; diff --git a/apps/cMiniApp/src/hooks/task.ts b/apps/cMiniApp/src/hooks/task.ts new file mode 100644 index 0000000..9591376 --- /dev/null +++ b/apps/cMiniApp/src/hooks/task.ts @@ -0,0 +1,55 @@ +import { useInfiniteLoading } from '@12333/hooks'; +import { OrderInputType, Gender } from '@12333/constants'; +import * as orderServices from '@12333/services/api/Order'; +import _ from 'lodash'; +import { trim } from '@12333/utils'; + +export enum HomeOrderType { + Recommend = 'Recommend', + LastShelfTime = 'LastShelfTime', +} + +export function useTaskList() { + const searchValue = ref(''); + + const queryState = reactive({ + searchValueTrim: '', + orderType: HomeOrderType.Recommend, + gender: '' as any as Gender, + companyId: '', + }); + + const handleSearch = _.debounce(function () { + queryState.searchValueTrim = trim(searchValue.value); + }, 300); + + const { infiniteLoadingProps } = useInfiniteLoading( + ({ pageParam }) => { + let params: API.FrontOrderListInput = { + pageModel: { + rows: 20, + page: pageParam, + orderInput: [ + queryState.orderType === HomeOrderType.Recommend + ? { property: 'isRecommend', order: OrderInputType.Desc } + : { property: 'lastShelfTime', order: OrderInputType.Desc }, + ], + }, + }; + + return orderServices.getFrontOrderList(params, { + showLoading: false, + }); + }, + { + queryKey: ['orderServices/getFrontOrderList', queryState], + } + ); + + return { + searchValue, + queryState, + handleSearch, + infiniteLoadingProps, + }; +} diff --git a/apps/cMiniApp/src/pages/home/constants/index.ts b/apps/cMiniApp/src/pages/home/constants/index.ts deleted file mode 100644 index ff9bf0b..0000000 --- a/apps/cMiniApp/src/pages/home/constants/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export enum HomeOrderType { - Recommend = 'Recommend', - LastShelfTime = 'LastShelfTime', -} diff --git a/apps/cMiniApp/src/pages/home/index.vue b/apps/cMiniApp/src/pages/home/index.vue index d6483eb..9be0cad 100644 --- a/apps/cMiniApp/src/pages/home/index.vue +++ b/apps/cMiniApp/src/pages/home/index.vue @@ -64,35 +64,21 @@ </template> <script setup lang="ts"> -import { useUser } from '@/hooks'; +import { useUser, useTaskList, HomeOrderType } from '@/hooks'; import { useUserStore } from '@/stores/modules/user'; import { RectDown, Location2 } from '@nutui/icons-vue-taro'; import Taro from '@tarojs/taro'; import { LocationUtils, trim } from '@12333/utils'; import _ from 'lodash'; import IconLogo from '@/assets/home/icon-logo.png'; -import { useInfiniteLoading } from '@12333/hooks'; -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(); -const searchValue = ref(''); - -const queryState = reactive({ - searchValueTrim: '', - orderType: HomeOrderType.Recommend, - gender: '' as any as Gender, -}); - -const handleSearch = _.debounce(function () { - queryState.searchValueTrim = trim(searchValue.value); -}, 300); - const userStore = useUserStore(); + +const { searchValue, queryState, handleSearch, infiniteLoadingProps } = useTaskList(); function goCitySelect() { Taro.navigateTo({ @@ -106,29 +92,6 @@ 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg', ]); - -const { infiniteLoadingProps } = useInfiniteLoading( - ({ pageParam }) => { - let params: API.FrontOrderListInput = { - pageModel: { - rows: 20, - page: pageParam, - orderInput: [ - queryState.orderType === HomeOrderType.Recommend - ? { property: 'isRecommend', order: OrderInputType.Desc } - : { property: 'lastShelfTime', order: OrderInputType.Desc }, - ], - }, - }; - - return orderServices.getFrontOrderList(params, { - showLoading: false, - }); - }, - { - queryKey: ['orderServices/getFrontOrderList', queryState], - } -); const selectItem = ref(); diff --git a/apps/cMiniApp/src/pages/task/InnerPage.vue b/apps/cMiniApp/src/pages/task/InnerPage.vue new file mode 100644 index 0000000..159140e --- /dev/null +++ b/apps/cMiniApp/src/pages/task/InnerPage.vue @@ -0,0 +1,74 @@ +<template> + <Calendar v-model="queryState.date"></Calendar> + <ProTabs + v-model="queryState.status" + name="task-tab" + :showPaneContent="false" + class="task-tabs" + isTransparent + title-gutter="8" + title-scroll + > + <ProTabPane :title="`寰呮彁浜" :pane-key="10"></ProTabPane> + <ProTabPane :title="`寰呴獙鏀禶" :pane-key="20"></ProTabPane> + </ProTabs> + <InfiniteLoading + scrollViewClassName="common-infinite-scroll-list task-list" + v-bind="infiniteLoadingProps" + :key="queryState.status" + > + <template #renderItem="{ item }"> + <MyTaskCard @click="goSubmitTaskDetail(item)" /> + </template> + </InfiniteLoading> +</template> + +<script setup lang="ts"> +import { MyTaskCard, ProTabs, ProTabPane, Calendar } from '@12333/components'; +import Taro from '@tarojs/taro'; +import { useInfiniteLoading } from '@12333/hooks'; +import { OrderInputType } from '@12333/constants'; +import * as orderServices from '@12333/services/api/Order'; + +defineOptions({ + name: 'InnerPage', +}); + +const queryState = reactive({ + status: 10, + date: new Date(), +}); + +const { infiniteLoadingProps } = useInfiniteLoading( + ({ pageParam }) => { + let params: API.FrontOrderListInput = { + pageModel: { + rows: 20, + page: pageParam, + orderInput: [{ property: 'lastShelfTime', order: OrderInputType.Desc }], + }, + }; + + return orderServices.getFrontOrderList(params, { + showLoading: false, + }); + }, + { + queryKey: ['orderServices/getFrontOrderList', queryState], + } +); + +function goSubmitTaskDetail(item: API.FrontOrderList) { + Taro.navigateTo({ + url: `${RouterPath.taskDetail}?id=${item.id}`, + }); +} +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.task-list { + @include infiniteLoadingInTabBarPage; +} +</style> diff --git a/apps/cMiniApp/src/pages/task/task.vue b/apps/cMiniApp/src/pages/task/task.vue index b8a0b8f..96eabc0 100644 --- a/apps/cMiniApp/src/pages/task/task.vue +++ b/apps/cMiniApp/src/pages/task/task.vue @@ -1,13 +1,13 @@ <template> - <div>task</div> + <PageLayoutWithBg class="task-page-wrapper" title="浠诲姟"> + <InnerPage /> + </PageLayoutWithBg> </template> <script setup lang="ts"> +import InnerPage from './InnerPage.vue'; + defineOptions({ name: 'task', }); </script> - -<style lang="scss"> -@import '@/styles/common.scss'; -</style> diff --git a/apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.config.ts b/apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.config.ts new file mode 100644 index 0000000..305fdb1 --- /dev/null +++ b/apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + disableScroll: true, +}); diff --git a/apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.vue b/apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.vue new file mode 100644 index 0000000..72eda83 --- /dev/null +++ b/apps/cMiniApp/src/subpackages/task/companyDetail/companyDetail.vue @@ -0,0 +1,66 @@ +<template> + <PageLayoutWithBg class="companyDetail-page-wrapper" title="鍏徃璇︽儏" :need-auth="false"> + <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> + <ContentView> + <CompanyDesc style="background-color: #fff" :showArrow="false"></CompanyDesc> + </ContentView> + <ProTabs + v-model="tab" + name="companyDetail-tab" + :showSmile="false" + class="companyDetail-tabs" + isTransparent + title-gutter="8" + fullHeight + > + <ProTabPane :title="`浠诲姟`" pane-key="1"> + <CompanyTaskList /> + </ProTabPane> + <ProTabPane :title="`浼佷笟淇℃伅`" pane-key="2"> + <CompanyInfo /> + </ProTabPane> + </ProTabs> + </LoadingLayout> + </PageLayoutWithBg> +</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 CompanyDesc from '../components/CompanyDesc.vue'; +import CompanyTaskList from '../components/CompanyTaskList.vue'; +import CompanyInfo from '../components/CompanyInfo.vue'; +import { ProTabs, ProTabPane } from '@12333/components'; + +defineOptions({ + name: 'companyDetail', +}); + +const router = Taro.useRouter(); +const companyId = router.params?.id ?? ''; + +const tab = ref('1'); + +const { + isLoading, + isError, + data: detail, + refetch, +} = useQuery({ + queryKey: ['orderServices/getOrdeForDetail', companyId], + queryFn: async () => { + return await orderServices.getOrdeForDetail( + { id: companyId }, + { + showLoading: false, + } + ); + }, + placeholderData: () => ({} as API.OrderInfoDto), +}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; +</style> diff --git a/apps/cMiniApp/src/subpackages/task/components/CompanyDesc.vue b/apps/cMiniApp/src/subpackages/task/components/CompanyDesc.vue new file mode 100644 index 0000000..fd14e5c --- /dev/null +++ b/apps/cMiniApp/src/subpackages/task/components/CompanyDesc.vue @@ -0,0 +1,80 @@ +<template> + <div class="taskDetail-company-wrapper"> + <div class="taskDetail-company-title-wrapper"> + <div class="taskDetail-company-title">瀹佹尝浜哄姏鏃犲咖</div> + <RectRight v-if="showArrow" :size="8" class="taskDetail-company-arrow" /> + </div> + <div class="taskDetail-company-info"> + <img :src="IconSafe" class="safe-company-info-icon" /> + <div class="taskDetail-company-info-text">宸茶璇� | 4涓矖浣嶅湪鎷�</div> + </div> + </div> +</template> + +<script setup lang="ts"> +import IconSafe from '@/assets/task/icon-safe.png'; +import { RectRight } from '@nutui/icons-vue-taro'; + +defineOptions({ + name: 'CompanyDesc', +}); + +type Props = { + showArrow?: boolean; +}; + +const props = withDefaults(defineProps<Props>(), { + showArrow: true, +}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.taskDetail-company-wrapper { + padding: 28px 20px; + background: #f9fbff; + border-radius: 8px; + + .taskDetail-company-title-wrapper { + display: flex; + align-items: center; + margin-bottom: 24px; + + .taskDetail-company-title { + font-weight: 500; + font-size: 28px; + color: boleGetCssVar('text-color', 'primary'); + line-height: 42px; + flex: 1; + min-width: 0; + @include ellipsis; + } + + .taskDetail-company-arrow { + color: boleGetCssVar('text-color', 'secondary'); + margin-left: 10px; + } + } + + .taskDetail-company-info { + display: flex; + align-items: center; + + .safe-company-info-icon { + width: 24px; + height: 24px; + margin-right: 6px; + } + + .taskDetail-company-info-text { + font-size: 24px; + color: boleGetCssVar('text-color', 'regular'); + line-height: 36px; + flex: 1; + min-width: 0; + @include ellipsis; + } + } +} +</style> diff --git a/apps/cMiniApp/src/subpackages/task/components/CompanyInfo.vue b/apps/cMiniApp/src/subpackages/task/components/CompanyInfo.vue new file mode 100644 index 0000000..bd9390f --- /dev/null +++ b/apps/cMiniApp/src/subpackages/task/components/CompanyInfo.vue @@ -0,0 +1,107 @@ +<template> + <ContentScrollView style="background-color: transparent"> + <div v-if="isCertified" class="companyInfo-info-wrapper"> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">浼佷笟鍚嶇О</div> + <div class="companyInfo-info-item-content">姹熻タ鍚涙鼎鍟嗗姟鏈嶅姟鏈夐檺鍏徃</div> + </div> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">缁熶竴绀句細淇$敤浠g爜</div> + <div class="companyInfo-info-item-content">420902197910211010</div> + </div> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">娉ㄥ唽璧勬湰</div> + <div class="companyInfo-info-item-content">鎹屼桨涓囧厓鏁�</div> + </div> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">浼佷笟绫诲瀷</div> + <div class="companyInfo-info-item-content">鏈夐檺璐d换鍏徃锛堣嚜鐒朵汉鎶曡祫鎴栨帶鑲� 鐨勬硶浜虹嫭璧勶級</div> + </div> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">鎴愮珛鏃ユ湡</div> + <div class="companyInfo-info-item-content">2024骞�11鏈�11鏃�</div> + </div> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">浼佷笟鍦板潃</div> + <div class="companyInfo-info-item-content">姹熻タ鐪佷節姹熷競鍏遍潚鍩庡競xx璺痻x鍙穢x xxxx</div> + </div> + <div class="companyInfo-info-item"> + <div class="companyInfo-info-item-label">缁忚惀鑼冨洿</div> + <div class="companyInfo-info-item-content"> + 鎴戞槸钀ヤ笟鎵х収涓婄殑缁忚惀鑼冨洿淇℃伅鎴� 鏄惀涓氭墽鐓т笂鐨勭粡钀ヨ寖鍥翠俊鎭垜鏄� + 钀ヤ笟鎵х収涓婄殑缁忚惀鑼冨洿淇℃伅鎴戞槸钀� 涓氭墽鐓т笂鐨勭粡钀ヨ寖鍥翠俊鎭垜鏄惀涓� 鎵х収涓婄殑缁忚惀鑼冨洿淇℃伅 + </div> + </div> + </div> + <div v-else class="company-info-unCertified-wrapper"> + <img :src="IconNoCertified" class="company-info-unCertified-icon" /> + <div class="company-info-unCertified-text">璇ヤ紒涓氬皻鏈璇�</div> + <div class="company-info-unCertified-text">璇疯皑鎱庢牳瀹炴嫑鑱樹俊鎭�</div> + </div> + </ContentScrollView> +</template> + +<script setup lang="ts"> +import IconNoCertified from '@/assets/task/icon-no-certified.png'; + +defineOptions({ + name: 'CompanyInfo', +}); + +const isCertified = ref(true); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.companyInfo-info-wrapper { + background: #ffffff; + border-radius: 12px; + padding: 72px 28px 108px; + + .companyInfo-info-item { + display: flex; + font-weight: 400; + font-size: 24px; + line-height: 36px; + margin-bottom: 24px; + + &:last-child { + margin-bottom: 0; + } + + .companyInfo-info-item-label { + color: boleGetCssVar('text-color', 'secondary'); + margin-right: 54px; + width: 200px; + text-align: right; + } + + .companyInfo-info-item-content { + flex: 1; + min-width: 0; + color: boleGetCssVar('text-color', 'primary'); + } + } +} + +.company-info-unCertified-wrapper { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 140px; + + .company-info-unCertified-icon { + width: 320px; + height: 180px; + margin-bottom: 8px; + } + + .company-info-unCertified-text { + font-weight: 400; + font-size: 32px; + color: boleGetCssVar('text-color', 'primary'); + line-height: 48px; + } +} +</style> diff --git a/apps/cMiniApp/src/subpackages/task/components/CompanyTaskList.vue b/apps/cMiniApp/src/subpackages/task/components/CompanyTaskList.vue new file mode 100644 index 0000000..fabec53 --- /dev/null +++ b/apps/cMiniApp/src/subpackages/task/components/CompanyTaskList.vue @@ -0,0 +1,29 @@ +<template> + <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps"> + <template #renderItem="{ item }"> + <TaskCard @click="goTaskDetail(item)" /> + </template> + </InfiniteLoading> +</template> + +<script setup lang="ts"> +import { useTaskList } from '@/hooks'; +import { TaskCard } from '@12333/components'; +import Taro from '@tarojs/taro'; + +defineOptions({ + name: 'CompanyTaskList', +}); + +const { queryState, infiniteLoadingProps } = useTaskList(); + +function goTaskDetail(item: API.FrontOrderList) { + Taro.navigateTo({ + url: `${RouterPath.taskDetail}?id=${item.id}`, + }); +} +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; +</style> diff --git a/apps/cMiniApp/src/subpackages/task/components/TaskDetailWelfareItem.vue b/apps/cMiniApp/src/subpackages/task/components/TaskDetailWelfareItem.vue new file mode 100644 index 0000000..cdbf61c --- /dev/null +++ b/apps/cMiniApp/src/subpackages/task/components/TaskDetailWelfareItem.vue @@ -0,0 +1,44 @@ +<template> + <div class="taskDetail-welfare-list-item"> + <img :src="IconAttentioActive" class="taskDetail-welfare-list-item-icon" /> + <div class="taskDetail-welfare-list-item-text">楂樻俯琛ヨ创</div> + </div> +</template> + +<script setup lang="ts"> +import IconAttentioActive from '@/assets/task/icon-attention-active.png'; + +defineOptions({ + name: 'TaskDetailWelfareItem', +}); + +// type Props = {}; + +// const props = withDefaults(defineProps<Props>(), {}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.taskDetail-welfare-list-item { + display: flex; + align-items: center; + flex-direction: column; + width: 25%; + + .taskDetail-welfare-list-item-icon { + width: 72px; + height: 72px; + margin-bottom: 24px; + } + + .taskDetail-welfare-list-item-text { + font-weight: 400; + font-size: 24px; + color: boleGetCssVar('text-color', 'regular'); + line-height: 36px; + text-align: center; + /* @include ellipsis; */ + } +} +</style> diff --git a/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue b/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue index 8986d91..763c349 100644 --- a/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue +++ b/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue @@ -21,9 +21,39 @@ </div> <div class="taskDetail-address-info-wrapper"> <div class="taskDetail-address-info">瀹佹尝甯傞劄宸炲尯涓滈挶婀栧ぇ鍫拌矾188鍙峰畞娉㈡煆鎮﹂厭搴�</div> - <RectRight :size="6" class="taskDetail-address-info-icon" /> + <RectRight :size="8" class="taskDetail-address-info-icon" /> </div> </div> + </Cell> + <Cell :show-title="false"> + <CellChunk title="绂忓埄淇℃伅"> + <div class="taskDetail-welfare-list"> + <TaskDetailWelfareItem /> + <TaskDetailWelfareItem /> + <TaskDetailWelfareItem /> + <TaskDetailWelfareItem /> + <TaskDetailWelfareItem /> + </div> + </CellChunk> + <CellChunk title="鎶ュ悕鏉′欢"> + <div class="taskDetail-limit-list"> + <div class="taskDetail-limit-list-item"> + <div class="taskDetail-limit-list-item-label">骞撮緞锛�</div> + <div class="taskDetail-limit-list-item-text">18-45宀�</div> + </div> + <div class="taskDetail-limit-list-item"> + <div class="taskDetail-limit-list-item-label">鎬у埆锛�</div> + <div class="taskDetail-limit-list-item-text">涓嶉檺</div> + </div> + <div class="taskDetail-limit-list-item"> + <div class="taskDetail-limit-list-item-label">璧勬牸璇佷功锛�</div> + <div class="taskDetail-limit-list-item-text">鍋ュ悍璇�</div> + </div> + </div> + </CellChunk> + <CellChunk title="鍙戝竷鑰呬俊鎭�"> + <CompanyDesc @click="goCompanyDetail"></CompanyDesc> + </CellChunk> </Cell> <Cell> <template #title> @@ -45,6 +75,7 @@ :isFlex="false" openType="share" ></PageFooterAction> + <PageFooterAction :icon="IconShare" text="鎵嬫満" :isFlex="false"></PageFooterAction> <PageFooterBtn type="primary">鎶ュ悕</PageFooterBtn> </PageFooter> </LoadingLayout> @@ -62,6 +93,8 @@ import IconShare from '@/assets/task/icon-share.png'; import IconSafe from '@/assets/task/icon-safe.png'; import './taskDetail.scss'; +import TaskDetailWelfareItem from '../components/TaskDetailWelfareItem.vue'; +import CompanyDesc from '../components/CompanyDesc.vue'; defineOptions({ name: 'InnerPage', @@ -98,4 +131,10 @@ url: `${RouterPath.complaint}?id=${taskId}`, }); } + +function goCompanyDetail() { + Taro.navigateTo({ + url: `${RouterPath.companyDetail}?id=${taskId}`, + }); +} </script> diff --git a/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss index 3238fc8..0d92c6c 100644 --- a/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss +++ b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss @@ -116,4 +116,32 @@ display: inline; } } + + .taskDetail-welfare-list { + display: flex; + flex-wrap: wrap; + row-gap: 24px; + } + + .taskDetail-limit-list { + display: flex; + justify-content: space-between; + padding: 0 14px; + + .taskDetail-limit-list-item { + display: flex; + align-items: center; + font-size: 24px; + line-height: 28px; + + .taskDetail-limit-list-item-label { + color: boleGetCssVar('text-color', 'regular'); + } + .taskDetail-limit-list-item-text { + color: boleGetCssVar('text-color', 'primary'); + } + } + } + + } diff --git a/packages/components/src/Calendar/Calendar.vue b/packages/components/src/Calendar/Calendar.vue new file mode 100644 index 0000000..251bdbb --- /dev/null +++ b/packages/components/src/Calendar/Calendar.vue @@ -0,0 +1,43 @@ +<template> + <div class="bole-calendar-wrapper"> + <div class="bole-calendar-inner"> + <nut-calendar-card v-model="model" class="bole-calendar"></nut-calendar-card> + </div> + <div class="bole-calendar-arrow"> + <DownArrow :size="12" /> + </div> + </div> +</template> + +<script setup lang="ts"> +import { DownArrow } from '@nutui/icons-vue-taro'; + +defineOptions({ + name: 'Calendar', +}); + +// type Props = {}; + +// const props = withDefaults(defineProps<Props>(), {}); +const model = defineModel<Date | Date[]>(); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.bole-calendar-wrapper { + .bole-calendar { + background-color: transparent; + } + + .bole-calendar-inner { + height: 500px; + overflow: hidden; + } + + .bole-calendar-arrow { + display: flex; + justify-content: center; + } +} +</style> diff --git a/packages/components/src/Card/MineAgreementSignCard.vue b/packages/components/src/Card/MineAgreementSignCard.vue index e4455d2..406d63e 100644 --- a/packages/components/src/Card/MineAgreementSignCard.vue +++ b/packages/components/src/Card/MineAgreementSignCard.vue @@ -17,15 +17,13 @@ </template> <script setup lang="ts"> +import { CommonTaskCardProps } from './card'; + defineOptions({ name: 'MineAgreementSignCard', }); -type Props = { - title?: string; -}; - -const props = withDefaults(defineProps<Props>(), {}); +const props = withDefaults(defineProps<CommonTaskCardProps>(), {}); </script> <style lang="scss"> diff --git a/packages/components/src/Card/MyTaskCard.vue b/packages/components/src/Card/MyTaskCard.vue new file mode 100644 index 0000000..33e7a87 --- /dev/null +++ b/packages/components/src/Card/MyTaskCard.vue @@ -0,0 +1,39 @@ +<template> + <TaskCard v-bind="props" :show-actions="false" class="my-task-card-wrapper"> + <template #title-right> + <RectRight :size="12" class="my-task-card-arrow" /> + </template> + <div class="my-task-card-time">2025骞�2鏈�5鏃� 鑷� 2025骞�3鏈�5鏃�</div> + </TaskCard> +</template> + +<script setup lang="ts"> +import TaskCard from './TaskCard.vue'; +import { CommonTaskCardProps } from './card'; +import { RectRight } from '@nutui/icons-vue-taro'; + +defineOptions({ + name: 'MyTaskCard', +}); + +const props = withDefaults(defineProps<CommonTaskCardProps>(), {}); +</script> + +<style lang="scss"> +@import '@/styles/common.scss'; + +.my-task-card-wrapper { + .my-task-card-arrow { + color: boleGetCssVar('text-color', 'primary'); + } + + .my-task-card-time { + font-weight: 400; + @include ellipsis; + font-size: 24px; + color: boleGetCssVar('text-color', 'primary'); + line-height: 36px; + margin-bottom: 14px; + } +} +</style> diff --git a/packages/components/src/Card/TaskCard.vue b/packages/components/src/Card/TaskCard.vue index 7285ced..ddee2ff 100644 --- a/packages/components/src/Card/TaskCard.vue +++ b/packages/components/src/Card/TaskCard.vue @@ -2,20 +2,24 @@ <div class="task-card-wrapper"> <div class="task-card-title-wrapper"> <div class="task-card-title">瀹㈡埧鏈嶅姟鍛�</div> - <TaskPrice :value="212" /> + <slot name="title-right"> + <TaskPrice :value="212" /> + </slot> </div> - <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> - <div class="task-card-time">涓婄彮鏃堕棿:07:00-15:30</div> + <slot> + <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> + <div class="task-card-time">涓婄彮鏃堕棿:07:00-15:30</div> + </slot> <div class="task-card-footer"> <div class="task-card-left"> <div class="task-card-footer-tag">H</div> <div class="task-card-footer-address">瀹佹尝闆疯开妫厭搴�</div> </div> - <div class="task-card-actions"> + <div class="task-card-actions" v-if="showActions"> <slot name="actions"> <nut-button type="primary">鎶ュ悕</nut-button> </slot> @@ -26,16 +30,19 @@ <script setup lang="ts"> import TaskPrice from './TaskPrice.vue'; +import { CommonTaskCardProps } from './card'; defineOptions({ name: 'TaskCard', }); -type Props = { - title?: string; +type Props = CommonTaskCardProps & { + showActions?: boolean; }; -const props = withDefaults(defineProps<Props>(), {}); +const props = withDefaults(defineProps<Props>(), { + showActions: true, +}); </script> <style lang="scss"> diff --git a/packages/components/src/Card/card.ts b/packages/components/src/Card/card.ts new file mode 100644 index 0000000..6f23b21 --- /dev/null +++ b/packages/components/src/Card/card.ts @@ -0,0 +1,3 @@ +export type CommonTaskCardProps = { + title?: string; +}; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 1e67c8b..9151df3 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -19,7 +19,9 @@ export { default as Elevator } from './Elevator/Elevator.vue'; export { default as TaskCard } from './Card/TaskCard.vue'; export { default as MineAgreementSignCard } from './Card/MineAgreementSignCard.vue'; +export { default as MyTaskCard } from './Card/MyTaskCard.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'; +export { default as Calendar } from './Calendar/Calendar.vue'; -- Gitblit v1.9.1