537 lines
16 KiB
Vue
537 lines
16 KiB
Vue
<!--
|
||
* @Description:
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-11 08:54:49
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-20 10:05:15
|
||
-->
|
||
|
||
<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>{{ calorys.exercise_total }}</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"
|
||
@longClickGoods="longClickGoods"
|
||
/>
|
||
</view>
|
||
</template>
|
||
<!-- 运动列表 -->
|
||
<template v-if="sportsTotal > 0">
|
||
<view
|
||
class="foods-title"
|
||
style="padding-top:50rpx;"
|
||
>
|
||
<view class="title-left">运动</view>
|
||
<view class="title-right">
|
||
{{ sportsTotal }}
|
||
<span class="dw">千卡</span>
|
||
<u-icon
|
||
name="arrow-right"
|
||
color="#ddd"
|
||
size="13"
|
||
:bold="true"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<sports
|
||
type="edit"
|
||
:lists="sports"
|
||
@editSport="editSport"
|
||
@longClick="longClick"
|
||
/>
|
||
</template>
|
||
|
||
<!-- 没有饮食记录 -->
|
||
<view
|
||
class="no-foods"
|
||
v-if="sports.length === 0 && intakes.length === 0"
|
||
>
|
||
<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
|
||
text="+午餐"
|
||
@click="tabbarClick"
|
||
:icon="require('../../static/imgs/foods-2.png')"
|
||
/>
|
||
<u-tabbar-item
|
||
text="+晚餐"
|
||
@click="tabbarClick"
|
||
:icon="require('../../static/imgs/foods-3.png')"
|
||
/>
|
||
<u-tabbar-item
|
||
text="+加餐"
|
||
@click="tabbarClick"
|
||
:icon="require('../../static/imgs/foods-4.png')"
|
||
/>
|
||
<u-tabbar-item
|
||
text="+运动"
|
||
@click="tabbarClick"
|
||
:icon="require('../../static/imgs/foods-5.png')"
|
||
/>
|
||
</u-tabbar>
|
||
|
||
<!-- 修改食品弹窗 -->
|
||
<!-- 添加食谱弹窗 -->
|
||
<addFoods
|
||
v-if="addShow"
|
||
:addShow="addShow"
|
||
:selectGoods="selectGoods"
|
||
:decimals="true"
|
||
@confirm="confirmHandle"
|
||
@close="closeHandle"
|
||
@delThis="delThis"
|
||
@tabGoodsInfo="tabGoodsInfo"
|
||
max="999"
|
||
/>
|
||
|
||
<!-- 修改运动弹窗 -->
|
||
<addPopup
|
||
:selectSports="selectSports"
|
||
:addSportsShow="addSportsShow"
|
||
@comfirmSport="comfirmSport"
|
||
@cancleSport="cancleSport"
|
||
@delSport="delSport"
|
||
/>
|
||
</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";
|
||
import addPopup from "@/components/sports/addPopup";
|
||
import sports from "@/components/sports";
|
||
import { editHealthSports, delHealthSports } from "@/apis/interfaces/sport.js";
|
||
export default {
|
||
components: {
|
||
arprogress,
|
||
goodsList,
|
||
addFoods,
|
||
addPopup,
|
||
sports,
|
||
},
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
addShow: false, // 添加食品显示
|
||
selectGoods: [], // 选择新增的食品
|
||
addEatShow: false, // 加餐弹窗默认不显示
|
||
addEatList: [
|
||
{
|
||
name: "上午加餐",
|
||
type: 2,
|
||
},
|
||
{
|
||
name: "下午加餐",
|
||
type: 4,
|
||
},
|
||
{
|
||
name: "晚上加餐",
|
||
type: 6,
|
||
},
|
||
],
|
||
today: moment(new Date()).format("YYYY-MM-DD"),
|
||
calorys: {}, // 当日食谱推荐页面的信息
|
||
intakes: [], // 当日摄入列表
|
||
sports: [], // 运动列表
|
||
sportsTotal: 0,
|
||
addSportsShow: false, // 添加运动弹窗显示
|
||
selectSports: {}, // 选择新增的运动
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
// 编辑运动
|
||
editSport(item) {
|
||
this.selectSports = {
|
||
name: item.sport.name,
|
||
calory: item.sport.calory,
|
||
cover: item.sport.cover,
|
||
duration: item.duration,
|
||
sport_id: item.sport.sport_id,
|
||
exercise_id: item.exercise_id,
|
||
title: "编辑运动",
|
||
};
|
||
// console.log(this.selectSports);
|
||
console.log("编辑运动", item);
|
||
this.addSportsShow = true;
|
||
},
|
||
|
||
// 弹窗确认按钮新增 这里接口报错了 ，
|
||
comfirmSport(show, duration) {
|
||
let params = {
|
||
unit: "1", // 时间单位：分钟 1 小时 2
|
||
duration: duration, // 时常
|
||
exercise_id: this.selectSports.exercise_id, //
|
||
sport_id: this.selectSports.sport_id, // 运动id
|
||
date: this.today, // 日期
|
||
};
|
||
console.log(params);
|
||
editHealthSports(params).then((res) => {
|
||
this.addSportsShow = false;
|
||
this.selectSports = {};
|
||
this.getList();
|
||
});
|
||
console.log("弹窗确认按钮新增");
|
||
},
|
||
|
||
// 弹窗取消按钮
|
||
cancleSport(show) {
|
||
this.addSportsShow = show;
|
||
console.log("弹窗取消按钮");
|
||
},
|
||
// 删除运动
|
||
delSport() {
|
||
let params = {
|
||
exercise_id: this.selectSports.exercise_id, //
|
||
};
|
||
console.log(params);
|
||
delHealthSports(params).then((res) => {
|
||
this.addSportsShow = false;
|
||
this.selectSports = {};
|
||
this.getList();
|
||
});
|
||
},
|
||
// 长按删除触发事件运动
|
||
longClick(item) {
|
||
this.selectSports = item;
|
||
uni.showModal({
|
||
content: "确认删除么？",
|
||
confirmText: "确认删除",
|
||
confirmColor: "#34ce98",
|
||
cancelText: "再想想",
|
||
cancelColor: "#ddd",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.delSport();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 长按删除食品
|
||
longClickGoods(e) {
|
||
this.selectGoods = [e];
|
||
uni.showModal({
|
||
content: "确认删除么？",
|
||
confirmText: "确认删除",
|
||
confirmColor: "#34ce98",
|
||
cancelText: "再想想",
|
||
cancelColor: "#ddd",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.delThis();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 错误提示
|
||
errToast() {
|
||
uni.showToast({
|
||
title: "努力开发中~",
|
||
icon: "none",
|
||
});
|
||
},
|
||
getList() {
|
||
plans(this.today).then((res) => {
|
||
this.calorys = res.calorys;
|
||
this.calorys.ratio = Number(this.calorys.ratio);
|
||
this.intakes = res.intakes;
|
||
this.sports = res.exercises.lists;
|
||
this.sportsTotal = res.exercises.total;
|
||
});
|
||
},
|
||
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
|
||
tabbarClick(e) {
|
||
console.log(e);
|
||
this.tabarIndex = e;
|
||
if (e === 3) {
|
||
this.addEatShow = true;
|
||
} else {
|
||
if (e === 4) {
|
||
// 新增运动
|
||
uni.navigateTo({
|
||
url: `/pages/record/addExercises`,
|
||
});
|
||
} 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 * 7 $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>
|