fix(app): 修复和优化个人主页和发布功能

packages/app/pages.config.ts

@@ -51,6 +51,7 @@ export default defineUniPages({
       { name: '登录', path: 'pages/login/index' },
       { name: '我的', path: 'pages/mine/index' },
       { name: '设计师认证提交成功', path: 'pages/mine/authentication/submit/success/index' },
+      { name: '设计师个人主页', path: 'pages/mine/homepage/index' },
     ],
   },
 })

packages/app/src/components/moment-item.vue

@@ -115,7 +115,7 @@ onMounted(async () => {
     </view>
     <view class="my-5.5">
       <!-- <TiltedButton>按钮</TiltedButton> -->
-      <template v-for="it of props.options.tagName.split(',')" :key="it">
+      <template v-for="it of props.options.tagName?.split(',')" :key="it">
         <Tag>{{ it }}</Tag>
       </template>
     </view>

packages/app/src/core/libs/requests.ts

@@ -203,7 +203,7 @@ export const getCircles = (query) =>
 export const createCircle = (
   data: Partial<{
     headUrl: string
-    stylistId: string
+    stylistId: string | number
     stylistName: string
     marketing: string
     circleDesc: string

packages/app/src/layouts/back.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { defaultThemeVars } from '../core/themes/default'
+import { ref } from 'vue'
+
+const slots = useSlots()
+const childRef = ref()
+const menuBtnClientRect = ref<UniNamespace.GetMenuButtonBoundingClientRectRes>({
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+})
+const startMenuBtnStyle = ref({
+  width: '0px',
+  height: '0px',
+  left: '0px',
+  top: '0px',
+})
+const navHeight = ref('0px')
+onMounted(async () => {
+  menuBtnClientRect.value = await uni.getMenuButtonBoundingClientRect()
+  const { windowHeight, windowWidth } = await uni.getSystemInfo()
+  startMenuBtnStyle.value = {
+    width: menuBtnClientRect.value.width + 'px',
+    height: menuBtnClientRect.value.height + 'px',
+    top: `${menuBtnClientRect.value.top}px`,
+    left: `${windowWidth - menuBtnClientRect.value.right}px`,
+  }
+  navHeight.value = `${menuBtnClientRect.value.top + menuBtnClientRect.value.height + 8}px`
+  console.log(menuBtnClientRect.value)
+})
+const handleBack = () => {
+  uni.navigateBack()
+}
+</script>
+<template>
+  <wd-config-provider
+    class="flex-grow flex flex-col"
+    custom-class="flex-grow"
+    :themeVars="defaultThemeVars"
+  >
+    <view class="bg-[#f6f6f6] flex-grow flex flex-col">
+      <div v-if="childRef?.navBarFixed ?? false" class="" :style="{ height: navHeight }"></div>
+      <div
+        class="fixed rounded-full flex items-center justify-start px-3 box-border z-1"
+        :style="startMenuBtnStyle"
+      >
+        <wd-button
+          type="icon"
+          size="small"
+          icon="thin-arrow-left"
+          custom-class="ml--3 text-white!"
+          @click="handleBack"
+        ></wd-button>
+      </div>
+      <!-- {{ slots }} -->
+      <!-- <div ref="childRef"> -->
+      <slot></slot>
+      <!-- </div> -->
+    </view>
+    <wd-toast />
+    <wd-message-box />
+  </wd-config-provider>
+</template>

packages/app/src/pages.json

@@ -56,6 +56,10 @@
       {
         "name": "设计师认证提交成功",
         "path": "pages/mine/authentication/submit/success/index"
+      },
+      {
+        "name": "设计师个人主页",
+        "path": "pages/mine/homepage/index"
       }
     ]
   },
@@ -224,6 +228,7 @@
     {
       "path": "pages/mine/homepage/index",
       "type": "page",
+      "layout": "back",
       "style": {
         "navigationStyle": "custom"
       }

packages/app/src/pages/mine/homepage/index.vue

@@ -1,11 +1,12 @@
 <route lang="yaml">
+layout: back
 style:
   navigationStyle: custom
 </route>
 <script setup lang="ts">
 import MomentItem from '@/components/moment-item.vue'
-import { getByDictType, getCircles } from '@/core/libs/requests'
-import { useUserStore } from '@/store'
+import { getByDictType, getCircles } from '../../../core/libs/requests'
+import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 
 const userStore = useUserStore()
@@ -14,37 +15,94 @@ const tab = ref('2')
 const { data: circleTypes, run: getCircleType } = useRequest(() =>
   getByDictType('member_circle_type'),
 )
-const { data: circlesData, run } = useRequest(
-  () =>
-    getCircles({
-      circleType: tab.value,
-      // stylistName: userInfo.value.nickname,
-      stylistId: userInfo.value.userId,
-    }),
-  { initialData: { list: [] } },
-)
+const circlesData = ref({ list: [] })
+// const { data: circlesData, run } = useRequest(
+//   () =>
+//     getCircles({
+//       circleType: tab.value,
+//       // stylistName: userInfo.value.nickname,
+//       stylistId: userInfo.value.userId,
+//     }),
+//   { initialData: { list: [] } },
+// )
+const setCirclesData = async (circleType) => {
+  const { data } = await getCircles({
+    circleType,
+    stylistId: userInfo.value.userId,
+  })
+  circlesData.value = data
+}
 const tabs = ref([
   { label: '案例', value: '2' },
   { label: '动态', value: '1' },
+  { label: '视频', value: '0' },
 ])
+const handleTabsChange = async ({ name }: any) => {
+  if (['1', '2'].includes(name)) {
+    await setCirclesData(name)
+  }
+}
 onMounted(async () => {
-  await getCircleType()
+  // await getCircleType()
+  await setCirclesData(tab.value)
   console.log(circleTypes.value)
 
-  await run()
+  // await run()
+})
+defineExpose({
+  navBarFixed: false,
 })
 </script>
 <template>
   <div class="">
-    <wd-tabs v-model="tab">
-      <template v-for="({ label, value }, index) in tabs" :key="index">
-        <wd-tab :title="label" :name="value"></wd-tab>
-      </template>
-    </wd-tabs>
-    <template v-for="it of circlesData.list" :key="it.id">
-      <view class="my-6">
-        <MomentItem :options="it"></MomentItem>
-      </view>
-    </template>
+    <div class="relative">
+      <wd-img
+        width="100%"
+        :src="'https://via.placeholder.com/375x329'"
+        mode="widthFix"
+        custom-class="aspect-[1.14/1]"
+      />
+      <div class="absolute bottom-0 left-0 right-0">
+        <div class="h-[107px] bg-gradient-to-t from-black to-transparent">
+          <div class="flex">
+            <div
+              class="w-18 h-18 border-white border border-solid mx-3.5 rounded-full overflow-hidden"
+            >
+              <wd-img width="100%" height="100%" :src="userInfo?.avatar"></wd-img>
+            </div>
+            <div>
+              <div class="text-white text-2xl font-normal font-['PingFang SC'] leading-normal">
+                {{ userInfo?.nickname }}
+              </div>
+              <div>
+                <div
+                  class="h-6 px-2 bg-black/10 rounded-[30px] border border-white/60 justify-center items-center gap-2.5 inline-flex"
+                >
+                  <div
+                    class="text-center text-white text-[10px] font-normal font-['PingFang SC'] leading-normal"
+                  >
+                    创设空间事务所创始人
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bg-white rounded-t-2xl relative bottom-4">
+      <wd-tabs v-model="tab" @change="handleTabsChange">
+        <template v-for="({ label, value }, index) in tabs" :key="index">
+          <wd-tab :title="label" :name="value"></wd-tab>
+        </template>
+      </wd-tabs>
+      <div class="p-3.5 flex flex-col bg-[#f6f6f6] gap-3.5">
+        <template v-for="it of circlesData.list" :key="it.id">
+          <view class="">
+            <MomentItem :options="it"></MomentItem>
+          </view>
+        </template>
+      </div>
+    </div>
   </div>
 </template>

packages/app/src/pages/publish/moment/index.vue

@@ -5,9 +5,13 @@ style:
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { createCircle } from '@/core/libs/requests'
+import { createCircle } from '../../../core/libs/requests'
+import { useUserStore } from '../../../store'
+import { storeToRefs } from 'pinia'
 import { useToast } from 'wot-design-uni'
 
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
 const { error } = useToast()
 const value = ref('')
 const fileList = ref([])
@@ -16,10 +20,21 @@ const handleChange = (e: any) => {
   console.log(e)
 }
 const handleSubmit = async () => {
-  const { code, msg } = await createCircle({ bannerUrls: [], tagName: '', headUrl: '' })
+  const { code, msg } = await createCircle({
+    stylistId: userInfo.value.userId,
+    stylistName: userInfo.value.nickname,
+    bannerUrls: [],
+    tagName: '',
+    headUrl: userInfo.value.avatar,
+    circleDesc: 'test',
+    circleType: '1',
+  })
   if (code !== 0) {
     error(msg)
   }
+  uni.showToast({
+    title: '发布成功',
+  })
 }
 </script>
 <template>