314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加水分测试页

Browse Source
master
rongweikang 2 years ago
parent 7318f56515
commit dd4a1ca9ae
2 changed files with 787 additions and 0 deletions
Show Stats Download Patch File Download Diff File

571
src/pages/moisture_test_report/moisture_test_report.less
Unescape Escape View File

@ -0,0 +1,571 @@
page {
background: #F8F8F8;
}
.moisture_test_report {
padding: 0 30rpx 190rpx;
}
.moisture_test_report .time {
font-size: 36rpx;
font-weight: 500;
color: #000000;
line-height: 1;
padding: 38rpx 0;
}
.report_data {
position: relative;
width: 100%;
height: 850rpx;
background: #FFFFFF;
border-radius: 30rpx;
}
.report_data .moisture_block {
width: 160rpx;
height: 80rpx;
border-radius: 20rpx;
padding: 14rpx;
box-sizing: border-box;
}
.report_data .moisture_img {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
.report_data .forehead {
position: absolute;
top: 52rpx;
left: 28rpx;
/*background: #FFEBDC;*/
}
.report_data .left_face {
position: absolute;
top: 172rpx;
left: 28rpx;
/*background: #FFE3E3;*/
}
.report_data .right_face {
position: absolute;
top: 172rpx;
right: 41rpx;
/*background: #F8F8F8;*/
}
.report_data .pos_info {
margin-left: 7rpx;
}
.report_data .pos_info .top {
font-size: 20rpx;
font-weight: 500;
color: #000000;
line-height: 1;
}
.report_data .pos_info .bottom {
font-size: 18rpx;
font-weight: 500;
color: #999999;
line-height: 1;
margin-top: 11rpx;
}
.report_data .example_box {
position: relative;
width: 100%;
height: 309rpx;
/*background: #ff6700;*/
}
.report_data .example_box image {
position: absolute;
top: 79rpx;
left: 50%;
transform: translateX(-50%);
width: 230rpx;
height: 230rpx;
border-radius: 50%;
}
.report_data .example_box .line1 {
position: absolute;
top: 120rpx;
left: 180rpx;
width: 170rpx;
height: 1rpx;
transform: rotate(17deg);
background: #D0D4DF;
}
.report_data .example_box .line2 {
position: absolute;
top: 211rpx;
left: 185rpx;
width: 135rpx;
height: 1rpx;
background: #D0D4DF;
}
.report_data .example_box .line3 {
position: absolute;
top: 209rpx;
right: 200rpx;
width: 106rpx;
height: 1rpx;
background: #D0D4DF;
}
.moisture_level_info .level_info {
padding: 36rpx 38rpx 0 33rpx;
}
.moisture_level_info .level_info .items {
padding: 8rpx 0;
}
.level_info .pos_name {
min-width: 83rpx;
font-size: 28rpx;
font-weight: 500;
color: #000000;
}
.level_info .progress {
overflow: hidden;
position: relative;
flex: 1;
height: 12rpx;
border-radius: 6rpx;
background: #F8F8F8;
margin: 0 51rpx 0 45rpx;
}
.level_info .progress_width {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.level_info .forehead_progress {
background: #FFC58C;
width: 30%;
}
.level_info .left_face_progress {
background: #FF9393;
width: 20%;
}
.level_info .right_face_progress {
background: #C2E5F3;
width: 70%;
}
.level_info .level {
font-size: 26rpx;
font-weight: 500;
color: #666666;
}
.moisture_level {
margin-top: 34rpx;
}
.moisture_level .level_txt {
font-size: 26rpx;
font-weight: 500;
color: #000000;
line-height: 1;
}
.moisture_level .level_txt .txt {
margin-left: 31rpx;
}
.circle {
width: 14rpx;
height: 14rpx;
background: #C2E5F3;
border-radius: 50%;
}
.serious {
background: #FF9393;
}
.moderate {
background: #FFC58C;
}
.slight {
background: #E5F3F9;
}
.normal {
background: #C2E5F3;
}
.sufficient {
background: #9FDBF3;
}
.level_list {
padding: 0 33rpx;
flex-wrap: wrap;
margin-top: 40rpx;
}
.level_list .txt {
font-size: 24rpx;
font-weight: 500;
color: #999999;
margin-left: 29rpx;
}
.level_list .items {
width: 50%;
padding: 7rpx 0;
}
.moisture_level .pour {
padding: 0 32rpx;
font-size: 24rpx;
font-weight: 500;
color: #999999;
line-height: 1;
margin-top: 36rpx;
}
.report_chart {
width: 100%;
height: 500rpx;
background: #FFFFFF;
border-radius: 30rpx;
margin: 20rpx 0;
}
.report_chart .chart_title {
padding: 41rpx 37rpx 0;
}
.common_title {
font-size: 28rpx;
font-weight: bold;
color: #000000;
}
.gear_recommend {
width: 100%;
height: 358rpx;
background: #FFFFFF;
border-radius: 30rpx;
}
.container {
width: 100%;
/*height: 100%;*/
height: 460rpx;
}
ec-canvas {
width: 100%;
height: 100%;
}
.gear_recommend {
padding: 0 39rpx;
box-sizing: border-box;
}
.gear_recommend .gear_header {
padding: 29rpx 0rpx 38rpx;
}
.gear_recommend .gear_header .gear_title {
padding-left: 2rpx;
}
.gear_header .gear_btn {
height: 60rpx;
line-height: 60rpx;
background: #000000;
border-radius: 30rpx;
padding: 0 29rpx;
font-size: 26rpx;
font-weight: 500;
color: #FFFFFF;
}
.gear_content .left_content {
text-align: center;
}
.gear_content .left_content .banner_img {
width: 140rpx;
height: 140rpx;
border-radius: 20rpx;
}
.gear_content .left_content .type {
font-size: 26rpx;
font-weight: 500;
color: #000000;
line-height: 1;
margin-top: 25rpx;
}
.gear_content .right_content {
flex: 1;
height: 190rpx;
background: #f8f8f8;
border-radius: 30rpx;
margin-left: 34rpx;
}
.right_content .gear_list {
width: 100%;
}
.right_content .gear_list .items {
flex-direction: column;
flex: 1;
}
.right_content .gear_list .items .gear_img {
width: 59rpx;
height: 57rpx;
}
.right_content .gear_list .items .name {
font-size: 26rpx;
font-weight: 500;
color: #000000;
line-height: 1;
padding: 26rpx 0 12rpx;
}
.right_content .gear_list .items .level {
font-size: 24rpx;
font-weight: 500;
color: #666666;
line-height: 1;
}
.go_clock_in {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 153rpx;
background: #ffffff;
padding: 0 30rpx;
box-sizing: border-box;
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173,191,207,0.21);
border-bottom: 21rpx solid #ffffff;
}
.go_clock_in image {
width: 10rpx;
height: 20rpx;
margin-left: 15rpx;
}
.go_clock_in .jump_box {
margin: 0 14rpx 0 49rpx;
/*box-sizing: border-box;*/
}
.go_clock_btn {
flex: 1;
height: 90rpx;
line-height: 90rpx;
background: #000000;
border-radius: 45rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
}
.jump_box .txt {
font-size: 32rpx;
font-weight: bold;
color: #000000;
}
.popbox {
position: relative;
width: 670rpx;
height: 840rpx;
border-radius: 30rpx;
background: #FFF;
}
.popbox .title {
font-weight: bold;
text-align: center;
font-size: 36rpx;
color: #030000;
padding-top: 39rpx;
}
.popbox_text {
font-size: 28rpx;
font-weight: 500;
color: #000;
text-align: center;
margin-top: 64rpx;
}
.popbox_text text {
font-weight: bold;
font-size: 36rpx;
}
.popbox .info1 {
border-bottom: 1rpx solid #D8D8D8;
padding: 16rpx 0;
margin: 0 24rpx;
text-align: center;
}
.popbox .info1 .tip1 {
color: #000;
font-size: 26rpx;
}
.popbox .info1 .tip2 {
color: #E9D3AE;
font-size: 32rpx;
}
.popbox .info2 {
padding: 16rpx 0 0;
}
.popbox .info2 .left {}
.popbox .info2 .left .tip1 {
color: #000;
font-size: 26rpx;
font-weight: bold;
}
.popbox .info2 .switch {
position: relative;
top: 4rpx;
margin-left: 12rpx;
}
.popbox .info3 {
margin: 59rpx 30rpx 37rpx;
}
.popbox .info3 .imgbox {
}
.popbox .info3 .imgbox .img {
position: relative;
width: 180rpx;
height: 180rpx;
border: 1px solid #DDDDDD;
border-radius: 20rpx;
background: #FFF;
overflow: hidden;
margin-right: 18rpx;
}
.popbox .info3 .imgbox .img .item_img {
width: 180rpx;
height: 180rpx;
}
.popbox .info3 .imgbox .img:nth-child(n+3) {
margin-right: 0;
}
.popbox .info3 .imgbox .img2 {
width: 180rpx;
height: 180rpx;
border: 1px solid #DDDDDD;
border-radius: 20rpx;
background: #FFF;
}
.popbox .info3 .imgbox .img2 image {
width: 70rpx;
}
.popbox .info3 .imgbox .img .close {
width: 28rpx;
height: 28rpx;
position: absolute;
z-index: 9;
right: 4rpx;
top: 4rpx;
border-radius: 50%;
background: rgba(0, 0, 0, .4);
}
.popbox .info4 {
width: 610rpx;
height: 186rpx;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 3rpx;
position: relative;
margin: 0 30rpx;
overflow: hidden;
padding: 22rpx 30rpx 50rpx;
box-sizing: border-box;
}
.popbox .info4 .content {
/*padding: 14rpx;*/
width: 100%;
height: 100%;
font-size: 28rpx;
font-weight: 500;
color: #CCCCCC;
}
.popbox .info4 .content textarea {
color: #CCCCCC;
font-size: 28rpx;
width: 100%;
height: 100%;
}
.popbox .info4 .tip {
position: absolute;
right: 14rpx;
color: #CCCCCC;
font-size: 22rpx;
bottom: 24rpx;
}
.popbox .popbtnbox {
position: absolute;
bottom: 54rpx;
left: 0;
right: 0;
}
.popbox .popbtnbox .btn1 {
flex-shrink: 0;
line-height: 90rpx;
text-align: center;
font-size: 30rpx;
width: 270rpx;
height: 90rpx;
background: #000;
border-radius: 45rpx;
color: #fff;
}

216
src/pages/moisture_test_report/moisture_test_report.tsx
Unescape Escape View File

@ -0,0 +1,216 @@
import { Block, View, Text, Image, Input, Button } from "@tarojs/components";
import { Component, PropsWithChildren, useEffect, useState } from "react";
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import Taro from "@tarojs/taro";
// 引入 Swiper, SwiperItem 组件
/*** redux ***/
import { connect } from "react-redux";
import { setMobile } from "../../store/features/userInfo";
/*** redux end ***/
import { WCUserLogin } from "../../utils/Interface";
import "./login.less";
class MoistureTestReport extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
name: "重新登录",
imgUrl: '',
reportData: {
curDate: '',
shuifenLevel: {
head: 2,
leftFace: 3,
rightFace: 7
},
shuifenList: [],
shuifenGear: {
head: 0,
leftFace: 0,
rightFace: 0
}
},
bgCssData: {
serious: 'background: #FFE3E3',
moderate: 'background: #FFEBDC',
slight: 'background: #F6FCFF',
normal: 'background: #F8F8F8',
sufficient: 'background: #F8F8F8'
},
isClock: false,
xinde: '',
imglist: [],
id: 0,
show: false
};
}
async onLoad() { }
componentDidMount() { }
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
async initData() { }
render() {
let { name, imgUrl, reportData, bgCssData, isClock, xinde, imglist, id, show } = this.state
return (
<Block>
<View className='moisture_test_report'>
<View className='time'>{reportData.curDate || ''}</View>
<View className='report_data'>
<View className='forehead moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.head).bg}'>
<Image className='moisture_img' src={require("/img/fr200/{util.getStatusData(reportData.shuifenLevel.head).img}.png")} mode='aspectFill'></Image>
<View className='pos_info'>
<View className='top'>额头</View>
<View className='bottom'>{util.getStatusData(reportData.shuifenLevel.head).title}</View>
</View>
</View>
<View className='left_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.leftFace).bg}'>
<Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.leftFace).img}.png' mode='aspectFill'></Image>
<View className='pos_info'>
<View className='top'>左脸颊</View>
<View className='bottom'>{util.getStatusData(reportData.shuifenLevel.leftFace).title}</View>
</View>
</View>
<View className='right_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.rightFace).bg}'>
<Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.rightFace).img}.png' mode='aspectFill'></Image>
<View className='pos_info'>
<View className='top'>右脸颊</View>
<View className='bottom'>{util.getStatusData(reportData.shuifenLevel.rightFace).title}</View>
</View>
</View>
<View className='example_box'>
<Image className='banner_img' src='/img/fr200/shuifen.png' mode='aspectFill'></Image>
<View className='line1'></View>
<View className='line2'></View>
<View className='line3'></View>
</View>
<View className='moisture_level_info'>
<View className='level_info'>
<View className='items flex aitems'>
<View className='pos_name'>额头</View>
<View className='progress'>
<View className='progress_width' style='width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}'></View>
</View>
<View className='level'>{reportData.shuifenLevel.head}级</View>
</View>
<View className='items flex aitems'>
<View className='pos_name'>左脸颊</View>
<View className='progress'>
<View className='progress_width left_face_progress' style='width: {reportData.shuifenLevel.leftFace * 10}%;{util.getStatusData(reportData.shuifenLevel.leftFace).progressBg}'></View>
</View>
<View className='level'>{reportData.shuifenLevel.leftFace}级</View>
</View>
<View className='items flex aitems'>
<View className='pos_name'>右脸颊</View>
<View className='progress'>
<View className='progress_width right_face_progress' style='width: {reportData.shuifenLevel.rightFace * 10}%;{util.getStatusData(reportData.shuifenLevel.rightFace).progressBg}'></View>
</View>
<View className='level'>{reportData.shuifenLevel.rightFace}级</View>
</View>
</View>
<View className='moisture_level'>
<View className='level_txt flex aitems jcenter'>
<View className='circle normal'></View>
<View className='txt'>水分等级</View>
</View>
<View className='level_list flex'>
<View className='items flex aitems'>
<View className='circle serious'></View>
<View className='txt'>严重缺水：1-2级</View>
</View>
<View className='items flex aitems'>
<View className='circle moderate'></View>
<View className='txt'>中度缺水：3-4级</View>
</View>
<View className='items flex aitems'>
<View className='circle slight'></View>
<View className='txt'>轻微缺水：5-6级</View>
</View>
<View className='items flex aitems'>
<View className='circle normal'></View>
<View className='txt'>水分正常：7-8级</View>
</View>
<View className='items flex aitems'>
<View className='circle sufficient'></View>
<View className='txt'>水分充足：9-10级</View>
</View>
</View>
<View className='pour'>注：各水分等级依据测量得出肌肤含水量划分</View>
</View>
</View>
</View>
<View className='report_chart'>
<View className='chart_title common_title'>肌肤整体</View>
<View className='container'>
{/* <ec-canvas id='mychart' style='width: 100%;height: 100%' canvas-id='mychart-line' ec='{ ec }'></ec-canvas> */}
</View>
</View>
<View className='gear_recommend'>
<View className='gear_header flex aitems sb'>
<View className='gear_title common_title'>促渗档位推荐</View>
<View className='gear_btn'>前往护理</View>
</View>
<View className='gear_content flex aitems sb'>
<View className='left_content'>
<Image className='banner_img' src='/img/fr200/mian-mo.png' mode='aspectFill'></Image>
<View className='type'>面膜促渗</View>
</View>
<View className='right_content flex aitems'>
<View className='gear_list flex aitems sa'>
<View className='items flex aitems jcenter'>
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.head).gear}.png' mode='aspectFill'></Image>
<View className='name'>额头</View>
<View className='level'>{reportData.shuifenGear.head}档</View>
</View>
<View className='items flex aitems jcenter'>
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.leftFace).gear}.png' mode='aspectFill'></Image>
<View className='name'>左脸颊</View>
<View className='level'>{reportData.shuifenGear.leftFace}档</View>
</View>
<View className='items flex aitems jcenter'>
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.rightFace).gear}.png' mode='aspectFill'></Image>
<View className='name'>右脸颊</View>
<View className='level'>{reportData.shuifenGear.rightFace}档</View>
</View>
</View>
</View>
</View>
</View>
</View>
<View className='go_clock_in flex sb aitems' >
<View className='go_clock_btn'>继续护理</View>
<View className='jump_box flex aitems'>
<View className='txt'>主页</View>
<Image src='/img/fr200/right.png' mode='aspectFill'></Image>
</View>
</View>
</Block>
);
}
}
const mapStateToProps = (state) => ({
mobile: state.userInfo.mobile,
});
const mapDispatchToProps = (dispatch) => ({
setMobile(value) {
dispatch(setMobile(value));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);
Write Preview
Loading…
Cancel
Save