Merge branch 'master' of https://git.yuzhankeji.cn/TmOct5/ZhHealth
This commit is contained in:
4
App.vue
4
App.vue
@@ -1,5 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getVersions } from './apis/interfaces/versions'
|
import {
|
||||||
|
getVersions
|
||||||
|
} from './apis/interfaces/versions'
|
||||||
import im from '@/utils/im/index.js'
|
import im from '@/utils/im/index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@@ -9,9 +9,10 @@ import { request } from '../index'
|
|||||||
/**
|
/**
|
||||||
* @description:饮水记录首页
|
* @description:饮水记录首页
|
||||||
*/
|
*/
|
||||||
const waters = () => {
|
const waters = (data) => {
|
||||||
return request({
|
return request({
|
||||||
url: 'health/waters',
|
url: 'health/waters',
|
||||||
|
data:data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
@@ -29,10 +30,11 @@ const setWaters = (data) => {
|
|||||||
* @description:喝水
|
* @description:喝水
|
||||||
* @Date: 2022-01-12 12：56：00
|
* @Date: 2022-01-12 12：56：00
|
||||||
*/
|
*/
|
||||||
const drinkWater = () => {
|
const drinkWater = (data) => {
|
||||||
return request({
|
return request({
|
||||||
url: 'health/waters/drink',
|
url: 'health/waters/drink',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
data:data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
@@ -46,10 +48,24 @@ const delDrinkWater = (id) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:饮食运动日历
|
||||||
|
* @params {日期}
|
||||||
|
* @method {get}
|
||||||
|
* @Date: 2022-02-08 11点18分
|
||||||
|
*/
|
||||||
|
const dateList = (data) => {
|
||||||
|
return request({
|
||||||
|
url: 'health/calendar/water',
|
||||||
|
data:data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
waters,
|
waters,
|
||||||
setWaters,
|
setWaters,
|
||||||
drinkWater,
|
drinkWater,
|
||||||
delDrinkWater
|
delDrinkWater,
|
||||||
|
dateList
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -78,11 +78,24 @@ const delHealthFoods = (intake_id) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:饮食运动日历
|
||||||
|
* @params {日期}
|
||||||
|
* @method {get}
|
||||||
|
* @Date: 2022-02-07 15点18分
|
||||||
|
*/
|
||||||
|
const dateList = (data) => {
|
||||||
|
return request({
|
||||||
|
url: 'health/calendar/intake',
|
||||||
|
data:data
|
||||||
|
})
|
||||||
|
}
|
||||||
export {
|
export {
|
||||||
positions,
|
positions,
|
||||||
plans,
|
plans,
|
||||||
healthFoods,
|
healthFoods,
|
||||||
addHealthFoods,
|
addHealthFoods,
|
||||||
editHealthFoods,
|
editHealthFoods,
|
||||||
delHealthFoods
|
delHealthFoods,
|
||||||
|
dateList
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
* @LastEditTime: 2022-01-12 17:13:45
|
* @LastEditTime: 2022-01-12 17:13:45
|
||||||
*/
|
*/
|
||||||
import { request } from '../index'
|
import { request } from '../index'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description:称量体重模块首页
|
* @description:称量体重模块首页
|
||||||
*/
|
*/
|
||||||
@@ -15,6 +16,16 @@ const weights = (page) => {
|
|||||||
data: { page: page }
|
data: { page: page }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:获取曲线进度
|
||||||
|
*/
|
||||||
|
const curves = () => {
|
||||||
|
return request({
|
||||||
|
url: 'health/weights/bight'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description:记录体重
|
* @description:记录体重
|
||||||
* @Date: 2022-01-12 16:46:19
|
* @Date: 2022-01-12 16:46:19
|
||||||
@@ -26,7 +37,9 @@ const addWeight = (data) => {
|
|||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
weights,
|
weights,
|
||||||
addWeight
|
addWeight,
|
||||||
|
curves
|
||||||
}
|
}
|
||||||
|
|||||||
330
components/date-template/index.vue
Normal file
330
components/date-template/index.vue
Normal file
@@ -0,0 +1,330 @@
|
|||||||
|
<!--
|
||||||
|
* @Description:日历模板
|
||||||
|
* @Author: Aimee·Zhang
|
||||||
|
* @Date: 2022-02-08 09:06:45
|
||||||
|
* @LastEditors: Aimee·Zhang
|
||||||
|
* @LastEditTime: 2022-02-08 09:06:45
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="date">
|
||||||
|
<u-popup :show="dateShow" zIndex="10099890" @close="closeDate" mode="bottom" :safeAreaInsetBottom="true">
|
||||||
|
<view class="date-content">
|
||||||
|
<view class="title"><span @click="datePreNext('before')">上一月</span>{{month}}<span
|
||||||
|
@click="datePreNext('after')">下一月</span></view>
|
||||||
|
<view class="date-item">
|
||||||
|
<view class="week">
|
||||||
|
<view class="week-item" v-for="(item,index) in weekList" :key="index">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 饮食模块 -->
|
||||||
|
<block v-if="type === 'foods'">
|
||||||
|
<view class="week" style="padding-top: 30rpx;">
|
||||||
|
<view v-for="item in lists" :key="item.today" @click="dateClick(item)"
|
||||||
|
:class="['week-item',{'is_past':!item.is_month},{'is_today':item.today === today},{'is_intake0':item.intake === 1},{'is_intake1':item.intake === 2},{'is_intake2':item.intake === 3}]">
|
||||||
|
{{item.day}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="des">
|
||||||
|
<block> <view class="des-item">吃少了</view> <view class="des-item">正好</view> <view class="des-item">吃多了</view> </block>
|
||||||
|
<view class="back" @click="backDate"> 回今天 </view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<!-- 喝水模块 -->
|
||||||
|
<block v-if="type === 'drink'">
|
||||||
|
<view class="week" style="padding-top: 30rpx;">
|
||||||
|
<view v-for="item in lists" :key="item.today" @click="dateClick(item)" :class="['week-item',{'is_past':!item.is_month},{'is_today':item.today === today}]">
|
||||||
|
{{item.day}}
|
||||||
|
<u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')" v-if="item.drink === 2" :lazy-load="true" width="20rpx" radius="10rpx" mode="widthFix" />
|
||||||
|
<u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')" v-if="item.drink === 1" :lazy-load="true" width="20rpx" radius="10rpx" mode="widthFix" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="drink">
|
||||||
|
<block>
|
||||||
|
<view class="drink-item">
|
||||||
|
<u-image class='waterIcon' :src="require('@/static/imgs/water-1.png')" :lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" />未完成指标
|
||||||
|
</view>
|
||||||
|
<view class="drink-item">
|
||||||
|
<u-image class='waterIcon' :src="require('@/static/imgs/water-2.png')" :lazy-load="true" width="22rpx" radius="10rpx" mode="widthFix" /> 完成指标
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="back" @click="backDate"> 回今天 </view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
weekList: ['日', '一', '二', '三', '四', '五', '六'],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
/**
|
||||||
|
* lists 传过来的列表
|
||||||
|
* type foods（食物运动） drink（饮水）weight（体重）
|
||||||
|
* today 勾选时间
|
||||||
|
* month 勾选日期
|
||||||
|
* dateShow 页面是否显示
|
||||||
|
**/
|
||||||
|
lists: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
today: {
|
||||||
|
type: String,
|
||||||
|
default: moment(new Date()).format('YYYY-MM-DD')
|
||||||
|
},
|
||||||
|
month: {
|
||||||
|
type: String,
|
||||||
|
default: moment(new Date()).format('YYYY-MM')
|
||||||
|
},
|
||||||
|
dateShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择日期
|
||||||
|
dateClick(item) {
|
||||||
|
this.$emit('dateClick', item)
|
||||||
|
},
|
||||||
|
// 返回今天
|
||||||
|
backDate() {
|
||||||
|
this.$emit('backDate', '')
|
||||||
|
},
|
||||||
|
// 点击上一个月或者下一个月 before 上一月 after下一个月
|
||||||
|
datePreNext(type) {
|
||||||
|
this.$emit('datePreNext', type)
|
||||||
|
},
|
||||||
|
// 关闭日历
|
||||||
|
closeDate() {
|
||||||
|
this.$emit('closeDate')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.date {
|
||||||
|
|
||||||
|
// 日历弹窗
|
||||||
|
.date-content {
|
||||||
|
width: 100%;
|
||||||
|
padding: $padding *2;
|
||||||
|
min-height: 800rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
color: #20845f;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
padding: $padding;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: #cacaca;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-item {
|
||||||
|
padding-top: $padding;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.drink {
|
||||||
|
display: flex;
|
||||||
|
color: #cacaca;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: $margin;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.drink-item {
|
||||||
|
padding-right: 40rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
u-image{
|
||||||
|
padding-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
display: flex;
|
||||||
|
color: #cacaca;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: $margin;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.des-item {
|
||||||
|
padding-left: 40rpx;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 14rpx;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fa624d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2):before {
|
||||||
|
background: #fbbf0f;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(1):before {
|
||||||
|
background: #02c7bd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
margin-left: 100rpx;
|
||||||
|
background-color: rgba($color: $main-color, $alpha: 1);
|
||||||
|
color: #fff;
|
||||||
|
padding: 10rpx $padding;
|
||||||
|
border-radius: $radius + 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.week {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.week-item {
|
||||||
|
width: 14.28%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: $title-size-m + 2;
|
||||||
|
color: #888;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
// background: #02c7bd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.waterIcon {
|
||||||
|
position: absolute;
|
||||||
|
width: 30rpx !important;
|
||||||
|
bottom: -12rpx;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(1),
|
||||||
|
&:nth-child(7),
|
||||||
|
&:nth-child(8),
|
||||||
|
&:nth-child(14),
|
||||||
|
&:nth-child(15),
|
||||||
|
&:nth-child(21),
|
||||||
|
&:nth-child(22),
|
||||||
|
&:nth-child(28),
|
||||||
|
&:nth-child(29),
|
||||||
|
&:nth-child(35),
|
||||||
|
{
|
||||||
|
color: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 吃饭样式
|
||||||
|
.is_intake0::before {
|
||||||
|
background: #02c7bd !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is_intake1::before {
|
||||||
|
background: #fbbf0f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is_intake2::before {
|
||||||
|
background: #fa624d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is_today {
|
||||||
|
color: #fff !important;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $main-color;
|
||||||
|
color: #Fff;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is_past {
|
||||||
|
color: rgba($color: #000000, $alpha: 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
pages.json
10
pages.json
@@ -35,9 +35,8 @@
|
|||||||
"path": "pages/record/drink",
|
"path": "pages/record/drink",
|
||||||
"name": "Drink",
|
"name": "Drink",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "记录喝水",
|
"navigationBarTitleText": "记录",
|
||||||
"navigationBarBackgroundColor": "#34CE98",
|
"navigationStyle": "custom"
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -53,9 +52,8 @@
|
|||||||
"path": "pages/record/foods",
|
"path": "pages/record/foods",
|
||||||
"name": "RecordFoods",
|
"name": "RecordFoods",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "食物记录",
|
"navigationBarTitleText": "",
|
||||||
"navigationBarBackgroundColor": "#34CE98",
|
"navigationStyle": "custom"
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="name">{{ contact(item.targetId).name }}</view>
|
<view class="name">{{ contact(item.targetId).name }} <span v-if="item.conversationType === 3" class='qun'>[群]</span></view>
|
||||||
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
|
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
|
||||||
</view>
|
</view>
|
||||||
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
|
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
|
||||||
@@ -71,6 +71,11 @@
|
|||||||
font-size: $title-size + 2;
|
font-size: $title-size + 2;
|
||||||
color: #454545;
|
color: #454545;
|
||||||
color: #454545;
|
color: #454545;
|
||||||
|
.qun{
|
||||||
|
color: $main-color;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
|
|||||||
@@ -50,19 +50,20 @@
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
line-height: 34rpx;
|
line-height: 34rpx;
|
||||||
color: $text-gray-m;
|
color: $text-gray-m;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg--image {
|
.msg--image {
|
||||||
padding: 20rpx;
|
// padding: 20rpx;
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
border-radius: 0 20rpx 20rpx 20rpx;
|
border-radius: 0 20rpx 20rpx 20rpx;
|
||||||
background: white;
|
// background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
border-radius: 20rpx 0 20rpx 20rpx;
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
background: #34CE98;
|
// background: #34CE98;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
|
|||||||
@@ -28,16 +28,17 @@
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.msg--text {
|
.msg--text {
|
||||||
.name {
|
.name {
|
||||||
font-size: 24rpx;
|
font-size: 26rpx;
|
||||||
line-height: 34rpx;
|
padding-bottom: 10rpx;
|
||||||
color: $text-gray-m;
|
color: $text-gray-m;
|
||||||
}
|
}
|
||||||
|
|
||||||
.im--text {
|
.im--text {
|
||||||
max-width: 500rpx;
|
max-width: 508rpx;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
line-height: 44rpx;
|
line-height: 46rpx;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
|
color: $text-color;
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
border-radius: 0 20rpx 20rpx 20rpx;
|
border-radius: 0 20rpx 20rpx 20rpx;
|
||||||
|
|||||||
@@ -126,7 +126,8 @@
|
|||||||
.cell-item {
|
.cell-item {
|
||||||
width: 690rpx;
|
width: 690rpx;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@@ -14,180 +14,185 @@
|
|||||||
<view>高等热量</view>
|
<view>高等热量</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 搜索页面 -->
|
<!-- 搜索页面 -->
|
||||||
<u-search
|
<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入食品名称"
|
||||||
:show-action="true"
|
@custom="searchCustom" @clear="clearSearch" v-model="name" />
|
||||||
actionText="搜索"
|
|
||||||
:animation="true"
|
|
||||||
:clearabled="true"
|
|
||||||
placeholder="请输入食品名称"
|
|
||||||
@custom="searchCustom"
|
|
||||||
@clear="clearSearch"
|
|
||||||
v-model="name"
|
|
||||||
/>
|
|
||||||
<!-- 食品列表 -->
|
<!-- 食品列表 -->
|
||||||
<goodsList
|
<goodsList :lists="lists" type="dian" @addGoods="addGoods" />
|
||||||
:lists="lists"
|
|
||||||
type="dian"
|
|
||||||
@addGoods="addGoods"
|
|
||||||
/>
|
|
||||||
<!-- 添加食谱弹窗 -->
|
<!-- 添加食谱弹窗 -->
|
||||||
<addFoods
|
<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle"
|
||||||
v-if="addShow"
|
@close="closeHandle" @tabGoodsInfo="tabGoodsInfo" max="999" />
|
||||||
:addShow="addShow"
|
|
||||||
:selectGoods="selectGoods"
|
|
||||||
:decimals="true"
|
|
||||||
@confirm="confirmHandle"
|
|
||||||
@close="closeHandle"
|
|
||||||
@tabGoodsInfo="tabGoodsInfo"
|
|
||||||
max="999"
|
|
||||||
/>
|
|
||||||
</view>
|
</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 {
|
||||||
import moment from "moment";
|
healthFoods,
|
||||||
|
addHealthFoods
|
||||||
|
} from "@/apis/interfaces/foods.js";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { goodsList, addFoods },
|
components: {
|
||||||
data() {
|
goodsList,
|
||||||
return {
|
addFoods
|
||||||
addShow: false, // 添加食品显示
|
},
|
||||||
selectGoods: [], // 选择新增的食品
|
data() {
|
||||||
editGoodsId: "", // 编辑食物
|
return {
|
||||||
type: "", // 新增食品时候 1早2午3晚4早加5午加6晚加
|
addShow: false, // 添加食品显示
|
||||||
lists: [], // 食品列表
|
selectGoods: [], // 选择新增的食品
|
||||||
page: 1,
|
editGoodsId: "", // 编辑食物
|
||||||
has_more: true,
|
type: "", // 新增食品时候 1早2午3晚4早加5午加6晚加
|
||||||
name: "", // 搜索食品名称
|
lists: [], // 食品列表
|
||||||
date: moment(new Date()).format("YYYY-MM-DD"),
|
page: 1,
|
||||||
};
|
has_more: true,
|
||||||
},
|
name: "", // 搜索食品名称
|
||||||
onShow() {
|
date: moment(new Date()).format("YYYY-MM-DD"),
|
||||||
// 有id就是编辑不需要重新处理type了
|
};
|
||||||
if (this.$Route.query.id) {
|
},
|
||||||
this.editGoodsId = this.$Route.query.id;
|
onShow() {
|
||||||
return;
|
// 有id就是编辑不需要重新处理type了
|
||||||
}
|
if (this.$Route.query.id) {
|
||||||
//没有id的时候就是新增要处理type
|
this.editGoodsId = this.$Route.query.id;
|
||||||
this.type = this.$Route.query.type;
|
return;
|
||||||
// this.getFoods();
|
}
|
||||||
},
|
//没有id的时候就是新增要处理type
|
||||||
onLoad() {
|
this.type = this.$Route.query.type;
|
||||||
this.getFoods();
|
this.date = this.$Route.query.date;
|
||||||
},
|
console.log(this.date,'date.........')
|
||||||
// 触底加载更多
|
// this.getFoods();
|
||||||
onReachBottom() {
|
},
|
||||||
if (!this.has_more) {
|
onLoad() {
|
||||||
uni.showToast({
|
|
||||||
title: "没有更多啦~",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.page = this.page + 1;
|
|
||||||
this.getFoods();
|
this.getFoods();
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取食品列表
|
|
||||||
getFoods() {
|
|
||||||
let data = {
|
|
||||||
page: this.page,
|
|
||||||
name: this.name,
|
|
||||||
};
|
|
||||||
healthFoods(data).then((res) => {
|
|
||||||
console.log(res);
|
|
||||||
this.lists = this.lists.concat(res.data);
|
|
||||||
this.has_more = res.page.has_more;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
// 监听点击键盘触发返回值新增食品
|
// 触底加载更多
|
||||||
confirmHandle(value) {
|
onReachBottom() {
|
||||||
console.log(value);
|
if (!this.has_more) {
|
||||||
// 新添加食物
|
uni.showToast({
|
||||||
let data = {
|
title: "没有更多啦~",
|
||||||
type: this.type,
|
icon: "none",
|
||||||
ser: 1,
|
});
|
||||||
weight: value,
|
} else {
|
||||||
food_id: this.selectGoods[0].food_id,
|
this.page = this.page + 1;
|
||||||
date: this.date,
|
this.getFoods();
|
||||||
};
|
}
|
||||||
this.addHealthFoods(data);
|
|
||||||
},
|
},
|
||||||
// 添加食物
|
methods: {
|
||||||
addHealthFoods(data) {
|
// 获取食品列表
|
||||||
addHealthFoods(data).then((res) => {
|
getFoods() {
|
||||||
console.log(res);
|
let data = {
|
||||||
|
page: this.page,
|
||||||
|
name: this.name,
|
||||||
|
};
|
||||||
|
healthFoods(data).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.lists = this.lists.concat(res.data);
|
||||||
|
this.has_more = res.page.has_more;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 监听点击键盘触发返回值新增食品
|
||||||
|
confirmHandle(value) {
|
||||||
|
// 新添加食物
|
||||||
|
let data = {
|
||||||
|
type: this.type,
|
||||||
|
ser: 1,
|
||||||
|
weight: value,
|
||||||
|
food_id: this.selectGoods[0].food_id,
|
||||||
|
date: this.date,
|
||||||
|
};
|
||||||
|
console.log(data,'data...........');
|
||||||
|
this.addHealthFoods(data);
|
||||||
|
},
|
||||||
|
// 添加食物
|
||||||
|
addHealthFoods(data) {
|
||||||
|
addHealthFoods(data).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.addShow = false;
|
||||||
|
this.$Router.back();
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err, '添加食物error');
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon: "none",
|
||||||
|
duration:2000,
|
||||||
|
mask:true
|
||||||
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.$Router.back();
|
||||||
|
},2000)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
closeHandle() {
|
||||||
|
//键盘关闭的回调函数
|
||||||
this.addShow = false;
|
this.addShow = false;
|
||||||
this.$Router.back();
|
},
|
||||||
});
|
// 监听子组件的新增方法
|
||||||
|
addGoods(e) {
|
||||||
|
this.addShow = true;
|
||||||
|
this.selectGoods = [e];
|
||||||
|
},
|
||||||
|
// 点击搜索左侧按钮
|
||||||
|
searchCustom(e) {
|
||||||
|
console.log(e);
|
||||||
|
this.name = e;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 清空数组重新请求数据
|
||||||
|
reset() {
|
||||||
|
this.page = 1;
|
||||||
|
this.has_more = true;
|
||||||
|
this.lists = [];
|
||||||
|
this.getFoods();
|
||||||
|
},
|
||||||
|
// 点击搜索后面按钮触发事件事件
|
||||||
|
clearSearch() {
|
||||||
|
this.name = "";
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 跳转到食品详情
|
||||||
|
tabGoodsInfo(e) {
|
||||||
|
this.$Router.push({
|
||||||
|
name: "rankingDetails",
|
||||||
|
params: e,
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
closeHandle() {
|
};
|
||||||
//键盘关闭的回调函数
|
|
||||||
this.addShow = false;
|
|
||||||
},
|
|
||||||
// 监听子组件的新增方法
|
|
||||||
addGoods(e) {
|
|
||||||
this.addShow = true;
|
|
||||||
this.selectGoods = [e];
|
|
||||||
},
|
|
||||||
// 点击搜索左侧按钮
|
|
||||||
searchCustom(e) {
|
|
||||||
console.log(e);
|
|
||||||
this.name = e;
|
|
||||||
this.reset();
|
|
||||||
},
|
|
||||||
// 清空数组重新请求数据
|
|
||||||
reset() {
|
|
||||||
this.page = 1;
|
|
||||||
this.has_more = true;
|
|
||||||
this.lists = [];
|
|
||||||
this.getFoods();
|
|
||||||
},
|
|
||||||
// 点击搜索后面按钮触发事件事件
|
|
||||||
clearSearch() {
|
|
||||||
this.name = "";
|
|
||||||
this.reset();
|
|
||||||
},
|
|
||||||
// 跳转到食品详情
|
|
||||||
tabGoodsInfo(e) {
|
|
||||||
this.$Router.push({
|
|
||||||
name: "rankingDetails",
|
|
||||||
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 {
|
|
||||||
width: 20rpx;
|
view:before {
|
||||||
height: 20rpx;
|
width: 20rpx;
|
||||||
border-radius: 50%;
|
height: 20rpx;
|
||||||
display: inline-block;
|
border-radius: 50%;
|
||||||
margin-right: 10rpx;
|
display: inline-block;
|
||||||
content: "";
|
margin-right: 10rpx;
|
||||||
}
|
content: "";
|
||||||
view:nth-child(3):before {
|
|
||||||
background: #fa624d;
|
}
|
||||||
}
|
|
||||||
view:nth-child(2):before {
|
view:nth-child(3):before {
|
||||||
background: #fbbf0f;
|
background: #fa624d;
|
||||||
}
|
}
|
||||||
view:nth-child(1):before {
|
|
||||||
background: #02c7bd;
|
view:nth-child(2):before {
|
||||||
|
background: #fbbf0f;
|
||||||
|
}
|
||||||
|
|
||||||
|
view:nth-child(1):before {
|
||||||
|
background: #02c7bd;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,402 +7,544 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="drink" v-if="loaded">
|
<view class="drink" v-if="loaded">
|
||||||
<!-- 喝水及水杯文字 -->
|
<!-- 自定义导航部分 -->
|
||||||
<view class="drink-content">
|
<u-navbar :safeAreaInsetTop="true" :fixed='true' bgColor="#34ce98" :autoBack="true">
|
||||||
<view class="title" v-if="!water.is_complete">
|
<view class="u-nav-slot" slot="left">
|
||||||
再喝
|
<u-icon name="arrow-leftward" :bold="true" size="20" color="#fff" />
|
||||||
<span class="num">{{ water.lack.cup }}</span>
|
</view>
|
||||||
杯
|
<view class="u-nav-slot u-center" slot="center" @click="dateShow = true,dateLists()">
|
||||||
<span class="total">（约{{ water.lack.value }}ml）</span>
|
<u-icon name="play-left-fill" size="14" color="#fff" @click="datePreNext('before')" />
|
||||||
</view>
|
<view class="date">
|
||||||
<view class="title" v-if="water.is_complete">
|
<u-icon name="calendar" color="#fff" label-color="#fff" width="150" :label="today" label-size="14"
|
||||||
已喝
|
size="20" />
|
||||||
<span class="num">{{ water.total }}ml</span>
|
</view>
|
||||||
<u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true" mode="widthFix" width="140rpx" />
|
<u-icon name="play-right-fill" size="14" color="#fff" @click="datePreNext('after')" />
|
||||||
</view>
|
</view>
|
||||||
<!-- 水杯动态图片 -->
|
<view class="u-nav-slot" slot="right">
|
||||||
<view class="wave-content">
|
<u-icon :name="require('@/static/icon/sign-icon.gif')" :bold="true" size="30"
|
||||||
<u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true" mode="scaleToFill" width="320rpx" height="520rpx" />
|
@click="$Router.push({name:'signIndex'})" />
|
||||||
<view class="wave" :style="{ '--ballPercent': -ballPercent + 40 + '%' }"></view>
|
</view>
|
||||||
</view>
|
</u-navbar>
|
||||||
<!-- 目标 -->
|
<!-- 喝水及水杯文字 -->
|
||||||
<view class="water-target">
|
<view class="drink-content">
|
||||||
<view class="target-item" @click="targetShow = true">
|
<view class="title" v-if="!water.is_complete">
|
||||||
今日目标
|
再喝
|
||||||
<u-icon
|
<span class="num">{{ water.lack.cup }}</span>
|
||||||
class="target-icon"
|
杯
|
||||||
name="arrow-right"
|
<span class="total">（约{{ water.lack.value }}ml）</span>
|
||||||
color="#666"
|
</view>
|
||||||
size="14"
|
<view class="title" v-if="water.is_complete">
|
||||||
:bold="true"
|
已喝
|
||||||
:label="water.target + 'ml'"
|
<span class="num">{{ water.total }}ml</span>
|
||||||
labelPos="left"
|
<u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true"
|
||||||
labelSize="16"
|
mode="widthFix" width="140rpx" />
|
||||||
labelColor="#666"
|
</view>
|
||||||
space="6"
|
<!-- 水杯动态图片 -->
|
||||||
/>
|
<view class="wave-content">
|
||||||
</view>
|
<u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true"
|
||||||
<view class="target-item" @click="waterCShow = true">
|
mode="scaleToFill" width="320rpx" height="520rpx" />
|
||||||
水杯容量
|
<view class="wave" :style="{ '--ballPercent': -ballPercent + 40 + '%' }"></view>
|
||||||
<u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true" :label="water.ml + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
|
</view>
|
||||||
</view>
|
<!-- 目标 -->
|
||||||
</view>
|
<view class="water-target">
|
||||||
<!-- 目标弹出层 -->
|
<view class="target-item" @click="targetShow = true">
|
||||||
<view>
|
今日目标
|
||||||
<u-picker
|
<u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true"
|
||||||
:show="targetShow"
|
:label="water.target + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
|
||||||
:columns="tagerts"
|
</view>
|
||||||
title="每天喝水目标"
|
<view class="target-item" @click="waterCShow = true">
|
||||||
keyName="label"
|
水杯容量
|
||||||
confirmColor="#34ce98"
|
<u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true"
|
||||||
:closeOnClickOverlay="true"
|
:label="water.ml + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
|
||||||
@close="targetShow = false"
|
</view>
|
||||||
@confirm="targetSure('1', $event)"
|
</view>
|
||||||
:defaultIndex="tagertsDefaultIndex"
|
<!-- 目标弹出层 -->
|
||||||
/>
|
<view>
|
||||||
<u-picker
|
<u-picker :show="targetShow" :columns="tagerts" title="每天喝水目标" keyName="label" confirmColor="#34ce98"
|
||||||
:show="waterCShow"
|
:closeOnClickOverlay="true" @close="targetShow = false" @confirm="targetSure('1', $event)"
|
||||||
:columns="cup_mls"
|
:defaultIndex="tagertsDefaultIndex" />
|
||||||
title="设置水杯容量"
|
<u-picker :show="waterCShow" :columns="cup_mls" title="设置水杯容量" keyName="label" confirmColor="#34ce98"
|
||||||
keyName="label"
|
:closeOnClickOverlay="true" @close="waterCShow = false" @confirm="targetSure('2', $event)"
|
||||||
confirmColor="#34ce98"
|
:defaultIndex="cupDefaultIndex" />
|
||||||
:closeOnClickOverlay="true"
|
</view>
|
||||||
@close="waterCShow = false"
|
<!-- 加水 -->
|
||||||
@confirm="targetSure('2', $event)"
|
<view class="add-water" @click="drinkWater">
|
||||||
:defaultIndex="cupDefaultIndex"
|
<u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true"
|
||||||
/>
|
mode="scaleToFill" width="60rpx" height="80rpx" />
|
||||||
</view>
|
<span>一杯水</span>
|
||||||
<!-- 加水 -->
|
<u-icon class="add-icon" name="plus-circle-fill" color="#34ce98" size="24" />
|
||||||
<view class="add-water" @click="drinkWater">
|
</view>
|
||||||
<u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true" mode="scaleToFill" width="60rpx" height="80rpx" />
|
</view>
|
||||||
<span>一杯水</span>
|
<!-- 喝水记录 -->
|
||||||
<u-icon class="add-icon" name="plus-circle-fill" color="#34ce98" size="24" />
|
<view class="--history">
|
||||||
</view>
|
<view class="title">喝水记录</view>
|
||||||
</view>
|
<template v-if="logs.length > 0">
|
||||||
<!-- 喝水记录 -->
|
<view class="lists" v-for="item in logs" :key="item.water_log_id"
|
||||||
<view class="--history">
|
@longpress="delWater(item.water_log_id)">
|
||||||
<view class="title">喝水记录</view>
|
<view class="lists-water">
|
||||||
<template v-if="logs.length > 0">
|
<u-icon size="30" :name="require('../../static/icon/water-icon.png')" />
|
||||||
<view class="lists" v-for="item in logs" :key="item.water_log_id" @longpress="delWater(item.water_log_id)">
|
</view>
|
||||||
<view class="lists-water"><u-icon size="30" :name="require('../../static/icon/water-icon.png')" /></view>
|
<view class="list-item">
|
||||||
<view class="list-item">
|
<view class="list-item-title">
|
||||||
<view class="list-item-title">
|
水
|
||||||
水
|
<span>{{ item.time }}</span>
|
||||||
<span>{{ item.time }}</span>
|
</view>
|
||||||
</view>
|
{{ item.ml }}ml
|
||||||
{{ item.ml }}ml
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</template>
|
||||||
</template>
|
<view v-else class="no-drink">今天一杯水还没有喝呢，来一杯吧~</view>
|
||||||
<view v-else class="no-drink">今天一杯水还没有喝呢，来一杯吧~</view>
|
</view>
|
||||||
</view>
|
|
||||||
</view>
|
<!-- 选择日历 -->
|
||||||
|
<dateTemplate :lists="calendarList" :today="today" :month="month" :dateShow="dateShow" type='drink'
|
||||||
|
@backDate="backDate" @dateClick="dateClick" @closeDate="closeDate" @datePreNext="datePreNext" />
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { waters, setWaters, drinkWater, delDrinkWater } from '@/apis/interfaces/drink';
|
import {
|
||||||
import moment from 'moment';
|
waters,
|
||||||
export default {
|
setWaters,
|
||||||
data() {
|
drinkWater,
|
||||||
return {
|
delDrinkWater,
|
||||||
ballPercent: 0, // 喝水比例
|
dateList
|
||||||
logs: [], // 水记录
|
} from '@/apis/interfaces/drink';
|
||||||
water: {}, // 水基本信息
|
import moment from 'moment';
|
||||||
targetShow: false,
|
import dateTemplate from '@/components/date-template/index.vue'
|
||||||
tagerts: [], // 目标列表
|
export default {
|
||||||
tagertsDefaultIndex: ['1'], // 目标默认index
|
components: {
|
||||||
waterCShow: false,
|
dateTemplate
|
||||||
cup_mls: [], // 水杯列表
|
},
|
||||||
cupDefaultIndex: ['2'], // 目标默认index
|
data() {
|
||||||
loaded: false
|
return {
|
||||||
};
|
ballPercent: 0, // 喝水比例
|
||||||
},
|
logs: [], // 水记录
|
||||||
onShow() {
|
water: {}, // 水基本信息
|
||||||
this.getWaters();
|
targetShow: false,
|
||||||
},
|
tagerts: [], // 目标列表
|
||||||
methods: {
|
tagertsDefaultIndex: ['1'], // 目标默认index
|
||||||
// 获取喝水页面信息
|
waterCShow: false,
|
||||||
getWaters() {
|
cup_mls: [], // 水杯列表
|
||||||
waters().then(res => {
|
cupDefaultIndex: ['2'], // 目标默认index
|
||||||
this.cup_mls = [res.cup_mls];
|
loaded: false,
|
||||||
this.tagerts = [res.tagerts];
|
today: moment(new Date()).format('YYYY-MM-DD'), // 当前时间
|
||||||
this.water = res.water;
|
month: moment(new Date()).format('YYYY-MM'), //当前月份
|
||||||
this.logs = res.logs;
|
dateShow: false, // 日历展示
|
||||||
this.ballPercent = res.water.lack.ratio;
|
calendarList: [],
|
||||||
this.cupDefaultIndex = [res.cup_mls.findIndex(item => item.number === res.water.ml)];
|
dateType: '', // before after ''
|
||||||
this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water.target)];
|
};
|
||||||
this.loaded = true;
|
},
|
||||||
});
|
onShow() {
|
||||||
},
|
this.getWaters();
|
||||||
// 确认方法index===1 每日目标 2，水杯容量
|
this.dateLists();
|
||||||
targetSure(index, e) {
|
},
|
||||||
// console.log("触发了targetSure", index, e.value[0]);
|
methods: {
|
||||||
// let date = moment(new Date()).format("YYYY--MM--DD");
|
// 获取喝水页面信息
|
||||||
let params = {};
|
getWaters() {
|
||||||
if (index === '1') {
|
let data = {
|
||||||
params = {
|
date: this.today,
|
||||||
type: 'target',
|
// type:this.dateType
|
||||||
ml: e.value[0].number,
|
}
|
||||||
date: moment(new Date()).format('YYYY-MM-DD')
|
waters(data).then(res => {
|
||||||
};
|
this.cup_mls = [res.cup_mls];
|
||||||
} else {
|
this.tagerts = [res.tagerts];
|
||||||
params = {
|
this.water = res.water;
|
||||||
type: 'ml',
|
this.logs = res.logs;
|
||||||
ml: e.value[0].number,
|
this.ballPercent = res.water.lack.ratio;
|
||||||
date: moment(new Date()).format('YYYY-MM-DD')
|
this.cupDefaultIndex = [res.cup_mls.findIndex(item => item.number === res.water.ml)];
|
||||||
};
|
this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water
|
||||||
}
|
.target)];
|
||||||
setWaters(params).then(res => {
|
this.loaded = true;
|
||||||
this.getWaters();
|
});
|
||||||
this.waterCShow = false;
|
},
|
||||||
this.targetShow = false;
|
// 确认方法index===1 每日目标 2，水杯容量
|
||||||
});
|
targetSure(index, e) {
|
||||||
},
|
// console.log("触发了targetSure", index, e.value[0]);
|
||||||
// 喝水
|
// let date = moment(new Date()).format("YYYY--MM--DD");
|
||||||
drinkWater() {
|
let params = {};
|
||||||
drinkWater().then(res => {
|
if (index === '1') {
|
||||||
this.getWaters();
|
params = {
|
||||||
});
|
type: 'target',
|
||||||
},
|
ml: e.value[0].number,
|
||||||
// 删除和喝水记录
|
date: moment(new Date()).format('YYYY-MM-DD')
|
||||||
delWater(id) {
|
};
|
||||||
uni.showModal({
|
} else {
|
||||||
content: '确认删除么？',
|
params = {
|
||||||
confirmText: '确认删除',
|
type: 'ml',
|
||||||
confirmColor: '#34ce98',
|
ml: e.value[0].number,
|
||||||
cancelText: '再想想',
|
date: moment(new Date()).format('YYYY-MM-DD')
|
||||||
cancelColor: '#ddd',
|
};
|
||||||
success: res => {
|
}
|
||||||
if (res.confirm) {
|
setWaters(params).then(res => {
|
||||||
delDrinkWater(id)
|
this.getWaters();
|
||||||
.then(res => {
|
this.waterCShow = false;
|
||||||
this.getWaters();
|
this.targetShow = false;
|
||||||
})
|
});
|
||||||
.catch(err => {
|
},
|
||||||
uni.showToast({
|
// 喝水
|
||||||
title: err.message,
|
drinkWater() {
|
||||||
icon: 'none'
|
console.log('喝水。。。')
|
||||||
});
|
let data = {
|
||||||
});
|
date: this.today
|
||||||
}
|
}
|
||||||
}
|
console.log(data, 'data....')
|
||||||
});
|
drinkWater(data).then(res => {
|
||||||
}
|
this.getWaters();
|
||||||
}
|
this.dateLists()
|
||||||
};
|
}).catch(err => {
|
||||||
|
console.log(err, '添加食物error');
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon: "none",
|
||||||
|
duration:2000,
|
||||||
|
mask:true
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除和喝水记录
|
||||||
|
delWater(id) {
|
||||||
|
uni.showModal({
|
||||||
|
content: '确认删除么？',
|
||||||
|
confirmText: '确认删除',
|
||||||
|
confirmColor: '#34ce98',
|
||||||
|
cancelText: '再想想',
|
||||||
|
cancelColor: '#ddd',
|
||||||
|
success: res => {
|
||||||
|
if (res.confirm) {
|
||||||
|
delDrinkWater(id)
|
||||||
|
.then(res => {
|
||||||
|
this.getWaters();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//#region 日历操作相关
|
||||||
|
// 日历列表
|
||||||
|
dateLists() {
|
||||||
|
let data = {
|
||||||
|
month: this.month,
|
||||||
|
type: this.dateType
|
||||||
|
}
|
||||||
|
console.log(data,'data.....')
|
||||||
|
dateList(data).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
this.calendarList = res.calendar
|
||||||
|
this.dateType = ''
|
||||||
|
this.month = res.month
|
||||||
|
}).catch(err => {
|
||||||
|
uni.showToast({
|
||||||
|
title: err.message,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 选择日期
|
||||||
|
dateClick(item) {
|
||||||
|
console.log(item)
|
||||||
|
this.today = item.today
|
||||||
|
this.month = item.today
|
||||||
|
this.reset()
|
||||||
|
},
|
||||||
|
// 返回到今日
|
||||||
|
backDate() {
|
||||||
|
this.today = moment(new Date()).format('YYYY-MM-DD')
|
||||||
|
this.reset()
|
||||||
|
},
|
||||||
|
// 上一个月或者下一个月
|
||||||
|
datePreNext(type) {
|
||||||
|
this.dateType = type
|
||||||
|
this.dateLists()
|
||||||
|
},
|
||||||
|
// 关闭日历
|
||||||
|
closeDate() {
|
||||||
|
this.month = this.today
|
||||||
|
this.dateShow = false
|
||||||
|
},
|
||||||
|
// 重置日历数据
|
||||||
|
reset() {
|
||||||
|
this.calendarList = []
|
||||||
|
this.dateLists()
|
||||||
|
this.getWaters()
|
||||||
|
this.closeDate()
|
||||||
|
}
|
||||||
|
//#endregion 日历操作相关
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.drink {
|
.drink {
|
||||||
// 喝水 水杯及文字
|
padding-top: 120rpx;
|
||||||
|
|
||||||
.drink-content {
|
// 顶部日历筛选部分
|
||||||
display: flex;
|
.u-center {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: row;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
justify-content: center;
|
||||||
// padding: $padding 0;
|
box-sizing: border-box;
|
||||||
position: relative;
|
|
||||||
// 标题 再喝水
|
|
||||||
.title {
|
|
||||||
font-size: $title-size + 4;
|
|
||||||
color: $main-color;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: $margin * 2;
|
|
||||||
position: relative;
|
|
||||||
.is_complete {
|
|
||||||
position: absolute;
|
|
||||||
top: 30rpx;
|
|
||||||
right: -120rpx;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
font-size: $title-size * 2.3;
|
|
||||||
padding: 0 $padding * 0.3;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.total {
|
|
||||||
font-size: $title-size;
|
|
||||||
color: $text-gray-m;
|
|
||||||
padding-left: $padding * 0.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 加一杯水
|
|
||||||
.add-water {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: $title-size;
|
|
||||||
color: $text-color;
|
|
||||||
margin-top: $margin * 2;
|
|
||||||
position: relative;
|
|
||||||
span {
|
|
||||||
padding-top: $padding * 0.4;
|
|
||||||
color:$text-gray-m;
|
|
||||||
font-size: $title-size;
|
|
||||||
}
|
|
||||||
.add-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: $margin + 8;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 目标
|
|
||||||
.water-target {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: $text-gray-m;
|
|
||||||
font-size: $title-size;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 110;
|
|
||||||
right: $padding * 1.4;
|
|
||||||
top: 50%;
|
|
||||||
.target-item {
|
|
||||||
margin-top: $margin * 1.6;
|
|
||||||
.target-icon {
|
|
||||||
padding-top: $padding * 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 喝水记录
|
|
||||||
.--history {
|
|
||||||
padding: $padding;
|
|
||||||
.no-drink {
|
|
||||||
color: $text-gray-m;
|
|
||||||
font-size: $title-size-m;
|
|
||||||
padding-top: $padding + 10;
|
|
||||||
}
|
|
||||||
// 标题
|
|
||||||
.title {
|
|
||||||
font-size: $title-size + 4;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $text-color;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: $padding;
|
|
||||||
padding-bottom: $padding;
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: 8rpx;
|
|
||||||
height: 45rpx;
|
|
||||||
left: 0;
|
|
||||||
background-color: $main-color;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 列表
|
.date {
|
||||||
.lists {
|
background-color: rgba($color: #000000, $alpha: .1);
|
||||||
// background-color: pink;
|
color: #fff;
|
||||||
display: flex;
|
min-width: 340rpx;
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
justify-content: center;
|
||||||
border-bottom: solid 1rpx #f7f7f7;
|
box-sizing: border-box;
|
||||||
.lists-water {
|
padding: 8rpx 20rpx;
|
||||||
background-image: linear-gradient(to right, $main-color, $main-color);
|
border-radius: $radius * 2;
|
||||||
width: 90rpx;
|
margin: 0 10rpx;
|
||||||
height: 90rpx;
|
font-size: $title-size - 2;
|
||||||
border-radius: 50%;
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.list-item {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: $margin * 0.7;
|
|
||||||
font-size: $title-size;
|
|
||||||
color: $text-gray-m;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: $margin 0 $margin $margin * 0.7;
|
|
||||||
.list-item-title {
|
|
||||||
font-size: $title-size + 3;
|
|
||||||
color: $text-color;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-weight: bold;
|
|
||||||
span {
|
|
||||||
margin-top: $margin * 0.4;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
padding: 4rpx 10rpx;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: $title-size - 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 水杯动画
|
|
||||||
.wave-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 110;
|
|
||||||
.grass {
|
|
||||||
position: relative;
|
|
||||||
z-index: 120099;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wave {
|
.play-right-fill {
|
||||||
position: absolute;
|
padding: $padding !important;
|
||||||
width: 290rpx;
|
background-color: pink;
|
||||||
height: 500rpx;
|
}
|
||||||
background-color: rgba($color: $main-color, $alpha: 0.6);
|
}
|
||||||
background-size: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
top: 10rpx;
|
|
||||||
left: 20rpx;
|
|
||||||
z-index: 10;
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1000rpx;
|
|
||||||
height: 1000rpx;
|
|
||||||
top: var(--ballPercent);
|
|
||||||
left: 50%;
|
|
||||||
background-color: rgba(255, 255, 255, 0.4);
|
|
||||||
border-radius: 45%;
|
|
||||||
transform: translate(-50%, -70%) rotate(0);
|
|
||||||
animation: rotate 4s linear infinite;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
border-radius: 47%;
|
|
||||||
background-color: rgba(255, 255, 255, 0.9);
|
|
||||||
transform: translate(-50%, -70%) rotate(0);
|
|
||||||
animation: rotate 6s linear -5s infinite;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
// 喝水 水杯及文字
|
||||||
50% {
|
|
||||||
transform: translate(-50%, -73%) rotate(180deg);
|
.drink-content {
|
||||||
}
|
display: flex;
|
||||||
100% {
|
flex-direction: column;
|
||||||
transform: translate(-50%, -70%) rotate(360deg);
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
}
|
box-sizing: border-box;
|
||||||
}
|
// padding: $padding 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// 标题 再喝水
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: $margin * 2;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.is_complete {
|
||||||
|
position: absolute;
|
||||||
|
top: 30rpx;
|
||||||
|
right: -120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: $title-size * 2.3;
|
||||||
|
padding: 0 $padding * 0.3;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-gray-m;
|
||||||
|
padding-left: $padding * 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加一杯水
|
||||||
|
.add-water {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-color;
|
||||||
|
margin-top: $margin * 2;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-top: $padding * 0.4;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: $margin + 8;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 目标
|
||||||
|
.water-target {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 110;
|
||||||
|
right: $padding * 1.4;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
.target-item {
|
||||||
|
margin-top: $margin * 1.6;
|
||||||
|
|
||||||
|
.target-icon {
|
||||||
|
padding-top: $padding * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 喝水记录
|
||||||
|
.--history {
|
||||||
|
padding: $padding;
|
||||||
|
|
||||||
|
.no-drink {
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
padding-top: $padding + 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题
|
||||||
|
.title {
|
||||||
|
font-size: $title-size + 4;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: $padding;
|
||||||
|
padding-bottom: $padding;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 8rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
left: 0;
|
||||||
|
background-color: $main-color;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 列表
|
||||||
|
.lists {
|
||||||
|
// background-color: pink;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
|
|
||||||
|
.lists-water {
|
||||||
|
background-image: linear-gradient(to right, $main-color, $main-color);
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: $margin * 0.7;
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $text-gray-m;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: $margin 0 $margin $margin * 0.7;
|
||||||
|
|
||||||
|
.list-item-title {
|
||||||
|
font-size: $title-size + 3;
|
||||||
|
color: $text-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-top: $margin * 0.4;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: $title-size - 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 水杯动画
|
||||||
|
.wave-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.grass {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
position: absolute;
|
||||||
|
width: 290rpx;
|
||||||
|
height: 500rpx;
|
||||||
|
background-color: rgba($color: $main-color, $alpha: 0.6);
|
||||||
|
background-size: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 10rpx;
|
||||||
|
left: 20rpx;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 1000rpx;
|
||||||
|
height: 1000rpx;
|
||||||
|
top: var(--ballPercent);
|
||||||
|
left: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.4);
|
||||||
|
border-radius: 45%;
|
||||||
|
transform: translate(-50%, -70%) rotate(0);
|
||||||
|
animation: rotate 4s linear infinite;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-radius: 47%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
transform: translate(-50%, -70%) rotate(0);
|
||||||
|
animation: rotate 6s linear -5s infinite;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -73%) rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -70%) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,450 +3,560 @@
|
|||||||
* @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-20 10:05:15
|
* @LastEditTime: 2022-02-08 10:41:15
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="record--foods">
|
<view class="record--foods">
|
||||||
<!-- 饮食进度条 -->
|
<!-- 自定义导航部分 -->
|
||||||
<view class="cricle-content">
|
<u-navbar :safeAreaInsetTop="true" :fixed='true' bgColor="#34ce98" :autoBack="true">
|
||||||
<view class="info">
|
<view class="u-nav-slot" slot="left">
|
||||||
饮食摄入
|
<u-icon name="arrow-leftward" :bold="true" size="20" color="#fff" />
|
||||||
<span>{{ calorys.intake_total }}</span>
|
</view>
|
||||||
</view>
|
<view class="u-nav-slot u-center" slot="center" @click="dateShow = true,dateLists()">
|
||||||
<arprogress
|
<u-icon name="play-left-fill" size="14" color="#fff" @click="datePreNext('before')" />
|
||||||
:percent="calorys.exceeds ? 100 : calorys.ratio"
|
<view class="date"> <u-icon name="calendar" color="#fff" label-color="#fff" width="150" :label="today" label-size="14" size="20" /> </view>
|
||||||
inactiveColor="#f5f4f9"
|
<u-icon name="play-right-fill" size="14" color="#fff" @click="datePreNext('after')" />
|
||||||
:activeColor="calorys.exceeds ? '#f00' : '#34ce98'"
|
</view>
|
||||||
width="300"
|
<view class="u-nav-slot" slot="right">
|
||||||
class="cricle"
|
<u-icon :name="require('@/static/icon/sign-icon.gif')" :bold="true" size="30" @click="$Router.push({name:'signIndex'})" />
|
||||||
borderWidth="20"
|
</view>
|
||||||
>
|
</u-navbar>
|
||||||
<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="cricle-content">
|
||||||
<view class="foods-add" v-for="(it, index) in intakes" :key="index">
|
<view class="info">
|
||||||
<view class="foods-title">
|
饮食摄入
|
||||||
<view class="title-left">
|
<span>{{ calorys.intake_total }}</span>
|
||||||
{{ it.name }}
|
</view>
|
||||||
<span v-if="it.remark">{{ it.remark || '' }}</span>
|
<arprogress :percent="calorys.exceeds ? 100 : calorys.ratio" inactiveColor="#f5f4f9"
|
||||||
</view>
|
:activeColor="calorys.exceeds ? '#f00' : '#34ce98'" width="300" class="cricle" borderWidth="20">
|
||||||
<view class="title-right">
|
<span>{{ calorys.exceeds ? '多吃了' : '还可以吃' }}</span>
|
||||||
{{ it.total }}
|
<span :class="['num', calorys.exceeds ? 'num1' : '']">{{ calorys.amount }}</span>
|
||||||
<span class="dw">千卡</span>
|
<span>推荐预算{{ calorys.goal }}</span>
|
||||||
<u-icon name="arrow-right" color="#ddd" size="13" :bold="true" />
|
</arprogress>
|
||||||
</view>
|
<view class="info" @click="errToast">
|
||||||
</view>
|
运动消耗
|
||||||
<goodsList :lists="it.intake" type="no-dian" @editGoods="editGoods" @longClickGoods="longClickGoods" />
|
<span>{{ calorys.exercise_total }}</span>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
<view class="ic-left">摄入量推荐</view>
|
||||||
<!-- 运动列表 -->
|
<u-icon class="ic-day" name="checkmark-circle" color="#34ce98" size="10" :label="`${calorys.days}天`"
|
||||||
<template v-if="sportsTotal > 0">
|
labelColor="#34ce98" labelSize="10" space="3" />
|
||||||
<view class="foods-title" style="padding-top:50rpx;">
|
</view>
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
<!-- 没有饮食记录 -->
|
<!-- 运动列表 -->
|
||||||
<view class="no-foods" v-if="sports.length === 0 && intakes.length === 0">
|
<template v-if="sportsTotal > 0">
|
||||||
<u-image :src="require('../../static/imgs/no-foods.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="300rpx" class="no-foods-img" />
|
<view class="foods-title" style="padding-top:50rpx;">
|
||||||
<view>还没有添加今日饮食记录</view>
|
<view class="title-left">运动</view>
|
||||||
<view>请点击屏幕下方按钮来添加</view>
|
<view class="title-right">
|
||||||
</view>
|
{{ 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" />
|
||||||
<u-action-sheet
|
</template>
|
||||||
: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>
|
|
||||||
|
|
||||||
<!-- 修改食品弹窗 -->
|
<!-- 没有饮食记录 -->
|
||||||
<!-- 添加食谱弹窗 -->
|
<view class="no-foods" v-if="sports.length === 0 && intakes.length === 0">
|
||||||
<addFoods
|
<u-image :src="require('../../static/imgs/no-foods.png')" :lazy-load="true" radius="10rpx" mode="widthFix"
|
||||||
v-if="addShow"
|
width="300rpx" class="no-foods-img" />
|
||||||
:addShow="addShow"
|
<view>还没有添加今日饮食记录</view>
|
||||||
:selectGoods="selectGoods"
|
<view>请点击屏幕下方按钮来添加</view>
|
||||||
:decimals="true"
|
</view>
|
||||||
@confirm="confirmHandle"
|
|
||||||
@close="closeHandle"
|
|
||||||
@delThis="delThis"
|
|
||||||
@tabGoodsInfo="tabGoodsInfo"
|
|
||||||
max="999"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 修改运动弹窗 -->
|
<!-- 加餐模块 -->
|
||||||
<addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport" @cancleSport="cancleSport" @delSport="delSport" />
|
<u-action-sheet :actions="addEatList" title="加餐模块" :closeOnClickOverlay="true" :closeOnClickAction="true"
|
||||||
</view>
|
@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" />
|
||||||
|
|
||||||
|
<!-- 修改运动弹窗 -->
|
||||||
|
<addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport"
|
||||||
|
@cancleSport="cancleSport" @delSport="delSport" />
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 选择日历 -->
|
||||||
|
<dateTemplate :lists="calendarList" :today="today" :month="month" :dateShow="dateShow" type='foods' @backDate="backDate"
|
||||||
|
@dateClick="dateClick" @closeDate="closeDate" @datePreNext="datePreNext" />
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import arprogress from '@/components/ar-circle-progress/index.vue';
|
import moment from 'moment';
|
||||||
import goodsList from '@/components/foods';
|
import sports from '@/components/sports';
|
||||||
import { plans, editHealthFoods, delHealthFoods } from '@/apis/interfaces/foods.js';
|
import goodsList from '@/components/foods';
|
||||||
import moment from 'moment';
|
import addPopup from '@/components/sports/addPopup';
|
||||||
import addFoods from '@/components/add-goods-template/add-goods-template';
|
import arprogress from '@/components/ar-circle-progress/index.vue';
|
||||||
import addPopup from '@/components/sports/addPopup';
|
import addFoods from '@/components/add-goods-template/add-goods-template';
|
||||||
import sports from '@/components/sports';
|
import dateTemplate from '@/components/date-template/index.vue'
|
||||||
import { editHealthSports, delHealthSports } from '@/apis/interfaces/sport.js';
|
import {
|
||||||
export default {
|
editHealthSports,
|
||||||
components: {
|
delHealthSports
|
||||||
arprogress,
|
} from '@/apis/interfaces/sport.js';
|
||||||
goodsList,
|
import {
|
||||||
addFoods,
|
plans,
|
||||||
addPopup,
|
editHealthFoods,
|
||||||
sports
|
delHealthFoods,
|
||||||
},
|
dateList
|
||||||
data() {
|
} from '@/apis/interfaces/foods.js';
|
||||||
return {
|
export default {
|
||||||
lists: [],
|
components: {
|
||||||
addShow: false, // 添加食品显示
|
arprogress,
|
||||||
selectGoods: [], // 选择新增的食品
|
goodsList,
|
||||||
addEatShow: false, // 加餐弹窗默认不显示
|
addFoods,
|
||||||
addEatList: [
|
addPopup,
|
||||||
{
|
sports,
|
||||||
name: '上午加餐',
|
dateTemplate
|
||||||
type: 2
|
},
|
||||||
},
|
data() {
|
||||||
{
|
return {
|
||||||
name: '下午加餐',
|
addShow: false, // 添加食品显示
|
||||||
type: 4
|
selectGoods: [], // 选择新增的食品
|
||||||
},
|
addEatShow: false, // 加餐弹窗默认不显示
|
||||||
{
|
addEatList: [{name: '上午加餐',type: 2},{name: '下午加餐',type: 4},{name: '晚上加餐',type: 6}],
|
||||||
name: '晚上加餐',
|
calorys: {}, // 当日食谱推荐页面的信息
|
||||||
type: 6
|
intakes: [], // 当日摄入列表
|
||||||
}
|
sports: [], // 运动列表
|
||||||
],
|
sportsTotal: 0,
|
||||||
today: moment(new Date()).format('YYYY-MM-DD'),
|
addSportsShow: false, // 添加运动弹窗显示
|
||||||
calorys: {}, // 当日食谱推荐页面的信息
|
selectSports: {}, // 选择新增的运动
|
||||||
intakes: [], // 当日摄入列表
|
today: moment(new Date()).format('YYYY-MM-DD'),// 当前时间
|
||||||
sports: [], // 运动列表
|
month: moment(new Date()).format('YYYY-MM'), //当前月份
|
||||||
sportsTotal: 0,
|
dateShow: false, // 日历展示
|
||||||
addSportsShow: false, // 添加运动弹窗显示
|
calendarList: [],
|
||||||
selectSports: {} // 选择新增的运动
|
dateType: '', // before after ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
this.dateLists(); // 日期列表
|
||||||
methods: {
|
},
|
||||||
// 编辑运动
|
methods: {
|
||||||
editSport(item) {
|
// 获取当前统计页面基本数据
|
||||||
this.selectSports = {
|
getList() {
|
||||||
name: item.sport.name,
|
plans(this.today).then(res => {
|
||||||
calory: item.sport.calory,
|
this.calorys = res.calorys;
|
||||||
cover: item.sport.cover,
|
this.calorys.ratio = Number(this.calorys.ratio);
|
||||||
duration: item.duration,
|
this.intakes = res.intakes;
|
||||||
sport_id: item.sport.sport_id,
|
this.sports = res.exercises.lists;
|
||||||
exercise_id: item.exercise_id,
|
this.sportsTotal = res.exercises.total;
|
||||||
title: '编辑运动'
|
});
|
||||||
};
|
},
|
||||||
// console.log(this.selectSports);
|
|
||||||
console.log('编辑运动', item);
|
|
||||||
this.addSportsShow = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 弹窗确认按钮新增 这里接口报错了 ，
|
//#region 运动操作相关
|
||||||
comfirmSport(show, duration) {
|
// 编辑运动
|
||||||
let params = {
|
editSport(item) {
|
||||||
unit: '1', // 时间单位：分钟 1 小时 2
|
this.selectSports = {
|
||||||
duration: duration, // 时常
|
name: item.sport.name,
|
||||||
exercise_id: this.selectSports.exercise_id, //
|
calory: item.sport.calory,
|
||||||
sport_id: this.selectSports.sport_id, // 运动id
|
cover: item.sport.cover,
|
||||||
date: this.today // 日期
|
duration: item.duration,
|
||||||
};
|
sport_id: item.sport.sport_id,
|
||||||
console.log(params);
|
exercise_id: item.exercise_id,
|
||||||
editHealthSports(params).then(res => {
|
title: '编辑运动'
|
||||||
this.addSportsShow = false;
|
};
|
||||||
this.selectSports = {};
|
// console.log(this.selectSports);
|
||||||
this.getList();
|
this.addSportsShow = true;
|
||||||
}).catch(err=>{
|
},
|
||||||
uni.showToast({
|
// 弹窗确认按钮新增 这里接口报错了 ，
|
||||||
title:err.message,
|
comfirmSport(show, duration) {
|
||||||
icon:'none'
|
let params = {
|
||||||
})
|
unit: '1', // 时间单位：分钟 1 小时 2
|
||||||
});
|
duration: duration, // 时常
|
||||||
},
|
exercise_id: this.selectSports.exercise_id, //
|
||||||
|
sport_id: this.selectSports.sport_id, // 运动id
|
||||||
|
date: this.today // 日期
|
||||||
|
};
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
// 删除运动
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//#endregion 运动操作相关
|
||||||
|
|
||||||
// 弹窗取消按钮
|
|
||||||
cancleSport(show) {
|
//#region 食物操作相关
|
||||||
this.addSportsShow = show;
|
// 长按删除食品
|
||||||
},
|
longClickGoods(e) {
|
||||||
// 删除运动
|
this.selectGoods = [e];
|
||||||
delSport() {
|
uni.showModal({
|
||||||
let params = {
|
content: '确认删除么？',
|
||||||
exercise_id: this.selectSports.exercise_id //
|
confirmText: '确认删除',
|
||||||
};
|
confirmColor: '#34ce98',
|
||||||
console.log(params);
|
cancelText: '再想想',
|
||||||
delHealthSports(params).then(res => {
|
cancelColor: '#ddd',
|
||||||
this.addSportsShow = false;
|
success: res => {
|
||||||
this.selectSports = {};
|
if (res.confirm) {
|
||||||
this.getList();
|
this.delThis();
|
||||||
});
|
}
|
||||||
},
|
}
|
||||||
// 长按删除触发事件运动
|
});
|
||||||
longClick(item) {
|
},
|
||||||
this.selectSports = item;
|
// 错误提示
|
||||||
uni.showModal({
|
errToast() {
|
||||||
content: '确认删除么？',
|
uni.showToast({
|
||||||
confirmText: '确认删除',
|
title: '努力开发中~',
|
||||||
confirmColor: '#34ce98',
|
icon: 'none'
|
||||||
cancelText: '再想想',
|
});
|
||||||
cancelColor: '#ddd',
|
},
|
||||||
success: res => {
|
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
|
||||||
if (res.confirm) {
|
tabbarClick(e) {
|
||||||
this.delSport();
|
console.log(e);
|
||||||
}
|
this.tabarIndex = e;
|
||||||
}
|
if (e === 3) {
|
||||||
});
|
this.addEatShow = true;
|
||||||
},
|
} else {
|
||||||
// 长按删除食品
|
if (e === 4) {
|
||||||
longClickGoods(e) {
|
// 新增运动
|
||||||
this.selectGoods = [e];
|
uni.navigateTo({
|
||||||
uni.showModal({
|
url: `/pages/record/addExercises`
|
||||||
content: '确认删除么？',
|
});
|
||||||
confirmText: '确认删除',
|
} else {
|
||||||
confirmColor: '#34ce98',
|
uni.navigateTo({
|
||||||
cancelText: '再想想',
|
url: `/pages/record/addFoods?type=${e === 0 ? 1 : e === 1 ? 3 : 5}&date=${this.today}`
|
||||||
cancelColor: '#ddd',
|
});
|
||||||
success: res => {
|
}
|
||||||
if (res.confirm) {
|
}
|
||||||
this.delThis();
|
},
|
||||||
}
|
// 选择了加餐跳转
|
||||||
}
|
selectClick(e) {
|
||||||
});
|
uni.navigateTo({
|
||||||
},
|
url: `/pages/record/addFoods?type=${e.type}&date=${this.today}`
|
||||||
// 错误提示
|
});
|
||||||
errToast() {
|
// 选择加餐
|
||||||
uni.showToast({
|
},
|
||||||
title: '努力开发中~',
|
// 编辑食品
|
||||||
icon: 'none'
|
editGoods(e) {
|
||||||
});
|
this.selectGoods = [e];
|
||||||
},
|
this.addShow = true;
|
||||||
getList() {
|
},
|
||||||
plans(this.today).then(res => {
|
closeHandle() {
|
||||||
this.calorys = res.calorys;
|
//键盘关闭的回调函数
|
||||||
this.calorys.ratio = Number(this.calorys.ratio);
|
this.addShow = false;
|
||||||
this.intakes = res.intakes;
|
},
|
||||||
this.sports = res.exercises.lists;
|
// 监听点击键盘触发返回值新增食品
|
||||||
this.sportsTotal = res.exercises.total;
|
confirmHandle(value) {
|
||||||
});
|
// 新添加食物
|
||||||
},
|
let data = {
|
||||||
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
|
ser: 1,
|
||||||
tabbarClick(e) {
|
weight: value,
|
||||||
console.log(e);
|
food_id: this.selectGoods[0].food_id,
|
||||||
this.tabarIndex = e;
|
intake_id: this.selectGoods[0].intake_id
|
||||||
if (e === 3) {
|
};
|
||||||
this.addEatShow = true;
|
this.editHealthFoods(data);
|
||||||
} else {
|
},
|
||||||
if (e === 4) {
|
// 添加食物
|
||||||
// 新增运动
|
editHealthFoods(data) {
|
||||||
uni.navigateTo({
|
editHealthFoods(data).then(res => {
|
||||||
url: `/pages/record/addExercises`
|
console.log(res,'添加食物');
|
||||||
});
|
this.addShow = false;
|
||||||
} else {
|
this.getList();
|
||||||
uni.navigateTo({
|
}).catch(err=>{
|
||||||
url: `/pages/record/addFoods?type=${e === 0 ? 1 : e === 1 ? 3 : 5}`
|
console.log(res,'添加食物error');
|
||||||
});
|
uni.showToast({
|
||||||
}
|
title:err.message,
|
||||||
}
|
icon:"none"
|
||||||
},
|
})
|
||||||
// 选择了加餐跳转
|
});
|
||||||
selectClick(e) {
|
},
|
||||||
uni.navigateTo({
|
// 删除该食物
|
||||||
url: `/pages/record/addFoods?type=${e.type}`
|
delThis(e) {
|
||||||
});
|
delHealthFoods(this.selectGoods[0].intake_id).then(res => {
|
||||||
// 选择加餐
|
this.addShow = false;
|
||||||
},
|
this.getList();
|
||||||
// 编辑食品
|
});
|
||||||
editGoods(e) {
|
},
|
||||||
this.selectGoods = [e];
|
// 跳转到食品详情
|
||||||
this.addShow = true;
|
tabGoodsInfo(e) {
|
||||||
},
|
this.$Router.push({
|
||||||
closeHandle() {
|
name: 'rankingDetails',
|
||||||
//键盘关闭的回调函数
|
params: e
|
||||||
this.addShow = false;
|
});
|
||||||
},
|
},
|
||||||
// 监听点击键盘触发返回值新增食品
|
//#endregion 食物操作相关
|
||||||
confirmHandle(value) {
|
|
||||||
// 新添加食物
|
//#region 日历操作相关
|
||||||
let data = {
|
// 日历列表
|
||||||
ser: 1,
|
dateLists() {
|
||||||
weight: value,
|
let data = {
|
||||||
food_id: this.selectGoods[0].food_id,
|
month: this.month,
|
||||||
intake_id: this.selectGoods[0].intake_id
|
type: this.dateType
|
||||||
};
|
}
|
||||||
this.editHealthFoods(data);
|
dateList(data).then(res => {
|
||||||
},
|
console.log(res)
|
||||||
// 添加食物
|
this.calendarList = res.calendar
|
||||||
editHealthFoods(data) {
|
this.dateType = ''
|
||||||
editHealthFoods(data).then(res => {
|
this.month = res.month
|
||||||
console.log(res);
|
}).catch(err => {
|
||||||
this.addShow = false;
|
uni.showToast({
|
||||||
this.getList();
|
title: err.message,
|
||||||
});
|
icon: 'none'
|
||||||
},
|
})
|
||||||
// 删除该食物
|
})
|
||||||
delThis(e) {
|
},
|
||||||
delHealthFoods(this.selectGoods[0].intake_id).then(res => {
|
// 选择日期
|
||||||
this.addShow = false;
|
dateClick(item) {
|
||||||
this.getList();
|
this.today = item.today
|
||||||
});
|
this.month = item.today
|
||||||
},
|
this.reset()
|
||||||
// 跳转到食品详情
|
},
|
||||||
tabGoodsInfo(e) {
|
// 返回到今日
|
||||||
this.$Router.push({
|
backDate() {
|
||||||
name: 'rankingDetails',
|
this.today = moment(new Date()).format('YYYY-MM-DD')
|
||||||
params: e
|
this.reset()
|
||||||
});
|
},
|
||||||
}
|
// 上一个月或者下一个月
|
||||||
}
|
datePreNext(type) {
|
||||||
};
|
this.dateType = type
|
||||||
|
this.dateLists()
|
||||||
|
},
|
||||||
|
// 关闭日历
|
||||||
|
closeDate() {
|
||||||
|
this.month = this.today
|
||||||
|
this.dateShow = false
|
||||||
|
},
|
||||||
|
// 重置日历数据
|
||||||
|
reset() {
|
||||||
|
this.calendarList = []
|
||||||
|
this.dateLists()
|
||||||
|
this.getList()
|
||||||
|
this.closeDate()
|
||||||
|
}
|
||||||
|
//#endregion 日历操作相关
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.record--foods {
|
.record--foods {
|
||||||
padding: $padding $padding $padding * 7 $padding;
|
padding: $padding $padding $padding * 7 $padding;
|
||||||
// background: green;
|
// background: green;
|
||||||
}
|
}
|
||||||
// 饮食进度条
|
|
||||||
.cricle-content {
|
// 顶部日历筛选部分
|
||||||
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
.u-center {
|
||||||
font-size: $title-size-m - 6;
|
display: flex;
|
||||||
padding: $padding * 1.8 $padding;
|
flex-direction: row;
|
||||||
border-radius: $radius;
|
align-items: center;
|
||||||
color: $text-gray-m;
|
justify-content: center;
|
||||||
display: flex;
|
box-sizing: border-box;
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
.date {
|
||||||
justify-content: space-around;
|
background-color: rgba($color: #000000, $alpha: .1);
|
||||||
box-sizing: border-box;
|
color: #fff;
|
||||||
position: relative;
|
min-width: 340rpx;
|
||||||
.cricle {
|
display: flex;
|
||||||
.num {
|
flex-direction: row;
|
||||||
color: $text-color;
|
align-items: center;
|
||||||
font-size: $title-size * 1.8;
|
justify-content: center;
|
||||||
font-weight: bold;
|
box-sizing: border-box;
|
||||||
padding: $padding * 0.2;
|
padding: 8rpx 20rpx;
|
||||||
}
|
border-radius: $radius * 2;
|
||||||
.num1 {
|
margin: 0 10rpx;
|
||||||
color: #f00;
|
font-size: $title-size - 2;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.info {
|
.play-right-fill {
|
||||||
display: flex;
|
padding: $padding !important;
|
||||||
flex-direction: column;
|
background-color: pink;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
}
|
||||||
box-sizing: border-box;
|
|
||||||
span {
|
|
||||||
font-size: $title-size + 10;
|
// 饮食进度条
|
||||||
font-weight: bold;
|
.cricle-content {
|
||||||
color: $text-color;
|
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
padding-top: $padding * 0.5;
|
font-size: $title-size-m - 6;
|
||||||
}
|
padding: $padding * 1.8 $padding;
|
||||||
}
|
border-radius: $radius;
|
||||||
.ic-left {
|
color: $text-gray-m;
|
||||||
position: absolute;
|
display: flex;
|
||||||
left: 0;
|
flex-direction: row;
|
||||||
top: 0;
|
align-items: center;
|
||||||
background-image: linear-gradient(to right, #ffebb9, #fbd57b);
|
justify-content: space-around;
|
||||||
color: #664710;
|
box-sizing: border-box;
|
||||||
padding: 10rpx $padding * 0.6;
|
position: relative;
|
||||||
border-radius: 0 0 $radius 0;
|
margin-top: $margin * 5;
|
||||||
}
|
|
||||||
.ic-day {
|
.cricle {
|
||||||
position: absolute;
|
.num {
|
||||||
right: $padding;
|
color: $text-color;
|
||||||
top: $padding;
|
font-size: $title-size * 1.8;
|
||||||
}
|
font-weight: bold;
|
||||||
}
|
padding: $padding * 0.2;
|
||||||
// 没有饮食记录
|
}
|
||||||
.no-foods {
|
|
||||||
display: flex;
|
.num1 {
|
||||||
flex-direction: column;
|
color: #f00;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
}
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: $title-size-m - 4;
|
.info {
|
||||||
color: $text-gray-m;
|
display: flex;
|
||||||
min-height: 40vh;
|
flex-direction: column;
|
||||||
// background: pink;
|
align-items: center;
|
||||||
.no-foods-img {
|
justify-content: center;
|
||||||
opacity: 0.5;
|
box-sizing: border-box;
|
||||||
}
|
|
||||||
view {
|
span {
|
||||||
padding: $padding * 0.2;
|
font-size: $title-size + 10;
|
||||||
}
|
font-weight: bold;
|
||||||
}
|
color: $text-color;
|
||||||
// 饮食记录 早中晚加餐等
|
padding-top: $padding * 0.5;
|
||||||
.foods-add {
|
}
|
||||||
border-bottom: solid 1rpx #f7f7f7;
|
}
|
||||||
margin-top: $margin;
|
|
||||||
}
|
.ic-left {
|
||||||
// 主标题
|
position: absolute;
|
||||||
.foods-title {
|
left: 0;
|
||||||
display: flex;
|
top: 0;
|
||||||
flex-direction: row;
|
background-image: linear-gradient(to right, #ffebb9, #fbd57b);
|
||||||
align-items: center;
|
color: #664710;
|
||||||
justify-content: space-between;
|
padding: 10rpx $padding * 0.6;
|
||||||
box-sizing: border-box;
|
border-radius: 0 0 $radius 0;
|
||||||
color: $text-color;
|
}
|
||||||
padding: $padding * 0.5 0;
|
|
||||||
.title-left {
|
.ic-day {
|
||||||
font-size: $title-size;
|
position: absolute;
|
||||||
color: $text-color;
|
right: $padding;
|
||||||
font-weight: bold;
|
top: $padding;
|
||||||
span {
|
}
|
||||||
font-weight: normal;
|
}
|
||||||
font-size: $title-size-m - 6;
|
|
||||||
color: $text-gray-m;
|
// 没有饮食记录
|
||||||
margin-left: $margin - 10;
|
.no-foods {
|
||||||
}
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
.title-right {
|
align-items: center;
|
||||||
font-size: $title-size-m - 6;
|
justify-content: center;
|
||||||
display: flex;
|
box-sizing: border-box;
|
||||||
flex-direction: row;
|
font-size: $title-size-m - 4;
|
||||||
align-items: center;
|
color: $text-gray-m;
|
||||||
justify-content: center;
|
min-height: 40vh;
|
||||||
box-sizing: border-box;
|
|
||||||
color: $main-color;
|
// background: pink;
|
||||||
.dw {
|
.no-foods-img {
|
||||||
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
opacity: 0.5;
|
||||||
color: $text-gray;
|
}
|
||||||
}
|
|
||||||
}
|
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;
|
||||||
|
color: $text-gray-m;
|
||||||
|
margin-left: $margin - 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-right {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
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>
|
||||||
|
|||||||
@@ -398,9 +398,7 @@ export default {
|
|||||||
*/
|
*/
|
||||||
logs() {
|
logs() {
|
||||||
logs().then(res => {
|
logs().then(res => {
|
||||||
|
// console.log(res.is_login)
|
||||||
console.log(res.is_login)
|
|
||||||
|
|
||||||
this.weight = res.weight;
|
this.weight = res.weight;
|
||||||
this.water = res.water;
|
this.water = res.water;
|
||||||
this.intake_run = res.intake_run;
|
this.intake_run = res.intake_run;
|
||||||
|
|||||||
@@ -8,231 +8,294 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="weight">
|
<view class="weight">
|
||||||
<!-- 体重表 -->
|
<!-- 进度模块 -->
|
||||||
<view class="progress-top">
|
<block v-if="tabbarId === 0">
|
||||||
<view class="unit">
|
<!-- 体重表 -->
|
||||||
<span
|
<view class="progress-top">
|
||||||
:class="isJin === 2?'active':''"
|
<view class="unit"> <span :class="isJin === 2?'active':''" @click="isJin = 1">斤</span> <span :class="isJin === 1?'active':''" @click="isJin = 1">公斤</span> </view>
|
||||||
@click="isJin = 1"
|
<view class="progress">
|
||||||
>斤</span>
|
<view>{{weightInfo.text}}</view>
|
||||||
<span
|
<u-count-to class="uCountTo" :startVal="0" :endVal="weightInfo.change" :decimals="1" color="#333" fontSize="36" :bold="true" />
|
||||||
:class="isJin === 1?'active':''"
|
<view>保持 / 塑性</view>
|
||||||
@click="isJin = 1"
|
|
||||||
>公斤</span>
|
|
||||||
</view>
|
|
||||||
<view class="progress">
|
|
||||||
<view>{{weightInfo.text}}</view>
|
|
||||||
<u-count-to
|
|
||||||
class="uCountTo"
|
|
||||||
:startVal="0"
|
|
||||||
:endVal="weightInfo.change"
|
|
||||||
:decimals="1"
|
|
||||||
color="#333"
|
|
||||||
fontSize="36"
|
|
||||||
:bold="true"
|
|
||||||
/>
|
|
||||||
<view>保持 / 塑性</view>
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="add-weight"
|
|
||||||
@click="addWeightShow = true"
|
|
||||||
>记录体重</view>
|
|
||||||
<view class="des-title">以最后一次记录为主且每日只能更新一次</view>
|
|
||||||
</view>
|
|
||||||
<!-- 体重列表 -->
|
|
||||||
<view
|
|
||||||
class="weight-list"
|
|
||||||
v-if="lists.length>0"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="list-item"
|
|
||||||
v-for="item in lists"
|
|
||||||
:key="item.wight_id"
|
|
||||||
>
|
|
||||||
<view class="list-left">
|
|
||||||
<view class="list-title">
|
|
||||||
<span>{{item.weight}}</span>公斤
|
|
||||||
</view>
|
|
||||||
测量结果
|
|
||||||
</view>
|
</view>
|
||||||
<view class="list-right">
|
<view class="add-weight" @click="addWeightShow = true">记录体重</view>
|
||||||
<span>开始保持 / 塑性</span>
|
<view class="des-title">以最后一次记录为主且每日只能更新一次</view>
|
||||||
{{item.created_at}}
|
</view>
|
||||||
|
|
||||||
|
<!-- 体重列表 -->
|
||||||
|
<view class="weight-list" v-if="lists.length>0">
|
||||||
|
<view class="list-item">
|
||||||
|
<view class="list-left"> <view class="list-title"> <span>{{weightInfo.begin}}</span>公斤 </view> 初始体重 </view>
|
||||||
|
<view class="list-right"> <span>开始保持 / 塑性</span> {{weightInfo.first_weight_time}} </view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item" v-for="item in lists" :key="item.wight_id">
|
||||||
|
<view class="list-left"> <view class="list-title"> <span>{{item.weight}}</span>公斤 </view> 测量结果 </view>
|
||||||
|
<view class="list-right"> <span>开始保持 / 塑性</span> {{item.created_at}} </view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="no-lists" v-else>还没有体重信息，记录下呗~</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 曲线模块 -->
|
||||||
|
<view v-if="tabbarId === 1">
|
||||||
|
<!-- 健康测评 -->
|
||||||
|
<u-image :src="require('@/static/imgs/health1.png')" class="eval-img" @click="$Router.push({ name: 'EvaluationList' })" :lazy-load="true" radius="10rpx" mode="widthFix" width="100%" />
|
||||||
|
<view class="curve">
|
||||||
|
<view class="title"> 体重 <span>单位：公斤</span> </view>
|
||||||
|
<u-icon @click="addWeightShow = true" name="edit-pen-fill" color="#34ce98" size="20" :bold="true" label="更新" labelPos="right" labelSize="13" labelColor="#999" space="4" />
|
||||||
|
</view>
|
||||||
|
<view class="charts-box"> <qiun-data-charts type="area" :chartData="chartData" background="none" /> </view>
|
||||||
|
<view class="progress-top">
|
||||||
|
<view class="add-weight" @click="addWeightShow = true">记录体重</view>
|
||||||
|
<view class="des-title">只显示最近七次测量记录</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
|
||||||
class="no-lists"
|
|
||||||
v-else
|
|
||||||
>还没有体重信息，记录下呗~</view>
|
|
||||||
<!-- 记录体重弹窗 -->
|
<!-- 记录体重弹窗 -->
|
||||||
<u-popup
|
<u-popup :show="addWeightShow" :round="10" @close="addWeightShow = false" :closeable="true">
|
||||||
:show="addWeightShow"
|
|
||||||
:round="10"
|
|
||||||
@close="addWeightShow = false"
|
|
||||||
:closeable="true"
|
|
||||||
>
|
|
||||||
<view class="addWeightContent">
|
<view class="addWeightContent">
|
||||||
<view class="date">今天</view>
|
<view class="date">今天</view>
|
||||||
<view class='count'><span>{{weight}}</span>公斤</view>
|
<view class='count'><span>{{weight}}</span>公斤</view>
|
||||||
<vue-scale
|
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scroll" :scrollLeft="Number(weight)" />
|
||||||
:min="10"
|
<view class="addBtn" @click="addWeight">确认添加</view>
|
||||||
:max="100"
|
|
||||||
:int="false"
|
|
||||||
:single="10"
|
|
||||||
:h="80"
|
|
||||||
:styles="styles"
|
|
||||||
@scroll="scroll"
|
|
||||||
:scrollLeft="Number(weight)"
|
|
||||||
/>
|
|
||||||
<view
|
|
||||||
class="addBtn"
|
|
||||||
@click="addWeight"
|
|
||||||
>确认添加</view>
|
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 底部 进度 曲线菜单 -->
|
||||||
|
<u-tabbar :value="tabbarId" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false" activeColor="#34ce98">
|
||||||
|
<u-tabbar-item text="进度" :icon="tabbarId === 0 ?require('../../static/imgs/speed-2.png'):require('../../static/imgs/speed-1.png')" @click="tabbarClick" />
|
||||||
|
<u-tabbar-item text="曲线" :icon="tabbarId === 1 ?require('../../static/imgs/curve-2.png'):require('../../static/imgs/curve-1.png')" @click="tabbarClick" />
|
||||||
|
</u-tabbar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import vueScale from "@/components/vueScale";
|
import vueScale from "@/components/vueScale";
|
||||||
import { weights, addWeight } from "@/apis/interfaces/weight.js";
|
import {
|
||||||
import moment from "moment";
|
weights,
|
||||||
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
|
addWeight,
|
||||||
export default {
|
curves
|
||||||
components: {
|
} from "@/apis/interfaces/weight.js";
|
||||||
vueScale,
|
import moment from "moment";
|
||||||
},
|
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
|
||||||
data() {
|
export default {
|
||||||
return {
|
components: {
|
||||||
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
|
vueScale,
|
||||||
addWeightShow: false, // 是否添加体重展示
|
|
||||||
styles: {
|
|
||||||
line: "#dbdbdb",
|
|
||||||
bginner: "#fbfbfb",
|
|
||||||
bgoutside: "#ffffff",
|
|
||||||
font: "#404040",
|
|
||||||
fontColor: "#404040",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
weight: "",
|
|
||||||
date: "",
|
|
||||||
weightInfo: {},
|
|
||||||
lists: [],
|
|
||||||
has_more: true,
|
|
||||||
page: 1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
this.getWeights();
|
|
||||||
this.date = moment(new Date()).format("YYYY-MM-DD");
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (!this.has_more) {
|
|
||||||
uni.showToast({
|
|
||||||
title: "没有更多啦~",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.page = this.page + 1;
|
|
||||||
this.getWeights();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
//获取体重首页接口
|
|
||||||
getWeights() {
|
|
||||||
weights(this.page).then((res) => {
|
|
||||||
if(res.lists.page.current === 1) {
|
|
||||||
this.lists = []
|
|
||||||
}
|
|
||||||
this.lists = this.lists.concat(res.lists.data);
|
|
||||||
this.has_more = res.lists.page.has_more;
|
|
||||||
this.weightInfo = res.weight;
|
|
||||||
this.weight = res.weight.now;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
addWeight() {
|
data() {
|
||||||
let data = {
|
return {
|
||||||
weight: this.weight,
|
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
|
||||||
date: this.date,
|
addWeightShow: false, // 是否添加体重展示
|
||||||
|
styles: {
|
||||||
|
line: "#dbdbdb",
|
||||||
|
bginner: "#fbfbfb",
|
||||||
|
bgoutside: "#ffffff",
|
||||||
|
font: "#404040",
|
||||||
|
fontColor: "#404040",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
weight: "",
|
||||||
|
date: "",
|
||||||
|
weightInfo: {},
|
||||||
|
lists: [],
|
||||||
|
has_more: true,
|
||||||
|
page: 1,
|
||||||
|
tabbarId: 0,
|
||||||
|
chartData: {
|
||||||
|
"categories": ["1/1","1/2","1/3","1/4","1/5","1/6","1/7"],
|
||||||
|
"series": [{"name": "最近七天进度","data": [55,51,53.3,50.3,53.3]}]
|
||||||
|
}, // 曲线部分 start
|
||||||
};
|
};
|
||||||
addWeight(data).then((res) => {
|
},
|
||||||
this.addWeightShow = false;
|
onShow() {
|
||||||
this.page = 1;
|
this.getWeights();
|
||||||
this.has_more = true;
|
this.getCurves();
|
||||||
this.lists = [];
|
this.date = moment(new Date()).format("YYYY-MM-DD");
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
if (!this.has_more) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "没有更多啦~",
|
||||||
|
icon: "none",
|
||||||
|
duration: 1000,
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.page = this.page + 1;
|
||||||
this.getWeights();
|
this.getWeights();
|
||||||
});
|
}
|
||||||
},
|
},
|
||||||
// 滚动标尺触发事件
|
|
||||||
scroll(msg) {
|
methods: {
|
||||||
this.weight = msg;
|
//获取体重首页接口
|
||||||
|
getWeights() {
|
||||||
|
weights(this.page).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.lists.page.current === 1) {
|
||||||
|
this.lists = []
|
||||||
|
}
|
||||||
|
this.lists = this.lists.concat(res.lists.data);
|
||||||
|
this.has_more = res.lists.page.has_more;
|
||||||
|
this.weightInfo = res.weight;
|
||||||
|
this.weight = res.weight.now;
|
||||||
|
}).catch(err=>{
|
||||||
|
uni.showToast({
|
||||||
|
title:err.message,
|
||||||
|
icon:"none",
|
||||||
|
mask:true,
|
||||||
|
duration:2000
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取曲线
|
||||||
|
getCurves() {
|
||||||
|
curves().then((res) => {
|
||||||
|
this.chartData={
|
||||||
|
categories:res.categories,
|
||||||
|
"series": [res.series]
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
uni.showToast({
|
||||||
|
title:err.message,
|
||||||
|
icon:"none",
|
||||||
|
mask:true,
|
||||||
|
duration:2000
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新体重
|
||||||
|
addWeight() {
|
||||||
|
let data = {
|
||||||
|
weight: this.weight,
|
||||||
|
date: this.date
|
||||||
|
};
|
||||||
|
addWeight(data).then((res) => {
|
||||||
|
this.addWeightShow = false;
|
||||||
|
this.page = 1;
|
||||||
|
this.has_more = true;
|
||||||
|
this.lists = [];
|
||||||
|
this.getWeights();
|
||||||
|
this.getCurves();
|
||||||
|
}).catch(err=>{
|
||||||
|
uni.showToast({
|
||||||
|
title:err.message,
|
||||||
|
icon:"none",
|
||||||
|
mask:true,
|
||||||
|
duration:2000
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 滚动标尺触发事件
|
||||||
|
scroll(msg) {
|
||||||
|
this.weight = msg;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击底部切换
|
||||||
|
tabbarClick(e) {
|
||||||
|
console.log(e)
|
||||||
|
this.tabbarId = Number(e)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
};
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
//体重top
|
.charts-box{
|
||||||
.progress-top {
|
width: 100%;
|
||||||
padding: $padding * 2 $padding;
|
height:500rpx;
|
||||||
display: flex;
|
margin-top: $margin;
|
||||||
flex-direction: column;
|
}
|
||||||
align-items: center;
|
// curve
|
||||||
justify-content: center;
|
.curve{
|
||||||
box-sizing: border-box;
|
margin-top: $margin;
|
||||||
border-bottom: solid 1rpx #f7f7f7;
|
padding: $padding $padding + 10;
|
||||||
// 单位
|
|
||||||
.unit {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
width: 100%;
|
box-sizing: border-box;
|
||||||
span {
|
font-size: $title-size + 5;
|
||||||
display: inline-block;
|
color: #333;
|
||||||
width: 100rpx;
|
span{
|
||||||
|
color: #cacaca;
|
||||||
font-size: $title-size-m;
|
font-size: $title-size-m;
|
||||||
color: $border-color;
|
margin-left: 10rpx;
|
||||||
padding: $padding * 0.5 0;
|
|
||||||
text-align: center;
|
|
||||||
border: solid 1rpx $border-color;
|
|
||||||
border-radius: 50rpx 0 0 50rpx;
|
|
||||||
}
|
|
||||||
span:nth-child(1) {
|
|
||||||
border-radius: 50rpx 0 0 50rpx;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $border-color $main-color $border-color $border-color;
|
|
||||||
}
|
|
||||||
span:nth-child(2) {
|
|
||||||
border-radius: 0 50rpx 50rpx 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $border-color $border-color $border-color $main-color;
|
|
||||||
}
|
|
||||||
span.active {
|
|
||||||
background-color: $main-color;
|
|
||||||
color: #fff;
|
|
||||||
border: solid 1rpx $main-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 评测图片
|
||||||
// 展示圈
|
.eval-img {
|
||||||
.progress {
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
width: 360rpx;
|
}
|
||||||
height: 360rpx;
|
//体重top
|
||||||
border: solid $padding * 0.7 #f7f7f7;
|
.progress-top {
|
||||||
border-radius: 50%;
|
padding: $padding * 2 $padding;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: $text-gray-m;
|
border-bottom: solid 1rpx #f7f7f7;
|
||||||
font-size: $title-size-m;
|
|
||||||
.uCountTo {
|
// 单位
|
||||||
padding: $padding * 0.5;
|
.unit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100rpx;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: $border-color;
|
||||||
|
padding: $padding * 0.5 0;
|
||||||
|
text-align: center;
|
||||||
|
border: solid 1rpx $border-color;
|
||||||
|
border-radius: 50rpx 0 0 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(1) {
|
||||||
|
border-radius: 50rpx 0 0 50rpx;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $border-color $main-color $border-color $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
border-radius: 0 50rpx 50rpx 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $border-color $border-color $border-color $main-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.active {
|
||||||
|
background-color: $main-color;
|
||||||
|
color: #fff;
|
||||||
|
border: solid 1rpx $main-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// 记录按钮
|
// 展示圈
|
||||||
|
.progress {
|
||||||
|
width: 360rpx;
|
||||||
|
height: 360rpx;
|
||||||
|
border: solid $padding * 0.7 #f7f7f7;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m;
|
||||||
|
|
||||||
|
.uCountTo {
|
||||||
|
padding: $padding * 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 记录按钮
|
||||||
.add-weight {
|
.add-weight {
|
||||||
font-size: $title-size + 2;
|
font-size: $title-size + 2;
|
||||||
border-radius: $radius * 3;
|
border-radius: $radius * 3;
|
||||||
@@ -242,92 +305,106 @@ export default {
|
|||||||
margin-top: $margin * 2;
|
margin-top: $margin * 2;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.des-title {
|
.des-title {
|
||||||
|
padding: $padding;
|
||||||
|
color: $text-gray-m;
|
||||||
|
font-size: $title-size-m - 4;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 列表
|
||||||
|
.weight-list {
|
||||||
|
font-size: $title-size-m;
|
||||||
|
color: #cacaca;
|
||||||
|
padding: 0 $padding;
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: solid 1rpx #f9f9f9;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: $title-size-m - 2;
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
color: #555;
|
||||||
|
font-size: $title-size-m - 2;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: $title-size + 10;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: $margin * 0.4;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-lists {
|
||||||
padding: $padding;
|
padding: $padding;
|
||||||
color: $text-gray-m;
|
color: $text-gray-m;
|
||||||
font-size: $title-size-m - 4;
|
font-size: $title-size-m;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// 列表
|
|
||||||
.weight-list {
|
|
||||||
font-size: $title-size-m;
|
|
||||||
color: $text-gray-m;
|
|
||||||
padding: $padding;
|
|
||||||
|
|
||||||
.list-item {
|
// 弹窗
|
||||||
display: flex;
|
.addWeightContent {
|
||||||
flex-direction: row;
|
width: 100%;
|
||||||
align-items: center;
|
height: 54vh;
|
||||||
|
padding: $padding * 4 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $text-gray;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom: solid 1rpx #f9f9f9;
|
|
||||||
padding: $padding 0;
|
|
||||||
.list-title {
|
|
||||||
color: $text-color;
|
|
||||||
font-size: $title-size-m;
|
|
||||||
margin-bottom: $margin * 0.4;
|
|
||||||
span {
|
|
||||||
font-size: $title-size + 14;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.list-right {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: $margin * 0.4;
|
|
||||||
span {
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.no-lists {
|
|
||||||
padding: $padding;
|
|
||||||
color: $text-gray-m;
|
|
||||||
font-size: $title-size-m;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 弹窗
|
.date {
|
||||||
.addWeightContent {
|
font-size: $title-size + 9;
|
||||||
width: 100%;
|
text-align: center;
|
||||||
height: 54vh;
|
}
|
||||||
padding: $padding * 4 0;
|
|
||||||
box-sizing: border-box;
|
.count {
|
||||||
color: $text-gray;
|
color: $main-color;
|
||||||
display: flex;
|
text-align: center;
|
||||||
flex-direction: column;
|
margin-top: $margin * 2;
|
||||||
align-items: center;
|
margin-bottom: $margin * 0.1;
|
||||||
justify-content: center;
|
font-size: $title-size + 2;
|
||||||
box-sizing: border-box;
|
|
||||||
.date {
|
span {
|
||||||
font-size: $title-size + 9;
|
font-weight: bold;
|
||||||
text-align: center;
|
font-size: $title-size * 2.2;
|
||||||
}
|
margin-right: $margin * 0.3;
|
||||||
.count {
|
}
|
||||||
color: $main-color;
|
}
|
||||||
text-align: center;
|
|
||||||
margin-top: $margin * 2;
|
.addBtn {
|
||||||
margin-bottom: $margin * 0.1;
|
background-color: $main-color;
|
||||||
font-size: $title-size + 2;
|
color: #fff;
|
||||||
span {
|
margin-top: $margin * 2;
|
||||||
font-weight: bold;
|
font-size: $title-size * 1.2;
|
||||||
font-size: $title-size * 2.2;
|
padding: $padding * 0.7 $padding * 4;
|
||||||
margin-right: $margin * 0.3;
|
border-radius: $radius * 3;
|
||||||
|
font-size: $title-size + 6;
|
||||||
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.addBtn {
|
|
||||||
background-color: $main-color;
|
|
||||||
color: #fff;
|
|
||||||
margin-top: $margin * 2;
|
|
||||||
font-size: $title-size * 1.2;
|
|
||||||
padding: $padding * 0.7 $padding * 4;
|
|
||||||
border-radius: $radius * 3;
|
|
||||||
font-size: $title-size + 6;
|
|
||||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
BIN
static/imgs/curve-1.png
Normal file
BIN
static/imgs/curve-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
static/imgs/curve-2.png
Normal file
BIN
static/imgs/curve-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/imgs/speed-1.png
Normal file
BIN
static/imgs/speed-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
static/imgs/speed-2.png
Normal file
BIN
static/imgs/speed-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
static/imgs/water-1.png
Normal file
BIN
static/imgs/water-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
static/imgs/water-2.png
Normal file
BIN
static/imgs/water-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user