398 lines
9.8 KiB
Vue
398 lines
9.8 KiB
Vue
<template>
|
|
<view class="li-home-page">
|
|
<wd-navbar :bordered="false" custom-style="background-color: #F6F7FB !important;padding-bottom:10rpx"
|
|
safeAreaInsetTop fixed placeholder>
|
|
<template #left>
|
|
<view class="li-ml-25">
|
|
<wd-search disabled placeholderStyle="color:#d9d9d9" v-model="keyword" hide-cancel placeholder-left
|
|
placeholder="关键字搜索"></wd-search>
|
|
</view>
|
|
</template>
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<template #right>
|
|
<view class="li-flex-center li-mr-25">
|
|
<text @click="toPages({type:'warehousing'})" class="ri-qr-scan-2-line li-text-48"></text>
|
|
<view @click="toPages({type:'message'})" class="li-ml-25 pt-10">
|
|
<wd-badge :hidden="messageCount > 0 ? false:true" :modelValue="messageCount" top='15' right="-4"
|
|
:max='99'>
|
|
<text class="ri-notification-line li-text-48"></text>
|
|
</wd-badge>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- #endif -->
|
|
</wd-navbar>
|
|
<!-- 轮播图 -->
|
|
<view class="li-w-88% li-mx-auto li-mt-10">
|
|
<wd-swiper :interval='8000' height='130' :list="swiperList" autoplay v-model:current="current"
|
|
:indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>
|
|
</view>
|
|
<!-- 瓷片 -->
|
|
<view class="li-flex li-justify-around li-mt-30 li-px-40 ">
|
|
<view v-for="(item,index) in porcelainList" :key="index" @click="toPages({type:item.type})"
|
|
:style="{backgroundImage:`url(${item.image})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:'15rpx'}"
|
|
class="li-w-310 li-h-160 li-flex li-flex-col justify-center ">
|
|
<text class="li-text-30 li-ml-22 li-text-#010B3E">{{item.title}}</text>
|
|
<text class="li-text-22 li-text-#AFB2B8 li-mt-12 li-ml-22">{{item.desc}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- grid -->
|
|
<view class="li-mt-15 ">
|
|
<wd-grid class="li-px-30" bg-color="transparent" :column="4" :clickable="true">
|
|
<wd-grid-item use-icon-slot use-text-slot v-for="(item,index) in gridList" :key="index"
|
|
@itemclick="toPages({type:item.type})">
|
|
<template #icon>
|
|
<image class="li-w-58 li-h-58" :src="item.image" />
|
|
</template>
|
|
<template #text>
|
|
<view class="li-mt-14">{{item.title}}</view>
|
|
</template>
|
|
</wd-grid-item>
|
|
</wd-grid>
|
|
</view>
|
|
<!-- card -->
|
|
<view
|
|
:style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center',borderRadius:'15rpx'}"
|
|
class="li-w-88% li-h-220 li-mx-auto li-mt-20 li-pt-15">
|
|
<text class="li-ml-35 li-text-30 li-text-#010B3E">代处理事项</text>
|
|
<view class="li-flex justify-between items-center li-px-50 li-mt-20">
|
|
<view class="li-flex li-flex-col items-center" v-for="(item,index) in toDoList" :key="index">
|
|
<text :class="[index==2?'li-text-#F42429':'li-text-#010B3E']"
|
|
class="li-text-43 li-font-bold">{{item.num}}</text>
|
|
<text class="li-text-24 li-text-#AFB2B8">{{item.desc}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- list -->
|
|
<view class="li-w-88% li-mx-auto li-mt-30">
|
|
<text class="li-ml-35 li-text-30">常见问题解答</text>
|
|
<view class="li-bg-white li-rd-10 li-mt-20 li-px-25">
|
|
<view v-for="(item,index) in problemList" :key="index" @click="toPages({type:'course'})"
|
|
class="li-flex justify-between li-py-25 li-bottom-border">
|
|
<view class="li-w-70%">
|
|
<text class="li-text-28 li-text-#343333 li-two-line ">{{item.title}}</text>
|
|
<view class="li-flex items-center justify-between li-text-26 li-text-#B1B0B0 li-mt-20">
|
|
<text>{{item.time}}</text>
|
|
<view class="li-flex-center">
|
|
<text class="ri-eye-line li-text-26 li-mr-5"></text>
|
|
<text>{{item.viewCount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<image class="li-w-130 li-h-130 li-rd-15" :src="item.image" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 悬浮按钮 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="floating-button" @click="toPages({type:'warehousing'})">
|
|
<view class="button-inner">
|
|
<text class="ri-qr-scan-2-line"></text>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<view>
|
|
<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" @reload="loadmore" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
userInfo
|
|
} from '@/api/login';
|
|
import {
|
|
newMessage, bannerList
|
|
} from '@/api/message';
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import { onLoad, onReachBottom, Uni, onPullDownRefresh } from "@dcloudio/uni-app"
|
|
// import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
|
|
// import SafeAreaBottom from '@/components/SafeAreaBottom/index.vue'
|
|
declare const uni : Uni
|
|
const card_back = uni.$globalData?.RESOURCE_URL + 'home/card-back.png'
|
|
const keyword = ref<string>('')
|
|
const messageCount = ref<number>(0)
|
|
const current = ref<number>(0)
|
|
const state = ref<string>('loading')
|
|
|
|
|
|
|
|
// 根据环境使用不同的图片路径
|
|
const swiperList = ref([
|
|
'/static/swiper/1.png',
|
|
])
|
|
const porcelainList = ref([
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/back1.png',
|
|
title: '新建任务',
|
|
desc: '新建工单任务'
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/back2.png',
|
|
title: '工单大厅',
|
|
desc: '接任务获金币',
|
|
type: 'task_hall'
|
|
}
|
|
])
|
|
const gridList = ref([
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/gongdan.png',
|
|
title: '我的工单',
|
|
type: 'my_order'
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangke.png',
|
|
title: '访客邀请',
|
|
type: ''
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/cuijiao.png',
|
|
title: '物业催缴',
|
|
type: ''
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/tousu.png',
|
|
title: '投诉管理',
|
|
type: ''
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/yaoqing.png',
|
|
title: '邀请业主',
|
|
type: 'invite'
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/wenjuan.png',
|
|
title: '问卷管理',
|
|
type: ''
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangyuan.png',
|
|
title: '房源管理',
|
|
type: ''
|
|
},
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/chewei.png',
|
|
// title: '车位管理',
|
|
// type: ''
|
|
// },
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/xiaoxi.png',
|
|
title: '商品核销',
|
|
type: 'verification'
|
|
}
|
|
|
|
])
|
|
|
|
const toDoList = ref([
|
|
{
|
|
num: '30',
|
|
desc: '今日任务'
|
|
},
|
|
{
|
|
num: '12',
|
|
desc: '未完成'
|
|
},
|
|
{
|
|
num: '7',
|
|
desc: '异常问题'
|
|
}
|
|
])
|
|
|
|
const problemList = ref([
|
|
{
|
|
image: '/static/swiper/1.png',
|
|
title: '如何创建工单任务',
|
|
time: '2025-06',
|
|
viewCount: '200'
|
|
},
|
|
{
|
|
image: '/static/swiper/1.png',
|
|
title: '巡检任务审核说明',
|
|
time: '2025-06',
|
|
viewCount: '200'
|
|
},
|
|
{
|
|
image: '/static/swiper/1.png',
|
|
title: '物业员工催缴流程',
|
|
time: '2025-06',
|
|
viewCount: '200'
|
|
}
|
|
])
|
|
|
|
const handleClick = (e) => {
|
|
console.log(e)
|
|
}
|
|
|
|
const onChange = (e) => {
|
|
console.log(e)
|
|
}
|
|
const toPages = (item : any) => {
|
|
switch (item.type) {
|
|
case 'task_hall':
|
|
// 工单大厅
|
|
uni.navigateTo({
|
|
url: '/pagesA/task_hall/list'
|
|
});
|
|
break;
|
|
case 'my_order':
|
|
// 工单大厅
|
|
uni.navigateTo({
|
|
url: '/pagesA/my_order/list'
|
|
});
|
|
break;
|
|
case 'course':
|
|
// 课程详情
|
|
uni.navigateTo({
|
|
url: '/pagesA/course/detail'
|
|
});
|
|
break;
|
|
case 'verification':
|
|
// 核销
|
|
uni.navigateTo({
|
|
url: '/pagesA/verification/index'
|
|
});
|
|
break;
|
|
case 'warehousing':
|
|
// 入库
|
|
uni.navigateTo({
|
|
url: '/pagesA/warehousing/index'
|
|
});
|
|
break;
|
|
case 'message':
|
|
// 消息夜
|
|
uni.navigateTo({
|
|
url: '/pagesA/message/index'
|
|
});
|
|
break;
|
|
case 'invite':
|
|
// 邀请业主
|
|
uni.navigateTo({
|
|
url: '/pagesA/invite/index'
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
const getBannerList = () => {
|
|
const res = bannerList({ position: 2 })
|
|
}
|
|
|
|
|
|
const loadmore = (e) => {
|
|
console.log(e);
|
|
}
|
|
|
|
onReachBottom(() => {
|
|
// state.value = 'error'
|
|
state.value = 'finished'
|
|
})
|
|
|
|
// 加载页面数据
|
|
const loadData = (async () => {
|
|
// 未读信息数量
|
|
const mess = await newMessage()
|
|
messageCount.value = mess.data.count
|
|
// 轮播加载
|
|
const banner = await bannerList({ position: 5 })
|
|
swiperList.value = banner.data.map((item : { image : String; }) => item.image)
|
|
})
|
|
|
|
onLoad(() => {
|
|
loadData()
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
loadData()
|
|
setTimeout(() => {
|
|
uni.stopPullDownRefresh()
|
|
}, 300)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.li-home-page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg,
|
|
rgba(246, 247, 251, 1) 0%,
|
|
rgba(245, 246, 251, 0.99) 15%,
|
|
rgba(244, 245, 250, 0.98) 30%,
|
|
rgba(243, 244, 249, 0.97) 45%,
|
|
rgba(242, 243, 248, 0.96) 60%,
|
|
rgba(241, 242, 247, 0.95) 75%,
|
|
rgba(240, 241, 246, 0.94) 90%,
|
|
rgba(239, 240, 245, 0.93) 100%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
::v-deep .wd-search {
|
|
background-color: #F6F7FB !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
::v-deep .wd-search__block {
|
|
background-color: #FFFFFF !important;
|
|
width: 480rpx !important;
|
|
padding: 4rpx !important;
|
|
}
|
|
|
|
::v-deep .uni-input-placeholder,
|
|
.uni-input-input {
|
|
width: auto !important;
|
|
}
|
|
|
|
::v-deep .wd-badge__content {
|
|
border: none !important;
|
|
}
|
|
|
|
::v-deep .wd-divider,
|
|
.wd-divider::after,
|
|
.wd-divider::before {
|
|
border: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.floating-button {
|
|
position: fixed;
|
|
bottom: 60rpx;
|
|
right: 40rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%);
|
|
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: float 3s ease-in-out infinite;
|
|
|
|
.button-inner {
|
|
color: white;
|
|
font-size: 60rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10rpx);
|
|
}
|
|
}
|
|
</style> |