493 lines
16 KiB
Vue
493 lines
16 KiB
Vue
<!--
|
||
* @Description:
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-10 10:29:17
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-12 14:29:12
|
||
-->
|
||
|
||
<template>
|
||
<view class="info">
|
||
<!-- 进度 -->
|
||
<view class="plan">
|
||
<view class="plan-1">
|
||
<span>基本信息</span> <u-line-progress :percentage="percentplan1" activeColor="#34ce98" class="line-progress" :showText="false" />
|
||
</view>
|
||
<view class="plan-2">
|
||
<span>健康目标</span> <u-line-progress :percentage="percentplan2" activeColor="#34ce98" width="200rpx" class="line-progress" :showText="false" />
|
||
</view>
|
||
<view class="plan-3">
|
||
<span>行为习惯</span> <u-line-progress :percentage="percentplan3" activeColor="#34ce98" width="200rpx" class="line-progress" :showText="false" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进度1 基本信息 -->
|
||
<block>
|
||
<!-- 进度1 基本信息页面展示 性别 -->
|
||
<view class="plan-content" v-if="sexShow">
|
||
<view class="info-des">生理性别和激素会影响我们的身体代谢食物的方式</view>
|
||
<view class="info-title">您的性别是？</view>
|
||
<view class="sex">
|
||
<view class="sex-item" @click="clickSex(1)">
|
||
<u-image class="sex-item-avatar" width="150rpx" height="150rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
|
||
男性
|
||
</view>
|
||
<view class="sex-item" @click="clickSex(2)">
|
||
<u-image class="sex-item-avatar" width="150rpx" height="150rpx" :src="require('../../static/imgs/avatar-0.png')" :lazy-load="true" shape="circle" />
|
||
女性
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 进度1 基本信息页面展示 年龄 -->
|
||
<view class="plan-content" v-if="birthdayShow">
|
||
<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
|
||
<view class="age">
|
||
<view class="info-title">你的出生日期是？</view>
|
||
<view class="year" @change="dateShow = true">{{ showBirthday }}</view>
|
||
<u-datetime-picker confirmColor="#34ce98" ref="datetimePicker" v-model="birthday" mode="date" :show="dateShow" :formatter="formatter" :minDate="-302688000" :maxDate="maxDate" :closeOnClickOverlay="true" @confirm="confirmBirthday" @cancel="camcelBirthday" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进度1 基本信息页面展示 身高体重 -->
|
||
<view class="plan-content weight-content" v-if="heightWeightShow">
|
||
<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
|
||
<view class="info-des">身高体重信息对健康信息有重要参考价值</view>
|
||
<view class="info-title">您的身高是？</view>
|
||
<view class="weight">
|
||
<view class="count"><span>{{ heightU }}</span>厘米</view>
|
||
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollHeight" :scrollLeft="Number(heightU)" />
|
||
</view>
|
||
<view class="info-title">您的体重是？</view>
|
||
<view class="weight">
|
||
<view class="count"><span>{{ weightU }}</span>公斤 </view>
|
||
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollWeight" :scrollLeft="Number(weightU)" />
|
||
</view>
|
||
|
||
<view class="pre-next">
|
||
<view class="pro" @click="weightClick(1)">上一步</view>
|
||
<view class="next" @click="weightClick(2)">下一步</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 进度2 健康目标 -->
|
||
<block>
|
||
<!-- 减脂类型 -->
|
||
<view v-if="targetShow" class="plan-content target-content">
|
||
<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
|
||
<view class="info-title">您的目标是？</view>
|
||
<view class="target-type">
|
||
<view class="target-type-item"> <u-image class="target-img" width="160rpx" height="160rpx" @click="activedTarget = '1'" :src="activedTarget === '1' ? require('../../static/imgs/ic-w-s.png') : require('../../static/imgs/ic-w-n.png')" :lazy-load="true" shape="circle" /> 减肥 </view>
|
||
<view class="target-type-item"> <u-image class="target-img" width="160rpx" height="160rpx" @click="activedTarget = '2'" :src="activedTarget === '2' ? require('../../static/imgs/ic-b-s.png') : require('../../static/imgs/ic-b-n.png')" :lazy-load="true" shape="circle" /> 保持体重 </view>
|
||
<view class="target-type-item"> <u-image class="target-img" width="160rpx" height="160rpx" @click="activedTarget = '3'" :src="activedTarget === '3' ? require('../../static/imgs/ic-m-s.png') : require('../../static/imgs/ic-m-n.png')" :lazy-load="true" shape="circle" /> 增肌 </view>
|
||
</view>
|
||
<view class="pre-next">
|
||
<view class="pro" @click="targetClick(1)">上一步</view>
|
||
<view class="next" @click="targetClick(2)">下一步</view>
|
||
</view>
|
||
</view>
|
||
<!-- 减脂体重 -->
|
||
<view v-if="targetWeightShow" class="plan-content target-content">
|
||
<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
|
||
<view class="info-title">您的打算减脂多少？</view>
|
||
<view class="target-type">
|
||
<view class="target-type-item">
|
||
<view class="count"> <span>{{ weightTargetU }}</span> 公斤 </view>
|
||
<vue-scale :min="10" :max="100" :int="false" :single="10" :h="80" :styles="styles" @scroll="scrollTargetWeight" :scrollLeft="Number(weightTargetU)" />
|
||
</view>
|
||
</view>
|
||
<view class="pre-next">
|
||
<view class="pro" @click="targetWeightClick(1)">上一步</view>
|
||
<view class="next" @click="targetWeightClick(2)">下一步</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 进度3 行为习惯 -->
|
||
<!-- 减脂类型 -->
|
||
<view v-if="behaviorShow" class="plan-content target-content">
|
||
<u-image class="sex-item-avatar" width="100rpx" height="100rpx" :src="require('../../static/imgs/avatar-1.png')" :lazy-load="true" shape="circle" />
|
||
<view class="info-title">您的运动量是？</view>
|
||
<view class="target-type">
|
||
<view class="target-type-item">
|
||
<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '1'" :src="activedbehaviarTarget === '1' ? require('../../static/imgs/ic-w-01.png') : require('../../static/imgs/ic-w-02.png')" :lazy-load="true" shape="circle" />
|
||
久坐不动
|
||
</view>
|
||
<view class="target-type-item">
|
||
<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '2'" :src="activedbehaviarTarget === '2' ? require('../../static/imgs/ic-w-03.png') : require('../../static/imgs/ic-w-04.png')" :lazy-load="true" shape="circle" />
|
||
少量运动
|
||
</view>
|
||
<view class="target-type-item">
|
||
<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '3'" :src="activedbehaviarTarget === '3' ? require('../../static/imgs/ic-w-05.png') : require('../../static/imgs/ic-w-06.png')" :lazy-load="true" shape="circle" />
|
||
中等运动量
|
||
</view>
|
||
<view class="target-type-item">
|
||
<u-image class="target-img" width="120rpx" height="120rpx" @click="activedbehaviarTarget = '4'" :src="activedbehaviarTarget === '4' ? require('../../static/imgs/ic-w-07.png') : require('../../static/imgs/ic-w-08.png')" :lazy-load="true" shape="circle" />
|
||
超强度运动
|
||
</view>
|
||
</view>
|
||
<view class="pre-next">
|
||
<view class="pro" @click="targetBehaviorClick(1)">上一步</view>
|
||
<view class="next" @click="targetBehaviorClick(2)">立即创建</view>
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment';
|
||
import vueScale from '@/components/vueScale'; // 体重标尺
|
||
import { recordsHealth } from '@/apis/interfaces/essentialInfo.js';
|
||
export default {
|
||
components: {
|
||
vueScale
|
||
},
|
||
data() {
|
||
return {
|
||
// 第一部分基本信息 start
|
||
//#region
|
||
percentplan1: 0,
|
||
// 性别--start
|
||
sex: '1', //1是男生2是女生
|
||
sexShow: true, // 性别展示
|
||
// 性别 -- end
|
||
// 年龄 -- start
|
||
birthday: new Date().getTime(), // 年龄默认是当前时间
|
||
maxDate: new Date().getTime(), // 最大年龄为当前年月日
|
||
dateShow: false, // 显示日期
|
||
birthdayShow: false, // 显示年龄模块是否显示
|
||
// 年龄 -- end
|
||
// 身高体重 -- start
|
||
heightWeightShow: false, // 身高体重模块展示
|
||
weight: 11,
|
||
height: 180,
|
||
styles: {
|
||
line: '#dbdbdb',
|
||
bginner: '#fbfbfb',
|
||
bgoutside: '#ffffff',
|
||
font: '#404040',
|
||
fontColor: '#404040',
|
||
fontSize: 16
|
||
},
|
||
weightU: 55, //体重
|
||
heightU: 160, // 身高
|
||
// 身高体重 -- end
|
||
//#endregion
|
||
// 第一部分基本信息 end
|
||
// 第二部分
|
||
//#region
|
||
percentplan2: 0,
|
||
targetShow: false, // 减脂目标模块 是否显示减脂类型
|
||
activedTarget: '', // 减脂
|
||
targetWeightShow: false, // 目标体重页面展示
|
||
weightTargetU: 50,
|
||
//#endregion
|
||
behaviorShow: false, // 默认行为习惯页面不展示
|
||
percentplan3: 0,
|
||
activedbehaviarTarget: '' // 默认没有任何运动量
|
||
};
|
||
},
|
||
computed: {
|
||
showBirthday() {
|
||
return moment(this.birthday).format('YYYY年MM月DD日');
|
||
}
|
||
},
|
||
methods: {
|
||
//性别----------- 选择性别 1男2女
|
||
clickSex(sex) {
|
||
this.percentplan1 = 0;
|
||
this.sex = sex;
|
||
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33);
|
||
this.sexShow = false;
|
||
this.birthdayShow = true;
|
||
this.dateShow = true;
|
||
},
|
||
|
||
// 年龄-------------确认选择了出生年月日
|
||
confirmBirthday(e) {
|
||
this.birthday = e.value;
|
||
this.birthdayShow = false; // 年龄页面弹窗不显示
|
||
this.dateShow = false; // 关闭时间弹窗
|
||
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33); // 增加进度
|
||
this.heightWeightShow = true; // 展示身高体重模块
|
||
},
|
||
|
||
// 年龄 ----- 取消选择年龄
|
||
camcelBirthday() {
|
||
this.birthdayShow = false; // // 年龄页面弹窗不显示
|
||
this.dataShow = false; // 关闭时间弹窗
|
||
this.percentplan1 = 0; // 进度为0
|
||
this.sexShow = true; // 显示性别页面
|
||
},
|
||
|
||
//年龄------------- 过滤出生年月日
|
||
formatter(type, value) {
|
||
if (type === 'year') {return `${value}年`;}
|
||
if (type === 'month') {return `${value}月`;}
|
||
if (type === 'day') {return `${value}日`;}
|
||
return value;
|
||
},
|
||
|
||
|
||
// 体重---------标尺滚动
|
||
scrollWeight(msg) {
|
||
this.weightU = msg;
|
||
},
|
||
// 体重---------标尺滚动
|
||
scrollHeight(msg) {
|
||
this.heightU = msg;
|
||
},
|
||
// 体重 ------------ 点击 1 上一页 2 下一页
|
||
weightClick(type) {
|
||
if (type === 1) {
|
||
this.percentplan1 = 33.33;
|
||
this.heightWeightShow = false; // 关闭当前体重页面
|
||
this.birthdayShow = true;
|
||
this.dateShow = true;
|
||
} else {
|
||
this.percentplan1 = 100; // 第一个进度为100
|
||
this.heightWeightShow = false; // 关闭当前体重页面
|
||
this.targetShow = true; // 目标页面展示
|
||
}
|
||
},
|
||
|
||
|
||
// 目标 ------------点击 1上一页 2 下一页
|
||
targetClick(type) {
|
||
if (type === 1) {
|
||
this.percentplan1 = 66.66;
|
||
this.heightWeightShow = true; // 打开体重身高页面
|
||
this.targetShow = false; // 关闭目标页面 减重 塑性 增肌
|
||
this.percentplan2 = 0;
|
||
} else {
|
||
if (this.activedTarget === '') {
|
||
uni.showToast({
|
||
title: '请选择目标',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
this.percentplan2 = 50;
|
||
this.targetShow = false; // 目标页面不展示 展示下一面目标体重
|
||
this.targetWeightShow = true; // 目标体重页面展示
|
||
}
|
||
},
|
||
//目标体重-------------标尺滚动
|
||
scrollTargetWeight(msg) {
|
||
this.weightTargetU = msg;
|
||
},
|
||
// 目标 体重的 --------- 1上一页 2 下一页
|
||
targetWeightClick(type) {
|
||
if (type === 1) {
|
||
this.percentplan2 = 0;
|
||
this.targetShow = true; // 打开目标页面 减重 塑性 增肌
|
||
this.targetWeightShow = false; // 打开体重身高页面
|
||
} else {
|
||
this.percentplan2 = 100;
|
||
this.targetWeightShow = false; // 隐藏目标体重页面
|
||
this.behaviorShow = true; // 打开行为习惯页面
|
||
}
|
||
},
|
||
|
||
|
||
// 目标 运动量--------- 1上一页 2 下一页
|
||
targetBehaviorClick(type) {
|
||
if (type === 1) {
|
||
this.percentplan2 = 50;
|
||
this.targetWeightShow = true; // 目标体重页面展示
|
||
this.behaviorShow = false; // 关闭运动量选择页面
|
||
} else {
|
||
if (this.activedbehaviarTarget === '') {
|
||
uni.showToast({
|
||
title: '请选择运动量',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
let params = {
|
||
sex: this.sex, // 性别
|
||
birthday: moment(this.birthday).format('YYYY-MM-DD'), // 年龄
|
||
weight: this.weightU, // 体重
|
||
height: this.heightU, // 身高
|
||
goal_weight: this.weightTargetU, // 目标体重
|
||
exercise: this.activedbehaviarTarget, // 运动量
|
||
days: 1
|
||
};
|
||
recordsHealth(params)
|
||
.then(res => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '创建成功',
|
||
showCancel: false,
|
||
success: ModalRes => {
|
||
this.percentplan3 = 100;
|
||
this.behaviorShow = false; // 关闭运动量页面
|
||
uni.navigateBack({});
|
||
}
|
||
});
|
||
})
|
||
.catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
duration: 2000,
|
||
mask: true
|
||
})
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.info {
|
||
// 完善信息顶部进度条
|
||
.plan {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
font-size: $title-size-m;
|
||
color: $text-color;
|
||
padding: $padding;
|
||
.plan-3,
|
||
.plan-1,
|
||
.plan-2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
span {
|
||
padding-bottom: $padding * 0.6;
|
||
}
|
||
}
|
||
.plan-2 {
|
||
margin: $margin;
|
||
}
|
||
.line-progress {
|
||
width: 180rpx;
|
||
}
|
||
}
|
||
|
||
//展示主要内容部分
|
||
.plan-content {
|
||
width: 100%;
|
||
min-height: 70vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
.info-title {
|
||
font-size: $title-size + 10;
|
||
font-weight: bold;
|
||
margin-top: $margin - 10;
|
||
}
|
||
.info-des {
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
margin-top: $margin;
|
||
}
|
||
// 性别
|
||
.sex {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
.sex-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
margin-top: $margin * 3;
|
||
.sex-item-avatar {
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
//年龄
|
||
.age {
|
||
padding-top: $padding * 0.6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
.year {
|
||
font-size: $title-size * 1.9;
|
||
font-weight: bold;
|
||
color: $main-color;
|
||
margin-top: $margin;
|
||
}
|
||
}
|
||
// 体重
|
||
}
|
||
// 体重身高模块展示
|
||
.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;
|
||
}
|
||
}
|
||
.pre-next {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
margin-top: $margin * 2;
|
||
view {
|
||
background-color: rgba($color: $main-color, $alpha: 0.5);
|
||
color: white;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
padding: $padding * 0.6 $padding * 3;
|
||
border-radius: 10rpx;
|
||
margin: $margin;
|
||
}
|
||
.next {
|
||
background-color: $main-color;
|
||
}
|
||
}
|
||
|
||
// 健康目标模块展示
|
||
.target-content {
|
||
.target-type {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
margin-top: $margin * 2;
|
||
flex-wrap: wrap;
|
||
.target-type-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
font-size: $title-size-m;
|
||
color: $text-gray-m;
|
||
.target-img {
|
||
background: #ececec;
|
||
border-radius: $radius;
|
||
margin: $margin $margin * 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|