<!-- 进餐 --> <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>