TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

新增记录模块页面

Browse Source
This commit is contained in:
张冬雪
2022-01-11 17:15:00 +08:00
parent c810dbdb1d
commit f7b4468119
83 changed files with 16340 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

679
pages/essentialInfo/index.vue Normal file
View File

@@ -0,0 +1,679 @@
<!--
* @Description:
* @Author: Aimee·Zhang
* @Date: 2022-01-10 10:29:17
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-10 17:23:37
-->
<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="ageShow"
>
<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"
>{{age}}</view>
<u-datetime-picker
confirmColor="#34ce98"
ref="datetimePicker"
v-model="age"
mode="date"
:show="dateShow"
:formatter="formatter"
:minDate="-302688000"
:maxDate="maxDate"
:closeOnClickOverlay="true"
@confirm="confirmAge"
@cancel="camcelAge"
/>
</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="160"
/>
</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="55"
/>
</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="50"
/>
</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 vueScale from "@/components/vueScale"; // 体重标尺
export default {
components: {
vueScale,
},
data() {
return {
// 第一部分基本信息 start
//#region
percentplan1: 0,
// 性别--start
sex: "1", //1是男生2是女生
sexShow: true, // 性别展示
// 性别 -- end
// 年龄 -- start
age: Date.parse(new Date()), // 年龄默认是当前时间
maxDate: Date.parse(new Date()), // 最大年龄为当前年月日
dateShow: false, // 显示日期
ageShow: false, // 显示年龄模块是否显示
// 年龄 -- end
// 身高体重 -- start
heightWeightShow: false, // 身高体重模块展示
weight: 11,
height: 180,
styles: {
line: "#dbdbdb",
bginner: "#fbfbfb",
bgoutside: "#ffffff",
font: "#404040",
fontColor: "#404040",
fontSize: 16,
},
weightU: "", //体重
heightU: "", // 身高
// 身高体重 -- end
//#endregion
// 第一部分基本信息 end
// 第二部分
//#region
percentplan2: 0,
targetShow: false, // 减脂目标模块 是否显示减脂类型
activedTarget: "", // 减脂
targetWeightShow: false, // 目标体重页面展示
weightTargetU: 50,
//#endregion
behaviorShow: false, // 默认行为习惯页面不展示
percentplan3: 0,
activedbehaviarTarget: "", // 默认没有任何运动量
};
},
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.ageShow = true;
this.dateShow = true;
console.log(this.percentplan1, this.sex);
},
// 年龄-------------确认选择了出生年月日
confirmAge(e) {
this.age = e.value;
this.ageShow = false; // 年龄页面弹窗不显示
this.dateShow = false; // 关闭时间弹窗
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33); // 增加进度
this.heightWeightShow = true; // 展示身高体重模块
},
// 年龄 ----- 取消选择年龄
camcelAge() {
this.ageShow = 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.ageShow = true;
this.dateShow = true;
} else {
this.percentplan1 = 100; // 第一个进度为100
this.heightWeightShow = false; // 关闭当前体重页面
this.targetShow = true; // 目标页面展示
}
},
// 目标 ------------点击 1上一页 2 下一页
targetClick(type) {
if (type === 1) {
console.log(1);
this.percentplan1 = 66.66;
this.heightWeightShow = true; // 打开体重身高页面
this.targetShow = false; // 关闭目标页面 减重 塑性 增肌
this.percentplan2 = 0;
} else {
console.log(2);
this.percentplan2 = 50;
this.targetShow = false; // 目标页面不展示 展示下一面目标体重
this.targetWeightShow = true; // 目标体重页面展示
}
},
//目标体重-------------标尺滚动
scrollTargetWeight(msg) {
this.weightTargetU = msg;
},
// 目标 体重的 --------- 1上一页 2 下一页
targetWeightClick(type) {
if (type === 1) {
console.log(1);
this.percentplan2 = 0;
this.targetShow = true; // 打开目标页面 减重 塑性 增肌
this.targetWeightShow = false; // 打开体重身高页面
} else {
console.log(2);
this.percentplan2 = 100;
this.targetWeightShow = false; // 隐藏目标体重页面
this.behaviorShow = true; // 打开行为习惯页面
}
},
// 目标 运动量--------- 1上一页 2 下一页
targetBehaviorClick(type) {
if (type === 1) {
console.log(1);
this.percentplan2 = 50;
this.targetWeightShow = true; // 目标体重页面展示
this.behaviorShow = false; // 关闭运动量选择页面
} else {
console.log(2);
console.log("创建成功了。。。");
this.$refs.uToast.show({
type: "success",
title: "创建成功",
message: "创建成功啦",
iconUrl:
"https://cdn.uviewui.com/uview/demo/toast/success.png",
complete() {
this.percentplan3 = 100;
this.behaviorShow = false; // 关闭运动量页面
uni.navigateBack({});
},
});
}
},
},
};
</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: $text-color;
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>