feat(app): 初始化喝酒了么小程序基础架构

- 添加项目配置文件(.editorconfig, .gitignore) - 创建App.vue主应用文件，包含启动时Mock数据初始化 - 添加index.html和main.js应用入口文件 - 配置manifest.json应用基本信息和权限设置 - 设置pages.json页面路由和全局样式 - 添加uni.promisify.adaptor.js适配器文件 - 创建uni.scss设计令牌系统，定义琥珀夜光主题色彩 - 新增constants.js常量定义，包含酒类分类和品牌数据
2026-07-13 22:15:16 +08:00
parent 35af888097
commit f945ccf4c7
34 changed files with 6447 additions and 0 deletions
@@ -0,0 +1,235 @@
+<template>
+  <view class="page-container onboarding">
+    <!-- 跳过按钮 -->
+    <view class="skip-bar">
+      <text class="btn-text" @click="goLogin">跳过</text>
+    </view>
+
+    <!-- 滑动引导 -->
+    <swiper
+      class="swiper"
+      :style="{ height: swiperHeight + 'px' }"
+      :current="currentSlide"
+      @change="onSlideChange"
+      circular
+    >
+      <swiper-item v-for="(slide, index) in slides" :key="index">
+        <view class="slide">
+          <!-- 图标区域 -->
+          <view class="slide-icon-area">
+            <view class="slide-icon">
+              <text class="slide-emoji">{{ slide.emoji }}</text>
+            </view>
+            <!-- 装饰光环 -->
+            <view class="slide-glow" :style="{ background: slide.glowColor }"></view>
+          </view>
+
+          <!-- 文案区域 -->
+          <view class="slide-text">
+            <text class="slide-title">{{ slide.title }}</text>
+            <text class="slide-desc">{{ slide.desc }}</text>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <!-- 底部控制区 -->
+    <view class="bottom-controls">
+      <!-- 指示器 -->
+      <view class="dots">
+        <view
+          v-for="(slide, index) in slides"
+          :key="index"
+          class="dot"
+          :class="{ 'dot-active': currentSlide === index }"
+        ></view>
+      </view>
+
+      <!-- 按钮 -->
+      <view class="action-area">
+        <button
+          v-if="currentSlide < slides.length - 1"
+          class="btn-secondary"
+          @click="nextSlide"
+        >下一步</button>
+        <button
+          v-else
+          class="btn-cta"
+          @click="goLogin"
+        >开始体验</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentSlide: 0,
+      swiperHeight: 600,
+      slides: [
+        {
+          emoji: '🍻',
+          title: '记录每一杯',
+          desc: '轻松打卡，让每一杯酒都有迹可循。白酒、啤酒、红酒…你的饮酒档案从这里开始',
+          glowColor: 'radial-gradient(circle, rgba(232,168,56,0.2) 0%, transparent 70%)'
+        },
+        {
+          emoji: '📸',
+          title: '分享你的酒局',
+          desc: '自动生成精美卡片，配上酒言酒语，一键分享到微信群和朋友圈',
+          glowColor: 'radial-gradient(circle, rgba(139,133,184,0.2) 0%, transparent 70%)'
+        },
+        {
+          emoji: '🏆',
+          title: '解锁成就徽章',
+          desc: '从"初来乍到"到"年度酒神"，每一个成就都记录着你的饮酒故事',
+          glowColor: 'radial-gradient(circle, rgba(94,198,160,0.2) 0%, transparent 70%)'
+        }
+      ]
+    }
+  },
+  onLoad() {
+    // 计算swiper高度: 屏幕高度 - 顶部跳过按钮 - 底部控制区
+    const sys = uni.getSystemInfoSync()
+    this.swiperHeight = sys.windowHeight - 60 - 200
+  },
+  methods: {
+    onSlideChange(e) {
+      this.currentSlide = e.detail.current
+    },
+    nextSlide() {
+      if (this.currentSlide < this.slides.length - 1) {
+        this.currentSlide++
+      }
+    },
+    goLogin() {
+      uni.reLaunch({ url: '/pages/login/login' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.onboarding {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.skip-bar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: $sp-xl $sp-lg $sp-sm;
+  z-index: 10;
+}
+
+.swiper {
+  width: 100%;
+}
+
+.slide {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 $sp-xl;
+  padding-bottom: 200rpx;
+}
+
+.slide-icon-area {
+  position: relative;
+  width: 360rpx;
+  height: 360rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: $sp-2xl;
+}
+
+.slide-icon {
+  width: 240rpx;
+  height: 240rpx;
+  background: $bg-card;
+  border-radius: $radius-xl;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: $shadow-md;
+  position: relative;
+  z-index: 2;
+}
+
+.slide-emoji {
+  font-size: 120rpx;
+}
+
+.slide-glow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  z-index: 1;
+  filter: blur(40rpx);
+}
+
+.slide-text {
+  text-align: center;
+  max-width: 560rpx;
+}
+
+.slide-title {
+  display: block;
+  font-size: $fs-2xl;
+  font-weight: $fw-black;
+  color: $text-primary;
+  margin-bottom: $sp-lg;
+  letter-spacing: -1rpx;
+}
+
+.slide-desc {
+  display: block;
+  font-size: $fs-md;
+  color: $text-secondary;
+  line-height: $lh-loose;
+}
+
+.bottom-controls {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: $sp-xl $sp-xl;
+  padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
+  background: linear-gradient(to top, $bg-base 60%, transparent);
+}
+
+.dots {
+  display: flex;
+  justify-content: center;
+  gap: $sp-sm;
+  margin-bottom: $sp-xl;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: $radius-full;
+  background-color: $text-tertiary;
+  transition: all $duration-base $ease-out;
+
+  &.dot-active {
+    width: 40rpx;
+    background-color: $amber;
+  }
+}
+
+.action-area {
+  .btn-secondary, .btn-cta {
+    width: 100%;
+  }
+}
+</style>