Browse Source

feat(app): 优化圈子详情页面布局和功能

EvilDragon 4 months ago
parent
commit
aba0887643

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

@@ -5,6 +5,7 @@ const props = defineProps<{
   'safe-area-inset-bottom'?: boolean
   fixed?: boolean
   placeholder?: boolean
+  border?: boolean
 }>()
 
 const { proxy } = getCurrentInstance() as any
@@ -40,6 +41,7 @@ onMounted(async () => {
         (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 bg-white">

+ 11 - 1
packages/app/src/core/libs/requests.ts

@@ -185,7 +185,17 @@ export const getCircle = (id: string) =>
   httpGet<Partial<CircleRes>>('/app-api/member/circle/get', { id })
 export const shareCircle = (id: string) => httpGet('/app-api/member/circle/share', { id })
 export const getCircleUpvotes = (id) =>
-  httpGet('/app-api/member/circle-upvote/page', { circleId: id })
+  httpGet<{
+    total: number
+    list: {
+      id: number
+      circleId: number
+      userId: number
+      upvpteTime: number
+      createTime: number
+      userName: string
+    }[]
+  }>('/app-api/member/circle-upvote/page', { circleId: id })
 export const createCircleUpvote = (data: { circleId: number; userId: number; userName: string }) =>
   httpPost('/app-api/member/circle-upvote/create', data)
 export const cancelCircleUpvote = (query: { id: string }) =>

+ 2 - 2
packages/app/src/pages/home/components/comment-item.vue

@@ -81,8 +81,8 @@ onMounted(async () => {
       <div class="my-3 text-black/90 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
         {{ options.reviewContent }}
       </div>
-      <view class="flex items-center mt--2 gap-3">
-        <div class="text-black/30 text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
+      <view class="flex items-center mt--4 gap-3">
+        <div class="text-black/30 text-[10px] font-normal font-['PingFang SC']">
           {{ dayjs(options.reviewTime).format('YYYY/MM/DD') }}
         </div>
         <view class="">

+ 72 - 72
packages/app/src/pages/home/moment/index.vue

@@ -24,6 +24,8 @@ import { storeToRefs } from 'pinia'
 import { isImageOrVideo } from '../../../core/utils/common'
 import { list } from 'radash'
 import dayjs from 'dayjs'
+import SectionHeading from '@/components/section-heading.vue'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -39,7 +41,7 @@ const { data: reviews, run: runGetReviews } = useRequest(
 )
 const { data: circleUpvotes, run: setCircleUpvotes } = useRequest(
   () => getCircleUpvotes(id.value),
-  { initialData: { list: [], count: 0 } },
+  { initialData: { list: [], total: 0 } },
 )
 const swiperSizes = ref()
 const swiperStyle = ref()
@@ -132,7 +134,7 @@ onShareAppMessage(async () => {
       <div class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
         {{ dayjs(data.createTime).format('YYYY-MM-DD HH:mm') }}
       </div>
-      <view class="flex items-center my-4">
+      <!-- <view class="flex items-center my-4">
         <view class="flex items-center">
           <avatar-group-casual
             :show-number="3"
@@ -145,35 +147,32 @@ onShareAppMessage(async () => {
           <div
             class="ml-1 text-black/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
           >
-            40人赞过
+            {{ circleUpvotes.total }}人赞过
           </div>
         </view>
         <view class="flex-1"></view>
         <view><wd-icon class="text-black/65" name="arrow-right" size="22px"></wd-icon></view>
-      </view>
-      <!-- <SectionHeading :title="`评论 ${data.comments}`"></SectionHeading> -->
-      <view class="flex items-center my-8">
-        <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
-          <span>评论</span>
-          <!-- <span v-if="data?.comments">{{ data?.comments }}</span> -->
-        </div>
-        <view class="flex-1"></view>
-        <view v-if="reviews?.list" class="flex">
-          <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
-            按热度
-          </div>
-          <div
-            class="mx-2 text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
-          >
-            |
-          </div>
-          <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
-            按时间
-          </div>
-        </view>
-      </view>
+      </view> -->
+      <div class="h-0.25 bg-[#dadada] my-7"></div>
+      <SectionHeading :title="`评论`" size="base">
+        <template #append>
+          <view v-if="reviews?.list" class="flex">
+            <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+              按热度
+            </div>
+            <div
+              class="mx-2 text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
+            >
+              |
+            </div>
+            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+              按时间
+            </div>
+          </view>
+        </template>
+      </SectionHeading>
 
-      <view>
+      <view clas="mt-8.25">
         <template v-if="reviews?.list.length">
           <template v-for="it of reviews?.list" :key="it.id">
             <CommentItem
@@ -201,53 +200,54 @@ onShareAppMessage(async () => {
         </template>
       </view>
     </view>
-    <div
-      class="fixed bottom-0 left-0 right-0 border-t border-t-solid border-[#ececec] h-[54px] bg-white flex items-center px-3.5"
-    >
-      <div class="w-[168px] bg-[#f6f6f6] rounded-[60px] px-3.5 py-2 flex items-center">
-        <wd-input
-          custom-class="bg-transparent!"
-          no-border
-          confirm-type="send"
-          v-model="reviewContent"
-          @confirm="handleSend"
-        ></wd-input>
-      </div>
-      <view class="flex justify-around flex-1">
-        <div>
-          <button open-type="share" class="bg-transparent! p-0!">
-            <view
-              class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
-            >
-              <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
-              <view class="">{{ data?.shareCount || 0 }}</view>
-            </view>
-          </button>
+    <BottomAppBar fixed placeholder border custom-class="">
+      <div class="bg-white flex items-center">
+        <div class="w-[168px] bg-[#f6f6f6] rounded-[60px] px-3.5 py-2 flex items-center">
+          <wd-input
+            custom-class="bg-transparent!"
+            no-border
+            confirm-type="send"
+            v-model="reviewContent"
+            placeholder="说点什么..."
+            @confirm="handleSend"
+          ></wd-input>
         </div>
-        <view
-          class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
-        >
-          <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
-          <view class="">{{ data?.reviewCount }}</view>
-        </view>
-        <view
-          class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
-          @click="
-            handleUpvoteClick(
-              {
-                upvote: data.ownUpvote,
-                circleId: data.id,
-                userId: userInfo.userId,
-                userName: userInfo.nickname,
-              },
-              () => run(),
-            )
-          "
-        >
-          <wd-img width="15" height="15" :src="thumbsUp"></wd-img>
-          <view>{{ data.upvoteCount }}</view>
+        <view class="flex justify-around flex-1">
+          <div>
+            <button open-type="share" class="bg-transparent! p-0!">
+              <view
+                class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
+              >
+                <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
+                <view class="">{{ data?.shareCount || 0 }}</view>
+              </view>
+            </button>
+          </div>
+          <view
+            class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
+          >
+            <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
+            <view class="">{{ data?.reviewCount }}</view>
+          </view>
+          <view
+            class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
+            @click="
+              handleUpvoteClick(
+                {
+                  upvote: data.ownUpvote,
+                  circleId: data.id,
+                  userId: userInfo.userId,
+                  userName: userInfo.nickname,
+                },
+                () => run(),
+              )
+            "
+          >
+            <wd-img width="15" height="15" :src="thumbsUp"></wd-img>
+            <view>{{ data.upvoteCount }}</view>
+          </view>
         </view>
-      </view>
-    </div>
+      </div>
+    </BottomAppBar>
   </view>
 </template>

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

@@ -17,9 +17,10 @@ import { useUserStore } from '../../../store'
 import pageHeaderBg from '@designer-hub/assets/src/assets/svgs/pageHeaderBg'
 import pageHeaderFilter from '@designer-hub/assets/src/assets/svgs/pageHeaderFilter'
 import { storeToRefs } from 'pinia'
-import { useToast } from 'wot-design-uni'
+import { useMessage, useToast } from 'wot-design-uni'
 import { useRouter } from '../../../core/utils/router'
 
+const { alert } = useMessage()
 const router = useRouter()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -94,15 +95,25 @@ const handleSubmit = async () => {
   }
 }
 onMounted(async () => {
-  if (userInfo.value.userStatusEnabled) {
-    // router.back()
-  }
   const { data } = await getByDictType('member_channel_source')
   const { data: res } = await getByDictType(DictType.memberSpatialExpertiseType)
   console.log(res)
   schema.value.channelSource.props.columns = data
   schema.value.spatialExpertiseType.props.columns = res
   formInited.value = true
+  if (userInfo.value.userAuthStatus === 1) {
+    alert({
+      msg: '您的认证申请已提交,请耐心等待审核,审核通过后您将获得通知',
+      title: '提示',
+      confirmButtonText: '我知道了',
+    })
+  }
+  if (userInfo.value.userAuthStatus === 2) {
+    alert({
+      title: '审核不通过',
+      msg: '由于系统原因,您提交的认证暂时无法通过,请修改后重新提交',
+    })
+  }
 })
 defineExpose({})
 </script>

+ 5 - 5
packages/app/src/pages/mine/index.vue

@@ -169,7 +169,7 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
       <div class="px-3.5 flex items-center">
         <div class="flex items-center">
           <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal mr-1">
-            36
+            0
           </div>
           <div
             class="text-center text-[#e9e7e4] text-xs font-normal font-['PingFang SC'] leading-normal"
@@ -182,12 +182,12 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
 
         <div class="flex items-center">
           <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal mr-1">
-            36
+            0
           </div>
           <div
             class="text-center text-[#e9e7e4] text-xs font-normal font-['PingFang SC'] leading-normal"
           >
-            分享
+            获客
           </div>
         </div>
 
@@ -195,12 +195,12 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
 
         <div class="flex items-center">
           <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal mr-1">
-            36
+            0
           </div>
           <div
             class="text-center text-[#e9e7e4] text-xs font-normal font-['PingFang SC'] leading-normal"
           >
-            分享
+            浏览
           </div>
         </div>
       </div>

+ 3 - 2
packages/app/src/types/auto-import.d.ts

@@ -14,7 +14,7 @@ declare global {
   const effectScope: typeof import('vue')['effectScope']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
+  const h: (typeof import('vue'))['h']
   const inject: typeof import('vue')['inject']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -81,10 +81,11 @@ declare global {
   const useModel: typeof import('vue')['useModel']
   const useNavbarWeixin: (typeof import('../hooks/useNavbarWeixin'))['default']
   const useRequest: typeof import('../hooks/useRequest')['default']
+  const useRouter: (typeof import('../core/utils/router'))['useRouter']
   const useSlots: typeof import('vue')['useSlots']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useUpload: typeof import('../hooks/useUpload')['default']
-  const useUpload2: typeof import('../hooks/useUpload2')['default']
+  const useUpload2: (typeof import('../hooks/useUpload2'))['default']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']

+ 1 - 0
packages/app/src/typings.ts

@@ -30,6 +30,7 @@ type IUserInfo = {
   userStatusEnabled?: boolean
   point?: number
   level?: { cardCode: string; icon: string; level: number; name: string; point: number }
+  userAuthStatus?: 0 | 1 | 2
 }
 
 enum TestEnum {