我的

src/pages-A/applyForm/index.vue

@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { reactive, ref } from 'vue'
+import { useUserStore } from '@/store'
+
+definePage({
+  style: {
+    navigationBarTitleText: '发券人申请',
+  },
+})
+
+const userStore = useUserStore()
+
+const model = reactive({
+  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'],
+  },
+})
+
+// 使用 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('校验失败')
+  })
+}
+</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-btn" @click="submitForm">
+        提交申请
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .u-form-item__body__left {
+  width: 150rpx !important;
+  font-weight: 400 !important;
+  font-size: 26rpx !important;
+  color: #333333 !important;
+}
+::v-deep .u-input__content__field-wrapper__field {
+  text-align: right !important;
+}
+::v-deep .u-form-item__body__left__content__label {
+  color: #333333 !important;
+  font-size: 26rpx !important;
+  font-weight: 400 !important;
+}
+::v-deep .u-line {
+  border-color: #eeeeee !important;
+}
+
+::v-deep .u-form-item__body__right__content__slot {
+  display: flex;
+  justify-content: flex-end;
+}
+.form-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 20rpx;
+}
+
+.form-wrapper {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 0 32rpx;
+}
+
+.form-item-result {
+  width: 112rpx;
+  height: 44rpx;
+  line-height: 44rpx;
+  border-radius: 10rpx;
+  text-align: center;
+  &.u-text-danger {
+    color: #ff3333;
+    background: rgba(#ff7171, 0.2);
+  }
+  &.u-text-success {
+    color: #64a6ff;
+    background: rgba(#64a6ff, 0.2);
+  }
+}
+
+.form-item-des {
+  ::v-deep .u-form-item__body {
+    flex-direction: column !important;
+    gap: 32rpx !important;
+  }
+}
+
+.form-btn {
+  width: 600rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
+  border-radius: 10rpx;
+  position: fixed;
+  bottom: 20rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: 400;
+  font-size: 30rpx;
+  color: #ffffff;
+  text-align: center;
+}
+</style>

src/pages/me/me.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 import { LOGIN_PAGE } from '@/router/config'
 import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
@@ -7,6 +8,7 @@ import { useTokenStore } from '@/store/token'
 definePage({
   style: {
     navigationBarTitleText: '我的',
+    navigationStyle: 'custom',
   },
 })
 
@@ -54,23 +56,241 @@ function handleLogout() {
     },
   })
 }
+
+// 顶部导航栏高度,设置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
+
+const show = ref(true)
+function close() {
+  show.value = false
+}
+function open() {
+  show.value = true
+}
+function menuClick(page) {
+  uni.navigateTo({
+    url: `/pages-A/${page}/index`,
+  })
+}
 </script>
 
 <template>
   <view class="profile-container">
-    <view class="mt-3 break-all px-3 text-center text-green-500">
-      {{ userInfo.username ? '已登录' : '未登录' }}
+    <!-- 顶部区域 -->
+    <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="mt-[60vh] px-3">
-      <view class="m-auto w-160px text-center">
-        <button v-if="tokenStore.hasLogin" type="warn" class="w-full" @click="handleLogout">
-          退出登录
-        </button>
-        <button v-else type="primary" class="w-full" @click="handleLogin">
-          登录
-        </button>
+    <!-- 菜单 -->
+    <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>
+// 提示框
+::v-deep .u-modal {
+  width: 580rpx !important;
+  //   height: 376rpx !important;
+  border-radius: 20rpx !important;
+}
+::v-deep .u-modal__title {
+  font-weight: 500 !important;
+  font-size: 34rpx !important;
+  color: #333333 !important;
+  padding-top: 29rpx !important;
+  padding-bottom: 28rpx !important;
+}
+::v-deep .u-modal__content {
+  border-top: 1px solid #eeeeee;
+  border-bottom: 1px solid #eeeeee;
+  padding-top: 82rpx !important;
+  padding-bottom: 64rpx !important;
+}
+::v-deep .u-modal__content__text {
+  font-weight: 500 !important;
+  font-size: 32rpx !important;
+  color: #333333 !important;
+  text-align: center !important;
+}
+.rounded {
+  width: 300rpx;
+  line-height: 69rpx;
+  background: linear-gradient(90deg, #ee6b67 0%, #ff7d78 100%);
+  border-radius: 35rpx;
+  font-weight: 400;
+  font-size: 30rpx;
+  color: #ffffff;
+  text-align: center;
+  margin: 0 auto;
+}
+.profile-container {
+  font-family: Alibaba PuHuiTi;
+  .me-header {
+    height: 575rpx;
+    .me-header-avatar-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 24rpx;
+      .me-header-avatar {
+        width: 128rpx;
+        height: 128rpx;
+        border-radius: 50%;
+        overflow: hidden;
+        image {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .me-header-info {
+        .me-header-name {
+          font-weight: 500;
+          font-size: 30rpx;
+          color: #ffffff;
+        }
+      }
+    }
+    .me-header-tips {
+      display: flex;
+      margin-top: 49rpx;
+      .me-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;
+        .me-header-tips-item-num {
+          font-weight: bold;
+        }
+        .me-header-tips-item-des {
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .me-header-menu {
+    background: #ffffff;
+    border-radius: 10rpx 10rpx 0rpx 0rpx;
+    margin: -50rpx 24rpx 0;
+    padding: 0 20rpx;
+    .me-header-menu-item {
+      height: 88rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #eeeeee;
+      &:last-child {
+        border-bottom: none;
+      }
+      .me-header-menu-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 13rpx;
+        image {
+          width: 40rpx;
+          height: 40rpx;
+        }
+        .me-header-menu-text {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+      .me-header-menu-left {
+      }
+    }
+  }
+}
+</style>

src/tabbar/index.vue

@@ -133,7 +133,7 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
           </view>
         </view>
       </view>
-      <up-tabbar
+      <!-- <up-tabbar
         class="text-20px"
         :value="tabbarStore.curIdx"
         :safe-area-inset-bottom="true"
@@ -151,11 +151,11 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
               <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
                 <view :class="item.icon" />
               </template>
-              <!-- <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" /> -->
+              <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
             </template>
           </up-tabbar-item>
         </template>
-      </up-tabbar>
+      </up-tabbar> -->
 
       <view class="pb-safe" />
     </view>

vite.config.ts

@@ -73,6 +73,7 @@ export default defineConfig(({ command, mode }) => {
         // 是个数组，可以配置多个，但是不能为pages里面的目录！！
         subPackages: [
           'src/pages-fg', // 这个是相对必要的路由，尽量留着（登录页、注册页、404页等）
+          'src/pages-A',
         ],
         dts: 'src/types/uni-pages.d.ts',
       }),