bluenote/src/pages/editor-pages/editor-link-social/index.tsx

import { useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro, { useRouter, useUnload } from "@tarojs/taro";
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal/index";

import WemetaTextarea from "@/components/wemeta-textarea/index";
import WemetaInput from "@/components/wemeta-input/index";
import { useComponentStore } from "@/store/componentStore";
import { SocialMediaType } from "@/consts/socialMedia";
import BottomBar from "@/components/BottomBar";
import { EComponentType } from "@/consts/enum";
import Popup from "@/components/popup/popup";
import ButtonMain from "@/components/buttons/ButtonMain";
export default function Index() {
  const router = useRouter();
  // 社交媒体类型
  const { mediaType } = router.params;
  let mt = mediaType ?? "link";
  let defaultLabel = `${SocialMediaType[mt]?.label} 链接`;
  if (mediaType === "shiping") {
    defaultLabel = "视频号";
  }

  let currentComponent = useComponentStore((state) => state.currentComponent);
  if (!currentComponent) {
    return <></>;
  }
  const { saveComponent } = useComponentStore();
  const loading = useComponentStore((state) => state.loading);
  const data = currentComponent?.data ?? {};
  const { value, text, layout } = data;
  const [show, setShow] = useState(false);
  const [linkValue, setLinkValue] = useState(value ?? "");
  const [linkText, setLinkText] = useState(text ?? "");

  // 是否为视频号, 视频号需要特殊提示
  // 如果后期还有更特殊需求，抽取单独页面
  const isShiping = SocialMediaType[mt]?.value === "shiping";

  const handleSubmit = async () => {
    if (!data?.id) {
      return;
    }
    if (loading) {
      return;
    }
    const c = {
      data: {
        value: linkValue,
        text: linkText,
        layout: layout ?? "",
        id: data.id,
        index: data.index,
      },
      enabled: currentComponent?.enabled ?? true,
      type: mediaType as EComponentType,
    };

    console.log(c);

    await saveComponent(c);
    Taro.navigateBack();
  };

  return (
    <PageCustom bgColor="global-light-green-bg">
      <NavBarNormal>{defaultLabel}</NavBarNormal>
      <View className="flex flex-col items-center gap-16 w-full px-16 pb-120">
          <View className="flex flex-col gap-6 w-full">
          <View className="flex w-full items-center ">
              <View className="flex text-14 leading-28 font-medium flex-1">{isShiping ? '视频号ID': '链接'}<Text className="text-red">*</Text></View>
              {isShiping && (
              <View className="text-primary" onClick={() => setShow(true)}>
                  如何获取？
                </View>
              )}
            </View>
          
          <WemetaTextarea
            value={linkValue}
            onInput={(value: string) => setLinkValue(value)}
            placeholder="填写视频号ID"
            maxlength={50}
          ></WemetaTextarea>
        </View>
        <View className={`flex flex-col gap-6 w-full`}>
          <View className="flex w-full items-center">
            <View className="flex flex-1 text-14 leading-28 font-medium">链接描述</View>
          </View>
          <WemetaInput
            value={linkText}
            onInput={(value: string) => setLinkText(value)}
            placeholder="请输入..."
            maxlength={50}
          />
        </View>
      </View>
      <BottomBar>
        <ButtonMain className="flex-1" disabled={!linkValue.length} onClick={handleSubmit}>保存</ButtonMain>
      </BottomBar>
      <Popup title={"获取视频号ID"} show={show} setShow={setShow}>
        <View className="flex flex-col gap-10 rounded-20 p-12 bg-white">
          <View className="text-gray-65">
            🌟 <Text className="font-medium">小蓝本提示：</Text>
            <Text>
              获取视频号ID的需要登录视频号助手，在首页可以查看自己的视频号ID
            </Text>
          </View>
          <Image
            className="w-full"
            mode="widthFix"
            src="https://cdn.wehome.cn/cmn/png/196/META-H8UK0IWU-9NNPJOLLD1MU95DE0NMA3-8W1EZW2M-2B1.png"
          ></Image>
        </View>
      </Popup>
    </PageCustom>
  );
}