文件路径： E:/homework/uniappv3tswallpaper/utils/requset.js
utils 文件夹中创建一个新的 request 文件。
const BaseUrl = "https://tea.qingnian8.com/api/bizhi"
export function request(config = {}) {
return new Promise((resolve, reject) => {
let {
url,
header = {},
method = "GET"
} = config
url = BaseUrl + url
header['access-key'] = "guagua"
uni.request({
url,
header,
method,
success: res => {
if (res.data.errCode === 0) {
resolve(res)
} else if (res.data.errCode === 400) {
uni.showModal({
title: '错误信息',
content: res.data.errMsg,
showCancel: false
})
reject(res.data)
} else {
uni.showToast({
title: res.data.errMsg,
icon: "none"
})
reject(res.data)
}
},
fail: err => {
reject(err)
}
})
})
}
文件路径： E:/homework/uniappv3tswallpaper/api/apis.js
创建一个新的 api 文件。
import {
request
} from "@/utils/requset.js"
export function apiGetBanner() {
return request({
url: "/homeBanner"
})
}
export function apiGetDayRandom() {
return request({
url: "/randomWall"
})
}
文件路径： E:/homework/uniappv3tswallpaper/pages/index/index.vue
修改后的 index 文件。
<template>
<view class="homeLayout pageBg">
<custom-nav-bar title="推荐"></custom-nav-bar>
<view class="banner">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"
indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)">
<swiper-item v-for="item in bannerList" :key="item._id">
<image :src="item.picurl" mode="scaleToFill"></image>
</swiper-item>
</swiper>
</view>
<view class="notice">
<view class="left">
<uni-icons type="sound-filled" size="20"></uni-icons>
<text class="text">公告</text>
</view>
<view class="center">
<swiper :autoplay="true" :interval="3000" :duration="1000" circular vertical>
<swiper-item v-for="item in noticeList" :key="item._id">
<navigator url="/pages/notice/detail">
{{item.title}}
</navigator>
</swiper-item>
</swiper>
</view>
<view class="right">
<uni-icons type="forward" size="16" color="#333"></uni-icons>
</view>
</view>
<view class="select">
<common-title>
<template #name>
每日推荐
</template>
<template #custom>
<view class="date">
<uni-icons type="calendar"></uni-icons>
<view class="text">
<uni-dateformat :date="Date.now()" format="dd号" />
</view>
</view>
</template>
</common-title>
<view class="content">
<scroll-view scroll-x="true">
<view class="box" v-for="item in randomList" :key="item._id" @click="goPreview">
<image :src="item.smallPicurl" mode="aspectFill"></image>
</view>
</scroll-view>
</view>
</view>
<view class="theme">
<common-title>
<template #name>
专题精选
</template>
<template #custom>
<navigator url="">More+</navigator>
</template>
</common-title>
<view class="content">
<theme-item v-for="item in 8"></theme-item>
<theme-item :isMore="true"></theme-item>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
import {
apiGetBanner,
apiGetDayRandom
} from "@/api/apis.js"
const bannerList = ref([]);
const randomList = ref([])
const noticeList = ref([])
const getBanner = async () => {
let res = await apiGetBanner()
bannerList.value = res.data.data
};
const getDayRandom = async () => {
let res = await apiGetDayRandom()
randomList.value = res.data.data
};
const getNotice = async () => {
let res = await uni.request({
url: "https://tea.qingnian8.com/api/bizhi/wallNewsList",
header: {
'access-key': "guagua"
},
data: {
select: true
}
})
if (res.data.errCode === 0) {
noticeList.value = res.data.data
}
}
// 点击跳转到壁纸预览页面
const goPreview = () => {
uni.navigateTo({
url: '/pages/preview/preview'
});
};
getBanner()
getDayRandom()
getNotice()
</script>
<style lang="scss">
.homeLayout {
.banner {
width: 750rpx;
padding: 30rpx 0;
swiper {
width: 100%;
height: 340rpx;
&-item {
width: 100%;
height: 100%;
padding: 0 30rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
}
.notice {
margin: 0 30rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
background: gray;
border-radius: 80rpx;
height: 80rpx;
line-height: 80rpx;
.left {
width: 140rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
:deep() {
.uni-icons {
color: $brand-theme-color !important;
}
}
.text {
color: $brand-theme-color;
font-weight: 600;
font-size: 28rpx;
}
}
.center {
flex: 1;
height: 100%;
swiper {
height: 100%;
&-item {
// 以下三条是实现 文字长度超过显示宽度时展示省略号 的关键操作
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// 以上三条
height: 100%;
color: $text-font-color-3;
font-size: 30rpx;
// flex布局与 text-overflow: ellipsis;属性 冲突
// display: flex;
// flex-direction: row;
// flex-wrap: nowrap;
// align-content: center;
// align-items: center;
// justify-content: flex-start;
align-content: end;
align-items: end;
}
}
}
.right {
width: 70rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
}
.select {
padding: 50rpx 30rpx 0 30rpx;
scroll-view {
white-space: nowrap;
.box {
display: inline-block;
width: 200rpx;
height: 430rpx;
margin-right: 15rpx;
image {
height: 100%;
width: 100%;
}
}
:last-child {
margin-right: 0;
border-radius: 10rpx;
}
}
.date {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
color: $brand-theme-color;
:deep() {
.uni-icons {
color: $brand-theme-color !important;
}
}
}
}
.theme {
padding: 50rpx 30rpx;
.content {
display: grid;
gap: 15rpx;
grid-template-columns: repeat(3, 1fr);
}
}
}
</style>
