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

对接水分测试报告

Browse Source
master
rongweikang 2 years ago
parent 17d0439e3f
commit 2f0ce40830
1 changed files with 113 additions and 84 deletions
Show Stats Download Patch File Download Diff File

111
src/recoding/pages/moisture_test_report/moisture_test_report.tsx
Unescape Escape View File

@ -12,6 +12,7 @@ import { setMobile } from "@/store/features/userInfo";
import Navbar from "@/components/navbar/navbar"; import Navbar from "@/components/navbar/navbar";
import Echarts from "./Echarts/index"; import Echarts from "./Echarts/index";
import "./moisture_test_report.less"; import "./moisture_test_report.less";
import { go } from "@/utils/traoAPI";
class MoistureTestReport extends Component<any, any> { class MoistureTestReport extends Component<any, any> {
constructor(props) { constructor(props) {
@ -33,13 +34,6 @@ class MoistureTestReport extends Component<any, any> {
rightFace: 0 rightFace: 0
} }
}, },
bgCssData: {
serious: 'background: #FFE3E3',
moderate: 'background: #FFEBDC',
slight: 'background: #F6FCFF',
normal: 'background: #F8F8F8',
sufficient: 'background: #F8F8F8'
},
isClock: false, isClock: false,
xinde: '', xinde: '',
imglist: [], imglist: [],
@ -57,12 +51,42 @@ class MoistureTestReport extends Component<any, any> {
componentDidHide() { } componentDidHide() { }
async onLoad() { onLoad(option) {
let data = JSON.parse(option.data)
let { reportData } = this.state
reportData.curDate = option.date
data.GearData.map(item => {
if (item.name == '额头') {
reportData.shuifenLevel.head = item.forehead
let gear = Math.ceil((11 - reportData.shuifenLevel.head) / 2)
reportData.shuifenGear.head = gear
} else if (item.name == '左脸颊') {
reportData.shuifenLevel.leftFace = item.forehead
let gear = Math.ceil((11 - reportData.shuifenLevel.leftFace) / 2)
reportData.shuifenGear.leftFace = gear
} else if (item.name == '右脸颊') {
reportData.shuifenLevel.rightFace = item.forehead
let gear = Math.ceil((11 - reportData.shuifenLevel.rightFace) / 2)
reportData.shuifenGear.rightFace = gear
}
})
this.setState({ reportData });
setTimeout(() => {
console.log(this.state.reportData);
}, 50);
} }
async initData() { } async initData() { }
toIndex() {
Taro.reLaunch({ url: "/pages/index/index" });
}
render() {
let { name, imgUrl, reportData, reportData1, isClock, xinde, imglist, id, show } = this.state
getStatusData(level) { const getStatusData = (level) => {
var bgCssData = { var bgCssData = {
serious: 'background: #FFE3E3', serious: 'background: #FFE3E3',
moderate: 'background: #FFEBDC', moderate: 'background: #FFEBDC',
@ -70,18 +94,25 @@ class MoistureTestReport extends Component<any, any> {
normal: 'background: #F8F8F8', normal: 'background: #F8F8F8',
sufficient: 'background: #F8F8F8' sufficient: 'background: #F8F8F8'
} }
// var progressBgData = {
// serious: 'background: #FF9393',
// moderate: 'background: #FFC58C',
// slight: 'background: #E5F3F9',
// normal: 'background: #C2E5F3',
// sufficient: 'background: #9FDBF3'
// }
var progressBgData = { var progressBgData = {
serious: 'background: #FF9393', serious: '#FF9393',
moderate: 'background: #FFC58C', moderate: '#FFC58C',
slight: 'background: #E5F3F9', slight: '#E5F3F9',
normal: 'background: #C2E5F3', normal: '#C2E5F3',
sufficient: 'background: #9FDBF3' sufficient: '#9FDBF3'
} }
if (level >= 1 && level <= 2) { if (level >= 1 && level <= 2) {
return { return {
bg: bgCssData.serious, bg: bgCssData.serious,
title: '严重缺水', title: '严重缺水',
gear: 1, gear: 5,
img: 'serious', img: 'serious',
progressBg: progressBgData.serious progressBg: progressBgData.serious
} }
@ -89,7 +120,7 @@ class MoistureTestReport extends Component<any, any> {
return { return {
bg: bgCssData.moderate, bg: bgCssData.moderate,
title: '中度缺水', title: '中度缺水',
gear: 2, gear: 4,
img: 'moderate', img: 'moderate',
progressBg: progressBgData.moderate progressBg: progressBgData.moderate
} }
@ -105,7 +136,7 @@ class MoistureTestReport extends Component<any, any> {
return { return {
bg: bgCssData.normal, bg: bgCssData.normal,
title: '水分正常', title: '水分正常',
gear: 4, gear: 2,
img: 'normal', img: 'normal',
progressBg: progressBgData.normal progressBg: progressBgData.normal
} }
@ -113,51 +144,48 @@ class MoistureTestReport extends Component<any, any> {
return { return {
bg: bgCssData.sufficient, bg: bgCssData.sufficient,
title: '水分充足', title: '水分充足',
gear: 5, gear: 1,
img: 'sufficient', img: 'sufficient',
progressBg: progressBgData.sufficient progressBg: progressBgData.sufficient
} }
} }
} }
render() {
let { name, imgUrl, reportData, bgCssData, isClock, xinde, imglist, id, show } = this.state
return ( return (
<Block> <Block>
<Navbar isBack titleSlot='水分测试报告'></Navbar> <Navbar isBack titleSlot='水分测试报告'></Navbar>
<View className='moisture_test_report'> <View className='moisture_test_report'>
<View className='time'>2023.6.23</View> <View className='time'>{reportData.curDate}</View>
<View className='report_data'> <View className='report_data'>
<View className='forehead moisture_block flex' style={this.getStatusData(reportData.shuifenLevel.head).bg}> <View className='forehead moisture_block flex' style={getStatusData(reportData.shuifenLevel.head)!.bg}>
<Image className='moisture_img' src={`/img/fr200/${this.getStatusData(reportData.shuifenLevel.head)}.img}.png`} mode='aspectFill'></Image> <Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.head)!.img}.png`)} mode='aspectFill'></Image>
<View className='pos_info'> <View className='pos_info'>
<View className='top'>额头</View> <View className='top'>额头</View>
<View className='bottom'>{this.getStatusData(7).title}</View> <View className='bottom'>{getStatusData(reportData.shuifenLevel.head)!.title}</View>
<View className='bottom'></View> <View className='bottom'></View>
</View> </View>
</View> </View>
<View className='left_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.leftFace).bg}'> <View className='left_face moisture_block flex' style={getStatusData(reportData.shuifenLevel.leftFace)!.bg}>
<Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.leftFace).img}.png' mode='aspectFill'></Image> <Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.leftFace)!.img}.png`)} mode='aspectFill'></Image>
<View className='pos_info'> <View className='pos_info'>
<View className='top'>左脸颊</View> <View className='top'>左脸颊</View>
{/* <View className='bottom'>{this.getStatusData(reportData.shuifenLevel.leftFace).title}</View> */} <View className='bottom'>{getStatusData(reportData.shuifenLevel.leftFace)!.title}</View>
<View className='bottom'></View> <View className='bottom'></View>
</View> </View>
</View> </View>
<View className='right_face moisture_block flex' style='{util.getStatusData(reportData.shuifenLevel.rightFace).bg}'> <View className='right_face moisture_block flex' style={getStatusData(reportData.shuifenLevel.rightFace)!.bg}>
<Image className='moisture_img' src='/img/fr200/{util.getStatusData(reportData.shuifenLevel.rightFace).img}.png' mode='aspectFill'></Image> <Image className='moisture_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.rightFace)!.img}.png`)} mode='aspectFill'></Image>
<View className='pos_info'> <View className='pos_info'>
<View className='top'>右脸颊</View> <View className='top'>右脸颊</View>
{/* <View className='bottom'>{this.getStatusData(reportData.shuifenLevel.rightFace).title}</View> */} <View className='bottom'>{getStatusData(reportData.shuifenLevel.rightFace)!.title}</View>
<View className='bottom'></View> <View className='bottom'></View>
</View> </View>
</View> </View>
<View className='example_box'> <View className='example_box'>
<Image className='banner_img' src='/img/fr200/shuifen.png' mode='aspectFill'></Image> <Image className='banner_img' src='@/img/fr200/shuifen.png' mode='aspectFill'></Image>
<View className='line1'></View> <View className='line1'></View>
<View className='line2'></View> <View className='line2'></View>
<View className='line3'></View> <View className='line3'></View>
@ -167,21 +195,22 @@ class MoistureTestReport extends Component<any, any> {
<View className='items flex aitems'> <View className='items flex aitems'>
<View className='pos_name'>额头</View> <View className='pos_name'>额头</View>
<View className='progress'> <View className='progress'>
<View className='progress_width' style='width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}'></View> <View className='progress_width' style={{ width: `${reportData.shuifenLevel.head * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.head)!.progressBg }}></View>
{/* style='{width: {reportData.shuifenLevel.head * 10}%;{util.getStatusData(reportData.shuifenLevel.head).progressBg}}' */}
</View> </View>
<View className='level'>{reportData.shuifenLevel.head}级</View> <View className='level'>{reportData.shuifenLevel.head}级</View>
</View> </View>
<View className='items flex aitems'> <View className='items flex aitems'>
<View className='pos_name'>左脸颊</View> <View className='pos_name'>左脸颊</View>
<View className='progress'> <View className='progress'>
<View className='progress_width left_face_progress' style='width: {reportData.shuifenLevel.leftFace * 10}%;{util.getStatusData(reportData.shuifenLevel.leftFace).progressBg}'></View> <View className='progress_width left_face_progress' style={{ width: `${reportData.shuifenLevel.leftFace * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.leftFace)!.progressBg }}></View>
</View> </View>
<View className='level'>{reportData.shuifenLevel.leftFace}级</View> <View className='level'>{reportData.shuifenLevel.leftFace}级</View>
</View> </View>
<View className='items flex aitems'> <View className='items flex aitems'>
<View className='pos_name'>右脸颊</View> <View className='pos_name'>右脸颊</View>
<View className='progress'> <View className='progress'>
<View className='progress_width right_face_progress' style='width: {reportData.shuifenLevel.rightFace * 10}%;{util.getStatusData(reportData.shuifenLevel.rightFace).progressBg}'></View> <View className='progress_width right_face_progress' style={{ width: `${reportData.shuifenLevel.rightFace * 10}%`, backgroundColor: getStatusData(reportData.shuifenLevel.rightFace)!.progressBg }}></View>
</View> </View>
<View className='level'>{reportData.shuifenLevel.rightFace}级</View> <View className='level'>{reportData.shuifenLevel.rightFace}级</View>
</View> </View>
@ -232,23 +261,23 @@ class MoistureTestReport extends Component<any, any> {
</View> </View>
<View className='gear_content flex aitems sb'> <View className='gear_content flex aitems sb'>
<View className='left_content'> <View className='left_content'>
<Image className='banner_img' src='/img/fr200/mian-mo.png' mode='aspectFill'></Image> <Image className='banner_img' src='@/img/fr200/mian-mo.png' mode='aspectFill'></Image>
<View className='type'>面膜促渗</View> <View className='type'>面膜促渗</View>
</View> </View>
<View className='right_content flex aitems'> <View className='right_content flex aitems'>
<View className='gear_list flex aitems sa'> <View className='gear_list flex aitems sa'>
<View className='items flex aitems jcenter'> <View className='items flex aitems jcenter'>
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.head).gear}.png' mode='aspectFill'></Image> <Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.head)!.gear}.png`)} mode='aspectFill'></Image>
<View className='name'>额头</View> <View className='name'>额头</View>
<View className='level'>{reportData.shuifenGear.head}档</View> <View className='level'>{reportData.shuifenGear.head}档</View>
</View> </View>
<View className='items flex aitems jcenter'> <View className='items flex aitems jcenter'>
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.leftFace).gear}.png' mode='aspectFill'></Image> <Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.leftFace)!.gear}.png`)} mode='aspectFill'></Image>
<View className='name'>左脸颊</View> <View className='name'>左脸颊</View>
<View className='level'>{reportData.shuifenGear.leftFace}档</View> <View className='level'>{reportData.shuifenGear.leftFace}档</View>
</View> </View>
<View className='items flex aitems jcenter'> <View className='items flex aitems jcenter'>
<Image className='gear_img' src='/img/fr200/{util.getStatusData(reportData.shuifenGear.rightFace).gear}.png' mode='aspectFill'></Image> <Image className='gear_img' src={require(`@/img/fr200/${getStatusData(reportData.shuifenLevel.rightFace)!.gear}.png`)} mode='aspectFill'></Image>
<View className='name'>右脸颊</View> <View className='name'>右脸颊</View>
<View className='level'>{reportData.shuifenGear.rightFace}档</View> <View className='level'>{reportData.shuifenGear.rightFace}档</View>
</View> </View>
@ -260,9 +289,9 @@ class MoistureTestReport extends Component<any, any> {
<View className='go_clock_in flex sb aitems' > <View className='go_clock_in flex sb aitems' >
<View className='go_clock_btn'>继续护理</View> <View className='go_clock_btn'>继续护理</View>
<View className='jump_box flex aitems'> <View className='jump_box flex aitems' onClick={this.toIndex}>
<View className='txt'>主页</View> <View className='txt'>主页</View>
<Image src='/img/fr200/right.png' mode='aspectFill'></Image> <Image src='@/img/fr200/right.png' mode='aspectFill'></Image>
</View> </View>
</View> </View>

Write Preview
Loading…
Cancel
Save