lihenian
5 years ago
22 changed files with 300 additions and 182 deletions
@ -0,0 +1,7 @@ |
|||||
|
const request = require('../utils/request') |
||||
|
/** |
||||
|
* 获取欢迎页信息 |
||||
|
*/ |
||||
|
export function getStartupPage () { |
||||
|
return request.get('startup/getStartupPage') |
||||
|
} |
||||
@ -1,109 +1,78 @@ |
|||||
// pages/start/start.js
|
const app = getApp() |
||||
Page({ |
import { getStartupPage } from '../../api/index' |
||||
|
|
||||
/** |
Page({ |
||||
* 页面的初始数据 |
|
||||
*/ |
|
||||
data: { |
data: { |
||||
countDownNum: 5, |
deviceHeight: 0, |
||||
close: false |
countdownNum: 0, |
||||
|
bgImage: '', |
||||
|
timer: '', |
||||
|
scene: '' |
||||
}, |
}, |
||||
|
onLoad (options) { |
||||
/** |
if (options.scene) { |
||||
* 生命周期函数--监听页面加载 |
this.data.scene = options.scene |
||||
*/ |
} |
||||
onLoad: function(options) { |
this.setData({ |
||||
this.settime() |
deviceHeight: app.globalData.height |
||||
this.countDown() |
}) |
||||
|
this.getStartupPage() |
||||
}, |
}, |
||||
|
// 倒计时进入
|
||||
countDown: function() { |
countDown () { |
||||
let that = this; |
this.data.timer = setInterval(() => { |
||||
let countDownNum = that.data.countDownNum; //获取倒计时初始值
|
if (this.data.countdownNum > 1) { |
||||
//如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
|
this.data.countdownNum-- |
||||
that.setData({ |
this.setData({ |
||||
timer: setInterval(function() { //这里把setInterval赋值给变量名为timer的变量
|
countdownNum: this.data.countdownNum |
||||
//每隔一秒countDownNum就减一，实现同步
|
}) |
||||
countDownNum--; |
} else { |
||||
//然后把countDownNum存进data，好让用户知道时间在倒计着
|
clearInterval(this.data.timer) |
||||
that.setData({ |
if (this.data.scene) { |
||||
countDownNum: countDownNum |
wx.reLaunch({ |
||||
|
url: `/pages/indexNew/indexNew?scene=${this.data.scene}` |
||||
}) |
}) |
||||
//在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
|
} else { |
||||
if (countDownNum == 0) { |
wx.reLaunch({ |
||||
//这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
|
url: '/pages/indexNew/indexNew' |
||||
//因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
|
}) |
||||
clearInterval(that.data.timer); |
} |
||||
//关闭定时器之后，可作其他处理codes go here
|
|
||||
} |
} |
||||
}, 1000) |
}, 1000) |
||||
}) |
|
||||
}, |
}, |
||||
|
// 立即进入
|
||||
settime: function() { |
immeEnter () { |
||||
let that = this |
clearInterval(this.data.timer) |
||||
setTimeout(function() { |
if (this.data.scene) { |
||||
if (!that.data.close) { |
wx.reLaunch({ |
||||
wx.redirectTo({ |
url: `/pages/indexNew/indexNew?scene=${this.data.scene}` |
||||
url: `../indexNew/indexNew` |
}) |
||||
|
} else { |
||||
|
wx.reLaunch({ |
||||
|
url: '/pages/indexNew/indexNew' |
||||
}) |
}) |
||||
} |
} |
||||
}, 5000) |
|
||||
}, |
}, |
||||
bindGetUserInfo: function(e) { |
// 获取启动页信息
|
||||
|
getStartupPage () { |
||||
|
wx.showLoading({ |
||||
|
title: '获取中...' |
||||
|
}) |
||||
|
getStartupPage().then(res => { |
||||
|
wx.hideLoading() |
||||
|
console.log('获取启动页信息', res) |
||||
|
if (res.data.imgUrl) { |
||||
this.setData({ |
this.setData({ |
||||
close: true |
bgImage: res.data.imgUrl, |
||||
|
countdownNum: res.data.duration |
||||
}) |
}) |
||||
wx.redirectTo({ |
this.countDown() |
||||
url: `../indexNew/indexNew` |
} else { |
||||
|
this.immeEnter() |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
wx.hideLoading() |
||||
|
this.immeEnter() |
||||
}) |
}) |
||||
}, |
|
||||
/** |
|
||||
* 生命周期函数--监听页面初次渲染完成 |
|
||||
*/ |
|
||||
onReady: function() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow: function() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面隐藏 |
|
||||
*/ |
|
||||
onHide: function() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面卸载 |
|
||||
*/ |
|
||||
onUnload: function() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面相关事件处理函数--监听用户下拉动作 |
|
||||
*/ |
|
||||
onPullDownRefresh: function() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面上拉触底事件的处理函数 |
|
||||
*/ |
|
||||
onReachBottom: function() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 用户点击右上角分享 |
|
||||
*/ |
|
||||
onShareAppMessage: function() { |
|
||||
|
|
||||
} |
} |
||||
}) |
}) |
||||
@ -1,6 +1,4 @@ |
|||||
{ |
{ |
||||
"navigationBarTitleText": "e锦水", |
"navigationBarTitleText": "欢迎页", |
||||
"navigationStyle": "custom", |
"navigationStyle": "custom" |
||||
"navigationBarTextStyle": "black", |
|
||||
"usingComponents": {} |
|
||||
} |
} |
||||
@ -1,17 +1,16 @@ |
|||||
<view class="page"> |
<view class="welcome"> |
||||
<image class="image-one" src="https://epdc-kongcun.elinkit.com.cn/epdcFile/M00/00/05/rBAB716njY2ADRNbAAX8Nk6dBkI229.png" mode="scaleToFill"></image> |
<view class="bg-img"> |
||||
<view class="logo-style"> |
<image class="bgimg" src="{{bgImage}}"/> |
||||
<image class="image-two" src="https://epdc-kongcun.elinkit.com.cn/epdcFile/M00/00/05/rBAB716njbGAMRwZAAFzEo6DMTQ932.png" mode="scaleToFill"></image> |
|
||||
</view> |
</view> |
||||
|
<view class="content" style="height: calc(100vh - {{deviceHeight}}px - 100rpx); top: calc({{deviceHeight}}px + 100rpx)"> |
||||
|
|
||||
<view class="time"> |
<view class="countdown" wx:if="countdownNum > 0"> |
||||
<view class="time-info" bindtap="bindGetUserInfo"> |
<view bindtap="immeEnter" hover-class="hover-skip" class="time">{{countdownNum}}s | 跳过</view> |
||||
<view class="left"> |
|
||||
{{countDownNum}}s |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
跳过 |
|
||||
</view> |
|
||||
</view> |
</view> |
||||
|
|
||||
|
<!-- <view class="imme-enter"> |
||||
|
<button hover-class="hover-btn" bindtap="immeEnter">立即进入</button> |
||||
|
</view> --> |
||||
|
|
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
@ -1,65 +1,81 @@ |
|||||
.page { |
page { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100vh; |
||||
position: relative; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
z-index: 1000; |
|
||||
} |
} |
||||
|
.welcome { |
||||
.image-one { |
|
||||
position: absolute; |
|
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100vh; |
||||
|
background: #fff; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
} |
} |
||||
|
.welcome .bg-img { |
||||
.logo-style { |
|
||||
width: 100%; |
width: 100%; |
||||
height: 220rpx; |
height: 100vh; |
||||
margin-top: 455rpx; |
|
||||
position: absolute; |
position: absolute; |
||||
display: flex; |
left: 0; |
||||
justify-content: center; |
top: 0; |
||||
} |
} |
||||
|
.welcome .bg-img image { |
||||
.logo-style .image-two { |
width: 100%; |
||||
height: 220rpx; |
height:100%; |
||||
width: 500rpx; |
|
||||
} |
} |
||||
|
|
||||
.time { |
.welcome .content { |
||||
margin-top: 170rpx; |
width: 100%; |
||||
position: absolute; |
position: relative; |
||||
width: calc(100% - 28rpx); |
z-index: 10; |
||||
height: 60rpx; |
|
||||
display: flex; |
display: flex; |
||||
flex-direction: row-reverse; |
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
align-items: center; |
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
padding-bottom: 100rpx; |
||||
} |
} |
||||
|
.welcome .content .countdown { |
||||
.time .time-info { |
width: 100%; |
||||
|
height: 50rpx; |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
justify-content: flex-end; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
.welcome .content .countdown .time { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
width: 150rpx; |
width: 150rpx; |
||||
height: 60rpx; |
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
background: rgba(255,255,255,0.5); |
||||
border-radius: 30rpx; |
border-radius: 30rpx; |
||||
background: #fff; |
} |
||||
opacity: 0.6; |
.welcome .content .countdown .hover-skip { |
||||
|
background: rgba(255,255,255,0.2); |
||||
|
} |
||||
|
|
||||
|
.imme-enter { |
||||
|
width: 100%; |
||||
|
height: 84rpx; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
|
justify-content: center; |
||||
} |
} |
||||
|
.imme-enter button { |
||||
.time .time-info .left { |
background-image: linear-gradient(to right , #ff2d29, #ff4e4e); |
||||
width: 50%; |
height:84rpx; |
||||
height: 40rpx; |
line-height: 84rpx; |
||||
line-height: 40rpx; |
text-align:center; |
||||
font-size: 30rpx; |
color: #fff; |
||||
text-align: center; |
font-size: 36rpx; |
||||
border-right: 1rpx solid black; |
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
outline: 0; |
||||
|
font-weight: normal; |
||||
|
width: 560rpx; |
||||
} |
} |
||||
|
.imme-enter .hover-btn { |
||||
.time .time-info .right { |
background: red; |
||||
width: 50%; |
|
||||
height: 40rpx; |
|
||||
line-height: 40rpx; |
|
||||
font-size: 25rpx; |
|
||||
text-align: center; |
|
||||
} |
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
const api = require('../../../../utils/api') |
||||
|
import { getTimestamp } from '../../../../utils/common' |
||||
|
Page({ |
||||
|
data: { |
||||
|
loadMoreType: 'none', |
||||
|
loadMoreVisible: false, |
||||
|
newsList: [], |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
}, |
||||
|
onLoad () { |
||||
|
this.getNewsList() |
||||
|
}, |
||||
|
onReachBottom () { |
||||
|
this.setData({ |
||||
|
loadMoreVisible: true |
||||
|
}) |
||||
|
if (this.data.loadMoreType === 'loading') { |
||||
|
this.data.pageNo += 1 |
||||
|
this.getNewsList() |
||||
|
} |
||||
|
}, |
||||
|
getNewsList: function() { |
||||
|
let that = this |
||||
|
let para = { |
||||
|
pageIndex: this.data.pageNo, |
||||
|
pageSize: this.data.pageSize, |
||||
|
timestamp: getTimestamp() |
||||
|
} |
||||
|
api.newsList(para).then(function(res) { |
||||
|
that.setData({ |
||||
|
first: false, |
||||
|
newsList: that.data.newsList.concat(res.data), |
||||
|
loadMoreType: res.data.length === that.data.pageSize ? 'loading' : 'none', |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
that.setData({ |
||||
|
loadMoreType: 'none', |
||||
|
newsList: [] |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "新闻列表", |
||||
|
"usingComponents": { |
||||
|
"load-more": "../../../../components/loadMore/loadMore" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
<view class="list-all"> |
||||
|
<view class="list-item" wx:for-index="index" wx:for-item="item" wx:key="index" wx:for="{{newsList}}" data-id="{{item.id}}" bindtap="toDetail"> |
||||
|
<view class="item-info"> |
||||
|
<view class="item-info-name">{{item.newsTitle}} |
||||
|
</view> |
||||
|
<view class="item-info-time"> |
||||
|
<text>{{item.deptName}}-{{item.newsCategoryName}}</text> |
||||
|
<text>{{filter.formatTime(item.newsStartTime, 'yyyy-MM-dd')}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<image src="{{item.newsImageUrl}}"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<load-more loadMoreType="{{loadMoreType}}" loadMoreVisible="{{loadMoreVisible}}"></load-more> |
||||
|
|
||||
@ -0,0 +1,64 @@ |
|||||
|
page { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
background: #fff; |
||||
|
min-height: 100vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
/* 列表样式 */ |
||||
|
.list-all { |
||||
|
width: calc(100% - 48rpx); |
||||
|
margin-left: 21rpx; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item { |
||||
|
border-bottom: 1rpx solid #eaeaea; |
||||
|
padding: 41rpx 18rpx 31rpx 15rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item:last-child { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item .item-info { |
||||
|
width: calc(100% - 220rpx); |
||||
|
height: 146rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item .item-info .item-info-name { |
||||
|
width: calc(100% - 47rpx); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(63, 63, 63, 1); |
||||
|
line-height: 50rpx; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item .item-info .item-info-time { |
||||
|
width: calc(100% - 23rpx); |
||||
|
height: 22rpx; |
||||
|
position: absolute; |
||||
|
bottom: 5rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item .item-info .item-info-time text { |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(170, 170, 170, 1); |
||||
|
line-height: 22rpx; |
||||
|
} |
||||
|
|
||||
|
.list-all .list-item image { |
||||
|
width: 220rpx; |
||||
|
height: 146rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
Loading…
Reference in new issue