update

src/_health/components/cover_list.tsx

@@ -3,18 +3,19 @@ import Taro from "@tarojs/taro";
 import './cover_list.scss'
 
 export default function CoverList(props: { imgs: any, count: number }) {
+    const scale = '?x-oss-process=image/format,webp/resize,w_400'
     return <View className="media" style={{ marginRight: props.count == 4 ? 80 : 0 }}>
         {
             props.imgs.map((obj, j) => {
-                return <Image className="media_item" mode="aspectFill" onClick={(e) => {
-                    if (process.env.TARO_ENV=='weapp'){
+                return <Image className="media_item gray_bg" mode="aspectFill" onClick={(e) => {
+                    if (process.env.TARO_ENV == 'weapp') {
                         e.stopPropagation()
                     }
                     Taro.previewImage({
                         current: obj,
                         urls: props.imgs
                     })
-                }} src={obj} key={j * 10} />
+                }} src={obj + scale} key={j * 10} />
             })
         }
     </View>

src/_health/components/single_img.tsx

@@ -7,6 +7,7 @@ export default function SingleImage(props: { url: string }) {
     const [loaded, setLoaded] = useState(false)
     const [width, setWidth] = useState(346)
     const [height, setHeight] = useState(346)
+    const scale = '?x-oss-process=image/format,webp'
     const kMax = 346
     // const 
     //346
@@ -34,7 +35,7 @@ export default function SingleImage(props: { url: string }) {
         })
     }, [])
     if (!loaded) return <View />
-    return <Image src={props.url}
+    return <Image src={props.url+scale}
         onClick={(e) => {
             if (process.env.TARO_ENV == 'weapp') {
                 e.stopPropagation()
@@ -44,6 +45,7 @@ export default function SingleImage(props: { url: string }) {
                 urls: [props.url]
             })
         }}
