172 lines
3.9 KiB
Vue
172 lines
3.9 KiB
Vue
<template>
|
|
<view class="home-container">
|
|
<!-- 头部信息 -->
|
|
|
|
<custom-nav-bar title="福鼎创特物联科技有限公司"></custom-nav-bar>
|
|
|
|
<!-- 公告栏 -->
|
|
<announcement-bar
|
|
:announcement-icon="commonEnum.ANNOUNCEMENT_ICON"
|
|
:announcement-text="announcementText"
|
|
@announcement-click="onAnnouncementClick"
|
|
/>
|
|
|
|
<!-- 轮播图 -->
|
|
<banner-swiper
|
|
:autoplay="autoplay"
|
|
:banner-list="bannerList"
|
|
:duration="duration"
|
|
:indicator-dots="indicatorDots"
|
|
:interval="interval"
|
|
@change="onBannerChange"
|
|
@banner-click="onBannerClick"
|
|
/>
|
|
|
|
<!-- 设备列表 -->
|
|
<equipment-list
|
|
:equipment-list="equipmentList"
|
|
:title="equipmentTitle"
|
|
@renew="onRenew"
|
|
@equipment-click="onEquipmentClick"
|
|
/>
|
|
|
|
<!-- 底部导航已由系统tabBar处理 -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import commonEnum from '../../enum/commonEnum'
|
|
import AnnouncementBar from '../../components/announcement-bar/announcement-bar.vue'
|
|
import BannerSwiper from '../../components/banner-swiper/banner-swiper.vue'
|
|
import EquipmentList from '../../components/equipment-list/equipment-list.vue'
|
|
|
|
export default {
|
|
components: {
|
|
AnnouncementBar,
|
|
BannerSwiper,
|
|
EquipmentList,
|
|
},
|
|
data() {
|
|
return {
|
|
// 基础配置
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
commonEnum: commonEnum,
|
|
|
|
// 页面数据
|
|
companyName: '福鼎创特物联科技有限公司',
|
|
announcementText: '暂无更多公告! 暂无更多公告! 暂无更多公告!',
|
|
equipmentTitle: '我的租赁设备',
|
|
navItems: ['首页', '申请租赁', '个人中心'],
|
|
activeNavIndex: 0,
|
|
|
|
// 轮播图数据
|
|
currentBannerIndex: 0,
|
|
bannerList: [
|
|
{
|
|
image: commonEnum.TEMP1,
|
|
},
|
|
{
|
|
image: commonEnum.TEMP1,
|
|
},
|
|
{
|
|
image: commonEnum.TEMP2,
|
|
},
|
|
{
|
|
image: commonEnum.TEMP1,
|
|
},
|
|
],
|
|
|
|
// 设备列表数据
|
|
equipmentList: [
|
|
{
|
|
id: 1,
|
|
name: '商用节能灶',
|
|
status: 'normal',
|
|
startTime: '2025-07-25 13:23:59',
|
|
endTime: '2026-07-25 13:23:59',
|
|
image: commonEnum.TEMP2,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '节能燃烧器',
|
|
status: 'normal',
|
|
startTime: '2025-07-25 13:23:59',
|
|
endTime: '2026-07-25 13:23:59',
|
|
image: commonEnum.TEMP3,
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 头部点击事件
|
|
onLocationClick() {
|
|
uni.showToast({
|
|
title: '选择位置',
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 公告栏点击事件
|
|
onAnnouncementClick() {
|
|
uni.showToast({
|
|
title: '查看公告详情',
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 轮播图变化事件
|
|
onBannerChange(index) {
|
|
this.currentBannerIndex = index
|
|
},
|
|
|
|
// 轮播图点击事件
|
|
onBannerClick({ item, index }) {
|
|
uni.showToast({
|
|
title: `查看${item.name}详情`,
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 设备点击事件
|
|
onEquipmentClick(equipment) {
|
|
uni.showToast({
|
|
title: `查看${equipment.name}详情`,
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 续费事件
|
|
onRenew(equipment) {
|
|
uni.showToast({
|
|
title: `正在处理${equipment.name}的续费`,
|
|
icon: 'none',
|
|
})
|
|
},
|
|
|
|
// 底部导航点击事件
|
|
onNavClick(index) {
|
|
this.activeNavIndex = index
|
|
const navItems = ['首页', '申请租赁', '个人中心']
|
|
uni.showToast({
|
|
title: `切换到${navItems[index]}`,
|
|
icon: 'none',
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-container {
|
|
background: linear-gradient(to bottom, #ffddca 0px, #ffddca 450rpx, #f5f5f5 450rpx, #f5f5f5 100%);
|
|
padding-bottom: 120rpx; /* 为底部导航留出空间 */
|
|
max-width: 750rpx;
|
|
margin: 0 auto;
|
|
z-index: -2;
|
|
}
|
|
</style>
|