From 51f0be0fec4ecfcfe69d6912d1bf11de5876fc3b Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Tue, 13 Oct 2020 16:44:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=8E=86=E6=A0=B7=E5=BC=8F=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts       |   4 +
 src/utils/date.ts         |  31 ++++++
 src/views/regime/date.vue |   2 +-
 src/views/regime/week.vue | 225 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 261 insertions(+), 1 deletion(-)
 create mode 100644 src/views/regime/week.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 52b7dcf..583f76c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -96,6 +96,10 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "date",
         component: () => import("../views/regime/date.vue")
+      },
+      {
+        path: "week",
+        component: () => import("../views/regime/week.vue")
       }
     ]
   },
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 58b3640..36d0dbe 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -48,3 +48,34 @@ export function getdate(yue?: number){
     return {date, year, yue, day, zhou};
 }
 
+
+export function getweek(zhou?: number){
+    let now = dayjs()
+    if(zhou != undefined){
+        now = now.day(now.day() + (zhou * 6));
+    }
+    const yue = now.month() + 1;
+    const day = now.date() // 当前天
+    zhou = now.day(); // 当前周几
+    const year = now.year()
+    interface Date{
+        day: string;
+        list?: Array<any>;
+    }
+    const date: Array<Date> = [];
+    for(let i = 0; i < 7; i++){
+        console.log(i);
+        now = now.day(i + 1)
+        date[i] = {day: ""};
+        date[i].day = now.year() + "-" + (now.month() < 10 ? '0' + now.month() : now.month()) + "-" + (now.date() < 10 ? '0' + now.date() : now.date())
+        date[i].list = []
+        for(let j = 0;j < 24; j++){
+            date[i].list?.push({
+                start:"",
+                num:""
+            })
+        }
+    }
+    console.log(date)
+    return {date, year, yue, day, zhou}
+}
\ No newline at end of file
diff --git a/src/views/regime/date.vue b/src/views/regime/date.vue
index afbbd55..2a54c8c 100644
--- a/src/views/regime/date.vue
+++ b/src/views/regime/date.vue
@@ -179,9 +179,9 @@
                     >div::last-child{
                         border: unset;
                     }
-                }
             }
         }
+    }
        
 }
 </style>
diff --git a/src/views/regime/week.vue b/src/views/regime/week.vue
new file mode 100644
index 0000000..deb160f
--- /dev/null
+++ b/src/views/regime/week.vue
@@ -0,0 +1,225 @@
+<template>
+    <div class="week">
+        <div class="head">
+            <div @click="zhou--">
+                <img src="" alt=""> 
+                上一周
+            </div>
+            2020年10月
+            <a-button type="primary" class="button">
+                月日历
+            </a-button>
+            <div @click="zhou++">
+                下一周
+                <img src="" alt="">
+            </div>
+        </div>
+        <div class="week">
+            <div class="heads">
+                <div></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 1}">周一<span>{{week.date[0].day}}</span></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 2}">周二<span>{{week.date[1].day}}</span></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 3}">周三<span>{{week.date[2].day}}</span></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 4}">周四<span>{{week.date[3].day}}</span></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 5}">周五<span>{{week.date[4].day}}</span></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 6}">周六<span>{{week.date[5].day}}</span></div>
+                <div :class="{zhou: zhou == 0 && week.zhou == 0}">周日<span>{{week.date[6].day}}</span></div>
+            </div>
+            <div class="body">
+                <div class="row" v-for="item in 24" :key="item">
+                    <div class="day date">{{item > 10 ? item : '0' + item}}:00</div>
+                    <div v-for="i in 7" :key="i">
+                        <div class="day">
+                            
+                            
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.week{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    .head{
+        width: 1320px;
+        height: 57px;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        >div{
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            color: #0DBBA4;
+            >img{
+                width: 7px;
+                height: 11px;
+            }
+        }
+        >div:first-child{
+            margin-right: 90px;
+            >img{
+                margin-right: 11px;
+            }
+        }
+        >div:last-child{
+            margin-left: 90px;
+
+            >img{
+                margin-left: 11px;
+            }
+        }
+        .button{
+            width: 57px;
+            height: 26px;
+            background-color: #0DBBA4;
+            border-right: 4px;
+            border: none;
+            font-size: 10px;
+            color: #fff;
+            padding: 0;
+            position: absolute;
+            right: 40px;
+        }
+    }
+    .week{
+        .heads{
+            width: 1320px;
+            height: 63px;
+            display: flex;
+            >div{
+                width: 100%;
+                height: 100%;
+                background-color: #F5FEFD;
+                text-align: center;
+                line-height: 1;
+                font-size: 13px;
+                color: #08AE98;
+                border-right: 1px solid #eee;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                >span{
+                    font-size: 11px;
+                    margin-top: 9px;
+                    color: #111;
+                }
+            }
+            .zhou{
+                color: #fff;
+                background: #08AE98;
+                >span{
+                    color: #fff;
+                }
+            }
+        }
+        .body{
+            width: 100%;
+            .row{
+                    background-color: #fff;
+                    height: 63px;
+                    width: 100%;
+                    display: flex;
+                    .date{
+                        background-color: #F5FEFD;
+                        text-align: center;
+                        line-height: 63px;
+                        font-size: 11px;
+                        color: #111;
+                    }
+                    >div{
+                        width: 100%;
+                        border-top: 1px solid #eee;
+                        border-right: 1px solid #eee;
+                        .day{
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            color: #111;
+                            >div{
+                                height: 100%;
+                                border-radius: 6px;
+                                padding: 18px;
+                                overflow: hidden;
+                                .item{
+                                    display: flex;
+                                    align-items: center;
+                                    margin-top: 11px;
+                                    >div{
+                                        width: 6px;
+                                        height: 6px;
+                                        background-color: #111;
+                                        margin-right: 6px;
+                                        border-radius: 50%;
+                                    }
+                                    >p{
+                                        line-height: 1;
+                                        margin: 0;
+                                    }
+                                }
+                            }
+                            .old{
+                                background-color: #F7F7F7;
+                            }
+                            .ing{
+                                background-color: #0DBBA4;
+                                color: #fff;
+                                .item{
+                                    >div{
+                                        background-color: #fff;
+                                    }
+                                }
+                            }
+                            .next{
+                                background-color: #CEF9F0;
+                                color: #0DBBA4;
+                                .item{
+                                    >div{
+                                        background-color: #0DBBA4;
+                                    }
+                                }
+                            }
+                        }
+                          
+                    }
+                    >div::last-child{
+                        border: unset;
+                    }
+            }
+        }
+    }
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+import { getweek } from "@/utils/date"
+
+export default defineComponent({
+    props:{
+
+    },
+    setup(){
+        const zhou = ref(0);
+        const week = ref(getweek());
+        console.log(week.value)
+        watch(zhou,(value) => {
+            week.value = getweek(value)
+            console.log(week.value)
+        })
+        return {
+            zhou,
+            week
+        }
+    }
+})
+</script>
\ No newline at end of file