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

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { taskReceive } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import Card from '@designer-hub/app/src/components/card.vue'
import dayjs from 'dayjs'
import { useTask } from '../../../composables/task'
import { AgentTask } from '@designer-hub/app/src/core/libs/models'
const props = withDefaults(defineProps<{ options: any }>(), { options: () => ({}) })
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const { types } = useTask()
const status = ref<{ [key: number]: { title: string; bg: string; bgClass: string } }>({
  1: {
    title: '未开始',
    bg: 'bg-[#f04c47]',
    bgClass: 'bg-[#f04c47]',
  },
  2: { title: '进行中', bg: '', bgClass: 'bg-[#2357e9]' },
  3: { title: '已撤回', bg: '', bgClass: 'bg-[#f04c47]' },
  4: { title: '已完成', bg: '', bgClass: 'bg-[#f04c47]' },
  5: { title: '未完成', bg: '', bgClass: 'bg-[#abacaf]' },
  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 })
  uni.hideLoading()
  //   initData()
}
const acceptingNoOrders = async (item: AgentTask) => {
  uni.showLoading()
  const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: false })
  uni.hideLoading()
  //   initData()
}
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>
      </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>
        <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>
        <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] 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] 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>
</template>