property-resident-side/property-uniapp-project/pages/navigation/navigation.vue

<template>
  <view class="guide-page">
    <view class="status-bar"></view>
    <!-- 引导内容滑动容器 -->
    <swiper
      class="guide-swiper"
      :current="currentStep"
      @change="handleSwiperChange"
      :disable-scroll="false"
      :indicator-dots="false"
      :mode="mode"
    >
      <!-- 便捷服务 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-img">
            <image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
          </view>
          <view class="guide-text">
            <view class="guide-title">便捷服务</view>
            <view class="guide-subtitle">报修、缴费、预约</view>
          </view>
        </view>
      </swiper-item>

      <!-- 高效管理 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-img">
            <image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
          </view>
          <view class="guide-text">
            <view class="guide-title">高效管理</view>
            <view class="guide-subtitle">自动化流程和智能设备</view>
          </view>
        </view>
      </swiper-item>

      <!--安全保障 -->
      <swiper-item>
        <view class="guide-item">
          <view class="guide-img">
            <image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
          </view>
          <view class="guide-text">
            <view class="guide-title">安全保障</view>
            <view class="guide-subtitle">智能巡检和智慧访客</view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 进度点 -->
    <view class="progress-dots">
      <view class="dot" :class="{ active: currentStep === 0 }"></view>
      <view class="dot" :class="{ active: currentStep === 1 }"></view>
      <view class="dot" :class="{ active: currentStep === 2 }"></view>
    </view>

    <!-- 操作按钮 -->
    <view class="guide-btn-wrap">
      <button
        class="guide-btn"
        :class="{ primary: currentStep === 2 }"
        @click="handleBtnClick"
      >
        {{ currentStep === 2 ? '立即体验' : '下一步' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// ========== 响应式数据 ==========
// 当前引导步骤（0/1/2）
const currentStep = ref(0);
const mode = ref("default")
// 防重复跳转锁
const isNavigating = ref(false)

// ========== 方法 ==========
// 滑动swiper切换步骤
const handleSwiperChange = (e) => {
  currentStep.value = e.detail.current;
};

// 点击按钮操作
const handleBtnClick = () => {
  // 前两步：点击下一步切换
  if (currentStep.value < 2) {
    currentStep.value++;
  } else {
    // 防重复跳转：已触发过跳转则直接返回
    if (isNavigating.value) return;
    isNavigating.value = true;
    // 立即体验，跳转登录页
    // 1. 记录引导已完成
    uni.setStorageSync('hasShowGuide', true);
    // 2. 跳转登录页
    uni.redirectTo({
      url: "/pageSubPack/loginSub/pwd-login"
    })
  }
};
</script>

<style scoped>
/* 页面容器 */
.guide-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #E2F0FF, #F6FAFF);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* 状态栏 - 自适应设备状态栏高度 */
.status-bar {
  height: var(--status-bar-height);
  width: 100%;
  flex-shrink: 0;
}

/* 滑动容器 */
.guide-swiper {
  flex: 1;
  width: 100%;
}

/* 单个引导项 - 全屏自适应 */
.guide-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 60rpx;
  box-sizing: border-box;
}

/* 图片区域 - 自适应 */
.guide-img {
  width: 80%;
  max-width: 600rpx;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.img-content {
  width: 100%;
  height: 100%;
  max-height: 50vh;
}

/* 文字区域 */
.guide-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

/* 引导标题 */
.guide-title {
  font-size: 56rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

/* 引导副标题 */
.guide-subtitle {
  font-size: 28rpx;
  color: #666;
}

/* 进度点容器 */
.progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  flex-shrink: 0;
}

/* 单个进度点 */
.dot {
  width: 16rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #ddd;
  margin: 0 8rpx;
  transition: all 0.3s ease;
}

/* 激活的进度点 */
.dot.active {
  background-color: #007aff;
  width: 28rpx;
}

/* 按钮容器 */
.guide-btn-wrap {
  width: 80%;
  max-width: 600rpx;
  margin-bottom: 80rpx;
  flex-shrink: 0;
}

/* 引导按钮 */
.guide-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 默认按钮样式（下一步） */
.guide-btn:not(.primary) {
  background-color: #fff;
  color: #007aff;
  border: 2rpx solid #007aff;
}

/* 主按钮样式（立即体验） */
.guide-btn.primary {
  background-color: #007aff;
  color: #fff;
  border: none;
}

/* 按钮禁用态（可选） */
.guide-btn:disabled {
  background-color: #ccc;
  color: #fff;
  border: none;
}
</style>