705 lines
25 KiB
Vue
705 lines
25 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 基本信息 -->
|
||
<view>
|
||
<!-- 进度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>
|
||
</view>
|
||
<!-- 进度2 健康目标 -->
|
||
<view>
|
||
<!-- 减脂类型 -->
|
||
<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>
|
||
</view>
|
||
|
||
<!-- 进度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: Date.parse(new Date()), // 年龄默认是当前时间
|
||
maxDate: Date.parse(new Date()), // 最大年龄为当前年月日
|
||
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: this.birthday, // 年龄
|
||
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'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</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> |