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

132
pages/evaluation/introduce.vue Normal file
View File

@@ -0,0 +1,132 @@
<!--
* @Description:测评前置,用于测试介绍展示
* @Author: Aimee·Zhang
* @Date: 2022-01-05 09:16:10
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-05 13:58:47
-->
<template>
<view class="introduce">
<view
class="intro-history"
@click="$Router.push({name:'EvaluationResult'})"
>测评记录</view>
<view class="intro-content">
<view class="intro-title">肌肤年龄测评</view>
<u-read-more
class="intro-des"
:toggle="true"
showHeight="140"
ref="uReadMore"
:shadowStyle="shadowStyle"
color='#34ce98'
textIndent="0"
>
<rich-text :nodes="content"></rich-text>
</u-read-more>
<u-image
class="intro-img"
width="100%"
radius="20rpx"
height="700rpx"
:src="require('../../static/imgs/indro.png')"
:lazy-load="true"
/>
<view class="answer">开始测评</view>
</view>
<view class="remark">
本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。
</view>
</view>
</template>
<script>
export default {
data() {
return {
content: `本测试预计完成时间5-8分钟
<br/>
—
<br/>
适用于18-65岁，存在亚健康或尿酸偏高人群`,
shadowStyle: {
backgroundImage: "none",
paddingTop: "0",
marginTop: "20rpx",
},
};
},
};
</script>
<style lang="scss" scoped>
.introduce {
background-color: $main-color;
min-height: 100vh;
.intro-history {
padding: $padding * 1.5 $padding;
color: $window-color;
text-decoration: underline;
font-size: $title-size-lg;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
}
// 测评展示
.intro-content {
background: rgba($color: #fff, $alpha: 1);
min-height: 30vh;
padding: 0 $padding;
margin: $margin * 1.5;
border-radius: $radius;
position: relative;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
// 标题
.intro-title {
font-size: $title-size * 1.8;
font-weight: bold;
color: $text-color;
position: relative;
top: -40rpx;
}
// 介绍
.intro-des {
line-height: $title-size * 1.8;
color: $text-color;
position: relative;
top: -10rpx;
font-size: $title-size-m;
padding-bottom: 20rpx;
}
// 图片
.intro-img {
margin-top: $padding * 0.8;
}
// 开始测评
.answer {
position: absolute;
bottom: -30rpx;
width: 400rpx;
height: 90rpx;
line-height: 90rpx;
left: 50%;
text-align: center;
background: rgba($color: #fff, $alpha: 0.94);
margin-left: -200rpx;
border-radius: $radius-m * 4;
font-weight: bold;
color: $text-color;
font-size: $title-size-m + 6;
}
}
// 备注信息
.remark {
color: $text-gray;
font-size: $title-size - 6;
padding: $padding * 2 $padding;
line-height: $title-size * 1.3;
}
}
</style>

186
pages/evaluation/list.vue Normal file
View File

@@ -0,0 +1,186 @@
<!--
* @Description:用于展示评测列表，带分页加载更多~
* @Author: Aimee·Zhang
* @Date: 2022-01-05 09:13:53
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-05 14:07:11
-->
<template>
<view class="evaluation-list ">
<view
class="evaluation-item"
v-for="(item,index) in evalList"
:key="index"
>
<!-- 评测列表主要内容 标题 图片 描述 -->
<view class="--content">
<u-image
class="content-img"
width="170rpx"
height="170rpx"
radius="20rpx"
:src="require('../../static/imgs/test.png')"
:lazy-load="true"
/>
<view class="title-des">
<view class="title">抗衰护肤测评抗衰护肤测评抗衰护肤测评</view>
<view class="des">科学护肤，‘精准’防衰老，延缓</view>
</view>
</view>
<!-- 分数 -->
<view
class="score"
v-if="index === 0"
><span>80</span>分</view>
<!-- 评测状态 -->
<view class="--status">
<!-- 已测试展示 状态-->
<view
class="status"
v-if="index === 0"
>
<span class="dian">·</span>今日最新完成
</view>
<view
v-if="index === 0"
class="history"
@click="$Router.push({name:'EvaluationResult'})"
>
查看历史结果
</view>
<!-- 未测试展示 状态-->
<view
class="status"
v-if="index !== 0"
>
<span class="dian">·</span>
<span class="person">32828837</span>
人已测 | 约4~8分钟
</view>
<u-icon
name="arrow-right"
:color="index === 0?'#26a377':'#faa81a'"
size="14"
:bold="true"
:label="index === 0?'重新评测':'开始测评'"
labelPos="left"
labelSize="14"
space="1"
:labelColor="index === 0?'#26a377':'#faa81a'"
@click="$Router.push({name:'EvaluationIntroduce'})"
/>
</view>
</view>
<!-- 没有更多 -->
<view class="no-more">没有更多~</view>
</view>
</template>
<script>
export default {
data() {
return {
evalList: 4,
};
},
};
</script>
<style lang="scss" scoped>
// 列表
.evaluation-item {
background-color: #fff;
padding: $padding;
margin: $margin;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: $radius;
position: relative;
// 评测列表主要内容
.--content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.content-img {
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: 30rpx;
}
.title-des {
padding-left: $padding - 10;
width: 440rpx;
.title {
font-size: $title-size + 4;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 340rpx;
}
.des {
font-size: $title-size-lg;
color: $text-gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-top: $padding - 8;
}
}
}
// .测试状态
.--status {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
color: $text-gray-m;
font-size: $title-size-m;
padding-top: $padding;
.status {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.dian {
font-size: $title-size-lg;
margin-right: $padding * 0.2;
font-weight: bold;
}
.person {
color: #faa81a;
}
}
.history {
text-decoration: underline;
}
}
// 分数
.score {
font-size: $title-size-m - 2;
color: $text-gray-m;
position: absolute;
right: $padding;
top: $padding - 10;
span {
font-size: 50rpx;
color: $main-color;
font-weight: bold;
}
}
}
// 没有更多
.no-more {
color: $uni-text-color-disable;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: $padding;
font-size: $title-size-m;
}
</style>

279
pages/evaluation/result.vue Normal file
View File

@@ -0,0 +1,279 @@
<!--
* @Description:测评结果页面,用于展示测评结果内容
* @Author: Aimee·Zhang
* @Date: 2022-01-05 09:16:10
* @LastEditors: Aimee·Zhang
* @LastEditTime: 2022-01-06 10:54:57
-->
<template>
<view class="answer">
<!-- 头像 -->
<view class="user">
<view class="left">
<u-image
width="80rpx"
height="80rpx"
:src="require('../../static/imgs/indro.png')"
:lazy-load="true"
shape="circle"
/>
<span class="name">Aimee·ZhangAimee·ZhangAimee·ZhangAimee·Zhang</span>
</view>
<view class="right">
<u-icon
name="arrow-right"
color="#34ce98"
size="14"
:bold="true"
label="重新评测"
labelPos="left"
labelSize="14"
labelColor="#34ce98"
space="1"
@click="$Router.push({name:'EvaluationIntroduce'})"
/>
</view>
</view>
<!-- 皮肤年龄 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">你的肌肤年龄为35岁</view>
<u-icon
name="share-square"
color="#333"
size="30"
/>
</view>
<!-- 雷达图 -->
<view class="charts-box">
<view class="charts-box">
<qiun-data-charts
type="radar"
:chartData="chartData"
:loadingType="4"
background="none"
:tooltipShow="false"
:tapLegend="false"
/>
</view>
</view>
<!-- 描述 -->
<view class="des">
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
</view>
</view>
<!-- 建议改进 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">建议从一下几个方面改进</view>
</view>
<block
v-for="(itme,index) in 3"
:key="index"
>
<view class="title2">
<u-image
width="34rpx"
height="34rpx"
:src="require('../../static/icon/health.png')"
:lazy-load="true"
shape="circle"
/>
<span>严厉节食导致营养不良，内分泌紊乱</span>
</view>
<!-- 描述 -->
<view class="des">
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
</view>
</block>
</view>
<!-- 营养建议 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">营养建议</view>
</view>
<block
v-for="(item,index) in 3"
:key="index"
>
<view class="title2">
<span>{{item}}. 低Gi</span>
</view>
<!-- 描述 -->
<view class="des">
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
</view>
</block>
</view>
<!-- 更多 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">更多护肤知识</view>
<u-icon
name="arrow-right"
color="#333"
size="20"
/>
</view>
<!-- 横向滚动推荐 -->
<scroll-view
class="scroll-view_H"
scroll-x="true"
>
<view
v-for="(item,index) in 6"
:key="index"
id="demo1"
class="scroll-view-item_H"
>
<u-image
width="180rpx"
height="180rpx"
:src="require('../../static/imgs/indro.png')"
:lazy-load="true"
radius="4"
/>
<view class="title">{{item}}正确洗脸</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: [
"餐饮营养",
"面部肌肤活力",
"洗护习惯",
"生活方式",
"皮肤抵抗力",
],
series: [
{
data: [99, 34, 100, 45, 17, 92],
},
],
},
};
},
};
</script>
<style lang="scss" scoped>
.answer {
min-height: 100vh;
padding-bottom: $padding;
// 用户头像
.user {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: $padding;
border-bottom: solid 1rpx #f7f7f7;
margin-bottom: $margin * 1.5;
.left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: $title-size-m;
.name {
padding-left: $padding;
width: 320rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-color;
font-weight: bold;
}
}
.right {
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
border-radius: $padding;
}
}
// 展示列表
.answer-item {
background: rgba($color: #fff, $alpha: 1);
padding: $padding * 1.3 $padding;
margin: $margin;
border-radius: $radius;
position: relative;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
//标题
.title-content {
font-size: $title-size + 6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.title {
color: $text-color;
font-weight: bold;
}
}
// 描述
.des {
font-size: $title-size - 4;
color: $text-color;
line-height: $title-size * 2 - 18;
}
// 雷达图
.charts-box {
width: 100%;
height: 400rpx;
margin: $margin 0;
}
//二级标题
.title2 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
margin-bottom: 20rpx;
span {
font-size: $title-size-m + 2;
font-weight: bold;
margin-left: $margin * 0.3;
}
}
// 横向滚动
.scroll-view_H {
white-space: nowrap;
border-radius: $radius;
.scroll-view-item_H {
display: inline-block;
width: 180rpx;
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
box-shadow: 0 0 10rpx 4rpx
rgba($color: $main-color, $alpha: 0.1);
.title {
text-align: center;
padding: $padding * 0.6 $padding * 0.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-gray;
font-size: $title-size - 4;
}
}
}
}
}
</style>