465 lines
12 KiB
Vue
465 lines
12 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 v-if="filteredGridList.length > 0" 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 filteredGridList" :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"
|
|
@click="toPages({type:'my_order'})">
|
|
<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',value:{chapter_id:item.chapter_id}})"
|
|
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.chapter_name}}</text>
|
|
<view class="li-flex items-center justify-between li-text-26 li-text-#B1B0B0 li-mt-20">
|
|
<text>{{item.create_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.cover" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="problemList?.length === 0" class="empty-state">
|
|
<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/collect.png'" tip="暂无常见问题解答" />
|
|
</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 v-if="problemList?.length > 0">
|
|
<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" @reload="loadmore" />
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
userInfo,
|
|
menu
|
|
} from '@/api/login';
|
|
import {
|
|
newMessage,
|
|
bannerList
|
|
} from '@/api/message';
|
|
|
|
import {
|
|
chapterList
|
|
} from "@/api/chapter"
|
|
|
|
import {
|
|
ref,
|
|
computed,
|
|
provide
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onReachBottom,
|
|
onPullDownRefresh
|
|
} from "@dcloudio/uni-app"
|
|
import {
|
|
hasPermission,
|
|
filterByPermission
|
|
} from '@/utils/permission'
|
|
|
|
const card_back = uni.$globalData?.RESOURCE_URL + 'home/card-back.png'
|
|
const keyword = ref('')
|
|
const messageCount = ref(0)
|
|
const current = ref(0)
|
|
const state = ref('loading')
|
|
const menuInfo = ref({})
|
|
|
|
// 提供权限数据给子组件使用
|
|
provide('userPermissions', computed(() => menuInfo.value?.auth || []))
|
|
|
|
// 获取过滤后的菜单列表
|
|
const filteredGridList = computed(() => {
|
|
return menuInfo.value?.auth ? filterByPermission(gridList.value, menuInfo.value.auth) : [];
|
|
});
|
|
|
|
// 添加权限检查方法，便于模板中直接使用
|
|
const checkPermission = (type) => {
|
|
return hasPermission(type, menuInfo.value?.auth || []);
|
|
}
|
|
|
|
// 根据环境使用不同的图片路径
|
|
const swiperList = ref([])
|
|
const porcelainList = ref([{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/back1.png',
|
|
title: '我的工单',
|
|
desc: '工单一键处理',
|
|
type: 'my_order'
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/back2.png',
|
|
title: '工单大厅',
|
|
desc: '接任务获金币',
|
|
type: 'task_hall'
|
|
}
|
|
])
|
|
const gridList = ref([
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/xiaoxi.png',
|
|
// title: '我的工单',
|
|
// type: 'my_order'
|
|
// },
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/yaoqing.png',
|
|
title: '邀请业主',
|
|
type: 'invite'
|
|
},
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/cuijiao.png',
|
|
title: '物业催缴',
|
|
type: 'call'
|
|
},
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/tousu.png',
|
|
// title: '投诉管理',
|
|
// type: 'complaint'
|
|
// },
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangke.png',
|
|
// title: '访客邀请',
|
|
// type: ''
|
|
// },
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/wenjuan.png',
|
|
title: '问卷管理',
|
|
type: 'questionnaire'
|
|
},
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/fangyuan.png',
|
|
// title: '房源管理',
|
|
// type: 'housing'
|
|
// },
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/chewei.png',
|
|
// title: '车位管理',
|
|
// type: ''
|
|
// },
|
|
{
|
|
image: uni.$globalData?.RESOURCE_URL + 'home/grid/gongdan.png',
|
|
title: '商品核销',
|
|
type: 'verification'
|
|
},
|
|
// {
|
|
// image: uni.$globalData?.RESOURCE_URL + 'home/grid/gongdan.png',
|
|
// title: '员工权限',
|
|
// type: 'permissions'
|
|
// }
|
|
|
|
])
|
|
|
|
const toDoList = ref([{
|
|
num: '30',
|
|
desc: '今日任务',
|
|
},
|
|
{
|
|
num: '12',
|
|
desc: '未完成'
|
|
},
|
|
{
|
|
num: '7',
|
|
desc: '异常问题'
|
|
}
|
|
])
|
|
|
|
const problemList = ref([])
|
|
|
|
const getChapterList = async () => {
|
|
var res = await chapterList()
|
|
problemList.value = res.data
|
|
}
|
|
|
|
const handleClick = (e) => {
|
|
console.log(e)
|
|
}
|
|
|
|
const onChange = (e) => {
|
|
console.log(e)
|
|
}
|
|
const toPages = (item) => {
|
|
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?id=' + item.value.chapter_id
|
|
});
|
|
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;
|
|
case 'complaint':
|
|
// 投诉管理
|
|
uni.navigateTo({
|
|
url: '/pagesB/complaint/index'
|
|
});
|
|
break;
|
|
case 'questionnaire':
|
|
// 问卷管理
|
|
uni.navigateTo({
|
|
url: '/pagesB/questionnaire/list'
|
|
});
|
|
break;
|
|
case 'call':
|
|
// 问卷管理
|
|
uni.navigateTo({
|
|
url: '/pagesB/call/index'
|
|
});
|
|
break;
|
|
case 'housing':
|
|
// 房源管理
|
|
uni.navigateTo({
|
|
url: '/pagesB/housing/list'
|
|
});
|
|
break;
|
|
case 'permissions':
|
|
//员工权限
|
|
uni.navigateTo({
|
|
url: '/pagesB/permissions/villageList'
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
const getBannerList = () => {
|
|
const res = bannerList({
|
|
position: 2
|
|
})
|
|
}
|
|
|
|
|
|
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
|
|
})
|
|
if (banner.data.length > 0) {
|
|
swiperList.value = banner.data.map((item) => item.image)
|
|
}
|
|
// else {
|
|
// swiperList.value.push('/static/swiper/1.png', )
|
|
// }
|
|
})
|
|
|
|
// 获取用户权限
|
|
const getMenu = async () => {
|
|
const resMenu = await menu()
|
|
if (resMenu.code == 200) {
|
|
menuInfo.value = resMenu.data
|
|
console.log('用户权限:', menuInfo.value.auth)
|
|
}
|
|
}
|
|
|
|
onLoad(() => {
|
|
loadData()
|
|
getMenu()
|
|
getChapterList()
|
|
})
|
|
|
|
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> |