fix: task

zhengyiming

2025-02-12 06a7a72a7b6dd4ef2c0c70314dfc3d1f99768c5d

fix: task

 apps/cMiniApp/project.private.config.json

@@ -9,6 +9,20 @@
        "miniprogram": {
            "list": [
                {
                    "name": "验收详情",
                    "pathName": "subpackages/task/taskCheckDetail/taskCheckDetail",
                    "query": "id=57a8f533-2a46-7a88-e008-3a1775810dd2",
                    "launchMode": "default",
                    "scene": null
                },
                {
                    "name": "提交验收",
                    "pathName": "subpackages/task/taskSubmitCheck/taskSubmitCheck",
                    "query": "id=57a8f533-2a46-7a88-e008-3a1775810dd2",
                    "launchMode": "default",
                    "scene": null
                },
                {
                    "name": "任务",
                    "pathName": "pages/task/task",
                    "query": "",

 apps/cMiniApp/src/app.config.ts

@@ -86,7 +86,12 @@
    },
    {
      root: 'subpackages/task',
      pages: ['taskDetail/taskDetail', 'companyDetail/companyDetail'],
      pages: [
        'taskDetail/taskDetail',
        'companyDetail/companyDetail',
        'taskSubmitCheck/taskSubmitCheck',
        'taskCheckDetail/taskCheckDetail',
      ],
    },
    {
      root: 'subpackages/user',

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

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

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

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

 apps/cMiniApp/src/constants/router.ts

@@ -12,6 +12,8 @@

  taskDetail = '/subpackages/task/taskDetail/taskDetail',
  companyDetail = '/subpackages/task/companyDetail/companyDetail',
  taskSubmitCheck = '/subpackages/task/taskSubmitCheck/taskSubmitCheck',
  taskCheckDetail = '/subpackages/task/taskCheckDetail/taskCheckDetail',

  // userInfo = '/subpackages/setting/userInfo/userInfo',
  // setting = '/subpackages/setting/setting/setting',

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

@@ -16,7 +16,7 @@
          ></BlSearchbar>
        </div>
        <div class="city-btn" @click="goCitySelect">
          <Location2 :size="16" />
          <img :src="IconLocaltion" class="city-btn-icon" />
          <div class="city-btn-text">{{ locationCity }}</div>
        </div>
      </div>
@@ -73,6 +73,7 @@
import IconLogo from '@/assets/home/icon-logo.png';
import { TaskCard, ProTabs, ProTabPane } from '@12333/components';
import HomeQueryMenuView from './HomeQueryMenuView.vue';
import IconLocaltion from '@/assets/task/icon-localtion.png';

const { locationCity } = useUser();

@@ -134,6 +135,11 @@
      padding-left: 36px;
      color: boleGetCssVar('text-color', 'primary');

      .city-btn-icon {
        width: 40px;
        height: 40px;
      }

      .city-btn-text {
        max-width: 200px;
        @include ellipsis;

 apps/cMiniApp/src/pages/task/InnerPage.vue

@@ -59,8 +59,11 @@
);

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

 apps/cMiniApp/src/styles/var.scss

@@ -9,7 +9,7 @@
    'body-background-color': $body-background-color,
    'title-color': #444444,
    'shadow-color': rgba(0, 0, 0, 0.15),
    'warning': #ef9c00,
    'warning': #ff7d00,
    'danger': #fe3333,
    'success': #31b573,
    'info': #e9e8e8,

 apps/cMiniApp/src/subpackages/mine/editMineInfo/editMineInfo.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout class="index-page-wrapper" :title="'编辑个人信息'">
  <PageLayout class="index-page-wrapper" :title="'编辑个人信息'" has-border>
    <InnerPage></InnerPage>
  </PageLayout>
</template>

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

New file
@@ -0,0 +1,130 @@
<template>
  <ContentScrollView style="background-color: transparent">
    <MyTaskCard :showMyTaskArrow="false"></MyTaskCard>
    <div class="taskCheckDetail-status-wrapper">
      <div class="taskCheckDetail-status-title">验收照片</div>
      <div
        class="taskCheckDetail-status"
        :style="{
          color: Colors.Warning,
        }"
      >
        待验收
      </div>
    </div>
    <div class="taskCheckDetail-time">2024.11.14 9:28:39</div>
    <nut-grid
      square
      :column-num="3"
      :border="false"
      :gutter="20"
      v-if="list.length > 0"
      class="taskCheckDetail-img-grid"
    >
      <nut-grid-item
        v-for="(item, index) in list"
        :key="item"
        class="publish-circle-friend-file-grid-item"
      >
        <div class="taskCheckDetail-img-grid-item">
          <PreviewImage :src="item" class="taskCheckDetail-img" :urls="list" />
        </div>
      </nut-grid-item>
    </nut-grid>
  </ContentScrollView>
  <!-- <div class="taskCheckDetail-tips-wrapper">
    <div class="taskCheckDetail-tips-text">您尚未绑定银行卡，暂时无法结算服务费</div>
    <div class="taskCheckDetail-tips-btn">立即绑定银行卡信息</div>
  </div> -->
</template>

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

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',
]);
</script>

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

