XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'base' into tabbar

Browse Source
This commit is contained in:
菲鸽
2024-05-18 17:46:50 +08:00
parent 3e2cc7be81 dd261f2364
commit 556f9052d1
19 changed files with 159 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/about/about.vue Normal file
View File

@@ -0,0 +1,36 @@
<route lang="json5">
{
style: {
navigationBarTitleText: '关于',
},
}
</route>
<template>
<view
class="bg-white overflow-hidden pt-2 px-4"
:style="{ marginTop: safeAreaInsets?.top + 'px' }"
>
<view class="text-center text-3xl mt-8">
鸽友们好，我是
<text class="text-red-500">菲鸽</text>
</view>
<RequestComp />
<UploadComp />
</view>
</template>
<script lang="ts" setup>
import RequestComp from './components/request.vue'
import UploadComp from './components/upload.vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style lang="scss" scoped>
.test-css {
// mt-4=>1rem=>16px;
margin-top: 16px;
}
</style>

43
src/pages/about/components/request.vue Normal file
View File

@@ -0,0 +1,43 @@
<route lang="json5">
{
layout: 'demo',
style: {
navigationBarTitleText: '请求',
},
}
</route>
<template>
<view class="p-6 text-center">
<view class="my-2">使用的是 laf 云后台</view>
<view class="text-green-400">我的推荐码，可以获得佣金</view>
<!-- #ifdef H5 -->
<view class="my-2">
<a class="my-2" :href="recommendUrl" target="_blank">{{ recommendUrl }}</a>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="my-2 text-left text-sm">{{ recommendUrl }}</view>
<!-- #endif -->
<!-- http://localhost:9000/#/pages/index/request -->
<button @click="run" class="my-6">发送请求</button>
<view class="text-xl">请求数据如下</view>
<view class="text-green h-6">{{ JSON.stringify(data) }}</view>
<button type="warn" @click="reset" class="my-6">清除数据</button>
</view>
</template>
<script lang="ts" setup>
import { getFooAPI, postFooAPI, IFooItem } from '@/service/index/foo'
const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'))
const reset = () => {
data.value = undefined
}
</script>

7
src/pages/index/upload2.vue → src/pages/about/components/upload.vue
View File

@@ -12,18 +12,17 @@
<wd-button @click="run">选择图片并上传</wd-button>
<view v-if="loading" class="text-blue h-10">上传...</view>
<template v-else>
<view class="m-2">上传后返回的图片地址：</view>
<view class="m-2">上传后返回的接口数据：</view>
<view class="m-2">{{ data }}</view>
<view class="h-80 w-full">
<image v-if="data" :src="data" mode="scaleToFill" />
<image v-if="data" :src="data || data" mode="scaleToFill" />
</view>
</template>
</view>
</template>
<script lang="ts" setup>
// const { loading, data, run } = useUpload2<string>('https://ukw0y1.laf.run/upload', { user: '菲鸽' })
const { loading, data, run } = useUpload<string>({ user: '菲鸽' })
const { loading, data, run } = useUpload({ user: '菲鸽' })
</script>
<style lang="scss" scoped>

67
src/pages/index/request.vue
View File

