kitchendDevice/pageTwo/me/record.vue

167 lines
3.1 KiB
Vue

<template>
<view class="content">
<!-- 列表 -->
<view class="box">
<view class="list" v-for="(item,ind) in infoList" :key="ind" @click="handleDetail(item)">
<view class="time">
<view class="date size14">{{item.time}}</view>
<uni-icons type="forward" size="20" color="#666"></uni-icons>
</view>
<view class="kcal">
<view class="intake">
{{$t('countIntake')}}{{$t('kcal')}}
<text>{{item.val}}</text>{{item.unit}}
</view>
<view class="status">
<text class="quan0" :style="'background:'+item.color"></text>
{{item.describe}}
</view>
</view>
</view>
<view class="endtext" v-if="!lastPage || page >= lastPage">—— {{$t('msgBottom')}} ——</view>
<view v-if="!infoList.length" class="nolist">
<icon class="iconfont icon-wancan"></icon>
<text>{{$t('msgNoMoreData')}}</text>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from "vuex";
export default {
data() {
return {
page: 1,
lastPage: '',
infoList: []
}
},
computed: {
...mapState(["user"]),
end() {
return this.$tools.getTime()
},
endDate() {
return this.$tools.getDate("start")
},
},
onLoad() {
let that = this
uni.setNavigationBarTitle({
title: that.$t('titleHistory')
})
that.page = 1
that.handleList()
},
onReachBottom() {
let that = this
if (!this.lastPage || this.page >= this.lastPage) {
uni.showToast({
title: that.$t('noMoreData'),
icon: 'none'
})
return
}
this.page++
this.handleList(this.page)
},
methods: {
handleList() {
let that = this
that.$model.getMyLogList({
aud_id: that.user.aud_id,
page: that.page,
}).then(res => {
console.log('aud_id', res)
if (res.code == 0) {
that.infoList = that.infoList.concat(res.data.content_list)
that.lastPage = res.data.page_total
}
})
},
handleDetail(item) {
this.$store.dispatch("getCountFoodInfo", {
aud_id: this.user.aud_id,
time: item.time
})
uni.switchTab({
url: '/pages/count/count'
});
}
}
}
</script>
<style scoped="scoped" lang="scss">
.content {
padding: 0 30rpx;
}
.calendar {
text-align: center;
background: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
height: 80rpx;
line-height: 80rpx;
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
}
.box {
margin-top: 30rpx;
width: 100%;
}
.list {
color: #999;
width: calc(100% - 60rpx);
background: #fff;
margin-bottom: 30rpx;
border-radius: 30rpx;
padding: 20rpx 30rpx;
.time {
width: 100%;
height: 60rpx;
line-height: 60rpx;
display: flex;
justify-content: space-between;
align-content: center;
}
.quan0 {
width: 24rpx;
height: 24rpx;
background: $uni-color-warning;
display: inline-block;
border-radius: 50%;
margin-right: 5px;
}
.kcal {
display: flex;
justify-content: space-between;
align-items: center;
text {
font-size: 16px;
font-weight: bold;
margin: 0 3px;
color: #000;
}
.intake {
width: 80%;
}
}
}
</style>