feat: 增加navbar,fab组件

src/components/fab/FabButton.vue

@@ -6,11 +6,7 @@
     @touchend.stop="endDrag"
     :style="{ right: position.x + 'px', bottom: position.y + 'px' }"
   >
-    <image
-      @click="handleClick"
-      class="w-full h-full rounded-full"
-      src="/static/images/home/customerService.svg"
-    ></image>
+    <image class="w-full h-full rounded-full" src="/static/images/home/customerService.svg"></image>
   </view>
 </template>
 
@@ -31,28 +27,73 @@ const props = defineProps({
 const systemInfo = uni.getSystemInfoSync()
 const position = ref({ x: props.initialX, y: props.initialY })
 const startPosition = ref({ x: 0, y: 0 })
+const startTime = ref(0)
+const longPressTimer = ref<number | null>(null)
+const canDrag = ref(false)
+const moveDistance = ref(0)
 
 const startDrag = (event: TouchEvent) => {
   startPosition.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }
+  startTime.value = Date.now()
+  canDrag.value = false
+  moveDistance.value = 0
+
+  // 设置长按定时器，300ms后允许拖动
+  longPressTimer.value = setTimeout(() => {
+    if (!canDrag.value) {
+      canDrag.value = true
+    }
+  }, 300) as unknown as number
 }
 
 const onDrag = (event: TouchEvent) => {
   const deltaX = event.touches[0].clientX - startPosition.value.x
   const deltaY = event.touches[0].clientY - startPosition.value.y
+
+  // 计算移动距离
+  moveDistance.value = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+
+  // 如果移动距离超过阈值，立即允许拖动
+  if (moveDistance.value > 10 && !canDrag.value) {
+    canDrag.value = true
+    if (longPressTimer.value) {
+      clearTimeout(longPressTimer.value)
+      longPressTimer.value = null
+    }
+  }
+
+  if (!canDrag.value) return
+
   position.value = { x: position.value.x - deltaX, y: position.value.y - deltaY }
   startPosition.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }
 }
 
 const endDrag = () => {
-  const windowWidth = systemInfo.windowWidth
-  const windowHeight = systemInfo.windowHeight
-  const buttonWidth = 128 // 按钮宽度
-  const buttonHeight = 128 // 按钮高度
+  // 清除长按定时器
+  if (longPressTimer.value) {
+    clearTimeout(longPressTimer.value)
+    longPressTimer.value = null
+  }
 
-  if (position.value.x < 0) position.value.x = 0
-  if (position.value.y < 0) position.value.y = 0
-  if (position.value.x + buttonWidth > windowWidth) position.value.x = windowWidth - buttonWidth
-  if (position.value.y + buttonHeight > windowHeight) position.value.y = windowHeight - buttonHeight
+  // 如果移动距离小于阈值且触摸时间小于300ms，则触发点击事件
+  if (!canDrag.value && moveDistance.value < 10 && Date.now() - startTime.value < 300) {
+    handleClick()
+    return
+  }
+
+  // 如果是拖动结束，处理边界
+  if (canDrag.value) {
+    const windowWidth = systemInfo.windowWidth
+    const windowHeight = systemInfo.windowHeight
+    const buttonWidth = 128 // 按钮宽度
+    const buttonHeight = 128 // 按钮高度
+
+    if (position.value.x < 0) position.value.x = 0
+    if (position.value.y < 0) position.value.y = 0
+    if (position.value.x + buttonWidth > windowWidth) position.value.x = windowWidth - buttonWidth
+    if (position.value.y + buttonHeight > windowHeight)
+      position.value.y = windowHeight - buttonHeight
+  }
 }
 
 const handleClick = () => {

src/login-sub/components/LoginMask.vue

@@ -1,7 +1,8 @@
 <template>
-  <wd-overlay :show="show">
+  <Overlay :show="show" @update:show="handleClose">
     <view
       class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center bg-white p-[40rpx] rounded-[32rpx]"
+      @click.stop
     >
       <image
         class="w-[200rpx] h-[200rpx]"
@@ -12,15 +13,16 @@
         <text class="text-[26rpx] mt-[20rpx] mb-[40rpx]" :selectable="false">
           {{ phone ? '申请使用您的手机号' : '申请获取您的个人信息' }}
         </text>
-        <wd-button
-          size="large"
-          custom-class="w-[493rpx] mb-[40rpx]"
+        <button
+          class="w-[493rpx] mb-[40rpx] h-[88rpx] rounded-[44rpx] text-[32rpx] text-white"
+          :class="checked ? 'bg-[#1580FF]' : 'bg-[#BFBFBF]'"
           @click.stop="handleClick"
           open-type="getPhoneNumber"
           @getphonenumber="getPhoneNumber"
+          :disabled="!checked"
         >
           手机号快捷登录
-        </wd-button>
+        </button>
 
         <view class="flex items-center flex-nowrap" @click.stop="checked = true">
           <wd-radio-group v-model="checked" custom-class="mr-10rpx">
@@ -31,14 +33,13 @@
           </view>
         </view>
       </view>
-      <wd-toast />
     </view>
-  </wd-overlay>
+  </Overlay>
 </template>
 
 <script lang="ts" setup>
-import { useToast } from 'wot-design-uni'
 import { useLogin } from '@/login-sub/hooks/useUserInfo'
+import Overlay from './Overlay.vue'
 import {
   getSessionKey,
   getVolunteerInitialization,
@@ -62,7 +63,6 @@ defineOptions({
 
 const emits = defineEmits(['update:show', 'authReady'])
 
-const toast = useToast()
 const userStore = useUserStore()
 
 const handleClose = () => {
@@ -74,24 +74,35 @@ const checked = ref(false) // 是否同意条款
 const getPhoneInfo = ref(null)
 
 const getPhoneNumber = async (e: any) => {
-  if (e.errMsg == 'getPhoneNumber:ok') {
+  if (e.detail.errMsg == 'getPhoneNumber:ok') {
+    const detail = e.detail
     let _getPhoneInfo = {
-      iv: e.iv,
-      encryptedData: e.encryptedData,
-      code: e.code,
+      iv: detail.iv,
+      encryptedData: detail.encryptedData,
+      code: detail.code,
     }
     getPhoneInfo.value = _getPhoneInfo
-    await getUserInfo(e.code)
-  } else if (e.errMsg == 'getPhoneNumber:fail not login') {
-    toast.warning('请先登录')
+    await getUserInfo(detail.code)
+  } else if (e.detail.errMsg == 'getPhoneNumber:fail not login') {
+    uni.showToast({
+      title: '请先登录',
+      icon: 'none',
+    })
   } else {
-    toast.warning('获取手机号失败')
+    uni.showToast({
+      title: '获取手机号失败',
+      icon: 'none',
+    })
   }
 }
 
 const handleClick = () => {
   if (!checked.value) {
-    toast.warning('您需先同意《服务条款》和《隐私条款》')
+    uni.showToast({
+      title: '您需先同意《服务条款》和《隐私条款》',
+      icon: 'none',
+    })
+    return
   }
 }
 
@@ -135,7 +146,10 @@ const getUserInfo = async (code: string) => {
       })
     }
   } else {
-    toast.warning('您需先授权')
+    uni.showToast({
+      title: '您需先授权',
+      icon: 'none',
+    })
   }
 }
 </script>

src/login-sub/components/Overlay.vue

@@ -0,0 +1,54 @@
+<template>
+  <view
+    v-if="show"
+    class="overlay"
+    :class="{ 'overlay-show': show }"
+    @click="handleClick"
+    :style="{ zIndex }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  zIndex: {
+    type: Number,
+    default: 10,
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['click', 'update:show'])
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+  if (props.closeOnClickOverlay) {
+    emit('update:show', false)
+  }
+}
+</script>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  transition: all 0.3s ease;
+}
+
+.overlay-show {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

src/login-sub/components/navbar/Navbar.vue

@@ -0,0 +1,190 @@
+<template>
+  <view class="navbar">
+    <!-- 状态栏占位 -->
+    <view
+      v-if="safeAreaInsetTop"
+      class="status-bar"
+      :style="{ height: statusBarHeight + 'px', backgroundColor: bgColor }"
+    ></view>
+
+    <!-- 导航栏主体 -->
+    <view
+      class="navbar-content"
+      :class="{
+        'navbar-fixed': fixed,
+        'navbar-border': bordered,
+      }"
+      :style="{
+        backgroundColor: bgColor,
+        height: navHeight + 'px',
+        top: fixed ? (safeAreaInsetTop ? statusBarHeight : 0) + 'px' : '0',
+      }"
+    >
+      <!-- 左侧区域 -->
+      <view class="navbar-left" @click="handleClickLeft">
+        <view v-if="leftArrow" class="back-icon">
+          <image src="./left.jpg" mode="aspectFit" class="w-[48rpx] h-[48rpx]" />
+        </view>
+        <slot name="left"></slot>
+      </view>
+
+      <!-- 中间标题区域 -->
+      <view class="navbar-title">
+        <slot name="title">
+          <text class="title-text">{{ title }}</text>
+        </slot>
+      </view>
+
+      <!-- 右侧区域 -->
+      <view class="navbar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+
+    <!-- 占位元素 -->
+    <view
+      v-if="placeholder && fixed"
+      :style="{
+        height: `${navHeight}px`,
+        backgroundColor: bgColor,
+      }"
+    ></view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  leftArrow: {
+    type: Boolean,
+    default: false,
+  },
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: true,
+  },
+  bgColor: {
+    type: String,
+    default: '#ffffff',
+  },
+})
+
+const emit = defineEmits(['clickLeft'])
+
+// 获取系统信息
+const systemInfo = uni.getSystemInfoSync()
+const statusBarHeight = systemInfo.statusBarHeight || 0
+
+// 动态计算导航栏高度
+const navHeight = computed(() => {
+  // 获取屏幕信息
+  const { platform, screenWidth } = systemInfo
+
+  // 将px转换为rpx的比例
+  const ratio = 750 / screenWidth
+
+  // 根据平台设置不同的导航栏高度
+  if (platform === 'ios') {
+    return 88 / ratio // iOS 一般是 44pt，转换为px
+  } else if (platform === 'android') {
+    return 96 / ratio // Android 一般是 48dp，转换为px
+  } else {
+    return 88 / ratio // 默认值
+  }
+})
+
+const handleClickLeft = () => {
+  emit('clickLeft')
+}
+</script>
+
+<style scoped>
+.navbar {
+  width: 100%;
+}
+
+.status-bar {
+  width: 100%;
+  background-color: inherit;
+}
+
+.navbar-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.navbar-fixed {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+}
+
+.navbar-border {
+  border-bottom: 1rpx solid #eee;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  min-width: 100rpx;
+  height: 100%;
+}
+
+.back-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.navbar-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 100rpx;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-text {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  min-width: 100rpx;
+  justify-content: flex-end;
+  height: 100%;
+}
+</style>

