.vscode/settings.json

@@ -1,4 +1,8 @@
 {
+  // 全局缩进设置
+  "editor.tabSize": 4,
+  "editor.detectIndentation": false,
+  "editor.insertSpaces": true,
   // 配置语言的文件关联
   "files.associations": {
     "pages.json": "jsonc", // pages.json 可以写注释
@@ -21,9 +25,10 @@
     "eslint.config.mjs": ".commitlintrc.*,.prettier*,.editorconfig,.commitlint.cjs,.eslint*"
   },
 
-  // Disable the default formatter, use eslint instead
+  // 编辑器格式化设置
   "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true,
 
   // Auto fix
   "editor.codeActionsOnSave": {
@@ -45,6 +50,38 @@
     { "rule": "*semi", "severity": "off", "fixable": true }
   ],
 
+  // 语言特定的缩进设置
+  "[vue]": {
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true
+  },
+  "[html]": {
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true
+  },
+  "[css]": {
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true
+  },
+  "[javascript]": {
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true
+  },
+
   // Enable eslint for all supported languages
   "eslint.validate": [
     "javascript",

eslint.config.mjs

@@ -1,58 +1,55 @@
 import uniHelper from '@uni-helper/eslint-config'
 
 export default uniHelper({
-  unocss: true,
-  vue: true,
-  markdown: false,
-  ignores: [
+    unocss: true,
+    vue: true,
+    markdown: false,
+    ignores: [
     // 忽略uni_modules目录
-    '**/uni_modules/',
-    // 忽略原生插件目录
-    '**/nativeplugins/',
-    'dist',
-    // unplugin-auto-import 生成的类型文件，每次提交都改变，所以加入这里吧，与 .gitignore 配合使用
-    'auto-import.d.ts',
-    // vite-plugin-uni-pages 生成的类型文件，每次切换分支都一堆不同的，所以直接 .gitignore
-    'uni-pages.d.ts',
-    // 插件生成的文件
-    'src/pages.json',
-    'src/manifest.json',
-    // 忽略自动生成文件
-    'src/service/**',
-  ],
-  // https://eslint-config.antfu.me/rules
-  rules: {
-    'no-useless-return': 'off',
-    'no-console': 'off',
-    'no-unused-vars': 'off',
-    'vue/no-unused-refs': 'off',
-    'unused-imports/no-unused-vars': 'off',
-    'eslint-comments/no-unlimited-disable': 'off',
-    'jsdoc/check-param-names': 'off',
-    'jsdoc/require-returns-description': 'off',
-    'ts/no-empty-object-type': 'off',
-    'no-extend-native': 'off',
-    'vue/singleline-html-element-content-newline': [
-      'error',
-      {
-        externalIgnores: ['text'],
-      },
+        '**/uni_modules/',
+        // 忽略原生插件目录
+        '**/nativeplugins/',
+        'dist',
+        // unplugin-auto-import 生成的类型文件，每次提交都改变，所以加入这里吧，与 .gitignore 配合使用
+        'auto-import.d.ts',
+        // vite-plugin-uni-pages 生成的类型文件，每次切换分支都一堆不同的，所以直接 .gitignore
+        'uni-pages.d.ts',
+        // 插件生成的文件
+        'src/pages.json',
+        'src/manifest.json',
+        // 忽略自动生成文件
+        'src/service/**'
     ],
-    // vue SFC 调换顺序改这里
-    'vue/block-order': ['error', {
-      order: [['script', 'template'], 'style'],
-    }],
+    // https://eslint-config.antfu.me/rules
+    rules: {
+        'no-useless-return': 'off',
+        'no-console': 'off',
+        'no-unused-vars': 'off',
+        'vue/no-unused-refs': 'off',
+        'unused-imports/no-unused-vars': 'off',
+        'eslint-comments/no-unlimited-disable': 'off',
+        'jsdoc/check-param-names': 'off',
+        'jsdoc/require-returns-description': 'off',
+        'ts/no-empty-object-type': 'off',
+        'no-extend-native': 'off',
+        // 缩进规则：4个空格
+        indent: ['error', 4, { SwitchCase: 1 }],
+        'vue/html-indent': ['error', 4],
+        'vue/script-indent': ['error', 4, { baseIndent: 0, switchCase: 1 }],
+        'vue/singleline-html-element-content-newline': ['error', { externalIgnores: ['text'] }],
+        // vue SFC 调换顺序改这里
+        'vue/block-order': ['error', { order: [['script', 'template'], 'style'] }],
   },
-  formatters: {
+    formatters: {
     /**
      * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
      * By default uses Prettier
      */
-    css: true,
-    /**
+        css: true,
+        /**
      * Format HTML files
      * By default uses Prettier
      */
-    html: true,
-  },
+        html: true,
+  }
 })

src/App.ku.vue

@@ -6,14 +6,14 @@ import { currRoute } from './utils'
 
 const isCurrentPageTabbar = ref(true)
 onShow(() => {
-  console.log('App.ku.vue onShow', currRoute())
-  const { path } = currRoute()
-  // “蜡笔小开心”提到本地是 '/pages/index/index'，线上是 '/' 导致线上 tabbar 不见了
-  // 所以这里需要判断一下，如果是 '/' 就当做首页，也要显示 tabbar
-  isCurrentPageTabbar.value = path === '/' || isPageTabbar(path)
-  if (isCurrentPageTabbar.value) {
-    tabbarStore.setAutoCurIdx(path)
-  }
+    console.log('App.ku.vue onShow', currRoute())
+    const { path } = currRoute()
+    // “蜡笔小开心”提到本地是 '/pages/index/index'，线上是 '/' 导致线上 tabbar 不见了
+    // 所以这里需要判断一下，如果是 '/' 就当做首页，也要显示 tabbar
+    isCurrentPageTabbar.value = path === '/' || isPageTabbar(path)
+    if (isCurrentPageTabbar.value) {
+        tabbarStore.setAutoCurIdx(path)
+    }
 })
 
 const helloKuRoot = ref('Hello AppKuVue')
@@ -21,19 +21,19 @@ const helloKuRoot = ref('Hello AppKuVue')
 const exposeRef = ref('this is form app.Ku.vue')
 
 defineExpose({
-  exposeRef,
+    exposeRef,
 })
 </script>
 
 <template>
-  <view>
-    <!-- 这个先隐藏了，知道这样用就行 -->
-    <view class="hidden text-center">
-      {{ helloKuRoot }}，这里可以配置全局的东西
-    </view>
+    <view>
+        <!-- 这个先隐藏了，知道这样用就行 -->
+        <view class="hidden text-center">
+            {{ helloKuRoot }}，这里可以配置全局的东西
+        </view>
 
-    <KuRootView />
+        <KuRootView />
 
-    <FgTabbar v-if="isCurrentPageTabbar" />
-  </view>
+        <FgTabbar v-if="isCurrentPageTabbar" />
+    </view>
 </template>

src/http/http.ts

@@ -106,7 +106,7 @@ export function http<T>(options: CustomRequestOptions) {
 
         // 处理其他错误
         !options.hideErrorToast
-        && uni.showToast({
+                && uni.showToast({
           icon: 'none',
           title: (res.data as any).msg || '请求错误',
         })

src/layouts/default.vue

@@ -1,3 +1,3 @@
 <template>
-  <slot />
+    <slot />
 </template>

src/pages-A/applyForm/index.vue

@@ -1,122 +1,121 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { reactive, ref } from 'vue'
 import { useUserStore } from '@/store'
 
 definePage({
-  style: {
-    navigationBarTitleText: '发券人申请',
-  },
+    style: {
+        navigationBarTitleText: '发券人申请',
+    },
 })
 
 const userStore = useUserStore()
 
 const model = reactive({
-  name: '',
-  phone: '',
-  result: '',
-  description: '',
+    name: '',
+    phone: '',
+    result: '',
+    description: '',
 })
 const rules = reactive({
-  name: {
-    type: 'string',
-    required: true,
-    message: '请填写姓名',
-    trigger: ['blur', 'change'],
-  },
-  phone: {
-    type: 'string',
-    required: true,
-    message: '请填写电话',
-    pattern: /^1[3-9]\d{9}$/,
-    trigger: ['blur', 'change'],
-  },
+    name: {
+        type: 'string',
+        required: true,
+        message: '请填写姓名',
+        trigger: ['blur', 'change'],
+    },
+    phone: {
+        type: 'string',
+        required: true,
+        message: '请填写电话',
+        pattern: /^1[3-9]\d{9}$/,
+        trigger: ['blur', 'change'],
+    },
 })
 
 // 使用 ref 创建响应式引用
 const uFormRef = ref(null)
 
 function submitForm() {
-  uFormRef.value.validate().then((valid) => {
-    if (valid) {
-      uni.$u.toast('校验通过')
-    }
-    else {
-      uni.$u.toast('校验失败')
-    }
-  }).catch(() => {
-    // 处理验证错误
-    uni.$u.toast('校验失败')
-  })
+    uFormRef.value.validate().then((valid) => {
+        if (valid) {
+            uni.$u.toast('校验通过')
+        }
+        else {
+            uni.$u.toast('校验失败')
+        }
+    }).catch(() => {
+        // 处理验证错误
+        uni.$u.toast('校验失败')
+    })
 }
 </script>
 
 <template>
-  <view class="form-container">
-    <view class="form-wrapper">
-      <u-form
-        ref="uFormRef"
-        label-position="left"
-        :model="model"
-        :rules="rules"
-      >
-        <u-form-item
-          ref="item1"
-          label="申请人姓名"
-          prop="name"
-          :border-bottom="true"
-        >
-          <u-input
-            v-model="model.name"
-            border="none"
-            placeholder="请输入申请人姓名"
-          />
-        </u-form-item>
-        <u-form-item
-          ref="item2"
-          label="电话"
-          prop="phone"
-          :border-bottom="true"
-        >
-          <u-input
-            v-model="model.phone"
-            border="none"
-            placeholder="请输入小程序登录的手机号"
-          />
-        </u-form-item>
-        <u-form-item
-          ref="item3"
-          label="申请结果"
-          :border-bottom="true"
-        >
-          <view class="form-item-result u-text-danger">
-            已拒绝
-          </view>
-          <view class="form-item-result u-text-success">
-            已通过
-          </view>
-        </u-form-item>
-        <view class="form-item-des">
-          <u-form-item
-            ref="item4"
-            label="拒绝说明"
-            :border-bottom="true"
-          >
-            <u-textarea
-              v-model="model.description"
-              placeholder="此处显示拒绝说明"
-              border="none"
-              disabled
-            />
-          </u-form-item>
-        </view>
-      </u-form>
+    <view class="form-container">
+        <view class="form-wrapper">
+            <u-form
+                ref="uFormRef"
+                label-position="left"
+                :model="model"
+                :rules="rules"
+            >
+                <u-form-item
+                    ref="item1"
+                    label="申请人姓名"
+                    prop="name"
+                    :border-bottom="true"
+                >
+                    <u-input
+                        v-model="model.name"
+                        border="none"
+                        placeholder="请输入申请人姓名"
+                    />
+                </u-form-item>
+                <u-form-item
+                    ref="item2"
+                    label="电话"
+                    prop="phone"
+                    :border-bottom="true"
+                >
+                    <u-input
+                        v-model="model.phone"
+                        border="none"
+                        placeholder="请输入小程序登录的手机号"
+                    />
+                </u-form-item>
+                <u-form-item
+                    ref="item3"
+                    label="申请结果"
+                    :border-bottom="true"
+                >
+                    <view class="form-item-result u-text-danger">
+                        已拒绝
+                    </view>
+                    <view class="form-item-result u-text-success">
+                        已通过
+                    </view>
+                </u-form-item>
+                <view class="form-item-des">
+                    <u-form-item
+                        ref="item4"
+                        label="拒绝说明"
+                        :border-bottom="true"
+                    >
+                        <u-textarea
+                            v-model="model.description"
+                            placeholder="此处显示拒绝说明"
+                            border="none"
+                            disabled
+                        />
+                    </u-form-item>
+                </view>
+            </u-form>
 
-      <view class="form-btn" @click="submitForm">
-        提交申请
-      </view>
+            <view class="form-btn" @click="submitForm">
+                提交申请
+            </view>
+        </view>
     </view>
-  </view>
 </template>
 
 <style lang="scss" scoped>

src/pages-fg/404/index.vue

@@ -2,27 +2,27 @@
 import { HOME_PAGE } from '@/utils'
 
 definePage({
-  style: {
-    // 'custom' 表示开启自定义导航栏，默认 'default'
-    navigationStyle: 'custom',
-  },
+    style: {
+        // 'custom' 表示开启自定义导航栏，默认 'default'
+        navigationStyle: 'custom',
+    },
 })
 
 function goBack() {
-  // 当pages.config.ts中配置了tabbar页面时，使用switchTab切换到首页
-  // 否则使用navigateTo返回首页
-  uni.switchTab({ url: HOME_PAGE })
+    // 当pages.config.ts中配置了tabbar页面时，使用switchTab切换到首页
+    // 否则使用navigateTo返回首页
+    uni.switchTab({ url: HOME_PAGE })
 }
 </script>
 
 <template>
-  <view class="h-screen flex flex-col items-center justify-center">
-    <view> 404 </view>
-    <view> 页面不存在 </view>
-    <button class="mt-6 w-40 text-center" @click="goBack">
-      返回首页
-    </button>
-  </view>
+    <view class="h-screen flex flex-col items-center justify-center">
+        <view> 404 </view>
+        <view> 页面不存在 </view>
+        <button class="mt-6 w-40 text-center" @click="goBack">
+            返回首页
+        </button>
+    </view>
 </template>
 
 <style lang="scss" scoped>

src/pages-fg/login/login.vue

@@ -2,41 +2,41 @@
 import { useTokenStore } from '@/store/token'
 
 definePage({
-  style: {
-    navigationBarTitleText: '登录',
-  },
+    style: {
+        navigationBarTitleText: '登录',
+    },
 })
 
 const tokenStore = useTokenStore()
 async function doLogin() {
-  if (tokenStore.hasLogin) {
-    uni.navigateBack()
-    return
-  }
-  try {
-    // 调用登录接口
-    await tokenStore.login({
-      username: '菲鸽',
-      password: '123456',
-    })
-    uni.navigateBack()
-  }
-  catch (error) {
-    console.log('登录失败', error)
-  }
+    if (tokenStore.hasLogin) {
+        uni.navigateBack()
+        return
+    }
+    try {
+        // 调用登录接口
+        await tokenStore.login({
+            username: '菲鸽',
+            password: '123456',
+        })
+        uni.navigateBack()
+    }
+    catch (error) {
+        console.log('登录失败', error)
+    }
 }
 </script>
 
 <template>
-  <view class="login">
-    <!-- 本页面是非MP的登录页，主要用于 h5 和 APP -->
-    <view class="text-center">
-      登录页
+    <view class="login">
+        <!-- 本页面是非MP的登录页，主要用于 h5 和 APP -->
+        <view class="text-center">
+            登录页
+        </view>
+        <button class="mt-4 w-40 text-center" @click="doLogin">
+            点击模拟登录
+        </button>
     </view>
-    <button class="mt-4 w-40 text-center" @click="doLogin">
-      点击模拟登录
-    </button>
-  </view>
 </template>
 
 <style lang="scss" scoped>

src/pages-fg/login/register.vue

@@ -2,31 +2,31 @@
 import { LOGIN_PAGE } from '@/router/config'
 
 definePage({
-  style: {
-    navigationBarTitleText: '注册',
-  },
+    style: {
+        navigationBarTitleText: '注册',
+    },
 })
 
 function doRegister() {
-  uni.showToast({
-    title: '注册成功',
-  })
-  // 注册成功后跳转到登录页
-  uni.navigateTo({
-    url: LOGIN_PAGE,
-  })
+    uni.showToast({
+        title: '注册成功',
+    })
+    // 注册成功后跳转到登录页
+    uni.navigateTo({
+        url: LOGIN_PAGE,
+    })
 }
 </script>
 
 <template>
-  <view class="login">
-    <view class="text-center">
-      注册页
+    <view class="login">
+        <view class="text-center">
+            注册页
+        </view>
+        <button class="mt-4 w-40 text-center" @click="doRegister">
+            点击模拟注册
+        </button>
     </view>
-    <button class="mt-4 w-40 text-center" @click="doRegister">
-      点击模拟注册
-    </button>
-  </view>
 </template>
 
 <style lang="scss" scoped>

src/pages/income/income.vue

@@ -1,16 +1,351 @@
 <script lang="ts" setup>
-definePage({
-  style: {
-    navigationBarTitleText: '收益',
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { LOGIN_PAGE } from '@/router/config'
+import { useUserStore } from '@/store'
+import { useTokenStore } from '@/store/token'
 
-  },
+definePage({
+    style: {
+        navigationBarTitleText: '收益',
+        navigationStyle: 'custom',
+    },
 })
+
+const userStore = useUserStore()
+const tokenStore = useTokenStore()
+// 使用storeToRefs解构userInfo
+const { userInfo } = storeToRefs(userStore)
+
+// 微信小程序下登录
+async function handleLogin() {
+    // #ifdef MP-WEIXIN
+    // 微信登录
+    await tokenStore.wxLogin()
+
+    // #endif
+    // #ifndef MP-WEIXIN
+    uni.navigateTo({
+        url: `${LOGIN_PAGE}`,
+    })
+    // #endif
+}
+
+function handleLogout() {
+    uni.showModal({
+        title: '提示',
+        content: '确定要退出登录吗？',
+        success: (res) => {
+            if (res.confirm) {
+                // 清空用户信息
+                useTokenStore().logout()
+                // 执行退出登录逻辑
+                uni.showToast({
+                    title: '退出登录成功',
+                    icon: 'success',
+                })
+                // #ifdef MP-WEIXIN
+                // 微信小程序，去首页
+                // uni.reLaunch({ url: '/pages/index/index' })
+                // #endif
+                // #ifndef MP-WEIXIN
+                // 非微信小程序，去登录页
+                // uni.navigateTo({ url: LOGIN_PAGE })
+                // #endif
+            }
+        },
+    })
+}
+
+// 顶部导航栏高度,设置banner位置
+const navigationBarHeight = ref(0)
+// #ifdef MP-WEIXIN
+function getNavigationBarHeight() {
+    uni.getSystemInfo({
+        success: (res) => {
+            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+            console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
+            // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
+            navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
+        },
+    })
+}
+getNavigationBarHeight()
+// #endif
+
+function menuClick(page: string) {
+    uni.navigateTo({
+        url: `/pages-A/${page}/index`,
+    })
+}
 </script>
 
 <template>
-  <view class="pt-safe" />
+    <view class="profile-container">
+        <!-- 顶部区域 -->
+        <view class="income-header" style="background: url('../../static/images/me/me-bg.png') no-repeat center center; background-size: cover;">
+            <view class="income-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
+                <view class="income-header-balance">
+                    当前账户余额（元）
+                </view>
+                <view class="income-header-balance-num">
+                    <view class="income-header-balance-num-amount">
+                        7297491.08
+                    </view>
+                    <view class="income-header-balance-num-btns">
+                        <view class="income-header-balance-num-btn js">
+                            解锁
+                        </view>
+                        <view class="income-header-balance-num-btn tx">
+                            提现
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="income-header-tips">
+                <view class="income-header-tips-item">
+                    <view class="income-header-tips-item-num">
+                        729000.00
+                    </view>
+                    <view class="income-header-tips-item-des">
+                        可提现金额
+                    </view>
+                </view>
+                <view class="income-header-tips-item">
+                    <view class="income-header-tips-item-num">
+                        1,125
+                    </view>
+                    <view class="income-header-tips-item-des">
+                        未结算金额
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- 公告 -->
+        <view class="income-header-notice">
+            <view class="income-header-notice-icon">
+                <image src="@/static/images/income/notice.png" mode="" />
+            </view>
+            <view class="income-header-notice-content">
+                在考核周期内未达标已锁定收益，<text>前往查看~</text>
+            </view>
+        </view>
+        <!-- 菜单 -->
+        <view class="income-header-menu">
+            <!-- 结算筛选 -->
+            <view class="income-header-menu-filter">
+                <view class="income-header-menu-filter-item active">
+                    待结算
+                </view>
+                <view class="income-header-menu-filter-item">
+                    已结算
+                </view>
+            </view>
+            <view class="income-header-menu-item" @click="menuClick('applyForm')">
+                <view class="income-header-menu-icon">
+                    <image src="@/static/images/me/coupon-need.png" mode="" />
+                    <view class="income-header-menu-text">
+                        发券人申请
+                    </view>
+                </view>
+                <view class="income-header-menu-left">
+                    <u-icon name="arrow-right" color="#979797" size="12" />
+                </view>
+            </view>
+            <view class="income-header-menu-item" @click="handleLogout">
+                <view class="income-header-menu-icon">
+                    <image src="@/static/images/me/loginOut.png" mode="" />
+                    <view class="income-header-menu-text">
+                        退出登录
+                    </view>
+                </view>
+                <view class="income-header-menu-left">
+                    <u-icon name="arrow-right" color="#979797" size="12" />
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <style lang="scss" scoped>
-//
+.profile-container {
+  font-family: Alibaba PuHuiTi;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  .income-header {
+    height: 575rpx;
+    .income-header-avatar-info {
+      display: flex;
+      flex-direction: column;
+      gap: 39rpx;
+      padding: 0 24rpx;
+      .income-header-balance {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #ffffff;
+      }
+      .income-header-balance-num {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .income-header-balance-num-amount {
+          font-weight: 500;
+          font-size: 65rpx;
+          color: #ffffff;
+        }
+        .income-header-balance-num-btns {
+          display: flex;
+          gap: 15rpx;
+          .income-header-balance-num-btn {
+            padding: 20rpx 40rpx;
+            border-radius: 33rpx;
+            font-weight: 400;
+            font-size: 26rpx;
+            &.js {
+              background: #ed6b66;
+              color: #ffffff;
+            }
+            &.tx {
+              background: #bfbfbf;
+              color: #747474;
+            }
+          }
+        }
+      }
+    }
+    .income-header-tips {
+      height: 124rpx;
+      display: flex;
+      margin-top: 49rpx;
+      background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
+      border-radius: 10rpx;
+      margin: 49rpx 24rpx 0 24rpx;
+      .income-header-tips-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 15rpx;
+        font-weight: 500;
+        font-size: 34rpx;
+        color: #ffffff;
+        line-height: 1;
+        position: relative;
+        &:first-child:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 2px;
+          height: 40rpx;
+          background: #ffffff;
+        }
+        .income-header-tips-item-num {
+          font-weight: bold;
+        }
+        .income-header-tips-item-des {
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .income-header-notice {
+    margin: -50rpx 24rpx 24rpx 24rpx;
+    background: #ffffff;
+    border-radius: 10rpx;
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 28rpx 20rpx;
+    .income-header-notice-icon {
+      width: 52rpx;
+      height: 35rpx;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .income-header-notice-content {
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #333333;
+      text {
+        color: #c52d27;
+      }
+    }
+  }
+
+  .income-header-menu {
+    background: #ffffff;
+    border-radius: 10rpx 10rpx 0rpx 0rpx;
+    margin: 24rpx 24rpx 0;
+    .income-header-menu-filter {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 500;
+      font-size: 32rpx;
+      color: #333333;
+      height: 90rpx;
+      background: #ffffff;
+      box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
+      border-radius: 10rpx 10rpx 0rpx 0rpx;
+      .income-header-menu-filter-item {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        height: 100%;
+        &.active {
+          color: #ed6b66;
+          &:after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 67rpx;
+            height: 6rpx;
+            background: #ed6b66;
+            border-radius: 3rpx;
+          }
+        }
+      }
+    }
+    .income-header-menu-item {
+      height: 88rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #eeeeee;
+      padding: 0 20rpx;
+      &:last-child {
+        border-bottom: none;
+      }
+      .income-header-menu-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 13rpx;
+        image {
+          width: 40rpx;
+          height: 40rpx;
+        }
+        .income-header-menu-text {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+      .income-header-menu-left {
+      }
+    }
+  }
+}
 </style>

src/pages/index/index.vue

@@ -1,36 +1,36 @@
 <script lang="ts" setup>
 defineOptions({
-  name: 'Home',
+    name: 'Home',
 })
 definePage({
-  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
-  type: 'home',
-  style: {
-    // 'custom' 表示开启自定义导航栏，默认 'default'
-    navigationStyle: 'custom',
-    navigationBarTitleText: '首页',
-  },
+    // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
+    type: 'home',
+    style: {
+        // 'custom' 表示开启自定义导航栏，默认 'default'
+        navigationStyle: 'custom',
+        navigationBarTitleText: '首页',
+    },
 })
 
 onLoad(() => {
-  console.log('测试 uni API 自动引入: onLoad')
+    console.log('测试 uni API 自动引入: onLoad')
 })
 </script>
 
 <template>
-  <view class="bg-white px-4 pt-safe">
-    <view class="mt-10">
-      <up-coupon
-        :amount="200"
-        unit="￥"
-        title="大额优惠券"
-        desc="仅限VIP用户"
-        limit="满500可用"
-        time="有效期至2023-12-31"
-        size="large"
-        type="error"
-      />
-      <up-input border="surround" />
+    <view class="bg-white px-4 pt-safe">
+        <view class="mt-10">
+            <up-coupon
+                :amount="200"
+                unit="￥"
+                title="大额优惠券"
+                desc="仅限VIP用户"
+                limit="满500可用"
+                time="有效期至2023-12-31"
+                size="large"
+                type="error"
+            />
+            <up-input border="surround" />
+        </view>
     </view>
-  </view>
 </template>

src/pages/me/me.vue

@@ -6,10 +6,10 @@ import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
 
 definePage({
-  style: {
-    navigationBarTitleText: '我的',
-    navigationStyle: 'custom',
-  },
+    style: {
+        navigationBarTitleText: '我的',
+        navigationStyle: 'custom',
+    },
 })
 
 const userStore = useUserStore()
@@ -19,153 +19,153 @@ const { userInfo } = storeToRefs(userStore)
 
 // 微信小程序下登录
 async function handleLogin() {
-  // #ifdef MP-WEIXIN
-  // 微信登录
-  await tokenStore.wxLogin()
+    // #ifdef MP-WEIXIN
+    // 微信登录
+    await tokenStore.wxLogin()
 
-  // #endif
-  // #ifndef MP-WEIXIN
-  uni.navigateTo({
-    url: `${LOGIN_PAGE}`,
-  })
-  // #endif
+    // #endif
+    // #ifndef MP-WEIXIN
+    uni.navigateTo({
+        url: `${LOGIN_PAGE}`,
+    })
+    // #endif
 }
 
 function handleLogout() {
-  uni.showModal({
-    title: '提示',
-    content: '确定要退出登录吗？',
-    success: (res) => {
-      if (res.confirm) {
-        // 清空用户信息
-        useTokenStore().logout()
-        // 执行退出登录逻辑
-        uni.showToast({
-          title: '退出登录成功',
-          icon: 'success',
-        })
-        // #ifdef MP-WEIXIN
-        // 微信小程序，去首页
-        // uni.reLaunch({ url: '/pages/index/index' })
-        // #endif
-        // #ifndef MP-WEIXIN
-        // 非微信小程序，去登录页
-        // uni.navigateTo({ url: LOGIN_PAGE })
-        // #endif
-      }
-    },
-  })
+    uni.showModal({
+        title: '提示',
+        content: '确定要退出登录吗？',
+        success: (res) => {
+            if (res.confirm) {
+                // 清空用户信息
+                useTokenStore().logout()
+                // 执行退出登录逻辑
+                uni.showToast({
+                    title: '退出登录成功',
+                    icon: 'success',
+                })
+                // #ifdef MP-WEIXIN
+                // 微信小程序，去首页
+                // uni.reLaunch({ url: '/pages/index/index' })
+                // #endif
+                // #ifndef MP-WEIXIN
+                // 非微信小程序，去登录页
+                // uni.navigateTo({ url: LOGIN_PAGE })
+                // #endif
+            }
+        },
+    })
 }
 
 // 顶部导航栏高度,设置banner位置
 const navigationBarHeight = ref(0)
 // #ifdef MP-WEIXIN
 function getNavigationBarHeight() {
-  uni.getSystemInfo({
-    success: (res) => {
-      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-      console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
-      // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
-      navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
-    },
-  })
+    uni.getSystemInfo({
+        success: (res) => {
+            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+            console.log('顶部导航栏高度:', res.statusBarHeight, menuButtonInfo)
+            // 顶部导航栏高度 = 状态栏高度 + 胶囊的高度
+            navigationBarHeight.value = res.statusBarHeight + menuButtonInfo.height + 12
+        },
+    })
 }
 getNavigationBarHeight()
 // #endif
 
 const show = ref(true)
 function close() {
-  show.value = false
+    show.value = false
 }
 function open() {
-  show.value = true
+    show.value = true
 }
 function menuClick(page) {
-  uni.navigateTo({
-    url: `/pages-A/${page}/index`,
-  })
+    uni.navigateTo({
+        url: `/pages-A/${page}/index`,
+    })
 }
 </script>
 
 <template>
-  <view class="profile-container">
-    <!-- 顶部区域 -->
-    <view class="me-header" style="background: url('../../static/images/me/me-bg.png') no-repeat center center; background-size: cover;">
-      <view class="me-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
-        <view class="me-header-avatar">
-          <image src="https://picsum.photos/200/200" mode="" />
-        </view>
-        <view class="me-header-info">
-          <view class="me-header-name">
-            {{ userInfo.value?.nickName || '用户' }}
-          </view>
-        </view>
-      </view>
-      <view class="me-header-tips">
-        <view class="me-header-tips-item">
-          <view class="me-header-tips-item-num">
-            1,125
-          </view>
-          <view class="me-header-tips-item-des">
-            已领取
-          </view>
-        </view>
-        <view class="me-header-tips-item">
-          <view class="me-header-tips-item-num">
-            1,125
-          </view>
-          <view class="me-header-tips-item-des">
-            已使用
-          </view>
+    <view class="profile-container">
+        <!-- 顶部区域 -->
+        <view class="me-header" style="background: url('../../static/images/me/me-bg.png') no-repeat center center; background-size: cover;">
+            <view class="me-header-avatar-info" :style="{ paddingTop: `${navigationBarHeight}px` }">
+                <view class="me-header-avatar">
+                    <image src="https://picsum.photos/200/200" mode="" />
+                </view>
+                <view class="me-header-info">
+                    <view class="me-header-name">
+                        {{ userInfo.value?.nickName || '用户' }}
+                    </view>
+                </view>
+            </view>
+            <view class="me-header-tips">
+                <view class="me-header-tips-item">
+                    <view class="me-header-tips-item-num">
+                        1,125
+                    </view>
+                    <view class="me-header-tips-item-des">
+                        已领取
+                    </view>
+                </view>
+                <view class="me-header-tips-item">
+                    <view class="me-header-tips-item-num">
+                        1,125
+                    </view>
+                    <view class="me-header-tips-item-des">
+                        已使用
+                    </view>
+                </view>
+                <view class="me-header-tips-item">
+                    <view class="me-header-tips-item-num">
+                        1,125
+                    </view>
+                    <view class="me-header-tips-item-des">
+                        已过期
+                    </view>
+                </view>
+            </view>
         </view>
-        <view class="me-header-tips-item">
-          <view class="me-header-tips-item-num">
-            1,125
-          </view>
-          <view class="me-header-tips-item-des">
-            已过期
-          </view>
+        <!-- 菜单 -->
+        <view class="me-header-menu">
+            <view class="me-header-menu-item" @click="menuClick('applyForm')">
+                <view class="me-header-menu-icon">
+                    <image src="@/static/images/me/coupon-need.png" mode="" />
+                    <view class="me-header-menu-text">
+                        发券人申请
+                    </view>
+                </view>
+                <view class="me-header-menu-left">
+                    <up-icon name="arrow-right" color="#979797" size="12" />
+                </view>
+            </view>
+            <view class="me-header-menu-item" @click="handleLogout">
+                <view class="me-header-menu-icon">
+                    <image src="@/static/images/me/loginOut.png" mode="" />
+                    <view class="me-header-menu-text">
+                        退出登录
+                    </view>
+                </view>
+                <view class="me-header-menu-left">
+                    <up-icon name="arrow-right" color="#979797" size="12" />
+                </view>
+            </view>
         </view>
-      </view>
+        <!-- 申请中的提示框 -->
+        <up-modal
+            content="您已提交申请，请耐心等待！"
+            title="提示"
+            :show="show"
+        >
+            <template #confirmButton>
+                <view class="rounded" style="margin-top: 20rpx;" @click="show = false">
+                    我知道了
+                </view>
+            </template>
+        </up-modal>
     </view>
-    <!-- 菜单 -->
-    <view class="me-header-menu">
-      <view class="me-header-menu-item" @click="menuClick('applyForm')">
-        <view class="me-header-menu-icon">
-          <image src="@/static/images/me/coupon-need.png" mode="" />
-          <view class="me-header-menu-text">
-            发券人申请
-          </view>
-        </view>
-        <view class="me-header-menu-left">
-          <up-icon name="arrow-right" color="#979797" size="12" />
-        </view>
-      </view>
-      <view class="me-header-menu-item" @click="handleLogout">
-        <view class="me-header-menu-icon">
-          <image src="@/static/images/me/loginOut.png" mode="" />
-          <view class="me-header-menu-text">
-            退出登录
-          </view>
-        </view>
-        <view class="me-header-menu-left">
-          <up-icon name="arrow-right" color="#979797" size="12" />
-        </view>
-      </view>
-    </view>
-    <!-- 申请中的提示框 -->
-    <up-modal
-      content="您已提交申请，请耐心等待！"
-      title="提示"
-      :show="show"
-    >
-      <template #confirmButton>
-        <view class="rounded" style="margin-top: 20rpx;" @click="show = false">
-          我知道了
-        </view>
-      </template>
-    </up-modal>
-  </view>
 </template>
 
 <style lang="scss" scoped>

src/tabbar/index.vue

@@ -44,7 +44,7 @@ function handleClick(index: number) {
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
   needHideNativeTabbar
-  && uni.hideTabBar({
+    && uni.hideTabBar({
     fail(err) {
       console.log('hideTabBar fail: ', err)
     },
@@ -59,7 +59,7 @@ onLoad(() => {
 onMounted(() => {
   // 解决支付宝自定义tabbar 未隐藏导致有2个 tabBar 的问题; 注意支付宝很特别，需要在 onMounted 钩子调用
   customTabbarEnable // 另外，支付宝里面，只要是 customTabbar 都需要隐藏
-  && uni.hideTabBar({
+    && uni.hideTabBar({
     fail(err) {
       console.log('hideTabBar fail: ', err)
     },
@@ -85,55 +85,55 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
 </script>
 
 <template>
-  <view v-if="customTabbarEnable" class="h-50px pb-safe">
-    <view class="border-and-fixed bg-white" @touchmove.stop.prevent>
-      <view class="h-50px flex items-center">
-        <view
-          v-for="(item, index) in tabbarList" :key="index"
-          class="flex flex-1 flex-col items-center justify-center"
-          :style="{ color: getColorByIndex(index) }"
-          @click="handleClick(index)"
-        >
-          <view v-if="item.isBulge" class="relative">
-            <!-- 中间一个鼓包tabbarItem的处理 -->
-            <view class="bulge">
-              <!-- TODO 2/2: 中间鼓包tabbarItem配置：通常是一个图片，或者icon，点击触发业务逻辑 -->
-              <!-- 常见的是：扫描按钮、发布按钮、更多按钮等 -->
-              <image class="mt-6rpx h-200rpx w-200rpx" src="/static/tabbar/scan.png" />
-            </view>
-          </view>
-          <view v-else class="relative px-3 text-center">
-            <template v-if="item.iconType === 'uiLib'">
-              <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
-              <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
-              <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
-              <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
-              <!-- <wd-icon :name="item.icon" size="20" /> -->
-            </template>
-            <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
-              <view :class="item.icon" class="text-20px" />
-            </template>
-            <template v-if="item.iconType === 'image'">
-              <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
-            </template>
-            <view class="mt-2px text-12px">
-              {{ item.text }}
-            </view>
-            <!-- 角标显示 -->
-            <view v-if="item.badge">
-              <template v-if="item.badge === 'dot'">
-                <view class="absolute right-0 top-0 h-2 w-2 rounded-full bg-#f56c6c" />
-              </template>
-              <template v-else>
-                <view class="absolute top-0 box-border h-5 min-w-5 center rounded-full bg-#f56c6c px-1 text-center text-xs text-white -right-3">
-                  {{ item.badge > 99 ? '99+' : item.badge }}
+    <view v-if="customTabbarEnable" class="h-50px pb-safe">
+        <view class="border-and-fixed bg-white" @touchmove.stop.prevent>
+            <view class="h-50px flex items-center">
+                <view
+                    v-for="(item, index) in tabbarList" :key="index"
+                    class="flex flex-1 flex-col items-center justify-center"
+                    :style="{ color: getColorByIndex(index) }"
+                    @click="handleClick(index)"
+                >
+                    <view v-if="item.isBulge" class="relative">
+                        <!-- 中间一个鼓包tabbarItem的处理 -->
+                        <view class="bulge">
+                            <!-- TODO 2/2: 中间鼓包tabbarItem配置：通常是一个图片，或者icon，点击触发业务逻辑 -->
+                            <!-- 常见的是：扫描按钮、发布按钮、更多按钮等 -->
+                            <image class="mt-6rpx h-200rpx w-200rpx" src="/static/tabbar/scan.png" />
+                        </view>
+                    </view>
+                    <view v-else class="relative px-3 text-center">
+                        <template v-if="item.iconType === 'uiLib'">
+                            <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
+                            <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
+                            <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
+                            <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
+                            <!-- <wd-icon :name="item.icon" size="20" /> -->
+                        </template>
+                        <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
+                            <view :class="item.icon" class="text-20px" />
+                        </template>
+                        <template v-if="item.iconType === 'image'">
+                            <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
+                        </template>
+                        <view class="mt-2px text-12px">
+                            {{ item.text }}
+                        </view>
+                        <!-- 角标显示 -->
+                        <view v-if="item.badge">
+                            <template v-if="item.badge === 'dot'">
+                                <view class="absolute right-0 top-0 h-2 w-2 rounded-full bg-#f56c6c" />
+                            </template>
+                            <template v-else>
+                                <view class="absolute top-0 box-border h-5 min-w-5 center rounded-full bg-#f56c6c px-1 text-center text-xs text-white -right-3">
+                                    {{ item.badge > 99 ? '99+' : item.badge }}
+                                </view>
+                            </template>
+                        </view>
+                    </view>
                 </view>
-              </template>
             </view>
-          </view>
-        </view>
-      </view>
-      <!-- <up-tabbar
+            <!-- <up-tabbar
         class="text-20px"
         :value="tabbarStore.curIdx"
         :safe-area-inset-bottom="true"
@@ -157,9 +157,9 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
         </template>
       </up-tabbar> -->
 
-      <view class="pb-safe" />
+            <view class="pb-safe" />
+        </view>
     </view>
-  </view>
 </template>
 
 <style scoped lang="scss">

vite.config.ts

@@ -127,13 +127,13 @@ export default defineConfig(({ command, mode }) => {
       },
       // 打包分析插件，h5 + 生产环境才弹出
       UNI_PLATFORM === 'h5'
-      && mode === 'production'
+            && mode === 'production'
       && visualizer({
-        filename: './node_modules/.cache/visualizer/stats.html',
-        open: true,
-        gzipSize: true,
-        brotliSize: true,
-      }),
+              filename: './node_modules/.cache/visualizer/stats.html',
+              open: true,
+              gzipSize: true,
+              brotliSize: true,
+            }),
       // 原生插件资源复制插件 - 仅在 app 平台且启用时生效
       createCopyNativeResourcesPlugin(
         UNI_PLATFORM === 'app' && VITE_COPY_NATIVE_RES_ENABLE === 'true',