.taskCheckDetail-page-wrapper {
  .taskCheckDetail-status-wrapper {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 16px;

    .taskCheckDetail-status-title {
      color: boleGetCssVar('text-color', 'primary');
      flex: 1;
      min-width: 0;
    }
  }

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

  .taskCheckDetail-img-grid {
    padding: 0 !important;

    .publish-circle-friend-file-grid-item {
      .nut-grid-item__content--square {
        padding: 0;
        border: none;
        display: block;
        background-color: transparent;
      }
    }

    .taskCheckDetail-img-grid-item {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      padding: 20px;
    }

    .taskCheckDetail-img {
      border-radius: 8px;
      width: 100% !important;
      height: 100%;
      object-fit: cover;
    }
  }

  .taskCheckDetail-tips-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    padding: 20px 0;

    .taskCheckDetail-tips-text {
      color: boleGetCssVar('text-color', 'secondary');
    }

    .taskCheckDetail-tips-btn {
      color: boleGetCssVar('color', 'primary');
    }
  }
}
</style>

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

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

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

New file
@@ -0,0 +1,13 @@
<template>
  <PageLayoutWithBg class="taskCheckDetail-page-wrapper" title="验收详情">
    <InnerPage />
  </PageLayoutWithBg>
</template>

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

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

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

@@ -16,7 +16,7 @@
        </div>
        <div class="taskDetail-address-wrapper">
          <div class="taskDetail-address-title-wrapper">
            <img :src="IconAttentioActive" class="taskDetail-address-title-icon" />
            <img :src="IconLocaltion" class="taskDetail-address-title-icon" />
            <div class="taskDetail-address-title">宁波柏悦酒店</div>
          </div>
          <div class="taskDetail-address-info-wrapper">
@@ -75,7 +75,7 @@
        :isFlex="false"
        openType="share"
      ></PageFooterAction>
      <PageFooterAction :icon="IconShare" text="手机" :isFlex="false"></PageFooterAction>
      <PageFooterAction :icon="IconPhone" text="手机" :isFlex="false"></PageFooterAction>
      <PageFooterBtn type="primary">报名</PageFooterBtn>
    </PageFooter>
  </LoadingLayout>
@@ -91,7 +91,9 @@
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 IconPhone from '@/assets/task/icon-phone.png';
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';

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

@@ -142,6 +142,4 @@
      }
    }
  }

  
}

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

New file
@@ -0,0 +1,50 @@
<template>
  <ContentScrollView :paddingH="false">
    <nut-form :model-value="form" ref="formRef" :rules="rules">
      <nut-form-item label="上传照片:" class="bole-form-item alignTop" prop="imgUrl" required>
        <Uploader
          v-model:file-list="form.imgUrl"
          :maximum="9"
          :limitFileSize="10"
          class="bole-uploader nopaddingtop"
        >
        </Uploader>
      </nut-form-item>
    </nut-form>
  </ContentScrollView>
  <PageFooter :isOnlyAction="false">
    <PageFooterBtn type="primary" @click="handleSubmit()">提交</PageFooterBtn>
  </PageFooter>
</template>

<script setup lang="ts">
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import { FileItem } from '@nutui/nutui-taro/dist/types/__VUE/uploader/type';
import { FormValidator } from '@12333/utils';

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

const form = reactive({
  imgUrl: [] as FileItem[],
});

const rules = reactive<FormRules>({
  imgUrl: [{ required: true, message: '请上传照片', validator: FormValidator.validatorArray }],
});

const formRef = ref<any>(null);

function handleSubmit() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
    }
  });
}
</script>

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

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

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

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

New file
@@ -0,0 +1,13 @@
<template>
  <PageLayout class="taskSubmitCheck-page-wrapper" title="提交验收" has-border>
    <InnerPage />
  </PageLayout>
</template>

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

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

 packages/components/src/Calendar/Calendar.vue

@@ -1,16 +1,17 @@
<template>
  <div class="bole-calendar-wrapper">
    <div class="bole-calendar-inner">
    <div :class="['bole-calendar-inner', { isCollapse }]">
      <nut-calendar-card v-model="model" class="bole-calendar"></nut-calendar-card>
    </div>
    <div class="bole-calendar-arrow">
      <DownArrow :size="12" />
    <div :class="['bole-calendar-arrow', { active: !isCollapse }]" @click="toggle">
      <DownArrow :size="12" :class="['bole-calendar-arrow-icon']" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { DownArrow } from '@nutui/icons-vue-taro';
import { useToggle } from 'senin-mini/hooks';

defineOptions({
  name: 'Calendar',
@@ -20,6 +21,8 @@

// const props = withDefaults(defineProps<Props>(), {});
const model = defineModel<Date | Date[]>();

const { isCollapse, toggle } = useToggle(true);
</script>

<style lang="scss">
@@ -31,13 +34,28 @@
  }

  .bole-calendar-inner {
    height: 500px;
    overflow: hidden;
    overflow: auto;
    transition: all 1s ease;
    max-height: 2000px;

    &.isCollapse {
      max-height: 500px;
    }
  }

  .bole-calendar-arrow {
    display: flex;
    justify-content: center;

    .bole-calendar-arrow-icon {
      transition: all 0.2s linear;
    }

    &.active {
      .bole-calendar-arrow-icon {
        transform: rotate(180deg);
      }
    }
  }
}
</style>

 packages/components/src/Card/MyTaskCard.vue

@@ -1,7 +1,8 @@
<template>
  <TaskCard v-bind="props" :show-actions="false" class="my-task-card-wrapper">
    <template #title-right>
      <RectRight :size="12" class="my-task-card-arrow" />
      <RectRight :size="12" class="my-task-card-arrow" v-if="showMyTaskArrow" />
      <div v-else></div>
    </template>
    <div class="my-task-card-time">2025年2月5日 至 2025年3月5日</div>
  </TaskCard>
@@ -16,7 +17,13 @@
  name: 'MyTaskCard',
});

const props = withDefaults(defineProps<CommonTaskCardProps>(), {});
type Props = CommonTaskCardProps & {
  showMyTaskArrow?: boolean;
};

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

<style lang="scss">