feat(merchant): 新增任务详情页面

packages/merchant/src/pages.json

@@ -177,6 +177,14 @@
       }
     },
     {
+      "path": "pages/home/tasks/detail/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "任务详情",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/mine/authentication/submit/success/index",
       "type": "page",
       "style": {

packages/merchant/src/pages/home/tasks/detail/index.vue

@@ -0,0 +1,138 @@
+<route lang="yaml">
+style:
+  navigationBarTitleText: 任务详情
+  navigationBarBackgroundColor: '#fff'
+</route>
+<script lang="ts" setup>
+import Card from '@designer-hub/app/src/components/card.vue'
+import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
+
+const types = ref({
+  1: { title: '到店', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
+  2: { title: '订单', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
+})
+const type = ref(1)
+</script>
+<template>
+  <view class="flex-grow flex flex-col p-4 gap-4">
+    <Card :custom-class="[types[type].bgClass, 'p-0']">
+      <div class="flex p-4 items-center">
+        <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-none">
+          目标{{ types[type].title }}（30）量
+        </div>
+        <div class="flex-1"></div>
+        <div
+          class="w-[47px] h-[23px] px-1 bg-[#2357e9] rounded border justify-center items-center gap-2.5 inline-flex"
+        >
+          <div class="text-right text-white text-xs font-normal font-['PingFang SC'] leading-tight">
+            进行中
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
+        <div
+          class="grid grid-cols-[2fr_2fr_3fr] items-center border-b border-b-solid border-b-[#efefef] pb-1.5"
+        >
+          <div class="flex items-center">
+            <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标</div>
+            <div class="ml-2 text-black/90 text-lg font-medium font-['DIN'] leading-normal">30</div>
+          </div>
+          <div class="flex items-center justify-center">
+            <div class="text-[#2357e9] text-sm font-normal font-['PingFang SC']">完成</div>
+            <div class="ml-2 text-[#2357e9] text-lg font-medium font-['DIN'] leading-normal">
+              22
+            </div>
+          </div>
+          <div class="flex items-center justify-end">
+            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
+              奖励积分
+            </div>
+            <div class="ml-2 text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">
+              2000
+            </div>
+          </div>
+        </div>
+        <div>
+          <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+            材料商：
+          </span>
+          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+            imola
+          </span>
+        </div>
+        <div>
+          <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+            品牌：
+          </span>
+          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+            imola瓷砖
+          </span>
+        </div>
+        <div>
+          <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+            任务时间：
+          </span>
+          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+            2024/06/07-2024/09/16
+          </span>
+        </div>
+        <div>
+          <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+            提前结束时间：
+          </span>
+          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+            2024/06/07 10:20
+          </span>
+        </div>
+        <div class="w-[310px] h-[42px]">
+          <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal">
+            备注说明：
+          </span>
+          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
+            平台统计预计在本月底进行截止请注意时间
+          </span>
+        </div>
+      </div>
+    </Card>
+    <Card>
+      <div class="flex items-center">
+        <div class="mr-2.5 w-1 h-4 rotate-180 bg-[#2357e9] rounded-[20px]"></div>
+        <SectionHeading title="数据明细" size="base"></SectionHeading>
+      </div>
+      <div class="flex flex-col gap-4 mt-5">
+        <div class="flex gap-2.5 p-3.5 bg-[#f7fbff] items-center rounded-[10px]">
+          <img class="w-11 h-11 rounded-full" src="https://via.placeholder.com/44x44" />
+          <div class="flex-1 flex flex-col gap-2">
+            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
+              王一博
+            </div>
+            <div class="text-black/30 text-sm font-normal font-['PingFang SC'] leading-none">
+              打卡imola瓷砖
+            </div>
+          </div>
+          <div class="flex items-start h-full">
+            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+              2024/04/01 11:25
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-2.5 p-3.5 bg-[#f7fbff] items-center rounded-[10px]">
+          <img class="w-11 h-11 rounded-full" src="https://via.placeholder.com/44x44" />
+          <div class="flex-1 flex flex-col gap-2">
+            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
+              王一博
+            </div>
+            <div class="text-black/30 text-sm font-normal font-['PingFang SC'] leading-none">
+              打卡imola瓷砖
+            </div>
+          </div>
+          <div class="h-full flex items-start">
+            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
+              2024/04/01 11:25
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  </view>
+</template>

packages/merchant/src/pages/home/tasks/index.vue

@@ -42,65 +42,72 @@ const types = ref({
   1: { title: '到店', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
   2: { title: '订单', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
 })
+const toDetail = async () => {
+  await uni.navigateTo({ url: '/pages/home/tasks/detail/index' })
+}
 </script>
 <template>
   <div class="flex-grow flex flex-col gap-4 p-4">
-    <template v-for="{ id, type } of tasks" :key="id">
-      <Card :custom-class="[types[type].bgClass, 'p-0']">
-        <div class="flex p-4 items-center">
-          <div
-            class="w-[47px] h-[23px] px-1 bg-[#2357e9] rounded border justify-center items-center gap-2.5 inline-flex"
-          >
+    <template v-for="({ type }, i) of tasks" :key="i">
+      <div @click="toDetail()">
+        <Card :custom-class="`${types[type].bgClass} p-0`">
+          <div class="flex p-4 items-center">
             <div
-              class="text-right text-white text-xs font-normal font-['PingFang SC'] leading-tight"
+              class="w-[47px] h-[23px] px-1 bg-[#2357e9] rounded border justify-center items-center gap-2.5 inline-flex"
             >
-              进行中
+              <div
+                class="text-right text-white text-xs font-normal font-['PingFang SC'] leading-tight"
+              >
+                进行中
+              </div>
             </div>
+            <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang SC'] leading-none">
+              {{ types[type].title }}量
+            </div>
+            <div class="flex-1"></div>
+            <div class="mx-1.5 text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
+              奖励积分
+            </div>
+            <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">2000</div>
           </div>
-          <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang SC'] leading-none">
-            {{ types[type].title }}量
-          </div>
-          <div class="flex-1"></div>
-          <div class="mx-1.5 text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
-            奖励积分
-          </div>
-          <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">2000</div>
-        </div>
-        <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
-          <div>
-            <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
-              材料商：
-            </span>
-            <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
-              imola
-            </span>
-          </div>
-          <div>
-            <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
-              品牌：
-            </span>
-            <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
-              imola瓷砖
-            </span>
-          </div>
-          <div>
-            <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
-              任务时间：
-            </span>
-            <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
-              2024/06/07-2024/09/16
-            </span>
-          </div>
-          <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-1.5">
-            <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标</div>
-            <div class="ml-2 text-black/90 text-lg font-medium font-['DIN'] leading-normal">30</div>
-            <div class="ml-12 text-[#2357e9] text-sm font-normal font-['PingFang SC']">完成</div>
-            <div class="ml-2 text-[#2357e9] text-lg font-medium font-['DIN'] leading-normal">
-              22
+          <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
+            <div>
+              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+                材料商：
+              </span>
+              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+                imola
+              </span>
+            </div>
+            <div>
+              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+                品牌：
+              </span>
+              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+                imola瓷砖
+              </span>
+            </div>
+            <div>
+              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
+                任务时间：
+              </span>
+              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
+                2024/06/07-2024/09/16
+              </span>
+            </div>
+            <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-1.5">
+              <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标</div>
+              <div class="ml-2 text-black/90 text-lg font-medium font-['DIN'] leading-normal">
+                30
+              </div>
+              <div class="ml-12 text-[#2357e9] text-sm font-normal font-['PingFang SC']">完成</div>
+              <div class="ml-2 text-[#2357e9] text-lg font-medium font-['DIN'] leading-normal">
+                22
+              </div>
             </div>
           </div>
-        </div>
-      </Card>
+        </Card>
+      </div>
     </template>
   </div>
 </template>

packages/merchant/src/pages/home/tasks/types.ts

@@ -0,0 +1,4 @@
+export const types = ref({
+  1: { title: '到店', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
+  2: { title: '订单', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
+})

packages/merchant/src/types/uni-pages.d.ts

@@ -19,6 +19,7 @@ interface NavigateToOptions {
        "/pages/publish/cases/index" |
        "/pages/publish/moment/index" |
        "/pages/publish/tags/index" |
+       "/pages/home/tasks/detail/index" |
        "/pages/mine/authentication/submit/success/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}