From 219707d98e02326e3105ab1dfd91163963cc6045 Mon Sep 17 00:00:00 2001
From: a <455919189@qq.com>
Date: Fri, 6 May 2022 12:47:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20'components/calendarWeek'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/calendarWeek/calendarWeek.js   | 212 ++++++++++++++++++
 components/calendarWeek/calendarWeek.json |  12 +
 components/calendarWeek/calendarWeek.wxml |  37 ++++
 components/calendarWeek/calendarWeek.wxss | 253 ++++++++++++++++++++++
 components/calendarWeek/util.js           |  61 ++++++
 5 files changed, 575 insertions(+)
 create mode 100644 components/calendarWeek/calendarWeek.js
 create mode 100644 components/calendarWeek/calendarWeek.json
 create mode 100644 components/calendarWeek/calendarWeek.wxml
 create mode 100644 components/calendarWeek/calendarWeek.wxss
 create mode 100644 components/calendarWeek/util.js

diff --git a/components/calendarWeek/calendarWeek.js b/components/calendarWeek/calendarWeek.js
new file mode 100644
index 0000000..13a3e31
--- /dev/null
+++ b/components/calendarWeek/calendarWeek.js
@@ -0,0 +1,212 @@
+// components/calendarWeek/index.js
+var utils = require('./util.js')
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    policyList:[],
+    noMore:false,//决定底层显示无数据的区域
+    forumData:{
+      page:1,
+      rows:10,
+      sort:1
+    },
+    forumList:[
+      {
+        postId:'daf',
+        postUserName:'无名氏',
+        postReply:'测试',
+        jiaoshi:'2教室201',
+        lastReplyTime:'8:00~9:00',
+        teachter:'李老师'
+      },
+      {
+        postId:'daf',
+        postUserName:'无名氏',
+        postReply:'测试',
+        jiaoshi:'2教室201',
+        lastReplyTime:'8:00~9:00',
+        teachter:'王忠林'
+      },
+      {
+        postId:'daf',
+        postUserName:'无名氏',
+        postReply:'测试',
+        jiaoshi:'2教室201',
+        lastReplyTime:'8:00~9:00',
+        teachter:'刘老师'
+      }
+    ],
+    dateList: [], // 日历数据数组
+    swiperCurrent: 0, // 日历轮播正处在哪个索引位置
+    dateCurrent: new Date(), // 正选择的当前日期
+    dateCurrentStr: '', // 正选择日期的 id
+    dateMonth: '1月', // 正显示的月份
+    dateListArray: ['日', '一', '二', '三', '四', '五', '六'],
+  },
+  ready: function () {
+    var today = utils.formatTime2(new Date());
+    this.setData({
+      today,
+    });
+    var d = new Date();
+    this.initDate(-5, 2, d); // 日历组件程序  -4左表示过去4周  右1表示过去一周 
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    tiaotime(e) {
+      let data = e.detail.value.split("-")
+      var d = new Date(Number(data[0]), Number(data[1]) - 1, Number(data[2]));
+      this.setData({
+        dateList: []
+      })
+      this.initDate(-5, 2, d); // 日历组件程序  -4左表示过去4周  右1表示过去一周
+    },
+
+    // 日历组件部分
+    // ----------------------------
+    initDate(left, right, d) {
+      var month = utils.addZero(d.getMonth() + 1),
+        year = utils.addZero(d.getFullYear()),
+        day = utils.addZero(d.getDate());
+      for (var i = left; i <= right; i++) {
+        this.updateDate(utils.DateAddDay(d, i * 7)); //多少天之后的
+      }
+      this.setData({
+        swiperCurrent: 5,
+        dateCurrent: d,
+        dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
+        dateMonth: month + '月',
+        dateYear: year + '年',
+        dateCurrentStr: year + "-" + month + "-" + day,
+      });
+    },
+    // 获取这周从周日到周六的日期
+    calculateDate(_date) {
+      var first = utils.FirstDayInThisWeek(_date);
+      var d = {
+        'month': first.getMonth() + 1,
+        'days': [],
+      };
+      for (var i = 0; i < 7; i++) {
+        var dd = utils.DateAddDay(first, i);
+        var day = utils.addZero(dd.getDate()),
+          year = utils.addZero(dd.getFullYear()),
+          month = utils.addZero(dd.getMonth() + 1);
+
+        d.days.push({
+          'day': day,
+          'id': dd.getFullYear() + '-' + month + '-' + day,
+          'ids': dd.getFullYear() + ',' + month + ',' + day,
+        });
+      }
+      return d;
+    },
+    // 更新日期数组数据
+    updateDate(_date) {
+      var week = this.calculateDate(_date);
+      this.setData({
+        dateList: this.data.dateList.concat(week),
+      });
+    },
+    // 日历组件轮播切换
+    dateSwiperChange(e) {
+      const lastIndex = this.data.swiperCurrent,
+        currentIndex = e.detail.current,
+        dateList = this.data.dateList
+      let flag = false,
+        key = 'lastMonth' //判断是左划还是右 
+      if (lastIndex > currentIndex) {
+        lastIndex === 7 && currentIndex === 0 ?
+          flag = true :
+          null
+      } else {
+        lastIndex === 0 && currentIndex === 7 ?
+          null :
+          flag = true
+      }
+      if (flag) {
+        key = 'nextMonth'
+      }
+      if (key == 'lastMonth') {
+        let nowindex = currentIndex - 3;
+        let uptime = currentIndex - 4;
+        let a = 0;
+        if (nowindex < 0) {
+          nowindex = nowindex + 8;
+          a = 0
+        }
+        if (uptime < 0) {
+          uptime = uptime + 8
+        }
+
+        let seltime = dateList[nowindex].days[a].ids.split(',')
+        var week = this.calculateDate(utils.formatTime(utils.DateAddDay(new Date(Number(seltime[0]), Number(seltime[1]) - 1, Number(seltime[2])), -1)));
+        dateList[uptime] = week
+        this.setData({
+          dateList: dateList
+        })
+
+      }
+      if (key == 'nextMonth') {
+        let indexne = 0
+        let aa = 0
+        if (currentIndex == 7) { //要更新的下标
+          indexne = 0
+          aa = 1
+        } else {
+          indexne = currentIndex + 1
+          aa = currentIndex + 2
+        }
+        if (aa == 8) {
+          aa = 0
+        }
+        //aa 要更新的数组下标 datanex要往后查询一周的日期
+        let datanex = dateList[indexne].days[6].ids.split(',')
+        //获取下一周的
+        var week = this.calculateDate(utils.formatTime(utils.DateAddDay(new Date(Number(datanex[0]), Number(datanex[1]) - 1, Number(datanex[2])), 1)));
+        dateList[aa] = week
+        this.setData({
+          dateList: dateList
+        })
+      }
+      var dDateFormat = this.data.dateList[currentIndex].days[3].ids.split(',');
+      this.setData({
+        swiperCurrent: currentIndex,
+        dateMonth: dDateFormat[1] + '月',
+        dateYear: dDateFormat[0] + "年"
+      })
+    },
+    // 获得日期字符串
+    getDateStr: function (arg) {
+      if (utils.type(arg) == 'array') {
+        return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00';
+      } else if (utils.type(arg) == 'date') {
+        return arg.getFullYear() + '-' + (arg.getMonth() + 1) + '-' + arg.getDate() + ' 00:00:00';
+      } else if (utils.type(arg) == 'object') {
+        return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00';
+      }
+    },
+
+    // 点击日历某日
+    chooseDate(e) {
+      var str = e.currentTarget.id;
+      this.setData({
+        dateCurrentStr: str
+      });
+      this.triggerEvent('mydata', {
+        data: str
+      })
+    },
+  }
+})
\ No newline at end of file
diff --git a/components/calendarWeek/calendarWeek.json b/components/calendarWeek/calendarWeek.json
new file mode 100644
index 0000000..b7270fb
--- /dev/null
+++ b/components/calendarWeek/calendarWeek.json
@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-tab": "../../../components/vant/dist/tab/index",
+    "van-tabs": "../../../components/vant/dist/tabs/index",
+    "van-cell": "../../../components/vant/dist/cell/index",
+    "van-cell-group": "../../../components/vant/dist/cell-group/index"
+  },
+  "enablePullDownRefresh": true,
+  "navigationBarTitleText": "课程",
+  "backgroundTextStyle":"dark"
+}
\ No newline at end of file
diff --git a/components/calendarWeek/calendarWeek.wxml b/components/calendarWeek/calendarWeek.wxml
new file mode 100644
index 0000000..0b848c1
--- /dev/null
+++ b/components/calendarWeek/calendarWeek.wxml
@@ -0,0 +1,37 @@
+<!--components/calendarWeek/calendarWeek.wxml-->
+<view class="date-choose shrink border-bottom10">
+  <picker mode="date" bindchange="tiaotime">
+    <view class="data-month">{{dateYear}}{{dateMonth}}</view>
+  </picker>
+  <view class="weekday">
+    <block wx:for-item="weekday" wx:for="{{dateListArray}}" wx:key="{{index}}">
+      <text class="week">{{weekday}}</text>
+    </block>
+  </view>
+  <swiper class="date-choose-swiper" circular="true" indicator-dots="{{false}}" current="{{swiperCurrent}}"
+    bindchange="dateSwiperChange">
+    <block wx:for="{{dateList}}" wx:for-item="date" wx:key="date.id">
+      <swiper-item class="swiper-item"> 
+        <view class="dateday">
+          <block wx:for="{{date.days}}" wx:for-item="day" wx:key="{{day.id}}">
+            <view class="day" id="{{day.id}}" bindtap="chooseDate">
+              <text class="{{dateCurrentStr==day.id?'active':''}}{{today==day.id?' reds':''}}">{{day.day}}</text>
+            </view>
+          </block>
+        </view>
+      </swiper-item>
+    </block>
+  </swiper>
+  <view class="policyList">
+    <view class="policy-item" wx:for="{{forumList}}" wx:key="item" data-id="{{item.postId}}" bindtap="bindPolicyList">
+      <van-cell-group>      
+        <van-cell title="课程" value="课程" />
+        <van-cell title="上课时间" value="{{item.lastReplyTime}}" />    
+        <van-cell title="教室" value="{{item.jiaoshi}}" />  
+        <van-cell title="教室" value="{{item.teachter}}" />  
+        </van-cell-group>       
+    </view>
+    <!-- 到底提示 -->
+      <view class="noMore" wx:if="{{noMore}}">到底了哟~~~</view>
+  </view>
+</view>
\ No newline at end of file
diff --git a/components/calendarWeek/calendarWeek.wxss b/components/calendarWeek/calendarWeek.wxss
new file mode 100644
index 0000000..bb926ce
--- /dev/null
+++ b/components/calendarWeek/calendarWeek.wxss
@@ -0,0 +1,253 @@
+/* components/calendarWeek/calendarWeek.wxss *//* components/calendarWeek/calendarWeek.wxss */ 
+.date-choose {
+  background: #fff;
+  overflow: hidden;
+  height: auto;
+}
+
+.data-month {
+  width: 100%;
+  align-items: center;
+  padding: .5rem .35rem;
+  text-align: left;
+  color: #333;
+  font-size: 36rpx;
+}
+
+.date-choose-swiper {
+  flex-grow: 1;
+  height: 120rpx;
+}
+
+.swiper-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.weekday,
+.dateday {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+
+.week,
+.day {
+  width: 14.286%;
+  flex-basis: 14.286%;
+}
+
+.week {
+  color: #999;
+  font-size: 24rpx;
+}
+
+.day text {
+  position: relative;
+  color: #333333;
+}
+
+.day .active:before {
+  /* 圈圈 */
+  content: "";
+  position: absolute;
+  width: 76rpx;
+  height: 76rpx;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  border: 1px solid red;
+  border-radius: 100%;
+  background: red;
+  opacity: 0.1;
+  z-index: -1;
+}
+
+.day text.active {
+  color: red
+}
+
+.day text.reds {
+  color: #ff0000;
+}
+
+/*开始*/
+
+.headerone {
+  width: 100%;
+  height: auto;
+  font-size: 24rpx; 
+}
+
+.headerone .ra {
+  margin-right: 20rpx; 
+}
+
+.headerone .radio-group {
+  margin: 20rpx 0 20rpx 30rpx;
+}
+
+.headertwo {
+  width: 100%;
+  height: auto;
+  font-size: 24rpx;
+  margin-top: 10rpx;
+  margin-bottom: 26rpx;
+}
+
+.headertwo .le image {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 10px;
+  margin-left: 30rpx;
+  margin-right: 20rpx
+}
+
+.headertwo .ri {
+  flex: 1;
+  margin-right: 30rpx;
+  border-radius: 6px;
+  box-shadow: 0px 1px 6px 0px rgba(198, 198, 198, 0.5);
+}
+
+.headertwo .ri .one {
+  width: 100%;
+  padding-top: 24rpx;
+  padding-bottom: 24rpx
+}
+
+.headertwo .ri .one view .jiao {
+  margin: 0 16rpx;
+  border: 15rpx solid; 
+  border-color: #ffffff #ffffff #b3b3b3 #ffffff;
+}
+
+.xi {
+  background: red;
+  color: #ffffff;
+  padding: 3px 10px;
+  border-radius: 6px 0px 0 6px; 
+}
+
+.headertwo .ri .one view view.jiaos {
+  margin: 0 16rpx;
+  border: 15rpx solid;
+  margin-top: 14rpx;
+  border-color: #b3b3b3 #ffffff #ffffff #ffffff;
+}
+
+.headertwo .ri .two {
+  width: 100%;
+  overflow: hidden;
+  transition: all 0.5s
+}
+
+.headertwo .ri .two .body {
+  width: 100%;
+  padding-top: 24rpx;
+  padding-bottom: 24rpx;
+}
+.policyList{
+  margin-top: 4vw;
+  padding:0 2.4vw;
+}
+.policy-item{
+  background: #fff;
+  padding:4vw;
+  /* border-top:1px solid #eee; */
+  margin-bottom:4vw;
+  box-shadow: 0vw 0vw 1.2vw 0vw 
+		rgba(0, 0, 0, 0.3);
+  border-radius: 1.33vw;
+  display: flex;
+  flex-direction: column;
+  align-content: space-between;
+
+
+}
+.policy-item:last-child{
+  border-bottom:1px solid #eee;
+  margin: 0;
+}
+.policy-item>view{
+  margin-bottom:3vw;
+}
+.policy-item>view:last-child{
+  margin: 0;
+}
+.item-title{
+  width:86vw;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+	font-size: 4vw;
+  color: #333333;
+}
+.item-time{
+  font-size: 3vw;
+	color: #999999;
+}
+.noMore{
+  height: 10vw;
+  line-height: 10vw;
+  text-align: center;
+  color:#999;
+  font-size:3.2vw;
+}
+/* 暂无数据 */
+.popupNone{
+  width:100vw;
+  height:64vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.popupNone .img image{
+  width: 31.2vw;
+	height: 31.87vw;
+  margin-bottom:3.2vw;
+}
+.popupNone .noneTxt{
+  font-size: 3.73vw;
+	color: #999999;
+}
+.pubMessage{
+  width: 110rpx;
+  height: 110rpx;
+  background: #206fff;
+  border-radius: 50%;
+  color: #fff;
+  position: fixed;
+  right: 5vw;
+  bottom: 5vw;
+  display: flex;
+  flex-wrap: wrap;
+}
+.pubMessage>text{
+  flex: 1 0 100%;
+  text-align: center;
+  font-size: 100rpx;
+  line-height: 10vw;
+  height: 12vw;
+}
+.author{
+  display: flex;
+  justify-content: space-between;
+  
+}
+.author>text{
+  color:#206fff
+}
+.author>view{
+  display: flex;
+  align-items: center;
+}
+.gray_msg{
+  width: 40rpx;
+  height: auto;
+}
diff --git a/components/calendarWeek/util.js b/components/calendarWeek/util.js
new file mode 100644
index 0000000..055003c
--- /dev/null
+++ b/components/calendarWeek/util.js
@@ -0,0 +1,61 @@
+// 时间格式转换 yyyy/mm/dd
+function formatTime(date) {
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1
+  var day = date.getDate() 
+  var hour = date.getHours()
+  var minute = date.getMinutes()
+  var second = date.getSeconds()  
+  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+}
+// 时间格式转换 yyyy－mm－dd
+function formatTime2(date) {
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1
+  var day = date.getDate() 
+  var hour = date.getHours()
+  var minute = date.getMinutes()
+  var second = date.getSeconds()  
+  return [year, month, day].map(formatNumber).join('-')
+}
+
+function formatDate(date, split) {
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1
+  var day = date.getDate()
+  return [year, month, day].map(formatNumber).join(split || '')
+}
+
+// 两位数自动补零
+function formatNumber(n) {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}
+
+// 计算变化多少天后的日期
+function DateAddDay(d, days) {
+  var d = new Date(d); 
+  return new Date(d.setDate(d.getDate() + days));
+}
+
+// 获得本周周日的日期
+function FirstDayInThisWeek(d) { 
+  var d = new Date(d);  
+  return DateAddDay(d, 0 - d.getDay());
+}
+
+// 判断类型
+function Type(obj) {
+  var typeStr = Object.prototype.toString.call(obj).split(" ")[1];
+  return typeStr.substr(0, typeStr.length - 1).toLowerCase();
+}
+
+module.exports = {
+  formatTime: formatTime,
+  formatDate: formatDate,
+  formatTime2,
+  DateAddDay: DateAddDay,
+  FirstDayInThisWeek: FirstDayInThisWeek,
+  type: Type,
+  addZero: formatNumber,
+}
\ No newline at end of file