283 lines
8.6 KiB
Vue
283 lines
8.6 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 性别start -->
|
||
<view class="files" @click="sexShow = true">
|
||
<view class="name">性别</view>
|
||
<view class="text">
|
||
<u-icon
|
||
class="target-icon"
|
||
:label="recordsData.sex == 1 ? '男士' : '女士'"
|
||
name="arrow-right"
|
||
color="#999"
|
||
size="14"
|
||
labelSize="14"
|
||
labelColor="#666"
|
||
labelPos="left"
|
||
space="10"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<u-action-sheet
|
||
:actions="sexList"
|
||
title="你的性别是？"
|
||
:show="sexShow"
|
||
cancelText="暂不修改"
|
||
@select=" e => { (this.recordsData.sex = e.id), (this.sexShow = false); } "
|
||
@close="sexShow = false"
|
||
/>
|
||
<!-- 性别 end -->
|
||
|
||
<!-- 生日 start -->
|
||
<view class="files" @click="birthdayShow = true">
|
||
<view class="name">生日</view>
|
||
<view class="text">
|
||
<u-icon class="target-icon" :label="showBirthday" name="arrow-right" color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
|
||
</view>
|
||
</view>
|
||
<u-datetime-picker
|
||
confirmColor="#34ce98"
|
||
v-model="recordsData.birthday"
|
||
mode="date"
|
||
:show="birthdayShow"
|
||
:formatter="formatter"
|
||
:minDate="-302688000"
|
||
:maxDate="maxDate"
|
||
@confirm=" e => { this.recordsData.birthday = e.value, this.birthdayShow = false } "
|
||
@cancel=" () => { this.birthdayShow = false; } "
|
||
/>
|
||
<!-- 生日 end -->
|
||
|
||
<!-- 身高 start-->
|
||
<view class="files" @click="heightShow = true">
|
||
<view class="name">身高</view>
|
||
<view class="text">
|
||
<u-icon class="target-icon" :label="recordsData.height + ` CM`" name="arrow-right" color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
|
||
</view>
|
||
</view>
|
||
<u-popup :show="heightShow" @close="() => { heightShow = false }">
|
||
<view class="v-scale">
|
||
<view class="title"> 你的身高为?</view>
|
||
<view class="total"> {{recordsData.height}} CM </view>
|
||
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollAll('height',$event)" :scrollLeft="Number(recordsData.height)" />
|
||
</view>
|
||
</u-popup>
|
||
<!-- 身高 end -->
|
||
|
||
<!-- 最新体重 start -->
|
||
<view class="files bt30" @click="weightShow = true">
|
||
<view class="name">最新体重</view>
|
||
<view class="text">
|
||
<u-icon class="target-icon" :label="recordsData.weight + ` KG`" name="arrow-right" color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
|
||
</view>
|
||
</view>
|
||
<u-popup :show="weightShow" @close="() => { weightShow = false }">
|
||
<view class="v-scale">
|
||
<view class="title"> 你的当前体重为?</view>
|
||
<view class="total"> {{recordsData.weight}} KG </view>
|
||
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollAll('weight',$event)" :scrollLeft="Number(recordsData.weight)" />
|
||
</view>
|
||
</u-popup>
|
||
<!-- 生日 end -->
|
||
|
||
<!-- 目标 start -->
|
||
<view class="files" @click="targetShow = true">
|
||
<view class="name">目标</view>
|
||
<view class="text">
|
||
<u-icon class="target-icon" :label="targetList[selectedTargetIndex].name" name="arrow-right" color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
|
||
</view>
|
||
</view>
|
||
<u-action-sheet
|
||
:actions="targetList"
|
||
title="你的目标是？"
|
||
:show="targetShow"
|
||
cancelText="暂不修改"
|
||
@select=" e => { (this.selectedTargetIndex = this.targetList.findIndex(item => e.id === item.id)), (this.targetShow = false); } "
|
||
@close="targetShow = false"
|
||
/>
|
||
<!-- 目标 end -->
|
||
|
||
<!-- 目标体重 start-->
|
||
<view class="files" @click="targetWeightShow = true">
|
||
<view class="name">目标体重</view>
|
||
<view class="text"><u-icon class="target-icon" :label="recordsData.goal_weight + ` KG`" name="arrow-right" color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" /></view>
|
||
</view>
|
||
<u-popup :show="targetWeightShow" @close="() => { targetWeightShow = false }">
|
||
<view class="v-scale">
|
||
<view class="title"> 你的目标体重为?</view>
|
||
<view class="total"> {{recordsData.goal_weight}} KG </view>
|
||
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollAll('goalweight',$event)" :scrollLeft="Number(recordsData.goal_weight)" />
|
||
</view>
|
||
</u-popup>
|
||
<!-- 目标体重 end -->
|
||
|
||
<!-- 运动量 start -->
|
||
<view class="files" @click="exerciseShow = true">
|
||
<view class="name">运动量</view>
|
||
<view class="text">
|
||
<u-icon class="target-icon" :label="exerciseList[selectExerciseIndex].name" name="arrow-right" color="#999" size="14" labelSize="14" labelColor="#666" labelPos="left" space="10" />
|
||
</view>
|
||
</view>
|
||
<u-action-sheet
|
||
:actions="exerciseList"
|
||
title="你的运动量是？"
|
||
:show="exerciseShow"
|
||
cancelText="暂不修改"
|
||
@select=" e => { (this.selectExerciseIndex = this.exerciseList.findIndex(item => e.id === item.id)), (this.exerciseShow = false); } "
|
||
@close="exerciseShow = false"
|
||
/>
|
||
<!-- 运动量 end -->
|
||
<view class="sureBtn" @click="sureBtn"> 确认修改 </view>
|
||
<view class="des">修改资料后可更新并查看最新方案，预算热量可能会发生变化</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { editHealthBefore,editHealth } from '@/apis/interfaces/essentialInfo.js';
|
||
import moment from 'moment';
|
||
import vueScale from '@/components/vueScale'; // 体重标尺
|
||
export default {
|
||
components:{
|
||
vueScale
|
||
},
|
||
data() {
|
||
return {
|
||
recordsData: {},
|
||
birthdayShow: false, // 出生日期展示
|
||
maxDate: new Date().getTime(),
|
||
sexShow: false, // 性别弹窗是否显示
|
||
sexList: [{name: '男士',id: 1},{name: '女士',id: 2}],
|
||
targetShow: false, // 目标弹窗是否显示
|
||
targetList: [{name: '减脂',id: 1},{name: '保持体重',id: 2},{name: '增肌',id: 3}],
|
||
selectedTargetIndex: 0,// 默认选择了那个target
|
||
exerciseShow:false,// 运动量弹窗是否显示
|
||
exerciseList:[{name:'久坐不动',id:1},{name:'少量运动',id:2},{name:'中等运动量',id:3},{name:'超强度运动',id:4}],
|
||
selectExerciseIndex:0,//默认选择运动量是久坐不懂得
|
||
heightShow:false,
|
||
weightShow:false,
|
||
targetWeightShow:false,
|
||
styles: {
|
||
line: '#dbdbdb',
|
||
bginner: '#fbfbfb',
|
||
bgoutside: '#ffffff',
|
||
font: '#404040',
|
||
fontColor: '#404040',
|
||
fontSize: 16
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
showBirthday() {
|
||
return moment(this.recordsData.birthday).format('YYYY年MM月DD日');
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
let id = this.$Route.query.id;
|
||
editHealthBefore(id)
|
||
.then(res => {
|
||
this.recordsData = res;
|
||
this.recordsData.birthday = moment(res.birthday).format('YYYY-MM-DD');
|
||
this.selectExerciseIndex = this.exerciseList.findIndex(item => item.id === res.exercise)
|
||
})
|
||
.catch(err => {
|
||
conso.log(err);
|
||
});
|
||
},
|
||
methods: {
|
||
// 身高 体重 目标体重 滚动
|
||
scrollAll(type,value) {
|
||
if(type === 'height'){
|
||
return this.recordsData.height = value;
|
||
}
|
||
if(type === 'weight'){
|
||
return this.recordsData.weight = value;
|
||
}
|
||
if(type === 'goalweight'){
|
||
return this.recordsData.goal_weight = value;
|
||
}
|
||
},
|
||
// 年龄 - 过滤 - 自定义 - 出生年月日
|
||
formatter(type, value) {
|
||
if (type === 'year') {return `${value}年`;}
|
||
if (type === 'month') {return `${value}月`;}
|
||
if (type === 'day') {return `${value}日`;}
|
||
return value;
|
||
},
|
||
// 提交按钮
|
||
sureBtn(){
|
||
|
||
let params = {
|
||
record_id:this.recordsData.record_id,
|
||
birthday:moment(this.recordsData.birthday).format('YYYY-MM-DD'),
|
||
sex:this.recordsData.sex,
|
||
height:this.recordsData.height,
|
||
weight:this.recordsData.weight,
|
||
exercise:this.exerciseList[this.selectExerciseIndex].id,
|
||
goal_weight:this.recordsData.goal_weight,
|
||
days:1
|
||
}
|
||
editHealth(params.record_id,params).then(res=>{
|
||
this.$Router.back()
|
||
}).catch(err=>{
|
||
this.$Router.back()
|
||
})
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: $padding;
|
||
}
|
||
.files {
|
||
display: flex;
|
||
padding: $padding + 10 $padding - 20;
|
||
box-sizing: border-box;
|
||
border-bottom: #f9f9f9 2rpx solid;
|
||
font-size: $title-size;
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
.name {
|
||
flex: 1;
|
||
}
|
||
.text {
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
.v-scale{
|
||
padding: $padding * 2 0;
|
||
font-size: $title-size;
|
||
.title{
|
||
text-align: center;
|
||
font-size: $title-size + 10;
|
||
margin-bottom: $margin;
|
||
}
|
||
.total{
|
||
font-size: $title-size;
|
||
color: $main-color;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.des {
|
||
color: $text-gray-m;
|
||
font-size: $title-size-m - 4;
|
||
margin-top: $margin * 2;
|
||
text-align: center;
|
||
}
|
||
.sureBtn{
|
||
background-color: $main-color;
|
||
color: #fff;
|
||
font-size: $title-size;
|
||
text-align: center;
|
||
padding: $padding;
|
||
border-radius: $radius;
|
||
margin-top: $margin * 2;
|
||
}
|
||
.bt30 {
|
||
border-bottom: #f9f9f9 20rpx solid;
|
||
}
|
||
</style>
|