choose_actions.tsx 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. import { View, Image } from '@tarojs/components'
  2. import './choose_actions.scss'
  3. import { IconClose } from '@/components/basic/Icons'
  4. import { rpxToPx } from '@/utils/tools'
  5. import NewButton, { NewButtonType } from '@/_health/base/new_button'
  6. import Taro from '@tarojs/taro'
  7. import { BASE_IMG_URL, baseUrl } from '@/services/http/api'
  8. import { useTranslation } from 'react-i18next'
  9. import { jumpPage } from '@/features/trackTimeDuration/hooks/Common'
  10. import { MainColorType } from '@/context/themes/color'
  11. import { useEffect } from 'node_modules/@types/react'
  12. export default function ChooseActions(props: { close: any, quick: any, chooseText: any, chooseImg: any }) {
  13. const { t } = useTranslation()
  14. function camera() {
  15. addImage(true)
  16. }
  17. function album() {
  18. addImage(false)
  19. }
  20. function chat() {
  21. Taro.chooseMessageFile({
  22. count: 9,
  23. type: 'image',
  24. success: async function (res) {
  25. const results = await Promise.all(res.tempFiles.map(getImageInfo));
  26. chooseSuccess(results, true)
  27. },
  28. fail(res) {
  29. },
  30. })
  31. }
  32. function text() {
  33. props.close()
  34. props.chooseText()
  35. // jumpPage(`/_record/pages/log_record?scenario=${props.scenario}&only_text=1`)
  36. }
  37. function checkin() {
  38. props.close()
  39. props.quick()
  40. // jumpPage(`/_record/pages/log_record?scenario=${props.scenario}&check_in=1`)
  41. }
  42. function addImage(isCamera) {
  43. var source: any = isCamera ? ['camera'] : ['album']
  44. console.log(source)
  45. Taro.chooseMedia({
  46. count: 9,
  47. sizeType: ['compressed'],
  48. mediaType: ['image'],
  49. sourceType: source,
  50. success: async function (res) {
  51. const results = await Promise.all(res.tempFiles.map(getImageInfo));
  52. chooseSuccess(results, true)
  53. },
  54. fail: function (res) {
  55. }
  56. })
  57. }
  58. async function chooseSuccess(res, isAlbum) {
  59. console.log('选择图片', res)
  60. // const filePaths = res.map(file => file.path
  61. // // process.env.TARO_ENV === 'rn' || isFilePath ? file.path : file.tempFilePath
  62. // )
  63. Taro.showLoading({
  64. title: t('health.uploading')
  65. })
  66. try {
  67. const uploadedUrls = await Promise.all(res.map(path => uploadFile2(path, isAlbum ? 'album' : 'camera')))
  68. // setPics([...pics, ...uploadedUrls])
  69. // jumpPage(`/_record/pages/log_record?imgs=${JSON.stringify(uploadedUrls)}&scenario=${props.scenario}`)
  70. props.chooseImg(uploadedUrls)
  71. props.close()
  72. Taro.hideLoading()
  73. } catch (error) {
  74. console.error('Error uploading files:', error)
  75. Taro.hideLoading()
  76. }
  77. }
  78. function uploadFile2(obj: any, source: string): Promise<string> {
  79. return new Promise((resolve, reject) => {
  80. var path = obj.path
  81. const dot = path.lastIndexOf('.')
  82. const fileExt = dot > 0 ? path.substring(dot) : ''
  83. Taro.request({
  84. method: 'GET',
  85. url: `${baseUrl}/api/thirdparty/aliyun/oss-form-upload`,
  86. header: {
  87. 'Authorization': 'bearer ' + global.token
  88. },
  89. data: {
  90. type: 'FOOD_JOURNAL',
  91. file_ext: fileExt
  92. },
  93. success: (rsp) => {
  94. if (rsp.statusCode !== 200) {
  95. reject(new Error(t('health.networkError')))
  96. return
  97. }
  98. Taro.uploadFile({
  99. url: rsp.data.upload_url,
  100. filePath: path,
  101. name: 'file',
  102. formData: rsp.data.fields,
  103. success: () => {
  104. var temp = JSON.parse(JSON.stringify(obj))
  105. temp.url = rsp.data.view_url
  106. // resolve(rsp.data.view_url)
  107. resolve(temp)
  108. },
  109. fail: (error) => {
  110. reject(error)
  111. }
  112. })
  113. },
  114. fail: reject
  115. })
  116. })
  117. }
  118. const getImageInfo = (src) => {
  119. const { tempFilePath, path } = src
  120. return new Promise((resolve) => {
  121. Taro.getImageInfo({
  122. src: tempFilePath ? tempFilePath : path,
  123. success: (result) => resolve({
  124. height: result.height,
  125. width: result.width,
  126. orientation: result.orientation,
  127. path: result.path,
  128. type: result.type
  129. }),
  130. fail: (error) => resolve({
  131. height: 1024,
  132. width: 1024,
  133. orientation: 'up',
  134. path: tempFilePath,
  135. type: 'unknown'
  136. }),
  137. });
  138. });
  139. };
  140. return <View className="actions_bg" catchMove onClick={props.close}>
  141. <NewButton type={NewButtonType.img} onClick={album}>
  142. <View className='action_btn h30 bold cardShowAni'>Add Photos
  143. <Image className='action_btn_img' src={BASE_IMG_URL + 'image.svg'} />
  144. </View>
  145. </NewButton>
  146. <NewButton type={NewButtonType.img} onClick={text}>
  147. <View className='action_btn h30 bold cardShowAni'>Add Text
  148. <Image className='action_btn_img' src={BASE_IMG_URL + 'text.svg'} />
  149. </View>
  150. </NewButton>
  151. <NewButton type={NewButtonType.img} onClick={camera}>
  152. <View className='action_btn h30 bold cardShowAni'>Camera
  153. <Image className='action_btn_img' src={BASE_IMG_URL + 'camera.svg'} />
  154. </View>
  155. </NewButton>
  156. <NewButton type={NewButtonType.img} onClick={chat}>
  157. <View className='action_btn h30 bold cardShowAni'>Import from Chats
  158. <Image className='action_btn_img' src={BASE_IMG_URL + 'wechat.svg'} />
  159. </View>
  160. </NewButton>
  161. <View className='cardShowAni' style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: rpxToPx(64), marginTop: rpxToPx(26) }}>
  162. <View className='or_line'/>
  163. <View className='white h30 bold' style={{marginLeft:rpxToPx(24),marginRight:rpxToPx(24)}}>OR</View>
  164. <View className='or_line'/>
  165. </View>
  166. <NewButton type={NewButtonType.img} onClick={checkin}>
  167. <View className='action_btn h30 bold cardShowAni'>Quick Check in</View>
  168. </NewButton>
  169. <View className='btnAni' style={{ marginBottom: rpxToPx(84), marginTop: rpxToPx(60) }} onClick={props.close}>
  170. <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
  171. </View>
  172. </View>
  173. }