运动模块页面及接口+饮食长按删除功能添加
This commit is contained in:
60
apis/interfaces/sport.js
Normal file
60
apis/interfaces/sport.js
Normal 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
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-11 12:08:34
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-13 11:19:06
|
||||
* @LastEditTime: 2022-01-20 10:03:43
|
||||
-->
|
||||
|
||||
<template>
|
||||
@@ -59,7 +59,8 @@
|
||||
<view
|
||||
class="lists-right"
|
||||
v-else-if="type==='no-dian'"
|
||||
@click="editGoods(foodsItem)"
|
||||
@click.stop="editGoods(foodsItem)"
|
||||
@longpress.stop="longClickGoods(foodsItem)"
|
||||
>
|
||||
<view class="lists-title">
|
||||
{{foodsItem.name}}
|
||||
@@ -116,6 +117,10 @@ export default {
|
||||
editGoods(item) {
|
||||
this.$emit("editGoods", item);
|
||||
},
|
||||
// 长按删除
|
||||
longClickGoods(item) {
|
||||
this.$emit("longClickGoods", item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
205
components/sports/addPopup.vue
Normal file
205
components/sports/addPopup.vue
Normal 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
212
components/sports/index.vue
Normal 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>
|
||||
36
pages.json
36
pages.json
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"name": "Index",
|
||||
"style": {
|
||||
@@ -67,6 +68,15 @@
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/record/addExercises",
|
||||
"name": "AddExercises",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加运动",
|
||||
"navigationBarBackgroundColor": "#34CE98",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/evaluation/list",
|
||||
"name": "EvaluationList",
|
||||
@@ -139,13 +149,15 @@
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"buttons": [{
|
||||
"buttons": [
|
||||
{
|
||||
"float": "right",
|
||||
"text": "\ue603",
|
||||
"fontSrc": "/static/iconfont.ttf",
|
||||
"color": "#000",
|
||||
"fontSize": "20px"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -355,7 +367,8 @@
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"buttons": [{
|
||||
"buttons": [
|
||||
{
|
||||
"float": "left",
|
||||
"text": "\ue605",
|
||||
"fontSrc": "/static/iconfont.ttf",
|
||||
@@ -381,12 +394,14 @@
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"type": "default",
|
||||
"buttons": [{
|
||||
"buttons": [
|
||||
{
|
||||
"float": "right",
|
||||
"fontSrc": "/static/iconfont.ttf",
|
||||
"text": "\ue607",
|
||||
"fontSize": "20px"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -473,14 +488,16 @@
|
||||
"titleNView": {
|
||||
"backgroundImage": "linear-gradient(to right, #34ce98, #22aa98)",
|
||||
"type": "transparent",
|
||||
"buttons": [{
|
||||
"buttons": [
|
||||
{
|
||||
"float": "right",
|
||||
"text": "\ue607",
|
||||
"fontSrc": "/static/iconfont.ttf",
|
||||
"color": "#FFF",
|
||||
"fontSize": "20px",
|
||||
"background": "rgba(0,0,0,0)"
|
||||
}],
|
||||
}
|
||||
],
|
||||
"backButton": {
|
||||
"background": "rgba(0,0,0,0)"
|
||||
}
|
||||
@@ -541,7 +558,8 @@
|
||||
"tabBar": {
|
||||
"borderStyle": "white",
|
||||
"selectedColor": "#34CE98",
|
||||
"list": [{
|
||||
"list": [
|
||||
{
|
||||
"iconPath": "static/tabBar/tabBar_00.png",
|
||||
"selectedIconPath": "static/tabBar/tabBar_show_00.png",
|
||||
"pagePath": "pages/index/index",
|
||||
|
||||
183
pages/record/addExercises.vue
Normal file
183
pages/record/addExercises.vue
Normal 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>
|
||||
@@ -14,18 +14,40 @@
|
||||
<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"
|
||||
actionText="搜索"
|
||||
:animation="true"
|
||||
:clearabled="true"
|
||||
placeholder="请输入食品名称"
|
||||
@custom="searchCustom"
|
||||
@clear="clearSearch"
|
||||
v-model="name"
|
||||
/>
|
||||
<!-- 食品列表 -->
|
||||
<goodsList :lists="lists" type="dian" @addGoods="addGoods" />
|
||||
<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" />
|
||||
<addFoods
|
||||
v-if="addShow"
|
||||
:addShow="addShow"
|
||||
:selectGoods="selectGoods"
|
||||
:decimals="true"
|
||||
@confirm="confirmHandle"
|
||||
@close="closeHandle"
|
||||
@tabGoodsInfo="tabGoodsInfo"
|
||||
max="999"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import goodsList from '@/components/foods';
|
||||
import addFoods from '@/components/add-goods-template/add-goods-template';
|
||||
import { healthFoods, addHealthFoods } from '@/apis/interfaces/foods.js';
|
||||
import moment from 'moment';
|
||||
import goodsList from "@/components/foods";
|
||||
import addFoods from "@/components/add-goods-template/add-goods-template";
|
||||
import { healthFoods, addHealthFoods } from "@/apis/interfaces/foods.js";
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
components: { goodsList, addFoods },
|
||||
@@ -33,13 +55,13 @@ export default {
|
||||
return {
|
||||
addShow: false, // 添加食品显示
|
||||
selectGoods: [], // 选择新增的食品
|
||||
editGoodsId: '', // 编辑食物
|
||||
type: '', // 新增食品时候 1早2午3晚4早加5午加6晚加
|
||||
editGoodsId: "", // 编辑食物
|
||||
type: "", // 新增食品时候 1早2午3晚4早加5午加6晚加
|
||||
lists: [], // 食品列表
|
||||
page: 1,
|
||||
has_more: true,
|
||||
name: '', // 搜索食品名称
|
||||
date: moment(new Date()).format('YYYY-MM-DD')
|
||||
name: "", // 搜索食品名称
|
||||
date: moment(new Date()).format("YYYY-MM-DD"),
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
@@ -59,8 +81,8 @@ export default {
|
||||
onReachBottom() {
|
||||
if (!this.has_more) {
|
||||
uni.showToast({
|
||||
title: '没有更多啦~',
|
||||
icon: 'none'
|
||||
title: "没有更多啦~",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
this.page = this.page + 1;
|
||||
@@ -72,9 +94,9 @@ export default {
|
||||
getFoods() {
|
||||
let data = {
|
||||
page: this.page,
|
||||
name: this.name
|
||||
name: this.name,
|
||||
};
|
||||
healthFoods(data).then(res => {
|
||||
healthFoods(data).then((res) => {
|
||||
console.log(res);
|
||||
this.lists = this.lists.concat(res.data);
|
||||
this.has_more = res.page.has_more;
|
||||
@@ -89,13 +111,13 @@ export default {
|
||||
ser: 1,
|
||||
weight: value,
|
||||
food_id: this.selectGoods[0].food_id,
|
||||
date: this.date
|
||||
date: this.date,
|
||||
};
|
||||
this.addHealthFoods(data);
|
||||
},
|
||||
// 添加食物
|
||||
addHealthFoods(data) {
|
||||
addHealthFoods(data).then(res => {
|
||||
addHealthFoods(data).then((res) => {
|
||||
console.log(res);
|
||||
this.addShow = false;
|
||||
this.$Router.back();
|
||||
@@ -125,17 +147,17 @@ export default {
|
||||
},
|
||||
// 点击搜索后面按钮触发事件事件
|
||||
clearSearch() {
|
||||
this.name = '';
|
||||
this.name = "";
|
||||
this.reset();
|
||||
},
|
||||
// 跳转到食品详情
|
||||
tabGoodsInfo(e) {
|
||||
this.$Router.push({
|
||||
name: 'rankingDetails',
|
||||
params: e
|
||||
name: "rankingDetails",
|
||||
params: e,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -155,7 +177,7 @@ export default {
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 10rpx;
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
view:nth-child(3):before {
|
||||
background: #fa624d;
|
||||
|
||||
@@ -3,14 +3,17 @@
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-11 08:54:49
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 09:29:23
|
||||
* @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>
|
||||
<view class="info">
|
||||
饮食摄入
|
||||
<span>{{ calorys.intake_total }}</span>
|
||||
</view>
|
||||
<arprogress
|
||||
:percent="calorys.exceeds ? 100 : calorys.ratio"
|
||||
inactiveColor="#f5f4f9"
|
||||
@@ -23,7 +26,13 @@
|
||||
<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="info"
|
||||
@click="errToast"
|
||||
>
|
||||
运动消耗
|
||||
<span>{{ calorys.exercise_total }}</span>
|
||||
</view>
|
||||
<view class="ic-left">摄入量推荐</view>
|
||||
<u-icon
|
||||
class="ic-day"
|
||||
@@ -45,9 +54,13 @@
|
||||
:key="index"
|
||||
>
|
||||
<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">
|
||||
{{it.total}}<span class="dw">千卡</span>
|
||||
{{ it.total }}
|
||||
<span class="dw">千卡</span>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#ddd"
|
||||
@@ -60,15 +73,41 @@
|
||||
: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-else
|
||||
v-if="sports.length === 0 && intakes.length === 0"
|
||||
>
|
||||
<u-image
|
||||
:src="require('../../static/imgs/no-foods.png')"
|
||||
@@ -81,6 +120,7 @@
|
||||
<view>还没有添加今日饮食记录</view>
|
||||
<view>请点击屏幕下方按钮来添加</view>
|
||||
</view>
|
||||
|
||||
<!-- 加餐模块 -->
|
||||
<u-action-sheet
|
||||
:actions="addEatList"
|
||||
@@ -104,22 +144,27 @@
|
||||
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-item
|
||||
text="+运动"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-5.png')"
|
||||
/>
|
||||
</u-tabbar>
|
||||
|
||||
<!-- 修改食品弹窗 -->
|
||||
@@ -135,24 +180,44 @@
|
||||
@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 {
|
||||
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: [
|
||||
{
|
||||
@@ -171,32 +236,127 @@ export default {
|
||||
today: moment(new Date()).format("YYYY-MM-DD"),
|
||||
calorys: {}, // 当日食谱推荐页面的信息
|
||||
intakes: [], // 当日摄入列表
|
||||
addShow: false, // 添加食品显示
|
||||
selectGoods: [], // 选择新增的食品
|
||||
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'
|
||||
})
|
||||
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=${
|
||||
@@ -204,6 +364,7 @@ export default {
|
||||
}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// 选择了加餐跳转
|
||||
selectClick(e) {
|
||||
@@ -260,7 +421,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.record--foods {
|
||||
padding: $padding $padding $padding * 2 $padding;
|
||||
padding: $padding $padding $padding * 7 $padding;
|
||||
// background: green;
|
||||
}
|
||||
// 饮食进度条
|
||||
@@ -337,6 +498,7 @@ export default {
|
||||
.foods-add {
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
margin-top: $margin;
|
||||
}
|
||||
// 主标题
|
||||
.foods-title {
|
||||
display: flex;
|
||||
@@ -371,5 +533,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/imgs/foods-5.png
Normal file
BIN
static/imgs/foods-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Reference in New Issue
Block a user