index页面动态轮播图
This commit is contained in:
parent
1d4aa8cb67
commit
f5467db360
18
api/banner/banner.js
Normal file
18
api/banner/banner.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取轮播图列表
|
||||||
|
* @param {Object} params - 查询参数
|
||||||
|
* @param {string} params.appId - 应用ID,默认为1
|
||||||
|
* @returns {Promise} 返回轮播图数据
|
||||||
|
*/
|
||||||
|
export function getBannerList(params = {}) {
|
||||||
|
return request({
|
||||||
|
url: '/app/banner',
|
||||||
|
method: 'GET',
|
||||||
|
params: {
|
||||||
|
appId: '1',
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -40,6 +40,7 @@ import AnnouncementBar from '../../components/announcement-bar/announcement-bar.
|
||||||
import BannerSwiper from '../../components/banner-swiper/banner-swiper.vue'
|
import BannerSwiper from '../../components/banner-swiper/banner-swiper.vue'
|
||||||
import EquipmentList from '../../components/equipment-list/equipment-list.vue'
|
import EquipmentList from '../../components/equipment-list/equipment-list.vue'
|
||||||
import { getNewAnnouncement } from '../../api/article/article.js'
|
import { getNewAnnouncement } from '../../api/article/article.js'
|
||||||
|
import { getBannerList } from '../../api/banner/banner.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -66,20 +67,7 @@ export default {
|
||||||
|
|
||||||
// 轮播图数据
|
// 轮播图数据
|
||||||
currentBannerIndex: 0,
|
currentBannerIndex: 0,
|
||||||
bannerList: [
|
bannerList: [],
|
||||||
{
|
|
||||||
image: commonEnum.TEMP1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: commonEnum.TEMP1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: commonEnum.TEMP2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: commonEnum.TEMP1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
// 设备列表数据
|
// 设备列表数据
|
||||||
equipmentList: [
|
equipmentList: [
|
||||||
|
|
@ -106,6 +94,7 @@ export default {
|
||||||
// 生命周期钩子
|
// 生命周期钩子
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.fetchAnnouncement()
|
this.fetchAnnouncement()
|
||||||
|
this.fetchBannerList()
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -126,6 +115,42 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 获取轮播图列表
|
||||||
|
async fetchBannerList() {
|
||||||
|
try {
|
||||||
|
const response = await getBannerList()
|
||||||
|
if (response.code === 200 && response.data && Array.isArray(response.data)) {
|
||||||
|
// 按orderNum排序,确保轮播图顺序正确
|
||||||
|
const sortedBanners = response.data
|
||||||
|
.filter(banner => banner.state === '1') // 只显示启用的轮播图
|
||||||
|
.sort((a, b) => parseInt(a.orderNum) - parseInt(b.orderNum))
|
||||||
|
.map(banner => ({
|
||||||
|
id: banner.id,
|
||||||
|
image: banner.imgUrl,
|
||||||
|
link: banner.link,
|
||||||
|
name: `轮播图${banner.id}`
|
||||||
|
}))
|
||||||
|
|
||||||
|
this.bannerList = sortedBanners
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取轮播图失败:', error)
|
||||||
|
// 如果获取失败,使用默认轮播图
|
||||||
|
this.bannerList = [
|
||||||
|
{
|
||||||
|
id: 'default1',
|
||||||
|
image: commonEnum.TEMP1,
|
||||||
|
name: '默认轮播图1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'default2',
|
||||||
|
image: commonEnum.TEMP2,
|
||||||
|
name: '默认轮播图2'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// 头部点击事件
|
// 头部点击事件
|
||||||
onLocationClick() {
|
onLocationClick() {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
|
|
@ -161,10 +186,12 @@ export default {
|
||||||
|
|
||||||
// 轮播图点击事件
|
// 轮播图点击事件
|
||||||
onBannerClick({ item, index }) {
|
onBannerClick({ item, index }) {
|
||||||
uni.showToast({
|
if (item.link) {
|
||||||
title: `查看${item.name}详情`,
|
// 如果有链接,跳转到对应页面
|
||||||
icon: 'none',
|
uni.navigateTo({
|
||||||
})
|
url: item.link
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 设备点击事件
|
// 设备点击事件
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user