From e54dedc458d1abe5ceafd93f7d33ad14025f834a Mon Sep 17 00:00:00 2001 From: zhaoyongnian <541231643@qq.com> Date: Tue, 26 May 2020 15:23:41 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BF=97=E6=84=BF=E8=80=85=E6=94=B9=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 1 + pages/heartNew/heartNew.js | 7 + pages/heartNew/heartNew.wxml | 18 +++ pages/heartNew/heartNew.wxss | 86 ++++++++++ .../components/activityItem/activityItem.js | 39 +++++ .../components/activityItem/activityItem.json | 3 + .../components/activityItem/activityItem.wxml | 31 ++++ .../components/activityItem/activityItem.wxss | 148 ++++++++++++++++++ .../preloadActivityItem.js | 5 + .../preloadActivityItem.json | 3 + .../preloadActivityItem.wxml | 9 ++ .../preloadActivityItem.wxss | 61 ++++++++ .../pages/leaderboardNew/leaderboardNew.js | 106 +++++++++++++ .../pages/leaderboardNew/leaderboardNew.json | 3 + .../pages/leaderboardNew/leaderboardNew.wxml | 21 +++ .../pages/leaderboardNew/leaderboardNew.wxss | 95 +++++++++++ 16 files changed, 636 insertions(+) create mode 100644 subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.js create mode 100644 subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.json create mode 100644 subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxml create mode 100644 subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxss create mode 100644 subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.js create mode 100644 subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.json create mode 100644 subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxml create mode 100644 subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxss create mode 100644 subpages/heart/pages/leaderboardNew/leaderboardNew.js create mode 100644 subpages/heart/pages/leaderboardNew/leaderboardNew.json create mode 100644 subpages/heart/pages/leaderboardNew/leaderboardNew.wxml create mode 100644 subpages/heart/pages/leaderboardNew/leaderboardNew.wxss diff --git a/app.json b/app.json index 5081102..a99fe59 100644 --- a/app.json +++ b/app.json @@ -89,6 +89,7 @@ "pages": [ "pages/heartDetail/heartDetail", "pages/leaderboard/leaderboard", + "pages/leaderboardNew/leaderboardNew", "pages/myNews/myNews", "pages/clockIn/clockIn", "pages/volunteer/volunteer", diff --git a/pages/heartNew/heartNew.js b/pages/heartNew/heartNew.js index f8241cf..25767b2 100644 --- a/pages/heartNew/heartNew.js +++ b/pages/heartNew/heartNew.js @@ -8,6 +8,7 @@ Page({ data: { statusHeight: 0, // 自定义头部状态栏高度 navigationHeight: 0, // 自定义头部导航栏高度 + selectedTab: 'tab0', }, /** @@ -19,6 +20,12 @@ Page({ navigationHeight: app.globalData.deviceInfo.navigationHeight, }) }, + // tab 切换 + tabBarChange(e) { + this.setData({ + selectedTab: e.currentTarget.dataset.tab + }) + }, /** * 生命周期函数--监听页面初次渲染完成 diff --git a/pages/heartNew/heartNew.wxml b/pages/heartNew/heartNew.wxml index 6672990..03b993f 100644 --- a/pages/heartNew/heartNew.wxml +++ b/pages/heartNew/heartNew.wxml @@ -16,4 +16,22 @@ + + + + + + 订单多多 + + + 志友朵朵 + + + 精彩说说 + + + 志愿积分 + + + \ No newline at end of file diff --git a/pages/heartNew/heartNew.wxss b/pages/heartNew/heartNew.wxss index 0dc0d2d..0d14c6b 100644 --- a/pages/heartNew/heartNew.wxss +++ b/pages/heartNew/heartNew.wxss @@ -91,4 +91,90 @@ page { .belong-grid .newbelong-grid .volunteer image { width: 100%; height: 100%; +} + +/* banner 样式 */ +.banner { + position: absolute; + width: calc(100% - 60rpx); + height: 300rpx; + margin-left: 30rpx; + background-color: royalblue; + z-index: 999; + margin-top: -36rpx; + box-shadow: 0px 6px 21px 0px rgba(122, 122, 122, 0.23); + border-radius: 14rpx; +} + +.tab-all { + position: absolute; + width: 100%; + height: 370rpx; + background-color: #fff; + z-index: 998; +} + + +.tab-bar { + margin-top: 278rpx; + width: 100%; + height: 92rpx; + background: #fff; + display: flex; + align-items: center; + position: relative; +} + +.tab-bar .tab { + font-size: 30rpx; + font-weight: 500; + color: rgba(171, 171, 171, 1); + width: 25%; + height: 100%; + line-height: 92rpx; + /* text-indent: 20rpx; */ + text-align: center; + position: relative; + z-index: 10; +} + +.tab-bar .tab.select { + font-size: 32rpx; + font-weight: bold; + color: rgba(229, 15, 0, 1); +} + +.tab-bar .select-bar { + position: absolute; + left: 14rpx; + bottom: 0rpx; + width: 30rpx; + height: 8rpx; + border-radius: 4rpx; + background: #fc5555; + z-index: 1; +} + +.tab-bar .tab0.select-bar { + left: calc(12.5% - 15rpx); + transition: left 0.3s linear; +} + +.tab-bar .tab1.select-bar { + left: calc(37.5% - 15rpx); + transition: left 0.3s linear; +} + +.tab-bar .tab2.select-bar { + left: calc(62.5% - 15rpx); + transition: left 0.3s linear; +} + +.tab-bar .tab3.select-bar { + left: calc(87.5% - 15rpx); + transition: left 0.3s linear; +} + +.tab-bar .hover-tab { + background: #f7f7f7; } \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.js b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.js new file mode 100644 index 0000000..d4c79d2 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.js @@ -0,0 +1,39 @@ +const app = getApp() + +Component({ + data: { + imageUrl: '../../../../images/uploadImg3.png' + }, + properties: { + activityItemObj: { + type: Object, + value: {} + }, + actType: { + type: String, + value: 'tab0' + } + }, + lifetimes: { + attached () { + + } + }, + pageLifetimes: { + show () { + + } + }, + methods: { + // 预览图片 + previewImage (e) { + app.globalData.previewImage = true + wx.previewImage({ + urls: [e.currentTarget.dataset.src] + }) + }, + toDetail (e) { + this.triggerEvent('toDetail', {detailId: e.currentTarget.dataset.detailid, actCurrentState: e.currentTarget.dataset.state}) + } + } +}) \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.json b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.json new file mode 100644 index 0000000..32640e0 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxml b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxml new file mode 100644 index 0000000..7df4fee --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxml @@ -0,0 +1,31 @@ + + + + {{activityItemObj.actCurrentState == 0 ? '报名中' : activityItemObj.actCurrentState == 1 ? '已报满' : activityItemObj.actCurrentState == 2 ? '未开始' : activityItemObj.actCurrentState == 3 ? '进行中' : activityItemObj.actCurrentState == 4 ? '已结束' : activityItemObj.actCurrentState == 5 ? '已取消' : ''}} + + + {{activityItemObj.title}} + + + + 活动时间： + + + {{activityItemObj.actStartTime}}至 + {{activityItemObj.actEndTime}} + + + + + + 活动地点： + + {{activityItemObj.actAddress}} + + + 活动名额 {{activityItemObj.actQuotaCategory == 0 ? '不限' : activityItemObj.actQuota + '人'}} + 已报名 {{activityItemObj.signupNum}}人 + + + + \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxss b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxss new file mode 100644 index 0000000..19a6ccd --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/activityItem/activityItem.wxss @@ -0,0 +1,148 @@ +.activity-item { + width: 100%; + height: 290rpx; + border-radius: 16rpx; + box-sizing: border-box; + padding: 20rpx; + display: flex; + background: #fff; + margin-bottom: 20rpx; +} + +.activity-item .left { + width: 220rpx; + height: 246rpx; + border-radius: 16rpx; + overflow: hidden; + margin-right: 20rpx; + position: relative; +} + +.activity-item .left .activity-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.activity-item .left .user-state { + position: absolute; + left: 0; + top: 0; + font-size: 24rpx; + color: #fff; + width: 92rpx; + height: 36rpx; + line-height: 36rpx; + text-align: center; + border-radius: 16rpx 0; + background: #d1d1d1; +} + +.activity-item .right { + width: calc(100% - 240rpx); + position: relative; +} + +.activity-item .right .signed-logo { + width: 174rpx; + height: 118rpx; + object-fit: cover; + right: 0; + top: 20rpx; + position: absolute; +} + +.activity-item .right .title { + font-size: 36rpx; + color: #333; + line-height: 44rpx; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + white-space: normal !important; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.activity-item .right .activity-time { + font-size: 24rpx; + color: #a8a8a8; + line-height: 34rpx; + display: flex; +} + +.activity-item .right .activity-time .activity-time-title { + display: flex; + align-items: center; + width: 150rpx; + height: 34rpx; +} + +.activity-item .right .activity-time .activity-time-title image { + width: 24rpx; + height: 24rpx; + object-fit: cover; + margin-right: 4rpx; +} + +.activity-item .right .activity-time .activity-time-content { + width: calc(100% - 150rpx); +} + +.activity-item .right .activity-address { + font-size: 24rpx; + color: #a8a8a8; + line-height: 34rpx; + display: flex; + align-items: center; +} + +.activity-item .right .activity-address .activity-address-title { + display: flex; + align-items: center; + width: 150rpx; +} + +.activity-item .right .activity-address .activity-address-title image { + width: 24rpx; + height: 24rpx; + object-fit: cover; + margin-right: 4rpx; +} + +.activity-item .right .activity-address .activity-address-content { + width: calc(100% - 150rpx); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.activity-item .right .activity-info { + display: flex; + align-items: center; + margin-top: 20rpx; +} + +.activity-item .right .activity-info .num { + height: 42rpx; + line-height: 42rpx; + background: rgba(217, 217, 217, 0.4); + text-align: center; + font-size: 26rpx; + color: #666; + border-radius: 21rpx; + margin-right: 10rpx; + padding: 0 20rpx; +} + +.activity-item .right .activity-info .already { + height: 42rpx; + line-height: 42rpx; + text-align: center; + background: rgba(252, 85, 85, 0.1); + color: #fc5555; + font-size: 26rpx; + border-radius: 21rpx; + padding: 0 20rpx; +} diff --git a/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.js b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.js new file mode 100644 index 0000000..a8352da --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.js @@ -0,0 +1,5 @@ +Component({ + data: { + + } +}) \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.json b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.json new file mode 100644 index 0000000..32640e0 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxml b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxml new file mode 100644 index 0000000..31e866b --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxss b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxss new file mode 100644 index 0000000..65d13d0 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/components/preloadActivityItem/preloadActivityItem.wxss @@ -0,0 +1,61 @@ +.preload-activity-item { + width: 100%; + height: 290rpx; + border-radius: 16rpx; + box-sizing: border-box; + padding: 20rpx; + display: flex; + background: #fff; + margin-bottom: 20rpx; +} +.preload-activity-item .left { + width: 220rpx; + height: 246rpx; + border-radius: 16rpx; + overflow: hidden; + margin-right: 20rpx; + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100%; +} +.preload-activity-item .right { + width: calc(100% - 240rpx); +} +.preload-activity-item .right .title { + height: 44rpx; + margin-top: 20rpx; + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100%; +} +.preload-activity-item .right .activity-time { + height: 34rpx; + margin-top: 20rpx; + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100%; +} +.preload-activity-item .right .activity-address { + height: 34rpx; + margin-top: 20rpx; + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100%; +} +.preload-activity-item .right .activity-info { + margin-top: 20rpx; + height: 44rpx; + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100%; +} + +@keyframes loading { + 0% { + background-position: 100% 50% + } + + 100% { + background-position: 0 50% + } +} \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/leaderboardNew.js b/subpages/heart/pages/leaderboardNew/leaderboardNew.js new file mode 100644 index 0000000..ce7d6a3 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/leaderboardNew.js @@ -0,0 +1,106 @@ +// subpages/heart/pages/leaderboardNew/leaderboardNew.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + selectTab: 'tab1', + typeList: [{ //排名方式：0-周，1-月 + type: '0', + name: '审核中', + select: true + }, + { + type: '1', + name: '已通过', + select: false + }, + { + type: '2', + name: '未通过', + select: false + },{ + type: '3', + name: '已结束', + select: false + } + ], + }, + // tab 切换 + onTabChange(e) { + this.setData({ + selectTab: e.currentTarget.dataset.tab, + }) + }, + // 参与记录切换 + onButtonChange: function (e) { + const list = this.data.typeList + let that = this; + list.forEach(item => { + if (item.type === e.currentTarget.dataset.type) { + item.select = true + } else { + item.select = false + } + }) + that.setData({ + typeList: list, + }) + }, + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + } +}) \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/leaderboardNew.json b/subpages/heart/pages/leaderboardNew/leaderboardNew.json new file mode 100644 index 0000000..0393dc9 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/leaderboardNew.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "志愿积分" +} \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/leaderboardNew.wxml b/subpages/heart/pages/leaderboardNew/leaderboardNew.wxml new file mode 100644 index 0000000..953686e --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/leaderboardNew.wxml @@ -0,0 +1,21 @@ + + + 积分排行 + + 参与纪录 + + + + + + + + + + + + + + \ No newline at end of file diff --git a/subpages/heart/pages/leaderboardNew/leaderboardNew.wxss b/subpages/heart/pages/leaderboardNew/leaderboardNew.wxss new file mode 100644 index 0000000..0822262 --- /dev/null +++ b/subpages/heart/pages/leaderboardNew/leaderboardNew.wxss @@ -0,0 +1,95 @@ +page { + background: #f7f7f7; +} + +.tab-bar { + width: 100%; + height: 90rpx; + background: #fff; + display: flex; + justify-content: space-around; + position: relative; +} + +.tab-bar .tab { + flex: 1; + height: 90rpx; + line-height: 90rpx; + text-align: center; + width: 50%; + font-size: 32rpx; + font-weight: 500; + color: rgba(153, 153, 153, 1); +} + +.tab-bar .select-tab { + color: #E50F00; + font-size: 32rpx; + font-weight: bold; +} + +.tab-bar .select-bar { + width: 40rpx; + height: 8rpx; + border-radius: 5rpx; + background: #E50F00; + position: absolute; + bottom: 0rpx; +} + +.tab-bar .select-bar.tab1 { + left: calc(25% - 15rpx); + transition: left linear 0.4s; +} + +.tab-bar .select-bar.tab2 { + left: calc(75% - 15rpx); + transition: left linear 0.4s; +} + +/* 参与记录 */ +.tab-item { + background: #fff; + height: 80rpx; + width: calc(100% - 60rpx); + padding: 0 30rpx; + display: flex; + align-items: center; +} + +.tab-item button { + position: relative; + display: inline-block; + /* margin: 0 42rpx 0 0; */ + flex-shrink: 0; + /* width: auto !important; */ + width: 164rpx; + height: 52rpx; + min-height: 52rpx !important; + line-height: 52rpx; + border-radius: 30rpx; + padding: 0 20rpx; +} + +button::after { + border: 0rpx; +} + +.tab-item .font-w { + font-size: 30rpx; + font-weight: bold; + color: #fff; + background: linear-gradient(to right, #e95027, #db1a1f); +} + +.tab-item .font-b { + background: #fff; + font-size: 30rpx; + font-weight: 500; + color: #333; + border: 1rpx solid #dbdbdb; +} + +.tab-item .hover-btn { + box-shadow: 0px 0px 10px 0px rgba(188, 0, 5, 0.22); +} \ No newline at end of file