292 lines
6.6 KiB
Vue
292 lines
6.6 KiB
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>
|
||
|