|
@@ -28,10 +28,9 @@ function LdPage() {
|
|
|
content?.elementsSpecList?.map((item, index) => {
|
|
content?.elementsSpecList?.map((item, index) => {
|
|
|
if (item.elementType === "QR_CODE") {
|
|
if (item.elementType === "QR_CODE") {
|
|
|
let url = res.data.data.qrCodeList.find(q => q.siteId == item.id)?.urlList[0]
|
|
let url = res.data.data.qrCodeList.find(q => q.siteId == item.id)?.urlList[0]
|
|
|
- obj[item.elementType] = { ...item, url, eq: index }
|
|
|
|
|
|
|
+ obj[item.elementType] = obj[item.elementType] ? [...obj[item.elementType], { ...item, url, eq: index }] : [{ ...item, url, eq: index }]
|
|
|
} else if (item.elementType === "FLOAT_BUTTON") {
|
|
} else if (item.elementType === "FLOAT_BUTTON") {
|
|
|
let url = res.data.data.qrCodeFloatList.find(q => q.siteId == item.id)?.urlList[0]
|
|
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 }
|
|
obj[item.elementType] = { ...item, url, eq: index }
|
|
|
} else if (item.elementType === "TEXT") {
|
|
} else if (item.elementType === "TEXT") {
|
|
|
obj[item.elementType] = obj[item.elementType] ? [...obj[item.elementType], { ...item, eq: index }] : [{ ...item, eq: index }]
|
|
obj[item.elementType] = obj[item.elementType] ? [...obj[item.elementType], { ...item, eq: index }] : [{ ...item, eq: index }]
|
|
@@ -40,6 +39,8 @@ function LdPage() {
|
|
|
} else {
|
|
} else {
|
|
|
obj[item.elementType] = { ...item, eq: index }
|
|
obj[item.elementType] = { ...item, eq: index }
|
|
|
}
|
|
}
|
|
|
|
|
+ obj["bgColor"] = content["bgColor"]
|
|
|
|
|
+ obj["pageName"] = content["pageName"]
|
|
|
})
|
|
})
|
|
|
setDate({ ...res.data.data, ...obj })
|
|
setDate({ ...res.data.data, ...obj })
|
|
|
}
|
|
}
|
|
@@ -50,47 +51,61 @@ function LdPage() {
|
|
|
const onLongPress = (str) => {
|
|
const onLongPress = (str) => {
|
|
|
console.log("用户长按了二维码:", str)
|
|
console.log("用户长按了二维码:", str)
|
|
|
}
|
|
}
|
|
|
|
|
+ console.log("data", data)
|
|
|
return <View >
|
|
return <View >
|
|
|
- <View style={{ marginTop: (systemInfo.statusBarHeight as any) + 10 }}></View>
|
|
|
|
|
- {/* 标题 */}
|
|
|
|
|
- <View style={{ textAlign: 'center', paddingBottom: 10 }}>{data ? data["name"] : ""} </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 && <>
|
|
|
|
|
+ <View style={{ marginTop: (systemInfo.statusBarHeight as any) + 10 }}></View>
|
|
|
|
|
+ {/* 标题 */}
|
|
|
|
|
+ <View style={{ textAlign: 'center', paddingBottom: 10 }}>{data ? data["pageName"] : data["name"] || ""} </View>
|
|
|
|
|
+ {/* 内容 */}
|
|
|
|
|
+ {data["bgColor"] ? <View style={{ height: `calc(100vh - ${(systemInfo.statusBarHeight || 0) + 32}px)`, backgroundColor: data ? data["bgColor"] : "#d5e8d6", overflowY: "auto" }}>
|
|
|
|
|
+ <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["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["TEXT"] && data["TEXT"].map((textObj) => {
|
|
|
|
|
+ let { text, eq, elementType, comptActive, ...styles } = textObj
|
|
|
|
|
+ return <View dangerouslySetInnerHTML={{ __html: text }} style={{ paddingLeft: 24, paddingRight: 24, whiteSpace: "pre-wrap", order: eq, ...styles }}></View>
|
|
|
})}
|
|
})}
|
|
|
{/* 图 */}
|
|
{/* 图 */}
|
|
|
- {data["IMAGE"] && data["IMAGE"].map((imgObj, index) => {
|
|
|
|
|
- return <Image src={imgObj.url} mode="widthFix" style={{ height: "auto", width: "100vw", order: imgObj.eq }} />
|
|
|
|
|
|
|
+ {data["IMAGE"] && data["IMAGE"].map((imgObj) => {
|
|
|
|
|
+ let { eq, elementType, comptActive, url, ...styles } = imgObj
|
|
|
|
|
+ return <Image src={url} mode="widthFix" style={{ height: "auto", width: "100vw", order: imgObj.eq, ...styles }} />
|
|
|
})}
|
|
})}
|
|
|
{/* 二维码 */}
|
|
{/* 二维码 */}
|
|
|
- {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 }} /> */}
|
|
|
|
|
- {/* 企业微信客服按钮 - 联系我插件 */}
|
|
|
|
|
- {/* <View>
|
|
|
|
|
- <contact-cell
|
|
|
|
|
- startmessage={startMessage}
|
|
|
|
|
- completemessage={completeMessage}
|
|
|
|
|
- plugid='4bed1d4b8d3edf6980c392f61f482077'
|
|
|
|
|
- style={{ width: '40px', height: '40px' }}
|
|
|
|
|
- styleType={2}
|
|
|
|
|
- />
|
|
|
|
|
- </View> */}
|
|
|
|
|
|
|
+ {data["QR_CODE"] && data["QR_CODE"].map((qrObj) => {
|
|
|
|
|
+ let { eq, elementType, comptActive, url, id, imageList, ...styles } = qrObj
|
|
|
|
|
+ return <Image src={url} mode="widthFix" onLongPress={() => { onLongPress("QR_CODE") }} showMenuByLongpress style={{ height: "auto", width: "100vw", order: eq, boxSizing: "border-box", ...styles }} />
|
|
|
|
|
+ })}
|
|
|
{/* 底部浮选图 */}
|
|
{/* 底部浮选图 */}
|
|
|
{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 }} />}
|
|
{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> : <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) => {
|
|
|
|
|
+ return <Image src={imgObj.url} mode="widthFix" style={{ height: "auto", width: "100vw", order: imgObj.eq }} />
|
|
|
|
|
+ })}
|
|
|
|
|
+ {/* 二维码 */}
|
|
|
|
|
+ {data["QR_CODE"] && data["QR_CODE"].map((qrObj) => {
|
|
|
|
|
+ return <Image src={qrObj.url} onLongPress={() => { onLongPress("QR_CODE") }} mode="widthFix" showMenuByLongpress style={{ height: "auto", width: "70vw", display: 'block', margin: '0 auto', order: qrObj.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>
|
|
|
}
|
|
}
|
|
|
|
|
|