@@ -1,67 +0,0 @@
<route lang="json5">
{
layout: 'demo',
style: {
navigationBarTitleText: '请求',
},
}
</route>
<template>
<view class="p-6 text-center">
<view class="my-2">使用的是 laf 云后台</view>
<view class="text-green-400">我的推荐码，可以获得佣金</view>
<!-- #ifdef H5 -->
<view class="my-2">
<a class="my-2" :href="recommendUrl" target="_blank">{{ recommendUrl }}</a>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="my-2 text-left text-sm">{{ recommendUrl }}</view>
<!-- #endif -->
<!-- http://localhost:9000/#/pages/index/request -->
<button @click="getFoo" class="my-6">1.测试 GET 请求</button>
<view class="text-xl">请求数据如下</view>
<view class="text-green h-10">{{ JSON.stringify(data) }}</view>
<view class="text-xl">完整数据</view>
<view class="text-green h-16">{{ JSON.stringify(originalData) }}</view>
<button @click="postFoo" class="my-6">2.测试 POST 请求</button>
<view class="text-xl">请求数据如下</view>
<view class="text-green h-10">{{ JSON.stringify(data2) }}</view>
<button class="my-6" type="warn" @click="reset">3.一键清空数据</button>
</view>
</template>
<script lang="ts" setup>
import { getFooAPI, postFooAPI, IFooItem } from '@/service/index/foo'
const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
onLoad(() => {
getFoo()
postFoo()
})
const originalData = ref<IResData<IFooItem>>()
const data = ref<IFooItem>()
const getFoo = async () => {
const res = await getFooAPI('菲鸽')
data.value = res.data
originalData.value = res
}
const data2 = ref<IFooItem>()
const postFoo = async () => {
const res = await postFooAPI('菲鸽2')
data2.value = res.data
}
const reset = () => {
data.value = undefined
data2.value = undefined
originalData.value = undefined
}
</script>

35
src/pages/index/request2.vue
View File

@@ -1,35 +0,0 @@
<route lang="json5">
{
layout: 'demo',
style: {
navigationBarTitleText: '请求-状态一体化',
},
}
</route>
<template>
<view class="p-6 text-center">
<!-- http://localhost:9000/#/pages/index/request -->
<button @click="getFoo" class="my-6">测试 GET 请求</button>
<view class="text-xl">请求数据如下</view>
<view v-if="loading" class="text-blue h-10">加载中...</view>
<view v-if="error" class="text-red h-10">请求错误</view>
<view v-else class="text-green h-10">{{ JSON.stringify(data) }}</view>
<button class="my-6" type="warn" @click="reset">一键清空数据</button>
</view>
</template>
<script lang="ts" setup>
import { getFooAPI2, IFooItem } from '@/service/index/foo'
import { httpGet } from '@/utils/http'
// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI2('菲鸽'))
// 再次简化，一行代码搞定，方便一次性的请求，适用大部分请求
// const { loading, error, data, run } = useRequest<IFooItem>(() => httpGet('/foo', { name: '菲鸽' }))
const getFoo = () => run()
const reset = () => {
data.value = undefined
}
</script>

75
src/pages/index/upload.vue
View File

@@ -1,75 +0,0 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationBarTitleText: '上传',
},
}
</route>
<template>
<view class="p-4 text-center">
<wd-button @click="chooseImage">选择图片并上传</wd-button>
<view class="m-2">上传后返回的图片地址：</view>
<view class="m-2">{{ imgStr }}</view>
<view class="h-80 w-full">
<image v-if="imgStr" :src="imgStr" mode="scaleToFill" />
</view>
</view>
</template>
<script lang="ts" setup>
const imgStr = ref('')
const chooseImage = () => {
// #ifdef MP-WEIXIN
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
// 微信小程序在2023年10月17日之后，使用本API需要配置隐私协议
uni.chooseMedia({
count: 1,
mediaType: ['image'],
success: (res) => {
console.log(res)
const tempFilePath = res.tempFiles[0].tempFilePath
uni.uploadFile({
url: 'https://ukw0y1.laf.run/upload',
filePath: tempFilePath,
name: 'file',
formData: {
user: '菲鸽',
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data)
imgStr.value = uploadFileRes.data
},
})
},
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseImage({
count: 1,
success: (res) => {
console.log(res)
const tempFilePath = res.tempFilePaths[0]
uni.uploadFile({
url: 'https://ukw0y1.laf.run/upload',
filePath: tempFilePath,
name: 'file',
formData: {
user: '菲鸽',
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data)
imgStr.value = uploadFileRes.data
},
})
},
})
// #endif
}
</script>
<style lang="scss" scoped>
//
</style>