6 changed files with 312 additions and 68 deletions
-
249components/zwy-calendar/zwy-calendar.vue
-
111pages/goodsDetail/index.vue
-
8pages/index/index.vue
-
9uview-ui/components/u-column-notice/u-column-notice.vue
-
1uview-ui/components/u-th/u-th.vue
-
2uview-ui/theme.scss
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<view class="calendar-box"> |
|||
<view class="week"> |
|||
<view :style="'color:'+(weeks==weeked?bgweek:'')+';'" v-for="weeks in weekArr">{{weeks}}</view> |
|||
</view> |
|||
<view class="day"> |
|||
<view :class="[{'checkday':days.date==''},{'choose':days.date==localDate}]" |
|||
:style="'background:'+(days.date==localDate?bgday:'')+';'" v-for="(days,index) in dayArr" :key="index"> |
|||
{{days.day}} |
|||
<view :class="[{'circle':days.flag},{'repair':days.day<day},{'sign':days.day==day}]"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
lang: { |
|||
type: String, |
|||
default: 'zh' |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: 'calendar' |
|||
}, |
|||
checkDate: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
bgweek: { |
|||
type: String, |
|||
default: '#1998FE' |
|||
}, |
|||
bgday: { |
|||
type: String, |
|||
default: '#1998FE' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
weeked: '', // 今天周几 |
|||
dayArr: [], // 当前月每日 |
|||
localDate: '', // 今天日期 |
|||
day: new Date().getDate(), // 当前日 |
|||
year: new Date().getFullYear(), // 当前年 |
|||
month: new Date().getMonth() + 1, // 当前月 |
|||
weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周 |
|||
} |
|||
}, |
|||
mounted() { |
|||
let that = this; |
|||
// 初始日期 |
|||
that.initDate(); |
|||
// 今天日期 |
|||
that.localDate = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(that.day); |
|||
// 中英切换 |
|||
if (that.lang != 'zh') that.weekArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; |
|||
// 今天周几 |
|||
that.weeked = that.weekArr[new Date().getDay()]; |
|||
// 签到功能 |
|||
if (that.type != 'calendar') { |
|||
for (let i in that.dayArr) { |
|||
that.$set(that.dayArr[i], 'flag', false); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 选择年月 |
|||
changeDate(e) { |
|||
let that = this; |
|||
that.year = parseInt(e.detail.value.split('-')[0]); |
|||
that.month = parseInt(e.detail.value.split('-')[1]); |
|||
that.initDate(); |
|||
}, |
|||
// 点击签到 |
|||
signToday(obj, index) { |
|||
let that = this; |
|||
// 指定签到类型可访问 |
|||
if (that.type == 'calendar') return; |
|||
// 限制本月可进行签到 |
|||
if ((new Date().getMonth() + 1) != parseInt(obj.date.split('-')[1])) return; |
|||
// 禁用非本月点击签到且限制签到日期小于等于本日 |
|||
if (obj.date != '' && obj.day <= that.day) { |
|||
// 开启已签到提醒 |
|||
if (that.dayArr[index].flag) { |
|||
uni.showToast({ |
|||
title: '已签到', |
|||
icon: 'none' |
|||
}); |
|||
} else { |
|||
uni.showToast({ |
|||
title: that.day > obj.day ? '补签成功' : '签到成功', |
|||
icon: 'success' |
|||
}); |
|||
that.$set(that.dayArr[index], 'flag', true); |
|||
that.$emit('change', obj.date); |
|||
} |
|||
} |
|||
}, |
|||
// 初始化日期 |
|||
initDate() { |
|||
let that = this; |
|||
that.dayArr = []; |
|||
// 当前月总天数 |
|||
let totalDay = new Date(that.year, that.month, 0).getDate(); |
|||
// 遍历总天数将日期逐个添加至数组 |
|||
for (let i = 1; i <= totalDay; i++) { |
|||
// 得到需补充天数 |
|||
let value = (new Date(that.year, that.month - 1, i)).getDay(); |
|||
// 补充前面空白日期 |
|||
if (i == 1 && value != 0) that.addBefore(value); |
|||
// 添加本月日期 |
|||
let obj = {}; |
|||
obj.date = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(i); |
|||
obj.day = i; |
|||
that.dayArr.push(obj); |
|||
// 补充后面空白日期 |
|||
console.log('当前越日期',that.dayArr) |
|||
if (i == totalDay && value != 6) that.addAfter(value); |
|||
} |
|||
}, |
|||
// 补充前面空白日期 |
|||
addBefore(value) { |
|||
let that = this; |
|||
let totalDay = new Date(that.year, that.month - 1, 0).getDate(); |
|||
for (let i = 0; i < value; i++) { |
|||
let obj = {}; |
|||
obj.date = ''; |
|||
obj.day = totalDay - (value - i) + 1; |
|||
that.dayArr.push(obj); |
|||
} |
|||
}, |
|||
// 补充后空白日期 |
|||
addAfter(value) { |
|||
let that = this; |
|||
for (let i = 0; i < (6 - value); i++) { |
|||
let obj = {}; |
|||
obj.date = ''; |
|||
obj.day = i + 1; |
|||
that.dayArr.push(obj); |
|||
} |
|||
}, |
|||
// 格式化日期位数 |
|||
formatNum(num) { |
|||
return num < 10 ? ('0' + num) : num; |
|||
}, |
|||
// 上一个月 |
|||
lastMonth() { |
|||
let that = this; |
|||
if (that.month == 1) { |
|||
that.year -= 1; |
|||
that.month = 12; |
|||
} else { |
|||
that.month -= 1; |
|||
} |
|||
that.initDate(); |
|||
}, |
|||
// 下一个月 |
|||
nextMonth() { |
|||
let that = this; |
|||
if (that.month == 12) { |
|||
that.year += 1; |
|||
that.month = 1; |
|||
} else { |
|||
that.month += 1; |
|||
} |
|||
that.initDate(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.calendar-box { |
|||
width: 100%; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.calendar-box, |
|||
.month, |
|||
.week, |
|||
.day { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.month, |
|||
.week, |
|||
.day { |
|||
width: 700rpx; |
|||
} |
|||
|
|||
.month { |
|||
margin: 30rpx 0; |
|||
position: relative; |
|||
} |
|||
|
|||
.picker { |
|||
width: 160rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
top: 20rpx; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.day { |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.week>view, |
|||
.day>view { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
text-align: center; |
|||
position: relative; |
|||
line-height: 100rpx; |
|||
} |
|||
|
|||
.checkday { |
|||
color: #999; |
|||
} |
|||
|
|||
.choose { |
|||
color: #FFFFFF; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.circle { |
|||
width: 10rpx; |
|||
height: 10rpx; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.sign { |
|||
background-color: #0089fe; |
|||
} |
|||
|
|||
.repair { |
|||
background-color: #1998FE; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue