Browse Source

fix(app): 分页

EvilDragon 4 months ago
parent
commit
26e713b01e

+ 39 - 10
packages/app/src/components/page-helper.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts" generic="S extends Object, T extends { list: S[] }">
+import { ComponentExposed } from 'vue-component-type-helpers'
 import { NetImages } from '../core/libs/net-images'
 import useRequest from '../hooks/useRequest'
 import { ref, Ref, watch, onMounted } from 'vue'
+import ZPaging from 'z-paging/components/z-paging/z-paging.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -17,12 +19,27 @@ const props = withDefaults(
 const slot = defineSlots<{
   default(props: { data: Ref<S>[]; source: T }): any
 }>()
-const { data, run: setData } = useRequest(() => props.request(props.query), { immediate: false })
+const paging = ref<ComponentExposed<typeof ZPaging>>()
+const pageNo = ref(1)
+const pageSize = ref(10)
+const { data, run: setData } = useRequest(
+  () => props.request({ pageNo: pageNo.value, pageSize: pageSize.value, ...props.query }),
+  { immediate: false },
+)
+const dataList = ref([])
+const queryList = (no, size) => {
+  console.log(no, size)
+
+  pageNo.value = no
+  pageSize.value = size
+  // setData()
+  setData().then((res) => {
+    paging.value?.complete(res.list)
+  })
+}
 watch(
   () => props.query,
   async (e) => {
-    // console.log(e)
-    // console.log('watch')
     await setData()
   },
 )
@@ -33,9 +50,10 @@ onMounted(async () => {
   }
 })
 
