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

饮食健康模块新增日历查询，饮水模块新增日历查询，封装日历组件，体重新增曲线页面及接口记录，新增初始体重

Browse Source
This commit is contained in:
张冬雪
2022-02-08 17:14:39 +08:00
parent 7b932ec8e3
commit ded9bf93d4
20 changed files with 2618 additions and 1895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@@ -1,5 +1,7 @@
<script>
import { getVersions } from './apis/interfaces/versions'
import {
getVersions
} from './apis/interfaces/versions'
import im from '@/utils/im/index.js'
export default {

22
apis/interfaces/drink.js
View File

@@ -9,9 +9,10 @@ import { request } from '../index'
/**
* @description:饮水记录首页
*/
const waters = () => {
const waters = (data) => {
return request({
url: 'health/waters',
data:data
})
}
/**
@@ -29,10 +30,11 @@ const setWaters = (data) => {
* @description:喝水
* @Date: 2022-01-12 12：56：00
*/
const drinkWater = () => {
const drinkWater = (data) => {
return request({
url: 'health/waters/drink',
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 {
waters,
setWaters,
drinkWater,
delDrinkWater
delDrinkWater,
dateList
}

15
apis/interfaces/foods.js
View File

@@ -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 {
positions,
plans,
healthFoods,
addHealthFoods,
editHealthFoods,
delHealthFoods
delHealthFoods,
dateList
}

15
apis/interfaces/weight.js
View File

@@ -6,6 +6,7 @@
* @LastEditTime: 2022-01-12 17:13:45
*/
import { request } from '../index'
/**
* @description:称量体重模块首页
*/
@@ -15,6 +16,16 @@ const weights = (page) => {
data: { page: page }
})
}
/**
* @description:获取曲线进度
*/
const curves = () => {
return request({
url: 'health/weights/bight'
})
}
/**
* @description:记录体重
* @Date: 2022-01-12 16:46:19
@@ -26,7 +37,9 @@ const addWeight = (data) => {
data: data
})
}
export {
weights,
addWeight
addWeight,
curves
}

342
components/date-template/index.vue Normal file
View File

@@ -0,0 +1,342 @@
<!--
* @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
View File

@@ -35,9 +35,8 @@
"path": "pages/record/drink",
"name": "Drink",
"style": {
"navigationBarTitleText": "记录喝水",
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
"navigationBarTitleText": "记录",
"navigationStyle": "custom"
}
},
{
@@ -53,9 +52,8 @@
"path": "pages/record/foods",
"name": "RecordFoods",
"style": {
"navigationBarTitleText": "食物记录",
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{

1
pages/auth/auth.vue
View File

@@ -83,7 +83,6 @@ export default {
mobileNo: this.phone,
code: this.code,
}).then((res) => {
console.log(111)
this.$store.commit(
"setToken",
res.token_type + " " + res.access_token

3
pages/im/private/components/showVoice.nvue
View File

@@ -65,7 +65,8 @@
height: 79rpx;
width: 170rpx;
padding: 0 20rpx;
box-sizing: border-box;
box-sizing:border-box;
/* box-sizing: border-box; */
}
,

75
pages/record/addFoods.vue
View File

@@ -14,43 +14,29 @@
<view>高等热量</view>
</view>
<!-- 搜索页面 -->
<u-search
:show-action="true"
actionText="搜索"
:animation="true"
:clearabled="true"
placeholder="请输入食品名称"
@custom="searchCustom"
@clear="clearSearch"
v-model="name"
/>
<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入食品名称"
@custom="searchCustom" @clear="clearSearch" v-model="name" />
<!-- 食品列表 -->
<goodsList
:lists="lists"
type="dian"
@addGoods="addGoods"
/>
<goodsList :lists="lists" type="dian" @addGoods="addGoods" />
<!-- 添加食谱弹窗 -->
<addFoods
v-if="addShow"
:addShow="addShow"
:selectGoods="selectGoods"
:decimals="true"
@confirm="confirmHandle"
@close="closeHandle"
@tabGoodsInfo="tabGoodsInfo"
max="999"
/>
<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle"
@close="closeHandle" @tabGoodsInfo="tabGoodsInfo" max="999" />
</view>
</template>
<script>
import goodsList from "@/components/foods";
import addFoods from "@/components/add-goods-template/add-goods-template";
import { healthFoods, addHealthFoods } from "@/apis/interfaces/foods.js";
import moment from "moment";
import goodsList from "@/components/foods";
import addFoods from "@/components/add-goods-template/add-goods-template";
import {
healthFoods,
addHealthFoods
} from "@/apis/interfaces/foods.js";
import moment from "moment";
export default {
components: { goodsList, addFoods },
export default {
components: {
goodsList,
addFoods
},
data() {
return {
addShow: false, // 添加食品显示
@@ -72,6 +58,8 @@ export default {
}
//没有id的时候就是新增要处理type
this.type = this.$Route.query.type;
this.date = this.$Route.query.date;
console.log(this.date,'date.........')
// this.getFoods();
},
onLoad() {
@@ -104,7 +92,6 @@ export default {
},
// 监听点击键盘触发返回值新增食品
confirmHandle(value) {
console.log(value);
// 新添加食物
let data = {
type: this.type,
@@ -113,6 +100,7 @@ export default {
food_id: this.selectGoods[0].food_id,
date: this.date,
};
console.log(data,'data...........');
this.addHealthFoods(data);
},
// 添加食物
@@ -121,6 +109,17 @@ export default {
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() {
@@ -158,11 +157,12 @@ export default {
});
},
},
};
};
</script>
<style lang="scss" scoped>
.add-foods {
.add-foods {
padding: $padding;
.re {
display: flex;
flex-direction: row;
@@ -171,6 +171,7 @@ export default {
box-sizing: border-box;
padding: $padding $padding * 2;
font-size: $title-size-m;
view:before {
width: 20rpx;
height: 20rpx;
@@ -178,16 +179,20 @@ export default {
display: inline-block;
margin-right: 10rpx;
content: "";
}
view:nth-child(3):before {
background: #fa624d;
}
view:nth-child(2):before {
background: #fbbf0f;
}
view:nth-child(1):before {
background: #02c7bd;
}
}
}
}
</style>

258
pages/record/drink.vue
View File

@@ -8,6 +8,24 @@
<template>
<view class="drink" v-if="loaded">
<!-- 自定义导航部分 -->
<u-navbar :safeAreaInsetTop="true" :fixed='true' bgColor="#34ce98" :autoBack="true">
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-leftward" :bold="true" size="20" color="#fff" />
</view>
<view class="u-nav-slot u-center" slot="center" @click="dateShow = true,dateLists()">
<u-icon name="play-left-fill" size="14" color="#fff" @click="datePreNext('before')" />
<view class="date">
<u-icon name="calendar" color="#fff" label-color="#fff" width="150" :label="today" label-size="14"
size="20" />
</view>
<u-icon name="play-right-fill" size="14" color="#fff" @click="datePreNext('after')" />
</view>
<view class="u-nav-slot" slot="right">
<u-icon :name="require('@/static/icon/sign-icon.gif')" :bold="true" size="30"
@click="$Router.push({name:'signIndex'})" />
</view>
</u-navbar>
<!-- 喝水及水杯文字 -->
<view class="drink-content">
<view class="title" v-if="!water.is_complete">
@@ -19,63 +37,41 @@
<view class="title" v-if="water.is_complete">
已喝
<span class="num">{{ water.total }}ml</span>
<u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true" mode="widthFix" width="140rpx" />
<u-image class="is_complete" :src="require('../../static/imgs/target.png')" :lazy-load="true"
mode="widthFix" width="140rpx" />
</view>
<!-- 水杯动态图片 -->
<view class="wave-content">
<u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true" mode="scaleToFill" width="320rpx" height="520rpx" />
<u-image class="grass" :src="require('../../static/imgs/gress.png')" :lazy-load="true"
mode="scaleToFill" width="320rpx" height="520rpx" />
<view class="wave" :style="{ '--ballPercent': -ballPercent + 40 + '%' }"></view>
</view>
<!-- 目标 -->
<view class="water-target">
<view class="target-item" @click="targetShow = true">
今日目标
<u-icon
class="target-icon"
name="arrow-right"
color="#666"
size="14"
:bold="true"
:label="water.target + 'ml'"
labelPos="left"
labelSize="16"
labelColor="#666"
space="6"
/>
<u-icon class="target-icon" name="arrow-right" color="#666" size="14" :bold="true"
:label="water.target + 'ml'" labelPos="left" labelSize="16" labelColor="#666" space="6" />
</view>
<view class="target-item" @click="waterCShow = true">
水杯容量
<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" />
<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>
<u-picker
:show="targetShow"
:columns="tagerts"
title="每天喝水目标"
keyName="label"
confirmColor="#34ce98"
:closeOnClickOverlay="true"
@close="targetShow = false"
@confirm="targetSure('1', $event)"
:defaultIndex="tagertsDefaultIndex"
/>
<u-picker
:show="waterCShow"
:columns="cup_mls"
title="设置水杯容量"
keyName="label"
confirmColor="#34ce98"
:closeOnClickOverlay="true"
@close="waterCShow = false"
@confirm="targetSure('2', $event)"
:defaultIndex="cupDefaultIndex"
/>
<u-picker :show="targetShow" :columns="tagerts" title="每天喝水目标" keyName="label" confirmColor="#34ce98"
:closeOnClickOverlay="true" @close="targetShow = false" @confirm="targetSure('1', $event)"
:defaultIndex="tagertsDefaultIndex" />
<u-picker :show="waterCShow" :columns="cup_mls" title="设置水杯容量" keyName="label" confirmColor="#34ce98"
:closeOnClickOverlay="true" @close="waterCShow = false" @confirm="targetSure('2', $event)"
:defaultIndex="cupDefaultIndex" />
</view>
<!-- 加水 -->
<view class="add-water" @click="drinkWater">
<u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true" mode="scaleToFill" width="60rpx" height="80rpx" />
<u-image class="grass" :src="require('../../static/imgs/gress2.png')" :lazy-load="true"
mode="scaleToFill" width="60rpx" height="80rpx" />
<span>一杯水</span>
<u-icon class="add-icon" name="plus-circle-fill" color="#34ce98" size="24" />
</view>
@@ -84,8 +80,11 @@
<view class="--history">
<view class="title">喝水记录</view>
<template v-if="logs.length > 0">
<view class="lists" v-for="item in logs" :key="item.water_log_id" @longpress="delWater(item.water_log_id)">
<view class="lists-water"><u-icon size="30" :name="require('../../static/icon/water-icon.png')" /></view>
<view class="lists" v-for="item in logs" :key="item.water_log_id"
@longpress="delWater(item.water_log_id)">
<view class="lists-water">
<u-icon size="30" :name="require('../../static/icon/water-icon.png')" />
</view>
<view class="list-item">
<view class="list-item-title">
水
@@ -97,12 +96,26 @@
</template>
<view v-else class="no-drink">今天一杯水还没有喝呢，来一杯吧~</view>
</view>
<!-- 选择日历 -->
<dateTemplate :lists="calendarList" :today="today" :month="month" :dateShow="dateShow" type='drink'
@backDate="backDate" @dateClick="dateClick" @closeDate="closeDate" @datePreNext="datePreNext" />
</view>
</template>
<script>
import { waters, setWaters, drinkWater, delDrinkWater } from '@/apis/interfaces/drink';
import moment from 'moment';
export default {
import {
waters,
setWaters,
drinkWater,
delDrinkWater,
dateList
} from '@/apis/interfaces/drink';
import moment from 'moment';
import dateTemplate from '@/components/date-template/index.vue'
export default {
components: {
dateTemplate
},
data() {
return {
ballPercent: 0, // 喝水比例
@@ -114,23 +127,34 @@ export default {
waterCShow: false,
cup_mls: [], // 水杯列表
cupDefaultIndex: ['2'], // 目标默认index
loaded: false
loaded: false,
today: moment(new Date()).format('YYYY-MM-DD'), // 当前时间
month: moment(new Date()).format('YYYY-MM'), //当前月份
dateShow: false, // 日历展示
calendarList: [],
dateType: '', // before after ''
};
},
onShow() {
this.getWaters();
this.dateLists();
},
methods: {
// 获取喝水页面信息
getWaters() {
waters().then(res => {
let data = {
date: this.today,
// type:this.dateType
}
waters(data).then(res => {
this.cup_mls = [res.cup_mls];
this.tagerts = [res.tagerts];
this.water = res.water;
this.logs = res.logs;
this.ballPercent = res.water.lack.ratio;
this.cupDefaultIndex = [res.cup_mls.findIndex(item => item.number === res.water.ml)];
this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water.target)];
this.tagertsDefaultIndex = [res.tagerts.findIndex(item => item.number === res.water
.target)];
this.loaded = true;
});
},
@@ -160,8 +184,22 @@ export default {
},
// 喝水
drinkWater() {
drinkWater().then(res => {
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
})
});
},
// 删除和喝水记录
@@ -187,12 +225,93 @@ export default {
}
}
});
},
//#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>
<style lang="scss" scoped>
.drink {
.drink {
padding-top: 120rpx;
// 顶部日历筛选部分
.u-center {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.date {
background-color: rgba($color: #000000, $alpha: .1);
color: #fff;
min-width: 340rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 8rpx 20rpx;
border-radius: $radius * 2;
margin: 0 10rpx;
font-size: $title-size - 2;
}
.play-right-fill {
padding: $padding !important;
background-color: pink;
}
}
// 喝水 水杯及文字
.drink-content {
@@ -203,6 +322,7 @@ export default {
box-sizing: border-box;
// padding: $padding 0;
position: relative;
// 标题 再喝水
.title {
font-size: $title-size + 4;
@@ -210,22 +330,26 @@ export default {
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;
@@ -237,17 +361,20 @@ export default {
color: $text-color;
margin-top: $margin * 2;
position: relative;
span {
padding-top: $padding * 0.4;
color:$text-gray-m;
color: $text-gray-m;
font-size: $title-size;
}
.add-icon {
position: absolute;
top: $margin + 8;
right: 0;
}
}
// 目标
.water-target {
display: flex;
@@ -261,22 +388,27 @@ export default {
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;
@@ -290,6 +422,7 @@ export default {
box-sizing: border-box;
padding-left: $padding;
padding-bottom: $padding;
&::before {
position: absolute;
content: '';
@@ -310,6 +443,7 @@ export default {
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;
@@ -321,6 +455,7 @@ export default {
justify-content: center;
box-sizing: border-box;
}
.list-item {
flex: 1;
margin-left: $margin * 0.7;
@@ -332,6 +467,7 @@ export default {
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;
@@ -341,6 +477,7 @@ export default {
justify-content: center;
box-sizing: border-box;
font-weight: bold;
span {
margin-top: $margin * 0.4;
background-color: #f7f7f7;
@@ -353,14 +490,16 @@ export default {
}
}
}
}
// 水杯动画
.wave-content {
}
// 水杯动画
.wave-content {
position: relative;
z-index: 110;
z-index: 1;
.grass {
position: relative;
z-index: 120099;
z-index: 1;
}
.wave {
@@ -372,7 +511,8 @@ export default {
overflow: hidden;
top: 10rpx;
left: 20rpx;
z-index: 10;
z-index: 1;
&::before,
&::after {
content: '';
@@ -385,8 +525,9 @@ export default {
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 4s linear infinite;
z-index: 10;
z-index: 1;
}
&::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, 0.9);
@@ -400,9 +541,10 @@ export default {
50% {
transform: translate(-50%, -73%) rotate(180deg);
}
100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
}
}
</style>

306
pages/record/foods.vue
View File

@@ -3,25 +3,34 @@
* @Author: Aimee·Zhang
* @Date: 2022-01-11 08:54:49
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-20 10:05:15
* @LastEditTime: 2022-02-08 10:41:15
-->
<template>
<view class="record--foods">
<!-- 自定义导航部分 -->
<u-navbar :safeAreaInsetTop="true" :fixed='true' bgColor="#34ce98" :autoBack="true">
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-leftward" :bold="true" size="20" color="#fff" />
</view>
<view class="u-nav-slot u-center" slot="center" @click="dateShow = true,dateLists()">
<u-icon name="play-left-fill" size="14" color="#fff" @click="datePreNext('before')" />
<view class="date"> <u-icon name="calendar" color="#fff" label-color="#fff" width="150" :label="today" label-size="14" size="20" /> </view>
<u-icon name="play-right-fill" size="14" color="#fff" @click="datePreNext('after')" />
</view>
<view class="u-nav-slot" slot="right">
<u-icon :name="require('@/static/icon/sign-icon.gif')" :bold="true" size="30" @click="$Router.push({name:'signIndex'})" />
</view>
</u-navbar>
<!-- 饮食进度条 -->
<view class="cricle-content">
<view class="info">
饮食摄入
<span>{{ calorys.intake_total }}</span>
</view>
<arprogress
:percent="calorys.exceeds ? 100 : calorys.ratio"
inactiveColor="#f5f4f9"
:activeColor="calorys.exceeds ? '#f00' : '#34ce98'"
width="300"
class="cricle"
borderWidth="20"
>
<arprogress :percent="calorys.exceeds ? 100 : calorys.ratio" inactiveColor="#f5f4f9"
:activeColor="calorys.exceeds ? '#f00' : '#34ce98'" width="300" class="cricle" borderWidth="20">
<span>{{ calorys.exceeds ? '多吃了' : '还可以吃' }}</span>
<span :class="['num', calorys.exceeds ? 'num1' : '']">{{ calorys.amount }}</span>
<span>推荐预算{{ calorys.goal }}</span>
@@ -31,7 +40,8 @@
<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" />
<u-icon class="ic-day" name="checkmark-circle" color="#34ce98" size="10" :label="`${calorys.days}天`"
labelColor="#34ce98" labelSize="10" space="3" />
</view>
<!-- 有饮食记录 -->
@@ -51,6 +61,7 @@
<goodsList :lists="it.intake" type="no-dian" @editGoods="editGoods" @longClickGoods="longClickGoods" />
</view>
</template>
<!-- 运动列表 -->
<template v-if="sportsTotal > 0">
<view class="foods-title" style="padding-top:50rpx;">
@@ -67,24 +78,19 @@
<!-- 没有饮食记录 -->
<view class="no-foods" v-if="sports.length === 0 && intakes.length === 0">
<u-image :src="require('../../static/imgs/no-foods.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="300rpx" class="no-foods-img" />
<u-image :src="require('../../static/imgs/no-foods.png')" :lazy-load="true" radius="10rpx" mode="widthFix"
width="300rpx" class="no-foods-img" />
<view>还没有添加今日饮食记录</view>
<view>请点击屏幕下方按钮来添加</view>
</view>
<!-- 加餐模块 -->
<u-action-sheet
:actions="addEatList"
title="加餐模块"
:closeOnClickOverlay="true"
:closeOnClickAction="true"
@select="selectClick"
cancelText="取消"
:show="addEatShow"
@close="addEatShow = false"
></u-action-sheet>
<u-action-sheet :actions="addEatList" title="加餐模块" :closeOnClickOverlay="true" :closeOnClickAction="true"
@select="selectClick" cancelText="取消" :show="addEatShow" @close="addEatShow = false"></u-action-sheet>
<!-- 底部 早餐等菜单 -->
<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" inactiveColor="#333" @click="tabbarClick">
<u-tabbar :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')" />
@@ -92,75 +98,85 @@
<u-tabbar-item text="+运动" @click="tabbarClick" :icon="require('../../static/imgs/foods-5.png')" />
</u-tabbar>
<!-- 修改食品弹窗 -->
<!-- 添加食谱弹窗 -->
<addFoods
v-if="addShow"
:addShow="addShow"
:selectGoods="selectGoods"
:decimals="true"
@confirm="confirmHandle"
@close="closeHandle"
@delThis="delThis"
@tabGoodsInfo="tabGoodsInfo"
max="999"
/>
<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle"
@close="closeHandle" @delThis="delThis" @tabGoodsInfo="tabGoodsInfo" max="999" />
<!-- 修改运动弹窗 -->
<addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport" @cancleSport="cancleSport" @delSport="delSport" />
<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>
<script>
import arprogress from '@/components/ar-circle-progress/index.vue';
import goodsList from '@/components/foods';
import { plans, editHealthFoods, delHealthFoods } from '@/apis/interfaces/foods.js';
import moment from 'moment';
import addFoods from '@/components/add-goods-template/add-goods-template';
import addPopup from '@/components/sports/addPopup';
import sports from '@/components/sports';
import { editHealthSports, delHealthSports } from '@/apis/interfaces/sport.js';
export default {
import moment from 'moment';
import sports from '@/components/sports';
import goodsList from '@/components/foods';
import addPopup from '@/components/sports/addPopup';
import arprogress from '@/components/ar-circle-progress/index.vue';
import addFoods from '@/components/add-goods-template/add-goods-template';
import dateTemplate from '@/components/date-template/index.vue'
import {
editHealthSports,
delHealthSports
} from '@/apis/interfaces/sport.js';
import {
plans,
editHealthFoods,
delHealthFoods,
dateList
} from '@/apis/interfaces/foods.js';
export default {
components: {
arprogress,
goodsList,
addFoods,
addPopup,
sports
sports,
dateTemplate
},
data() {
return {
lists: [],
addShow: false, // 添加食品显示
selectGoods: [], // 选择新增的食品
addEatShow: false, // 加餐弹窗默认不显示
addEatList: [
{
name: '上午加餐',
type: 2
},
{
name: '下午加餐',
type: 4
},
{
name: '晚上加餐',
type: 6
}
],
today: moment(new Date()).format('YYYY-MM-DD'),
addEatList: [{name: '上午加餐',type: 2},{name: '下午加餐',type: 4},{name: '晚上加餐',type: 6}],
calorys: {}, // 当日食谱推荐页面的信息
intakes: [], // 当日摄入列表
sports: [], // 运动列表
sportsTotal: 0,
addSportsShow: false, // 添加运动弹窗显示
selectSports: {} // 选择新增的运动
selectSports: {}, // 选择新增的运动
today: moment(new Date()).format('YYYY-MM-DD'),// 当前时间
month: moment(new Date()).format('YYYY-MM'), //当前月份
dateShow: false, // 日历展示
calendarList: [],
dateType: '', // before after ''
};
},
onShow() {
this.getList();
this.dateLists(); // 日期列表
},
methods: {
// 获取当前统计页面基本数据
getList() {
plans(this.today).then(res => {
this.calorys = res.calorys;
this.calorys.ratio = Number(this.calorys.ratio);
this.intakes = res.intakes;
this.sports = res.exercises.lists;
this.sportsTotal = res.exercises.total;
});
},
//#region 运动操作相关
// 编辑运动
editSport(item) {
this.selectSports = {
@@ -173,10 +189,8 @@ export default {
title: '编辑运动'
};
// console.log(this.selectSports);
console.log('编辑运动', item);
this.addSportsShow = true;
},
// 弹窗确认按钮新增 这里接口报错了 ，
comfirmSport(show, duration) {
let params = {
@@ -186,19 +200,17 @@ export default {
sport_id: this.selectSports.sport_id, // 运动id
date: this.today // 日期
};
console.log(params);
editHealthSports(params).then(res => {
this.addSportsShow = false;
this.selectSports = {};
this.getList();
}).catch(err=>{
}).catch(err => {
uni.showToast({
title:err.message,
icon:'none'
title: err.message,
icon: 'none'
})
});
},
// 弹窗取消按钮
cancleSport(show) {
this.addSportsShow = show;
@@ -231,6 +243,10 @@ export default {
}
});
},
//#endregion 运动操作相关
//#region 食物操作相关
// 长按删除食品
longClickGoods(e) {
this.selectGoods = [e];
@@ -254,15 +270,6 @@ export default {
icon: 'none'
});
},
getList() {
plans(this.today).then(res => {
this.calorys = res.calorys;
this.calorys.ratio = Number(this.calorys.ratio);
this.intakes = res.intakes;
this.sports = res.exercises.lists;
this.sportsTotal = res.exercises.total;
});
},
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
tabbarClick(e) {
console.log(e);
@@ -277,7 +284,7 @@ export default {
});
} else {
uni.navigateTo({
url: `/pages/record/addFoods?type=${e === 0 ? 1 : e === 1 ? 3 : 5}`
url: `/pages/record/addFoods?type=${e === 0 ? 1 : e === 1 ? 3 : 5}&date=${this.today}`
});
}
}
@@ -285,7 +292,7 @@ export default {
// 选择了加餐跳转
selectClick(e) {
uni.navigateTo({
url: `/pages/record/addFoods?type=${e.type}`
url: `/pages/record/addFoods?type=${e.type}&date=${this.today}`
});
// 选择加餐
},
@@ -312,9 +319,15 @@ export default {
// 添加食物
editHealthFoods(data) {
editHealthFoods(data).then(res => {
console.log(res);
console.log(res,'添加食物');
this.addShow = false;
this.getList();
}).catch(err=>{
console.log(res,'添加食物error');
uni.showToast({
title:err.message,
icon:"none"
})
});
},
// 删除该食物
@@ -330,18 +343,99 @@ export default {
name: 'rankingDetails',
params: e
});
},
//#endregion 食物操作相关
//#region 日历操作相关
// 日历列表
dateLists() {
let data = {
month: this.month,
type: this.dateType
}
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) {
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.getList()
this.closeDate()
}
};
//#endregion 日历操作相关
}
};
</script>
<style lang="scss" scoped>
.record--foods {
.record--foods {
padding: $padding $padding $padding * 7 $padding;
// background: green;
}
// 饮食进度条
.cricle-content {
}
// 顶部日历筛选部分
.u-center {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.date {
background-color: rgba($color: #000000, $alpha: .1);
color: #fff;
min-width: 340rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 8rpx 20rpx;
border-radius: $radius * 2;
margin: 0 10rpx;
font-size: $title-size - 2;
}
.play-right-fill {
padding: $padding !important;
background-color: pink;
}
}
// 饮食进度条
.cricle-content {
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
font-size: $title-size-m - 6;
padding: $padding * 1.8 $padding;
@@ -353,6 +447,8 @@ export default {
justify-content: space-around;
box-sizing: border-box;
position: relative;
margin-top: $margin * 5;
.cricle {
.num {
color: $text-color;
@@ -360,16 +456,19 @@ export default {
font-weight: bold;
padding: $padding * 0.2;
}
.num1 {
color: #f00;
}
}
.info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
span {
font-size: $title-size + 10;
font-weight: bold;
@@ -377,6 +476,7 @@ export default {
padding-top: $padding * 0.5;
}
}
.ic-left {
position: absolute;
left: 0;
@@ -386,14 +486,16 @@ export default {
padding: 10rpx $padding * 0.6;
border-radius: 0 0 $radius 0;
}
.ic-day {
position: absolute;
right: $padding;
top: $padding;
}
}
// 没有饮食记录
.no-foods {
}
// 没有饮食记录
.no-foods {
display: flex;
flex-direction: column;
align-items: center;
@@ -402,21 +504,25 @@ export default {
font-size: $title-size-m - 4;
color: $text-gray-m;
min-height: 40vh;
// background: pink;
.no-foods-img {
opacity: 0.5;
}
view {
padding: $padding * 0.2;
}
}
// 饮食记录 早中晚加餐等
.foods-add {
}
// 饮食记录 早中晚加餐等
.foods-add {
border-bottom: solid 1rpx #f7f7f7;
margin-top: $margin;
}
// 主标题
.foods-title {
}
// 主标题
.foods-title {
display: flex;
flex-direction: row;
align-items: center;
@@ -424,29 +530,33 @@ export default {
box-sizing: border-box;
color: $text-color;
padding: $padding * 0.5 0;
.title-left {
font-size: $title-size;
color: $text-color;
font-weight: bold;
span {
font-weight: normal;
font-size: $title-size-m - 6;
font-size: $title-size-m;
color: $text-gray-m;
margin-left: $margin - 10;
}
}
.title-right {
font-size: $title-size-m - 6;
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>

4
pages/record/index.vue
View File

@@ -398,9 +398,7 @@ export default {
*/
logs() {
logs().then(res => {
console.log(res.is_login)
// console.log(res.is_login)
this.weight = res.weight;
this.water = res.water;
this.intake_run = res.intake_run;

255
pages/record/weight.vue
View File

@@ -8,97 +8,77 @@
<template>
<view class="weight">
<!-- 进度模块 -->
<block v-if="tabbarId === 0">
<!-- 体重表 -->
<view class="progress-top">
<view class="unit">
<span
:class="isJin === 2?'active':''"
@click="isJin = 1"
>斤</span>
<span
:class="isJin === 1?'active':''"
@click="isJin = 1"
>公斤</span>
</view>
<view class="unit"> <span :class="isJin === 2?'active':''" @click="isJin = 1">斤</span> <span :class="isJin === 1?'active':''" @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"
/>
<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="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 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>
<view class="list-right">
<span>开始保持 / 塑性</span>
{{item.created_at}}
<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 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
class="no-lists"
v-else
>还没有体重信息，记录下呗~</view>
<!-- 记录体重弹窗 -->
<u-popup
:show="addWeightShow"
:round="10"
@close="addWeightShow = false"
:closeable="true"
>
<u-popup :show="addWeightShow" :round="10" @close="addWeightShow = false" :closeable="true">
<view class="addWeightContent">
<view class="date">今天</view>
<view class='count'><span>{{weight}}</span>公斤</view>
<vue-scale
:min="10"
:max="100"
:int="false"
:single="10"
:h="80"
:styles="styles"
@scroll="scroll"
:scrollLeft="Number(weight)"
/>
<view
class="addBtn"
@click="addWeight"
>确认添加</view>
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scroll"
:scrollLeft="Number(weight)" />
<view class="addBtn" @click="addWeight">确认添加</view>
</view>
</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>
</template>
<script>
import vueScale from "@/components/vueScale";
import { weights, addWeight } from "@/apis/interfaces/weight.js";
import moment from "moment";
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
export default {
import vueScale from "@/components/vueScale";
import {
weights,
addWeight,
curves
} from "@/apis/interfaces/weight.js";
import moment from "moment";
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
export default {
components: {
vueScale,
},
@@ -120,10 +100,16 @@ export default {
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
};
},
onShow() {
this.getWeights();
this.getCurves();
this.date = moment(new Date()).format("YYYY-MM-DD");
},
onReachBottom() {
@@ -131,6 +117,8 @@ export default {
uni.showToast({
title: "没有更多啦~",
icon: "none",
duration: 1000,
mask: true
});
} else {
this.page = this.page + 1;
@@ -142,19 +130,45 @@ export default {
//获取体重首页接口
getWeights() {
weights(this.page).then((res) => {
if(res.lists.page.current === 1) {
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,
date: this.date
};
addWeight(data).then((res) => {
this.addWeightShow = false;
@@ -162,18 +176,59 @@ export default {
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>
<style lang="scss" scoped>
//体重top
.progress-top {
.charts-box{
width: 100%;
height:500rpx;
margin-top: $margin;
}
// curve
.curve{
margin-top: $margin;
padding: $padding $padding + 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: $title-size + 5;
color: #333;
span{
color: #cacaca;
font-size: $title-size-m;
margin-left: 10rpx;
}
}
// 评测图片
.eval-img {
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
}
//体重top
.progress-top {
padding: $padding * 2 $padding;
display: flex;
flex-direction: column;
@@ -181,6 +236,7 @@ export default {
justify-content: center;
box-sizing: border-box;
border-bottom: solid 1rpx #f7f7f7;
// 单位
.unit {
display: flex;
@@ -188,6 +244,7 @@ export default {
align-items: center;
justify-content: flex-end;
width: 100%;
span {
display: inline-block;
width: 100rpx;
@@ -198,16 +255,19 @@ export default {
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;
@@ -228,6 +288,7 @@ export default {
box-sizing: border-box;
color: $text-gray-m;
font-size: $title-size-m;
.uCountTo {
padding: $padding * 0.5;
}
@@ -246,13 +307,17 @@ export default {
padding: $padding;
color: $text-gray-m;
font-size: $title-size-m - 4;
}
}
// 列表
.weight-list {
}
// 列表
.weight-list {
font-size: $title-size-m;
color: $text-gray-m;
padding: $padding;
color: #cacaca;
padding: 0 $padding;
.list-item {
display: flex;
@@ -261,17 +326,20 @@ export default {
box-sizing: border-box;
justify-content: space-between;
border-bottom: solid 1rpx #f9f9f9;
padding: $padding 0;
padding: 20rpx 0;
font-size: $title-size-m - 2;
.list-title {
color: $text-color;
font-size: $title-size-m;
margin-bottom: $margin * 0.4;
color: #555;
font-size: $title-size-m - 2;
span {
font-size: $title-size + 14;
font-size: $title-size + 10;
font-weight: 500;
margin-right: 10rpx;
}
}
.list-right {
display: flex;
flex-direction: column;
@@ -279,20 +347,23 @@ export default {
justify-content: center;
box-sizing: border-box;
margin-top: $margin * 0.4;
color: #999;
span {
margin-bottom: 10rpx;
}
}
}
}
.no-lists {
}
.no-lists {
padding: $padding;
color: $text-gray-m;
font-size: $title-size-m;
}
}
// 弹窗
.addWeightContent {
// 弹窗
.addWeightContent {
width: 100%;
height: 54vh;
padding: $padding * 4 0;
@@ -303,22 +374,26 @@ export default {
align-items: center;
justify-content: center;
box-sizing: border-box;
.date {
font-size: $title-size + 9;
text-align: center;
}
.count {
color: $main-color;
text-align: center;
margin-top: $margin * 2;
margin-bottom: $margin * 0.1;
font-size: $title-size + 2;
span {
font-weight: bold;
font-size: $title-size * 2.2;
margin-right: $margin * 0.3;
}
}
.addBtn {
background-color: $main-color;
color: #fff;
@@ -329,5 +404,5 @@ export default {
font-size: $title-size + 6;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
}
}
}
</style>

BIN
static/imgs/curve-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/imgs/curve-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/imgs/speed-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
static/imgs/speed-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
static/imgs/water-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/imgs/water-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

115
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
View File

@@ -34,17 +34,29 @@ const formatDateTime = (timeStamp, returnType) => {
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if (returnType == 'full') { return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second; }
if (returnType == 'y-m-d') { return y + '-' + m + '-' + d; }
if (returnType == 'h:m') { return h + ':' + minute; }
if (returnType == 'h:m:s') { return h + ':' + minute + ':' + second; }
if (returnType == 'full') {
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}
if (returnType == 'y-m-d') {
return y + '-' + m + '-' + d;
}
if (returnType == 'h:m') {
return h + ':' + minute;
}
if (returnType == 'h:m:s') {
return h + ':' + minute + ':' + second;
}
return [y, m, d, h, minute, second];
}
const cfu = {
//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
"type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype"],
"range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图", "混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型"],
"type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar",
"gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype"
],
"range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图",
"混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型"
],
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
"categories": ["line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "demotype"],
@@ -54,19 +66,29 @@ const cfu = {
"option": {},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter": {
"yAxisDemo1": function (val) { return val + '元' },
"yAxisDemo2": function (val) { return val.toFixed(2) },
"xAxisDemo1": function (val) { return val + '年' },
"xAxisDemo2": function (val) { return formatDateTime(val, 'h:m') },
"seriesDemo1": function (val) { return val + '元' },
"tooltipDemo1": function (item, category, index, opts) {
"yAxisDemo1": function(val) {
return val + '元'
},
"yAxisDemo2": function(val) {
return val.toFixed(2)
},
"xAxisDemo1": function(val) {
return val + '年'
},
"xAxisDemo2": function(val) {
return formatDateTime(val, 'h:m')
},
"seriesDemo1": function(val) {
return val + '元'
},
"tooltipDemo1": function(item, category, index, opts) {
if (index == 0) {
return '随便用' + item.data + '年'
} else {
return '其他我没改' + item.data + '天'
}
},
"pieDemo": function (val, index, series) {
"pieDemo": function(val, index, series) {
if (index !== undefined) {
return series[index].name + '：' + series[index].data + '元'
}
@@ -85,8 +107,7 @@ const cfu = {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"legend": {},
"extra": {
"line": {
"type": "curve",
@@ -246,8 +267,7 @@ const cfu = {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"legend": {},
"extra": {
"line": {
"type": "straight",
@@ -266,15 +286,12 @@ const cfu = {
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data": [
{
"data": [{
"min": 0,
"max": 80
}
]
},
"legend": {
}]
},
"legend": {},
"extra": {
"line": {
"type": "curve",
@@ -293,15 +310,12 @@ const cfu = {
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data": [
{
"data": [{
"min": 0,
"max": 80
}
]
},
"legend": {
}]
},
"legend": {},
"extra": {
"area": {
"type": "curve",
@@ -320,10 +334,11 @@ const cfu = {
"disableGrid": true,
},
"yAxis": {
"data": [{ "min": 0 }]
},
"legend": {
"data": [{
"min": 0
}]
},
"legend": {},
"extra": {
"column": {
"type": "group",
@@ -345,10 +360,8 @@ const cfu = {
"min": 0,
"axisLine": false
},
"yAxis": {
},
"legend": {
},
"yAxis": {},
"legend": {},
"extra": {
"bar": {
"type": "group",
@@ -362,7 +375,9 @@ const cfu = {
},
"area": {
"type": "area",
"color": color,
"color": [
"#34ce98",
],
"padding": [15, 15, 0, 15],
"xAxis": {
"disableGrid": true,
@@ -371,8 +386,9 @@ const cfu = {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"fontColor": "#999",
"fontSize":"12",
"legend": {},
"extra": {
"area": {
"type": "straight",
@@ -528,10 +544,8 @@ const cfu = {
"scrollColor": "#A6A6A6",
"scrollBackgroundColor": "#EFEBEF"
},
"yAxis": {
},
"legend": {
},
"yAxis": {},
"legend": {},
"extra": {
"candle": {
"color": {
@@ -550,8 +564,7 @@ const cfu = {
"markLine": {
"type": "dash",
"dashLength": 5,
"data": [
{
"data": [{
"value": 2150,
"lineColor": "#f04864",
"showLabel": true
@@ -583,8 +596,7 @@ const cfu = {
"showTitle": true,
"data": []
},
"legend": {
},
"legend": {},
"extra": {
"mix": {
"column": {
@@ -609,11 +621,9 @@ const cfu = {
"disableGrid": false,
"gridType": "dash",
},
"legend": {
},
"legend": {},
"extra": {
"scatter": {
},
"scatter": {},
}
},
"bubble": {
@@ -636,8 +646,7 @@ const cfu = {
"max": 150
}]
},
"legend": {
},
"legend": {},
"extra": {
"bubble": {
"border": 2,