init project
This commit is contained in:
291
pages/index/index.vue
Normal file
291
pages/index/index.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user