+        className="gray_bg"
         style={{
             width: rpxToPx(width),
             height: rpxToPx(height),

src/_health/pages/add_moment.scss

@@ -42,16 +42,39 @@
 }
 
 .cover{
-    width: 128px;
-    height: 128px;
+    width: 155px;
+    height: 155px;
     background-color: #F5F5F5;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 16px;
+    border-radius: 0px;
     overflow: hidden;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.cover_del{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 52px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cover_del_btn{
+    width: 28px;
+    height: 28px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #66666680;
+    flex-shrink: 0;
 }
 
 .input_title{

src/_health/pages/add_moment.tsx

@@ -22,7 +22,7 @@ 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";
+import { IconCheck, IconClose } from "@/components/basic/Icons";
 import showActionSheet from "@/components/basic/ActionSheet";
 import { TimeFormatter } from "@/utils/time_format";
 
@@ -54,6 +54,9 @@ export default function AddMoment() {
     const [titleFocus, setTitleFocus] = useState(false)
     const [posting, setPosting] = useState(false)
 
+    // const scale = '?x-oss-process=image/resize,webp,w_200,limit_0'
+    const scale = '?x-oss-process=image/format,webp/resize,w_400'
+
 
     let router
     let navigation;
@@ -96,7 +99,12 @@ export default function AddMoment() {
             setTime(dayjs(timeObj.timestamp).format('HH:mm'))
             setSelDate(dayjs(timeObj.timestamp).format('YYYY-MM-DD'))
             if (moment.media.length > 0) {
-                setImgUrl(moment.media[0].url)
+                // setImgUrl(moment.media[0].url)
+                var urls: any = []
+                moment.media.map((item) => {
+                    urls.push(item.url)
+                })
+                setPics(urls)
             }
         }
         else {
@@ -129,7 +137,7 @@ export default function AddMoment() {
         var source: any = isCamera ? ['camera'] : ['album']
         console.log(source)
         Taro.chooseMedia({
-            count: 9-pics.length,
+            count: 9 - pics.length,
             sizeType: ['compressed'],
             mediaType: ['image'],
             sourceType: source,
@@ -167,12 +175,12 @@ export default function AddMoment() {
             }
         }
 
-        if (pics.length>0){
-            var picList:any = []
-            pics.map((item)=>{
+        if (pics.length > 0) {
+            var picList: any = []
+            pics.map((item) => {
                 picList.push({
-                    url:item,
-                    type:item.indexOf('mp4') != -1 ? 'video' : 'image',
+                    url: item,
+                    type: item.indexOf('mp4') != -1 ? 'video' : 'image',
                     source: 'album'
                 })
             })
@@ -256,12 +264,26 @@ export default function AddMoment() {
         }
 
 
-        if (imgUrl.length > 0) {
-            params.media = [{
-                url: imgUrl,
-                type: imgUrl.indexOf('mp4') != -1 ? 'video' : 'image',
-                source: 'album'
-            }]
+        // if (imgUrl.length > 0) {
+        //     params.media = [{
+        //         url: imgUrl,
+        //         type: imgUrl.indexOf('mp4') != -1 ? 'video' : 'image',
+        //         source: 'album'
+        //     }]
+        // }
+        if (pics.length > 0) {
+            var picList: any = []
+            pics.map((item) => {
+                picList.push({
+                    url: item,
+                    type: item.indexOf('mp4') != -1 ? 'video' : 'image',
+                    source: 'album'
+                })
+            })
+            params.media = picList
+        }
+        else {
+            params.media = []
         }
         if (event_id && event_id != 'undefined') {
             params.event_id = event_id
@@ -301,14 +323,19 @@ export default function AddMoment() {
         })
     }
 
-    async function chooseSuccess(res, isAlbum) {
+    async function chooseSuccess(res, isAlbum, isFilePath = false) {
+        console.log('选择图片',res)
         const filePaths = res.tempFiles.map(file =>
-            process.env.TARO_ENV === 'rn' ? file.path : file.tempFilePath
+            process.env.TARO_ENV === 'rn' || isFilePath ? file.path : file.tempFilePath
         )
+        Taro.showLoading({
+            title: t('health.uploading')
+        })
 
         try {
             const uploadedUrls = await Promise.all(filePaths.map(path => uploadFile2(path, isAlbum ? 'album' : 'camera')))
-            setPics([...pics,...uploadedUrls])
+            console.log(uploadedUrls)
+            setPics([...pics, ...uploadedUrls])
             Taro.hideLoading()
         } catch (error) {
             console.error('Error uploading files:', error)
@@ -362,7 +389,6 @@ export default function AddMoment() {
         }
 
         saveFoodCache('create', params)
-        debugger
 
         var savedFilePath = process.env.TARO_ENV == 'rn' ? res.tempFiles[0].path : res.tempFiles[0].tempFilePath
 
@@ -373,7 +399,7 @@ export default function AddMoment() {
 
     function uploadFile(path, source) {
         Taro.showLoading({
-            title: t('health.loading')
+            title: t('health.uploading')
         })
         var dot = path.lastIndexOf('.')
         var fileExt = dot > 0 ? path.substring(dot) : ''
@@ -477,9 +503,10 @@ export default function AddMoment() {
     }
 
     function tapPic() {
+        //, t('health.delete')
         showActionSheet({
             title: '',
-            itemList: [t('health.choose_photo'), t('health.import_wechat'), t('health.camera'), t('health.delete')],
+            itemList: [t('health.choose_photo'), t('health.import_wechat'), t('health.camera')],
             success: function (res) {
                 switch (res) {
                     case 0:
@@ -487,13 +514,12 @@ export default function AddMoment() {
                         break;
                     case 1:
                         Taro.chooseMessageFile({
-                            count:9-pics.length,
-                            type:'image',
+                            count: 9 - pics.length,
+                            type: 'image',
                             success: function (res) {
-                                chooseSuccess(res, true)
+                                chooseSuccess(res, true, true)
                             },
                             fail(res) {
-                                console.log(res)
                             },
                         })
                         break;
@@ -515,7 +541,7 @@ export default function AddMoment() {
             backgroundColor: '#fff',
             // padding: rpxToPx(40),
             flexDirection: 'column',
-            height: rpxToPx(642),
+            minHeight: rpxToPx(642),
             width: rpxToPx(750),
             boxSizing: 'border-box'
 
@@ -590,16 +616,38 @@ export default function AddMoment() {
             <View className="form">
                 {
                     pics.map((item, index) => {
-                        return <Image src={item} mode="aspectFill" className="cover" key={index} onClick={()=>{
-                            Taro.previewImage({
-                                current:item,
-                                urls:pics
-                            })
-                        }}/>
+                        return <View className="cover" key={index}>
+                            <Image src={item + scale} mode="aspectFill" className="cover" style={{
+                                margin: 0
+                            }} key={index} onClick={() => {
+                                Taro.previewImage({
+                                    current: item,
+                                    urls: pics
+                                })
+                            }} />
+                            <View className="cover_del" onClick={() => {
+                                showAlert({
+                                    title: t('health.del_title'),
+                                    content: '',
+                                    cancelText: t('health.del_cancel'),
+                                    confirmText: t('health.del_confirm'),
+                                    showCancel: true,
+                                    confirm: () => {
+                                        var array = JSON.parse(JSON.stringify(pics))
+                                        array.splice(index, 1)
+                                        setPics(array)
+                                    }
+                                })
+                            }}>
+                                <View className="cover_del_btn">
+                                    <IconClose width={10} height={10} color="#fff" />
+                                </View>
+                            </View>
+                        </View>
                     })
                 }
                 {
-                    pics.length < 9 && <View onClick={tapPic} className="cover" style={{backgroundColor:'red'}}>添加</View>
+                    pics.length < 9 && <View onClick={tapPic} className="cover" style={{}}><Image src={require('@assets/_health/camera.png')} style={{ width: 40, height: 40 }} /></View>
                 }
             </View>
 

src/_health/pages/post_result.tsx

@@ -26,7 +26,7 @@ if (process.env.TARO_ENV == 'rn') {
 }
 export default function PostResult() {
 
-
+    const scale = '?x-oss-process=image/format,webp/resize,w_200'
     const user = useSelector((state: any) => state.user);
 
     let router
@@ -201,7 +201,7 @@ export default function PostResult() {
                 alignItems: 'center',
                 justifyContent: 'center'
             }}>
-                <Image src={user.avatar} mode="aspectFill" style={{
+                <Image src={user.avatar+scale} mode="aspectFill" style={{
                     background: user.isLogin ? 'transparent' : '#fff',
                     width: rpxToPx(108),
                     height: rpxToPx(108),
@@ -211,7 +211,7 @@ export default function PostResult() {
         }
         if (data.images && data.images.length > 0) {
             return <View className="result_icon_bg">
-                <Image className="result_icon_bg" mode="aspectFill" src={data.images[0]} />
+                <Image className="result_icon_bg gray_bg" mode="aspectFill" src={data.images[0]+scale} />
                 <View className="result_icon_small" style={{ backgroundColor: getMainColor() }}>
                     <IconCheck color="#fff" width={rpxToPx(32)} height={rpxToPx(32)} />
                 </View>

src/_health/pages/timeline_detail.tsx

@@ -82,9 +82,25 @@ export default function TimelineDetail() {
     const { schedule_id, event_id, window_id, isfastsleep, fast_type, disable_edit, uid, autoPost, op_page } = router.params
 
     console.log('进入页面获取参数')
+    console.log(router.params)
 
+    const launchObj = Taro.getLaunchOptionsSync()
+    console.log('launchObj',launchObj)
+
+    if (launchObj.shareTicket){
+        Taro.getShareInfo({
+            shareTicket:launchObj.shareTicket,
+            success(result) {
+                console.log('share info',result)
+            },
+        })
+    }
 
     if (process.env.TARO_ENV == 'weapp') {
+        Taro.updateShareMenu({
+            withShareTicket: true,
+            success() { }
+        })
 
         useShareAppMessage((e) => {
             console.log(detail)

src/app.scss

@@ -703,4 +703,8 @@ page {
 
 .blur_bg{
     filter: blur(20px) brightness(50%);
+}
+
+.gray_bg{
+    background-color: #f5f5f5;
 }

src/components/input/Inputs.scss

@@ -22,8 +22,9 @@
 }
 
 .clear_bg{
-    width: 116px;
-    height: 96px;
+    width: 28px;
+    height: 28px;
+    border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/input/Inputs.tsx

@@ -1,7 +1,7 @@
 import { Input, View } from "@tarojs/components";
 import './Inputs.scss'
 import { useEffect, useState } from "react";
-import { ColorType } from "@/context/themes/color";
+import { ColorType, MainColorType } from "@/context/themes/color";
 import { IconClear, IconClose } from "../basic/Icons";
 
 interface CustomInputProps {
@@ -46,7 +46,7 @@ export default function Component({
         onChange('')
     }
 
-    if (process.env.TARO_ENV=='rn'){
+    if (process.env.TARO_ENV == 'rn') {
         const TextInput = require('react-native').TextInput
         return (
             <View className="input_bg">
@@ -56,7 +56,7 @@ export default function Component({
                     password={isSecure ? true : false}
                     type={openType == 'nickname' ? 'nickname' : isSecure ? 'safe-password' : 'text'}
                     secureTextEntry={isSecure}
-                    onChangeText={(e)=>{
+                    onChangeText={(e) => {
                         onChange(e)
                     }}
                     placeholderTextColor="#00000099"
@@ -77,8 +77,9 @@ export default function Component({
                     }}
                 >{inputValue}</TextInput>
                 {
-                    inputValue.length > 0 && <View className="clear_bg" onClick={clear}>
-                       <IconClose width={20} height={20} color="#000"/>
+                    inputValue.length > 0 && <View style={{ padding: 20 }} onClick={clear}><View className="clear_bg" style={{ backgroundColor: MainColorType.g03 }}>
+                        <IconClose width={10} height={10} color="#fff" />
+                    </View>
                     </View>
                 }
             </View>
@@ -113,10 +114,10 @@ export default function Component({
                 }}
             />
             {
-                inputValue.length > 0 && <View className="clear_bg" onClick={clear}>
-                    <IconClear />
-                    {/* <IconClose width={20} height={20} color="#000"/> */}
-                    {/* <IconClose width={20} height={20} color="#000"/> */}
+                inputValue.length > 0 && <View style={{ padding: 20 }} onClick={clear}>
+                    <View className="clear_bg" style={{ backgroundColor: MainColorType.g03 }} >
+                        <IconClose width={10} height={10} color="#fff" />
+                    </View>
                 </View>
             }
         </View>

src/context/locales/en.js

@@ -1089,7 +1089,7 @@ export default {
 
         choose_photo: 'Choose from Photos',
         import_wechat: 'Import from Chat',
-        camera: 'Camera',
+        camera: 'Take Photo',
         delete: 'Delete',
         photos: 'Photos',
 
@@ -1214,5 +1214,7 @@ export default {
         share_all_journal: '{{date}} Journal',
         share_food_journal: '{{date}} Food Journal',
         share_activity_journal: '{{date}} Activity Journal',
+
+        uploading:'Uploading',
     }
 }

src/context/locales/zh.js

@@ -1090,9 +1090,9 @@ export default {
 
         add_my_first_activity: '添加我的第一个活动',
 
-        choose_photo: '从手机相册选择',
+        choose_photo: '从相册选择',
         import_wechat: '从聊天导入',
-        camera: '拍摄',
+        camera: '拍照',
         delete: '删除',
         photos: '相册',
 
@@ -1215,5 +1215,6 @@ export default {
         share_all_journal: '{{date}}日记',
         share_food_journal: '{{date}}饮食日记',
         share_activity_journal: '{{date}}活动日记',
+        uploading:'上传中',
     }
 }

src/features/health/HistoryItem.tsx

@@ -37,6 +37,7 @@ export default function HistoryItem(props: {
     type?: string
 }) {
     const health = useSelector((state: any) => state.health);
+    const scale = '?x-oss-process=image/format,webp/resize,w_400'
 
 
     function goDetail(event_id?: any) {
@@ -100,8 +101,9 @@ export default function HistoryItem(props: {
             }
             {
                 type == 'PIC_TEXT' && <Image
+                    className="gray_bg"
                     style={{ width: rpxToPx(178), height: rpxToPx(178), marginRight: rpxToPx(7), flexShrink: 0 }}
-                    src={url}
+                    src={url+scale}
                     onClick={(e) => {
                         if (process.env.TARO_ENV == 'weapp') {
                             e.stopPropagation()
@@ -141,17 +143,19 @@ export default function HistoryItem(props: {
             return <View />
         }
 
-        return <View style={{ display: 'flex', flexDirection: 'row',
+        return <View style={{
+            display: 'flex', flexDirection: 'row',
             // backgroundColor:'pink', 
             marginBottom: rpxToPx(12),
-            overflow:'hidden',
-            width:rpxToPx(554),
-         flex: 1 }}>
+            overflow: 'hidden',
+            width: rpxToPx(554),
+            flex: 1
+        }}>
 
             {
                 props.data.pics.length > 0 && <JournalCover imgs={props.data.pics} />
             }
-            
+
             <View style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -188,8 +192,8 @@ export default function HistoryItem(props: {
 
     return <View className="history_item2" onClick={goDetail}>
         <TimelineDate timestamp={props.data.window_range.start_timestamp}
-                pre_timestamp={props.preData?props.preData.window_range.start_timestamp:null}
-            />
+            pre_timestamp={props.preData ? props.preData.window_range.start_timestamp : null}
+        />
         <View className="history_content" style={{ paddingTop: rpxToPx(0) }}>
             {
                 props.mode != 'EAT' && props.mode != 'ACTIVE' && props.data.dataArray.map((content, i) => {
@@ -220,8 +224,9 @@ export default function HistoryItem(props: {
                         }
                         {
                             content.type == 'PIC_TEXT' && <Image
+                                className="gray_bg"
                                 style={{ width: rpxToPx(178), height: rpxToPx(178), marginRight: rpxToPx(7), flexShrink: 0 }}
-                                src={content.data[0].url}
+                                src={content.data[0].url+scale}
                                 onClick={(e) => {
                                     if (process.env.TARO_ENV == 'weapp') {
                                         e.stopPropagation()
@@ -303,7 +308,7 @@ export default function HistoryItem(props: {
             }
 
             {
-                props.type == 'FAST,SLEEP' && props.data.windows.length>=2 && <TargetProgress
+                props.type == 'FAST,SLEEP' && props.data.windows.length >= 2 && <TargetProgress
                     showRing={true}
                     doubleRing={true}
                     first={props.data.windows[0]}
@@ -313,7 +318,7 @@ export default function HistoryItem(props: {
             }
             {/* fast_sleep双环无法展示时，显示一个placeholder 骨架图 */}
             {
-                props.type == 'FAST,SLEEP' && props.data.windows.length<2 && <View className='history_duration_bg' />
+                props.type == 'FAST,SLEEP' && props.data.windows.length < 2 && <View className='history_duration_bg' />
             }
             <View style={{ height: rpxToPx(0), flexShrink: 0 }} />
         </View>

src/features/health/MainConsole.tsx

@@ -61,6 +61,7 @@ export default function MainConsole(props: { type: WindowType }) {
     const [hideSleepTip, setHideSleepTip] = useState(false)
     const { t } = useTranslation()
     const dispatch = useDispatch()
+    const scale = '?x-oss-process=image/format,webp/resize,w_200'//'?x-oss-process=image/resize,webp,w_200,limit_0'
 
     let navigation, showActionSheetWithOptions;
     if (useNavigation) {
@@ -274,9 +275,9 @@ export default function MainConsole(props: { type: WindowType }) {
             // if (health.mode == 'FAST' || health.mode == 'SLEEP') {
             if (item.moment && item.moment.media && item.moment.media.length > 0) {
                 return <Image
-                    src={item.moment.media[0].url}
+                    src={item.moment.media[0].url+scale}
                     mode="aspectFill"
-                    className="console_item_img" />
+                    className="console_item_img gray_bg" />
             }
             else {
                 return <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />

src/features/journal/components/journal_cover.tsx

@@ -7,153 +7,154 @@ import Taro from '@tarojs/taro'
 
 export default function JournalCover(props: { imgs: any }) {
 
-    const scale = '?x-oss-process=image/resize,w_200,limit_0'
+    // const scale = '?x-oss-process=image/resize,w_200,limit_0'
+    const scale = '?x-oss-process=image/format,webp/resize,w_200'
 
     function content() {
         switch (props.imgs.length) {
             case 1:
-                return <Image className='single' src={props.imgs[0] + scale} mode="aspectFill" />
+                return <Image className='single gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
             case 2:
                 return <View className='double'>
-                    <Image className='half_img' src={props.imgs[0] + scale} mode="aspectFill" />
+                    <Image className='half_img gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                     <View className='journal_space' />
-                    <Image className='half_img' src={props.imgs[1] + scale} mode="aspectFill" />
+                    <Image className='half_img gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                 </View>
             case 3:
                 return <View className='double'>
-                    <Image className='half_img' src={props.imgs[0] + scale} mode="aspectFill" />
+                    <Image className='half_img gray_bgg' src={props.imgs[0] + scale} mode="aspectFill" />
                     <View className='journal_space' />
                     <View className='half_top_down'>
-                        <Image className='quarter_img' src={props.imgs[1] + scale} mode="aspectFill" />
+                        <Image className='quarter_img gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='quarter_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                        <Image className='quarter_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                     </View>
                 </View>
             case 4:
                 return <View className='double'>
                     <View className='half_top_down' >
-                        <Image className='quarter_img' src={props.imgs[0] + scale} mode="aspectFill" />
+                        <Image className='quarter_img gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='quarter_img' src={props.imgs[1] + scale} mode="aspectFill" />
+                        <Image className='quarter_img gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                     </View>
 
                     <View className='journal_space' />
                     <View className='half_top_down'>
-                        <Image className='quarter_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                        <Image className='quarter_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='quarter_img' src={props.imgs[3] + scale} mode="aspectFill" />
+                        <Image className='quarter_img gray_bg' src={props.imgs[3] + scale} mode="aspectFill" />
                     </View>
                 </View>
             case 5:
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='five_1' src={props.imgs[0] + scale} mode="aspectFill" />
+                        <Image className='five_1 gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='five_2' src={props.imgs[1] + scale} mode="aspectFill" />
+                        <Image className='five_2 gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                     </View>
                     <View className='journal_space' />
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[3] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[3] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[4] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[4] + scale} mode="aspectFill" />
                     </View>
                 </View>
 
             case 6:
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='five_1' src={props.imgs[0] + scale} mode="aspectFill" />
+                        <Image className='five_1 gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                         <View className='journal_space' />
                         <View style={{ display: 'flex', flexDirection: 'column' }}>
-                            <Image className='nine_img' src={props.imgs[1] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                             <View className='journal_space' />
-                            <Image className='nine_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                         </View>
                     </View>
                     <View className='journal_space' />
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[3] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[3] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[4] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[4] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[5] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[5] + scale} mode="aspectFill" />
                     </View>
                 </View>
             case 7:
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='seven_1' src={props.imgs[0] + scale} mode="aspectFill" />
+                        <Image className='seven_1 gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='seven_1' src={props.imgs[1] + scale} mode="aspectFill" />
+                        <Image className='seven_1 gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                         <View className='journal_space' />
                         <View style={{ display: 'flex', flexDirection: 'column' }}>
-                            <Image className='nine_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                             <View className='journal_space' />
-                            <Image className='nine_img' src={props.imgs[3] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[3] + scale} mode="aspectFill" />
                         </View>
                     </View>
                     <View className='journal_space' />
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[4] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[4] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[5] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[5] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[6] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[6] + scale} mode="aspectFill" />
                     </View>
                 </View>
             case 8:
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='seven_1' src={props.imgs[0] + scale} mode="aspectFill" />
+                        <Image className='seven_1 gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <View style={{ display: 'flex', flexDirection: 'column' }}>
-                            <Image className='nine_img' src={props.imgs[1] + scale} mode="aspectFill" />
+                        <View style={{ display: 'flex gray_bg', flexDirection: 'column' }}>
+                            <Image className='nine_img gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                             <View className='journal_space' />
-                            <Image className='nine_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                         </View>
                         <View className='journal_space' />
                         <View style={{ display: 'flex', flexDirection: 'column' }}>
-                            <Image className='nine_img' src={props.imgs[3] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[3] + scale} mode="aspectFill" />
                             <View className='journal_space' />
-                            <Image className='nine_img' src={props.imgs[4] + scale} mode="aspectFill" />
+                            <Image className='nine_img gray_bg' src={props.imgs[4] + scale} mode="aspectFill" />
                         </View>
                     </View>
                     <View className='journal_space' />
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[5] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[5] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[6] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[6] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[7] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[7] + scale} mode="aspectFill" />
                     </View>
                 </View>
             case 9:
             default:
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[0] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[0] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[1] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[1] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[2] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[2] + scale} mode="aspectFill" />
                     </View>
                     <View className='journal_space' />
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[3] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[3] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[4] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[4] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[5] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[5] + scale} mode="aspectFill" />
                     </View>
                     <View className='journal_space' />
                     <View style={{ display: 'flex', flexDirection: 'row' }}>
-                        <Image className='nine_img' src={props.imgs[6] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[6] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[7] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[7] + scale} mode="aspectFill" />
                         <View className='journal_space' />
-                        <Image className='nine_img' src={props.imgs[8] + scale} mode="aspectFill" />
+                        <Image className='nine_img gray_bg' src={props.imgs[8] + scale} mode="aspectFill" />
                     </View>
                 </View>
         }

src/pages/account/PhotoWall.tsx

@@ -19,7 +19,8 @@ if (process.env.TARO_ENV == 'rn') {
     useNavigation = require("@react-navigation/native").useNavigation
 }
 
-const scale = '?x-oss-process=image/resize,w_150,limit_0'
+// const scale = '?x-oss-process=image/resize,w_150,limit_0'
+const scale = '?x-oss-process=image/format,webp/resize,w_200'
 
 export default function PhotoWall() {
     const info = Taro.getWindowInfo?Taro.getWindowInfo():Taro.getSystemInfoSync()