|
|
@@ -1,5 +1,5 @@
|
|
|
-import { View, Text, Textarea, Image, Input } from "@tarojs/components";
|
|
|
-import Taro, { useRouter } from "@tarojs/taro";
|
|
|
+import { View, Text, Textarea, Image, Input, ScrollView } from "@tarojs/components";
|
|
|
+import Taro, { useLoad, useRouter, useUnload } from "@tarojs/taro";
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
import './add_moment.scss'
|
|
|
import { useEffect, useState } from "react";
|
|
|
@@ -22,6 +22,8 @@ import AddLabel from "../components/add_label";
|
|
|
import showAlert from "@/components/basic/Alert";
|
|
|
import NewButton, { NewButtonType } from "../base/new_button";
|
|
|
import { rpxToPx } from "@/utils/tools";
|
|
|
+import StatusIndicator, { StatusType } from "../base/status_indicator";
|
|
|
+import { IconCheck } from "@/components/basic/Icons";
|
|
|
|
|
|
|
|
|
let useRoute;
|
|
|
@@ -46,6 +48,7 @@ export default function AddMoment() {
|
|
|
const [showTitlePicker, setShowTitlePicker] = useState(false)
|
|
|
const [isYesterday, setIsYesterday] = useState(false)
|
|
|
const [labels, setLabels] = useState<any>([])
|
|
|
+ const [bottom, setBottom] = useState(-120)
|
|
|
|
|
|
|
|
|
|
|
|
@@ -73,15 +76,42 @@ export default function AddMoment() {
|
|
|
useEffect(() => {
|
|
|
global.set_time = new Date().getTime()
|
|
|
|
|
|
+ // Taro.onKeyboardHeightChange(res => {
|
|
|
+ // setBottom(res.height > 0 ? res.height : -120)
|
|
|
+ // })
|
|
|
+
|
|
|
|
|
|
getLabelsEvent({ window: health.mode, use: is_temp ? 'ONE_RECORD' : '' }).then(res => {
|
|
|
setLabels((res as any).labels)
|
|
|
if (is_temp && title == '') {
|
|
|
- setShowTitlePicker(true)
|
|
|
+ // setShowTitlePicker(true)
|
|
|
}
|
|
|
})
|
|
|
}, [])
|
|
|
|
|
|
+ useLoad(()=>{
|
|
|
+ Taro.enableAlertBeforeUnload({
|
|
|
+ message:'hhh',
|
|
|
+ success(res) {
|
|
|
+
|
|
|
+ },
|
|
|
+ fail(res) {
|
|
|
+
|
|
|
+ },
|
|
|
+ complete(res) {
|
|
|
+
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ useUnload(()=>{
|
|
|
+ Taro.disableAlertBeforeUnload({
|
|
|
+
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
function duration() {
|
|
|
const seconds = durationT / 1000
|
|
|
var hours = Math.floor(seconds / 3600)
|
|
|
@@ -105,12 +135,12 @@ export default function AddMoment() {
|
|
|
setDurationPicker(true)
|
|
|
}
|
|
|
|
|
|
- function addImage() {
|
|
|
+ function addImage(isCamera) {
|
|
|
Taro.chooseMedia({
|
|
|
count: 1,
|
|
|
sizeType: ['compressed'],
|
|
|
mediaType: ['image'],
|
|
|
- sourceType: ['album'],
|
|
|
+ sourceType: [isCamera?'camera':'album'],
|
|
|
success: function (res) {
|
|
|
chooseSuccess(res, true)
|
|
|
checkAuthorized()
|
|
|
@@ -340,44 +370,65 @@ export default function AddMoment() {
|
|
|
<View style={{
|
|
|
display: 'flex',
|
|
|
backgroundColor: '#fff',
|
|
|
- padding: rpxToPx(40),
|
|
|
+ // padding: rpxToPx(40),
|
|
|
flexDirection: 'column',
|
|
|
height: rpxToPx(550),
|
|
|
width: rpxToPx(750),
|
|
|
boxSizing: 'border-box'
|
|
|
|
|
|
}}>
|
|
|
- <View className="addmoment_header">
|
|
|
- <Text onClick={() => {
|
|
|
- setShowTimePicker(true)
|
|
|
- }} style={{ marginRight: rpxToPx(24), color: '#5C7099' }}>{getDate()}{time}</Text>
|
|
|
- <Text
|
|
|
- onClick={() => {
|
|
|
- setShowTitlePicker(true)
|
|
|
- }}
|
|
|
- style={{ marginRight: 20, color: '#5C7099' }}>{title}</Text>
|
|
|
+ <View className="addmoment_header" onClick={() => {
|
|
|
+ setShowTimePicker(true)
|
|
|
+ }}>
|
|
|
+ <StatusIndicator type={StatusType.big}
|
|
|
+ color={getThemeColor(health.mode)}
|
|
|
+ fontSize={rpxToPx(30)}
|
|
|
+ fontColor={getThemeColor(health.mode)}
|
|
|
+ text={getDate() + time}>
|
|
|
+ <IconCheck color="#fff" width={rpxToPx(24)} height={24} />
|
|
|
+ </StatusIndicator>
|
|
|
+ <View className="h22" style={{ color: MainColorType.link, marginTop: rpxToPx(8) }}>编辑打卡</View>
|
|
|
+
|
|
|
</View>
|
|
|
|
|
|
+ <Input className="meal_name" value={title}
|
|
|
+ placeholder={health.mode == 'EAT' ? 'Meal Name' : 'Active Name'}
|
|
|
+ style={{ caretColor: getThemeColor(health.mode) }}
|
|
|
+ // cursorColor='#ff0000'
|
|
|
+ // onFocus={() => {
|
|
|
+ // setTitleFocus(true)
|
|
|
+ // }}
|
|
|
+ // onBlur={() => {
|
|
|
+ // setTitleFocus(false)
|
|
|
+ // }}
|
|
|
+ onInput={(e: any) => {
|
|
|
+ setTitle(e.target.value)
|
|
|
+ }}
|
|
|
+ onKeyboardHeightChange={(e) => {
|
|
|
+ setBottom(e.detail.height > 0 ? e.detail.height : -120)
|
|
|
+ }}
|
|
|
+
|
|
|
+ />
|
|
|
+
|
|
|
+ <Textarea placeholder="简单描述(选填)" className="textarea"
|
|
|
+ placeholder-style="color:#B2B2B2"
|
|
|
+ onInput={e => {
|
|
|
+ setDesc(e.detail.value)
|
|
|
+ }} />
|
|
|
+
|
|
|
<View className="form">
|
|
|
- <View>
|
|
|
- {
|
|
|
- (health.mode == 'FAST' || health.mode == 'SLEEP') &&
|
|
|
- <Input className="input_title" placeholder="标题文字" onInput={(e: any) => {
|
|
|
- setTitle(e.target.value)
|
|
|
- }} />
|
|
|
- }
|
|
|
- <Textarea placeholder="简单描述(选填)" className="textarea"
|
|
|
- placeholder-style="color:#B2B2B2"
|
|
|
- onInput={e => {
|
|
|
- setDesc(e.detail.value)
|
|
|
- }} />
|
|
|
- </View>
|
|
|
{
|
|
|
- imgUrl.length > 0 ? <View className="cover" ><NewButton type={NewButtonType.img} onClick={addImage}><Image src={imgUrl} mode="aspectFill" className="cover" onClick={addImage} /></NewButton></View> :
|
|
|
- <View className="cover" ><NewButton type={NewButtonType.img} onClick={addImage}><View className="cover" >
|
|
|
- <Image src={require('@assets/images/add3.png')} style={{ width: 24, height: 24 }} />
|
|
|
+ imgUrl.length > 0 && <View className="cover" ><NewButton type={NewButtonType.img} onClick={()=>addImage(false)}><Image src={imgUrl} mode="aspectFill" className="cover" onClick={addImage} /></NewButton></View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ imgUrl.length == 0 && <View style={{ display: 'flex', flexDirection: 'row' }}>
|
|
|
+ <View className="cover" ><NewButton type={NewButtonType.img} onClick={()=>addImage(false)}><View className="cover" >
|
|
|
+ <Image src={require('@assets/_health/album.png')} style={{ width: 40, height: 40 }} />
|
|
|
</View></NewButton></View>
|
|
|
-
|
|
|
+ <View className="cover" style={{marginLeft:rpxToPx(40)}}><NewButton type={NewButtonType.img} onClick={()=>addImage(true)}><View className="cover" >
|
|
|
+ <Image src={require('@assets/_health/camera.png')} style={{ width: 40, height: 40 }} />
|
|
|
+ </View></NewButton></View>
|
|
|
+ </View>
|
|
|
}
|
|
|
|
|
|
</View>
|
|
|
@@ -417,7 +468,7 @@ export default function AddMoment() {
|
|
|
setShowTimePicker(false)
|
|
|
}} />
|
|
|
}
|
|
|
- {
|
|
|
+ {/* {
|
|
|
showTitlePicker && <Modal testInfo={null}
|
|
|
catchDismiss={true}
|
|
|
dismiss={() => {
|
|
|
@@ -443,7 +494,7 @@ export default function AddMoment() {
|
|
|
// setShowTitlePicker(false)
|
|
|
}} />
|
|
|
</Modal>
|
|
|
- }
|
|
|
+ } */}
|
|
|
|
|
|
{/* {
|
|
|
durationPicker && <DurationPicker
|
|
|
@@ -462,5 +513,21 @@ export default function AddMoment() {
|
|
|
|
|
|
}
|
|
|
{/* <Text> add eat detail</Text> */}
|
|
|
+ {
|
|
|
+ <View className="tag_list" style={{ bottom: bottom }}>
|
|
|
+ <ScrollView style={{ width: rpxToPx(750), flexDirection: 'row', display: 'flex', height: rpxToPx(108) }} scrollX enableFlex showScrollbar={false}>
|
|
|
+ <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
|
|
|
+ {
|
|
|
+ labels.map((item, index) => {
|
|
|
+ return <View className="add_page_tag_btn" key={index} onClick={() => {
|
|
|
+ setTitle(item.title)
|
|
|
+ }}>{item.title}</View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ <View style={{ width: rpxToPx(40), flexShrink: 0 }} />
|
|
|
+ </ScrollView>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
</View>
|
|
|
}
|