From cea100c85b6e3d33f45c60cbf0fed8cef33aa25d Mon Sep 17 00:00:00 2001 From: SelfRidicule Date: Thu, 22 Feb 2024 18:57:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=8F=E8=BF=B0:=E5=BA=95=E9=83=A8tabbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/app.json | 8 +- miniprogram/pages/index/index.js | 407 ++++++++++++++++------------- miniprogram/pages/index/index.wxml | 55 ++-- miniprogram/pages/index/index.wxss | 142 +++++----- miniprogram/pages/my/my.js | 216 ++++++++------- miniprogram/pages/my/my.wxml | 60 +++-- miniprogram/pages/my/my.wxss | 2 + miniprogram/tabBar.wxss | 58 ++++ 8 files changed, 549 insertions(+), 399 deletions(-) create mode 100644 miniprogram/tabBar.wxss diff --git a/miniprogram/app.json b/miniprogram/app.json index bb7d13b..67e6f5a 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -69,10 +69,9 @@ }, { "pagePath": "pages/parkRepair/parkRepair", - "iconPath": "/images/icon/wodebaoxiu1.png", - "selectedIconPath": "/images/icon/wodebaoxiu.png", - "text": "维修", - "isSpecial" : true + "iconPath": "/images/tabbar/openDoor.png", + "selectedIconPath": "/images/tabbar/openDoor.png", + "text": "开门" }, { "pagePath": "pages/my/my", @@ -83,6 +82,7 @@ ] }, "usingComponents": {}, + "sitemapLocation": "sitemap.json", "permission": { diff --git a/miniprogram/pages/index/index.js b/miniprogram/pages/index/index.js index 6d75793..df28bbd 100644 --- a/miniprogram/pages/index/index.js +++ b/miniprogram/pages/index/index.js @@ -1,195 +1,226 @@ const app = getApp() Page({ - onShareAppMessage(res) {}, - data: { - IMG_NAME: app.IMG_NAME, - indicatorDots: true, - autoplay: true, - interval: 3000, - duration: 1000, - bannerList: [{ - bannerImg: '' - } - ], - list: [{ - name: "创业活动", - img: "/images/hicon/chuangyehuodong.png", - path: "/pages/community/community" - }, - { - name: "政策信息", - img: "/images/hicon/zhengcexinxi.png", - path: "/pages/notice/notice" - }, - { - name: "党建园地", - img: "/images/hicon/zhaozhengce.png", - //img: "/images/hicon/yuanqugonggao.png", - path: "/pages/party/party" - }, - { - name: "租办公室", - img: "/images/hicon/zubangongshi.png", - path: "/pages/office/office" - }, - { - name: "项目入孵", - img: "/images/hicon/xiangmurufu.png", - path: "/pages/applyType/applyType" - }, - { - name: "企业入驻", - img: "/images/hicon/qiyeruzhu.png", - path: "/pages/applyType/applyType" - }, - { - name: "厂房申请", - img: "/images/hicon/qianrushenqing.png", - path: "/pages/applyType/applyType" - }, - { - name: "园区建议", - img: "/images/hicon/yuanqujianyi.png", - path: "/pages/complaint/complaint" - }, - { - name: "商业计划书", - img: "/images/hicon/wenjuandiaocha.png", - path: "/pages/outer/outer" - }, - /* - { - name: "园区报修", - img: "/images/hicon/zhaozhuanli.png", - path: "/pages/parkRepair/parkRepair" - }, - */ - ], - homelist: [], - background: [{ - bg: '/profile/banner/1.jpg', - url: '' - }, { - bg: '/profile/banner/2.jpg', - url: '' - }, { - bg: '/profile/banner/3.jpg', - url: '' - }, { - bg: '/profile/banner/4.jpg', - url: '' - }, { - bg: '/profile/banner/5.jpg', - url: '' - }, { - bg: '/profile/banner/6.jpg', - url: '' - }] - }, + onShareAppMessage(res) {}, + data: { + // tabBar param + tabBarParam: { + selected: 0, + color: "#515151", + selectedColor: "#217CFF", + backgroundColor: "#ffffff", + }, + // tabBar menu + tabBarList: [{ + "pagePath": "pages/index/index", + "iconPath": "/images/tabbar/home.png", + "selectedIconPath": "/images/tabbar/home-select.png", + "text": "首页" + }, + { + "pagePath": "pages/parkRepair/parkRepair", + "iconPath": "/images/tabbar/openDoor.png", + "selectedIconPath": "/images/tabbar/openDoor.png", + "text": "开门", + "bulge": true, + }, + { + "pagePath": "pages/my/my", + "iconPath": "/images/tabbar/my.png", + "selectedIconPath": "/images/tabbar/my-select.png", + "text": "我的" + }, + ], - onShow() { - let that = this - if (wx.getStorageSync('token')) { - app.AjaxRequest('get', { - 'content-type': 'application/json', - 'Authorization': 'Bearer ' + app.Getopenid() - }, '/user/profile', {}, function (res) { - if (res.code == 0) { - that.setData({ - parkName: wx.getStorageSync('parkName') - }) - wx.setStorageSync('MemberInfo', res.data) - that.getHotList() - } - }) - } else { - wx.reLaunch({ - url: '/pages/login/login', - }) - } - }, + IMG_NAME: app.IMG_NAME, + indicatorDots: true, + autoplay: true, + interval: 3000, + duration: 1000, + bannerList: [{ + bannerImg: '' + }], + menuList: [{ + name: "创业活动", + img: "/images/hicon/chuangyehuodong.png", + path: "/pages/community/community" + }, + { + name: "政策信息", + img: "/images/hicon/zhengcexinxi.png", + path: "/pages/notice/notice" + }, + { + name: "党建园地", + img: "/images/hicon/zhaozhengce.png", + //img: "/images/hicon/yuanqugonggao.png", + path: "/pages/party/party" + }, + { + name: "租办公室", + img: "/images/hicon/zubangongshi.png", + path: "/pages/office/office" + }, + { + name: "项目入孵", + img: "/images/hicon/xiangmurufu.png", + path: "/pages/applyType/applyType" + }, + { + name: "企业入驻", + img: "/images/hicon/qiyeruzhu.png", + path: "/pages/applyType/applyType" + }, + { + name: "厂房申请", + img: "/images/hicon/qianrushenqing.png", + path: "/pages/applyType/applyType" + }, + { + name: "园区建议", + img: "/images/hicon/yuanqujianyi.png", + path: "/pages/complaint/complaint" + }, + { + name: "商业计划书", + img: "/images/hicon/wenjuandiaocha.png", + path: "/pages/outer/outer" + }, + /* + { + name: "园区报修", + img: "/images/hicon/zhaozhuanli.png", + path: "/pages/parkRepair/parkRepair" + }, + */ + { + name: "会议预约", + img: "/profile/static/index/menu-hyyy.png", + path: "" + }, + ], + homelist: [], + background: [{ + bg: '/profile/banner/1.jpg', + url: '' + }, { + bg: '/profile/banner/2.jpg', + url: '' + }] + }, - //轮播高度自适应——获取图片高度 - imgHeight: function (e) { - var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 - var imgh = e.detail.height; //图片高度 - var imgw = e.detail.width; //图片宽度 - var swiperH = winWid * imgh / imgw + "px" - this.setData({ - Height: swiperH //设置高度 - }) - // this.setData({ - // Height: '300rpx' //设置高度 - // }) - }, - - getHotList() { - let that = this - app.AjaxRequest('get', { - 'content-type': 'application/json', - 'Authorization': 'Bearer ' + app.Getopenid() - }, '/menu/bannerList', { - isTop: true - }, function (res) { - that.setData({ - homelist: res.data - }) - }) - }, - - navdateil(e) { - var index = e.currentTarget.dataset.index - wx.navigateTo({ - url: '/pages/detail/detail?list=' + index - }) - }, - - navapply(e) { - if (wx.getStorageSync('token')) { - if (e.currentTarget.dataset.path) { - if (e.currentTarget.dataset.path == '/pages/parkRepair/parkRepair') { - wx.switchTab({ - url: e.currentTarget.dataset.path, - }) - } else { - wx.navigateTo({ - url: e.currentTarget.dataset.path + '?name=' + e.currentTarget.dataset.name, - }) - } - } else { - wx.showModal({ - content: '模块暂未开放，敬请期待', - showCancel: false, + // 切换tabbar + switchTab(e) { + const data = e.currentTarget.dataset + console.log('switchTab', data) + const url = data.path + wx.switchTab({ + url: '/' + url }) - } - } else { - app.getlogin() + }, + + onShow() { + let that = this + if (wx.getStorageSync('token')) { + app.AjaxRequest('get', { + 'content-type': 'application/json', + 'Authorization': 'Bearer ' + app.Getopenid() + }, '/user/profile', {}, function (res) { + if (res.code == 0) { + that.setData({ + parkName: wx.getStorageSync('parkName') + }) + wx.setStorageSync('MemberInfo', res.data) + that.getHotList() + } + }) + } else { + wx.reLaunch({ + url: '/pages/login/login', + }) + } + }, + + //轮播高度自适应——获取图片高度 + imgHeight: function (e) { + var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 + var imgh = e.detail.height; //图片高度 + var imgw = e.detail.width; //图片宽度 + var swiperH = winWid * imgh / imgw + "px" + this.setData({ + Height: swiperH //设置高度 + }) + // this.setData({ + // Height: '300rpx' //设置高度 + // }) + }, + + getHotList() { + let that = this + app.AjaxRequest('get', { + 'content-type': 'application/json', + 'Authorization': 'Bearer ' + app.Getopenid() + }, '/menu/bannerList', { + isTop: true + }, function (res) { + that.setData({ + homelist: res.data + }) + }) + }, + + navdateil(e) { + var index = e.currentTarget.dataset.index + wx.navigateTo({ + url: '/pages/detail/detail?list=' + index + }) + }, + + navapply(e) { + if (wx.getStorageSync('token')) { + if (e.currentTarget.dataset.path) { + if (e.currentTarget.dataset.path == '/pages/parkRepair/parkRepair') { + wx.switchTab({ + url: e.currentTarget.dataset.path, + }) + } else { + wx.navigateTo({ + url: e.currentTarget.dataset.path + '?name=' + e.currentTarget.dataset.name, + }) + } + } else { + wx.showModal({ + content: '模块暂未开放，敬请期待', + showCancel: false, + }) + } + } else { + app.getlogin() + } + }, + + navDetail(e) { + if (wx.getStorageSync('token')) { + wx.navigateTo({ + url: e.currentTarget.dataset.uri, + }) + } else { + app.getlogin() + } + }, + + navparkList() { + wx.navigateTo({ + url: '/pages/index/parkList/parkList' + }) + }, + + adLoad() { + console.log('Banner 广告加载成功') + }, + adError(err) { + console.log('Banner 广告加载失败', err) + }, + adClose() { + console.log('Banner 广告关闭') } - }, - - navDetail(e) { - if (wx.getStorageSync('token')) { - wx.navigateTo({ - url: e.currentTarget.dataset.uri, - }) - } else { - app.getlogin() - } - }, - - navparkList() { - wx.navigateTo({ - url: '/pages/index/parkList/parkList' - }) - }, - - adLoad() { - console.log('Banner 广告加载成功') - }, - adError(err) { - console.log('Banner 广告加载失败', err) - }, - adClose() { - console.log('Banner 广告关闭') - } }) \ No newline at end of file diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 14aeb33..01ceeb4 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -1,27 +1,34 @@ - - - 当前园区：{{parkName? parkName:'请先选择园区'}} - > + + + 当前园区：{{parkName? parkName:'请先选择园区'}} + > + + + + + + + + + + 我的应用 + + + + {{item.name}} + + + + + + + + + + + + {{item.text}} + - - - - - - - - - 我的应用 - - - - {{item.name}} - - - - - \ No newline at end of file diff --git a/miniprogram/pages/index/index.wxss b/miniprogram/pages/index/index.wxss index 97f0edd..2650b3e 100644 --- a/miniprogram/pages/index/index.wxss +++ b/miniprogram/pages/index/index.wxss @@ -1,125 +1,133 @@ @import "../../app.wxss"; +@import "../../tabBar.wxss"; page { - overflow: hidden; + overflow: hidden; } .topList { - width: 100%; - height: 70rpx; - line-height: 70rpx; - background: white; - padding: 0 20rpx; - position: fixed; - top: 0; - left: 0; - z-index: 9999999; + display: none; + width: 100%; + height: 70rpx; + line-height: 70rpx; + background: white; + padding: 0 20rpx; + position: fixed; + top: 0; + left: 0; + z-index: 9999999; } -.swiper-box{ - margin-top: 70rpx; +.swiper-box { + margin-top: 70rpx; } .page { - width: 100%; - height: 100%; - box-sizing: border-box; - color: black; - overflow: auto; - border-top: 1rpx solid #f4f4f4; - background-color: #F5F5F5; - /* padding: 0 26rpx; */ + width: 100%; + height: 100%; + box-sizing: border-box; + color: black; + overflow: auto; + border-top: 1rpx solid #f4f4f4; + background-color: #F5F5F5; + /* padding: 0 26rpx; */ } .activityList { - background: white; - margin-bottom: 20rpx; - /* border-radius: 24rpx; */ - overflow: hidden; - border-bottom: 1rpx solid #EEEEEE; + background: white; + margin-bottom: 20rpx; + /* border-radius: 24rpx; */ + overflow: hidden; + border-bottom: 1rpx solid #EEEEEE; } .detailbox { - padding: 16rpx 26rpx; - line-height: 40rpx; - position: relative; + padding: 16rpx 26rpx; + line-height: 40rpx; + position: relative; } .fixed { - background: white; - padding: 0 30rpx 40rpx 30rpx; - display: flex; - flex-wrap: wrap; - /* border-radius: 20rpx; */ - margin-bottom: 40rpx; + background: white; + padding: 0 30rpx 40rpx 30rpx; + display: flex; + flex-wrap: wrap; + /* border-radius: 20rpx; */ + margin-bottom: 40rpx; } .fixedbox { - width: 25%; - text-align: center; - margin-top: 40rpx; + width: 25%; + text-align: center; + margin-top: 40rpx; } .bot { - border-bottom: 3rpx solid #f4f4f4; - margin-bottom: 40rpx; + border-bottom: 3rpx solid #f4f4f4; + margin-bottom: 40rpx; } .newbox { - background: white; - padding: 10rpx 30rpx; - margin-top: 20rpx; + background: white; + padding: 10rpx 30rpx; + margin-top: 20rpx; } .btn { - position: absolute; - top: 10%; - right: 30rpx; - color: white; - background: #ffa200; - padding: 0 40rpx; - height: 62rpx; - border-radius: 31rpx; - text-align: center; - line-height: 62rpx; + position: absolute; + top: 10%; + right: 30rpx; + color: white; + background: #ffa200; + padding: 0 40rpx; + height: 62rpx; + border-radius: 31rpx; + text-align: center; + line-height: 62rpx; } .gray { - filter: grayscale(98%); - filter: gray; + filter: grayscale(98%); + filter: gray; } /* 轮播小点点 */ .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal { - margin-left: 36%; + margin-left: 36%; } .swiper-box .wx-swiper-dot { - width: 20rpx; - display: inline-flex; - height: 5rpx; - margin-left: 10rpx; - justify-content: space-between; + width: 20rpx; + display: inline-flex; + height: 5rpx; + margin-left: 10rpx; + justify-content: space-between; } .swiper-box .wx-swiper-dot::before { - content: ''; - flex-grow: 1; - background: rgba(255, 255, 255, 0.8); - border-radius: 0rpx + content: ''; + flex-grow: 1; + background: rgba(255, 255, 255, 0.8); + border-radius: 0rpx } .swiper-box .wx-swiper-dot-active::before { - background: #ff3333; + background: #ff3333; } .swiper-box .wx-swiper-dot-active { - width: 40rpx; + width: 40rpx; } /* 外层组件的宽度可设置成100%或具体数值 */ .adContainer { - width: 100%; + width: 100%; +} + + +.menuImg{ + width: 132rpx; + height: 134rpx; } \ No newline at end of file diff --git a/miniprogram/pages/my/my.js b/miniprogram/pages/my/my.js index 4298b22..b265173 100644 --- a/miniprogram/pages/my/my.js +++ b/miniprogram/pages/my/my.js @@ -1,100 +1,138 @@ let app = getApp() Page({ - /** - * 页面的初始数据 - */ - data: { - DOMAIN_NAME: app.IMG_NAME, - customerPages: [ - [{ - listIcon: "icontubiao-1", - zh: "我的活动", - url: "/pages/myActivities/myActivities", - borderRadius: '20rpx 20rpx 0 0' + /** + * 页面的初始数据 + */ + data: { + // tabBar param + tabBarParam: { + selected: 2, + color: "#515151", + selectedColor: "#217CFF", + backgroundColor: "#ffffff", }, - { - listIcon: "iconqiyexinxi", - zh: "业务申请", - url: "../my/serviceApply/serviceApply" - }, - { - listIcon: "iconqiyexinxi", - zh: "园区建议", - url: "/pages/complaint/complaint", - borderRadius: '0 0 20rpx 20rpx', - marginbottom: true - }, - { - listIcon: "iconzhanghaoshezhi", - zh: "账号设置", - url: "/pages/my/accountSetting/accountSetting", - borderRadius: '20rpx 20rpx 0 0' - }, - { - listIcon: "iconfuwu", - zh: "我的服务", - url: "/pages/enterpriseServices/myServiceList/myServiceList" - }, - { - listIcon: "iconguzhangbaoxiu", - zh: "我的报修", - url: "/pages/parkRepair/parkRepair", - borderRadius: '0 0 20rpx 20rpx' - } - ] - ], - memberInfo: {} - }, + // tabBar menu + tabBarList: [{ + "pagePath": "pages/index/index", + "iconPath": "/images/tabbar/home.png", + "selectedIconPath": "/images/tabbar/home-select.png", + "text": "首页" + }, + { + "pagePath": "pages/parkRepair/parkRepair", + "iconPath": "/images/tabbar/openDoor.png", + "selectedIconPath": "/images/tabbar/openDoor.png", + "text": "开门", + "bulge": true, + }, + { + "pagePath": "pages/my/my", + "iconPath": "/images/tabbar/my.png", + "selectedIconPath": "/images/tabbar/my-select.png", + "text": "我的" + }, + ], + DOMAIN_NAME: app.IMG_NAME, + customerPages: [ + [{ + listIcon: "icontubiao-1", + zh: "我的活动", + url: "/pages/myActivities/myActivities", + borderRadius: '20rpx 20rpx 0 0' + }, + { + listIcon: "iconqiyexinxi", + zh: "业务申请", + url: "../my/serviceApply/serviceApply" + }, + { + listIcon: "iconqiyexinxi", + zh: "园区建议", + url: "/pages/complaint/complaint", + borderRadius: '0 0 20rpx 20rpx', + marginbottom: true + }, + { + listIcon: "iconzhanghaoshezhi", + zh: "账号设置", + url: "/pages/my/accountSetting/accountSetting", + borderRadius: '20rpx 20rpx 0 0' + }, + { + listIcon: "iconfuwu", + zh: "我的服务", + url: "/pages/enterpriseServices/myServiceList/myServiceList" + }, + { + listIcon: "iconguzhangbaoxiu", + zh: "我的报修", + url: "/pages/parkRepair/parkRepair", + borderRadius: '0 0 20rpx 20rpx' + } + ] + ], + memberInfo: {} + }, - /** - * 生命周期函数--监听页面加载 - */ - onLoad(options) {}, - onShow() { - let that = this - if (wx.getStorageSync('token')) { - app.AjaxRequest('get', { - 'content-type': 'application/json', - 'Authorization': 'Bearer ' + app.Getopenid() - }, '/user/profile', {}, function (res) { - that.setData({ - memberInfo: res.data - }) - }) - } else { - app.getlogin() - } - }, - navDetail(e) { - wx.navigateTo({ - url: e.currentTarget.dataset.url, - }) - }, - navigateTo(e) { - if (wx.getStorageSync('token')) { - if (e.currentTarget.dataset.url == '/pages/parkRepair/parkRepair') { + // 切换tabbar + switchTab(e) { + const data = e.currentTarget.dataset + console.log('switchTab', data) + const url = data.path wx.switchTab({ - url: e.currentTarget.dataset.url, + url: '/' + url }) - } else { + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) {}, + onShow() { + let that = this + if (wx.getStorageSync('token')) { + app.AjaxRequest('get', { + 'content-type': 'application/json', + 'Authorization': 'Bearer ' + app.Getopenid() + }, '/user/profile', {}, function (res) { + that.setData({ + memberInfo: res.data + }) + }) + } else { + app.getlogin() + } + }, + navDetail(e) { wx.navigateTo({ - url: e.currentTarget.dataset.url, + url: e.currentTarget.dataset.url, }) - } - } else { - app.getlogin() + }, + navigateTo(e) { + if (wx.getStorageSync('token')) { + if (e.currentTarget.dataset.url == '/pages/parkRepair/parkRepair') { + wx.switchTab({ + url: e.currentTarget.dataset.url, + }) + } else { + wx.navigateTo({ + url: e.currentTarget.dataset.url, + }) + } + } else { + app.getlogin() + } + }, + navpersonalData() { + if (wx.getStorageSync('token')) { + wx.navigateTo({ + url: '../my/personalData/personalData', + }) + } else { + wx.navigateTo({ + url: '/pages/login/login', + }) + } } - }, - navpersonalData() { - if (wx.getStorageSync('token')) { - wx.navigateTo({ - url: '../my/personalData/personalData', - }) - } else { - wx.navigateTo({ - url: '/pages/login/login', - }) - } - } }) \ No newline at end of file diff --git a/miniprogram/pages/my/my.wxml b/miniprogram/pages/my/my.wxml index e5a10d7..9b9edb1 100644 --- a/miniprogram/pages/my/my.wxml +++ b/miniprogram/pages/my/my.wxml @@ -1,31 +1,37 @@ - - - - - {{memberInfo.nickname? memberInfo.nickname:'登录'}} - - - - - - - - - - - \ No newline at end of file diff --git a/miniprogram/pages/my/my.wxss b/miniprogram/pages/my/my.wxss index fecda2a..60b9841 100644 --- a/miniprogram/pages/my/my.wxss +++ b/miniprogram/pages/my/my.wxss @@ -1,3 +1,5 @@ +@import "../../tabBar.wxss"; + .page { overflow: auto; height: 100%; diff --git a/miniprogram/tabBar.wxss b/miniprogram/tabBar.wxss new file mode 100644 index 0000000..6d77a59 --- /dev/null +++ b/miniprogram/tabBar.wxss @@ -0,0 +1,58 @@ + + +.tab-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 50px; + background: #FFF; + display: flex; + line-height: 1.2; + padding-bottom: 60rpx; + border-top: 1px solid #e6e6e6; + } + + .tab-bar-item { + flex: 1; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + .tab-bar-item .image { + width: 26px; + height: 26px; + } + .bulge { + background-color: #FFF; + } + .bulge .tab-bar-bulge{ + position: absolute; + z-index: -1; + width: 64px; + height: 64px; + top: -24px; + border-radius: 50%; + border-top: 1px solid #e6e6e6; + background-color: #FFF; + } + .bulge .image{ + position: absolute; + width: 50px; + height: 50px; + top: -16px; + } + .bulge .tab-bar-view{ + position: relative; + bottom: -16px; + margin-top: 4px; + } + + .tab-bar-item .tab-bar-view { + font-size: 12px; + margin-top: 4px; + } + \ No newline at end of file