Browse Source

feat(mine): 优化个人主页功能

EvilDragon 4 months ago
parent
commit
fa49da5d4f

+ 51 - 0
packages/app/src/components/bottom-app-bar.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { getRect, addUnit } from 'wot-design-uni/components/common/util'
+
+const props = defineProps<{
+  'safe-area-inset-bottom'?: boolean
+  fixed: boolean
+  placeholder?: 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'
+          : '',
+      ]"
+    >
+      <div class="px-3.5 py-2.5 bg-white">
+        <div class=""><slot></slot></div>
+      </div>
+      <div class="bg-white" :style="{ height: `${safeAreaInsets?.bottom}rpx` }"></div>
+    </div>
+  </div>
+</template>

+ 20 - 1
packages/app/src/pages/mine/homepage/index.vue

@@ -12,6 +12,7 @@ import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import { NetImages } from '../../../core/libs/net-images'
 import PageHelper from '@/components/page-helper.vue'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -40,10 +41,15 @@ const handleTabsChange = async ({ name }: any) => {
 }
 onMounted(async () => {})
 onLoad(async (query: { id: string }) => {
-  id.value = query.id
+  if (query.id) {
+    id.value = query.id
+  } else {
+    id.value = userInfo.value.userId
+  }
   await setCirclesData(tab.value)
   console.log(circleTypes.value)
 })
+onShareAppMessage(() => ({ title: `${userInfo.value.nickname}` }))
 defineExpose({
   navBarFixed: false,
 })
@@ -108,5 +114,18 @@ defineExpose({
         </template>
       </PageHelper>
     </div>
+    <BottomAppBar fixed placeholder>
+      <div class="flex gap-7.5">
+        <div class="flex-1" v-if="userInfo.userId === Number(id)">
+          <wd-button block :round="false">编辑</wd-button>
+        </div>
+        <div class="flex-1" v-if="userInfo.userId === Number(id)">
+          <wd-button block :round="false" open-type="share">分享</wd-button>
+        </div>
+        <div class="flex-1" v-if="userInfo.userId !== Number(id)">
+          <wd-button block :round="false">预约咨询</wd-button>
+        </div>
+      </div>
+    </BottomAppBar>
   </div>
 </template>