src/login-sub/index.vue

@@ -9,11 +9,17 @@
 
 <template>
   <view class="h-screen flex flex-col">
-    <wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false" fixed>
+    <Navbar
+      safeAreaInsetTop
+      :bordered="false"
+      :fixed="true"
+      :placeholder="true"
+      bgColor="transparent"
+    >
       <template #title>
         <text class="text-[#1F2329] text-[36rpx] font-medium">新高考选科</text>
       </template>
-    </wd-navbar>
+    </Navbar>
     <view class="flex flex-col justify-center items-center flex-1 pb-safe">
       <image
         class="w-[424rpx] h-[424rpx]"
@@ -33,6 +39,8 @@
 
 <script setup lang="ts">
 import LoginMask from './components/LoginMask.vue'
+import Navbar from './components/navbar/Navbar.vue'
+
 const show = ref(false)
 
 const handleLogin = () => {

src/pages-sub/components/navbar/Navbar.vue

@@ -0,0 +1,190 @@
+<template>
+  <view class="navbar">
+    <!-- 状态栏占位 -->
+    <view
+      v-if="safeAreaInsetTop"
+      class="status-bar"
+      :style="{ height: statusBarHeight + 'px', backgroundColor: bgColor }"
+    ></view>
+
+    <!-- 导航栏主体 -->
+    <view
+      class="navbar-content"
+      :class="{
+        'navbar-fixed': fixed,
+        'navbar-border': bordered,
+      }"
+      :style="{
+        backgroundColor: bgColor,
+        height: navHeight + 'px',
+        top: fixed ? (safeAreaInsetTop ? statusBarHeight : 0) + 'px' : '0',
+      }"
+    >
+      <!-- 左侧区域 -->
+      <view class="navbar-left" @click="handleClickLeft">
+        <view v-if="leftArrow" class="back-icon">
+          <image src="./left.jpg" mode="aspectFit" class="w-[48rpx] h-[48rpx]" />
+        </view>
+        <slot name="left"></slot>
+      </view>
+
+      <!-- 中间标题区域 -->
+      <view class="navbar-title">
+        <slot name="title">
+          <text class="title-text">{{ title }}</text>
+        </slot>
+      </view>
+
+      <!-- 右侧区域 -->
+      <view class="navbar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+
+    <!-- 占位元素 -->
+    <view
+      v-if="placeholder && fixed"
+      :style="{
+        height: `${navHeight}px`,
+        backgroundColor: bgColor,
+      }"
+    ></view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  leftArrow: {
+    type: Boolean,
+    default: false,
+  },
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: true,
+  },
+  bgColor: {
+    type: String,
+    default: '#ffffff',
+  },
+})
+
+const emit = defineEmits(['clickLeft'])
+
+// 获取系统信息
+const systemInfo = uni.getSystemInfoSync()
+const statusBarHeight = systemInfo.statusBarHeight || 0
+
+// 动态计算导航栏高度
+const navHeight = computed(() => {
+  // 获取屏幕信息
+  const { platform, screenWidth } = systemInfo
+
+  // 将px转换为rpx的比例
+  const ratio = 750 / screenWidth
+
+  // 根据平台设置不同的导航栏高度
+  if (platform === 'ios') {
+    return 88 / ratio // iOS 一般是 44pt，转换为px
+  } else if (platform === 'android') {
+    return 96 / ratio // Android 一般是 48dp，转换为px
+  } else {
+    return 88 / ratio // 默认值
+  }
+})
+
+const handleClickLeft = () => {
+  emit('clickLeft')
+}
+</script>
+
+<style scoped>
+.navbar {
+  width: 100%;
+}
+
+.status-bar {
+  width: 100%;
+  background-color: inherit;
+}
+
+.navbar-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.navbar-fixed {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+}
+
+.navbar-border {
+  border-bottom: 1rpx solid #eee;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  min-width: 100rpx;
+  height: 100%;
+}
+
+.back-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.navbar-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 100rpx;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-text {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  min-width: 100rpx;
+  justify-content: flex-end;
+  height: 100%;
+}
+</style>

src/pages-sub/customerService/index/index.vue

@@ -9,14 +9,11 @@
 
 <template>
   <view class="bg-[#fff] h-[100vh] flex flex-col">
-    <wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false">
+    <Navbar safeAreaInsetTop :bordered="false" title="在线客服" leftArrow @clickLeft="handleBack">
       <template #title>
         <text class="text-[#1F2329] text-[36rpx] font-medium">在线客服</text>
       </template>
-      <template #left>
-        <wd-icon name="thin-arrow-left" custom-style="icon-style" @click="handleBack"></wd-icon>
-      </template>
-    </wd-navbar>
+    </Navbar>
 
     <view class="flex-1 bg-[#F8F8F8] px-[32rpx] pb-safe">
       <view class="mt-[84rpx] h-[754rpx] radius-[16rpx] bg-[#fff]">
@@ -62,6 +59,8 @@
 </template>
 
 <script lang="ts" setup>
+import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
+
 const makePhoneCall = () => {
   uni
     .makePhoneCall({