feat(app): 新增通用内容页面和修改密码功能

- 新增通用内容页面组件，用于展示 HTML 内容
- 在商家端添加修改密码功能
- 优化登录页面，增加服务使用协议链接
- 重构部分代码，提高可维护性

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

@@ -58,3 +58,8 @@ export const handleClickInstruction = (
     msg: coupon.couponDO.couponDesc,
   })
 }
+export const toContentHtml = async (option: { title: string }) => {
+  await uni.navigateTo({
+    url: `/pages/common/content-html/index?title=${option.title}`,
+  })
+}

packages/app/src/pages.json

@@ -141,6 +141,14 @@
       }
     },
     {
+      "path": "pages/common/content-html/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/common/webview/index",
       "type": "page"
     },

packages/app/src/pages/common/content-html/index.vue

@@ -0,0 +1,25 @@
+<route lang="json">
+{
+"style": {
+"navigationBarTitleText": "",
+"navigationBarBackgroundColor": "#fff"
+}
+}
+</route>
+<script setup lang="ts">
+import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
+
+const content = '<div></div>'
+onLoad(async (query?: Record<string | 'title', string>) => {
+  if (query?.title) {
+    console.log(query.title)
+    await uni.setNavigationBarTitle({title: query.title})
+  }
+})
+</script>
+
+<template>
+  <mpHtml :content="content"></mpHtml>
+</template>
+
+<style scoped lang="scss"></style>

packages/app/src/pages/login/index.vue

@@ -6,6 +6,7 @@ style:
 import { testLogin, weixinMiniAppLogin } from '../../core/libs/requests'
 import { logo } from '../../core/libs/svgs'
 import { useUserStore } from '../../store'
+import { toContentHtml } from '@/core/libs/actions'
 
 const userStore = useUserStore()
 const { setUserInfo } = userStore
