master
parent
7073d9ec4e
commit
16d31b49f7
@ -0,0 +1,424 @@
|
|||||||
|
<template>
|
||||||
|
<view class="calendar-wrapper">
|
||||||
|
<view class="header" v-if="headerBar">
|
||||||
|
<view class="pre" @click="changeMonth('pre')">上个月</view>
|
||||||
|
<view>{{y+'年'+formatNum(m)+'月'}}</view>
|
||||||
|
<view class="next" @click="changeMonth('next')">下个月</view>
|
||||||
|
</view>
|
||||||
|
<view class="week">
|
||||||
|
<view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
|
||||||
|
</view>
|
||||||
|
<view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
|
||||||
|
<view :style="{ top: positionTop + 'rpx' }" class="days">
|
||||||
|
<view class="item" v-for="(item, index) in dates" :key="index">
|
||||||
|
<view
|
||||||
|
class="day"
|
||||||
|
@click="selectOne(item, $event)"
|
||||||
|
:class="{
|
||||||
|
choose: choose == `${item.year}-${item.month}-${item.date}`&&item.isCurM,
|
||||||
|
nolm: !item.isCurM,
|
||||||
|
today: isToday(item.year, item.month, item.date),
|
||||||
|
isWorkDay: isWorkDay(item.year, item.month, item.date)
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ Number(item.date) }}
|
||||||
|
</view>
|
||||||
|
<view class="markDay" v-if="isMarkDay(item.year, item.month, item.date)&&item.isCurM"></view>
|
||||||
|
<!-- <view class="today-text" v-if="isToday(item.year, item.month, item.date)">今</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<image src="https://i.loli.net/2020/07/16/2MmZsucVTlRjSwK.png" mode="scaleToFill" v-if="collapsible" @click="toggle" class="weektoggle" :class="{ down: monthOpen }"></image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ren-calendar',
|
||||||
|
props: {
|
||||||
|
// 星期几为第一天(0为星期日)
|
||||||
|
weekstart: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 标记的日期
|
||||||
|
markDays: {
|
||||||
|
type: Array,
|
||||||
|
default: ()=>{
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//是否展示月份切换按钮
|
||||||
|
headerBar:{
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 是否展开
|
||||||
|
open: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
//是否可收缩
|
||||||
|
collapsible:{
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
//未来日期是否不可点击
|
||||||
|
disabledAfter: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
weektext: ['日', '一', '二', '三', '四', '五', '六'],
|
||||||
|
y: new Date().getFullYear(), // 年
|
||||||
|
m: new Date().getMonth() + 1, // 月
|
||||||
|
dates: [], // 当前月的日期数据
|
||||||
|
positionTop: 0,
|
||||||
|
monthOpen: true,
|
||||||
|
choose: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.dates = this.monthDay(this.y, this.m);
|
||||||
|
!this.open && this.toggle();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.choose = this.getToday().date;
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 顶部星期栏
|
||||||
|
weekDay() {
|
||||||
|
return this.weektext.slice(this.weekstart).concat(this.weektext.slice(0, this.weekstart));
|
||||||
|
},
|
||||||
|
height() {
|
||||||
|
return (this.dates.length / 7) * 80 + 'rpx';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatNum(num) {
|
||||||
|
let res = Number(num);
|
||||||
|
return res < 10 ? '0' + res : res;
|
||||||
|
},
|
||||||
|
getToday() {
|
||||||
|
let date = new Date();
|
||||||
|
let y = date.getFullYear();
|
||||||
|
let m = date.getMonth();
|
||||||
|
let d = date.getDate();
|
||||||
|
let week = new Date().getDay();
|
||||||
|
let weekText = ['日', '一', '二', '三', '四', '五', '六'];
|
||||||
|
let formatWeek = '星期' + weekText[week];
|
||||||
|
let today = {
|
||||||
|
date: y + '-' + this.formatNum(m + 1) + '-' + this.formatNum(d),
|
||||||
|
week: formatWeek
|
||||||
|
};
|
||||||
|
return today;
|
||||||
|
},
|
||||||
|
// 获取当前月份数据
|
||||||
|
monthDay(y, month) {
|
||||||
|
let dates = [];
|
||||||
|
let m = Number(month);
|
||||||
|
let firstDayOfMonth = new Date(y, m - 1, 1).getDay(); // 当月第一天星期几
|
||||||
|
let lastDateOfMonth = new Date(y, m, 0).getDate(); // 当月最后一天
|
||||||
|
let lastDayOfLastMonth = new Date(y, m - 2, 0).getDate(); // 上一月的最后一天
|
||||||
|
let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
|
||||||
|
let startDay = (() => {
|
||||||
|
// 周初有几天是上个月的
|
||||||
|
if (firstDayOfMonth == weekstart) {
|
||||||
|
return 0;
|
||||||
|
} else if (firstDayOfMonth > weekstart) {
|
||||||
|
return firstDayOfMonth - weekstart;
|
||||||
|
} else {
|
||||||
|
return 7 - weekstart + firstDayOfMonth;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
|
||||||
|
for (let i = 1; i <= startDay; i++) {
|
||||||
|
dates.push({
|
||||||
|
date: this.formatNum(lastDayOfLastMonth - startDay + i),
|
||||||
|
day: weekstart + i - 1 || 7,
|
||||||
|
month: m - 1 >= 0 ? this.formatNum(m - 1) : 12,
|
||||||
|
year: m - 1 >= 0 ? y : y - 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (let j = 1; j <= lastDateOfMonth; j++) {
|
||||||
|
dates.push({
|
||||||
|
date: this.formatNum(j),
|
||||||
|
day: (j % 7) + firstDayOfMonth - 1 || 7,
|
||||||
|
month: this.formatNum(m),
|
||||||
|
year: y,
|
||||||
|
isCurM: true //是否当前月份
|
||||||
|
});
|
||||||
|
}
|
||||||
|
for (let k = 1; k <= endDay; k++) {
|
||||||
|
dates.push({
|
||||||
|
date: this.formatNum(k),
|
||||||
|
day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
|
||||||
|
month: m + 1 <= 11 ? this.formatNum(m + 1) : 0,
|
||||||
|
year: m + 1 <= 11 ? y : y + 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// console.log(dates);
|
||||||
|
return dates;
|
||||||
|
},
|
||||||
|
isWorkDay(y, m, d) {
|
||||||
|
//是否工作日
|
||||||
|
let ymd = `${y}/${m}/${d}`;
|
||||||
|
let formatDY = new Date(ymd.replace(/-/g, '/'));
|
||||||
|
let week = formatDY.getDay();
|
||||||
|
if (week == 0 || week == 6) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isFutureDay(y, m, d) {
|
||||||
|
//是否未来日期
|
||||||
|
let ymd = `${y}/${m}/${d}`;
|
||||||
|
let formatDY = new Date(ymd.replace(/-/g, '/'));
|
||||||
|
let showTime = formatDY.getTime();
|
||||||
|
let curTime = new Date().getTime();
|
||||||
|
if (showTime > curTime) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 标记日期
|
||||||
|
isMarkDay(y, m, d) {
|
||||||
|
let flag = false;
|
||||||
|
for (let i = 0; i < this.markDays.length; i++) {
|
||||||
|
let dy = `${y}-${m}-${d}`;
|
||||||
|
if (this.markDays[i] == dy) {
|
||||||
|
flag = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return flag;
|
||||||
|
},
|
||||||
|
isToday(y, m, d) {
|
||||||
|
let checkD = y + '-' + m + '-' + d;
|
||||||
|
let today = this.getToday().date;
|
||||||
|
if (checkD == today) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 展开收起
|
||||||
|
toggle() {
|
||||||
|
this.monthOpen = !this.monthOpen;
|
||||||
|
if (this.monthOpen) {
|
||||||
|
this.positionTop = 0;
|
||||||
|
} else {
|
||||||
|
let index = -1;
|
||||||
|
this.dates.forEach((i, x) => {
|
||||||
|
this.isToday(i.year, i.month, i.date) && (index = x);
|
||||||
|
});
|
||||||
|
this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击回调
|
||||||
|
selectOne(i, event) {
|
||||||
|
let date = `${i.year}-${i.month}-${i.date}`;
|
||||||
|
let selectD = new Date(date).getTime();
|
||||||
|
let curTime = new Date().getTime();
|
||||||
|
let week = new Date(date).getDay();
|
||||||
|
let weekText = ['日', '一', '二', '三', '四', '五', '六'];
|
||||||
|
let formatWeek = '星期' + weekText[week];
|
||||||
|
let response = {
|
||||||
|
date: date,
|
||||||
|
week: formatWeek
|
||||||
|
};
|
||||||
|
if (!i.isCurM) {
|
||||||
|
// console.log('不在当前月范围内');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (selectD > curTime) {
|
||||||
|
if (this.disabledAfter) {
|
||||||
|
console.log('未来日期不可选');
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
this.choose = date;
|
||||||
|
this.$emit('onDayClick', response);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.choose = date;
|
||||||
|
this.$emit('onDayClick', response);
|
||||||
|
}
|
||||||
|
console.log(response);
|
||||||
|
},
|
||||||
|
//改变年月
|
||||||
|
changYearMonth(y, m) {
|
||||||
|
this.dates = this.monthDay(y, m);
|
||||||
|
this.y = y;
|
||||||
|
this.m = m;
|
||||||
|
},
|
||||||
|
changeMonth(type){
|
||||||
|
if(type=='pre'){
|
||||||
|
if (this.m + 1 == 2) {
|
||||||
|
this.m = 12;
|
||||||
|
this.y = this.y - 1;
|
||||||
|
} else {
|
||||||
|
this.m = this.m - 1;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if (this.m + 1 == 13) {
|
||||||
|
this.m = 1;
|
||||||
|
this.y = this.y + 1;
|
||||||
|
} else {
|
||||||
|
this.m = this.m + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.dates = this.monthDay(this.y, this.m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.calendar-wrapper {
|
||||||
|
color: #bbb7b7;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
|
||||||
|
.header{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 88rpx;
|
||||||
|
color: #42464A;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 2rpx solid #f2f2f2;
|
||||||
|
.pre,.next{
|
||||||
|
color: #4d7df9;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 8rpx 15rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border: 2rpx solid #dcdfe6;
|
||||||
|
}
|
||||||
|
.pre{
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
.next{
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.week {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||||
|
|
||||||
|
view {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.4s ease;
|
||||||
|
|
||||||
|
.days {
|
||||||
|
transition: top 0.3s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
width: calc(100% / 7);
|
||||||
|
|
||||||
|
.day {
|
||||||
|
font-style: normal;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 60rpx;
|
||||||
|
|
||||||
|
&.choose {
|
||||||
|
background-color: #4d7df9;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nolm {
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.isWorkDay {
|
||||||
|
color: #42464a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notSigned {
|
||||||
|
font-style: normal;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #fa7268;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.today {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #a8c0ff;
|
||||||
|
}
|
||||||
|
.workDay {
|
||||||
|
font-style: normal;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #4d7df9;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.markDay{
|
||||||
|
font-style: normal;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #fc7a64;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
height: 80rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weektoggle {
|
||||||
|
width: 85rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
position: relative;
|
||||||
|
bottom: -42rpx;
|
||||||
|
&.down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,14 +1,283 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="myPage">
|
||||||
my
|
<image class="myBG" src="/static/myBG.png" mode="widthFix"></image>
|
||||||
|
<view class="body" :style="{ 'padding-top': (indexStore.screen.total + 30)+'px' }">
|
||||||
|
<view class="userBox">
|
||||||
|
<image class="avatar" src="/static/my/avatar.png" mode="aspectFill"></image>
|
||||||
|
<view class="userRight">
|
||||||
|
<view class="nameBox">
|
||||||
|
<view class="">
|
||||||
|
<text>未登录</text>
|
||||||
|
<image class="editIcon" src="/static/edit-w.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<text class="subTitle">点击登录 查看您的会员等级</text>
|
||||||
|
</view>
|
||||||
|
<button class="signBtn">签到</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="card">
|
||||||
|
<view class="cardBody">
|
||||||
|
<view class="menu">
|
||||||
|
<view class="menuItem">
|
||||||
|
<image class="icon" src="/static/my/daizhifu.png" mode="aspectFill"></image>
|
||||||
|
<text>待支付</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem">
|
||||||
|
<image class="icon" src="/static/my/daifahuo.png" mode="aspectFill"></image>
|
||||||
|
<text>待发货</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem">
|
||||||
|
<image class="icon" src="/static/my/daifahuo.png" mode="aspectFill"></image>
|
||||||
|
<text>待发货</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem">
|
||||||
|
<image class="icon" src="/static/my/yiwancheng.png" mode="aspectFill"></image>
|
||||||
|
<text>已完成</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem">
|
||||||
|
<image class="icon" src="/static/my/tuikuan.png" mode="aspectFill"></image>
|
||||||
|
<text>退款/售后</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card">
|
||||||
|
<view class="cardHead">
|
||||||
|
<text>会员服务</text>
|
||||||
|
</view>
|
||||||
|
<view class="cardBody">
|
||||||
|
<view class="menu">
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/fake.png" mode="aspectFill"></image>
|
||||||
|
<text>防伪溯源</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/writecheck.png" mode="aspectFill"></image>
|
||||||
|
<text>核销查询</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/writerecord.png" mode="aspectFill"></image>
|
||||||
|
<text>兑换记录</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/rewardrecord.png" mode="aspectFill"></image>
|
||||||
|
<text>中奖记录</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/help.png" mode="aspectFill"></image>
|
||||||
|
<text>帮助中心</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/aboutus.png" mode="aspectFill"></image>
|
||||||
|
<text>关于我们</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/protocol.png" mode="aspectFill"></image>
|
||||||
|
<text>会员协议</text>
|
||||||
|
</view>
|
||||||
|
<view class="menuItem1">
|
||||||
|
<image class="icon1" src="/static/my/address.png" mode="aspectFill"></image>
|
||||||
|
<text>收货地址</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btnGroup">
|
||||||
|
<view class="btnItem">
|
||||||
|
<view class="">
|
||||||
|
<image class="btnIcon" src="/static/agent.png" mode="aspectFill"></image>
|
||||||
|
<text>经销商登录</text>
|
||||||
|
</view>
|
||||||
|
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="btnItem">
|
||||||
|
<view class="">
|
||||||
|
<image class="btnIcon" src="/static/shop.png" mode="aspectFill"></image>
|
||||||
|
<text>门店登录</text>
|
||||||
|
</view>
|
||||||
|
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card">
|
||||||
|
<view class="cardHead">
|
||||||
|
<text>签到日历</text>
|
||||||
|
<view class="seeMore">
|
||||||
|
<text>查看更多</text>
|
||||||
|
<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cardBody">
|
||||||
|
<uni-calendar
|
||||||
|
:insert="true"
|
||||||
|
:lunar="false"
|
||||||
|
:showMonth="false"
|
||||||
|
:start-date="'2025-3-2'"
|
||||||
|
:end-date="'2025-10-20'"
|
||||||
|
:selected="selectedList"
|
||||||
|
@change="change"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
<tabbar :tabIndex="3"></tabbar>
|
<tabbar :tabIndex="3"></tabbar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useIndexStore } from '../../store';
|
||||||
|
|
||||||
|
const indexStore = useIndexStore()
|
||||||
|
const selectedList = ref([{date: '2025-08-07', info: '+10', data: { custom: '自定义信息', name: '自定义消息头' }}])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
.myPage{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #EFF6FF;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
.body{
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.myBG{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.userBox{
|
||||||
|
margin: 0 26rpx 26rpx;
|
||||||
|
@include flexBox(start,start);
|
||||||
|
.avatar{
|
||||||
|
width: 108rpx;
|
||||||
|
height: 108rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
.userRight{
|
||||||
|
flex: 1;
|
||||||
|
@include flexBox(between,center);
|
||||||
|
.nameBox{
|
||||||
|
flex: 1;
|
||||||
|
@include fontStyle(34rpx,#FFFFFF,left,500,44rpx);
|
||||||
|
.editIcon{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
}
|
||||||
|
.subTitle{
|
||||||
|
@include fontStyle(24rpx,#FFFFFF,left,400,44rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.signBtn{
|
||||||
|
width: 110rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
background: transparent;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
@include flexBox();
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
margin: 26rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
.cardHead{
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 26rpx;
|
||||||
|
@include fontStyle(28rpx,#333333,left,bold,38rpx);
|
||||||
|
@include flexBox(between,center);
|
||||||
|
.seeMore{
|
||||||
|
@include fontStyle(24rpx,#666666,left,400,38rpx);
|
||||||
|
@include flexBox(start,center);
|
||||||
|
.circleR{
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cardBody{
|
||||||
|
box-sizing: border-box;
|
||||||
|
.menu{
|
||||||
|
width: 100%;
|
||||||
|
@include flexBox(around,center);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.menuItem{
|
||||||
|
@include fontStyle(24rpx,#333333,left,400,38rpx);
|
||||||
|
@include flexBox(start,center,column);
|
||||||
|
margin: 26rpx 0;
|
||||||
|
.icon{
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuItem1{
|
||||||
|
width: 25%;
|
||||||
|
@include fontStyle(24rpx,#333333,left,400,38rpx);
|
||||||
|
@include flexBox(start,center,column);
|
||||||
|
margin-bottom: 26rpx ;
|
||||||
|
.icon1{
|
||||||
|
width: 52rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btnGroup{
|
||||||
|
margin: 26rpx;
|
||||||
|
@include flexBox(between,center);
|
||||||
|
.btnItem{
|
||||||
|
width: 336rpx;
|
||||||
|
height: 92rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 26rpx;
|
||||||
|
@include flexBox(between,center);
|
||||||
|
@include fontStyle(28rpx,#333333,left,bold,38rpx);
|
||||||
|
&>view{
|
||||||
|
@include flexBox(start,center);
|
||||||
|
}
|
||||||
|
.btnIcon{
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
.circleR{
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 582 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"uni-calender.ok": "ok",
|
||||||
|
"uni-calender.cancel": "cancel",
|
||||||
|
"uni-calender.today": "today",
|
||||||
|
"uni-calender.MON": "MON",
|
||||||
|
"uni-calender.TUE": "TUE",
|
||||||
|
"uni-calender.WED": "WED",
|
||||||
|
"uni-calender.THU": "THU",
|
||||||
|
"uni-calender.FRI": "FRI",
|
||||||
|
"uni-calender.SAT": "SAT",
|
||||||
|
"uni-calender.SUN": "SUN"
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"uni-calender.ok": "确定",
|
||||||
|
"uni-calender.cancel": "取消",
|
||||||
|
"uni-calender.today": "今日",
|
||||||
|
"uni-calender.SUN": "日",
|
||||||
|
"uni-calender.MON": "一",
|
||||||
|
"uni-calender.TUE": "二",
|
||||||
|
"uni-calender.WED": "三",
|
||||||
|
"uni-calender.THU": "四",
|
||||||
|
"uni-calender.FRI": "五",
|
||||||
|
"uni-calender.SAT": "六"
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"uni-calender.ok": "確定",
|
||||||
|
"uni-calender.cancel": "取消",
|
||||||
|
"uni-calender.today": "今日",
|
||||||
|
"uni-calender.SUN": "日",
|
||||||
|
"uni-calender.MON": "一",
|
||||||
|
"uni-calender.TUE": "二",
|
||||||
|
"uni-calender.WED": "三",
|
||||||
|
"uni-calender.THU": "四",
|
||||||
|
"uni-calender.FRI": "五",
|
||||||
|
"uni-calender.SAT": "六"
|
||||||
|
}
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-calendar-item__weeks-box" :class="{
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
}"
|
||||||
|
@click="choiceDate(weeks)">
|
||||||
|
<view class="uni-calendar-item__weeks-box-item">
|
||||||
|
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||||
|
<text class="uni-calendar-item__weeks-box-text" :class="{
|
||||||
|
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">{{weeks.date}}</text>
|
||||||
|
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||||
|
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
}">{{todayText}}</text>
|
||||||
|
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||||
|
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
|
||||||
|
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||||
|
'uni-calendar-item--extra':weeks.extraInfo.info,
|
||||||
|
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||||
|
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">{{weeks.extraInfo.info}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||||
|
import i18nMessages from './i18n/index.js'
|
||||||
|
const { t } = initVueI18n(i18nMessages)
|
||||||
|
|
||||||
|
export default {
|
||||||
|
emits:['change'],
|
||||||
|
props: {
|
||||||
|
weeks: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calendar: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
todayText() {
|
||||||
|
return t("uni-calender.today")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
choiceDate(weeks) {
|
||||||
|
this.$emit('change', weeks)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-text-color:#333;
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-color-error: #e43d33;
|
||||||
|
$uni-opacity-disabled: 0.3;
|
||||||
|
$uni-text-color-disable:#c0c0c0;
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-color-selected: #2979ff;
|
||||||
|
.uni-calendar-item__weeks-box {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-text {
|
||||||
|
font-size: $uni-font-size-base;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-lunar-text {
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
color: $uni-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-item {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-circle {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
// background-color: $uni-color-error; //原有样式
|
||||||
|
background-color: $uni-color-selected;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--disable {
|
||||||
|
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
|
||||||
|
color: $uni-text-color-disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--isDay-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--isDay {
|
||||||
|
// background-color: $uni-primary; //原有
|
||||||
|
// opacity: 0.8; //原有
|
||||||
|
// color: #fff; //原有
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--extra {
|
||||||
|
// color: $uni-color-error;
|
||||||
|
color: $uni-primary;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--checked {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.uni-calendar-item--before-checked {
|
||||||
|
background-color: #ff5a5f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.uni-calendar-item--after-checked {
|
||||||
|
background-color: #ff5a5f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-calendar",
|
||||||
|
"displayName": "uni-calendar 日历",
|
||||||
|
"version": "1.4.12",
|
||||||
|
"description": "日历组件",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"日历",
|
||||||
|
"",
|
||||||
|
"打卡",
|
||||||
|
"日历选择"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue