317 lines
12 KiB
Vue
317 lines
12 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 => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
duration: 2000,
|
||
mask: true
|
||
})
|
||
});
|
||
},
|
||
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 => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
duration: 2000,
|
||
mask: true
|
||
})
|
||
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>
|