refactor(merchant): 重构任务相关页面

- 优化任务列表和详情页面的样式和布局- 提取任务卡片组件，提高代码复用性
- 改进任务接收和拒绝逻辑，优化用户体验
- 重构部分API接口，提高代码可维护性

packages/app/src/components/card.vue

@@ -10,6 +10,14 @@ defineProps({
   },
 })
 </script>
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
 <template>
   <view
     class="rounded-2xl bg-white shadow-[0_16rpx_20rpx_-10rpx_rgba(0,0,0,0.05)] p-3.5 overflow-hidden box-border"

packages/merchant/src/composables/task.ts

@@ -23,10 +23,12 @@ export const useTask = () => {
       color: '#f89a2e',
     },
   })
-  const getBgClass = (type: 1 | 2 | 3) => types.value[type].bgClass
+  const getBgClass = (type: number) => types.value[type].bgClass
   return {
     types,
     getBgClass,
-    getColor: (type: 1 | 2 | 3) => types.value[type].color,
+    getColor: (type: number) => types.value[type].color,
+    getTypeTitle: (type: number) => types.value[type].title,
+    getBgStyle: (type: number) => types.value[type].bgStyle,
   }
 }

packages/merchant/src/core/libs/requests.ts

@@ -236,7 +236,7 @@ export const getTaskList = (query) => httpGet<any>('/app-api/member/task/task-li
 export const getTaskDetail = (query) =>
   httpGet<AgentTask>('/app-api/member/task/task-detail', query)
 // 领取任务
-export const taskReceive = (data) => httpPost<any>('/app-api/member/task/task-receive', data)
+export const taskReceive = (data: any) => httpPost<any>('/app-api/member/task/task-receive', data)
 // 任务上报
 export const appTaskReport = (data) => httpPost<any>('/app-api/member/app-task-report/create', data)
 

packages/merchant/src/pages/agent/components/task-card.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<{ options: any }>(), { options: () => ({}
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 
+const emits = defineEmits<{ change: [] }>()
 const { types } = useTask()
 const status = ref<{ [key: number]: { title: string; bg: string; bgClass: string } }>({
   1: {
@@ -24,109 +25,118 @@ const status = ref<{ [key: number]: { title: string; bg: string; bgClass: string
   6: { title: '待确认', bg: '', bgClass: 'bg-[#f04c47]' },
 })
 const acceptingOrders = async (item: AgentTask) => {
-  uni.showLoading()
-  const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: true })
+  await uni.showLoading()
+  const res = await taskReceive({
+    brokerId: userInfo.value.userId,
+    taskId: item.id,
+    isOrders: true,
+  })
   uni.hideLoading()
-  //   initData()
+  emits('change')
 }
 const acceptingNoOrders = async (item: AgentTask) => {
-  uni.showLoading()
-  const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: false })
+  await uni.showLoading()
+  const res = await taskReceive({
+    brokerId: userInfo.value.userId,
+    taskId: item.id,
+    isOrders: false,
+  })
   uni.hideLoading()
-  //   initData()
+  emits('change')
 }
 const toDetail = () =>
   uni.navigateTo({ url: `/pages/agent/tasks/detail/index?taskId=${props.options.id}` })
 </script>
 <template>
-  <Card
-    :custom-class="`p-0 bg-gradient-to-r`"
-    style="padding: 0"
-    :custom-style="types[options.taskType as 1 | 2 | 3].bgStyle"
-    @click="toDetail"
-  >
-    <div class="flex p-4 items-center">
-      <div
-        :class="`${status[options.status]?.bgClass} w-[47px] h-[23px] px-1 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">
-          {{ status[options.status as 1 | 2 | 3].title }}
+  <div @click="toDetail">
+    <Card
+      :custom-class="`p-0 bg-gradient-to-r`"
+      style="padding: 0"
+      :custom-style="types[options.taskType as 1 | 2 | 3].bgStyle"
+    >
+      <div class="flex p-4 items-center">
+        <div
+          :class="`${status[options.status]?.bgClass} w-[47px] h-[23px] px-1 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">
+            {{ status[options.status as 1 | 2 | 3].title }}
+          </div>
+        </div>
+        <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">
+          {{ types[options.taskType].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">
+          {{ options.pointsReward }}
         </div>
       </div>
-      <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">
-        {{ types[options.taskType].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">
-        {{ options.pointsReward }}
-      </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">
-          {{ options.name }}
-        </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">
-          {{ options.bearerName }}
-        </span>
-      </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">
+            {{ options.name }}
+          </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">
+            {{ options.bearerName }}
+          </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">
-          {{ dayjs(options.startTime).format('YYYY/MM/DD') }}-{{
-            dayjs(options.endTime).format('YYYY/MM/DD')
-          }}
-        </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']">
-          目标 {{ options.storeQuantity }}
+        <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">
+            {{ dayjs(options.startTime).format('YYYY/MM/DD') }}-{{
+              dayjs(options.endTime).format('YYYY/MM/DD')
+            }}
+          </span>
         </div>
-        <template v-if="!options.receive">
-          <div class="flex-1"></div>
-          <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
-            个人完成
-            <span style="color: #2357e9">{{ options.personalCompletedNum }}</span>
-          </div>
-          <div class="flex-1"></div>
+        <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-2.5">
           <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
-            累计完成
-            <span style="color: #f1981b">{{ options.completedNum }}</span>
-          </div>
-        </template>
-        <template v-else>
-          <div class="flex-1"></div>
-          <div
-            v-if="options.receive"
-            class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex"
-            style="border: 1px solid #fe5053"
-            @click.stop="acceptingNoOrders(options)"
-          >
-            <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang_SC']">不接单</div>
+            目标 {{ options.storeQuantity }}
           </div>
-          <div
-            v-if="options.receive"
-            @click.stop="acceptingOrders(options)"
-            class="w-[68px] h-7 px-2.5 py-[3px] bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"
-          >
-            <div class="text-white text-xs font-normal font-['PingFang_SC']">接单</div>
-          </div>
-        </template>
+          <template v-if="!options.receive">
+            <div class="flex-1"></div>
+            <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
+              个人完成
+              <span style="color: #2357e9">{{ options.personalCompletedNum }}</span>
+            </div>
+            <div class="flex-1"></div>
+            <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
+              累计完成
+              <span style="color: #f1981b">{{ options.completedNum }}</span>
+            </div>
+          </template>
+          <template v-else>
+            <div class="flex-1"></div>
+            <div
+              v-if="options.receive"
+              class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] box-border rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex"
+              style="border: 1px solid #fe5053"
+              @click.stop="acceptingNoOrders(options)"
+            >
+              <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang_SC']">不接单</div>
+            </div>
+            <div
+              v-if="options.receive"
+              @click.stop="acceptingOrders(options)"
+              class="w-[68px] h-7 px-2.5 py-[3px] box-border bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"
+            >
+              <div class="text-white text-xs font-normal font-['PingFang_SC']">接单</div>
+            </div>
+          </template>
+        </div>
       </div>
-    </div>
-  </Card>
+    </Card>
+  </div>
 </template>

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

@@ -16,13 +16,8 @@ import { DataFormSchema } from '../../../../components/data-form'
 import { ComponentExposed } from 'vue-component-type-helpers'
 import { useTask } from '../../../../composables/task'
 
-const { getBgClass, getColor } = useTask()
+const { getBgClass, getColor, getTypeTitle, getBgStyle } = useTask()
 const taskId = ref()
-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)
 const publishState = ref(false)
 const formData = ref<any>({})
 const userStore = useUserStore()
@@ -92,17 +87,20 @@ const acceptingNoOrders = async () => {
   uni.hideLoading()
   initData()
 }
-onLoad(async (query: { taskId: string }) => {
-  taskId.value = query.taskId
+onLoad(async (query?: Record<string | 'taskId', string>) => {
+  taskId.value = query?.taskId
   await initData()
 })
 </script>
 <template>
   <view class="flex-grow flex flex-col p-4 gap-4" style="position: relative">
-    <Card :custom-class="`${getBgClass(Number(taskDetails?.taskType))} px-0 py-0`">
+    <Card
+      :custom-class="`px-0 py-0`"
+      :custom-style="`${taskDetails && getBgStyle(Number(taskDetails.taskType))}`"
+    >
       <div class="flex items-center py-[20px] px-[15px]">
         <div class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">
-          {{ taskDetails?.name }}
+          {{ taskDetails && getTypeTitle(Number(taskDetails.taskType)) }}
         </div>
         <div class="flex-1"></div>
         <div
@@ -114,8 +112,8 @@ onLoad(async (query: { taskId: string }) => {
           </div>
         </div>
       </div>
-      <div class="bg-[#f6f7ff]" style="border-top-left-radius: 8px; border-top-right-radius: 8px">
-        <div class="flex flex-row items-center justify-start p-[15px] gap-2">
+      <div class="bg-[#f6f7ff] rounded-t-2 p-5 flex flex-col gap-4">
+        <div class="flex flex-row items-center justify-start gap-2">
           <div style="width: 50px; height: 50px">
             <wd-circle
               :model-value="(taskDetails.completedNum / taskDetails.storeQuantity) * 100"
@@ -145,24 +143,24 @@ onLoad(async (query: { taskId: string }) => {
             </div>
           </div>
         </div>
-        <div class="flex flex-row items-center justify-between gap-2 p-[20px]">
+        <div class="flex flex-row items-center justify-between gap-2">
           <div class="flex items-center justify-center flex-col">
             <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">目标</div>
-            <div class="w-5 text-black/90 text-lg font-medium font-['DIN'] leading-normal">
+            <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
               {{ taskDetails?.storeQuantity }}
             </div>
           </div>
           <div style="width: 1px; height: 10px; background: #e8e8e8"></div>
           <div class="flex items-center justify-center flex-col">
             <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">个人完成</div>
-            <div class="w-5 text-black/90 text-lg font-medium font-['DIN'] leading-normal">
+            <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
               {{ taskDetails?.personalCompletedNum }}
             </div>
           </div>
           <div style="width: 1px; height: 5px; background: #e8e8e8"></div>
           <div class="flex items-center justify-center flex-col">
             <div class="text-black/60 text-xs font-normal font-['PingFang_SC']">累计完成</div>
-            <div class="w-5 text-black/90 text-lg font-medium font-['DIN'] leading-normal">
+            <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
               {{ taskDetails?.completedNum }}
             </div>
           </div>
@@ -303,8 +301,9 @@ onLoad(async (query: { taskId: string }) => {
         </template>
       </div>
     </Card>
-    <BottomAppBar fixed placeholder>
-      <template v-if="taskDetails?.finalType == 1 && taskDetails?.receive">
+
+    <template v-if="taskDetails?.receive">
+      <BottomAppBar fixed placeholder>
         <div class="flex items-center justify-between gap-3">
           <div
             @click="acceptingNoOrders"
@@ -327,9 +326,11 @@ onLoad(async (query: { taskId: string }) => {
             </div>
           </div>
         </div>
-      </template>
-      <template v-else>
-        <template v-if="!taskDetails?.receive && taskDetails?.finalType == '2'">
+      </BottomAppBar>
+    </template>
+    <template v-else>
+      <BottomAppBar fixed placeholder>
+        <template v-if="!taskDetails?.receive && String(taskDetails.finalType) === '2'">
           <div class="px-5 py-3 bg-[#2357e9] rounded-md justify-center items-center gap-1">
             <div
               @click="publishState = true"
@@ -339,8 +340,8 @@ onLoad(async (query: { taskId: string }) => {
             </div>
           </div>
         </template>
-      </template>
-    </BottomAppBar>
+      </BottomAppBar>
+    </template>
 
     <wd-action-sheet v-model="publishState" title="" @close="publishState = false">
       <view class="flex flex-col p-4 mt-4">

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

@@ -8,7 +8,7 @@
 </route>
 <script setup lang="ts">
 import Card from '@designer-hub/app/src/components/card.vue'
-import { getBroker, getTaskList, taskReceive } from '../../../core/libs/requests'
+import { getBroker, taskReceive } from '../../../core/libs/requests'
 import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import dayjs from 'dayjs'
@@ -17,6 +17,8 @@ import { getTasks } from '../../../core/libs/agent-requests'
 import { useTask } from '../../../composables/task'
 import { AgentTask } from '@designer-hub/app/src/core/libs/models'
 import { ComponentExposed } from 'vue-component-type-helpers'
+import TaskCard from '../../agent/components/task-card.vue'
+
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const { types } = useTask()
@@ -63,118 +65,30 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <div class="bg-white rounded-lg shadow flex m-[18px] p-[11px]" @click="toPoints">
-    <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
-      任务积分
-    </div>
-    <div class="flex-1"></div>
-    <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">
-      {{ data.points }}
+  <div class="py-4 flex-grow flex flex-col">
+    <div @click="toPoints">
+      <Card custom-class="mx-4">
+        <div class="w-full flex items-center">
+          <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
+            任务积分
+          </div>
+          <div class="flex-1"></div>
+          <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">
+            {{ data?.points ?? 0 }}
+          </div>
+          <wd-icon name="arrow-right" size="22" color="rgba(0,0,0,.75)"></wd-icon>
+        </div>
+      </Card>
     </div>
-    <div class="w-6 h-6 relative"></div>
-  </div>
-
-  <PageHelperEvo ref="pageHelperRef" :request="getTasks" :query="query">
-    <template #default="{ source }">
-      <div class="flex-grow flex flex-col gap-4 p-4">
-        <template v-for="item in source?.list" :key="item.id">
-          <div @click="toDetail(item)">
-            <Card :custom-class="`${types[item.taskType].bgClass} p-0`" style="padding: 0">
-              <div class="flex p-4 items-center">
-                <div
-                  :class="`${status[item.status].bgClass} w-[47px] h-[23px] px-1 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"
-                  >
-                    {{ status[item.status].title }}
-                  </div>
-                </div>
-                <div
-                  class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none"
-                >
-                  {{ types[item.taskType].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">
-                  {{ item.pointsReward }}
-                </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">
-                    {{ item.name }}
-                  </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">
-                    {{ item.bearerName }}
-                  </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">
-                    {{ dayjs(item.startTime).format('YYYY/MM/DD') }}-{{
-                      dayjs(item.endTime).format('YYYY/MM/DD')
-                    }}
-                  </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']">
-                    目标 {{ item.storeQuantity }}
-                  </div>
-                  <template v-if="!item.receive">
-                    <div class="flex-1"></div>
-                    <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
-                      个人完成
-                      <span style="color: #2357e9">{{ item.personalCompletedNum }}</span>
-                    </div>
-                    <div class="flex-1"></div>
-                    <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
-                      累计完成
-                      <span style="color: #f1981b">{{ item.completedNum }}</span>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div class="flex-1"></div>
-                    <div
-                      v-if="item.receive"
-                      class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex"
-                      style="border: 1px solid #fe5053"
-                      @click.stop="acceptingNoOrders(item)"
-                    >
-                      <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang_SC']">
-                        不接单
-                      </div>
-                    </div>
-                    <div
-                      v-if="item.receive"
-                      @click.stop="acceptingOrders(item)"
-                      class="w-[68px] h-7 px-2.5 py-[3px] bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"
-                    >
-                      <div class="text-white text-xs font-normal font-['PingFang_SC']">接单</div>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </Card>
-          </div>
-        </template>
-      </div>
-    </template>
-  </PageHelperEvo>
+    <PageHelperEvo ref="pageHelperRef" :request="getTasks" :query="query">
+      <template #default="{ source }">
+        <div class="flex-grow flex flex-col gap-4 p-4">
+          <template v-for="item in source?.list" :key="item.id">
+            <TaskCard :options="item"></TaskCard>
+          </template>
+        </div>
+      </template>
+    </PageHelperEvo>
+  </div>
 </template>

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

@@ -111,7 +111,6 @@ onShareAppMessage(() => ({}))
       <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false">
         <template #left>
           <div
-            @click="toAddReporting"
             class="ml-1 text-center text-white text-lg font-normal font-['PingFang_SC'] leading-relaxed"
           >
             今日待办
@@ -184,13 +183,15 @@ onShareAppMessage(() => ({}))
             custom-class="mb-5"
           ></SectionHeading>
           <div class="flex overflow-x-auto whitespace-nowrap mx--4 px-4 gap-4 box-border">
-            <Card v-if="!tasks.list.length">
+            <Card custom-class="w-full" v-if="!tasks.list.length">
               <wd-status-tip image="search" tip="当前暂无未开始/进行中的任务" />
             </Card>
 
             <template v-for="(it, i) in tasks.list" :key="i">
               <div class="inline-block">
-                <div class="w-[calc(75vw)]"><TaskCard :options="it"></TaskCard></div>
+                <div class="w-[calc(75vw)]">
+                  <TaskCard :options="it" @change="setTasks()"></TaskCard>
+                </div>
               </div>
             </template>
           </div>