TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

运动模块页面及接口+饮食长按删除功能添加

Browse Source
This commit is contained in:
张冬雪
2022-01-20 10:10:01 +08:00
parent 070c6c729e
commit 62c65253bf
9 changed files with 1114 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
apis/interfaces/sport.js Normal file
View File

@@ -0,0 +1,60 @@
/*
* @Description:运动模块
* @Author: Aimee·Zhang
* @Date: 2022-01-19 13:20:39
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 09:12:34
*/
import { request } from '../index'
/**
* @description:动列表
* @params {*} 可翻页 按名称筛选
* @Date: 2022-01-19 13:21:35
*/
const healthSports = (data) => {
return request({
url: 'health/sports',
data: data
})
}
/**
* @description:添加运动
* @Date: 2022-01-19 13点27分
*/
const addHealthSports = (data) => {
return request({
url: 'health/exercises',
method: 'POST',
data: data
})
}
/**
* @description:编辑运动
* @Date: 2022-01-19 17:15:31
*/
const editHealthSports = (data) => {
return request({
url: `health/exercises/${data.exercise_id}`,
method: 'PUT',
data: data
})
}
/**
* @description: 删除运动
* @Date: 2022-01-20 09:12:35
*/
const delHealthSports = (data) => {
return request({
url: `health/exercises/${data.exercise_id}`,
method: 'DELETE'
})
}
export {
healthSports,
addHealthSports,
editHealthSports,
delHealthSports
}

9
components/foods/index.vue
View File

@@ -4,7 +4,7 @@
* @Author: Aimee·Zhang * @Author: Aimee·Zhang
* @Date: 2022-01-11 12:08:34 * @Date: 2022-01-11 12:08:34
* @LastEditors: Aimee·Zhang * @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-13 11:19:06 * @LastEditTime: 2022-01-20 10:03:43
--> -->
<template> <template>
@@ -59,7 +59,8 @@
<view <view
class="lists-right" class="lists-right"
v-else-if="type==='no-dian'" v-else-if="type==='no-dian'"
@click="editGoods(foodsItem)" @click.stop="editGoods(foodsItem)"
@longpress.stop="longClickGoods(foodsItem)"
> >
<view class="lists-title"> <view class="lists-title">
{{foodsItem.name}} {{foodsItem.name}}
@@ -116,6 +117,10 @@ export default {
editGoods(item) { editGoods(item) {
this.$emit("editGoods", item); this.$emit("editGoods", item);
}, },
// 长按删除
longClickGoods(item) {
this.$emit("longClickGoods", item);
},
}, },
}; };
</script> </script>

205
components/sports/addPopup.vue Normal file
View File

