You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
342 lines
7.1 KiB
342 lines
7.1 KiB
<template>
|
|
<view class="container">
|
|
|
|
<!-- 轮播图 -->
|
|
<view class="banner-section">
|
|
<swiper
|
|
class="banner-swiper"
|
|
:indicator-dots="true"
|
|
:autoplay="true"
|
|
:interval="3000"
|
|
:duration="500"
|
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
|
indicator-active-color="#007aff"
|
|
>
|
|
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
|
<image
|
|
:src="item.image"
|
|
class="banner-image"
|
|
mode="aspectFill"
|
|
@click="onBannerClick(item)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 功能菜单 -->
|
|
<u-notice-bar :text="text1"></u-notice-bar>
|
|
<view class="menu-section">
|
|
<view class="menu-title">功能菜单</view>
|
|
<view class="menu-grid">
|
|
<view
|
|
class="menu-item"
|
|
v-for="(item, index) in menuList"
|
|
:key="index"
|
|
@click="onMenuClick(item)"
|
|
>
|
|
<view class="menu-icon">
|
|
<image :src="item.icon" class="icon-image"/>
|
|
</view>
|
|
<text class="menu-text">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快捷操作 -->
|
|
<!-- <view class="quick-section">-->
|
|
<!-- <view class="section-title">快捷操作</view>-->
|
|
<!-- <view class="quick-list">-->
|
|
<!-- <view-->
|
|
<!-- class="quick-item"-->
|
|
<!-- v-for="(item, index) in quickList"-->
|
|
<!-- :key="index"-->
|
|
<!-- @click="onQuickClick(item)"-->
|
|
<!-- >-->
|
|
<!-- <view class="quick-left">-->
|
|
<!-- <image :src="item.icon" class="quick-icon"/>-->
|
|
<!-- <view class="quick-info">-->
|
|
<!-- <text class="quick-name">{{ item.name }}</text>-->
|
|
<!-- <text class="quick-desc">{{ item.desc }}</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <text class="quick-arrow">></text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<Login ref="Login"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Login from '@/components/Login.vue'
|
|
|
|
export default {
|
|
components: {
|
|
Login
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
bannerList: [
|
|
{
|
|
id: 1,
|
|
image: '/static/images/微信图片_20250806173838_220.png',
|
|
title: '电费管理',
|
|
url: ''
|
|
},
|
|
// {
|
|
// id: 2,
|
|
// image: '/static/images/微信图片_20250806173838_221.png',
|
|
// title: '智能缴费',
|
|
// url: ''
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// image: '/static/images/微信图片_20250806173838_222.png',
|
|
// title: '智能缴费',
|
|
// url: ''
|
|
// },
|
|
],
|
|
menuList: [
|
|
{
|
|
id: 3,
|
|
name: '用电月报',
|
|
icon: '/static/images/微信图片_20250806173838_225.png',
|
|
path: '/pages/monthlyReport/monthlyReport'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '用电年报',
|
|
icon: '/static/images/微信图片_20250806173838_224.png',
|
|
path: '/pages/yearlyReport/yearlyReport'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '推广邀请',
|
|
icon: '/static/images/微信图片_20250806143327_218.png',
|
|
path: '/pages/invitation/invitation'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '申请提现',
|
|
icon: '/static/images/微信图片_20250806143327_216.png',
|
|
path: '/pages/withdrawal/withdrawal'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '电费报表',
|
|
icon: '/static/images/微信图片_20250806173838_223.png',
|
|
path: '/pages/electricityReport/electricityReport'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '售电合同',
|
|
icon: '/static/images/微信图片_20250806143327_217.png',
|
|
path: '/pages/contract/contract'
|
|
},
|
|
|
|
|
|
],
|
|
quickList: [
|
|
{
|
|
id: 1,
|
|
name: '本月用电量',
|
|
desc: '查看当月用电统计',
|
|
icon: '/static/images/微信图片_20250806143327_208.png',
|
|
path: '/pages/monthlyReport/monthlyReport'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '缴费记录',
|
|
desc: '查看历史缴费记录',
|
|
icon: '/static/images/微信图片_20250806143327_212.png',
|
|
path: '/pages/electricityReport/electricityReport'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '联系客服',
|
|
desc: '在线客服咨询',
|
|
icon: '/static/images/微信图片_20250806143327_210.png',
|
|
path: '/pages/customerService/customerService'
|
|
},
|
|
],
|
|
text1: '这是最新通知'
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getSystemInfo()
|
|
// this.$refs.Login.open()
|
|
},
|
|
methods: {
|
|
getSystemInfo() {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = systemInfo.statusBarHeight
|
|
},
|
|
onBannerClick(item) {
|
|
console.log('点击轮播图:', item)
|
|
if (item.url) {
|
|
uni.navigateTo({
|
|
url: item.url
|
|
})
|
|
}
|
|
},
|
|
onMenuClick(item) {
|
|
console.log('点击菜单:', item)
|
|
uni.navigateTo({
|
|
url: item.path
|
|
})
|
|
},
|
|
onQuickClick(item) {
|
|
console.log('点击快捷操作:', item)
|
|
uni.navigateTo({
|
|
url: item.path
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.nav-bar {
|
|
background-color: #007aff;
|
|
color: white;
|
|
}
|
|
|
|
.nav-content {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.banner-section {
|
|
margin: 15px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.banner-swiper {
|
|
height: 180px;
|
|
}
|
|
|
|
.banner-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.menu-section {
|
|
margin: 15px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.menu-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.menu-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.menu-item {
|
|
width: 33%;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 auto 8px;
|
|
background-color: #f0f8ff;
|
|
border-radius: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon-image {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.menu-text {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
.quick-section {
|
|
margin: 15px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.quick-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.quick-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.quick-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.quick-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.quick-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.quick-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.quick-desc {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.quick-arrow {
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|