designer-hub/packages/merchant/src/pages/home/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'
// eslint-disable-next-line import/named
import { appTaskReport, getTaskDetail } from '@/core/libs/requests'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
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 current = ref<number>(10)
const type = ref(1)
const publishState = ref(false)
const formData = ref<any>({})
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const taskDetails = ref()
const customerSchema = ref({
  num: {
    type: 'TextField',
    label: '个人完成量:',
    props: {
      labelWidth: '126rpx',
      placeholder: '请输入个人完成量',
    },
  },
  remark: {
    type: 'textarea',
    label: '上报说明:',
    props: {
      labelWidth: '126rpx',
      placeholder: '请输入上报说明',
    },
  },
})
const initData = async () => {
  const res = await getTaskDetail({ brokerId: userInfo.value.userId, taskId: taskId.value })
  taskDetails.value = res.data
}
const submitTask = async (data) => {
  uni.showLoading()

  console.log(formData.value)
  const res = await appTaskReport({
    brokerId: userInfo.value.userId,
    taskId: taskId.value,
    ...formData.value,
  })
  uni.hideLoading()
  publishState.value = false
}
// {
//   "id": 5092,
//   "taskId": 24266,
//   "brokerId": 22306,
//   "reason": "不香",
//   "remark": "你猜",
//   "num": 0,
//   "crateTime": ""
// }
onLoad(async (query: { 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="`${types[type].bgClass} px-0 py-0`">
      <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 }}
        </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">
            {{ taskDetails?.statusName }}
          </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 style="width: 50px; height: 50px">
            <wd-circle v-model="current" :size="50" color="rgba(66, 113, 255, 1)"></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="text-[#ff2d2d] text-[22px] font-medium font-['DIN'] leading-normal">
              {{ taskDetails?.pointsReward }}
            </div>
            <div class="text-[#ff2d2d] text-xs font-normal font-['PingFang_SC'] leading-normal">
              积分
            </div>
          </div>
        </div>
        <div class="flex flex-row items-center justify-between gap-2 p-[20px]">
          <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">
              {{ 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">
              {{ 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">
              {{ taskDetails?.completedNum }}
            </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">
            <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">
          <div class="flex gap-2.5 p-3.5 bg-[#f7fbff] items-center rounded-[10px]">
            <img class="w-11 h-11 rounded-full" :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 class="bg-[#f7fbff] rounded-[10px] py-[22px] px-[16px] mt-[20px]">
        <template v-for="item in taskDetails?.reportList">
          <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-[#2357e9] text-xs font-normal font-['PingFang SC'] leading-normal">
              {{ item.status == 0 ? '审核通过' : 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>
      </div>
    </Card>
    <BottomAppBar fixed placeholder>
      <template v-if="taskDetails?.finalType == 1">
        <div class="flex items-center justify-between gap-3">
          <div
            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
            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>
      </template>
      <template v-else>
        <template v-if="!taskDetails?.receive && taskDetails?.finalType == 2">
          <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>
        </template>
      </template>
    </BottomAppBar>

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