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

新增记录模块页面

Browse Source
This commit is contained in:
张冬雪
2022-01-11 17:15:00 +08:00
parent c810dbdb1d
commit f7b4468119
83 changed files with 16340 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
pages/record/foods.vue Normal file
View File

@@ -0,0 +1,289 @@
<!--
* @Description:
* @Author: Aimee·Zhang
* @Date: 2022-01-11 08:54:49
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-11 15:41:12
-->
<template>
<view class="record--foods">
<!-- 饮食进度条 -->
<view class="cricle-content">
<view class="info">饮食摄入<span>879</span></view>
<arprogress
:percent="percent"
inactiveColor="#f5f4f9"
activeColor="#34ce98"
width="300"
class="cricle"
borderWidth="20"
>
<span>还可以吃</span>
<span class="num">1829</span>
<span>推荐预算1829</span>
</arprogress>
<view class="info">运动消耗<span>879</span></view>
<view class="ic-left">摄入量推荐</view>
<u-icon
class="ic-day"
name="checkmark-circle"
color="#34ce98"
size="10"
label="4天"
labelColor="#34ce98"
labelSize="10"
space="3"
/>
</view>
<!-- 没有饮食记录 -->
<!-- <view class="no-foods">
<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="foods-add"
v-for="item in 2"
:key="item"
>
<view class="foods-title">
<view class="title-left">早餐<span>建议493~603千卡</span></view>
<view class="title-right">
558<span class="dw">千卡</span>
<u-icon
name="arrow-right"
color="#ddd"
size="13"
:bold="true"
/>
</view>
</view>
<goodsList
:lists="lists"
type="no-dian"
@editGoods="editGoods"
/>
</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>
<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>
</view>
</template>
<script>
import arprogress from "@/components/ar-circle-progress/index.vue";
import goodsList from "@/components/foods";
export default {
components: {
arprogress,
goodsList,
},
data() {
return {
percent: 1, // 摄入量 100 百分比
tabarIndex: 0,
lists: [1, 2, 3],
addEatShow: false, // 加餐弹窗默认不显示
addEatList: [
{
name: "上午加餐",
},
{
name: "下午加餐",
},
{
name: "晚上加餐",
},
],
};
},
methods: {
// 底部按钮点击触发的事件 早餐 午餐 晚餐 加餐
tabbarClick(e) {
console.log("点击事件,,,,");
console.log(e);
this.tabarIndex = e;
if (e === 3) {
this.addEatShow = true;
} else {
this.$Router.push({
name: "AddFoods",
});
}
},
// 选择了加餐跳转
selectClick(e) {
console.log(e);
this.$Router.push({
name: "AddFoods",
});
// 选择加餐
},
// 编辑食品
editGoods(e) {
console.log("父组件监听到了子组件的商品详情页面", e);
},
},
};
</script>
<style lang="scss" scoped>
.record--foods {
padding: $padding $padding $padding * 2 $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;
}
}
.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>