@@ -88,8 +89,23 @@ onLoad(async (query: { type?: 'test' }) => {
           <span class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-tight">
             如您点击授权，您将同意并授权
           </span>
-          <span class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight">
-            《筑巢荟用户服务协议》、《隐私政策》、《注册协议》
+          <span
+            @click="toContentHtml({ title: '筑巢荟用户服务协议' })"
+            class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight"
+          >
+            《筑巢荟用户服务协议》、
+          </span>
+          <span
+            @click="toContentHtml({ title: '隐私政策' })"
+            class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight"
+          >
+            《隐私政策》、
+          </span>
+          <span
+            @click="toContentHtml({ title: '注册协议' })"
+            class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight"
+          >
+            《注册协议》
           </span>
         </div>
       </template>

packages/app/src/types/uni-pages.d.ts

@@ -10,6 +10,7 @@ interface NavigateToOptions {
        "/pages/material/index" |
        "/pages/messages/index" |
        "/pages/mine/index" |
+       "/pages/common/content-html/index" |
        "/pages/common/webview/index" |
        "/pages/home/about/index" |
        "/pages/home/classmates/index" |

packages/merchant/package.json

@@ -102,6 +102,7 @@
     "dayjs": "1.11.10",
     "extract-colors": "^4.1.0",
     "miniapp-color-thief": "^1.0.5",
+    "mp-html": "^2.5.0",
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "3.2.1",
     "qs": "6.5.3",

packages/merchant/src/components/data-form.vue

@@ -8,22 +8,6 @@ import { addUnit } from 'wot-design-uni/components/common/util'
 import { omit } from 'radash'
 import WdForm from 'wot-design-uni/components/wd-form/wd-form.vue'
 
-const modelValue = defineModel({
-  type: Object,
-  default: () => ({}),
-})
-withDefaults(
-  defineProps<{
-    schema: DataFormSchema
-    rules?: { [key: string]: { required: boolean; message: string }[] }
-    direction?: 'horizontal' | 'vertical'
-  }>(),
-  { direction: 'vertical', labelShow: true },
-)
-const emits = defineEmits(['submit'])
-const form = ref<InstanceType<typeof WdForm>>()
-const action = ref(`${import.meta.env.VITE_SERVER_BASEURL}/app-api/infra/file/upload`)
-
 const types = {
   TextField: WdInput,
   Submit: WdButton,
@@ -88,14 +72,41 @@ const themeVars: ConfigProviderThemeVars = {
   checkboxButtonBg: 'transparent',
   textareaBg: 'transparent',
 }
+const modelValue = defineModel({
+  type: Object,
+  default: () => ({}),
+})
+const props = withDefaults(
+  defineProps<{
+    schema: DataFormSchema
+    rules?: { [key: string]: { required: boolean; message: string }[] }
+    direction?: 'horizontal' | 'vertical'
+  }>(),
+  { direction: 'vertical', labelShow: true },
+)
+const emits = defineEmits(['submit'])
+const form = ref<InstanceType<typeof WdForm>>()
+const action = ref(`${import.meta.env.VITE_SERVER_BASEURL}/app-api/infra/file/upload`)
+const submitDisabled = computed(() => {
+  // console.log(Object.values(modelValue.value).some((it) => !it))
+  return Object.values(
+    omit(
+      modelValue.value,
+      Object.entries(props.schema)
+        .filter(([_key, { required }]) => !required)
+        .map(([key]) => key),
+    ),
+  ).some((it) => !it)
+})
 const submit = () => {
   emits('submit', modelValue)
 }
 const validate = async (): Promise<{ valid: boolean; errors: any[] }> => {
-  return await form.value.validate()
+  return await form.value!.validate()
 }
 defineExpose({
   validate,
+  submitDisabled,
 })
 </script>
 <template>
@@ -155,7 +166,6 @@ defineExpose({
                 : horizontalDefaultProps[type]),
               cell: false,
               ...props,
-
             }"
           />
           <wd-textarea

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

@@ -1,7 +1,4 @@
-import { httpGet, httpPost, httpPut, httpDelete } from '../../utils/http'
-import { Schedule } from '../models/schedule'
-import { Moment } from '../models/moment'
-import dayjs from 'dayjs'
+import { httpGet, httpPost, httpPut, httpDelete } from '@/utils/http'
 import {
   PointsOrder,
   ResPageData,
@@ -10,247 +7,33 @@ import {
   AgentTask,
 } from '@designer-hub/app/src/core/libs/models'
 
-export const getUserInfo = () =>
-  httpGetMock<any>({
-    avatar: 'https://via.placeholder.com/21x21',
-    nickname: '苏小萌',
-  })
-export const getSchedule = () =>
-  httpGetMock<Schedule>({
-    name: '东京艺术设计研习营',
-    cover: 'https://via.placeholder.com/375x297',
-    items: [
-      {
-        title: '早稻田大学课程',
-        time: '9:00',
-        content:
-          '是位于日本东京都新宿区的一所著名的私立大学。它由早稻田大学的创始人大隈重信于1882年创立，是日本超级国际化大学计划（Top Global University Project）选定的大学之一，也是日本顶尖的高等教育机构之一。',
-        momentExample: 'https://via.placeholder.com/285x157',
-        monentHint: '*说明：打卡地XX，收集上课素材',
-      },
-      {
-        title: '早稻田大学博物馆参观',
-        time: '11:00',
-        content:
-          '早稻田大学拥有多座博物馆，‌其中最著名的是早稻田大学历史馆。‌早稻田大学历史馆收藏、‌展示着著名校友在运动方面的杰出表现和成就，‌馆内的解说牌以日语和英语标示，‌展现了传统样式风格的建筑。',
-        momentExample: 'https://via.placeholder.com/285x157',
-        monentHint: '*说明：打卡地XX，收集上课素材',
-      },
-    ],
-  })
-export const getMoment = () =>
-  httpGetMock<Moment>({
-    author: {
-      avatar: 'https://via.placeholder.com/35x35',
-      nickname: '苏小萌',
-      level: '0',
-    },
-    content: '用心做好设计，为客户创造美好家居环境',
-    images: [
-      'https://via.placeholder.com/165x220',
-      'https://via.placeholder.com/220x220',
-      'https://via.placeholder.com/165x220',
-    ],
-    tags: ['意大利游学设计班'],
-    shares: 0,
-    comments: 0,
-    likes: 0,
-    createdAt: dayjs('2024-07-15').toDate(),
-    commentList: [],
-  })
-export const getClassmates = () =>
-  httpGetMock<any[]>([
-    {
-      avatar: 'https://via.placeholder.com/35x35',
-      nickname: '苏小萌',
-      level: '0',
-    },
-    {
-      avatar: 'https://via.placeholder.com/35x35',
-      nickname: '苏小萌',
-      level: '0',
-    },
-    {
-      avatar: 'https://via.placeholder.com/35x35',
-    },
-  ])
-export const getClassmate = () =>
-  httpGetMock<any>({
-    title: '2023同学荟|清华空间环境艺术设计研修班 阔步向未来',
-    author: {
-      avatar: 'https://via.placeholder.com/35x35',
-      nickname: '苏小萌',
-      level: '0',
-    },
-    viewNum: 125,
-    createdAt: dayjs('2024-07-15').toDate(),
-    content: '<div>111111</div>',
-  })
-export const getStudyTours = () =>
-  httpGetMock<any[]>([
-    {
-      title: '东京艺术大学设计游学',
-      createdAt: dayjs('2024-07-15').toDate(),
-      startedAt: dayjs('2024-07-15').toDate(),
-      endedAt: dayjs('2024-08-15').toDate(),
-      amount: 16000,
-    },
-  ])
-export const getMaterialDealers = () =>
-  httpGetMock<any[]>([
-    {
-      name: 'IMOLA瓷砖',
-      icon: 'https://via.placeholder.com/78x78',
-      brandType: '进口品牌',
-      type: '瓷砖',
-      views: 1000,
-      createdAt: dayjs('2024-07-15').toDate(),
-    },
-    {
-      name: 'IMOLA瓷砖',
-      icon: 'https://via.placeholder.com/78x78',
-      brandType: '进口品牌',
-      type: '瓷砖',
-      views: 1000,
-      createdAt: dayjs('2024-07-15').toDate(),
-    },
-  ])
-export const weixinMiniAppLogin = (phoneCode: string, loginCode: string, state: string) =>
-  httpPost<any>('/app-api/member/auth/weixin-mini-app-login', {
-    phoneCode,
-    loginCode,
-    state,
-  })
-export const getMemberUserInfo = () => httpGet<any>('/app-api/member/user/get')
-export const getByDictType = (type: string | 'member_channel_source') =>
-  httpGet<
-    {
-      label: string
-      value: string
-      dictType: string
-      status: number
-    }[]
-  >('/app-api/system/dict-data/type', { type })
-export const createUserAuthInfo = (
-  data: Partial<{
-    id: number
-    userId: number
-    designerName: string
-    gender: number
-    mobile: string
-    channelSource: number
-    referrer: string
-    employer: string
-    spatialExpertiseType: number
-    attachment: string
-    auditStatus: number
-    remark: string
-  }>,
-) => httpPost<any>('/app-api/member/user-auth-info/create', data)
-export const getCircles = (query) =>
-  httpGet<{
-    list: {
-      id: number
-      headUrl?: string
-      stylistId?: number
-      stylistName?: string
-      marketing?: string
-      circleDesc?: string
-      tagName?: string
-      detailsType?: string
-      detailsUrl?: string
-      detailsDesc?: string
-      circleType?: string
-      spaceType?: string
-      designStyle?: string
-      spaceAddr?: string
-      customerDemand?: string
-      createTime: number
-      bannerUrls: string[]
-      shareCount?: number
-      upvoteCount?: number
-      ownUpvote: boolean
-      reviewCount: number
-    }[]
-  }>('/app-api/member/circle/page', query)
-export const createCircle = (data: Partial<Circle>) =>
-  httpPost<any>('/app-api/member/circle/create', data)
-export const getCircle = (id: string) =>
-  httpGet<Partial<CircleRes>>('/app-api/member/circle/get', { id })
+export const httpGetMock = <T>(data: T) =>
+  new Promise<IResData<T>>((resolve) => resolve({ code: 1, msg: '', data } as IResData<T>))
 export const createCircleUpvote = (data: { circleId: number; userId: number; userName: string }) =>
   httpPost('/app-api/member/circle-upvote/create', data)
 export const cancelCircleUpvote = (query: { id: string }) =>
   httpGet('/app-apimember/circle-upvote/delete', query)
-
-export const createCircleReview = (
-  data: Partial<{
-    circleId: string
-    userId: string | number
-    userName: string
-    reviewContent: string
-    replayReviewId: string
-  }>,
-) => httpPost<any>('/app-api/member/circle-review/create', data)
-export const getCircleReviews = (query: { circleId: string }) =>
-  httpGet<{
-    list: Partial<{
-      id: number
-      circleId: number
-      userId: number
-      userName: string
-      reviewContent: string
-      upvoteCount: any
-      replayReviewId: any
-      reviewTime: number
-      createTime: number
-      replayToUserName: any
-      replayToUserId: any
-      replayFirstId: any
-      upvote: boolean
-      ownDel: boolean
-    }>[]
-  }>('/app-api/member/circle-review/getCircleReviewByCircleId', query)
-export const createCircleReviewUpvote = (data: {
-  circleId: number
-  userId: number
-  userName: string
-  reviewId: number
-}) => httpPost('/app-api/member/circle-review-upvote/create', data)
 export const cancelCircleReviewUpvote = (query: {
   circleId: string
   userId: string
   reviewId: string
 }) => httpGet('/app-api/member/circle-review-upvote/cancel', query)
-export const getCircleReviewUpvotes = (query: { circleId: string; reviewId?: string }) =>
-  httpGet('/app-api/member/circle-review-upvote/page', query)
-export const getReviewReplay = (query: { id: string }) =>
-  httpGet('/app-api/member/circle-review/getReviewReplay', query)
 // 获取设计师列表
 export const getDesignerList = (query: { brokerId: string; pageNo: number; pageSize: any }) =>
   httpGet<ResPageData<any>>('/app-api/member/report-info/pageStylistByBrokerId', query)
 // 添加关系报备
-export const createReportInfo = (data) => httpPost<any>('/app-api/member/report-info/create', data)
+export const createReportInfo = (data: any) =>
+  httpPost<any>('/app-api/member/report-info/create', data)
 // 获取任务列表
-export const getTaskList = (query) => httpGet<any>('/app-api/member/task/task-list', query)
+export const getTaskList = (query: any) => httpGet<any>('/app-api/member/task/task-list', query)
 // 任务详情
 export const getTaskDetail = (query = {}) =>
   httpGet<AgentTask>('/app-api/member/task/task-detail', query)
 // 领取任务
 export const taskReceive = (data: any) => httpPost<any>('/app-api/member/task/task-receive', data)
 // 任务上报
-export const appTaskReport = (data) => httpPost<any>('/app-api/member/app-task-report/create', data)
-
-export const getTasks = (query) =>
-  httpGet<{
-    list: {
-      id: number
-      taskKey: string
-      taskValue: string
-      createTime: string
-      sort: number
-      status: number
-    }[]
-  }>('/app-api/basicsetting/set-task-center/page', query)
+export const appTaskReport = (data: any) =>
+  httpPost<any>('/app-api/member/app-task-report/create', data)
 export const login = (data: {
   mobile: string
   password: string
@@ -329,7 +112,7 @@ export const getOrders = () =>
 /**
  * 商家端-获取订单详情
  */
-export const getPointsOrder = (id) =>
+export const getPointsOrder = (id: any) =>
   httpGet<Partial<PointsOrder>>('/app-api/member/points-order/get', { id })
 /**
  * 渠道端-获取待办列表
@@ -434,53 +217,14 @@ export const getAppMemberLevelConfigs = () =>
       }[]
     }[]
   >('/app-api/basicsetting/app-set-member-level-config/listAndRights')
-/**
- * 获取设计师积分订单
- */
-export const getPointsOrders = (query: Partial<PointsOrder>) =>
-  httpGet<{
-    list: PointsOrder[]
-    total: number
-  }>('/app-api/member/points-order/page', query)
-export const httpGetMock = <T>(data: T) =>
-  new Promise<IResData<T>>((resolve) => resolve({ code: 1, msg: '', data } as IResData<T>))
-export interface Circle {
-  headUrl: string
-  stylistId: string | number
-  stylistName: string
-  marketing: string
-  circleDesc: string
-  tagName: string
-  detailsType: string
-  detailsUrl: string
-  detailsDesc: string
-  circleType: string
-  spaceType: string
-  designStyle: string
-  spaceAddr: string
-  customerDemand: string
-  bannerUrls: string[]
-}
-export interface CircleRes {
+export interface UpdatePasswordData {
   id: number
-  headUrl?: string
-  stylistId?: number
-  stylistName?: string
-  marketing?: string
-  circleDesc?: string
-  tagName?: string
-  detailsType?: string
-  detailsUrl?: string
-  detailsDesc?: string
-  circleType?: string
-  spaceType?: string
-  designStyle?: string
-  spaceAddr?: string
-  customerDemand?: string
-  createTime: number
-  bannerUrls: string[]
-  shareCount?: number
-  upvoteCount?: number
-  ownUpvote: boolean
-  reviewCount: number
+  oldPassword?: string
+  newPassword?: string
+  appLoginType: AppLoginType
 }
+/**
+ * 修改密码
+ */
+export const updatePassword = (data: UpdatePasswordData) =>
+  httpPut('/app-api/member/auth/update-password', data)

packages/merchant/src/pages.json

@@ -126,6 +126,14 @@
       }
     },
     {
+      "path": "pages/common/content-html/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/home/merchant/add-reporting-information",
       "type": "page",
       "style": {
@@ -182,6 +190,14 @@
       }
     },
     {
+      "path": "pages/common/auth/change-password/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "修改密码",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/common/orders/detail/index",
       "type": "page",
       "style": {

packages/merchant/src/pages/common/auth/change-password/index.vue

@@ -0,0 +1,95 @@
+<route lang="json">
+{ "style": { "navigationBarTitleText": "修改密码", "navigationBarBackgroundColor": "#fff" } }
+</route>
+<script setup lang="ts">
+import { DataFormSchema } from '@/components/data-form'
+import { updatePassword, UpdatePasswordData } from '@/core/libs/requests'
+import DataForm from '@/components/data-form.vue'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
+import { ComponentExposed } from 'vue-component-type-helpers'
+import { useUserStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { requestToast } from '@designer-hub/app/src/core/utils/common'
+
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+const dataFormRef = ref<ComponentExposed<typeof DataForm>>()
+const schema = ref<DataFormSchema>({
+  oldPassword: {
+    type: 'TextField',
+    label: '旧密码',
+    labelWidth: 90,
+    required: true,
+    props: {
+      placeholder: '请输入旧密码',
+    },
+  },
+  newPassword: {
+    type: 'TextField',
+    label: '新密码',
+    labelWidth: 90,
+    required: true,
+    props: {
+      placeholder: '请输入新密码',
+    },
+  },
+  confirmPassword: {
+    type: 'TextField',
+    label: '再次输入',
+    labelWidth: 90,
+    required: true,
+    props: {
+      placeholder: '请再次输入新密码',
+    },
+  },
+})
+const rules = ref({
+  oldPassword: [{ required: true, message: '请输入旧密码' }],
+  newPassword: [{ required: true, message: '请输入新密码' }],
+  confirmPassword: [{ required: true, message: '请再次输入新密码' }],
+})
+const formData = ref({})
+const submitDisabled = computed(() => ({}))
+const handleSubmit = async () => {
+  // const data = await dataFormRef.value?.validate()
+  if (!(await dataFormRef.value!.validate())) {
+    return false
+  }
+  console.log(1111)
+  if (!userInfo.value.userId) {
+    return false
+  }
+  const { code } = await requestToast(
+    () =>
+      updatePassword({
+        ...formData.value,
+        appLoginType: 3,
+        id: userInfo.value.userId ?? 0,
+      }),
+    { success: true, successTitle: '修改成功' },
+  )
+  if (code === 0) {
+    userStore.clearUserInfo()
+    uni.reLaunch({ url: '/pages/login/index' })
+  }
+}
+</script>
+
+<template>
+  <div class="flex-grow bg-white px-2 pt-8">
+    <DataForm
+      ref="dataFormRef"
+      :schema="schema"
+      :rules="rules"
+      v-model="formData"
+      direction="horizontal"
+    ></DataForm>
+    <BottomAppBar fixed placeholder>
+      <wd-button :disabled="dataFormRef?.submitDisabled" :round="false" block @click="handleSubmit">
+        确认
+      </wd-button>
+    </BottomAppBar>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

packages/merchant/src/pages/common/content-html/index.vue

@@ -0,0 +1,25 @@
+<route lang="json">
+{
+"style": {
+"navigationBarTitleText": "",
+"navigationBarBackgroundColor": "#fff"
+}
+}
+</route>
+<script setup lang="ts">
+import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
+
+const content = '<div></div>'
+onLoad(async (query?: Record<string | 'title', string>) => {
+  if (query?.title) {
+    console.log(query.title)
+    await uni.setNavigationBarTitle({title: query.title})
+  }
+})
+</script>
+
+<template>
+  <mpHtml :content="content"></mpHtml>
+</template>
+
+<style scoped lang="scss"></style>

packages/merchant/src/pages/login/index.vue

@@ -8,6 +8,7 @@ import { storeToRefs } from 'pinia'
 import { login } from '../../core/libs/requests'
 import { useUserStore } from '../../store'
 import { loginAccountIcon, loginPswIcon } from '@designer-hub/assets/src/svgs'
+import { toContentHtml } from '@designer-hub/app/src/core/libs/actions'
 
 const userStore = useUserStore()
 const { isLogined } = storeToRefs(userStore)
@@ -23,7 +24,7 @@ const formData = ref({
 const handleLogin = async () => {
   const { msg, code, data } = await login(formData.value)
   if (code !== 0) {
-    uni.showToast({ title: msg })
+    await uni.showToast({ title: msg })
   } else {
     setUserInfo({
       ...data,
@@ -72,7 +73,7 @@ onShareAppMessage(async () => ({}))
       </div>
       <div class="w-full flex items-center justify-between mt-[19px]">
         <wd-checkbox :modelValue="true" shape="square">记住密码</wd-checkbox>
-        <div class="text-[#2357e9] text-xs font-normal font-['PingFang_SC']">忘记密码？</div>
+        <!--        <div class="text-[#2357e9] text-xs font-normal font-['PingFang_SC']">忘记密码？</div>-->
       </div>
       <div class="w-full mt-[50px]">
         <wd-button block :round="false" @click="handleLogin">登录</wd-button>
@@ -81,7 +82,10 @@ onShareAppMessage(async () => ({}))
         <span class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-tight">
           登录即代表您已阅读并同意筑巢荟的
         </span>
-        <span class="text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-tight">
+        <span
+          class="text-[#2357e9] text-xs font-normal font-['PingFang_SC'] leading-tight"
+          @click="toContentHtml({ title: '服务使用协议' })"
+        >
           《服务使用协议》
         </span>
       </div>

packages/merchant/src/pages/mine/agent/settings/index.vue

@@ -15,11 +15,13 @@ import { getBroker, getVendorAppInfo } from '../../../../core/libs/requests'
 import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
 import { messages } from '../../../../core/libs/messages'
 import { useMessage } from 'wot-design-uni'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
+
 const userStore = useUserStore()
 // cons useMessage()
 const { isLogined, userInfo } = storeToRefs(userStore)
 const { data, run: setData } = useRequest(() =>
-  getBroker({ brokerId: userInfo.value.userId.toString() }),
+  getBroker({ brokerId: String(userInfo.value.userId) }),
 )
 const logout = () => {
   uni.showModal({
@@ -38,51 +40,31 @@ onMounted(async () => {
 </script>
 
 <template>
-  <view class="bg-white p-[16px] flex-grow flex flex-col">
-    <div class="flex-1">
-      <div class="flex justify-between items-center mb-[30px]">
-        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">头像</div>
+  <view class="bg-white p-[16px] flex-grow flex flex-col gap-8.5">
+    <SectionHeading size="sm" :title="'头像'">
+      <template #append>
         <wd-img width="28" height="28" round custom-class="" :src="data?.headImgUrl" />
-      </div>
-      <div class="flex justify-between items-center mb-[30px]">
-        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">名称</div>
-        <div
-          class="text-right text-[#999999] text-sm font-normal font-['PingFang_SC'] leading-none"
-        >
-          {{ data?.brokerName }}
-        </div>
-      </div>
-      <div class="flex justify-between items-center mb-[30px]">
-        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">ID</div>
-        <div
-          class="text-right text-[#999999] text-sm font-normal font-['PingFang_SC'] leading-none"
-        >
-          {{ data?.id }}
-        </div>
-      </div>
-      <div class="flex justify-between items-center mb-[30px]">
-        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
-          {{ messages.mine.setting.channelTypeTitleText }}
-        </div>
-        <div
-          class="text-right text-[#999999] text-sm font-normal font-['PingFang_SC'] leading-none"
-        >
-          {{ data?.channelType }}
-        </div>
-      </div>
-      <div class="flex justify-between items-center mb-[30px]">
-        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
-          {{ messages.mine.setting.mobileTitleText }}
-        </div>
-        <div
-          class="text-right text-[#999999] text-sm font-normal font-['PingFang_SC'] leading-none"
-        >
-          {{ data?.mobile }}
-        </div>
-      </div>
-      <SectionHeading title="修改密码" size="sm" end-arrow></SectionHeading>
-    </div>
-    <div class="w-full mt-[50px]">
+      </template>
+    </SectionHeading>
+    <SectionHeading size="sm" :title="'姓名'" :end-text="String(data?.brokerName)"></SectionHeading>
+    <SectionHeading size="sm" :title="'ID'" :end-text="String(data?.id)"></SectionHeading>
+    <SectionHeading
+      size="sm"
+      :title="messages.mine.setting.channelTypeTitleText"
+      :end-text="String(data?.channelType)"
+    ></SectionHeading>
+    <SectionHeading
+      size="sm"
+      :title="messages.mine.setting.mobileTitleText"
+      :end-text="data?.mobile"
+    ></SectionHeading>
+    <SectionHeading
+      title="修改密码"
+      size="sm"
+      path="/pages/common/auth/change-password/index"
+      end-arrow
+    ></SectionHeading>
+    <BottomAppBar fixed placeholder>
       <wd-button block :round="false" @click="logout">
         <div
           class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-normal"
@@ -90,7 +72,7 @@ onMounted(async () => {
           退出登录
         </div>
       </wd-button>
-    </div>
+    </BottomAppBar>
   </view>
 </template>
 

packages/merchant/src/types/uni-pages.d.ts

@@ -13,6 +13,7 @@ interface NavigateToOptions {
        "/pages/agent/report-infos/index" |
        "/pages/agent/tasks/index" |
        "/pages/agent/todo/index" |
+       "/pages/common/content-html/index" |
        "/pages/home/merchant/add-reporting-information" |
        "/pages/home/merchant/mine" |
        "/pages/home/merchant/settlement" |
@@ -20,6 +21,7 @@ interface NavigateToOptions {
        "/pages/agent/designer/archives/index" |
        "/pages/agent/designer/points/index" |
        "/pages/agent/tasks/detail/index" |
+       "/pages/common/auth/change-password/index" |
        "/pages/common/orders/detail/index" |
        "/pages/mine/agent/invite/index" |
        "/pages/mine/agent/settings/index" |

pnpm-lock.yaml

@@ -364,6 +364,9 @@ importers:
       miniapp-color-thief:
         specifier: ^1.0.5
         version: 1.0.5
+      mp-html:
+        specifier: ^2.5.0
+        version: 2.5.0
       pinia:
         specifier: 2.0.36
         version: 2.0.36(typescript@4.9.5)(vue@3.5.13(typescript@4.9.5))