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

修复样式问题

Browse Source
master
rongweikang 2 years ago
parent 07d684ff5f
commit 62d2afa966
2 changed files with 127 additions and 96 deletions
Show Stats Download Patch File Download Diff File

3
src/recoding/pages/recording/recording.less
Unescape Escape View File

@ -16,7 +16,6 @@ page {
color: #666; color: #666;
padding: 0 32rpx; padding: 0 32rpx;
position: sticky; position: sticky;
top: 174rpx;
z-index: 9; z-index: 9;
} }
@ -74,8 +73,6 @@ page {
background: #f8f8f8; background: #f8f8f8;
padding-top: 25rpx; padding-top: 25rpx;
padding-bottom: 29rpx; padding-bottom: 29rpx;
position: sticky;
top: 286rpx;
z-index: 9; z-index: 9;
} }

220
src/recoding/pages/recording/recording.tsx
Unescape Escape View File

@ -61,6 +61,8 @@ export default class Recording extends Component<any, any> {
clockImageList: [], clockImageList: [],
clockContent: "", clockContent: "",
}, },
navigationBarHeight: '',
statusBarHeight: ''
}; };
} }
@ -267,13 +269,16 @@ export default class Recording extends Component<any, any> {
this.getLatestClockRecord(); this.getLatestClockRecord();
this.getClockStatistics(); this.getClockStatistics();
this.DayTime(); this.DayTime();
this.setStatusBar();
} }
componentDidShow() { } componentDidShow() { }
componentDidHide() { } componentDidHide() { }
async initData() { } async initData() {
}
// 选择年份 // 选择年份
onChangeYear(event) { onChangeYear(event) {
this.setState({ year: event.detail.value }); this.setState({ year: event.detail.value });
@ -407,6 +412,25 @@ export default class Recording extends Component<any, any> {
delta: 1, delta: 1,
}); });
} }
setStatusBar() {
Taro.getSystemInfoAsync({
success: (res) => {
const statusBarHeight = res.statusBarHeight || 0;
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
const custom = Taro.getMenuButtonBoundingClientRect();
// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
const navigationBarHeight =
custom.height + (custom.top - statusBarHeight) * 2;
this.setState({
statusBarHeight,
navigationBarHeight,
});
},
});
}
render() { render() {
let { let {
current, current,
@ -424,12 +448,19 @@ export default class Recording extends Component<any, any> {
monthTime, monthTime,
show, show,
punchInInfo, punchInInfo,
navigationBarHeight,
statusBarHeight
} = this.state; } = this.state;
const statusBarHeightRpx = statusBarHeight * 2;
const navigationBarHeightRpx = navigationBarHeight * 2;
const height = statusBarHeightRpx + navigationBarHeightRpx
return ( return (
<Block> <Block>
<Navbar isBack titleSlot="护理记录"></Navbar> <Navbar isBack titleSlot='护理记录'></Navbar>
<View className="tabs"> <View className='tabs' style={{
top: height + "rpx", position: 'sticky'
}}
>
<View <View
className={classnames("tab", { className={classnames("tab", {
tab_active: current === 0, tab_active: current === 0,
@ -450,7 +481,10 @@ export default class Recording extends Component<any, any> {
</View> </View>
</View> </View>
{current === 0 && ( {current === 0 && (
<ScrollView className="products_list" scroll-x="true"> <ScrollView className='products_list' scroll-x='true' style={{
top: height + 110 + 'rpx', position: 'sticky'
}}
>
<View <View
className={classnames("all", { className={classnames("all", {
products_item_active: !curIndex, products_item_active: !curIndex,
@ -468,11 +502,11 @@ export default class Recording extends Component<any, any> {
onClick={this.onChangeProduct.bind(this, item.id)} onClick={this.onChangeProduct.bind(this, item.id)}
> >
<Image <Image
className="products_cover" className='products_cover'
src={item.logo} src={item.logo}
mode="aspectFill" mode='aspectFill'
></Image> ></Image>
<View className="products_title">{item.name}</View> <View className='products_title'>{item.name}</View>
</View> </View>
))} ))}
</ScrollView> </ScrollView>
@ -480,17 +514,17 @@ export default class Recording extends Component<any, any> {
{current === 0 && recordList.length === 0 && ( {current === 0 && recordList.length === 0 && (
<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>
</View> </View>
)} )}
{current === 0 && ( {current === 0 && (
<View style="padding-bottom:200px"> <View style='padding-bottom:200px'>
{/* <View className='instrument_item' > {/* <View className='instrument_item' >
<View className='instrument_top flex sb aitems'> <View className='instrument_top flex sb aitems'>
<View className='time_box flex aitems'> <View className='time_box flex aitems'>
@ -517,12 +551,12 @@ export default class Recording extends Component<any, any> {
</View> </View>
</View> */} </View> */}
<View className="instrument_list "> <View className='instrument_list '>
{recordList.map((item: any, index: any) => ( {recordList.map((item: any, index: any) => (
<View className="recording-box" key={item.id}> <View className='recording-box' key={item.id}>
<View className="box-top"> <View className='box-top'>
<View className="top-left"> <View className='top-left'>
<View className="date">{item.createTime}</View> <View className='date'>{item.createTime}</View>
<View <View
className={classnames("tip", { className={classnames("tip", {
tag_active: item.online === 2, tag_active: item.online === 2,
@ -533,7 +567,7 @@ export default class Recording extends Component<any, any> {
</View> </View>
{item.instrumentType === 2 && ( {item.instrumentType === 2 && (
<View <View
className="top-right" className='top-right'
onClick={this.toReport.bind( onClick={this.toReport.bind(
this, this,
item.instrumentId, item.instrumentId,
@ -543,23 +577,23 @@ export default class Recording extends Component<any, any> {
> >
回看报告 回看报告
<Image <Image
className="arrow_icon" className='arrow_icon'
src={require("@/img/index/right.png")} src={require("@/img/index/right.png")}
mode="aspectFill" mode='aspectFill'
></Image> ></Image>
</View> </View>
)} )}
</View> </View>
<View className="box-bottom"> <View className='box-bottom'>
<Image <Image
className="recording_img" className='recording_img'
src={item.modeImage} src={item.modeImage}
></Image> ></Image>
<View className="bottom-right"> <View className='bottom-right'>
<View className="title">{item.instrumentName}</View> <View className='title'>{item.instrumentName}</View>
<View className="subtitle-box"> <View className='subtitle-box'>
<View className="subtitle">模式：{item.modeName}</View> <View className='subtitle'>模式：{item.modeName}</View>
<View className="subtitle"> <View className='subtitle'>
护理时间：{item.nursingTime} 护理时间：{item.nursingTime}
</View> </View>
</View> </View>
@ -571,7 +605,7 @@ export default class Recording extends Component<any, any> {
</View> </View>
)} )}
{current === 1 && ( {current === 1 && (
<View style="padding-bottom:200px"> <View style='padding-bottom:200px'>
{/* <View className='nodata'> {/* <View className='nodata'>
<Image <Image
className='nodata_img' className='nodata_img'
@ -579,52 +613,52 @@ export default class Recording extends Component<any, any> {
></Image> ></Image>
<View className='nodata_text'>暂无数据</View> <View className='nodata_text'>暂无数据</View>
</View> */} </View> */}
<View style="height: 30rpx; background: #F8F8F8"></View> <View style='height: 30rpx; background: #F8F8F8'></View>
<View className="clock_in_statistics m-x-30 flex sb"> <View className='clock_in_statistics m-x-30 flex sb'>
<View className="flex sb ab"> <View className='flex sb ab'>
<View className="clock_in_statistics_title">年度打卡统计</View> <View className='clock_in_statistics_title'>年度打卡统计</View>
<Picker <Picker
mode="date" mode='date'
fields="year" fields='year'
onChange={this.onChangeYear.bind(this)} onChange={this.onChangeYear.bind(this)}
value="{{year}}" value='{{year}}'
end="{{today}}" end='{{today}}'
> >
<View className="clock_in_statistics_date flex aitems"> <View className='clock_in_statistics_date flex aitems'>
<View>{year}年</View> <View>{year}年</View>
<Image <Image
className="more_icon" className='more_icon'
src={require("@/img/arrow-down.png")} src={require("@/img/arrow-down.png")}
mode="widthFix" mode='widthFix'
></Image> ></Image>
</View> </View>
</Picker> </Picker>
</View> </View>
<View className="chart flex sb"> <View className='chart flex sb'>
{monthTime.map((item) => ( {monthTime.map((item) => (
<View className="flex fc aitems" key={item.month}> <View className='flex fc aitems' key={item.month}>
{item.time > 0 && ( {item.time > 0 && (
<View className="buoy">{item.time}天</View> <View className='buoy'>{item.time}天</View>
)} )}
<View <View
className="column" className='column'
style={{ height: `calc(186/31*${item.time}rpx)` }} style={{ height: `calc(186/31*${item.time}rpx)` }}
></View> ></View>
<View className="month">{item.month}</View> <View className='month'>{item.month}</View>
</View> </View>
))} ))}
</View> </View>
</View> </View>
<View style="padding-bottom: env(safe-area-inset-bottom)"> <View style='padding-bottom: env(safe-area-inset-bottom)'>
<View className="month_box m-x-30"> <View className='month_box m-x-30'>
{clockStatistics.map((item) => ( {clockStatistics.map((item) => (
<View className="month_statistics" key={item.id}> <View className='month_statistics' key={item.id}>
<View className="flex aitems sb"> <View className='flex aitems sb'>
<View className="time"> <View className='time'>
{item.year}年{item.month}月 {item.year}年{item.month}月
</View> </View>
<View <View
className="more_box flex aitems" className='more_box flex aitems'
onClick={this.onChangeMore.bind( onClick={this.onChangeMore.bind(
this, this,
item.id, item.id,
@ -632,7 +666,7 @@ export default class Recording extends Component<any, any> {
item.month item.month
)} )}
> >
<View className="more_text"> <View className='more_text'>
{" "} {" "}
{!item.isMore ? "展开更多" : "收起更多"} {!item.isMore ? "展开更多" : "收起更多"}
</View> </View>
@ -642,51 +676,51 @@ export default class Recording extends Component<any, any> {
? "rotate(180deg)" ? "rotate(180deg)"
: "rotate(0deg)", : "rotate(0deg)",
}} }}
className="more_icon" className='more_icon'
src={require("@/img/arrow-down.png")} src={require("@/img/arrow-down.png")}
mode="widthFix" mode='widthFix'
></Image> ></Image>
</View> </View>
</View> </View>
<View style="height: 59rpx"></View> <View style='height: 59rpx'></View>
<View className="statistic"> <View className='statistic'>
<View className="statistic_item"> <View className='statistic_item'>
<View className="statistic_num">{item.clockNum}</View> <View className='statistic_num'>{item.clockNum}</View>
<View className="statistic_desc">本月打卡天数</View> <View className='statistic_desc'>本月打卡天数</View>
</View> </View>
<View className="statistic_item"> <View className='statistic_item'>
<View className="statistic_num"> <View className='statistic_num'>
{(item.percentage * 100).toFixed(2)}% {(item.percentage * 100).toFixed(2)}%
</View> </View>
<View className="statistic_desc">超越花至用户</View> <View className='statistic_desc'>超越花至用户</View>
</View> </View>
<View className="border"></View> <View className='border'></View>
</View> </View>
{item.isMore && item.detail && ( {item.isMore && item.detail && (
<View> <View>
{item.detail.map((obj) => ( {item.detail.map((obj) => (
<View key={obj.id}> <View key={obj.id}>
<View style="height: 57rpx"></View> <View style='height: 57rpx'></View>
<View className="month_item"> <View className='month_item'>
<View className="month_item_date"> <View className='month_item_date'>
{obj.updateTime} {obj.updateTime}
</View> </View>
<View className="month_image_box flex sb"> <View className='month_image_box flex sb'>
{obj.clockImg.map((img) => ( {obj.clockImg.map((img) => (
<Image <Image
key={img} key={img}
className="month_item_cover" className='month_item_cover'
src={img} src={img}
></Image> ></Image>
))} ))}
</View> </View>
<View className="month_item_date"> <View className='month_item_date'>
{/* 小紫弹智能射频仪、花至抗老射频仪PRO{" "} */} {/* 小紫弹智能射频仪、花至抗老射频仪PRO{" "} */}
{obj.instrumentName === null {obj.instrumentName === null
? "" ? ""
: obj.instrumentName} : obj.instrumentName}
</View> </View>
<View className="month_item_note"> <View className='month_item_note'>
{obj.clockContent} {obj.clockContent}
</View> </View>
</View> </View>
@ -701,8 +735,8 @@ export default class Recording extends Component<any, any> {
</View> </View>
)} )}
{!clockShow && ViewAddInstrument === "true" && ( {!clockShow && ViewAddInstrument === "true" && (
<View className="footer flex aitems"> <View className='footer flex aitems'>
<View className="btn" onClick={this.setShow.bind(this, true)}> <View className='btn' onClick={this.setShow.bind(this, true)}>
前往打卡 前往打卡
</View> </View>
{/* <View className="text" onClick={this.back}> {/* <View className="text" onClick={this.back}>
@ -712,64 +746,64 @@ export default class Recording extends Component<any, any> {
)} )}
<Popup show={show} onClose={() => this.setState({ show: false })}> <Popup show={show} onClose={() => this.setState({ show: false })}>
<View className="popBox"> <View className='popBox'>
<Image <Image
className="close_icon" className='close_icon'
src={require("@/img/close.png")} src={require("@/img/close.png")}
mode="widthFix" mode='widthFix'
onClick={this.setShow.bind(this, false)} onClick={this.setShow.bind(this, false)}
></Image> ></Image>
<View className="popTitle">今日打卡</View> <View className='popTitle'>今日打卡</View>
<View className="popSubtitle"> <View className='popSubtitle'>
本月您已打卡 本月您已打卡
<View className="bold">{clockStatistics[0]?.clockNum}</View>{" "} <View className='bold'>{clockStatistics[0]?.clockNum}</View>{" "}
天，超越 天，超越
<View className="bold"> <View className='bold'>
{(clockStatistics[0]?.percentage * 100).toFixed(1)}% {(clockStatistics[0]?.percentage * 100).toFixed(1)}%
</View> </View>
花至用户 花至用户
</View> </View>
<View className="img_box"> <View className='img_box'>
{punchInInfo.clockImageList.map((item, index) => ( {punchInInfo.clockImageList.map((item, index) => (
<View key={item} className="img"> <View key={item} className='img'>
<Image className="showImg" src={item} mode="widthFix"></Image> <Image className='showImg' src={item} mode='widthFix'></Image>
<Image <Image
className="closeImg" className='closeImg'
src={require("@/img/close1.png")} src={require("@/img/close1.png")}
mode="widthFix" mode='widthFix'
onClick={this.delImg.bind(this, index)} onClick={this.delImg.bind(this, index)}
></Image> ></Image>
</View> </View>
))} ))}
{punchInInfo.clockImageList.length < 3 && ( {punchInInfo.clockImageList.length < 3 && (
<View <View
className="addBox" className='addBox'
onClick={this.handleChooseImage.bind(this)} onClick={this.handleChooseImage.bind(this)}
> >
<Image <Image
className="showImg" className='showImg'
src={require("@/img/clock_in_upload/add-image.png")} src={require("@/img/clock_in_upload/add-image.png")}
mode="widthFix" mode='widthFix'
></Image> ></Image>
</View> </View>
)} )}
</View> </View>
<View className="info4"> <View className='info4'>
<View className="content"> <View className='content'>
<Textarea <Textarea
placeholderStyle="color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;" placeholderStyle='color: #ccc; font-size: 26rpx;font-weight: 400;font-family: PingFang SC;'
placeholder="请记录一下今天的护理心得吧" placeholder='请记录一下今天的护理心得吧'
maxlength={120} maxlength={120}
onInput={this.handleTextareaInput.bind(this)} onInput={this.handleTextareaInput.bind(this)}
value={punchInInfo.clockContent} value={punchInInfo.clockContent}
></Textarea> ></Textarea>
</View> </View>
<View className="tip"> <View className='tip'>
{"（" + (punchInInfo.clockContent.length || 0) + "/120）"} {"（" + (punchInInfo.clockContent.length || 0) + "/120）"}
</View> </View>
</View> </View>
<View className="popbtnbox flex aitems jcenter"> <View className='popbtnbox flex aitems jcenter'>
<View className="btn1" onClick={this.submit.bind(this)}> <View className='btn1' onClick={this.submit.bind(this)}>
确认提交 确认提交
</View> </View>
</View> </View>

Write Preview
Loading…
Cancel
Save