375 lines
11 KiB
Vue
375 lines
11 KiB
Vue
<!--
|
|
* @Description:
|
|
* @Author: Aimee·Zhang
|
|
* @Date: 2022-01-11 08:54:49
|
|
* @LastEditors: Aimee·Zhang
|
|
* @LastEditTime: 2022-01-14 09:29:23
|
|
-->
|
|
|
|
<template>
|
|
<view class="record--foods">
|
|
<!-- 饮食进度条 -->
|
|
<view class="cricle-content">
|
|
<view class="info">饮食摄入<span>{{calorys.intake_total}}</span></view>
|
|
<arprogress
|
|
:percent="calorys.exceeds?100:calorys.ratio"
|
|
inactiveColor="#f5f4f9"
|
|
:activeColor="calorys.exceeds?'#f00':'#34ce98'"
|
|
width="300"
|
|
class="cricle"
|
|
borderWidth="20"
|
|
>
|
|
<span>{{calorys.exceeds?'多吃了':'还可以吃'}}</span>
|
|
<span :class="['num',calorys.exceeds?'num1':'']">{{calorys.amount}}</span>
|
|
<span>推荐预算{{calorys.goal}}</span>
|
|
</arprogress>
|
|
<view class="info" @click="errToast">运动消耗<span>0</span></view>
|
|
<view class="ic-left">摄入量推荐</view>
|
|
<u-icon
|
|
class="ic-day"
|
|
name="checkmark-circle"
|
|
color="#34ce98"
|
|
size="10"
|
|
:label="`${calorys.days}天`"
|
|
labelColor="#34ce98"
|
|
labelSize="10"
|
|
space="3"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 有饮食记录 -->
|
|
<template v-if="intakes.length>0">
|
|
<view
|
|
class="foods-add"
|
|
v-for="(it,index) in intakes"
|
|
:key="index"
|
|
>
|
|
<view class="foods-title">
|
|
<view class="title-left">{{it.name}}<span v-if="it.remark">{{it.remark || ''}}</span></view>
|
|
<view class="title-right">
|
|
{{it.total}}<span class="dw">千卡</span>
|
|
<u-icon
|
|
name="arrow-right"
|
|
color="#ddd"
|
|
size="13"
|
|
:bold="true"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<goodsList
|
|
:lists="it.intake"
|
|
type="no-dian"
|
|
@editGoods="editGoods"
|
|
/>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 没有饮食记录 -->
|
|
<view
|
|
class="no-foods"
|
|
v-else
|
|
>
|
|
<u-image
|
|
:src="require('../../static/imgs/no-foods.png')"
|
|
:lazy-load="true"
|
|
radius="10rpx"
|
|
mode="widthFix"
|
|
width="300rpx"
|
|
class="no-foods-img"
|
|
/>
|
|
<view>还没有添加今日饮食记录</view>
|
|
<view>请点击屏幕下方按钮来添加</view>
|
|
</view>
|
|
<!-- 加餐模块 -->
|
|
<u-action-sheet
|
|
:actions="addEatList"
|
|
title="加餐模块"
|
|
:closeOnClickOverlay="true"
|
|
:closeOnClickAction="true"
|
|
@select="selectClick"
|
|
cancelText="取消"
|
|
:show="addEatShow"
|
|
@close="addEatShow = false"
|
|
></u-action-sheet>
|
|
<!-- 底部 早餐等菜单 -->
|
|
<u-tabbar
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
:safeAreaInsetBottom="true"
|
|
inactiveColor="#333"
|
|
@click="tabbarClick"
|
|
>
|
|
<u-tabbar-item
|
|
text="+早餐"
|
|
@click="tabbarClick"
|
|
:icon="require('../../static/imgs/foods-1.png')"
|
|
></u-tabbar-item>
|
|
<u-tabbar-item
|
|
text="+午餐"
|
|
@click="tabbarClick"
|
|
:icon="require('../../static/imgs/foods-2.png')"
|
|
></u-tabbar-item>
|
|
<u-tabbar-item
|
|
text="+晚餐"
|
|
@click="tabbarClick"
|
|
:icon="require('../../static/imgs/foods-3.png')"
|
|
></u-tabbar-item>
|
|
<u-tabbar-item
|
|
text="+加餐"
|
|
@click="tabbarClick"
|
|
:icon="require('../../static/imgs/foods-4.png')"
|
|
></u-tabbar-item>
|
|
</u-tabbar>
|
|
|
|
<!-- 修改食品弹窗 -->
|
|
<!-- 添加食谱弹窗 -->
|
|
<addFoods
|
|
v-if="addShow"
|
|
:addShow="addShow"
|
|
:selectGoods="selectGoods"
|
|
:decimals="true"
|
|
@confirm="confirmHandle"
|
|
@close="closeHandle"
|
|
@delThis="delThis"
|
|
@tabGoodsInfo="tabGoodsInfo"
|
|
max="999"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import arprogress from "@/components/ar-circle-progress/index.vue";
|
|
import goodsList from "@/components/foods";
|
|
import { plans, editHealthFoods, delHealthFoods } from "@/apis/interfaces/foods.js";
|
|
import moment from "moment";
|
|
import addFoods from "@/components/add-goods-template/add-goods-template";
|
|
export default {
|
|
components: {
|
|
arprogress,
|
|
goodsList,
|
|
addFoods,
|
|
},
|
|
data() {
|
|
return {
|
|
lists: [],
|
|
addEatShow: false, // 加餐弹窗默认不显示
|
|
addEatList: [
|
|
{
|
|
name: "上午加餐",
|
|
type: 2,
|
|
},
|
|
{
|
|
name: "下午加餐",
|
|
type: 4,
|
|
},
|
|
{
|
|
name: "晚上加餐",
|
|
type: 6,
|
|
},
|
|
],
|
|
today: moment(new Date()).format("YYYY-MM-DD"),
|
|
calorys: {}, // 当日食谱推荐页面的信息
|
|
intakes: [], // 当日摄入列表
|
|
addShow: false, // 添加食品显示
|
|
selectGoods: [], // 选择新增的食品
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
// 错误提示
|
|
errToast(){
|
|
uni.showToast({
|
|
title:'努力开发中~',
|
|
icon:'none'
|
|
})
|
|
},
|
|
getList() {
|
|
plans(this.today).then((res) => {
|
|
this.calorys = res.calorys;
|
|
this.intakes = res.intakes;
|
|
});
|
|
},
|
|
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
|
|
tabbarClick(e) {
|
|
this.tabarIndex = e;
|
|
if (e === 3) {
|
|
this.addEatShow = true;
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/record/addFoods?type=${
|
|
e === 0 ? 1 : e === 1 ? 3 : 5
|
|
}`,
|
|
});
|
|
}
|
|
},
|
|
// 选择了加餐跳转
|
|
selectClick(e) {
|
|
uni.navigateTo({
|
|
url: `/pages/record/addFoods?type=${e.type}`,
|
|
});
|
|
// 选择加餐
|
|
},
|
|
// 编辑食品
|
|
editGoods(e) {
|
|
this.selectGoods = [e];
|
|
this.addShow = true;
|
|
},
|
|
closeHandle() {
|
|
//键盘关闭的回调函数
|
|
this.addShow = false;
|
|
},
|
|
// 监听点击键盘触发返回值新增食品
|
|
confirmHandle(value) {
|
|
// 新添加食物
|
|
let data = {
|
|
ser: 1,
|
|
weight: value,
|
|
food_id: this.selectGoods[0].food_id,
|
|
intake_id: this.selectGoods[0].intake_id,
|
|
};
|
|
this.editHealthFoods(data);
|
|
},
|
|
// 添加食物
|
|
editHealthFoods(data) {
|
|
editHealthFoods(data).then((res) => {
|
|
console.log(res);
|
|
this.addShow = false;
|
|
this.getList();
|
|
});
|
|
},
|
|
// 删除该食物
|
|
delThis(e) {
|
|
delHealthFoods(this.selectGoods[0].intake_id).then((res) => {
|
|
this.addShow = false;
|
|
this.getList();
|
|
});
|
|
},
|
|
// 跳转到食品详情
|
|
tabGoodsInfo(e) {
|
|
this.$Router.push({
|
|
name: "rankingDetails",
|
|
params: e,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.record--foods {
|
|
padding: $padding $padding $padding * 2 $padding;
|
|
// background: green;
|
|
}
|
|
// 饮食进度条
|
|
.cricle-content {
|
|
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
|
font-size: $title-size-m - 6;
|
|
padding: $padding * 1.8 $padding;
|
|
border-radius: $radius;
|
|
color: $text-gray-m;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.cricle {
|
|
.num {
|
|
color: $text-color;
|
|
font-size: $title-size * 1.8;
|
|
font-weight: bold;
|
|
padding: $padding * 0.2;
|
|
}
|
|
.num1 {
|
|
color: #f00;
|
|
}
|
|
}
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
span {
|
|
font-size: $title-size + 10;
|
|
font-weight: bold;
|
|
color: $text-color;
|
|
padding-top: $padding * 0.5;
|
|
}
|
|
}
|
|
.ic-left {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-image: linear-gradient(to right, #ffebb9, #fbd57b);
|
|
color: #664710;
|
|
padding: 10rpx $padding * 0.6;
|
|
border-radius: 0 0 $radius 0;
|
|
}
|
|
.ic-day {
|
|
position: absolute;
|
|
right: $padding;
|
|
top: $padding;
|
|
}
|
|
}
|
|
// 没有饮食记录
|
|
.no-foods {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-m - 4;
|
|
color: $text-gray-m;
|
|
min-height: 40vh;
|
|
// background: pink;
|
|
.no-foods-img {
|
|
opacity: 0.5;
|
|
}
|
|
view {
|
|
padding: $padding * 0.2;
|
|
}
|
|
}
|
|
// 饮食记录 早中晚加餐等
|
|
.foods-add {
|
|
border-bottom: solid 1rpx #f7f7f7;
|
|
margin-top: $margin;
|
|
// 主标题
|
|
.foods-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
color: $text-color;
|
|
padding: $padding * 0.5 0;
|
|
.title-left {
|
|
font-size: $title-size;
|
|
color: $text-color;
|
|
font-weight: bold;
|
|
span {
|
|
font-weight: normal;
|
|
font-size: $title-size-m - 6;
|
|
color: $text-gray-m;
|
|
margin-left: $margin - 10;
|
|
}
|
|
}
|
|
.title-right {
|
|
font-size: $title-size-m - 6;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
color: $main-color;
|
|
.dw {
|
|
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |