unknown 8 months ago
parent
commit
63a6726754
  1. 4
      common/css/app.scss
  2. 4
      config/api.js
  3. 4
      manifest.json
  4. 8
      pages.json
  5. 83
      pages/indexEntry/signIn/signIn.vue
  6. 40
      pages/tabbar/index/index.vue
  7. BIN
      static/images/carIcon/sigin.png
  8. BIN
      static/images/carIcon/siginNo.png
  9. BIN
      static/images/carIcon/siginOk.png
  10. BIN
      static/images/icon/arrowDown.png
  11. BIN
      static/images/icon/arrowLeft.png
  12. BIN
      static/images/icon/arrowRight.png
  13. BIN
      static/images/mineIcon/emtryIcon (1).png
  14. BIN
      static/images/mineIcon/emtryIcon (2).png
  15. BIN
      static/images/mineIcon/emtryIcon (3).png
  16. BIN
      static/images/mineIcon/emtryIcon (4).png
  17. BIN
      static/images/mineIcon/minIcon (1).png
  18. BIN
      static/images/mineIcon/minIcon (2).png
  19. BIN
      static/images/mineIcon/minIcon (3).png
  20. BIN
      static/images/mineIcon/minIcon (4).png
  21. BIN
      static/images/mineIcon/minIcon (5).png
  22. BIN
      static/images/mineIcon/minIcon (6).png
  23. BIN
      static/images/mineIcon/minIcon (7).png
  24. BIN
      static/images/mineIcon/二维码.png
  25. BIN
      static/images/mineIcon/扫码.png
  26. BIN
      static/images/mineIcon/箭头 拷贝 2(1).png
  27. BIN
      static/images/mineIcon/箭头 拷贝 2.png
  28. 8
      uni_modules/zeng-calen/changelog.md
  29. 456
      uni_modules/zeng-calen/components/zeng-calen/zeng-calen - 副本.vue
  30. 490
      uni_modules/zeng-calen/components/zeng-calen/zeng-calen.vue
  31. 85
      uni_modules/zeng-calen/package.json
  32. 69
      uni_modules/zeng-calen/readme.md

4
common/css/app.scss