-// onReachBottom(() => {
-//   console.log(1111)
-// })
+onReachBottom(() => {
+  //   // console.log(1111)
+  paging.value?.doLoadMore()
+})
 const refresh = async () => {
   console.log('Page Helper Refresh')
   await setData()
@@ -46,9 +64,20 @@ defineExpose({
 </script>
 <template>
   <div class="flex-grow flex flex-col" :class="customClass">
-    <div v-if="!data?.list?.length" class="flex-grow flex items-center justify-center">
-      <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
-    </div>
-    <slot v-else :source="data as T" :data="data.list as unknown as Ref<S>[]"></slot>
+    <z-paging
+      ref="paging"
+      v-model="dataList"
+      doLoadMore="toBottom"
+      :default-page-size="10"
+      :default-page-no="1"
+      :use-page-scroll="true"
+      @query="queryList"
+    >
+      <template #empty>
+        <!-- <div v-if="!data?.list?.length" class="flex-grow flex items-center justify-center"></div> -->
+        <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
+      </template>
+      <slot :source="{ list: dataList } as T" :data="dataList as unknown as Ref<S>[]"></slot>
+    </z-paging>
   </div>
 </template>

+ 4 - 0
packages/app/src/core/libs/requests.ts

@@ -246,6 +246,10 @@ export const getTasks = (query) =>
       status: number
     }[]
   }>('/app-api/basicsetting/set-task-center/page', query)
+/**
+ * 获取发布圈子任务状态
+ */
+export const getCircleTaskStatus = () => httpGet('/app-api/member/circle/taskIntegral')
 export const getCircleTags = (query) =>
   httpGet<{
     list: {

+ 4 - 1
packages/app/src/pages/home/activity/detail/index.vue

@@ -11,6 +11,7 @@ import {
   activitySignup,
   getActivity,
   getActivitySignups,
+  getAppMemberLevelConfigs,
   getMemberLevels,
   getStudyTour,
   getStudyTourSignups,
@@ -50,7 +51,9 @@ const { data: signups, run: setSignups } = useRequest(
   () => getActivitySignups({ activityId: id.value }),
   { initialData: { list: [], total: 0 } },
 )
-const { data: levels, run: setLevels } = useRequest(() => getMemberLevels(), { initialData: [] })
+const { data: levels, run: setLevels } = useRequest(() => getAppMemberLevelConfigs(), {
+  initialData: [],
+})
 const show = ref(false)
 const successShow = ref(false)
 const listShow = ref(false)

+ 10 - 5
packages/app/src/pages/home/index.vue

@@ -17,6 +17,7 @@ import useRequest from '../../hooks/useRequest'
 import Menus from './components/menus.vue'
 import { getCircles, getSetIndexConfigs } from '../../core/libs/requests'
 import { logo } from '../../core/libs/svgs'
+import PageHelper from '@/components/page-helper.vue'
 
 defineOptions({
   name: 'Home',
@@ -115,11 +116,15 @@ onShareAppMessage(() => ({}))
       </view>
       <view class="mx-3.5 text-5 font-400">设计圈</view>
       <view class="mx-3.5">
-        <template v-for="it of circlesData.list" :key="it.id">
-          <view class="my-6">
-            <MomentItem :options="it"></MomentItem>
-          </view>
-        </template>
+        <PageHelper :request="getCircles" :query="{}">
+          <template #default="{ source }">
+            <template v-for="it of source.list" :key="it.id">
+              <view class="my-6">
+                <MomentItem :options="it"></MomentItem>
+              </view>
+            </template>
+          </template>
+        </PageHelper>
       </view>
     </view>
   </view>

+ 7 - 5
packages/app/src/pages/home/study-tour/list.vue

@@ -26,11 +26,13 @@ onMounted(async () => {})
     </div>
     <PageHelper :request="getStudyTours" :query="{}">
       <template #default="{ source }">
-        <template v-for="(it, index) in source.list" :key="index">
-          <div class="mx--2.5 my--2.5">
-            <StudyTourCard custom-class="" :options="it"></StudyTourCard>
-          </div>
-        </template>
+        <div class="py-4 flex flex-col gap-6">
+          <template v-for="(it, index) in source.list" :key="index">
+            <div class="mx--2.5 my--2.5">
+              <StudyTourCard custom-class="" :options="it"></StudyTourCard>
+            </div>
+          </template>
+        </div>
       </template>
     </PageHelper>
   </div>

+ 6 - 5
packages/app/src/pages/mine/components/tasks-card.vue

@@ -10,7 +10,7 @@ defineProps({
     default: '',
   },
   items: {
-    type: Array as PropType<Task[]>,
+    type: Array as PropType<(Task & { btnProps: any })[]>,
     default: () => [],
   },
 })
@@ -53,7 +53,7 @@ onMounted(async () => {})
           任务中心
         </div>
         <div class="flex-grow mt-4 overflow-auto">
-          <template v-for="({ taskKey, taskValue, status, id }, i) in items" :key="i">
+          <template v-for="({ taskKey, taskValue, status, id, btnProps }, i) in items" :key="i">
             <div class="flex items-center my-6">
               <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
                 {{ taskKey }}
@@ -68,10 +68,11 @@ onMounted(async () => {})
                 type="info"
                 plain
                 size="small"
-                :disabled="status"
-                @click="taskExtendsById[id]?.action()"
+                :disabled="btnProps?.disabled"
+                @click="btnProps?.onClick"
               >
-                {{ taskExtendsById[id]?.completed ? '已完成' : '去完成' }}
+                {{ btnProps?.content }}
+                <!-- {{ taskExtendsById[id]?.completed ? '已完成' : '去完成' }} -->
               </wd-button>
             </div>
           </template>

+ 67 - 15
packages/app/src/pages/mine/index.vue

@@ -13,6 +13,8 @@ import {
   getMemberUserInfo,
   getTasks,
   storeAndPunchIn,
+  getAppMemberLevelConfigs,
+  getCircleTaskStatus,
 } from '../../core/libs/requests'
 import { useUserStore } from '../../store'
 import { storeToRefs } from 'pinia'
@@ -21,7 +23,7 @@ import TasksCard from './components/tasks-card.vue'
 import { useRouter } from '../../core/utils/router'
 import { NetImages } from '../../core/libs/net-images'
 import { qrCodeString2Object, requestToast, toQrCodeString } from '../../core/utils/common'
-import { QrCodeBusinessType } from '@/core/libs/enums'
+import { QrCodeBusinessType } from '../../core/libs/enums'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -31,10 +33,48 @@ const { data, run } = useRequest(getMemberUserInfo)
 const { data: taskData, run: getTaskData } = useRequest(() => getTasks({}), {
   initialData: { list: [] },
 })
+const { data: taskStatusData, run: setTaskStatus } = useRequest(
+  async () => ({
+    data: await Promise.all<any>([
+      getCircleTaskStatus().then(({ data }) => ({
+        completed: data,
+        btnProps: {
+          content: data ? '已完成' : '去发布',
+          disabled: data,
+          onClick: () => router.push('/pages/publish/moment/index?circleType=1'),
+        },
+      })),
+      {
+        btnProps: {
+          content: '去打卡',
+          onClick: () => uni.showToast({ title: '请到店扫码完成', icon: 'none' }),
+        },
+      },
+      {
+        btnProps: {
+          content: '去邀请',
+          onClick: () => uni.showToast({ title: '敬请期待', icon: 'none' }),
+        },
+      },
+      {
+        btnProps: {
+          content: '去关注',
+          onClick: () => uni.showToast({ title: '敬请期待', icon: 'none' }),
+        },
+      },
+    ]),
+    code: 0,
+    msg: '',
+  }),
+  { initialData: [] },
+)
 const { data: designerInfo, run: setDesignerInfo } = useRequest(
   () => getDesignerInfo(userInfo.value.userId),
   { initialData: {} },
 )
+const { data: levelConfigs, run: setLevelConfigs } = useRequest(() => getAppMemberLevelConfigs(), {
+  initialData: [],
+})
 const menus = ref([
   { title: '积分明细', icon: integral, path: '/pages/mine/points/index' },
   { title: '优惠券包', icon: coupon, path: '/pages/mine/coupons/index' },
@@ -111,18 +151,6 @@ const nickNameClickHandle = async () => {
   if (isLogined.value) return
   uni.navigateTo({ url: '/pages/login/index' })
 }
-onShow(async () => {
-  if (isLogined.value) {
-    await run()
-    setUserInfo({
-      ...userInfo.value,
-      ...data.value,
-    })
-    await setDesignerInfo()
-    await getTaskData()
-    console.log(taskData.value)
-  }
-})
 const handleToAuthentication = () => {
   if (!isLogined.value) return
   uni.navigateTo({ url: '/pages/mine/authentication/index' })
@@ -161,8 +189,24 @@ const handle2Video = () => {
   // wx.openChannelsUserProfile({ finderUserName: 'sphtEhk7olIepB0' })
   uni.openChannelsUserProfile({ finderUserName: 'sphtEhk7olIepB0' })
 }
-onMounted(async () => {})
 const navBarProps = ref({ customClass: 'bg-transparent!' })
+onMounted(async () => {
+  await setLevelConfigs()
+})
+onShow(async () => {
+  if (isLogined.value) {
+    await run()
+    setUserInfo({
+      ...userInfo.value,
+      ...data.value,
+    })
+    // await setDesignerInfo()
+    // await getTaskData()
+    await Promise.all([setDesignerInfo(), getTaskData(), setTaskStatus()])
+    // console.log(taskData.value)
+    console.log(taskStatusData.value)
+  }
+})
 onPageScroll(({ scrollTop }: { scrollTop: number }) => {
   // console.log(scrollTop)
   navBarProps.value.customClass = scrollTop === 0 ? 'bg-transparent!' : ''
@@ -353,7 +397,15 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
           </div>
         </template>
       </div>
-      <TasksCard custom-class="my-6" :items="taskData.list"></TasksCard>
+      <TasksCard
+        custom-class="my-6"
+        :items="
+          taskData.list.map((it, i) => ({
+            ...it,
+            ...(taskStatusData[i] || {}),
+          }))
+        "
+      ></TasksCard>
       <SectionHeading custom-class="my-6" title="和筑巢荟一起共同成长"></SectionHeading>
       <CardMenu :items="pieces" custom-class="grid-cols-2" />
       <wd-button @click="handle2Video">视频号</wd-button>

+ 11 - 3
packages/app/src/pages/publish/moment/index.vue

@@ -16,6 +16,7 @@ import { CircleType, DictType } from '../../../core/libs/models'
 import DataForm from '@/components/data-form.vue'
 import { zipToObject } from 'radash'
 import { useRouter } from '../../../core/utils/router'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -34,11 +35,13 @@ const schema = ref({
 const formData = ref({})
 const formInited = ref(false)
 const tagName = ref('')
+const publishing = ref(false)
 const handleChange = ({ fileList: files }) => {
   fileList.value = files
   console.log(fileList.value)
 }
 const handleSubmit = async () => {
+  publishing.value = true
   const { code, msg } = await createCircle({
     stylistId: userInfo.value.userId,
     stylistName: userInfo.value.nickname,
@@ -55,6 +58,7 @@ const handleSubmit = async () => {
   uni.showToast({
     title: '发布成功',
   })
+  publishing.value = false
   router.back()
 }
 const updateTagName = (tagNames: string[]) => {
@@ -135,8 +139,12 @@ onLoad(async (query: { circleType: '1' | '2' }) => {
       </template>
     </SectionHeading>
     <div class="flex-1"></div>
-    <div class="w-full">
-      <wd-button type="primary" :round="false" block @click="handleSubmit">发布</wd-button>
-    </div>
+    <BottomAppBar fixed safe-area-inset-bottom>
+      <div class="w-full">
+        <wd-button type="primary" :round="false" block :loading="publishing" @click="handleSubmit">
+          发布
+        </wd-button>
+      </div>
+    </BottomAppBar>
   </div>
 </template>

+ 2 - 2
packages/app/src/utils/http.ts

@@ -5,9 +5,9 @@ import dayjs from 'dayjs'
 import * as sentry from 'sentry-uniapp'
 
 const userStore = useUserStore()
-console.log(userStore.userInfo)
+// console.log(userStore.userInfo)
 const Authorization = userStore.userInfo?.token
-console.log(Authorization)
+// console.log(Authorization)
 const header: { 'tenant-id': number; Authorization?: string } = {
   'tenant-id': 1,
   Authorization,