12 changed files with 251 additions and 607 deletions
-
324components/zwy-calendar/zwy-calendar.vue
-
62pages/goodsDetail/index.vue
-
410pages/order/confirm_order.vue
-
43pages/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