12 changed files with 251 additions and 607 deletions
-
324components/zwy-calendar/zwy-calendar.vue
-
62pages/goodsDetail/index.vue
-
416pages/order/confirm_order.vue
-
53pages/order/order_details.vue
-
BINstatic/defult_code.png
-
BINstatic/images/jieson.png
-
BINstatic/images/other.png
-
BINstatic/images/plane_ticket.png
-
BINstatic/images/strategy.png
-
BINstatic/images/travel.png
-
BINstatic/logo.png
-
3uview-ui/components/u-calendar/u-calendar.vue
@ -1,324 +0,0 @@ |
|||||
<template> |
|
||||
<view class="calendar-box"> |
|
||||
<view class="month lf-p-l-10 lf-p-r-10"> |
|
||||
<view @click="lastMonth" v-if="havePre">上月</view> |
|
||||
<view>{{year}}年{{month}}月</view> |
|
||||
<view @click="nextMonth" v-if="haveNext">下月</view> |
|
||||
</view> |
|
||||
<view class="week"> |
|
||||
<view v-for="weeks in weekArr">{{weeks}}</view> |
|
||||
</view> |
|
||||
<view class="day"> |
|
||||
<view :class="[{'checkday':days.date==''},{'choose':days.flag==true}]" |
|
||||
:style="'background:'+(days.flag==true?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' |
|
||||
}, |
|
||||
startTime: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
endTime: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
weeked: '', // 今天周几 |
|
||||
dayArr: [], // 当前月每日 |
|
||||
localDate: '', // 今天日期 |
|
||||
day: new Date().getDate(), // 当前日 |
|
||||
year: new Date().getFullYear(), // 当前年 |
|
||||
month: new Date().getMonth() + 1, // 当前月 |
|
||||
weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周 |
|
||||
selfDays: 0, |
|
||||
havePre: false, |
|
||||
haveNext: false |
|
||||
} |
|
||||
}, |
|
||||
onShow() { |
|
||||
|
|
||||
}, |
|
||||
mounted() { |
|
||||
let that = this; |
|
||||
that.dateDiff(that.startTime,that.endTime); |
|
||||
// 初始日期 |
|
||||
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) { |
|
||||
let chooseList = [] |
|
||||
if(that.selfDays) { |
|
||||
var dataStart = that.startTime.split('-'); |
|
||||
var endStart = that.endTime.split('-'); |
|
||||
let numberStart = Number(dataStart[2]) |
|
||||
let nowMonth = new Date().getMonth() + 1; |
|
||||
let splitStartMonth = dataStart[1]; |
|
||||
let splitEndMonth = endStart[1]; |
|
||||
console.log('当前月',nowMonth) |
|
||||
console.log('传来的月份',that.month) |
|
||||
if(that.month < nowMonth) { |
|
||||
console.log('小于当前月') |
|
||||
this.havePre = true |
|
||||
}else if(splitEndMonth > nowMonth){ |
|
||||
console.log('大于当前月') |
|
||||
this.haveNext = true |
|
||||
} |
|
||||
var totalDays = Number(that.selfDays) + Number(dataStart[2]); |
|
||||
for(let j = numberStart;j < totalDays;j++) { |
|
||||
if(that.dayArr[i].day == j && that.dayArr[i].date) { |
|
||||
that.$set(that.dayArr[i], 'flag', true); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// 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); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
dateDiff(sDate1,sDate2) { |
|
||||
var aDate, oDate1, oDate2, iDays; |
|
||||
aDate = sDate1.split('-'); |
|
||||
console.log('addate',aDate[1]) |
|
||||
if(aDate[1] == '01') { |
|
||||
this.month = 1 |
|
||||
}else if (aDate[1] == '02') { |
|
||||
this.month = 2 |
|
||||
}else if (aDate[1] == '03') { |
|
||||
this.month = 3 |
|
||||
}else if (aDate[1] == '04') { |
|
||||
this.month = 4 |
|
||||
}else if (aDate[1] == '05') { |
|
||||
this.month = 5 |
|
||||
}else if (aDate[1] == '06') { |
|
||||
this.month = 6 |
|
||||
}else if (aDate[1] == '07') { |
|
||||
this.month = 7 |
|
||||
}else if (aDate[1] == '08') { |
|
||||
this.month = 8 |
|
||||
}else if (aDate[1] == '09') { |
|
||||
this.month = 9 |
|
||||
}else{ |
|
||||
this.month = Number(aDate[1]) |
|
||||
} |
|
||||
if(aDate[1]) |
|
||||
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); |
|
||||
aDate = sDate2.split('-'); |
|
||||
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); |
|
||||
iDays = parseInt(Math.abs(oDate1 - oDate2) /1000/60/60/24); |
|
||||
this.selfDays = iDays+1; |
|
||||
return iDays + 1; |
|
||||
}, |
|
||||
// 初始化日期 |
|
||||
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); |
|
||||
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> |
|
||||
|
Before Width: 430 | Height: 430 | Size: 74 KiB |
|
Before Width: 40 | Height: 40 | Size: 1.4 KiB |
|
Before Width: 41 | Height: 41 | Size: 1.1 KiB |
|
Before Width: 41 | Height: 40 | Size: 1.6 KiB |
|
Before Width: 40 | Height: 40 | Size: 2.1 KiB |
|
Before Width: 40 | Height: 40 | Size: 2.0 KiB |
|
Before Width: 72 | Height: 72 | Size: 3.9 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue