designer-hub/packages/merchant/src/pages/agent/tasks/detail/index.vue

<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'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import DataForm from '@/components/data-form.vue'
import { appTaskReport, getTaskDetail, taskReceive } from '../../../../core/libs/requests'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import { DataFormSchema } from '../../../../components/data-form'
import { ComponentExposed } from 'vue-component-type-helpers'
import { useTask } from '../../../../composables/task'
import { requestToast } from '@designer-hub/app/src/core/utils/common'

const { getBgClass, getColor, getTypeTitle, getBgStyle } = useTask()
const taskId = ref()
const publishState = ref(false)
const formData = ref<any>({})
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: taskDetails, run: setTaskDetails } = useRequest(() =>
  getTaskDetail({ brokerId: userInfo.value.userId, taskId: taskId.value }),
)
const dataFormRef = ref<ComponentExposed<typeof DataForm>>()
const customerSchema = ref<DataFormSchema>({
  num: {
    type: 'TextField',
    label: '个人完成量:',
    required: true,
    props: {
      placeholder: '请输入个人完成量',
    },
  },
  remark: {
    type: 'Textarea',
    label: '上报说明:',
    required: true,
    props: {
      placeholder: '请输入上报说明',
    },
  },
})
const customerRules = ref({
  num: [{ required: true, message: '请输入个人完成量', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入上报说明', trigger: 'blur' }],
})
const initData = async () => {
  await setTaskDetails()
}
const submitTask = async () => {
  await uni.showLoading()
  const { valid } = await dataFormRef.value!.validate()
  if (!valid) {
    uni.hideLoading()
    return
  }
  console.log(formData.value)
  await requestToast(
    () =>
      appTaskReport({
        brokerId: userInfo.value.userId,
        taskId: taskId.value,
        ...formData.value,
      }),
    { success: true, successTitle: '上报成功' },
  )
  uni.hideLoading()
  await setTaskDetails()
  publishState.value = false
}
const acceptingOrders = async () => {
  await uni.showLoading()
  const res = await taskReceive({
    brokerId: userInfo.value.userId,
    taskId: taskDetails.value.id,
    orders: true,
  })
  uni.hideLoading()
  await initData()
}
const acceptingNoOrders = async () => {
  await uni.showLoading()
  const res = await taskReceive({
    brokerId: userInfo.value.userId,
    taskId: taskDetails.value.id,
    orders: false,
  })
  uni.hideLoading()
  await initData()
}
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="`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 && getTypeTitle(Number(taskDetails.taskType)) }}
        </div>
        <div class="flex-1"></div>
        <div
          class="w-[47px] h-[23px] px-1 rounded border justify-center items-center gap-2.5 inline-flex"
          :style="{ backgroundColor: getColor(Number(taskDetails?.taskType)) }"
        >
          <div class="text-right text-white text-xs font-normal font-['PingFang_SC'] leading-tight">
            {{ taskDetails?.statusName }}
          </div>
        </div>
      </div>
      <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 ?? 0) / (taskDetails?.storeQuantity ?? 0)) * 100
              "
              :size="50"
              :color="getColor(Number(taskDetails?.taskType))"
              :clockwise="false"
            >
              <div class="flex flex-col items-center">
                <div class="w-[29.20px] h-[18.39px] text-black text-sm font-medium font-['DIN']">
                  {{
                    ((taskDetails?.completedNum ?? 0) / (taskDetails?.storeQuantity ?? 0)) * 100
                  }}%
                </div>
                <div
                  class="w-[22.71px] h-[10.82px] text-black/60 text-[7px] font-normal font-['PingFang_SC']"
                >
                  达成率
                </div>
              </div>
            </wd-circle>
          </div>
          <div class="flex flex-row items-center justify-start ml-[37px]">
            <div class="text-black/60 text-sm font-normal font-['PingFang_SC']">奖励积分：</div>
            <div class="flex items-end gap-1">
              <div class="text-[#ff2d2d] text-[22px] font-medium font-['DIN'] leading-22px">
                {{ taskDetails?.pointsReward }}
              </div>
              <div class="text-[#ff2d2d] text-xs font-normal font-['PingFang_SC']">积分</div>
            </div>
          </div>
        </div>
        <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="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="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="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
              {{ taskDetails?.completedNum ?? 0 }}
            </div>
          </div>
          <!--            </div>-->
        </div>
      </div>
      <div class="bg-[#ffffff] p-[14px] pt-[24px]">
        <div class="mb-[19px]">
          <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">
            {{ taskDetails?.name }}
          </span>
        </div>
        <div class="mb-[19px]">
          <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">
            {{ taskDetails?.bearerName }}
          </span>
        </div>
        <div class="mb-[19px]">
          <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">
            {{ taskDetails?.shopNames }}
          </span>
        </div>
        <div class="mb-[19px]">
          <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(taskDetails?.startTime).format('YYYY/MM/DD') }}-{{
              dayjs(taskDetails?.endTime).format('YYYY/MM/DD')
            }}
          </span>
        </div>
        <div class="mb-[19px]">
          <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">
            {{ taskDetails?.detail }}
          </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">
            {{ taskDetails?.finalTypeName }}
          </span>
        </div>
      </div>
      <div class="bg-[#ffffff] p-[14px]">
        <div class="flex items-center justify-between">
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-none">
            已接单经纪人
          </div>
          <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
            共{{ taskDetails?.brokerList.length }}人
          </div>
        </div>
        <div class="flex items-center justify-start gap-3">
          <template v-for="item in taskDetails?.brokerList" :key="item.id">
            <div class="my-[23px]">
              <img class="w-[46px] h-[46px] rounded-full" :src="item.headImgUrl" alt="" />
              <div
                class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none mt-[10px]"
              >
                {{ item.brokerName }}
              </div>
            </div>
          </template>
        </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 v-if="taskDetails?.finalType == '1'" class="flex flex-col gap-4 mt-5">
        <!--        <template v-for="item in taskDetails?.brokerList" :key="item.id">-->
        <!--          <div class="flex gap-2.5 p-3.5 bg-[#f7fbff] items-center rounded-[10px]">-->
        <!--            <wd-img width="44" height="44" round :src="item.headImgUrl" />-->
        <!--            <div class="flex-1 flex flex-col gap-2">-->
        <!--              <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">-->
        <!--                {{ item.brokerName }}-->
        <!--              </div>-->
        <!--              <div class="text-black/30 text-sm font-normal font-['PingFang_SC'] leading-none">-->
        <!--                {{ item.finalTypeName }}{{ item.shopNames }}-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="h-full flex items-start">-->
        <!--              <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">-->
        <!--                {{ dayjs(item.createTime).format('YYYY/MM/DD HH:mm') }}-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </template>-->
      </div>
      <!-- 上报-->
      <div v-else>
        <template v-for="(item, i) in taskDetails?.reportList" :key="i">
          <div class="bg-[#f7fbff] rounded-[10px] py-[22px] px-[16px] mt-[20px]">
            <div class="flex items-center justify-between">
              <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
                {{ dayjs(item.createTime).format('YYYY/MM/DD HH:mm') }}
              </div>
              <div
                class="text-xs font-normal font-['PingFang_SC'] leading-normal"
                :class="
                  { '0': 'text-[#16b032]', '1': 'text-[#2357e9]', '2': 'text-#ff2d2d' }[
                    String(item.status)
                  ]
                "
              >
                {{
                  String(item.status) === '0'
                    ? '审核通过'
                    : String(item.status) === '1'
                      ? '审核中'
                      : '驳回'
                }}
              </div>
            </div>
            <div class="mt-[7px]">
              <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
                个人完成量：
              </span>
              <span class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
                {{ item.num }}
              </span>
            </div>
            <div class="mt-[2px]">
              <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
                上报说明
              </span>
              <span class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
                ：
              </span>
              <span class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
                {{ item.remark }}
              </span>
            </div>
            <template v-if="String(item.status) === '2'">
              <div class="bg-[#e6e8f1] my-4 border-[0.5px] border-solid border-[#e6e8f1]"></div>
              <div class="text-[#ff2d2d] text-xs font-normal font-['PingFang_SC'] leading-none">
                原因：{{ item.reason }}
              </div>
            </template>
          </div>
        </template>
      </div>
    </Card>

    <template v-if="taskDetails?.receive">
      <BottomAppBar fixed placeholder>
        <div class="flex items-center justify-between gap-3">
          <div
            @click="acceptingNoOrders"
            class="grow shrink basis-0 px-5 py-3 bg-[#f2f3ff] rounded-md justify-center items-center gap-1 flex"
          >
            <div
              class="text-center text-[#ff2d2d] text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              不接单
            </div>
          </div>
          <div
            @click="acceptingOrders"
            class="grow shrink basis-0 px-5 py-3 bg-[#2357e9] rounded-md justify-center items-center gap-1 flex"
          >
            <div
              class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              接单
            </div>
          </div>
        </div>
      </BottomAppBar>
    </template>
    <template v-if="!taskDetails?.receive && String(taskDetails?.finalType) === '2'">
      <BottomAppBar fixed placeholder>
        <div class="px-5 py-3 bg-[#2357e9] rounded-md justify-center items-center gap-1">
          <div
            @click="publishState = true"
            class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-normal"
          >
            上报
          </div>
        </div>
      </BottomAppBar>
    </template>

    <wd-action-sheet v-model="publishState" title="" @close="publishState = false">
      <view class="flex flex-col p-4 mt-4">
        <DataForm
          ref="dataFormRef"
          :schema="customerSchema"
          :rules="customerRules"
          v-model="formData"
        ></DataForm>
        <div><wd-button block :round="false" @click="submitTask">提交</wd-button></div>
      </view>
    </wd-action-sheet>
  </view>
</template>