就餐记录

<!-- 就餐记录 -->

<template>
<view class="content">
<!-- 导航栏 -->
<mynavGeneral mCustomTitle="true" :immersionShow="immersionShow">
<view class="inavTab">
<view class="iitem" @click="switchTab(0)" :class="{active:tabIndex==0}">
<text class="ititle">今日</text>
<view class="iindicator" v-if="tabIndex==0"></view>
</view>
<view class="iitem" @click="switchTab(1)" :class="{active:tabIndex==1}">
<text class="ititle">昨日</text>
<view class="iindicator" v-if="tabIndex==1"></view>
</view>
<view class="iitem" @click="switchTab(2)" :class="{active:tabIndex==2}">
<text class="ititle">过往</text>
<view class="iindicator" v-if="tabIndex==2"></view>
</view>
</view>
</mynavGeneral>

<view :style="{'margin-top':contentMarginTop+'px'}">
<view class="dateLbl" v-if="tabIndex==2">
<label class="iconfont iconbutton_icon_more" style="transform: rotateZ(180deg);"></label>
<text style="color: #81C22D;margin: 0 25px;">{{date_long}}</text>
<label class="iconfont iconbutton_icon_more"></label>
</view>
<view class="dateLbl" v-else style="justify-content: flex-start;">
<text style="color: #81C22D;margin: 0 10px;">{{date}}</text>
</view>
<view class="list">
<view class="item unsigned" v-for="(item,index) in list" :key="index">
<text>{{item.meal_type}}</text>
<text>{{item.time}}</text>
<text>未打卡</text>
</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,
tabIndex: 0,
list: [],
meal_type:1,
time:null,
date:null,
date_yesterday:null,
date_long:null // 以往日期
}
},
onLoad() {
var that: any = getApp();
this.contentMarginTop = that.globalData.immersionAppBarHeight

var d = new Date()

// 今日
this.date = `${d.getFullYear()}-${d.getMonth()>9?'':'0'}${d.getMonth()+1}-${d.getDate()>9?'':'0'}${d.getDate()}`

// 昨日
d.setTime(d.getTime()-24*60*60*1000)
this.date_yesterday = `${d.getFullYear()}-${d.getMonth()>9?'':'0'}${d.getMonth()+1}-${d.getDate()>9?'':'0'}${d.getDate()}`

// 以往
d.setTime(d.getTime()-24*60*60*1000)
this.date_long = `${d.getFullYear()}-${d.getMonth()>9?'':'0'}${d.getMonth()+1}-${d.getDate()>9?'':'0'}${d.getDate()}`



this.requestTodayData();
},
methods: {


switchTab(index: any) {
var that: any = this
that.tabIndex = index;
that.list = [];

that.requestData();
},
requestData() {
var that: any = this
switch (this.tabIndex) {
case 0:
that.requestTodayData();
break;
case 1:
that.requestYesterdayData();
break;
case 2:
that.requestAllData();
break;
}
},
requestTodayData(){

var that:any = this

new HealthService().getRecord(that.date)
.then((data:any)=>{

if(data.code==1){
if(data.data.length){
data.data.forEach(item => {
          switch(item.meal_type) {
            case 1:
              item.meal_type = '早餐'
              break;
            case 2:
              item.meal_type = '午餐'
              break;
            default:
              item.meal_type = '晚餐'
              break;
          }
        });
this.list = data.data;
}

return;

}else{
that.alert("暂无数据");
}

})
.catch((error:any)=>{
that.alert(error.msg)
})
},
requestYesterdayData(){
var that:any = this

new HealthService().getRecord(that.date_yesterday)
.then((data:any)=>{

if(data.code==1){
if(data.data.length){
data.data.forEach(item => {
          switch(item.meal_type) {
            case 1:
              item.meal_type = '早餐'
              break;
            case 2:
              item.meal_type = '午餐'
              break;
            default:
              item.meal_type = '晚餐'
              break;
          }
        });
this.list = data.data;
}

return;

}else{
that.alert("暂无数据");
}

})
.catch((error:any)=>{
that.alert(error.msg)
})
},
requestAllData(){
var that:any = this

new HealthService().getRecord(that.date_long)
.then((data:any)=>{

if(data.code==1){
if(data.data.length){
data.data.forEach(item => {
          switch(item.meal_type) {
            case 1:
              item.meal_type = '早餐'
              break;
            case 2:
              item.meal_type = '午餐'
              break;
            default:
              item.meal_type = '晚餐'
              break;
          }
        });
this.list = data.data;
}

return;

}else{
that.alert("暂无数据");
}

// that.alert(data.msg);
})
.catch((error:any)=>{
that.alert(error.msg)
})
},


},
onPageScroll(e: any) {
this.immersionShow = e.scrollTop >= 10
}
})
</script>

<style>
.contt {}

/* 自定义标题 */
.inavTab {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100%;
}

.inavTab>.iitem {
height: 100%;
display: flex;
align-items: center;
position: relative;
}

.inavTab>.iitem>.ititle {
font-size: 15px;
}

.inavTab>.active .ititle {
font-size: 18px;
font-weight: bold;
}

.inavTab>.iitem>.iindicator {
height: 3px;
width: 15px;
background-color: #333333;
border-radius: 1.5px;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -7.5px;
}

/* */
.list {}

.list>.item {
height: 54px;
display: flex;
align-items: center;
padding: 0 10px;
font-size: 15px;
border-bottom: #E6E6E6 0.5px solid;
}

.list>.item>text:nth-child(2) {
flex: 1;
text-align: center;
}

.list>.unsigned>text:nth-child(3) {
color: #F21616;
}

/* */
.dateLbl {
display: flex;
justify-content: center;
height: 44px;
align-items: center;
color: #E6E6E6;
font-size: 15px;
}

.dateLbl>label {
font-size: 15px;
}
</style>

标签：就餐,记录,data,any,break,item,type,meal
来源： https://www.cnblogs.com/lsongyang/p/13468305.html