bluenote/src/pages/editor-pages/editor-store-home/index.tsx

import { useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/nav-bar-normal/index";
import Popup from "@/components/popup/popup";
import editorStyle from "../editor.module.less";
import { useCharacterStore } from "@/store/characterStore";
import { useComponentStore } from "@/store/componentStore";
import WemetaInput from "@/components/wemeta-input/index";

export default function Index() {
  const router = useRouter();
  const { id } = router.params;
  const deltaNum = id ? 1 : 2;
  let currentComponent = useComponentStore((state) => state.currentComponent);
  const character = useCharacterStore((state) => state.character);
  const { saveComponent } = useComponentStore();
  const loading = useComponentStore((state) => state.loading);
  const { value } = currentComponent?.data ?? {};
  const [storeProductValue, setStoreProductValue] = useState<{
    appid: string;
  }>(value ?? {});

  const [show, setShow] = useState(false);

  const handleSave = async () => {
    if (loading) {
      return;
    }
    if (!storeProductValue.appid) {
      return;
    }
    const c = {
      data: {
        value: storeProductValue,
        layout: 'mini',
      },
      enabled: currentComponent?.enabled ?? true,
      id: currentComponent?.id,
      name: currentComponent?.name ?? "微信小店",
      characterProfileId:
        currentComponent?.characterProfileId ?? character?.profileId,
      type: "storeHome",
    };
    console.log(c);
    await saveComponent(c);
  };

  const handleNavBack = async () => {
    await handleSave();
  };

  const setValueByKey = (key: string, v: string) => {
    setStoreProductValue((prev)=> {
      return {
        ...prev,
        [key]: v
      }
    });
  };

  const showTips = () => () => {
    setShow(true);
  };

  return (
    <PageCustom>
      <NavBarNormal
        backText="保存"
        navDelta={deltaNum}
        onNavBack={handleNavBack}
      >
        填写小店商品信息
      </NavBarNormal>
      <View className="flex flex-col items-center w-full pt-20">
        <View className={editorStyle.container}>
          <View className={editorStyle.formContainer}>
            <View className={editorStyle.formItem}>
              <View className={editorStyle.formItemLabel}>
                <View className="flex-1">小店ID</View>
                <View className="text-green" onClick={showTips()}>
                  如何获取？
                </View>
              </View>
              <WemetaInput
                value={storeProductValue.appid}
                onInput={(value: string) => setValueByKey("appid", value)}
                placeholder="长按粘贴小店ID..."
              />
            </View>      
          </View>
        </View>
      </View>

      <Popup
        title="获取小店ID"
        show={show}
        setShow={setShow}
      >
        <View className="flex flex-col gap-16 mb-44">
          <View
            className={`flex flex-col p-12 gap-10 text-14 rounded-20 leading-22 text-gray-65 bg-gray-f8 overflow-hidden`}
          >
            <View>
              🌟 <Text className="font-medium">小绿提示：</Text>
              <Text>通过微信小店后台 - 商品管理 - 商品列表 - 规格/编码获取。</Text>
            </View>
            <Image
              className="w-full"
              mode="widthFix"
              src="https://cdn.wehome.cn/cmn/png/214/META-H8UKXHWU-PIWQ5G6H7F9LO74FT7QR2-9SOBIJ4M-KC.png"
            ></Image>
          </View>
          <View className='button-rounded-big mt-20' onClick={() => setShow(false)}>知道了</View>
        </View>
      </Popup>
    </PageCustom>
  );
}