浏览代码

【添加新功能】【活动日历】【签到】

release
GL 4 年前
父节点
当前提交
a485b96a62
共有 15 个文件被更改,包括 595 次插入104 次删除
  1. +3
    -1
      app.json
  2. +188
    -89
      components/dateLsit/dateLsit.js
  3. +1
    -1
      components/dateLsit/dateLsit.json
  4. +7
    -3
      components/dateLsit/dateLsit.wxml
  5. +36
    -8
      components/dateLsit/dateLsit.wxss
  6. +77
    -0
      pages/activityCalendar/activityCalendar.js
  7. +6
    -0
      pages/activityCalendar/activityCalendar.json
  8. +36
    -0
      pages/activityCalendar/activityCalendar.wxml
  9. +109
    -0
      pages/activityCalendar/activityCalendar.wxss
  10. +71
    -0
      pages/dateLsit/dateLsit.js
  11. +6
    -0
      pages/dateLsit/dateLsit.json
  12. +10
    -0
      pages/dateLsit/dateLsit.wxml
  13. +39
    -0
      pages/dateLsit/dateLsit.wxss
  14. +2
    -2
      project.config.json
  15. +4
    -0
      utils/imgurl.js

+ 3
- 1
app.json 查看文件

@@ -67,7 +67,9 @@
"pages/tcExplain/tcExplain",
"pages/marketAtlas/marketAtlas",
"pages/shareFriend/shareFriend",
"components/dateLsit/dateLsit"
"components/dateLsit/dateLsit",
"pages/dateLsit/dateLsit",
"pages/activityCalendar/activityCalendar"
],
"subpackages": [
{


+ 188
- 89
components/dateLsit/dateLsit.js 查看文件

@@ -1,102 +1,201 @@
// components/dateLsit/dateLsit.js
Page({

/**
* 页面的初始数据
*/
data: {
week:['日','一','二','三','四','五','六'],
dateLsit:[],
year: new Date().getFullYear(),
month: new Date().getMonth()+1,
},
showDate(){//刷新日历
let thenDey = this.getThenWeek()

},

getDays(year, month){//获取每月有多少天
let tempDateArr = []
let thenDate = new Date(year, month, 0).getDate()
return thenDate
},
getLastMonth(year, month){//上一个月最后一天是多少号
if(month==1){
month =12
year = year-1
}else{
month = month-1
}
let tempDateArr = []
let thenDate = new Date(year, month, 0).getDate()
return thenDate
},
getThenWeek(year, month){//获取每个月第一天是星期几
if (month == 1) {
month = 12
year = year - 1
} else {
month = month - 1
}
let date = new Date()
date.setFullYear(year)
date.setMonth(month)
date.setDate(1)
return date.getDay()
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(this.getThenWeek(2021,3))
},

const imgurl = require("../../utils/imgurl");
Component({
/**
* 生命周期函数--监听页面初次渲染完成
* 组件的属性列表
*/
onReady: function () {

properties: {
activityStyle: String,
allFlag:Boolean,
},

/**
* 生命周期函数--监听页面显示
* 组件的初始数据
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

data: {
week: ['日', '一', '二', '三', '四', '五', '六'],
dateLsit: [],
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
yearFlgh: new Date().getFullYear(),//当前年
monthFlgh: new Date().getMonth() + 1,//当前月
dey: new Date().getDate(),
thendata: [], //当前这一周的数组
xiala: imgurl.concealBnt.url,
switchFlag:true,
},

/**
* 生命周期函数--监听页面卸载
* 组件的方法列表
*/
onUnload: function () {

methods: {
switchs(){
let temp = this.data.switchFlag
this.setData({
switchFlag:!temp
})
console.log(this.data.switchFlag)
},
showDate(year, month) { //刷新日历
let thenDey = this.getThenWeek(year, month) //每个月第一天星期几
let thenMonth = this.getDays(year, month) //获取每月有多少天
let lastMonth = this.getLastMonth(year, month) //上月最后一天是多少天
let tempDey = []
let tmepArr = []
for (let i = 0; i < 42; i++) { //初始化日历数组
tempDey.splice(i, 0, "")
}
for (let i = 0; i < thenMonth; i++) { //获取当前选中月份天数
tmepArr.splice(i, 0, {
style: "0",
value: i + 1,
y:year,
m: month
})
}
tempDey.splice(thenDey, thenMonth, ...tmepArr)
for (let i = 0; i < thenDey; i++) { //添加上一个月的天数
tempDey.splice(i, 1, {
style: "1",
value: lastMonth - (thenDey - 1),
y: year,
m: month-1
})
lastMonth++
}
for (let i = 0; i < 42 - (thenDey + thenMonth); i++) { //设置下一个月
tempDey.splice(thenDey + thenMonth + i, 1, {
style: "2",
value: i + 1,
y: year,
m: month+1
})
}
this.setData({
dateLsit: tempDey
})
console.log(tempDey,"?")
},
handle(e) { //点击号数
let item = e.currentTarget.dataset.item
console.log(item)
if (item.style == '1') {
this.front()
} else if (item.style == '2') {
this.behind()
}
},
getDays(year, month) { //获取每月有多少天
let tempDateArr = []
let thenDate = new Date(year, month, 0).getDate()
return thenDate
},
getLastMonth(year, month) { //上一个月最后一天是多少号
if (month == 1) {
month = 12
year = year - 1
} else {
month = month - 1
}
let tempDateArr = []
let thenDate = new Date(year, month, 0).getDate()
return thenDate
},
getThenWeek(year, month) { //获取每个月第一天是星期几
if (month == 1) {
month = 12
year = year - 1
} else {
month = month - 1
}
let date = new Date()
date.setFullYear(year)
date.setMonth(month)
date.setDate(1)
return date.getDay()
},

front() { //前面
if (this.data.month == 1) {
let temp = this.data.switchFlag
this.setData({
switchFlag: false
})
this.setData({
year: this.data.year - 1,
month: 12
})
this.showDate(this.data.year, this.data.month)
} else {
this.setData({
month: this.data.month - 1
})
this.showDate(this.data.year, this.data.month)
}

},
behind() { //后面
let temp = this.data.switchFlag
this.setData({
switchFlag: false
})
if (this.data.month == 12) {
this.setData({
year: this.data.year + 1,
month: 1
})
this.showDate(this.data.year, this.data.month)
} else {
this.setData({
month: this.data.month + 1
})
this.showDate(this.data.year, this.data.month)
}
},
},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
let thenDey = new Date().getDay() //今天是周几
let thenDate = new Date().getDate() //今天是多少号
let tempArr = []

if (thenDey == 0) {
for (let i = 0; i < 7; i++) {
tempArr.splice(i, 1, {
thenFalg: "1",
value: thenDate,
style:"0",
y: this.data.year,
m:this.data.month
})
thenDate++
}

} else {
let temp = new Date().getDay() //今天是周几
let tmpeDey = new Date().getDate() //今天是多少号
for (let i = 0; i <= temp; i++) {
tempArr.splice(i, 0, {
style: "0", value: thenDate - thenDey, y: this.data.year,
m: this.data.month} )
thenDey--
}
for (let i = temp + 1; i < 7; i++) {
tmpeDey++
tempArr.splice(i, 0, {
style: "0", value: tmpeDey, y: this.data.year,
m: this.data.month} )

}
}
this.setData({
thendata: tempArr
})
console.log(this.data.thendata, "?????")
this.showDate(this.data.year, this.data.month)
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

+ 1
- 1
components/dateLsit/dateLsit.json 查看文件

@@ -1,3 +1,3 @@
{
"usingComponents": {}
"component": true
}

+ 7
- 3
components/dateLsit/dateLsit.wxml 查看文件

@@ -1,10 +1,14 @@
<view class="Box">
<view class="dateText_box">
<view class="dateMinus">{{'<'}}</view>
<view class="dateText">2021年1月</view>
<view class="dateAdd">{{'>'}}</view>
<view class="dateMinus" bindtap="front">{{'<'}}</view>
<view class="dateText">{{year+'年 '+month+'月 '}}</view>
<view class="dateAdd" bindtap="behind">{{'>'}}</view>
</view>
<view class="weekBox">
<view class="weekItme" wx:for="{{week}}">{{item}}</view>
<view class="{{(item.value==dey&&monthFlgh==item.m&&item.y==yearFlgh)?'today':(item.style == '0'?'weekItme':'noThen')}}" wx:for="{{allFlag?(switchFlag? thendata:dateLsit):dateLsit}}" bindtap="handle" data-item="{{item}}" style="{{activityStyle}}">{{ (item.value==dey&&monthFlgh==item.m&&item.y==yearFlgh)?'':item.value }}</view>
</view>
<view class="concealBnt" bindtap="switchs" wx:if="{{allFlag}}">
<image class="concealBnt" src="{{xiala}}"></image>
</view>
</view>

+ 36
- 8
components/dateLsit/dateLsit.wxss 查看文件

@@ -1,6 +1,6 @@
.dateText_box{
width: 60%;
margin: 60rpx auto;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
@@ -8,21 +8,21 @@
.dateMinus{
font-size: 36rpx;
float: left;
line-height: 68rpx;
line-height: 60rpx;
padding: 10rpx;
height: 68rpx;
height: 60rpx;
margin-left: 100rpx;
}
.dateText{
float: left;
padding: 10rpx;
line-height: 68rpx;
height: 68rpx;
line-height: 60rpx;
height: 60rpx;
}
.dateAdd{
padding: 10rpx;
line-height: 68rpx;
height: 68rpx;
line-height: 60rpx;
height: 60rpx;
float: left;
font-size: 36rpx;
}
@@ -40,5 +40,33 @@
float: left;
/* background-color: red;
border-radius: 50%; */

}
.noThen{
height: 80rpx;
line-height: 80rpx;
width: 80rpx;
margin: 0 10rpx;
text-align: center;
float: left;
color: rgba(0, 0, 0, 0.1)
}
.today{
height: 80rpx;
line-height: 80rpx;
width: 80rpx;
margin: 0 10rpx;
text-align: center;
float: left;
color: #fff;
/* background-color: rgba(50,177,252,1); */
background-image: url('https://formall.oss-accelerate.aliyuncs.com/cimg/jinri.png');
background-size: 50rpx 50rpx;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.concealBnt{
width: 60rpx;
height: 60rpx;
/* background-color: rebeccapurple; */
margin: 0 auto;
}

+ 77
- 0
pages/activityCalendar/activityCalendar.js 查看文件

@@ -0,0 +1,77 @@
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
const Http = require("../../utils/HttpBasics");
const config = require("../../config/config");
let app = getApp();
Page({

/**
* 页面的初始数据
*/
data: {
navigationBarHeight,
activityStyle: '',//选中当前日历样式
hideFlag:false,//遮罩成

},
setHide(){//设置遮罩成
this.setData({
hideFlag:!this.data.hideFlag
})
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

+ 6
- 0
pages/activityCalendar/activityCalendar.json 查看文件

@@ -0,0 +1,6 @@
{
"usingComponents": {
"navbar": "../../../components/navbar/navbar",
"detelsit": "../../../components/dateLsit/dateLsit"
}
}

+ 36
- 0
pages/activityCalendar/activityCalendar.wxml 查看文件

@@ -0,0 +1,36 @@
<navbar back home text="每日签到" background='#fff'></navbar>
<view style="height:{{navigationBarHeight}} "></view>
<view class="signDyeBox">
<view class="signDye">您已连续签到:2天 </view>
</view>
<detelsit allFlag="{{false}}"></detelsit>
<view class="singBtn" bindtap="setHide" wx:if="{{!hideFlag}}">签到领取积分</view>
<view class="guanSingBtn" wx:if="{{hideFlag}}">签到领取积分</view>
<view class="singvAwardBox">
<view class="singvLsit">
<view class="singvLsit_item_l"> 每日签到</view>
<view class="singvLsit_item_r"> 10积分</view>
<view class="getBtn">已领取</view>
</view>
</view>
<view class="singvAwardBox">
<view class="singvLsit">
<view class="singvLsit_item_l"> 每日签到</view>
<view class="singvLsit_item_r"> 10积分</view>
<view class="getBtn">已领取</view>
</view>
</view>
<view class="singvAwardBox">
<view class="singvLsit">
<view class="singvLsit_item_l"> 每日签到</view>
<view class="singvLsit_item_r"> 10积分</view>
<view class="getBtn">已领取</view>
</view>
</view>
<view class="shadeBox" catchtouchmove="true" wx:if="{{hideFlag}}">
<view class="shade">
<view class="shadeTitle">签到成功</view>
<view class="shadeNum">恭喜您已领取10积分</view>
<view class="shadeBtn" bindtap="setHide">开心收下</view>
</view>
</view>

+ 109
- 0
pages/activityCalendar/activityCalendar.wxss 查看文件

@@ -0,0 +1,109 @@
.signDyeBox{
width: 96%;
margin: 0 auto;
}
.signDye{
width: 60%;
margin: 20rpx auto;
height: 100rpx;
line-height: 100rpx;
text-align: center;
border-radius: 20rpx;
background-image: linear-gradient(to bottom right, red, yellow);
color: #fff;
}
.singBtn{
width: 66%;
height: 80rpx;
border-radius:12rpx;
text-align: center;
line-height: 80rpx;
color: #fff;
background-color: #ff6600;
margin: 40rpx auto;
}
.guanSingBtn{
width: 66%;
height: 80rpx;
border-radius:12rpx;
text-align: center;
line-height: 80rpx;
color: #fff;
background-color: gray;
margin: 40rpx auto;
}
.singvAwardBox{
text-align: center;
}
.singvLsit{
width: 80%;
overflow: hidden;
margin: 20rpx auto;
background-color: #fff;
border-radius: 12rpx;
}
.singvLsit_item_l{
width: 40%;
height: 80rpx;
border-radius: 12rpx;
line-height: 80rpx;
float: left;
}
.singvLsit_item_r{
width: 40%;
height: 80rpx;
line-height: 80rpx;
border-radius: 12rpx;
float: left;
}
.getBtn{
font-size: 28rpx;
width: 16%;
height: 60rpx;
line-height: 60rpx;
margin:10rpx 1%;
border-radius: 6rpx;
float: left;
color: #fff;
background-color: #ff6600;
}
.shadeBox{
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);

}
.shade{
width: 80%;
height: 400rpx;
background-color: #fff;
margin: 400rpx auto 0 auto;
overflow: hidden;
}
.shadeTitle{
height: 80rpx;
line-height: 80rpx;
font-size: 36rpx;
font-weight: 700;
margin: 30rpx 0 ;
text-align: center;
}
.shadeNum{
text-align: center;
height: 80rpx;
line-height: 80rpx;
}
.shadeBtn{
width: 40%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
color:#fff;
margin:60rpx auto 0 auto;
background-color: #ff6600;
border-radius: 10rpx;
}

+ 71
- 0
pages/dateLsit/dateLsit.js 查看文件

@@ -0,0 +1,71 @@
// pages/dateLsit/dateLsit.js
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
const Http = require("../../utils/HttpBasics");
const config = require("../../config/config");
let app = getApp();
Page({

/**
* 页面的初始数据
*/
data: {
navigationBarHeight,
activityStyle:'',//选中当前日历样式
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

+ 6
- 0
pages/dateLsit/dateLsit.json 查看文件

@@ -0,0 +1,6 @@
{
"usingComponents": {
"navbar": "../../../components/navbar/navbar",
"detelsit": "../../../components/dateLsit/dateLsit"
}
}

+ 10
- 0
pages/dateLsit/dateLsit.wxml 查看文件

@@ -0,0 +1,10 @@
<navbar back home text="活动日历" background='#fff'></navbar>
<view style="height:{{navigationBarHeight}} "></view>
<!-- <detelsit activityStyle=" background-image: url('https://formall.oss-accelerate.aliyuncs.com/cimg/jinri.png');background-size: 50rpx 50rpx;background-repeat: no-repeat;background-position: 50% 50%;"></detelsit> -->
<detelsit allFlag="true"></detelsit>
<view class="activityBox ">
<image class="activity"></image>
<view class="title">专题名称或活动报名名称</view>
<view class="text">报名时间:活动报名时间(如是专题,则不展示)</view>
<view class="text">活动时间:专题时间或活动报名时间</view>
</view>

+ 39
- 0
pages/dateLsit/dateLsit.wxss 查看文件

@@ -0,0 +1,39 @@
.activityBox {
width: 96%;
margin: 20rpx auto;
text-align: center;
}

.activity {
opacity: 1;
z-index: 10;
width: 640rpx;
height: 270rpx;
top: 11%;
background-color: dodgerblue;
border-radius: 20rpx;
}

.title {
text-align: left;
font-size: 18px;
font-weight: 700;
margin-left: 40rpx;
height: 60rpx;
line-height: 60rpx;
}
.Box{
background-image: linear-gradient(#cc9966, #F4F5F9);
}
.text {
line-height: 50rpx;
height: 50rpx;
text-align: left;
margin-left: 40rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 26rpx;
word-wrap: break-word;
color: rgba(0, 0, 0, 0.3)
}

+ 2
- 2
project.config.json 查看文件

@@ -63,8 +63,8 @@
"list": [
{
"id": 0,
"name": "components/dateLsit/dateLsit",
"pathName": "components/dateLsit/dateLsit",
"name": "pages/activityCalendar/activityCalendar",
"pathName": "pages/activityCalendar/activityCalendar",
"query": "",
"scene": null
},


+ 4
- 0
utils/imgurl.js 查看文件

@@ -1,5 +1,9 @@
const baseUrl = 'https://formall.oss-accelerate.aliyuncs.com/cimg/'
module.exports = {
'concealBnt':{
"url": baseUrl +'xiala.png',
"naem":''
},
'act': {
'url': baseUrl + 'act.png',
'name': ''


正在加载...
取消
保存