@@ -0,0 +1,205 @@
<!--
* @Description:运动列表
* @Author: Aimee·Zhang
* @Date: 2022-01-19 15:07:02
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 09:09:59
-->
<template>
<view class="foods--lists">
<u-popup
:show="addSportsShow"
:round="4"
mode="center"
>
<view class="popup">
<view class="popup-title">
<span @click="cancleSport">取消</span>
<span class="title">{{selectSports.title || '新增运动'}}</span>
<span @click="comfirmSport">确认</span>
</view>
<view class="popup-item">
<u-image
:lazy-load="true"
:src="selectSports.cover?selectSports.cover:require('../../static/imgs/apple.png')"
radius="10"
width="140rpx"
height="140rpx"
class="goods-img"
/>
<view class="popup-item-title">
{{selectSports.name}}
<view class="des"><span>{{selectSports.calory || '0.0'}}</span> 千卡/60分钟</view>
</view>
<u-icon
v-if="selectSports.title === '编辑运动'"
name="trash"
color="#ddd"
size="20"
label="删除这条数据"
labelColor="#ddd"
:bold="true"
@click="delSport"
style="padding-top: 30rpx;"
/>
</view>
<u-input
placeholder="60"
class="select-time"
v-model="duration"
>
<u--text
text="运动时间："
slot="prefix"
margin="0 3px 0 0"
type="tips"
/>
<u--text
text="分钟"
slot="suffix"
margin="0 3px 0 0"
type="tips"
/>
</u-input>
<view class="all-calory"> ≈ <span> {{total}} </span> 千卡</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
duration: 60,
};
},
props: {
selectSports: {
type: Object,
default: {},
},
addSportsShow: {
type: Boolean,
default: false,
},
},
computed: {
total() {
return ((this.selectSports.calory * this.duration) / 60).toFixed(0);
},
},
watch: {
addSportsShow() {
this.duration = 60;
},
selectSports(val) {
console.log(val);
this.duration = val.duration;
console.log("监听传过来的参数");
},
},
methods: {
// 弹窗确认和取消功能
comfirmSport() {
this.$emit("comfirmSport", true, this.duration);
},
// 取消按钮触发事件
cancleSport() {
this.$emit("cancleSport", false);
},
// 删除按钮触发事件
delSport() {
this.$emit("delSport");
},
},
};
</script>
<style lang="scss" scoped>
// 列表
.foods--lists {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: $margin;
// 弹窗样式
.popup {
width: 600rpx;
// min-height: 700rpx;
position: relative;
.popup-title {
color: $main-color;
font-size: $title-size + 4;
border-bottom: solid 1rpx #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
span {
padding: $padding + 10 $padding;
}
.title {
color: $text-color;
}
}
.popup-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: $padding * 2 $padding $padding $padding;
font-size: $title-size + 4;
color: $text-color;
border-bottom: solid 1rpx #f9f9f9;
.popup-item-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-top: $padding;
.des {
padding-top: $padding * 0.4;
span {
color: $text-price;
padding-right: $padding * 0.3;
}
}
}
}
.select-time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: $padding 0;
// background: $main-color;
color: #fff;
margin: $margin * 3 0 $margin * 2 0;
width: 90%;
border-radius: 10rpx;
margin-left: 5%;
}
.all-calory {
position: absolute;
bottom: $padding * 6;
right: $padding;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding: 0 $padding * 0.4;
font-size: $title-size + 10;
color: $main-color;
}
}
}
}
</style>

212
components/sports/index.vue Normal file
View File

@@ -0,0 +1,212 @@
<!--
* @Description:运动列表
* @Author: Aimee·Zhang
* @Date: 2022-01-19 15:07:02
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 10:03:27
-->
<template>
<view class="foods--lists">
<view
class="foods-lists"
v-for="sportItem in lists"
:key="sportItem.sport_id"
>
<view class="lists-left">
<u-image
:src="sportItem.cover?sportItem.cover:require('../../static/imgs/apple.png')"
:lazy-load="true"
v-if="type === 'add'"
radius="10rpx"
width="100rpx"
height="100rpx"
class="goods-img"
/>
<!-- 新增-->
<view
class="lists-right"
v-if="type === 'add'"
@click="addSport(sportItem)"
>
<view class="lists-title">
{{sportItem.name}}
<view class="des"><span>{{sportItem.calory}}</span> 千卡/60分钟</view>
</view>
<u-icon
name="arrow-right"
color="#ddd"
size="13"
:bold="true"
/>
</view>
<!-- 显示结果 -->
<u-image
:src="sportItem.sport.cover?sportItem.sport.cover:require('../../static/imgs/apple.png')"
:lazy-load="true"
v-if="type === 'edit'"
radius="10rpx"
width="100rpx"
height="100rpx"
class="goods-img"
/>
<view
class="lists-right"
v-if="type==='edit'"
@click.stop="editSport(sportItem)"
@longpress.stop="longClick(sportItem)"
>
<view class="lists-title">
{{sportItem.sport.name}}
<view class="des">{{sportItem.duration}}分钟</view>
</view>
<view class="lists-right1">
{{sportItem.calory}}<span class="dw">千卡</span>
<u-icon
name="arrow-right"
color="#ddd"
size="13"
:bold="true"
/>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
lists: {
type: Array,
default: [],
},
type: {
type: String,
default: "add",
},
},
methods: {
// 添加运动模块
addSport(item) {
this.$emit("addSport", item);
},
// 编辑运动
editSport(item) {
this.$emit("editSport", item);
},
// 长按删除触发事件
longClick(item) {
this.$emit("longClick", item);
},
},
};
</script>
<style lang="scss" scoped>
// 列表
.foods-lists {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: $margin;
.lists-right {
flex: 1;
font-size: $title-size-m - 6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
color: $text-gray-m;
border-bottom: solid 1rpx #f7f7f7;
margin-left: $margin * 0.8;
padding: $padding 0;
.dw {
margin: 0 $margin * 0.6 0 $margin * 0.4;
}
.lists-right1 {
font-size: $title-size-m - 6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: $text-gray-m;
font-weight: normal;
.dw {
margin: 0 $margin * 0.6 0 $margin * 0.4;
}
}
}
.goods-img {
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: 20rpx;
opacity: 0.4;
}
.lists-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
font-size: $title-size - 2;
color: $text-color;
font-weight: bold;
flex: 1;
.lists-title {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-color;
.des {
margin-top: 10rpx;
}
span {
color: $text-price;
font-size: $title-size-m - 6;
font-weight: normal;
padding-right: $padding * 0.3;
}
.des {
color: $text-gray-m;
font-size: $title-size-m - 6;
font-weight: normal;
}
}
}
.dian {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
margin-right: $margin;
}
.dian1 {
background: #fbbf0f;
}
.dian2 {
background: #fa624d;
}
.dian3 {
background: #02c7bd;
}
.dianlists {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
}
}
</style>

