From d4afc7562a9e2eab52e552834dd7c4c653da6c01 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期二, 11 二月 2025 18:04:32 +0800
Subject: [PATCH] feat: 任务详情
---
apps/cMiniApp/src/components/Menu/Menu.vue | 8
apps/cMiniApp/src/pages/home/index.vue | 48 +++-
apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss | 119 +++++++++++
packages/components/src/Card/TaskPrice.vue | 3
apps/cMiniApp/src/assets/task/icon-attention.png | 0
apps/cMiniApp/src/assets/task/icon-attention-active.png | 0
apps/cMiniApp/src/components/Menu/menu.scss | 8
apps/cMiniApp/src/components/Chunk/Cell.vue | 10
packages/components/src/Card/TaskCard.vue | 6
packages/components/src/Tabs/tabs.ts | 4
apps/cMiniApp/src/assets/task/icon-share.png | 0
packages/components/src/index.ts | 4
apps/cMiniApp/src/constants/router.ts | 4
apps/cMiniApp/src/app.config.ts | 4
apps/bMiniApp/src/components/Menu/menu.scss | 4
apps/cMiniApp/src/pages/home/HomeQueryMenuView.vue | 44 ++++
apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.config.ts | 3
packages/components/src/Menu/QueryMenuItem.vue | 39 +++
packages/components/src/Menu/QueryMenuView.vue | 47 ++++
packages/components/src/Form/ProRadio.vue | 54 +++++
apps/cMiniApp/project.private.config.json | 7
apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue | 101 ++++++++++
apps/cMiniApp/src/assets/task/icon-safe.png | 0
apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.vue | 17 +
apps/cMiniApp/project.config.json | 2
packages/components/src/Tabs/ProTabs.vue | 33 +++
26 files changed, 533 insertions(+), 36 deletions(-)
diff --git a/apps/bMiniApp/src/components/Menu/menu.scss b/apps/bMiniApp/src/components/Menu/menu.scss
index ed7a058..e8fbe15 100644
--- a/apps/bMiniApp/src/components/Menu/menu.scss
+++ b/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 {
diff --git a/apps/cMiniApp/project.config.json b/apps/cMiniApp/project.config.json
index 75e8651..cc53dd5 100644
--- a/apps/cMiniApp/project.config.json
+++ b/apps/cMiniApp/project.config.json
@@ -51,5 +51,5 @@
"ignore": [],
"include": []
},
- "appid": "wx88251c84f5cd886b"
+ "appid": "wxb9e0baf4f87aa0de"
}
\ No newline at end of file
diff --git a/apps/cMiniApp/project.private.config.json b/apps/cMiniApp/project.private.config.json
index 3cfa160..dbee23d 100644
--- a/apps/cMiniApp/project.private.config.json
+++ b/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": "",
diff --git a/apps/cMiniApp/src/app.config.ts b/apps/cMiniApp/src/app.config.ts
index 78083e0..c20859f 100644
--- a/apps/cMiniApp/src/app.config.ts
+++ b/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': {
diff --git a/apps/cMiniApp/src/assets/task/icon-attention-active.png b/apps/cMiniApp/src/assets/task/icon-attention-active.png
new file mode 100644
index 0000000..b1c6265
--- /dev/null
+++ b/apps/cMiniApp/src/assets/task/icon-attention-active.png
Binary files differ
diff --git a/apps/cMiniApp/src/assets/task/icon-attention.png b/apps/cMiniApp/src/assets/task/icon-attention.png
new file mode 100644
index 0000000..eba95ca
--- /dev/null
+++ b/apps/cMiniApp/src/assets/task/icon-attention.png
Binary files differ
diff --git a/apps/cMiniApp/src/assets/task/icon-safe.png b/apps/cMiniApp/src/assets/task/icon-safe.png
new file mode 100644
index 0000000..0addf65
--- /dev/null
+++ b/apps/cMiniApp/src/assets/task/icon-safe.png
Binary files differ
diff --git a/apps/cMiniApp/src/assets/task/icon-share.png b/apps/cMiniApp/src/assets/task/icon-share.png
new file mode 100644
index 0000000..546e699
--- /dev/null
+++ b/apps/cMiniApp/src/assets/task/icon-share.png
Binary files differ
diff --git a/apps/cMiniApp/src/components/Chunk/Cell.vue b/apps/cMiniApp/src/components/Chunk/Cell.vue
index 81a39f9..4b91124 100644
--- a/apps/cMiniApp/src/components/Chunk/Cell.vue
+++ b/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;
}
}
diff --git a/apps/cMiniApp/src/components/Menu/Menu.vue b/apps/cMiniApp/src/components/Menu/Menu.vue
index 309ad7d..dbf99e6 100644
--- a/apps/cMiniApp/src/components/Menu/Menu.vue
+++ b/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: {
diff --git a/apps/cMiniApp/src/components/Menu/menu.scss b/apps/cMiniApp/src/components/Menu/menu.scss
index ed7a058..4641c59 100644
--- a/apps/cMiniApp/src/components/Menu/menu.scss
+++ b/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;
}
}
diff --git a/apps/cMiniApp/src/constants/router.ts b/apps/cMiniApp/src/constants/router.ts
index 23c1956..59ab551 100644
--- a/apps/cMiniApp/src/constants/router.ts
+++ b/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',
diff --git a/apps/cMiniApp/src/pages/home/HomeQueryMenuView.vue b/apps/cMiniApp/src/pages/home/HomeQueryMenuView.vue
new file mode 100644
index 0000000..a6e9304
--- /dev/null
+++ b/apps/cMiniApp/src/pages/home/HomeQueryMenuView.vue
@@ -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>
diff --git a/apps/cMiniApp/src/pages/home/index.vue b/apps/cMiniApp/src/pages/home/index.vue
index 62093b5..d6483eb 100644
--- a/apps/cMiniApp/src/pages/home/index.vue
+++ b/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">
diff --git a/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue b/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue
new file mode 100644
index 0000000..8986d91
--- /dev/null
+++ b/apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue
@@ -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>
diff --git a/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.config.ts b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.config.ts
new file mode 100644
index 0000000..305fdb1
--- /dev/null
+++ b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+ disableScroll: true,
+});
diff --git a/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss
new file mode 100644
index 0000000..3238fc8
--- /dev/null
+++ b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.scss
@@ -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;
+ }
+ }
+}
diff --git a/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.vue b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.vue
new file mode 100644
index 0000000..4e34093
--- /dev/null
+++ b/apps/cMiniApp/src/subpackages/task/taskDetail/taskDetail.vue
@@ -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>
diff --git a/packages/components/src/Card/TaskCard.vue b/packages/components/src/Card/TaskCard.vue
index 01186b3..7285ced 100644
--- a/packages/components/src/Card/TaskCard.vue
+++ b/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;
diff --git a/packages/components/src/Card/TaskPrice.vue b/packages/components/src/Card/TaskPrice.vue
index b359093..c2297c9 100644
--- a/packages/components/src/Card/TaskPrice.vue
+++ b/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 {
diff --git a/packages/components/src/Form/ProRadio.vue b/packages/components/src/Form/ProRadio.vue
new file mode 100644
index 0000000..c08e029
--- /dev/null
+++ b/packages/components/src/Form/ProRadio.vue
@@ -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>
diff --git a/packages/components/src/Menu/QueryMenuItem.vue b/packages/components/src/Menu/QueryMenuItem.vue
new file mode 100644
index 0000000..62ed33f
--- /dev/null
+++ b/packages/components/src/Menu/QueryMenuItem.vue
@@ -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>
diff --git a/packages/components/src/Menu/QueryMenuView.vue b/packages/components/src/Menu/QueryMenuView.vue
new file mode 100644
index 0000000..1d34000
--- /dev/null
+++ b/packages/components/src/Menu/QueryMenuView.vue
@@ -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>
diff --git a/packages/components/src/Tabs/ProTabs.vue b/packages/components/src/Tabs/ProTabs.vue
index b2c7c8c..e4d8c51 100644
--- a/packages/components/src/Tabs/ProTabs.vue
+++ b/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>
diff --git a/packages/components/src/Tabs/tabs.ts b/packages/components/src/Tabs/tabs.ts
index 4647f84..5e1dfeb 100644
--- a/packages/components/src/Tabs/tabs.ts
+++ b/packages/components/src/Tabs/tabs.ts
@@ -90,6 +90,10 @@
type: Boolean,
default: false,
},
+ showSmile: {
+ type: Boolean,
+ default: true,
+ },
};
export const TypeOfFun = (value: any) => {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 5a0bf6e..f3af072 100644
--- a/packages/components/src/index.ts
+++ b/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';
--
Gitblit v1.9.1