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

护理记录静态结构

Browse Source
master
rongweikang 2 years ago
parent 49d6124d96
commit d11fdb4c23
3 changed files with 324 additions and 90 deletions
Show Stats Download Patch File Download Diff File

2
src/app.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import "./app.less";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import store from "./store"; import store from "./store";
import './iconfont/iconfont.css'
import "taro-ui/rn/style/components/icon.scss"; import "taro-ui/rn/style/components/icon.scss";
import { go } from "./utils/traoAPI"; import { go } from "./utils/traoAPI";

239
src/pages/recording/recording.less
Unescape Escape View File

@ -15,6 +15,10 @@ page {
font-weight: 400; font-weight: 400;
color: #666; color: #666;
padding: 0 32rpx; padding: 0 32rpx;
position: sticky;
top: 176rpx;
z-index: 9;
} }
.tab { .tab {
@ -71,6 +75,9 @@ page {
background: #f8f8f8; background: #f8f8f8;
padding-top: 25rpx; padding-top: 25rpx;
padding-bottom: 29rpx; padding-bottom: 29rpx;
position: sticky;
top: 286rpx;
z-index: 9;
} }
.all { .all {
@ -143,6 +150,7 @@ page {
.statistic_item { .statistic_item {
flex: 1; flex: 1;
text-align: center;
} }
.border { .border {
@ -168,84 +176,90 @@ page {
color: #999; color: #999;
} }
.instrument_item { // .instrument_item {
margin-top: 20rpx; // margin-top: 20rpx;
background: #ffffff; // background: #ffffff;
border-radius: 30rpx; // border-radius: 30rpx;
padding: 46rpx 36rpx; // padding: 46rpx 36rpx;
} // margin: 0 auto 20rpx;
// width: 690rpx;
// height: 290rpx;
// box-sizing: border-box;
// padding: 41rpx 33rpx;
// }
.time { // .time {
font-size: 28rpx; // font-size: 28rpx;
font-weight: bold; // font-weight: bold;
color: #000; // color: #000;
margin-right: 23rpx; // margin-right: 23rpx;
} // }
.tag { // .tag {
width: 90rpx; // width: 90rpx;
height: 36rpx; // height: 36rpx;
line-height: 36rpx; // line-height: 36rpx;
background: #e5f9ee; // background: #e5f9ee;
border-radius: 18rpx; // border-radius: 18rpx;
font-size: 24rpx; // font-size: 24rpx;
font-weight: 400; // font-weight: 400;
color: #57bc81; // color: #57bc81;
} // text-align: center;
// }
.tag_active { // .tag_active {
background: #f8f8f8; // background: #f8f8f8;
color: #999; // color: #999;
} // }
.report_btn { // .report_btn {
font-size: 26rpx; // font-size: 26rpx;
font-weight: 400; // font-weight: 400;
color: #666; // color: #666;
align-items: baseline; // align-items: baseline;
} // }
.arrow_icon { // .arrow_icon {
width: 10rpx; // width: 10rpx;
height: 20rpx; // height: 20rpx;
margin-left: 14rpx; // margin-left: 14rpx;
} // }
.instrument_middle { // .instrument_middle {
margin-top: 40rpx; // margin-top: 40rpx;
text-align: left; // text-align: left;
} // }
.instrument_cover { // .instrument_cover {
width: 140rpx; // width: 140rpx;
height: 140rpx; // height: 140rpx;
border-radius: 20rpx; // border-radius: 20rpx;
margin-right: 37rpx; // margin-right: 37rpx;
} // }
.instrument_content { // .instrument_content {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
flex: 1; // flex: 1;
} // }
.instrument_title { // .instrument_title {
font-size: 28rpx; // font-size: 28rpx;
font-weight: bold; // font-weight: bold;
color: #000; // color: #000;
padding-top: 3rpx; // padding-top: 3rpx;
} // }
.instrument_desc_box { // .instrument_desc_box {
margin-top: 25rpx; // margin-top: 25rpx;
min-height: 73rpx; // min-height: 73rpx;
} // }
.instrument_desc { // .instrument_desc {
font-size: 24rpx; // font-size: 24rpx;
font-weight: 400; // font-weight: 400;
color: #999; // color: #999;
} // }
.instrument_bottom { .instrument_bottom {
position: relative; position: relative;
@ -378,7 +392,7 @@ page {
.month_statistics { .month_statistics {
background: #fff; background: #fff;
border-radius: 30rpx; border-radius: 30rpx;
margin-top: 30rpx; margin: 30rpx auto;
padding: 46rpx 36rpx; padding: 46rpx 36rpx;
} }
@ -495,3 +509,92 @@ page {
color: #666666; color: #666666;
} }
} }
.recording-box {
box-sizing: border-box;
width: 690rpx;
height: 290rpx;
background-color: #fff;
padding: 41rpx 33rpx;
margin: 0 auto 20rpx;
border-radius: 30rpx;
.box-top {
display: flex;
margin-bottom: 36rpx;
align-items: center;
justify-content: space-between;
.top-left {
display: flex;
.date {
width: 131rpx;
height: 22rpx;
font-size: 28rpx;
font-weight: bold;
color: #000000;
}
.tip {
width: 90rpx;
height: 36rpx;
background: #e5f9ee;
border-radius: 18rpx;
line-height: 36rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #57bc81;
margin-left: 23rpx;
}
}
.top-right {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
display: flex;
align-items: center;
.arrow-icon {
font-size: 20rpx;
color: #999;
}
.arrow_icon {
width: 10rpx;
height: 20rpx;
margin-left: 14rpx;
}
}
}
.box-bottom {
display: flex;
.recording_img {
width: 140rpx;
height: 140rpx;
margin-right: 38rpx;
}
.bottom-right {
padding: 4rpx 0 3rpx;
.title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-bottom: 10rpx;
}
.subtitle-box {
display: flex;
flex-flow: column;
justify-content: space-between;
height: 65rpx;
.subtitle {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
margin-top: 11rpx;
}
}
}
}
}

173
src/pages/recording/recording.tsx
Unescape Escape View File

@ -2,7 +2,7 @@ import Taro from "@tarojs/taro";
import classnames from "classnames"; import classnames from "classnames";
import { Component, PropsWithChildren, useEffect, useState } from "react"; import { Component, PropsWithChildren, useEffect, useState } from "react";
import { Block, View, Text, Image, Input, Button } from "@tarojs/components"; import { Block, View, Text, Image, Input, Button, ScrollView, Picker } from "@tarojs/components";
import { Tab, Tabs } from "@antmjs/vantui"; import { Tab, Tabs } from "@antmjs/vantui";
@ -19,19 +19,22 @@ export default class Recording extends Component<any, any> {
this.state = { this.state = {
name: "护理历程", name: "护理历程",
current: 0, current: 0,
array: [1, 2, 3, 4, 5],
}; };
} }
async onLoad() {} async onLoad() { }
componentDidMount() {} componentDidMount() { }
componentWillUnmount() {} componentWillUnmount() { }
componentDidShow() {} componentDidShow() { }
componentDidHide() {} componentDidHide() { }
async initData() {} async initData() { }
onChangeYear() { }
onTab = async (event) => { onTab = async (event) => {
const { current } = event.currentTarget.dataset; const { current } = event.currentTarget.dataset;
@ -40,11 +43,11 @@ export default class Recording extends Component<any, any> {
}; };
render() { render() {
let { current } = this.state; let { current, array, name } = this.state;
return ( return (
<Block> <Block>
<Navbar isBack={true} titleSlot="护理记录"></Navbar> <Navbar isBack titleSlot='护理记录'></Navbar>
<View className="tabs"> <View className='tabs'>
<View <View
className={classnames("tab", { className={classnames("tab", {
tab_active: current === 0, tab_active: current === 0,
@ -64,26 +67,154 @@ export default class Recording extends Component<any, any> {
打卡统计 打卡统计
</View> </View>
</View> </View>
{current === 0 && <ScrollView className='products_list' scroll-x='true' >
<View className="{{!curIndex ? 'all products_item_active' : 'all'}}" data-id='{{0}}' >全部
</View>
<View className="{{curIndex === item.id ? 'products_item products_item_active' : 'products_item'}}"
data-id='{{item.id}}'
>
<Image className='products_cover'
src={require("../../img/test/1706692819894.jpg")} mode='aspectFit'
></Image>
<View className='products_title'>画质抗老射频仪</View>
</View>
</ScrollView>}
{current === 0 &&
array.length ===
0 && (
<View>
<View className='nodata'>
<Image
className='nodata_img'
src={require("../../img/nodata.png")}
></Image>
<View className='nodata_text'>暂无数据</View>
</View>
</View>
)}
{current === 0 && ( {current === 0 && (
<View> <View>
<View className="nodata"> {/* <View className='instrument_item' >
<Image <View className='instrument_top flex sb aitems'>
className="nodata_img" <View className='time_box flex aitems'>
src={require("../../img/nodata.png")} <View className='time'>2024.1.23</View>
></Image> <View className={classnames("tag", {
<View className="nodata_text">暂无数据</View> tag_active: current === 1,
</View> })}
> 在线</View>
</View>
<View className='report_btn flex'>
<View>回看报告</View>
<Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
</View>
</View>
<View className='instrument_middle flex'>
<Image className='instrument_cover' src={require("../../img/test/1706667011027.jpg")}></Image>
<View className='instrument_content'>
<View className='instrument_title'>小子弹智能射频仪</View>
<View className='instrument_desc_box flex fc sb'>
<View className='instrument_desc'>模式：基础场景版</View>
<View className='instrument_desc'>护理时间：15分00秒</View>
</View>
</View>
</View>
</View> */}
{array.map((item: any, index: any) => (
<View className='recording-box' key={index}>
<View className='box-top'>
<View className='top-left'>
<View className='date'>2024.1.31</View>
<View className='tip'>在线</View>
</View>
<View className='top-right'>
回看报告
<Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
</View>
</View>
<View className='box-bottom'>
<Image
className='recording_img'
src={require("../../img/test/1706667011027.jpg")}
></Image>
<View className='bottom-right'>
<View className='title'>小紫单智能射频仪</View>
<View className='subtitle-box'>
<View className='subtitle'>模式：基础场景版</View>
<View className='subtitle'>护理时间：15分00秒</View>
</View>
</View>
</View>
</View>
))}
</View> </View>
)} )}
{current === 1 && ( {current === 1 && (
<View> <View >
<View className="nodata"> {/* <View className='nodata'>
<Image <Image
className="nodata_img" className='nodata_img'
src={require("../../img/nodata.png")} src={require("../../img/nodata.png")}
></Image> ></Image>
<View className="nodata_text">暂无数据</View> <View className='nodata_text'>暂无数据</View>
</View> */}
<View style='height: 30rpx; background: #F8F8F8'></View>
<View className='clock_in_statistics m-x-30 flex sb'>
<View className='flex sb ab'>
<View className='clock_in_statistics_title'>年度打卡统计</View>
<Picker mode='date' fields='year' onChange={this.onChangeYear} value='2024' end='{{today}}'>
<View className='clock_in_statistics_date flex aitems'>
<View>2024年</View>
<Image className='more_icon' src={require('../../img/arrow-down.png')} mode='widthFix'></Image>
</View>
</Picker>
</View>
<View className='chart flex sb'>
<View className='flex fc aitems' >
<View className='buoy' >5天</View>
<View className='column' style='height: calc(186/31*{{item.total}}rpx)'></View>
<View className='month'>1</View>
</View>
</View>
</View>
<View style='padding-bottom: env(safe-area-inset-bottom)' >
<View className='month_box m-x-30'>
<View className='month_statistics'>
<View className='flex aitems sb'>
<View className='time'>2024年1月</View>
<View data-item='{{item}}' data-index='{{index}}' className='more_box flex aitems' >
<View className='more_text'> 展开更多</View>
<Image style='transform: rotate({{ item.isMore ? 180 : 0 }}deg)' className='more_icon'
src={require("../../img/arrow-down.png")} mode='widthFix'
></Image>
</View>
</View>
<View style='height: 59rpx'></View>
<View className='statistic'>
<View className='statistic_item'>
<View className='statistic_num'>10</View>
<View className='statistic_desc'>本月打卡天数</View>
</View>
<View className='statistic_item'>
<View className='statistic_num'>80%</View>
<View className='statistic_desc'>超越花至用户</View>
</View>
<View className='border'></View>
</View>
<View style='height: 57rpx'></View>
<View className='month_item'>
<View className='month_item_date'>2024.5.23</View>
<View className='month_image_box flex sb'>
<Image className='month_item_cover' src={require("../../img/test/1706667011027.jpg")} ></Image>
</View>
<View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
<View className='month_item_note'>护理心得：真棒真棒真棒真棒真棒真棒真棒真棒真棒真棒</View>
</View>
</View>
</View>
</View> </View>
</View> </View>
)} )}

Write Preview
Loading…
Cancel
Save