325 lines
8.0 KiB
Vue
325 lines
8.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 时间选择 -->
|
|
<view class="TrendPage">
|
|
<view class="TrendTime">
|
|
<view class="boxTime">
|
|
<view class="one">
|
|
<picker mode="date" class="f-l" :value="startTime?startTime:startDate" @change="handStartTimeH">
|
|
<view class="uni-input">{{startTime?startTime:startDate}}
|
|
<icon class="iconfont iconDown"></icon>
|
|
</view>
|
|
</picker>
|
|
|
|
<picker mode="date" :end="endDate" class="f-r" :value="endDate" @change="handEndTimeH">
|
|
<view class="uni-input">~ {{endTime?endTime:endDate}}
|
|
<icon class="iconfont iconDown"></icon>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="tow" @click="handAllTime(0)" :class="{style:active==0}">
|
|
近3月
|
|
</view>
|
|
<view class="tow" @click="handAllTime(1)" :class="{style:active==1}">
|
|
近半年
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 曲线图 -->
|
|
<view class="box boxList">
|
|
<view class="listC">
|
|
<view :class="{active:index==active1}" class="name" v-for="(item,index) in weightList" :key="index"
|
|
@click="showbox(index)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="blockC">
|
|
<view v-if="lineData&&lineData.categories.length&&handTrue">
|
|
<qiun-data-charts type="area" :chartData="lineData" :canvas2d="true" canvasId="charts09"
|
|
:cHeight="480" :cWidth="680" :animation="false"
|
|
:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
|
|
</view>
|
|
<view class="nolist" v-else>
|
|
<icon class="iconfont icon-zanwu"></icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 目标-->
|
|
<view class="box">
|
|
<view class="data">
|
|
<view class="item" @click="handleClick(0)">
|
|
<view class="val">{{userInfo.targetweight?userInfo.targetweight:0}}<text>kg</text>
|
|
</view>
|
|
<view class="name">目标体重<icon class="t-icon t-icon-bianji3"></icon>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="val">{{userInfo.totalweight?Math.abs(userInfo.totalweight):0}}<text>kg</text>
|
|
</view>
|
|
<view class="name" v-if="Number(userInfo.totalweight)<0">累计增重</view>
|
|
<view class="name" v-else>累计减重</view>
|
|
</view>
|
|
<view class="item" @click="handleClick(1)">
|
|
<view class="val">{{userInfo.firstweight?userInfo.firstweight:0}}<text>kg</text>
|
|
</view>
|
|
<view class="name">初始体重<icon class="t-icon t-icon-bianji3"></icon>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="val">{{userInfo.day?userInfo.day:0}}<text>天</text></view>
|
|
<view class="name">减重天数</view>
|
|
</view>
|
|
<view class="item" @click="handleClick(2)">
|
|
<view class="val"></view>
|
|
<view class="name">
|
|
<icon class="iconfont icon-tianjia">手动记录</icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 手动 -->
|
|
<manuaRecord @getList="getList"></manuaRecord>
|
|
<!-- 初始 -->
|
|
<firstweight></firstweight>
|
|
<!-- 目标 -->
|
|
<targetWeight></targetWeight>
|
|
<!-- 登录 -->
|
|
<userPopup></userPopup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import userPopup from '@/components/userLogin.vue'
|
|
import targetWeight from '@/components/target/targetWeight.vue';
|
|
import firstweight from '@/components/target/firstweight.vue';
|
|
import manuaRecord from '@/components/target/manuaRecord.vue';
|
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
|
export default {
|
|
components: {
|
|
targetWeight,
|
|
firstweight,
|
|
manuaRecord,
|
|
userPopup,
|
|
qiunDataCharts,
|
|
},
|
|
computed: {
|
|
...mapState(["user", "Trend", "appTheme"]),
|
|
userInfo: function() {
|
|
return this.user
|
|
},
|
|
endDate() {
|
|
return this.$tools.getDate("start")
|
|
},
|
|
startDate() {
|
|
return this.$tools.GetDateStr(-90);
|
|
},
|
|
},
|
|
onLoad() {
|
|
// 导航栏颜色
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: this.appTheme,
|
|
})
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
this.token = uni.getStorageSync('token')
|
|
this.active = 0
|
|
this.startTime = ""
|
|
this.endTime = ""
|
|
that.getList(this.startDate, this.endDate)
|
|
},
|
|
methods: {
|
|
getList(start, end) {
|
|
console.log("fanhui", start, end)
|
|
let that = this
|
|
that.$model.getTrendList({
|
|
familyid: uni.getStorageSync('familyid'),
|
|
starttime: start,
|
|
endtime: end,
|
|
}).then(res => {
|
|
if (res) {
|
|
for (var i = 0; i < that.weightList.length; i++) {
|
|
that.weightList[i].Line = res[that.weightList[i].key];
|
|
}
|
|
that.showbox(0)
|
|
}
|
|
})
|
|
},
|
|
showbox(index) {
|
|
let that = this
|
|
that.handTrue = false
|
|
this.$nextTick(function() {
|
|
that.handTrue = true
|
|
that.lineData = that.weightList[index].Line
|
|
})
|
|
that.active1 = index
|
|
},
|
|
//开始
|
|
handStartTimeH(e) {
|
|
let that = this
|
|
if (this.endTime) {
|
|
if (Date.parse(e.target.value) > Date.parse(this.endTime)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
} else {
|
|
if (Date.parse(e.target.value) > Date.parse(this.endDate)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
}
|
|
this.startTime = e.target.value
|
|
let endtime = that.endTime ? that.endTime : that.endDate
|
|
this.getList(that.startTime, endtime)
|
|
},
|
|
// 结束
|
|
handEndTimeH(e) {
|
|
let that = this
|
|
if (this.startTime) {
|
|
if (Date.parse(e.target.value) < Date.parse(this.startTime)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
} else {
|
|
if (Date.parse(e.target.value) < Date.parse(this.startDate)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
}
|
|
this.endTime = e.target.value
|
|
let startTime = that.startTime ? that.startTime : that.startDate
|
|
this.getList(startTime, this.endTime)
|
|
},
|
|
// 日期
|
|
handAllTime(ind) {
|
|
let that = this
|
|
if (!uni.getStorageSync('token')) {
|
|
uni.redirectTo({
|
|
url: '/pageTwo/login/login'
|
|
})
|
|
// that.$store.commit("changeUserLogin", true)
|
|
return
|
|
}
|
|
this.active = ind
|
|
if (ind == 0) {
|
|
this.startTime = that.$tools.GetDateStr(-90)
|
|
} else {
|
|
this.startTime = that.$tools.GetDateStr(-180)
|
|
}
|
|
this.getList(this.startTime, this.endDate)
|
|
},
|
|
handleClick(ind) {
|
|
if (!uni.getStorageSync('token')) {
|
|
uni.redirectTo({
|
|
url: '/pageTwo/login/login'
|
|
})
|
|
// that.$store.commit("changeUserLogin", true)
|
|
return
|
|
}
|
|
if (ind == 0) {
|
|
this.$store.commit("changeTarget", true);
|
|
return
|
|
}
|
|
if (ind == 1) {
|
|
this.$store.commit("changeFirst", true);
|
|
return
|
|
}
|
|
if (ind == 2) {
|
|
this.$store.commit("changeRecord", true);
|
|
return
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
lineData: null,
|
|
type: null,
|
|
active1: 0,
|
|
weight: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
active: 0,
|
|
token: null,
|
|
handTrue: true,
|
|
weightList: [{
|
|
title: '体重',
|
|
key: 'weight',
|
|
showCon: false,
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#fb7b92",
|
|
"name": "体重",
|
|
"data": []
|
|
}]
|
|
},
|
|
},
|
|
{
|
|
title: 'BMI',
|
|
key: 'bmi',
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#6bb0fe",
|
|
"name": "bmi",
|
|
"data": []
|
|
}]
|
|
},
|
|
}, {
|
|
title: '肌肉',
|
|
key: 'muscle',
|
|
showCon: false,
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#ff9f40",
|
|
"name": "肌肉率",
|
|
"data": []
|
|
}]
|
|
},
|
|
},
|
|
{
|
|
title: '脂肪',
|
|
key: 'fat_r',
|
|
showCon: false,
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#3fcba7",
|
|
"name": "脂肪率",
|
|
"data": []
|
|
}]
|
|
},
|
|
}
|
|
],
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.TrendTime {
|
|
background: #fff;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.listC {
|
|
margin: 10px;
|
|
}
|
|
|
|
.boxList {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
|
|
.list {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
</style> |