Browse Source

feat(app): 新增个人设置页面并优化导航逻辑

EvilDragon 5 months ago
parent
commit
24e1ab9e0e

+ 15 - 10
packages/app/src/components/section-heading.vue

@@ -23,29 +23,34 @@ const props = defineProps({
     type: String,
     default: () => '',
   },
+  endArrow: {
+    type: Boolean,
+    default: () => false,
+  },
 })
 const handleMore = async () => {
-  await uni.navigateTo({ url: props.path })
+  props.path && (await uni.navigateTo({ url: props.path }))
 }
 </script>
 <template>
-  <view class="flex justify-between items-center" :class="[customClass]">
+  <view class="flex justify-between items-center" :class="[customClass]" @click="handleMore">
     <div
       class="font-normal"
-      :class="[`text-${size}`, {sm: 'text-black/90', base: 'text-black/90', xl: 'text-black' }[size]]"
+      :class="[
+        `text-${size}`,
+        { sm: 'text-black/90', base: 'text-black/90', xl: 'text-black' }[size],
+      ]"
     >
       {{ title }}
     </div>
     <div class="overflow-hidden flex-1">
       <slot name="start"></slot>
     </div>
-    <div
-      v-if="path"
-      class="text-right text-black/30 text-sm font-normal leading-tight"
-      @click="handleMore"
-    >
-      {{ endText }}
-      <wd-img :src="right" width="10" height="10"></wd-img>
+    <div class="flex items-center gap-1 text-right text-black/30 text-sm font-normal leading-tight">
+      <template v-if="endText ?? '' !== ''">{{ endText }}</template>
+      <template v-if="path || endArrow">
+        <wd-img :src="right" width="12" height="12"></wd-img>
+      </template>
     </div>
   </view>
 </template>

+ 7 - 0
packages/app/src/pages.json

@@ -254,6 +254,13 @@
       }
     },
     {
+      "path": "pages/mine/setting/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "个人设置"
+      }
+    },
+    {
       "path": "pages/publish/moment/index",
       "type": "page",
       "style": {

+ 6 - 3
packages/app/src/pages/mine/index.vue

@@ -35,7 +35,7 @@ const menus = ref([
   { title: '优惠券包', icon: coupon },
   { title: '我的订单', icon: order },
   { title: '专属客服', icon: agent },
-  { title: '个人设置', icon: setting },
+  { title: '个人设置', icon: setting, path: '/pages/mine/setting/index' },
 ])
 const pieces = ref([
   {
@@ -86,6 +86,9 @@ const handleToAuthentication = () => {
 const handleToHomepage = () => {
   uni.navigateTo({ url: '/pages/mine/homepage/index' })
 }
+const handleMenuClick = (path) => {
+  path && uni.navigateTo({ url: path })
+}
 onMounted(async () => {
   // await run()
   // console.log(data.value)
@@ -256,8 +259,8 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
     </template>
     <view class="bg-neutral-100 relative bottom-4 rounded-t-2xl py-1 px-3.5">
       <div class="flex justify-around my-6">
-        <template v-for="({ title, icon }, i) in menus" :key="i">
-          <div class="flex flex-col items-center">
+        <template v-for="({ title, icon, path }, i) in menus" :key="i">
+          <div class="flex flex-col items-center" @click="handleMenuClick(path)">
             <div class="relative flex-col justify-start items-start inline-flex">
               <wd-img :src="icon" width="24" height="24" custom-class="vertical-bottom"></wd-img>
             </div>

+ 26 - 0
packages/app/src/pages/mine/setting/index.vue

@@ -0,0 +1,26 @@
+<route lang="json">
+{ "style": { "navigationBarTitleText": "个人设置" } }
+</route>
+<script setup lang="ts">
+import SectionHeading from '@/components/section-heading.vue'
+</script>
+<template>
+  <div class="flex-grow bg-white flex flex-col p-4.5 gap-8">
+    <div class="flex justify-center">
+      <img
+        class="w-[97px] h-[97px] rounded-full border border-white"
+        src="https://via.placeholder.com/97x97"
+      />
+    </div>
+    <SectionHeading title="姓名" size="sm" end-text="sss" end-arrow></SectionHeading>
+    <SectionHeading title="性别" size="sm" end-text="设置" end-arrow></SectionHeading>
+    <SectionHeading title="生日" size="sm" end-text="设置" end-arrow></SectionHeading>
+
+    <SectionHeading title="手机号" size="sm"></SectionHeading>
+    <SectionHeading title="公司" size="sm"></SectionHeading>
+    <SectionHeading title="推荐人" size="sm"></SectionHeading>
+    <SectionHeading title="经纪人" size="sm"></SectionHeading>
+    <div class="flex-1"></div>
+    <div><wd-button block :round="false">退出登录</wd-button></div>
+  </div>
+</template>

+ 1 - 0
packages/app/src/types/uni-pages.d.ts

@@ -27,6 +27,7 @@ interface NavigateToOptions {
        "/pages/material/recommend/index" |
        "/pages/mine/authentication/index" |
        "/pages/mine/homepage/index" |
+       "/pages/mine/setting/index" |
        "/pages/publish/moment/index" |
        "/pages/publish/tags/index" |
        "/pages/mine/authentication/submit/success/index";