进餐页

<!-- 进餐  -->
<template>
    <view class="content">
        <!-- 导航栏 -->
        <mynavGeneral mTitle="每日进餐" :immersionShow="immersionShow"></mynavGeneral>

        <view :style="{'margin-top':contentMarginTop+'px'}">
            <view class="topPanel">
                <view class="header">
                    <view class="zk_pressed1" @click="$Router.push({name:'health-dining-setting'})">
                        <label class="iconfont iconbutton_icon_surface"></label>
                        <text>设置时间</text>
                    </view>
                    <view class="zk_pressed1" @click="$Router.push({name:'health-dining-his'})">
                        <label class="iconfont iconicon_record"></label>
                        <text>历史记录</text>
                    </view>
                </view>
                
                <view class="ctn">
                    
                    <view class="itm" @click="clockIn(1, '', a)">
                        <text>今日早餐</text>
                        <image src="../../static/icon/icon_punch2.png"></image>
                        <text>打卡时间 {{breakfast_time}}</text>
                        <text v-if="a" class="unsign">已打卡</text>
                        <text v-else class="sign">去打卡</text>
                    </view>
                    <view class="itm" @click="clockIn(2, '', b)">
                        <text >今日午餐</text>
                        <image src="../../static/icon/icon_punch3.png"></image>
                        <text>打卡时间 {{lunch_time}}</text>
                        <text v-if="b" class="unsign">已打卡</text>
                        <text v-else class="sign">去打卡</text>
                    </view>
                    <view class="itm" @click="clockIn(3, '', c)">
                        <text>今日晚餐</text>
                        <image src="../../static/icon/icon_punch4.png"></image>
                        <text>打卡时间 {{dinner_time}}</text>  
                        <text v-if="c" class="unsign">已打卡</text>
                        <text v-else class="sign">去打卡</text>
                    </view>
                </view>
            </view>

            <view class="zk_title1" style="margin-top:30px;padding-left: 10px;color: white;">一周食谱 健康饮食生活</view>
            <view style="margin-top:9px;padding-left: 10px;color: white;">369887人已参与 持续改善饮食习惯</view>

            <!--  -->
            
            <view class="weeks">
                <text @click="switchWeek(index)" :key="index" v-for="(item,index) in weeks" class="item zk_pressed1"
                 :class="{active:curWeekIndex==index}">{{item.display}}</text>
            </view>
            <!--  -->
            <view style="margin-top: 5px;margin-bottom: 52px;" class="menuList">
                <scroll-view scroll-x="true">
                    <view style="white-space: nowrap;">
                        <view class="menuItem zk_pressed1" @click="$Router.push({name:'health-dining-detail'})">
                            <view class="header">
                                <text style="flex:1;font-size: 18px;font-weight: bold;">早餐</text>
                                <text style="font-size: 10px;">更多</text>
                            </view>
                            <view style="display: flex;">
                                <view class="itmm" v-for="item in breakfast" :key="index">
                                    <!-- <image src="/static/logo.png"></image>  -->
                                    <image :src="item.images"></image>
                                    <view class="txt">
                                        <view style="font-size: 12px;">{{item.name}}</view>
                                        <view style="font-size: 9px;color: #999999;margin: 2px 0;">{{item.weight}}</view>
                                        <view style="font-size: 9px;color: #999999;">{{item.calorie}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="menuItem zk_pressed1" @click="$Router.push({name:'health-dining-detail'})">
                            <view class="header">
                                <text style="flex:1;font-size: 18px;font-weight: bold;">午餐</text>
                                <text style="font-size: 10px;">更多</text>
                            </view>
                            <view style="display: flex;">
                                <view class="itmm" v-for="item in lunch" :key="index">
                                    <!-- <image src="/static/logo.png"></image>  -->
                                    <image :src="item.images"></image>
                                    <view class="txt">
                                        <view style="font-size: 12px;">{{item.name}}</view>
                                        <view style="font-size: 9px;color: #999999;margin: 2px 0;">{{item.weight}}</view>
                                        <view style="font-size: 9px;color: #999999;">{{item.calorie}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="menuItem zk_pressed1"  @click="$Router.push({name:'health-dining-detail'})">
                            <view class="header">
                                <text style="flex:1;font-size: 18px;font-weight: bold;">晚餐</text>
                                <text style="font-size: 10px;">更多</text>
                            </view>
                            <view style="display: flex;">
                                <view class="itmm" v-for="item in dinner" :key="index">
                                    <!-- <image src="/static/logo.png"></image>  -->
                                    <image :src="item.images"></image>
                                    <view class="txt">
                                        <view style="font-size: 12px;">{{item.name}}</view>
                                        <view style="font-size: 9px;color: #999999;margin: 2px 0;">{{item.weight}}</view>
                                        <view style="font-size: 9px;color: #999999;">{{item.calorie}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
    import Vue from 'vue';
    import mynavGeneral from '@/components/mynav-general/mynav-general.vue'
    import { HealthService } from '@/services/HealthService'
    
    export default Vue.extend({
        components: {
            mynavGeneral
        },
        data() {
            return {
                // 是否展示 导航栏 阴影
                immersionShow: false,
                contentMarginTop: 0,
                curWeekIndex: 0,
                currentData: [],
                list:[],
                meal_type:1,
                time:null,
                breakfast_time:"未设置",
                lunch_time:"未设置",
                dinner_time:"未设置",
                a:0,
                b:0,
                c:0,
                breakfast:[],
                lunch:[],
                dinner:[],
                total:[],
                weeks:[
                    {display:"周天",date:""},
                    {display:"周一",date:""},
                    {display:"周二",date:""},
                    {display:"周三",date:""},
                    {display:"周四",date:""},
                    {display:"周五",date:""},
                    {display:"周六",date:""}
                ]
                
            }
        },
        
        onLoad() {
            var that: any = getApp();
            this.contentMarginTop = that.globalData.immersionAppBarHeight
            
            var d:any = new Date()
            // 今日
            this.date = `${d.getFullYear()}-${d.getMonth()>9?'':'0'}${d.getMonth()+1}-${d.getDate()>9?'':'0'}${d.getDate()}`
            
            this.getRemind();
            
            // this.requestTodayData(this.date);
            
            this.getRecord(this.date);
            
            this.getWeekRecipes();
            
            // this.getWeekRecipes();
            // 计算 weeks date
            var _day:any = d.getDay()
            
            for(var i=_day,j=0;i<this.weeks.length;i++,j++){
                
                var _tm:any = new Date(d.getTime()+(j*1000*60*60*24))
                
                this.weeks[i].date = `${_tm.getFullYear()}-${_tm.getMonth()>9?'':'0'}${_tm.getMonth()+1}-${_tm.getDate()>9?'':'0'}${_tm.getDate()}`
            }
            
            for(var i=(_day-1),j=1;i>=0;i--,j++){
                
                var _tm:any = new Date(d.getTime()-(j*1000*60*60*24))
                
                this.weeks[i].date = `${_tm.getFullYear()}-${_tm.getMonth()>9?'':'0'}${_tm.getMonth()+1}-${_tm.getDate()>9?'':'0'}${_tm.getDate()}`
            }
            
            console.log(JSON.stringify(this.weeks))
        },
        
        
        methods: {
            switchWeek(index: any) {
                
                this.curWeekIndex = index;
                // this.getWeekRecipes();
                this.getOneDay(this.weeks[index].date);
                
            },
            requestTodayData(dt:any){
                var that:any = this 
                
                new HealthService().getRecord(dt)
                .then((data:any)=>{
                    if(data.code!=1) return
                    
                    that.list = data.data
                    
                    var _b:any = that.list.filter((i:any)=>i.meal_type==1)
                    if(_b&&_b.length>0)
                    that.breakfast_time = _b[0].time
                    
                    
                    _b = that.list.filter((i:any)=>i.meal_type==2)
                    if(_b&&_b.length>0)
                    that.lunch_time= _b[0].time
                    
                    _b = that.list.filter((i:any)=>i.meal_type==3)
                    if(_b&&_b.length>0)
                    that.dinner_time= _b[0].time
                })
                .catch((error:any)=>{
                    that.alert(error.msg)
                })
            },
            //获取设置
            getRemind(){
                var that:any = this
                
                new HealthService().getRemindSett()
                .then((data:any)=>{
                    if(data.code==1){
                        
                        that.breakfast_time = data.data.breakfast_time;
                        that.lunch_time = data.data.lunch_time;
                        that.dinner_time = data.data.dinner_time;
                        that.lead_time = data.data.lead_time+"分钟";
                        
                        return;
                    }
                    
                    this.requestTodayData(this.date);
                    
                })
                .catch((error:any)=>{
                    that.alert(error.msg)
                })
            },
            //获取打卡列表
            getRecord(date:any){
                var that:any = this
                
                var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                var b = new Date(Date.parse(date.replace(/\-/g,"/")));
                this.curWeekIndex = b.getDay();
                
                new HealthService().getRecord(date)
                .then((data:any)=>{
                    // if(data.code==1){
                    //     that.date=data.data.date
                    // }
                    if (data.code == 1) {
                        let a = 0, b = 0, c = 0;
                        if (data.data.length) {
                          data.data.forEach((el:any) => {
                            
                            if (el.meal_type == 1) {
                                a = 1
                            } 
                            if (el.meal_type == 2) {
                                b = 1
                            } 
                            if (el.meal_type == 3) {
                                c = 1
                            }
                          });
                        }
            
                        this.a = a;
                        this.b = b;
                        this.c = c;
                      }
                })
                .catch((error:any)=>{
                    that.alert(error.msg)
                })
            },
            clockIn(meal_type:any,tt:any,num:any){
                var that:any = this
                
                if(num==1) return;
                
                new HealthService().clockIn(meal_type)
                .then((data:any)=>{
                    if(data.code==1){
                        
                        var time:any = new Date(data.data.time*1000);
                        time = `${time.getHours()>9?'':'0'}${time.getHours()}:${time.getMinutes()>9?'':'0'}${time.getMinutes()}`
                        
                        if(meal_type==1){
                            that.a = 1
                            that.breakfast_time = time
                        }
                        else if(meal_type==2){
                            that.b = 1
                            that.lunch_time = time
                        }
                        else if(meal_type==3){
                            that.c = 1
                            that.dinner_time = time
                        }
                        
                        console.log(data);
                        that.meal_type = data.data.meal_type;
                        that.time = data.data.time;
                        return;
                        
                    }
                    
                })
                .catch((error:any)=>{
                    that.alert(error.msg)
                })
                
            },
            //获取一周的食谱
            getWeekRecipes(){
                var that:any = this
                
                new HealthService().getWeekRecipes()
                .then((data:any)=>{
                    if(data.code==1){
                        
                        
                        that.list = data.data 
                        
                        
                        that.switchWeek(new Date().getDay())
                        
                        // that.breakfast = data.data[0].breakfast
                        // that.lunch = data.data[1].lunch
                        // that.dinner = data.data[2].dinner
                        // console.log("breakfast"+ data.data[0].breakfast);
                        // that.time = data.data.time
                        
                        
                    }
                    
                })
                .catch((error:any)=>{
                    that.alert(error.msg)
                })
                
            },
            getOneDay(time: any) {
                var res:any = this.list.filter((i:any)=>i.time==time)
                
                if(res&&res.length>0){
                    this.breakfast = res[0].breakfast
                                this.lunch = res[0].lunch
                                this.dinner = res[0].dinner
                }
                
        //         this.list.forEach((item) => {
        //           if (item.time == time) {
        //             this.breakfast = item.breakfast
        //             this.lunch = item.lunch
        //             this.dinner = item.dinner
        //           }
        //         })
                
              }
            
        },
        
        onPageScroll(e: any) {
            this.immersionShow = e.scrollTop >= 10
        }
    })
</script>

<style>
    page {
        background-color: #97C56B;
    }

    .topPanel {
        border-radius: 0 0 0 50px;
        background-color: white;
        padding-bottom: 30px;
    }

    .topPanel>.header {
        padding: 20px 10px;
        color: #326DE8;
        font-size: 15px;
        display: inline-block;
        width: 100%;
    }

    .topPanel>.header label {
        margin-right: 5px;
        font-size: 15px;
    }

    .topPanel>.header>view {
        display: inline-block;
    }

    .topPanel>.header>view:nth-child(2) {
        margin-left: 35px;
    }

    /*  */
    .ctn {
        padding: 14px 10px;
        display: flex;
    }

    .ctn .itm {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        background-color: white;
        box-shadow: #8080801A 1px 0px 17px;
        margin-right: 5px;
        border-radius: 10px;
    }

    .ctn .itm :nth-last-child(1) {
        margin-right: 0px;
    }

    .ctn .itm>text:nth-child(1) {
        font-size: 15px;
        font-weight: bold;
        margin-top: 10px;
    }

    .ctn .itm image {
        height: 43px;
        width: 43px;
        margin: 11px 0;
    }

    .ctn .itm>text:nth-child(3) {
        font-size: 13px;
        margin-bottom: 18.5px;
        color: #999999;
    }

    .ctn .itm>text:nth-child(4) {
        font-size: 13px;
        margin-bottom: 10px;
        height: 20px;
        border-radius: 10px;
        background-color: #DCDCDC;
        color: white;
        min-width: 60px;
        /* padding: 0px 11px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*  */
    .weeks {
        padding: 31px 10px;
        display: flex;
        justify-content: space-between;
    }

    .weeks .active {
        background-color: #5B8232;
        color: white !important;
    }

    .weeks .item {
        height: 20px;
        border-radius: 10px;
        font-size: 13px;
        color: #5B8232;
        min-width: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*  */
    .menuList {}

    .menuList .menuItem {
        background-color: #FFFFFF7f;
        border-radius: 15px;
        margin-left: 10px;
        display: inline-block;
        padding-bottom: 27px;
    }

    .menuList .menuItem:nth-last-child(1) {
        margin-right: 10px;
    }

    .menuList .menuItem>.header {
        display: flex;
        align-items: center;
        padding: 19.5px 5px 15px 5px;
    }

    .menuList .menuItem .itmm {
        display: flex;
        flex-direction: column;
    }

    .menuList .menuItem .itmm .txt {
        padding-left: 5px;
        padding-top: 15px;
    }

    .menuList .menuItem .itmm image {
        height: 60px;
        width: 60px;
        margin-left: 5px;
        border-radius: 4px;
    }

    .menuList .menuItem .itmm:nth-last-child(1) image {
        margin-right: 5px;
    }
    .sign{
        background-color: #81C22D!important;
    }
    
</style>