You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
288 lines
7.0 KiB
288 lines
7.0 KiB
<template>
|
|
<view class="recipe-plan">
|
|
<image class="go_back_button" @click="go_back_to_home" src="@/static/homepages/homes/my_recipe_plan/pictures/button.png"></image>
|
|
<view class="date">{{ currentDate }}</view>
|
|
<text class ="today_recipe_and_calories">今日饮食和热量</text>
|
|
<view class="divider_line"></view>
|
|
<image class="time_line" src="@/static/homepages/homes/my_recipe_plan/pictures/time_line.png"></image>
|
|
<view class="input_box_breakfast">
|
|
<input
|
|
v-model="meals[0].food"
|
|
class="food_input"
|
|
placeholder="请输入食物名称"
|
|
@input="calculateCalories(0)"
|
|
/>
|
|
<view class="calories_text">
|
|
<text class="icon">⏱</text>
|
|
<text>热量：{{ meals[0].calories }}J</text>
|
|
</view>
|
|
<view
|
|
class="check_button"
|
|
:class="{ active: meals[0].checked }"
|
|
@click="toggleCheck(0)"
|
|
>✓</view>
|
|
</view>
|
|
|
|
<view class="input_box_lunch">
|
|
<input
|
|
v-model="meals[1].food"
|
|
class="food_input"
|
|
placeholder="请输入食物名称"
|
|
@input="calculateCalories(1)"
|
|
/>
|
|
<view class="calories_text">
|
|
<text class="icon">⏱</text>
|
|
<text>热量：{{ meals[1].calories }}J</text>
|
|
</view>
|
|
<view
|
|
class="check_button"
|
|
:class="{ active: meals[1].checked }"
|
|
@click="toggleCheck(1)"
|
|
>✓</view>
|
|
</view>
|
|
|
|
<view class="input_box_dinner">
|
|
<input
|
|
v-model="meals[2].food"
|
|
class="food_input"
|
|
placeholder="请输入食物名称"
|
|
@input="calculateCalories(2)"
|
|
/>
|
|
<view class="calories_text">
|
|
<text class="icon">⏱</text>
|
|
<text>热量：{{ meals[2].calories }}J</text>
|
|
</view>
|
|
<view
|
|
class="check_button"
|
|
:class="{ active: meals[2].checked }"
|
|
@click="toggleCheck(2)"
|
|
>✓</view>
|
|
</view>
|
|
|
|
<view class="input_box_midnight_snack">
|
|
<input
|
|
v-model="meals[3].food"
|
|
class="food_input"
|
|
placeholder="请输入食物名称"
|
|
@input="calculateCalories(3)"
|
|
/>
|
|
<view class="calories_text">
|
|
<text class="icon">⏱</text>
|
|
<text>热量：{{ meals[3].calories }}J</text>
|
|
</view>
|
|
<view
|
|
class="check_button"
|
|
:class="{ active: meals[3].checked }"
|
|
@click="toggleCheck(3)"
|
|
>✓</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { getFoodCalories } from '@/static/homepages/homes/my_recipe_plan/js/database.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
meals: [
|
|
{ time: '早餐', food: '', calories: 0, dotColor: 'yellow', checked: false },
|
|
{ time: '午餐', food: '', calories: 0, dotColor: 'yellow', checked: false },
|
|
{ time: '晚餐', food: '', calories: 0, dotColor: 'red', checked: false },
|
|
{ time: '夜宵', food: '', calories: 0, dotColor: 'blue', checked: false }
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
currentDate() {
|
|
const date = new Date()
|
|
return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
|
|
}
|
|
},
|
|
methods: {
|
|
go_back_to_home(){
|
|
uni.navigateTo({
|
|
url:"/pages/homepages/homes/home/home"
|
|
})
|
|
},
|
|
calculateCalories(index) {
|
|
// 如果输入为空，不进行计算
|
|
if (!this.meals[index].food.trim()) {
|
|
return
|
|
}
|
|
|
|
// 设置loading状态
|
|
this.meals[index].loading = true
|
|
this.meals[index].calories = 0
|
|
|
|
// 延迟2秒显示结果
|
|
setTimeout(() => {
|
|
const calories = getFoodCalories(this.meals[index].food)
|
|
if (calories) {
|
|
uni.showToast({
|
|
title: '计算食物卡路里成功！！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
this.meals[index].calories = calories
|
|
this.meals[index].recordTime = this.getCurrentTime()
|
|
this.saveMealsData()
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: '未找到该食物的卡路里信息',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
this.meals[index].loading = false
|
|
}, 2000)
|
|
},
|
|
toggleCheck(index) {
|
|
this.meals[index].checked = !this.meals[index].checked
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.recipe-plan {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #B6D1E0;
|
|
.go_back_button{
|
|
position:absolute;
|
|
width: 20%;
|
|
height: 8%;
|
|
left: 2%;
|
|
top: 3%;
|
|
|
|
}
|
|
.date {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 2%;
|
|
left: 6%;
|
|
top: 11%;
|
|
font-size: 1.4em; // 加大字体
|
|
font-weight: 700; // 加粗字体
|
|
display: flex; // 使用flex布局来居中文字
|
|
align-items: center; // 垂直居中
|
|
justify-content: center; // 水平居中
|
|
padding: 2% 0;
|
|
}
|
|
.today_recipe_and_calories{
|
|
position: absolute;
|
|
width: 75%;
|
|
height: 4%;
|
|
left: 6%;
|
|
top: 16%;
|
|
font-size: 2.5em; // 加大字体
|
|
font-weight: 700; // 加粗字体
|
|
display: flex; // 使用flex布局来居中文字
|
|
align-items: center; // 垂直居中
|
|
justify-content: center; // 水平居中
|
|
padding: 2% 0;
|
|
}
|
|
.divider_line {
|
|
position: absolute;
|
|
width: 88%; // 线的宽度
|
|
height: 2px; // 线的高度
|
|
background-color: #0c0b0b;
|
|
left: 6%;
|
|
top: 24%; // 位置在today_recipe_and_calories下方
|
|
}
|
|
.time_line{
|
|
position: absolute;
|
|
width: 15%;
|
|
height: 61%;
|
|
top: 27%;
|
|
left: 5%;
|
|
}
|
|
.input_box_breakfast{
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 15%;
|
|
top: 27%;
|
|
left: 25%;
|
|
background-color: #ffffff;
|
|
border-radius: 30px;
|
|
|
|
}
|
|
.input_box_lunch{
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 15%;
|
|
top: 45%;
|
|
left: 25%;
|
|
background-color: #ffffff;
|
|
border-radius: 30px;
|
|
}
|
|
.input_box_dinner{
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 15%;
|
|
top: 63%;
|
|
left: 25%;
|
|
background-color: #ffffff;
|
|
border-radius: 30px;
|
|
}
|
|
.input_box_midnight_snack{
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 15%;
|
|
top: 81%;
|
|
left: 25%;
|
|
background-color: #ffffff;
|
|
border-radius: 30px;
|
|
|
|
}
|
|
|
|
.input_box_breakfast,
|
|
.input_box_lunch,
|
|
.input_box_dinner,
|
|
.input_box_midnight_snack {
|
|
.food_input {
|
|
position: absolute;
|
|
left: 5%;
|
|
top: 20%;
|
|
width: 70%;
|
|
height: 30%;
|
|
border: none;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.calories_text {
|
|
position: absolute;
|
|
left: 5%;
|
|
bottom: 20%;
|
|
color: #666;
|
|
font-size: 1em;
|
|
|
|
.icon {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.check_button {
|
|
position: absolute;
|
|
right: 5%;
|
|
top: 30%;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: #e0e0e0;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.3s;
|
|
&.active {
|
|
background-color: #4285f4; // 激活时变成蓝色
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|