饮水记录长按删除功能,修复食谱详情中搭配推荐t食品跳转问题

This commit is contained in:
2022-01-20 16:06:30 +08:00
parent edcf04b7e2
commit e7807e9709
7 changed files with 993 additions and 1118 deletions

View File

@@ -7,530 +7,446 @@
-->
<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>
<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>
<!-- 有饮食记录 -->
<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>
<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>
<!-- 没有饮食记录 -->
<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>
<!-- 加餐模块 -->
<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"
/>
<!-- 修改食品弹窗 -->
<!-- 添加食谱弹窗 -->
<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>
<!-- 修改运动弹窗 -->
<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";
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;
},
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("弹窗确认按钮新增");
},
// 弹窗确认按钮新增 这里接口报错了
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();
}).catch(err=>{
uni.showToast({
title:err.message,
icon:'none'
})
});
},
// 弹窗取消按钮
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,
});
},
},
// 弹窗取消按钮
cancleSport(show) {
this.addSportsShow = show;
},
// 删除运动
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;
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;
}
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;
}
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;
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;
}
}
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>