nl-uniapp/pages/index/index.vue

<template>
  <view class="container">
    <!-- H5端使用Ant Design Vue组件 -->
    <!-- #ifdef H5 -->
    <a-card title="欢迎使用 nl-uniapp" :bordered="false">
      <a-space direction="vertical" :size="16" style="width: 100%">
        <a-typography-title :level="3">项目信息</a-typography-title>
        
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="框架">Vue 3</a-descriptions-item>
          <a-descriptions-item label="构建工具">Vite</a-descriptions-item>
          <a-descriptions-item label="UI组件库">Ant Design Vue</a-descriptions-item>
          <a-descriptions-item label="状态管理">Pinia</a-descriptions-item>
          <a-descriptions-item label="HTTP请求">Axios</a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <a-space direction="vertical" :size="12" style="width: 100%">
          <a-typography-title :level="4">功能演示</a-typography-title>
          
          <a-button type="primary" block @click="handleGetRequest" :loading="loading">
            测试GET请求
          </a-button>
          
          <a-button type="primary" block @click="handlePostRequest" :loading="loading">
            测试POST请求
          </a-button>
          
          <a-button type="default" block @click="handleShowMessage">
            显示消息提示
          </a-button>
        </a-space>

        <a-divider />

        <a-alert
          message="提示"
          description="这是一个基于 Vue3 + Vite + Ant Design Vue 的 uniapp 项目模板"
          type="info"
          show-icon
        />
      </a-space>
    </a-card>
    <!-- #endif -->

    <!-- 小程序端使用uni-app原生组件 -->
    <!-- #ifndef H5 -->
    <view class="card">
      <view class="title">欢迎使用 nl-uniapp</view>
      
      <view class="info-section">
        <view class="info-title">项目信息</view>
        <view class="info-item">
          <text class="label">框架：</text>
          <text class="value">Vue 3</text>
        </view>
        <view class="info-item">
          <text class="label">构建工具：</text>
          <text class="value">Vite</text>
        </view>
        <view class="info-item">
          <text class="label">UI组件库：</text>
          <text class="value">Ant Design Vue</text>
        </view>
        <view class="info-item">
          <text class="label">状态管理：</text>
          <text class="value">Pinia</text>
        </view>
        <view class="info-item">
          <text class="label">HTTP请求：</text>
          <text class="value">Axios</text>
        </view>
      </view>

      <view class="divider"></view>

      <view class="demo-section">
        <view class="demo-title">功能演示</view>
        <button class="btn btn-primary" @click="handleGetRequest" :loading="loading">
          测试GET请求
        </button>
        <button class="btn btn-primary" @click="handlePostRequest" :loading="loading">
          测试POST请求
        </button>
        <button class="btn btn-default" @click="handleShowMessage">
          显示消息提示
        </button>
      </view>

      <view class="divider"></view>

      <view class="alert">
        <text class="alert-title">提示</text>
        <text class="alert-desc">这是一个基于 Vue3 + Vite + Ant Design Vue 的 uniapp 项目模板</text>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { api } from '@/api'
// #ifdef H5
import { message } from 'ant-design-vue'
// #endif

const loading = ref(false)

// GET请求示例
const handleGetRequest = async () => {
  try {
    loading.value = true
    const res = await api.getList({ page: 1, pageSize: 10 })
    console.log('GET请求成功:', res)
    // #ifdef H5
    message.success('GET请求成功，请查看控制台')
    // #endif
    // #ifndef H5
    uni.showToast({
      title: 'GET请求成功',
      icon: 'success'
    })
    // #endif
  } catch (error) {
    console.error('GET请求失败:', error)
    // #ifdef H5
    message.error('GET请求失败')
    // #endif
    // #ifndef H5
    uni.showToast({
      title: 'GET请求失败',
      icon: 'none'
    })
    // #endif
  } finally {
    loading.value = false
  }
}

// POST请求示例
const handlePostRequest = async () => {
  try {
    loading.value = true
    const res = await api.create({ name: '测试数据', value: '123' })
    console.log('POST请求成功:', res)
    // #ifdef H5
    message.success('POST请求成功，请查看控制台')
    // #endif
    // #ifndef H5
    uni.showToast({
      title: 'POST请求成功',
      icon: 'success'
    })
    // #endif
  } catch (error) {
    console.error('POST请求失败:', error)
    // #ifdef H5
    message.error('POST请求失败')
    // #endif
    // #ifndef H5
    uni.showToast({
      title: 'POST请求失败',
      icon: 'none'
    })
    // #endif
  } finally {
    loading.value = false
  }
}

// 消息提示示例
const handleShowMessage = () => {
  // #ifdef H5
  message.info('这是一个消息提示')
  // #endif
  // #ifndef H5
  uni.showToast({
    title: '这是一个消息提示',
    icon: 'none'
  })
  // #endif
}
</script>

<style lang="scss" scoped>
.container {
  padding: 16px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 小程序端样式
.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
}

.info-section {
  margin-bottom: 24px;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  
  .label {
    color: #666;
    width: 120px;
  }
  
  .value {
    color: #333;
    flex: 1;
  }
}

.divider {
  height: 1px;
  background-color: #e8e8e8;
  margin: 24px 0;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}

.btn {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  
  &.btn-primary {
    background-color: #1890ff;
    color: #fff;
  }
  
  &.btn-default {
    background-color: #fff;
    color: #333;
    border: 1px solid #d9d9d9;
  }
}

.alert {
  padding: 12px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  
  .alert-title {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1890ff;
  }
  
  .alert-desc {
    display: block;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
  }
}
</style>