@ -51,7 +51,11 @@ view {
background-size: 100% ; background-size: 100% ;
} }
.h1 { .h1 {
text {
color: #999;
}
.active { .active {
color: #333;
&::before { &::before {
background: url('https://jiangxijiakao-1.oss-cn-hangzhou.aliyuncs.com/complain/2024-01-29/1706510133553-0') #F6F7FA no-repeat; background: url('https://jiangxijiakao-1.oss-cn-hangzhou.aliyuncs.com/complain/2024-01-29/1706510133553-0') #F6F7FA no-repeat;
background-size: 100% 100%; background-size: 100% 100%;

4
config/api.js

@ -172,6 +172,10 @@ export const trainingApplyList = (params={}) => http.get('app/training-apply/lis
export const trainingApplyDelete = (params={}) => http.delete('app/training-apply/delete?id='+params.id, ) export const trainingApplyDelete = (params={}) => http.delete('app/training-apply/delete?id='+params.id, )
// 新增的接口
export const getBannerList = (params={}) => http.get('business/video/getBannerList ', {params})

4
manifest.json

@ -1,5 +1,5 @@
{ {
"name" : "recruitStudent",
"name" : "洛阳学车",
"appid" : "__UNI__BD23957", "appid" : "__UNI__BD23957",
"description" : "", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",
@ -96,7 +96,7 @@
"disableHostCheck" : true, "disableHostCheck" : true,
"proxy" : { "proxy" : {
"/api" : { "/api" : {
"target" : "http://192.168.1.15:48080/",
"target" : "http://192.168.1.36:8318/",
// "target" : "http://192.168.1.36:48080/", // "target" : "http://192.168.1.36:48080/",
"changeOrigin" : true, "changeOrigin" : true,
"secure" : true, "secure" : true,

8
pages.json

@ -41,6 +41,14 @@
"pages": [ "pages": [
{ {
"path": "signIn/signIn",
"style": {
"navigationBarTitleText": "签到签退",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark"
}
},
{
"path": "NonPlatformStudentInfo/NonPlatformStudentInfo", "path": "NonPlatformStudentInfo/NonPlatformStudentInfo",
"style": { "style": {
"navigationBarTitleText": "非平台学员", "navigationBarTitleText": "非平台学员",

83
pages/indexEntry/signIn/signIn.vue

@ -0,0 +1,83 @@
<template>
<view class="pageBg pad">
<zeng-calen :actDay="actDay" :chooseDayLack="chooseDayLack" @onDayClick='onDayClick' :chooseDay="chooseDay"></zeng-calen>
<view class="btnBg" style="margin: 20rpx 0;">去签到/去签退</view>
<view class="card">
<view class="h1"><text class="active">签到记录</text></view>
<view class="ul">
<view class="li" v-for="(item,index) in 4" :key="index">
<view class="lab">{{ index%2==0? '签退成功':'签到成功'}}</view>
<view class="date">2024-01-29 11:29</view>
</view>
</view>
</view>
</view>
</template>
<script>
import zengCalen from '@/uni_modules/zeng-calen/components/zeng-calen/zeng-calen'
export default {
components: {zengCalen},
data() {
return {
actDay: [], //
chooseDay: ["2024-01-29", "2024-01-27", "2024-01-19", "2024-01-10"], //
chooseDayLack: ["2024-01-29", ], //
}
},
onLoad() {
},
methods: {
//
onDayClick(data) {
this.actDay = [data]
return
let choose = data.date //
if (this.actDay.includes(choose)) { //
//
const index = this.actDay.indexOf(choose);
//
this.actDay.splice(index, 1)
} else if (this.chooseDay.includes(choose)) { //
uni.showToast({
title: "这个日期已经被投标了",
icon: "none"
})
} else {
//
this.actDay.push(choose)
}
},
}
}
</script>
<style lang="scss" scoped>
.pageBg {
padding-bottom: 30rpx;
}
.card {
padding-top: 20rpx;
.ul {
padding: 10rpx 30rpx;
.li {
padding: 30rpx 0;
border-bottom: 1px solid #f4f4f4;
&:last-child {
border: none;
}
.lab {
font-size: 28rpx;
color: #333;
}
.date {
font-size: 24rpx;
color: #999;
margin-top: 16rpx;
}
}
}
}
</style>

40
pages/tabbar/index/index.vue

@ -27,10 +27,10 @@
:current="current" :mode="mode" :dots-styles="dotsStyles" :current="current" :mode="mode" :dots-styles="dotsStyles"
field="content"> field="content">
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" > <swiper class="swiper-box" @change="change" :current="swiperDotIndex" >
<swiper-item v-for="(item, index) in swiperInfo" :key="index" @click="$goPage('/pages/indexEntry/iIndustryInfo/detail/detail?id='+ item.id)">
<swiper-item v-for="(item, index) in swiperInfo" :key="index" >
<view class="swiper-item" :class="'swiper-item' + index"> <view class="swiper-item" :class="'swiper-item' + index">
<view class="imgBox"> <view class="imgBox">
<image :src="item.picture" mode="widthFix"></image>
<image :src="item" mode="widthFix"></image>
</view> </view>
</view> </view>
</swiper-item> </swiper-item>
@ -85,12 +85,12 @@
<view class="h1 "><text class="active">行业资讯</text></view> <view class="h1 "><text class="active">行业资讯</text></view>
<view class="h1"><text>政策法规</text></view> <view class="h1"><text>政策法规</text></view>
</view> </view>
<moreRight text="查看全部"/>
<moreRight text="查看全部" @click.native="$goPage('/pages/indexEntry/industryPolicy/industryPolicy')"/>
</view> </view>
<view class="ul2"> <view class="ul2">
<view class="li2" v-for="(item,index) in 3" :key="index">
<informaItem/>
<view class="li2" v-for="(item,index) in informList" :key="index">
<informaItem :item="item"/>
</view> </view>
</view> </view>
</view> </view>
@ -127,7 +127,7 @@
<script> <script>
import { imgUrl } from '@/config/site.config' import { imgUrl } from '@/config/site.config'
import { getarticleList } from '@/config/api.js'
import { getarticleList, getBannerList } from '@/config/api.js'
import schoolItem from './comp/schoolItem' import schoolItem from './comp/schoolItem'
import informaItem from './comp/informaItem' import informaItem from './comp/informaItem'
import coachItem from './comp/coachItem' import coachItem from './comp/coachItem'
@ -167,6 +167,7 @@
{ {
text: '签到签退', text: '签到签退',
icon: require('../../../static/images/indexIcon/entryIcon (5).png'), icon: require('../../../static/images/indexIcon/entryIcon (5).png'),
url: '/pages/indexEntry/signIn/signIn',
goPage: ((item)=>{ goPage: ((item)=>{
this.$u.toast('正在开发中,敬请期待...') this.$u.toast('正在开发中,敬请期待...')
}) })
@ -232,10 +233,7 @@
swiperDotIndex: 0, swiperDotIndex: 0,
current: 1, current: 1,
mode: 'default', mode: 'default',
swiperInfo: [
{picture: require('../../../static/images/bigImg/banner.jpg')},
{picture: require('../../../static/images/bigImg/banner2.jpg')}
],
swiperInfo: [],
dotsStyles: { dotsStyles: {
backgroundColor: '#E8E9EC', backgroundColor: '#E8E9EC',
border: '1px #E8E9EC solid', border: '1px #E8E9EC solid',
@ -243,7 +241,8 @@
selectedBackgroundColor: '#1989FA', selectedBackgroundColor: '#1989FA',
selectedBorder: '1px #1989FA solid' selectedBorder: '1px #1989FA solid'
}, },
bgColor: 'transparent'
bgColor: 'transparent',
informList: [],
} }
}, },
async onLoad() { async onLoad() {
@ -269,6 +268,7 @@
onShow() { onShow() {
this.$store.dispatch('getUserInfo') this.$store.dispatch('getUserInfo')
if(!this.swiperInfo.length) { if(!this.swiperInfo.length) {
this.getBannerListFn()
// this.getarticleListFn() // this.getarticleListFn()
} }
this.getarticleListFn() this.getarticleListFn()
@ -277,6 +277,13 @@
}, },
methods: { methods: {
async getBannerListFn() {
const {data: res} = await getBannerList()
this.swiperInfo = res.list.map(item=>{
return item.imgUrl
})
console.log(this.swiperInfo)
},
async entrySectionClick(item) { async entrySectionClick(item) {
if(item.text=='我要报名') { if(item.text=='我要报名') {
return this.$u.utils.clickSignUp() return this.$u.utils.clickSignUp()
@ -288,11 +295,16 @@
} }
this.$goPage(item.url) this.$goPage(item.url)
}, },
//
async getarticleListFn() { async getarticleListFn() {
const {data: res} = await getarticleList(this.params)
// this.swiperInfo = res.list[0].articleManagementDO
const {data: res} = await getarticleList({pageSize: 4})
this.informList = res.list[0].articleManagementDO
}, },
//
// async getarticleListFn() {
// const {data: res} = await getarticleList(this.params)
// this.informList = res.list[0].articleManagementDO?.slice(0, 3)
// },
async refereshFn() { async refereshFn() {
const res = await this.$store.dispatch('refreshToken') const res = await this.$store.dispatch('refreshToken')
console.log(res) console.log(res)

BIN
static/images/carIcon/sigin.png

After

Width: 72  |  Height: 100  |  Size: 2.0 KiB

BIN
static/images/carIcon/siginNo.png

After

Width: 72  |  Height: 100  |  Size: 2.5 KiB

BIN
static/images/carIcon/siginOk.png

After

Width: 72  |  Height: 100  |  Size: 1.8 KiB

BIN
static/images/icon/arrowDown.png

After

Width: 26  |  Height: 15  |  Size: 600 B

BIN
static/images/icon/arrowLeft.png

After

Width: 15  |  Height: 26  |  Size: 562 B

BIN
static/images/icon/arrowRight.png

After

Width: 15  |  Height: 26  |  Size: 587 B

BIN
static/images/mineIcon/emtryIcon (1).png

After

Width: 77  |  Height: 77  |  Size: 4.7 KiB

BIN
static/images/mineIcon/emtryIcon (2).png

After

Width: 77  |  Height: 77  |  Size: 5.3 KiB

BIN
static/images/mineIcon/emtryIcon (3).png

After

Width: 77  |  Height: 77  |  Size: 4.3 KiB

BIN
static/images/mineIcon/emtryIcon (4).png

After

Width: 77  |  Height: 77  |  Size: 4.8 KiB

BIN
static/images/mineIcon/minIcon (1).png

After

Width: 54  |  Height: 51  |  Size: 2.1 KiB

BIN
static/images/mineIcon/minIcon (2).png

After

Width: 54  |  Height: 51  |  Size: 2.3 KiB

BIN
static/images/mineIcon/minIcon (3).png

After

Width: 54  |  Height: 51  |  Size: 2.4 KiB

BIN
static/images/mineIcon/minIcon (4).png

After

Width: 54  |  Height: 51  |  Size: 2.2 KiB

BIN
static/images/mineIcon/minIcon (5).png

After

Width: 54  |  Height: 51  |  Size: 2.2 KiB

BIN
static/images/mineIcon/minIcon (6).png

After

Width: 54  |  Height: 51  |  Size: 1.9 KiB

BIN
static/images/mineIcon/minIcon (7).png

After

Width: 54  |  Height: 51  |  Size: 2.4 KiB

BIN
static/images/mineIcon/二维码.png

After

Width: 36  |  Height: 36  |  Size: 1.2 KiB

BIN
static/images/mineIcon/扫码.png

After

Width: 36  |  Height: 36  |  Size: 626 B

BIN
static/images/mineIcon/箭头 拷贝 2(1).png

After

Width: 36  |  Height: 36  |  Size: 638 B

BIN
static/images/mineIcon/箭头 拷贝 2.png

After

Width: 36  |  Height: 36  |  Size: 516 B

8
uni_modules/zeng-calen/changelog.md

@ -0,0 +1,8 @@
## 1.0.5(2023-05-20)
.
## 1.0.2(2023-04-06)
修复了左右切换的问题
## 1.0.1(2023-04-05)
[1.0.1]
## 1.0.0(2023-04-05)
1.0.0

456
uni_modules/zeng-calen/components/zeng-calen/zeng-calen - 副本.vue

@ -0,0 +1,456 @@
<template>
<view>
<!-- 日期选择器 -->
<view class="content">
<view class="calendar-wrapper">
<!-- 选择月份 -->
<view class="header" v-if="headerBar">
<view class="iconfont iconarrow-left-bold pre" @click="changeMonth('pre')">上个月</view>
<view>{{y+'年'+formatNum(m)+'月'}}</view>
<view class="iconfont iconarrow-left-bold-copy 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="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: getActday(`${item.year}-${item.month}-${item.date}`) && item.isCurM,//
chooseMarkDay:getChoose(`${item.year}-${item.month}-${item.date}`),
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="iconfont iconyixuanzhong"
:class="{markDays:getChoose(`${item.year}-${item.month}-${item.date}`)}"
v-if="getChoose(`${item.year}-${item.month}-${item.date}`) && !isMarkDay(item.year, item.month, item.date)&&item.isCurM">
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// (0)
weekstart: {
type: Number,
default: 0
},
//
markDays: {
type: Array,
default: () => {
return [];
}
},
//
headerBar: {
type: Boolean,
default: true
},
//
disabledAfter: {
type: Boolean,
default: false
},
//
actDay: {
type: Array,
default: [],
},
//
chooseDay: {
type: Array,
default: [],
}
},
data() {
return {
weektext: ['日', '一', '二', '三', '四', '五', '六'],
y: new Date().getFullYear(), //
m: new Date().getMonth() + 1, //
d: new Date().getDate(), //
dates: [], //
positionTop: 0,
choose: '',
chooseArr: [],
}
},
created() {
this.dates = this.monthDay(this.y, this.m);
console.log('')
},
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: {
//
getChoose(day) {
for (let i = 0; i < this.chooseDay.length; i++) {
if (day == this.chooseDay[i]) {
return true;
}
}
},
//
getActday(day) {
for (let i = 0; i < this.actDay.length; i++) {
if (day == this.actDay[i] && !this.getChoose(day)) {
console.log("选中了", this.actDay);
return true;
}
}
},
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;
}
},
//
selectOne(i, event) {
let date = `${i.year}-${i.month}-${i.date}`;
this.$emit('onDayClick', date);
return
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.chooseArr.push(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">
.content {
.content_box {}
// .popup_body {
// height: 800rpx;
// border-radius: 20rpx 20rpx 0 0;
// background-color: #fff;
// .close_popup {
// display: flex;
// flex-direction: row-reverse;
// padding: 20rpx;
// .iconfont {
// font-size: 36rpx;
// }
// }
.calendar-wrapper {
color: #6f6d6d;
font-size: 28rpx;
text-align: center;
background-color: #fff;
padding-bottom: 10rpx;
border-radius: 20rpx;
.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 {
font-size: 28rpx;
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: #4bcdc4;
color: #fff;
}
&.chooseMarkDay {
//
// background-color: #43a761;
color: #5b5b5b;
}
&.nolm {
color: #fff;
opacity: 0;
}
}
.isWorkDay {
color: #25272a;
}
.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: #a0eac1;
}
.workDay {
font-style: normal;
width: 8rpx;
height: 8rpx;
background: #4d7df9;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0;
pointer-events: none;
}
.markDays {
font-style: normal;
position: absolute;
top: 2rpx;
right: 11rpx;
pointer-events: none;
font-size: 80rpx;
color: rgba(160, 234, 193, 0.5);
}
}
}
}
}
// }
}
</style>

490
uni_modules/zeng-calen/components/zeng-calen/zeng-calen.vue

@ -0,0 +1,490 @@
<template>
<view>
<!-- 日期选择器 -->
<view class="content">
<view class="calendar-wrapper">
<!-- 选择月份 -->
<view class="header" v-if="headerBar">
<view class="iconarrow" @click="changeMonth('pre')">
<image src="@/static/images/icon/arrowLeft.png" mode=""></image>
</view>
<view>{{y+'年'+formatNum(m)+'月'}}</view>
<view class="iconarrow" @click="changeMonth('next')">
<image src="@/static/images/icon/arrowRight.png" mode=""></image>
</view>
</view>
<!-- 星期栏 -->
<view class="week">
<view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
</view>
<!-- 日历数字 -->
<view 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: getActday(`${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="dian" v-if="getChoose(`${item.year}-${item.month}-${item.date}`)" :class="{red: getChooseLack(`${item.year}-${item.month}-${item.date}`)}"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// (0)
weekstart: {
type: Number,
default: 0
},
//
chooseDayLack: {
type: Array,
default: () => {
return [];
}
},
//
headerBar: {
type: Boolean,
default: true
},
//
disabledAfter: {
type: Boolean,
default: false
},
//
actDay: {
type: Array,
default: [],
},
//
chooseDay: {
type: Array,
default: [],
}
},
data() {
return {
weektext: ['日', '一', '二', '三', '四', '五', '六'],
y: new Date().getFullYear(), //
m: new Date().getMonth() + 1, //
d: new Date().getDate(), //
dates: [], //
positionTop: 0,
choose: '',
chooseArr: [],
}
},
created() {
this.dates = this.monthDay(this.y, this.m);
console.log(this.dates)
},
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: {
//
getChoose(day) {
for (let i = 0; i < this.chooseDay.length; i++) {
if (day == this.chooseDay[i]) {
return true;
}
}
},
getChooseLack(day) {
for (let i = 0; i < this.chooseDayLack.length; i++) {
if (day == this.chooseDayLack[i]) {
return true;
}
}
},
//
getActday(day) {
for (let i = 0; i < this.actDay.length; i++) {
if (day == this.actDay[i] && this.getChoose(day)) {
console.log("选中了?", this.actDay);
return true;
}
}
},
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;
}
},
//
selectOne(i, event) {
let date = `${i.year}-${i.month}-${i.date}`;
let flag = this.getChoose(date)
if(!flag) return this.$u.toast('无预约')
this.$emit('onDayClick', date);
return
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.chooseArr.push(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">
.content {
.content_box {}
.dian {
position: absolute;
width: 8rpx;
height: 8rpx;
background: #4385FE;
border-radius: 50%;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
line-height: 0;
&.red {
background: #EEB65F;
}
}
.iconarrow {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
image {
width: 16rpx;
height: 26rpx;
display: block;
}
}
// .popup_body {
// height: 800rpx;
// border-radius: 20rpx 20rpx 0 0;
// background-color: #fff;
// .close_popup {
// display: flex;
// flex-direction: row-reverse;
// padding: 20rpx;
// .iconfont {
// font-size: 36rpx;
// }
// }
.calendar-wrapper {
color: #6f6d6d;
font-size: 28rpx;
text-align: center;
background-color: #fff;
padding-bottom: 10rpx;
border-radius: 20rpx;
.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 {
font-size: 28rpx;
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: #4385FE;
color: #fff;
}
&.chooseMarkDay {
//
background-color: #43a761;
// color: #5b5b5b;
}
&.nolm {
color: #fff;
opacity: 0;
}
}
.isWorkDay {
color: #25272a;
}
.notSigned {
font-style: normal;
width: 8rpx;
height: 8rpx;
background: #fa7268;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0;
pointer-events: none;
}
.today {
color: #4385FE;
background-color: #D9E7FF;
}
.workDay {
font-style: normal;
width: 8rpx;
height: 8rpx;
background: #4d7df9;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0;
pointer-events: none;
}
.markDays {
font-style: normal;
position: absolute;
top: 2rpx;
right: 11rpx;
pointer-events: none;
font-size: 80rpx;
color: rgba(160, 234, 193, 0.5);
}
}
}
}
}
// }
}
</style>

85
uni_modules/zeng-calen/package.json

@ -0,0 +1,85 @@
{
"id": "zeng-calen",
"displayName": "日历组件可选择周与月标记打卡支持左右切换",
"version": "1.0.5",
"description": "zeng-calen日历组件可选择周与月支持左右切换",
"keywords": [
"日历",
"多选",
"单选",
"日期选择",
"标记打卡"
],
"repository": "",
"engines": {
"HBuilderX": "^3.4.2"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"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",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

69
uni_modules/zeng-calen/readme.md

@ -0,0 +1,69 @@
### 代码块
直接引入就可以使用,代码如下:
```xml
<template>
<view class="content">
<zeng-calen :actDay="actDay" :chooseDay="chooseDay" @onDayClick='onDayClick'></zeng-calen>
</view>
</template>
<script>
export default {
data() {
return {
actDay: [], //用户选择的日期
chooseDay: ["2023-04-13", "2023-04-15", "2023-04-16", "2023-04-05"], //已被投标的数据
}
},
onLoad() {
},
methods: {
// 展开日历
onDayClick(data) {
let choose = data.date //用户点中的数据
if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
// 移除元素下标
const index = this.actDay.indexOf(choose);
//删除用户点击的日期
this.actDay.splice(index, 1)
} else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
uni.showToast({
title: "这个日期已经被投标了",
icon: "none"
})
} else {
//添加用户点击的日期
this.actDay.push(choose)
}
},
}
}
</script>
<style>
</style>
```
###
Calendar Props:
| 属性名 | 类型 | 默认值 | 说明 |
| :----- | :--: | :-------: | :-------: |
| weekstart | Number | 0 | 星期几为第一天(0为星期日) |
| markDays | Array | null | 已标记的日期 |
| headerBar | Boolean | true | 是否展示月份切换按钮 |
| disabledAfter | Boolean | false | 过去日期是否不可点击 |
| actDay | Array | null | 接收用户选择的参数 |
| chooseDay | Array | null | 接受已经被选择的参数 |
###
Calendar Events:
| 事件 | 说明 |
| :----- | :--: |
| onDayClick | 选中的日期 |
Loading…
Cancel
Save