feat:任务列表，任务详情

packages/app/src/components/bottom-app-bar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getRect, addUnit } from 'wot-design-uni/components/common/util'
-
+import { getCurrentInstance } from 'vue'
 const props = defineProps<{
   'safe-area-inset-bottom'?: boolean
   fixed?: boolean

packages/merchant/src/components/bottom-app-bar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { getRect, addUnit } from 'wot-design-uni/components/common/util'
+import { getCurrentInstance } from 'vue'
+const props = defineProps<{
+  'safe-area-inset-bottom'?: boolean
+  fixed?: boolean
+  placeholder?: boolean
+  border?: boolean
+  transparent?: boolean
+}>()
+
+const { proxy } = getCurrentInstance() as any
+const aRef = ref<HTMLElement>()
+const height = ref(0)
+const safeAreaInsets = ref()
+const setPlaceholderHeight = () => {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.bottom-app-bar', false, proxy).then((res) => {
+    height.value = res.height as number
+  })
+}
+onMounted(async () => {
+  uni.getSystemInfo({})
+  const res = await uni.getWindowInfo()
+  safeAreaInsets.value = res.safeAreaInsets
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+</script>
+<template>
+  <div :style="{ height: addUnit(height) }">
+    <div
+      class="bottom-app-bar"
+      ref="aRef"
+      :class="[
+        (fixed ?? true)
+          ? 'fixed bottom-0 left-0 right-0 after:content-empty after:w-full after:h-full after:relative'
+          : '',
+        border ? 'border-t border-t-solid border-[#ececec]' : '',
+      ]"
+    >
+      <div class="px-3.5 py-2.5" :class="[transparent ? '' : 'bg-white']">
+        <div class=""><slot></slot></div>
+      </div>
+      <div
+        class=""
+        :class="[transparent ? '' : 'bg-white']"
+        :style="{ height: `${safeAreaInsets?.bottom}rpx` }"
+      ></div>
+    </div>
+  </div>
+</template>

packages/merchant/src/components/data-form.vue

@@ -25,7 +25,7 @@ withDefaults(
   defineProps<{
     schema: {
       [key: symbol]: {
-        type: 'TextField' | 'Select' | 'Radio' | 'Submit' | 'timePick'
+        type: 'TextField' | 'Select' | 'Radio' | 'Submit' | 'timePick' | 'textarea'
         label?: string
         existing?: boolean
         props?: any
@@ -214,7 +214,14 @@ defineExpose({
   padding: 5px;
   margin-left: 5px;
 }
+:deep(.wd-textarea) {
+  background-color: #f5f7f9;
+  border-radius: 8px;
+}
 :deep(.wd-picker__cell) {
   background: transparent;
 }
+:deep(.wd-textarea__value) {
+  background: transparent;
+}
 </style>

packages/merchant/src/pages/designer/detail.vue

@@ -20,6 +20,7 @@ const tabs = ref([
   { label: '数据动态', value: 'integral' },
   { label: '跟进记录', value: 'system' },
   { label: '圈子动态', value: 'interact' },
+  { label: '兑换商品', value: 'product' },
 ])
 const toHomePage = () => {
   uni.navigateTo({ url: '/pages/designer/homepage' })
@@ -331,6 +332,40 @@ const toPointsDetails = () => {
                   </div>
                 </div>
               </view>
+              <view class="content mt-[20px]" v-if="index === 3">
+                <div class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex">
+                  <div class="bg-white rounded-2xl flex items-center justify-between w-full">
+                    <div>
+                      <img class="w-[76px] h-[101px]" src="https://via.placeholder.com/76x101" />
+                    </div>
+                    <div class="ml-[16px] flex flex-col justify-start">
+                      <div
+                        class="text-black text-base font-normal font-['PingFang SC'] leading-normal"
+                      >
+                        阿芙佳朵
+                      </div>
+                      <div
+                        class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
+                      >
+                        x2
+                      </div>
+                      <div
+                        class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
+                      >
+                        600积分
+                      </div>
+                    </div>
+                    <div class="flex-1"></div>
+                    <div>
+                      <div
+                        class="text-[#2357e9] text-xs font-normal font-['PingFang SC'] leading-normal"
+                      >
+                        已完成
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </view>
             </wd-tab>
           </block>
         </wd-tabs>

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

@@ -6,16 +6,38 @@ style:
 <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";
 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 taskType = ref(2)
+const publishState = ref(false)
+const fromModel = ref()
+const customerSchema = ref({
+  customerName: {
+    type: 'TextField',
+    label: '个人完成量:',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请输入个人完成量',
+    },
+  },
+  customerPhoneNumbe: {
+    type: 'textarea',
+    label: '上报说明:',
+    props: {
+      labelWidth: '126rpx',
+      placeholder: '请输入上报说明',
+    },
+  },
+})
 </script>
 <template>
-  <view class="flex-grow flex flex-col p-4 gap-4">
+  <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">
@@ -32,8 +54,7 @@ const type = ref(1)
       </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">
+          <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]">
@@ -143,45 +164,114 @@ const type = ref(1)
         </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>-->
+    <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="taskType == 1" 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>
+      <div v-else 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">
+            2024/04/01 11:25
+          </div>
+          <div class="text-[#2357e9] text-xs font-normal font-['PingFang SC'] leading-normal">
+            审核中
+          </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">
+            1
+          </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">
+            我邀请设计师苏小萌到IMOLA曲江新区店
+          </span>
+        </div>
+      </div>
+    </Card>
+    <BottomAppBar fixed placeholder>
+      <template v-if="taskType == 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>
+        <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>
+    </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="fromModel" ></data-form>
+<!--        <div><DataForm :schema="schema" direction="horizontal"></DataForm></div>-->
+        <div><wd-button block :round="false">提交</wd-button></div>
+      </view>
+    </wd-action-sheet>
   </view>
 </template>

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

@@ -107,7 +107,9 @@ const toDetail = async () => {
               <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标 30</div>
               <div class="flex-1"></div>
               <div 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">
-                <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang SC']">不接单</div>
+                <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang SC']">
+                  不接单
+                </div>
               </div>
               <div
                 class="w-[68px] h-7 px-2.5 py-[3px] bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"