From f32cff008d5ebdf1fdf3c8369fb8f7b0c2b4448e Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Thu, 02 Nov 2023 18:47:29 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jczz_app
---
pages/home/index.vue | 568 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 511 insertions(+), 57 deletions(-)
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 6f7be6c..92f6867 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,8 +1,8 @@
<template>
<view class="">
- <u-navbar height="48" :autoBack="false" safeAreaInsetTop placeholder>
+ <u-navbar height="48" :autoBack="false" safeAreaInsetTop placeholder @leftClick="selectBoxShow = !selectBoxShow">
<view slot="left" class="flex">
- <text class="top">万达华府26栋1903室</text>
+ <text class="top">{{curSelectSite.name?curSelectSite.name:'暂无绑定' +roleTypeName+'信息'}}</text>
<u-icon name="/static/icon/change-icon.png"></u-icon>
</view>
</u-navbar>
@@ -10,34 +10,124 @@
<view class="swiper">
<u-swiper :list="swiperList"></u-swiper>
</view>
- <view class="">
- <u-grid :border="false" col="4">
- <u-grid-item v-for="(i,k) in menuList" :key="k" >
- <u-icon :name="i.icon" :size="45"></u-icon>
+ <view class="" v-if="roleType != 1">
+ <u-grid :border="false" col="4">
+ <u-grid-item v-for="(i,k) in cellList" :key="k">
+ <u-icon :name="i.icon" :size="45"></u-icon>
<text class="f-26 mt-20">{{i.text}}</text>
</u-grid-item>
</u-grid>
+
<view class="section flex j-c-s-b mt-40">
- <view class="section-item" v-for="i in navList">
- <image class="section-item-bg" src="/static/icon/nav-bg-01.png" mode="aspectFill"></image>
+ <view class="section-item" v-for="i in navList">
+ <image class="section-item-bg" :src="i.bgImg" mode="aspectFill"></image>
<view class="item-box">
<view class="f-28">{{i.title}}</view>
<view class="flex j-c-s-b">
<text class="f-22">{{i.name}}</text>
- <u-icon :name="i.icon"></u-icon>
+ <u-icon :name="i.icon"></u-icon>
</view>
</view>
</view>
</view>
</view>
-
- <view class="notic">
- <view class="notic-caption flex a-i-c j-c-s-b">
+
+ <view class="block flex a-i-c j-c-s-b" v-if="roleType == 1">
+ <view class="block-item">
+ <image class="block-item-bg" src="/static/icon/nav-bg-04.png" mode="aspectFill" />
+ <view class="block-item-box flex a-i-c ">
+ <u-icon name="/static/icon/nav-05.png" width="90rpx" height="90rpx"></u-icon>
+ <view class="item-text flex f-d-c j-c-s-b">
+ <text class="f-32 fw">扫一扫</text>
+ <text class="f-26 opacity">场所采集</text>
+ </view>
+ </view>
+ </view>
+
+ <view class="block-item">
+ <image class="block-item-bg" src="/static/icon/nav-bg-05.png" mode="aspectFill" />
+ <view class="block-item-box flex a-i-c">
+ <u-icon name="/static/icon/nav-06.png" width="90rpx" height="90rpx"></u-icon>
+ <view class="item-text flex f-d-c j-c-s-b">
+ <text class="f-32 fw">打卡登记</text>
+ <text class="f-26 opacity">在线打卡</text>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <view class="" v-if="hasMenu('楼盘表').length>0">
+ <view class="caption">
+ <view class="flex a-i-c">
+ <view class="line"></view>
+ <text class="f-32 fw">楼盘表</text>
+ </view>
+ </view>
+ <view class="flex flex-wrap">
+ <view class="cell bgc-main flex a-i-c" v-for="(item, index) in houseDataList.slice(0, 6)" @click.native="pushPage(item)">
+ <u-icon name="/static/icon/floor.png" width="32rpx" height="32rpx"></u-icon>
+ <text class="cell-text f-26 c-ff">{{item.title}}</text>
+ </view>
+ </view>
+ </view>
+
+ <view class="" v-if="roleType == 1 && jobList.length>0">
+ <view class="caption">
+ <view class="flex a-i-c">
+ <view class="line"></view>
+ <text class="f-32 fw">工作台</text>
+ </view>
+ </view>
+ <u-grid :border="false" col="4">
+ <u-grid-item v-for="(item, index) in jobList" :index="index" :key="index"
+ :customStyle="{paddingTop:20+'rpx'}">
+ <view class="grid-item flex f-d-c a-i-c" :style="{background:item.style.background}">
+ <u-icon :name="item.imgUrl" width="60rpx" height="60rpx"></u-icon>
+ <text class="grid-text f-24">{{item.title}}</text>
+ </view>
+
+ </u-grid-item>
+ </u-grid>
+ </view>
+
+ <view class="mt-40" v-if="roleType != 3">
+ <view class="caption">
+ <view class="flex a-i-c">
+ <view class="line"></view>
+ <text class="f-32 fw">我的任务</text>
+ </view>
+ </view>
+
+ <view class="row flex j-c-s-b">
+ <view class="row-item flex_base">
+ <u-icon></u-icon>
+ <view class="flex f-d-c fw">
+ <text class="f-28">一次性</text>
+ <text class="f-36">8</text>
+ </view>
+ </view>
+ <view class="row-item flex_base">
+ <u-icon></u-icon>
+ <view class="flex f-d-c fw">
+ <text class="f-28">周期性</text>
+ <text class="f-36">8</text>
+ </view>
+ </view>
+ </view>
+
+ <u-cell-group>
+ <u-cell :icon="i.icon" :iconStyle="{width:'40rpx',height:'40rpx',marginRight:'18rpx'}"
+ :title="i.title" v-for="i in taskList" :value="i.status"></u-cell>
+ </u-cell-group>
+ </view>
+
+ <view class="notic" v-if="roleType == 3">
+ <view class="caption flex a-i-c j-c-s-b">
<view class="flex a-i-c">
<view class="line"></view>
<text class="f-32">通知公告</text>
</view>
- <u-icon name="arrow-right"></u-icon>
+ <u-icon name="arrow-right"></u-icon>
</view>
<view class="notic-list" v-for="i in 3">
<view class="f-28 mb-30">
@@ -46,26 +136,31 @@
<view class="flex a-i-c j-c-s-b">
<view class="f-28 flex a-i-c">
<view class="flex a-i-c mr-30">
- <u-icon name="thumb-up-fill" size="24" color="#CECECE"></u-icon>
+ <u-icon name="thumb-up-fill" size="24" color="#CECECE"></u-icon>
<text class="f-24 c-99 ml-10">121</text>
</view>
<view class="flex a-i-c">
- <u-icon name="eye-fill" size="24" color="#CECECE"></u-icon>
+ <u-icon name="eye-fill" size="24" color="#CECECE"></u-icon>
<text class="f-24 c-99 ml-10">121</text>
</view>
</view>
<text class="f-24 c-99">2023-08-21</text>
</view>
-
+
</view>
</view>
-
+ <u-picker :title="roleTypeName" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"
+ @confirm="confirmSite" @change="changeSite" @cancel="selectBoxShow = false"></u-picker>
</view>
</view>
</template>
<script>
+ import {
+ getFuncList,
+ getHouseList
+ } from "@/api/doorplateAddress/doorplateAddress";
export default {
data() {
return {
@@ -74,7 +169,7 @@
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
],
- menuList: [{
+ cellList: [{
icon: "/static/icon/nav-01.png",
text: "扫一扫"
},
@@ -91,26 +186,316 @@
text: "租客上报"
}
],
- navList: [
- {
- title:"物业",
- name:"张三",
- icon:"/static/icon/tel-green.png",
- bgImg:"/static/nav-bg-01.png"
+ navList: [{
+ title: "物业",
+ name: "张三",
+ icon: "/static/icon/tel-green.png",
+ bgImg: "/static/nav-bg-01.png"
},
{
- title:"综治网格",
- name:"张三",
- icon:"/static/icon/tel-orange.png",
- bgImg:"/static/nav-bg-02.png"
+ title: "综治网格",
+ name: "张三",
+ icon: "/static/icon/tel-orange.png",
+ bgImg: "/static/nav-bg-02.png"
},
{
- title:"公安网格",
- name:"张三",
- icon:"/static/icon/tel-blue.png",
- bgImg:"/static/nav-bg-03.png"
+ title: "公安网格",
+ name: "张三",
+ icon: "/static/icon/tel-blue.png",
+ bgImg: "/static/nav-bg-03.png"
},
- ]
+ ],
+ jobList: [{
+ icon: "/static/icon/menu-01.png",
+ text: "场所记录",
+ style: {
+ background: 'linear-gradient(133deg, #FFFCF9 0%, rgba(255,252,249,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-02.png",
+ text: "场所采集",
+ style: {
+ background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-03.png",
+ text: "出租房管理",
+ style: {
+ background: 'linear-gradient(131deg, #FCF8FF 0%, rgba(252,248,255,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-04.png",
+ text: "出租房管理",
+ style: {
+ background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-05.png",
+ text: "场所维护",
+ style: {
+ background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-06.png",
+ text: "报事审核",
+ style: {
+ background: 'linear-gradient(137deg, #FFF4F3 0%, rgba(255,244,243,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-07.png",
+ text: "校园安全",
+ style: {
+ background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-08.png",
+ text: "旅馆安全",
+ style: {
+ background: 'linear-gradient(131deg, #FCF8FF 0%, rgba(252,248,255,0) 100%)',
+ }
+ },
+ {
+ icon: "/static/icon/menu-09.png",
+ text: "取保候审",
+ style: {
+ background: 'linear-gradient(137deg, #FFF4F3 0%, rgba(255,244,243,0) 100%)',
+ }
+ },
+ ],
+ taskList: [{
+ icon: "/static/icon/cell-01.png",
+ title: "综治任务",
+ status: "待处理0"
+ },
+ {
+ icon: "/static/icon/cell-02.png",
+ title: "住建任务",
+ status: "待处理0"
+ },
+ {
+ icon: "/static/icon/cell-03.png",
+ title: "公安任务",
+ status: "待处理0"
+ }
+ ],
+ roleType: 1, // 1网格员/系统管理员 、2场所负责人、 3居民
+ roleTypeName:"街道社区网格",
+ selectBoxShow: false,
+ siteColumns: [],
+ curSelectSite: {},
+ columnData: [],
+ houseDataList: [{
+ title: '-',
+ useSlot: true
+ }],
+ jobList:[],
+ menuList:[]
+ }
+ },
+
+ onLoad() {
+ console.log(uni.getStorageSync("activeRole"))
+
+ },
+ onShow() {
+ this.init()
+ },
+ computed: {
+ hasMenu() {
+ return (name) => {
+ let resultArr = []
+ resultArr = this.getMenu(name, this.menuList, resultArr)
+ if (resultArr.length > 0) {
+ return resultArr
+ } else {
+ return []
+ }
+
+ }
+ }
+ },
+
+ methods: {
+
+ //初始化
+ init() {
+ this.curSelectSite = {}
+ this.menuList = uni.getStorageSync("menu")
+ this.selectRole = uni.getStorageSync("activeRole")
+ console.log(uni.getStorageSync("activeRole"))
+ this.getMenuList()
+ this.getSiteList()
+ // uni.hideTabBar()
+ },
+
+ //获取场所列表
+ async getSiteList() {
+ console.log(this.selectRole)
+ let type = null
+ let roleName = this.selectRole.roleName
+ console.log("roleName", roleName)
+ if (roleName == '网格员' || roleName == '系统管理员') {
+ type = 1
+ this.roleType = 1;
+ this.roleTypeName = "街道社区网格"
+ } else if (roleName == '场所负责人') {
+ type = 2
+ this.roleType = 2
+ this.roleTypeName = "场所"
+ } else if (roleName == '居民') {
+ type = 3
+ this.roleType = 3
+ this.roleTypeName = "居民"
+ }
+
+ const res = await getFuncList(type, roleName)
+ console.log(res, "-----------")
+ let data = res.data
+ this.siteColumns = []
+
+ this.buildSiteColumn(data, 0)
+ console.log(this.siteColumns)
+
+ },
+
+ buildSiteColumn(dataList, index) {
+ if (dataList.length > 0) {
+ this.siteColumns[index] = dataList
+ if (dataList[0].children && dataList[0].children.length > 0) {
+ this.buildSiteColumn(dataList[0].children, index + 1)
+ }
+ }
+ },
+
+
+ // 获取楼盘
+ async getHouseDataList(name) {
+ const res = await getHouseList(1, name)
+ console.log(res);
+ res.data.forEach(item => {
+ item.title = item.name
+ item.useSlot = true
+ delete item.name
+ })
+ this.houseDataList = res.data || [{
+ title: '-',
+ useSlot: true
+ }]
+ },
+
+
+ changeSite(e) {
+ const {
+ columnIndex,
+ value,
+ values, // values为当前变化列的数组内容
+ index,
+ // 微信小程序无法将picker实例传出来，只能通过ref操作
+ picker = this.$refs.uPicker
+ } = e
+ // 当第一列值发生变化时，变化第二列(后一列)对应的选项
+ if (columnIndex === 0 && this.columnData.length > 0) {
+ // picker为选择器this实例，变化第二列对应的选项
+ picker.setColumnValues(1, this.columnData[index])
+ }
+ },
+ // 回调参数为包含columnIndex、value、values
+ confirmSite(e) {
+ console.log('confirm', e)
+ this.curSelectSite = e.value[e.value.length - 1]
+ this.selectBoxShow = false
+ this.getHouseDataList(e.value[1].name)
+ },
+ getMenu(menuName, menuList, resultArr) {
+ // console.log(menuList, menuName)
+ for (var i = 0; i < menuList.length; i++) {
+ if (menuList[i].name == menuName) {
+ resultArr.push(menuList[i])
+ } else {
+ if (menuList[i].children && menuList[i].children.length) {
+ this.getMenu(menuName, menuList[i].children, resultArr);
+ }
+ }
+ }
+
+ return resultArr
+
+ },
+
+ //获取首页菜单
+ getMenuList() {
+ console.log("当前角色菜单", this.menuList)
+ this.getPhoneList()
+ this.getLiveList()
+ this.getWorkbenchList()
+ },
+ getPhoneList() {
+ this.gridDataList = []
+ const resultArr = this.hasMenu('快捷拨号')
+ if (resultArr.length == 0) {
+ return
+ }
+
+ const topMenu = resultArr[0]
+
+ topMenu.children.forEach(menu => {
+ this.gridDataList.push({
+ title: menu.name,
+ data: "无数据",
+ phone: "无"
+ })
+ })
+ },
+
+ //获取生活菜单
+ getLiveList() {
+ this.liveList = []
+ const resultArr = this.hasMenu('生活')
+ if (resultArr.length == 0) {
+ return
+ }
+
+ const topMenu = resultArr[0]
+
+ topMenu.children.forEach(menu => {
+ this.liveList.push({
+ imgUrl: menu.source,
+ title: menu.name,
+ })
+ })
+ },
+
+ //获取工作台菜单
+ getWorkbenchList() {
+ this.jobList = []
+ const resultArr = this.hasMenu('工作台')
+ if (resultArr.length == 0) {
+ return
+ }
+
+ const topMenu = resultArr[0]
+
+ topMenu.children.forEach(menu => {
+ this.jobList.push({
+ imgUrl: menu.source,
+ title: menu.name,
+ })
+ })
+ },
+
+ // 页面跳转
+ pushPage({id, title}) {
+ if (id !== void 0) {
+ let url = `/subPackage/house/list/index?id=${id}&title=${title}`
+ this.$u.func.globalNavigator(url, "navTo")
+ }
}
}
}
@@ -131,41 +516,110 @@
.content {
padding: 0 30rpx;
}
- .section{
- .section-item{
+
+ .section {
+ .section-item {
width: 216rpx;
- height:120rpx;
+ height: 120rpx;
position: relative;
}
- .section-item-bg{
+
+ .section-item-bg {
width: 216rpx;
- height:120rpx;
+ height: 120rpx;
}
- .item-box{
- width:216rpx;
- height:120rpx;
+
+ .item-box {
+ width: 216rpx;
+ height: 120rpx;
position: absolute;
- top:0;
- left:0;
- padding:20rpx 20rpx 0;
+ top: 0;
+ left: 0;
+ padding: 20rpx 20rpx 0;
box-sizing: border-box;
}
}
- .notic{
- width:100%;
- .notic-caption{
- width:100%;
- padding:40rpx 0 0;
+
+ .notic {
+ width: 100%;
+
+ .notic-list {
+ padding: 30rpx 0;
+ border-bottom: 1px solid #f5f5f5;
}
- .line{
- width:6rpx;
- height:29rpx;
- background-color:#017BFC;
- margin-right:14rpx;
+ }
+
+ .caption {
+ width: 100%;
+ padding: 40rpx 0 0;
+
+ .line {
+ width: 6rpx;
+ height: 29rpx;
+ background-color: #017BFC;
+ margin-right: 14rpx;
}
- .notic-list{
- padding:30rpx 0;
- border-bottom:1px solid #f5f5f5;
+ }
+
+ .block {
+ .block-item {
+ position: relative;
+ }
+
+ .block-item,
+ .block-item-bg,
+ .block-item-box {
+ width: 334rpx;
+ height: 170rpx;
+ }
+
+ .block-item-box {
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .item-text {
+ height: 90rpx;
+ margin-left: 22rpx;
+ color: #fff;
+ }
+
+ .opacity {
+ opacity: .4;
+ }
+ }
+
+ .cell {
+ padding: 0 16rpx;
+ height: 64rpx;
+ border-radius: 8rpx;
+ margin-right: 20rpx;
+ margin-top: 30rpx;
+
+ .cell-text {
+ margin-left: 16rpx;
+ }
+ }
+
+ .grid-item {
+ width: 153rpx;
+ height: 153rpx;
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
+ justify-content: center;
+ }
+
+ .row {
+ width: 100%;
+ margin: 30rpx 0;
+
+ .row-item {
+ width: 330rpx;
+ height: 134rpx;
+ box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.02);
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3