774 lines
15 KiB
Vue
774 lines
15 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 个人资料 -->
|
|
<view v-if="token" class="content-box">
|
|
<view class="box" v-if="info.aud_id">
|
|
<view class="header">
|
|
<image :src="info.head_pic"></image>
|
|
</view>
|
|
<view class="info" @click="handleUserEdit">
|
|
<view class="name">
|
|
<text>{{info.nickname}}</text>
|
|
<text>{{info.gender=='1'?'男':'女'}}</text>
|
|
<image src="/static/26.png"></image>
|
|
</view>
|
|
<view class="age">
|
|
<view>{{info.age}}岁</view>
|
|
<view>{{info.weight}}kg</view>
|
|
<view>{{info.height}}cm</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box1 box" v-else @click="handleUserEdit">
|
|
<view class="info2">
|
|
完善资料后，记录更准确哦！
|
|
</view>
|
|
</view>
|
|
<image src="/static/0.png" class="headerbgimg"></image>
|
|
</view>
|
|
<view class="box1 box" v-if="!token" @click="handleLogin">
|
|
<view class="info2">
|
|
未登录，点击登录
|
|
</view>
|
|
<image src="/static/0.png" class="headerbgimg"></image>
|
|
</view>
|
|
<!-- 计食器 -->
|
|
<view class="jishiqi">
|
|
<view class="left">
|
|
<view class="time">
|
|
<view class="quan"></view>
|
|
<text v-if="today_intake.time">{{today_intake.time}}</text>
|
|
</view>
|
|
<view class="chart">
|
|
<!-- <qiun-data-charts type="arcbar" :chartData="chartData" :canvas2d="true" :cHeight="300" :cWidth="300"
|
|
canvasId="arcbar008" /> -->
|
|
<view class="center">
|
|
<view>{{today_intake.title}}</view>
|
|
<view class="number">{{today_intake.kcal.value||0}}</view>
|
|
<view>Kcal</view>
|
|
<view>
|
|
<text :style="{'backgroundColor':today_intake.kcal.color}"></text>
|
|
{{today_intake.kcal.standard||''}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right" @click="handleNavTo(today_intake.time)">
|
|
<view class="detail">查看详情></view>
|
|
<view>
|
|
<text>碳水</text>
|
|
<text>{{today_intake.other_elements.carbohydrate.value||0}}g</text>
|
|
</view>
|
|
<view>
|
|
<text>脂肪</text>
|
|
<text>{{today_intake.other_elements.fat.value||0}}g</text>
|
|
</view>
|
|
<view>
|
|
<text>蛋白质</text>
|
|
<text>{{today_intake.other_elements.protein.value||0}}g</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 早午餐 -->
|
|
<view class="tools">
|
|
<view class="tools-item" v-for="(ite,ind) in today_intake.list">
|
|
<view class="title">
|
|
<image :src="ite.icon"></image>
|
|
<text>{{ite.title}}</text>
|
|
</view>
|
|
<view class="kcal">
|
|
<text>{{ite.value?ite.value:0}}</text>kcal
|
|
</view>
|
|
<view class="tools-btn" @click="handleListDetail(ite)">摄入</view>
|
|
<view class="add" @click="handleAddFood(ind,ite.title)">+</view>
|
|
<image :src="ite.bgimg" class="bgimg"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索 -->
|
|
<view class="serachBox">
|
|
<view class="title">
|
|
<view class="quan"></view>教你做
|
|
</view>
|
|
<view class="searchInput">
|
|
<div class="search-wrap" @click="handleSearch">
|
|
<text>输入食材快速搜索菜谱</text>
|
|
<image src="/static/28.png"></image>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 轮播 -->
|
|
<view class="f_banner footbox" v-if="configInfo.banner_data.length">
|
|
<swiper class="swiper" circular="true">
|
|
<swiper-item v-for="(ite,index) in configInfo.banner_data" @click="$tools.NewsPtype(ite)">
|
|
<image :src="ite.pic" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 加餐 -->
|
|
<view class="wrapper activeList" v-if="isShow">
|
|
<view class="bg" @click='isShow=false'>
|
|
<view class="addfood" @click.stop>
|
|
<icon class="iconfont icon-error" @click='isShow=false'></icon>
|
|
<view class="list">
|
|
<view class="item" v-for="(ite,ind) in addfoodList" :key="ind"
|
|
@click="handleAddFood(ite.id,ite.name)">
|
|
<text class="name">{{ite.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 摄入列表 -->
|
|
<view class="wrapper activeList2" v-if="isFoodList">
|
|
<view class="bg" @click='isFoodList=false'>
|
|
<view class="addfood2" @click.stop>
|
|
<view class="title">
|
|
<text>{{ListDetail.title}}</text>
|
|
<text>{{ListDetail.content.time}}</text>
|
|
</view>
|
|
<view class="foodbox">
|
|
<view class="foodbox-list" v-for="(it,id) in ListDetail.content.list">
|
|
<text>{{it.name}}</text>
|
|
<text>{{it.weight}}</text>
|
|
<text>{{it.kcal}}</text>
|
|
<text>{{it.time}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="groupbtn">
|
|
<view @click="handleNavTo(today_intake.time)">更多详情</view>
|
|
<view @click='isFoodList=false'>取消</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
token: "",
|
|
isShow: false,
|
|
isFoodList: false,
|
|
// today_intake: {
|
|
// kcal: {},
|
|
// list: [],
|
|
// time: "",
|
|
// title: "",
|
|
// other_elements: {}
|
|
// },
|
|
chartData: {
|
|
series: [{
|
|
data: 1,
|
|
color: "#ff4c4f"
|
|
}]
|
|
},
|
|
ListDetail: {
|
|
title: "",
|
|
value: "",
|
|
unit: "",
|
|
content: {
|
|
time: '',
|
|
list: []
|
|
}
|
|
},
|
|
addfoodList: [],
|
|
}
|
|
},
|
|
components: {
|
|
qiunDataCharts
|
|
},
|
|
computed: {
|
|
...mapState(["configInfo", "user", "countFoodInfo"]),
|
|
info() {
|
|
return this.user
|
|
},
|
|
kcalVal() {
|
|
return this.configInfo.kcal_data
|
|
},
|
|
today_intake() {
|
|
return this.countFoodInfo.home_food_count.kcal_data
|
|
}
|
|
},
|
|
onLoad() {
|
|
let that = this
|
|
that.addfoodList = that.$json.addfoodList
|
|
that.token = uni.getStorageSync('token')
|
|
that.$store.dispatch("getHomeConfig")
|
|
},
|
|
onPullDownRefresh() {
|
|
let that = this
|
|
that.index = 0
|
|
that.footlist = []
|
|
that.$store.dispatch("getHomeConfig")
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh();
|
|
}, 500);
|
|
},
|
|
methods: {
|
|
//配置接口
|
|
handleHomeConfig() {
|
|
let that = this
|
|
that.$model.getHomeConfig({}).then(res => {
|
|
if (res.code != 0) return
|
|
that.handleHomeUserInfo()
|
|
that.$store.commit('changeConfig', res.data)
|
|
})
|
|
},
|
|
// 获取账号信息
|
|
handleHomeUserInfo() {
|
|
let that = this
|
|
that.$model.getHomeUserInfo({}).then(res => {
|
|
if (res.code != 0) {
|
|
that.$store.commit('changeUserInfo', {})
|
|
console.log("11111")
|
|
return
|
|
}
|
|
that.$store.commit('changeUserInfo', res.data)
|
|
that.handleCountFoodInfo()
|
|
})
|
|
},
|
|
// 计食器信息
|
|
handleCountFoodInfo() {
|
|
let that = this
|
|
that.$model.getCountFoodInfo({
|
|
aud_id: that.info.aud_id,
|
|
time: that.$tools.getDate("start")
|
|
}).then(res => {
|
|
if (res.code != 0) return
|
|
that.today_intake = res.data.home_food_count.kcal_data
|
|
})
|
|
},
|
|
|
|
// 搜索
|
|
handleSearch() {
|
|
uni.switchTab({
|
|
url: '/pages/search/search'
|
|
})
|
|
},
|
|
// 登录
|
|
handleLogin() {
|
|
uni.reLaunch({
|
|
url: "/pageTwo/login/login"
|
|
})
|
|
},
|
|
//个人资料
|
|
handleUserEdit() {
|
|
uni.navigateTo({
|
|
url: '/pageTwo/me/userEdit'
|
|
})
|
|
},
|
|
// 计食器详情
|
|
handleNavTo(time) {
|
|
this.isShow = false
|
|
uni.setStorageSync("startDay", time)
|
|
uni.switchTab({
|
|
url: "/pages/count/count"
|
|
})
|
|
},
|
|
// 添加食物
|
|
handleAddFood(ind, name) {
|
|
this.isShow = false
|
|
if (ind != 3) {
|
|
uni.navigateTo({
|
|
url: "/pageTwo/count/search?name=" + name + '&ind=' + ind
|
|
})
|
|
} else {
|
|
this.isShow = true
|
|
}
|
|
|
|
},
|
|
// 计食器列表详情
|
|
handleListDetail(item) {
|
|
let that = this
|
|
console.log("item", item)
|
|
if (item.content.list.length) {
|
|
that.isFoodList = true
|
|
that.ListDetail = item
|
|
} else {
|
|
that.$tools.msg("暂无摄入，快去添加吧")
|
|
}
|
|
},
|
|
|
|
// 功能页面跳转
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.headerbgimg {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 180px;
|
|
top: 0;
|
|
right: -15%;
|
|
}
|
|
|
|
.size22 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.box {
|
|
width: calc(100% - 40rpx);
|
|
background: $maincolor;
|
|
display: flex;
|
|
padding: 30rpx 20rpx;
|
|
padding-bottom: 220rpx;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.header {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 30rpx;
|
|
border: 1px solid #fff;
|
|
border-radius: 50%;
|
|
background-color: #dfdfdf;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
color: #fff;
|
|
position: absolute;
|
|
left: 170rpx;
|
|
right: 30rpx;
|
|
z-index: 999;
|
|
|
|
.name {
|
|
width: 100%;
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
|
|
:nth-child(1) {
|
|
margin-right: 30rpx;
|
|
max-width: 70%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
text {
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.age {
|
|
margin-top: 30rpx;
|
|
|
|
view {
|
|
background: #F5D2A4;
|
|
border-radius: 5px;
|
|
width: 75px;
|
|
text-align: center;
|
|
float: left;
|
|
padding: 5px 0;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.box1 {
|
|
.header {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: #fff;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
color: #fff;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.info2 {
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.jishiqi {
|
|
width: calc(100% - 60rpx);
|
|
background: #fff;
|
|
margin: auto 30rpx;
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
margin-top: -180rpx;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
|
|
.left {
|
|
width: 55%;
|
|
float: left;
|
|
height: auto;
|
|
background: #ebf7f5;
|
|
padding-bottom: 15px;
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
|
|
.time {
|
|
width: 90%;
|
|
margin: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart {
|
|
width: 320rpx;
|
|
height: 320rpx;
|
|
border-radius: 50%;
|
|
background: $maincolor;
|
|
border: 5px solid #9CDCBF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
width: 280rpx;
|
|
height: 280rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
|
|
.number {
|
|
width: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
view {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
|
|
text {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: calc(45% - 60rpx);
|
|
float: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 140px;
|
|
margin: 40rpx 30rpx 0;
|
|
|
|
view {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.detail {
|
|
text-align: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background: #F7931E;
|
|
border-radius: 20rpx;
|
|
padding: 6rpx 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tools {
|
|
margin: 30rpx 30rpx 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: calc(100% - 60rpx);
|
|
justify-content: space-between;
|
|
|
|
.tools-item {
|
|
width: 42%;
|
|
background: #fff;
|
|
position: relative;
|
|
padding: 20rpx;
|
|
height: 120px;
|
|
overflow: hidden;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
position: absolute;
|
|
z-index: 99;
|
|
width: 100%;
|
|
top: 10px;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.kcal {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
text {
|
|
font-size: 56rpx;
|
|
font-weight: bold;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.tools-btn {
|
|
border: 1px solid $maincolor;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
width: 60%;
|
|
margin-left: 20%;
|
|
margin-top: 10rpx;
|
|
color: $maincolor;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
z-index: 99;
|
|
padding: 3px 0;
|
|
}
|
|
|
|
.add {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
background: $maincolor;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
line-height: 48rpx;
|
|
font-weight: bold;
|
|
z-index: 999;
|
|
}
|
|
|
|
.bgimg {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: -50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.serachBox {
|
|
width: calc(100% - 60rpx);
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.searchInput {
|
|
width: calc(100% - 60rpx);
|
|
background-color: #f7f7f7;
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.search-wrap {
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 1px solid $maincolor;
|
|
border-radius: 30rpx;
|
|
padding: 0 20rpx;
|
|
background: #fff;
|
|
|
|
image {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addfood {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 10px 10px 0 10px;
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
.iconfont {
|
|
position: absolute;
|
|
right: 7px;
|
|
top: -10px;
|
|
background: #f7f7f7;
|
|
border-radius: 50%;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.list {
|
|
padding-bottom: 0px;
|
|
|
|
.item {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.name {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
:nth-child(2).item {
|
|
border-bottom: 1px solid #dfdfdf;
|
|
border-top: 1px solid #dfdfdf;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addfood2 {
|
|
top: 20%;
|
|
left: 20px;
|
|
right: 20px;
|
|
position: absolute;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
max-height: 720rpx;
|
|
min-height: 400rpx;
|
|
|
|
|
|
.title {
|
|
color: $maincolor;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: calc(100% - 60rpx);
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin-top: 15px;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.foodbox {
|
|
margin: 15px;
|
|
|
|
.foodbox-list {
|
|
height: 45px;
|
|
line-height: 45px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
|
:nth-child(1) {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.groupbtn {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
left: 15px;
|
|
right: 15px;
|
|
|
|
view {
|
|
width: 100px;
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
background: #dfdfdf;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
:nth-child(1) {
|
|
color: #fff;
|
|
background-color: $maincolor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.f_banner {
|
|
width: 100% !important;
|
|
height: 450rpx;
|
|
margin: 15px auto;
|
|
|
|
/deep/swiper {
|
|
height: 450rpx;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
</style> |