• 进餐页


    <!-- 进餐  -->
    <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;
             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;
             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- 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- 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;
             60px;
            margin-left: 5px;
            border-radius: 4px;
        }
    
        .menuList .menuItem .itmm:nth-last-child(1) image {
            margin-right: 5px;
        }
        .sign{
            background-color: #81C22D!important;
        }
        
    </style>
  • 相关阅读:
    python-django-自定义分页
    self.user = serializer_field.context['request'].user KeyError: 'request
    无法ssh远程的解决办法
    关于put和patch区别的一篇文章
    一遍关于django rest framework serializer比较详细的笔记
    vim 简单配置(根据编程语言不同,自动缩进)
    django rest framework 的api返回html
    django rest frmaework jwt认证
    django 信号
    刘江的博客
  • 原文地址:https://www.cnblogs.com/lsongyang/p/13524521.html
Copyright © 2020-2023  润新知