taro-book/src/pages/ldPage/index.tsx

import { View, Image } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { getPage } from "@src/server/index/index";
import { useEffect, useState } from "react";
function LdPage() {
    let systemInfo = Taro.getSystemInfoSync();
    let [data, setDate] = useState<any>(null)
    const router = useRouter()
    useEffect(() => {
        let params = router.params
        console.log("router", router.params)
        if (params.pageId) {
            Taro.showLoading({
                title: '加载中',
            })
            getPage(params.pageId).then((res: any) => {
                if (res.data.code === 200) {
                    let content = res.data.data.content
                    try {
                        content = JSON.parse(content)
                    } catch (error) {
                        console.log("error", error)
                    }
                    let obj = {
                    }
                    console.log("content", content)
                    content?.elementsSpecList?.map((item, index) => {
                        if (item.elementType === "QR_CODE") {
                            let url = res.data.data.qrCodeList.find(q => q.siteId == item.id)?.urlList[0]
                            obj[item.elementType] = { ...item, url, eq: index }
                        } else if (item.elementType === "FLOAT_BUTTON") {
                            let url = res.data.data.qrCodeFloatList.find(q => q.siteId == item.id)?.urlList[0]
                            console.log("url", url)
                            obj[item.elementType] = { ...item, url, eq: index }
                        } else if (item.elementType === "TEXT") {
                            obj[item.elementType] = obj[item.elementType] ? [...obj[item.elementType], { ...item, eq: index }] : [{ ...item, eq: index }]
                        } else if (item.elementType === "IMAGE") {
                            obj[item.elementType] = obj[item.elementType] ? [...obj[item.elementType], { ...item, eq: index }] : [{ ...item, eq: index }]
                        } else {
                            obj[item.elementType] = { ...item, eq: index }
                        }
                    })
                    setDate({ ...res.data.data, ...obj })
                }
                Taro.hideLoading()
            })
        }
    }, [])
    const onLongPress = (str) => {
        console.log("用户长按了二维码:",str)
    }
    return <View >
        <View style={{ marginTop: (systemInfo.statusBarHeight as any) + 10 }}></View>
        {/* 标题 */}
        <View style={{ textAlign: 'center', paddingBottom: 10 }}>{data ? data["name"] : ""}&nbsp;</View>
        {/* 内容 */}
        <View style={{ height: `calc(100vh - ${(systemInfo.statusBarHeight || 0) + 32}px)`, backgroundColor: "#d5e8d6", overflowY: "auto" }}>
            {
                data ? <View style={{ display: 'flex', flexFlow: 'column', paddingBottom: 100 }}>
                    {/* 顶图 */}
                    {data["TOP_IMAGE"] && <Image src={data["TOP_IMAGE"].url} mode="widthFix" style={{ height: "auto", width: "100vw", order: data["TOP_IMAGE"].eq }} />}
                    {/* 文本 */}
                    {data["TEXT"] && data["TEXT"].map((textObj, index) => {
                        return index === 0 ? <View style={{ fontSize: 24, fontWeight: "bold", color: "", padding: "10px 20px", display: 'grid', gap: 10, order: textObj.eq }}>{textObj?.text?.split(/\s/ig)?.map((item, index) => {
                            return <View style={index === 0 ? { color: "#D0021B", marginBottom: -10 } : {}}>{item}</View>
                        })}</View> : <View style={{ fontSize: 24, fontWeight: "bold", color: "", padding: "10px 20px", display: 'grid', gap: 10, order: textObj.eq }}>{textObj?.text?.split(/\s/ig)?.map((item, index) => {
                            return <View>{item}</View>
                        })}</View>
                    })}
                    {/* 图 */}
                    {data["IMAGE"] && data["IMAGE"].map((imgObj, index) => {
                        return <Image src={imgObj.url} mode="widthFix" style={{ height: "auto", width: "100vw", order: imgObj.eq }} />
                    })}
                    {/* 二维码 */}
                    {data["QR_CODE"] && <Image src={data["QR_CODE"].url}  onLongPress={()=>{onLongPress("QR_CODE")}} mode="widthFix" showMenuByLongpress style={{ height: "auto", width: "70vw", display: 'block', margin: '0 auto', order: data["QR_CODE"].eq }} />}
                    {/* 动图 */}
                    {/* <Image src={"https://app-cloud-images.oss-cn-hangzhou.aliyuncs.com/1768559009681.gif"} mode="widthFix" style={{ height: "auto", width: "100vw", marginTop: -30, paddingBottom: 70 }} /> */}
                    {/* 底部浮选图 */}
                    {data["FLOAT_BUTTON"] && <Image src={data["FLOAT_BUTTON"].url} mode="widthFix" onLongPress={()=>{onLongPress("FLOAT_BUTTON")}}showMenuByLongpress style={{ height: "auto", width: "100vw", position: 'fixed', bottom: 0, left: 0, zIndex: 999, order: data["FLOAT_BUTTON"].eq }} />}
                </View> : <View></View>
            }
        </View>
    </View>
}

export default LdPage;