80
pages.json
View File

@@ -1,5 +1,6 @@
{ {
"pages": [{ "pages": [
{
"path": "pages/index/index", "path": "pages/index/index",
"name": "Index", "name": "Index",
"style": { "style": {
@@ -67,6 +68,15 @@
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
}, },
{
"path": "pages/record/addExercises",
"name": "AddExercises",
"style": {
"navigationBarTitleText": "添加运动",
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
}
},
{ {
"path": "pages/evaluation/list", "path": "pages/evaluation/list",
"name": "EvaluationList", "name": "EvaluationList",
@@ -139,13 +149,15 @@
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
"buttons": [{ "buttons": [
"float": "right", {
"text": "\ue603", "float": "right",
"fontSrc": "/static/iconfont.ttf", "text": "\ue603",
"color": "#000", "fontSrc": "/static/iconfont.ttf",
"fontSize": "20px" "color": "#000",
}] "fontSize": "20px"
}
]
} }
} }
} }
@@ -355,7 +367,8 @@
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"buttons": [{ "buttons": [
{
"float": "left", "float": "left",
"text": "\ue605", "text": "\ue605",
"fontSrc": "/static/iconfont.ttf", "fontSrc": "/static/iconfont.ttf",
@@ -381,21 +394,23 @@
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
"type": "default", "type": "default",
"buttons": [{ "buttons": [
"float": "right", {
"fontSrc": "/static/iconfont.ttf", "float": "right",
"text": "\ue607", "fontSrc": "/static/iconfont.ttf",
"fontSize": "20px" "text": "\ue607",
}] "fontSize": "20px"
}
]
} }
} }
} }
}, },
{ {
"path": "pages/im/private/setting", "path": "pages/im/private/setting",
"style": { "style": {
"navigationBarTitleText": "设置" "navigationBarTitleText": "设置"
} }
}, },
{ {
"path": "pages/im/friends/index", "path": "pages/im/friends/index",
@@ -473,14 +488,16 @@
"titleNView": { "titleNView": {
"backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)", "backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)",
"type": "transparent", "type": "transparent",
"buttons": [{ "buttons": [
"float": "right", {
"text": "\ue607", "float": "right",
"fontSrc": "/static/iconfont.ttf", "text": "\ue607",
"color": "#FFF", "fontSrc": "/static/iconfont.ttf",
"fontSize": "20px", "color": "#FFF",
"background": "rgba(0,0,0,0)" "fontSize": "20px",
}], "background": "rgba(0,0,0,0)"
}
],
"backButton": { "backButton": {
"background": "rgba(0,0,0,0)" "background": "rgba(0,0,0,0)"
} }
@@ -541,7 +558,8 @@
"tabBar": { "tabBar": {
"borderStyle": "white", "borderStyle": "white",
"selectedColor": "#34CE98", "selectedColor": "#34CE98",
"list": [{ "list": [
{
"iconPath": "static/tabBar/tabBar_00.png", "iconPath": "static/tabBar/tabBar_00.png",
"selectedIconPath": "static/tabBar/tabBar_show_00.png", "selectedIconPath": "static/tabBar/tabBar_show_00.png",
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
@@ -583,4 +601,4 @@
"easycom": { "easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
} }
} }

183
pages/record/addExercises.vue Normal file
View File

@@ -0,0 +1,183 @@
<!--
* @Description:
* @Author: Aimee·Zhang
* @Date: 2022-01-11 11:27:17
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-19 16:57:19
-->
<template>
<view class="add-foods">
<!-- 搜索页面 -->
<u-search
:show-action="true"
actionText="搜索"
:animation="true"
:clearabled="true"
placeholder="请输入运动名称"
@custom="searchCustom"
@clear="clearSearch"
v-model="name"
/>
<!-- 运动列表 -->
<sports
type="add"
:lists="lists"
@addSport="addSport"
/>
<!-- 添加弹窗 -->
<addPopup
:selectSports="selectSports"
:addSportsShow="addSportsShow"
@comfirmSport="comfirmSport"
@cancleSport="cancleSport"
/>
</view>
</template>
<script>
import sports from "@/components/sports";
import addPopup from "@/components/sports/addPopup";
import { healthSports, addHealthSports } from "@/apis/interfaces/sport.js";
import moment, { duration } from "moment";
export default {
components: { sports, addPopup },
data() {
return {
addSportsShow: false, // 添加运动弹窗显示
selectSports: {}, // 选择新增的运动
lists: [], // 运动列表
page: 1,
has_more: true,
name: "", // 搜索运动名称
today: moment(new Date()).format("YYYY-MM-DD"),
};
},
onLoad() {
this.getExercises();
},
// 触底加载更多
onReachBottom() {
if (!this.has_more) {
uni.showToast({
title: "没有更多啦~",
icon: "none",
});
} else {
this.page = this.page + 1;
this.getExercises();
}
},
methods: {
// 获取运动列表
getExercises() {
let data = {
page: this.page,
name: this.name,
};
healthSports(data).then((res) => {
this.lists = this.lists.concat(res.data);
this.has_more = res.page.has_more;
});
},
// 显示弹窗内容
addSport(item) {
console.log(item);
this.selectSports = item;
this.selectSports.duration = 60;
this.addSportsShow = true;
},
// 弹窗确认按钮新增
comfirmSport(show, duration) {
let params = {
unit: "1", // 时间单位：分钟 1 小时 2
duration: duration, // 时常
sport_id: this.selectSports.sport_id, // 运动id
date: this.today, // 日期
};
addHealthSports(params).then((res) => {
this.addSportsShow = false;
this.selectSports = {};
this.$Router.back();
});
console.log("弹窗确认按钮新增");
},
// 弹窗取消按钮
cancleSport(show) {
this.addSportsShow = show;
this.duration = 60;
console.log("弹窗取消按钮");
},
// 添加运动弹窗显示
//#region 搜索相关方法 start
// 点击搜索左侧按钮
searchCustom(e) {
console.log(e);
this.name = e;
this.reset();
},
// 清空数组重新请求数据
reset() {
this.page = 1;
this.has_more = true;
this.lists = [];
this.getExercises();
},
// 点击搜索后面按钮触发事件事件
clearSearch() {
this.name = "";
this.reset();
},
//#endregion 搜索相关方法 end
},
};
</script>
<style lang="scss" scoped>
.add-foods {
padding: $padding;
.lists {
padding: $padding * 0.6 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.lists-right {
flex: 1;
font-size: $title-size-m - 6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
color: $text-gray-m;
border-bottom: solid 1rpx #f7f7f7;
margin-left: $margin * 0.8;
padding: $padding 0;
}
.lists-title {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-color;
.des {
margin-top: 10rpx;
}
span {
color: $text-price;
font-size: $title-size-m - 6;
font-weight: normal;
padding-right: $padding * 0.3;
}
.des {
color: $text-gray-m;
font-size: $title-size-m - 6;
font-weight: normal;
}
}
}
}
</style>

326
pages/record/addFoods.vue
View File

@@ -7,165 +7,187 @@
--> -->
<template> <template>
<view class="add-foods"> <view class="add-foods">
<view class="re"> <view class="re">
<view>低等热量</view> <view>低等热量</view>
<view>中等热量</view> <view>中等热量</view>
<view>高等热量</view> <view>高等热量</view>
</view> </view>
<!-- 搜索页面 --> <!-- 搜索页面 -->
<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入食品名称" @custom="searchCustom" @clear="clearSearch" v-model="name" /> <u-search
<!-- 食品列表 --> :show-action="true"
<goodsList :lists="lists" type="dian" @addGoods="addGoods" /> actionText="搜索"
<!-- 添加食谱弹窗 --> :animation="true"
<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle" @close="closeHandle" @tabGoodsInfo="tabGoodsInfo" max="999" /> :clearabled="true"
</view> placeholder="请输入食品名称"
@custom="searchCustom"
@clear="clearSearch"
v-model="name"
/>
<!-- 食品列表 -->
<goodsList
:lists="lists"
type="dian"
@addGoods="addGoods"
/>
<!-- 添加食谱弹窗 -->
<addFoods
v-if="addShow"
:addShow="addShow"
:selectGoods="selectGoods"
:decimals="true"
@confirm="confirmHandle"
@close="closeHandle"
@tabGoodsInfo="tabGoodsInfo"
max="999"
/>
</view>
</template> </template>
<script> <script>
import goodsList from '@/components/foods'; import goodsList from "@/components/foods";
import addFoods from '@/components/add-goods-template/add-goods-template'; import addFoods from "@/components/add-goods-template/add-goods-template";
import { healthFoods, addHealthFoods } from '@/apis/interfaces/foods.js'; import { healthFoods, addHealthFoods } from "@/apis/interfaces/foods.js";
import moment from 'moment'; import moment from "moment";
export default { export default {
components: { goodsList, addFoods }, components: { goodsList, addFoods },
data() { data() {
return { return {
addShow: false, // 添加食品显示 addShow: false, // 添加食品显示
selectGoods: [], // 选择新增的食品 selectGoods: [], // 选择新增的食品
editGoodsId: '', // 编辑食物 editGoodsId: "", // 编辑食物
type: '', // 新增食品时候 1早2午3晚4早加5午加6晚加 type: "", // 新增食品时候 1早2午3晚4早加5午加6晚加
lists: [], // 食品列表 lists: [], // 食品列表
page: 1, page: 1,
has_more: true, has_more: true,
name: '', // 搜索食品名称 name: "", // 搜索食品名称
date: moment(new Date()).format('YYYY-MM-DD') date: moment(new Date()).format("YYYY-MM-DD"),
}; };
}, },
onShow() { onShow() {
// 有id就是编辑不需要重新处理type了 // 有id就是编辑不需要重新处理type了
if (this.$Route.query.id) { if (this.$Route.query.id) {
this.editGoodsId = this.$Route.query.id; this.editGoodsId = this.$Route.query.id;
return; return;
} }
//没有id的时候就是新增要处理type //没有id的时候就是新增要处理type
this.type = this.$Route.query.type; this.type = this.$Route.query.type;
// this.getFoods(); // this.getFoods();
}, },
onLoad() { onLoad() {
this.getFoods(); this.getFoods();
}, },
// 触底加载更多 // 触底加载更多
onReachBottom() { onReachBottom() {
if (!this.has_more) { if (!this.has_more) {
uni.showToast({ uni.showToast({
title: '没有更多啦~', title: "没有更多啦~",
icon: 'none' icon: "none",
}); });
} else { } else {
this.page = this.page + 1; this.page = this.page + 1;
this.getFoods(); this.getFoods();
} }
}, },
methods: { methods: {
// 获取食品列表 // 获取食品列表
getFoods() { getFoods() {
let data = { let data = {
page: this.page, page: this.page,
name: this.name name: this.name,
}; };
healthFoods(data).then(res => { healthFoods(data).then((res) => {
console.log(res); console.log(res);
this.lists = this.lists.concat(res.data); this.lists = this.lists.concat(res.data);
this.has_more = res.page.has_more; this.has_more = res.page.has_more;
}); });
}, },
// 监听点击键盘触发返回值新增食品 // 监听点击键盘触发返回值新增食品
confirmHandle(value) { confirmHandle(value) {
console.log(value); console.log(value);
// 新添加食物 // 新添加食物
let data = { let data = {
type: this.type, type: this.type,
ser: 1, ser: 1,
weight: value, weight: value,
food_id: this.selectGoods[0].food_id, food_id: this.selectGoods[0].food_id,
date: this.date date: this.date,
}; };
this.addHealthFoods(data); this.addHealthFoods(data);
}, },
// 添加食物 // 添加食物
addHealthFoods(data) { addHealthFoods(data) {
addHealthFoods(data).then(res => { addHealthFoods(data).then((res) => {
console.log(res); console.log(res);
this.addShow = false; this.addShow = false;
this.$Router.back(); this.$Router.back();
}); });
}, },
closeHandle() { closeHandle() {
//键盘关闭的回调函数 //键盘关闭的回调函数
this.addShow = false; this.addShow = false;
}, },
// 监听子组件的新增方法 // 监听子组件的新增方法
addGoods(e) { addGoods(e) {
this.addShow = true; this.addShow = true;
this.selectGoods = [e]; this.selectGoods = [e];
}, },
// 点击搜索左侧按钮 // 点击搜索左侧按钮
searchCustom(e) { searchCustom(e) {
console.log(e); console.log(e);
this.name = e; this.name = e;
this.reset(); this.reset();
}, },
// 清空数组重新请求数据 // 清空数组重新请求数据
reset() { reset() {
this.page = 1; this.page = 1;
this.has_more = true; this.has_more = true;
this.lists = []; this.lists = [];
this.getFoods(); this.getFoods();
}, },
// 点击搜索后面按钮触发事件事件 // 点击搜索后面按钮触发事件事件
clearSearch() { clearSearch() {
this.name = ''; this.name = "";
this.reset(); this.reset();
}, },
// 跳转到食品详情 // 跳转到食品详情
tabGoodsInfo(e) { tabGoodsInfo(e) {
this.$Router.push({ this.$Router.push({
name: 'rankingDetails', name: "rankingDetails",
params: e params: e,
}); });
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.add-foods { .add-foods {
padding: $padding; padding: $padding;
.re{ .re {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
box-sizing: border-box; box-sizing: border-box;
padding:$padding $padding * 2; padding: $padding $padding * 2;
font-size: $title-size-m; font-size: $title-size-m;
view:before{ view:before {
width: 20rpx; width: 20rpx;
height: 20rpx; height: 20rpx;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
margin-right: 10rpx; margin-right: 10rpx;
content: ''; content: "";
} }
view:nth-child(3):before { view:nth-child(3):before {
background: #fa624d; background: #fa624d;
} }
view:nth-child(2):before { view:nth-child(2):before {
background: #fbbf0f; background: #fbbf0f;
} }
view:nth-child(1):before { view:nth-child(1):before {
background: #02c7bd; background: #02c7bd;
} }
} }
} }
</style> </style>

287
pages/record/foods.vue
View File

@@ -3,27 +3,36 @@
* @Author: Aimee·Zhang * @Author: Aimee·Zhang
* @Date: 2022-01-11 08:54:49 * @Date: 2022-01-11 08:54:49
* @LastEditors: Aimee·Zhang * @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-14 09:29:23 * @LastEditTime: 2022-01-20 10:05:15
--> -->
<template> <template>
<view class="record--foods"> <view class="record--foods">
<!-- 饮食进度条 --> <!-- 饮食进度条 -->
<view class="cricle-content"> <view class="cricle-content">
<view class="info">饮食摄入<span>{{calorys.intake_total}}</span></view> <view class="info">
饮食摄入
<span>{{ calorys.intake_total }}</span>
</view>
<arprogress <arprogress
:percent="calorys.exceeds?100:calorys.ratio" :percent="calorys.exceeds ? 100 : calorys.ratio"
inactiveColor="#f5f4f9" inactiveColor="#f5f4f9"
:activeColor="calorys.exceeds?'#f00':'#34ce98'" :activeColor="calorys.exceeds ? '#f00' : '#34ce98'"
width="300" width="300"
class="cricle" class="cricle"
borderWidth="20" borderWidth="20"
> >
<span>{{calorys.exceeds?'多吃了':'还可以吃'}}</span> <span>{{ calorys.exceeds ? '多吃了' : '还可以吃' }}</span>
<span :class="['num',calorys.exceeds?'num1':'']">{{calorys.amount}}</span> <span :class="['num', calorys.exceeds ? 'num1' : '']">{{ calorys.amount }}</span>
<span>推荐预算{{calorys.goal}}</span> <span>推荐预算{{ calorys.goal }}</span>
</arprogress> </arprogress>
<view class="info" @click="errToast">运动消耗<span>0</span></view> <view
class="info"
@click="errToast"
>
运动消耗
<span>{{ calorys.exercise_total }}</span>
</view>
<view class="ic-left">摄入量推荐</view> <view class="ic-left">摄入量推荐</view>
<u-icon <u-icon
class="ic-day" class="ic-day"
@@ -38,16 +47,20 @@
</view> </view>
<!-- 有饮食记录 --> <!-- 有饮食记录 -->
<template v-if="intakes.length>0"> <template v-if="intakes.length > 0">
<view <view
class="foods-add" class="foods-add"
v-for="(it,index) in intakes" v-for="(it, index) in intakes"
:key="index" :key="index"
> >
<view class="foods-title"> <view class="foods-title">
<view class="title-left">{{it.name}}<span v-if="it.remark">{{it.remark || ''}}</span></view> <view class="title-left">
{{ it.name }}
<span v-if="it.remark">{{ it.remark || '' }}</span>
</view>
<view class="title-right"> <view class="title-right">
{{it.total}}<span class="dw">千卡</span> {{ it.total }}
<span class="dw">千卡</span>
<u-icon <u-icon
name="arrow-right" name="arrow-right"
color="#ddd" color="#ddd"
@@ -60,15 +73,41 @@
:lists="it.intake" :lists="it.intake"
type="no-dian" type="no-dian"
@editGoods="editGoods" @editGoods="editGoods"
@longClickGoods="longClickGoods"
/> />
</view> </view>
</template> </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 <view
class="no-foods" class="no-foods"
v-else v-if="sports.length === 0 && intakes.length === 0"
> >
<u-image <u-image
:src="require('../../static/imgs/no-foods.png')" :src="require('../../static/imgs/no-foods.png')"
@@ -81,6 +120,7 @@
<view>还没有添加今日饮食记录</view> <view>还没有添加今日饮食记录</view>
<view>请点击屏幕下方按钮来添加</view> <view>请点击屏幕下方按钮来添加</view>
</view> </view>
<!-- 加餐模块 --> <!-- 加餐模块 -->
<u-action-sheet <u-action-sheet
:actions="addEatList" :actions="addEatList"
@@ -104,22 +144,27 @@
text="+早餐" text="+早餐"
@click="tabbarClick" @click="tabbarClick"
:icon="require('../../static/imgs/foods-1.png')" :icon="require('../../static/imgs/foods-1.png')"
></u-tabbar-item> />
<u-tabbar-item <u-tabbar-item
text="+午餐" text="+午餐"
@click="tabbarClick" @click="tabbarClick"
:icon="require('../../static/imgs/foods-2.png')" :icon="require('../../static/imgs/foods-2.png')"
></u-tabbar-item> />
<u-tabbar-item <u-tabbar-item
text="+晚餐" text="+晚餐"
@click="tabbarClick" @click="tabbarClick"
:icon="require('../../static/imgs/foods-3.png')" :icon="require('../../static/imgs/foods-3.png')"
></u-tabbar-item> />
<u-tabbar-item <u-tabbar-item
text="+加餐" text="+加餐"
@click="tabbarClick" @click="tabbarClick"
:icon="require('../../static/imgs/foods-4.png')" :icon="require('../../static/imgs/foods-4.png')"
></u-tabbar-item> />
<u-tabbar-item
text="+运动"
@click="tabbarClick"
:icon="require('../../static/imgs/foods-5.png')"
/>
</u-tabbar> </u-tabbar>
<!-- 修改食品弹窗 --> <!-- 修改食品弹窗 -->
@@ -135,24 +180,44 @@
@tabGoodsInfo="tabGoodsInfo" @tabGoodsInfo="tabGoodsInfo"
max="999" max="999"
/> />
<!-- 修改运动弹窗 -->
<addPopup
:selectSports="selectSports"
:addSportsShow="addSportsShow"
@comfirmSport="comfirmSport"
@cancleSport="cancleSport"
@delSport="delSport"
/>
</view> </view>
</template> </template>
<script> <script>
import arprogress from "@/components/ar-circle-progress/index.vue"; import arprogress from "@/components/ar-circle-progress/index.vue";
import goodsList from "@/components/foods"; import goodsList from "@/components/foods";
import { plans, editHealthFoods, delHealthFoods } from "@/apis/interfaces/foods.js"; import {
plans,
editHealthFoods,
delHealthFoods,
} from "@/apis/interfaces/foods.js";
import moment from "moment"; import moment from "moment";
import addFoods from "@/components/add-goods-template/add-goods-template"; 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 { export default {
components: { components: {
arprogress, arprogress,
goodsList, goodsList,
addFoods, addFoods,
addPopup,
sports,
}, },
data() { data() {
return { return {
lists: [], lists: [],
addShow: false, // 添加食品显示
selectGoods: [], // 选择新增的食品
addEatShow: false, // 加餐弹窗默认不显示 addEatShow: false, // 加餐弹窗默认不显示
addEatList: [ addEatList: [
{ {
@@ -171,38 +236,134 @@ export default {
today: moment(new Date()).format("YYYY-MM-DD"), today: moment(new Date()).format("YYYY-MM-DD"),
calorys: {}, // 当日食谱推荐页面的信息 calorys: {}, // 当日食谱推荐页面的信息
intakes: [], // 当日摄入列表 intakes: [], // 当日摄入列表
addShow: false, // 添加食品显示 sports: [], // 运动列表
selectGoods: [], // 选择新增的食品 sportsTotal: 0,
addSportsShow: false, // 添加运动弹窗显示
selectSports: {}, // 选择新增的运动
}; };
}, },
onShow() { onShow() {
this.getList(); this.getList();
}, },
methods: { methods: {
// 错误提示 // 编辑运动
errToast(){ editSport(item) {
uni.showToast({ this.selectSports = {
title:'努力开发中~', name: item.sport.name,
icon:'none' 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() { getList() {
plans(this.today).then((res) => { plans(this.today).then((res) => {
this.calorys = res.calorys; this.calorys = res.calorys;
this.calorys.ratio = Number(this.calorys.ratio);
this.intakes = res.intakes; this.intakes = res.intakes;
this.sports = res.exercises.lists;
this.sportsTotal = res.exercises.total;
}); });
}, },
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6) // 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
tabbarClick(e) { tabbarClick(e) {
console.log(e);
this.tabarIndex = e; this.tabarIndex = e;
if (e === 3) { if (e === 3) {
this.addEatShow = true; this.addEatShow = true;
} else { } else {
uni.navigateTo({ if (e === 4) {
url: `/pages/record/addFoods?type=${ // 新增运动
e === 0 ? 1 : e === 1 ? 3 : 5 uni.navigateTo({
}`, url: `/pages/record/addExercises`,
}); });
} else {
uni.navigateTo({
url: `/pages/record/addFoods?type=${
e === 0 ? 1 : e === 1 ? 3 : 5
}`,
});
}
} }
}, },
// 选择了加餐跳转 // 选择了加餐跳转
@@ -260,7 +421,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.record--foods { .record--foods {
padding: $padding $padding $padding * 2 $padding; padding: $padding $padding $padding * 7 $padding;
// background: green; // background: green;
} }
// 饮食进度条 // 饮食进度条
@@ -337,39 +498,39 @@ export default {
.foods-add { .foods-add {
border-bottom: solid 1rpx #f7f7f7; border-bottom: solid 1rpx #f7f7f7;
margin-top: $margin; margin-top: $margin;
// 主标题 }
.foods-title { // 主标题
.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; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
color: $text-color; color: $main-color;
padding: $padding * 0.5 0; .dw {
.title-left { margin: 0 $margin * 0.6 0 $margin * 0.4;
font-size: $title-size; color: $text-gray;
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> </style>

BIN
static/imgs/foods-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB