TestEShopDist/src/pages/certification/index.tsx

import FromListCertification from "@/components/FromListCertification"
import { Button, Input, Text, Textarea, View } from "@tarojs/components"
import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro"
import {weightAddApi, weightDetailApi,weightEditApi} from "@/api/weightList"
import { useEffect, useState } from "react"
import { alert, retrieval } from "@/common/common"
import "./index.scss"
import Message from "@/components/Message"

export default ()=>{
  const {type,id} = useRouter().params;
  useEffect(()=>{
    if(type=="add"){
      setNavigationBarTitle({title:"添加码单信息"})
    }else{
      initalFormData();
      setNavigationBarTitle({title:"修改码单信息"})
    }
  },[]);
  // 获取编辑码单信息
  const {fetchData: getFromData} = weightDetailApi()
  const initalFormData = async ()=>{
    const detail = await getFromData({id});
    setFormData({
      title: detail.data.title,
      purchaser_name: detail.data.purchaser_name,
      phone: detail.data.phone,
      is_default: detail.data.is_default,
      id: detail.data.id,
    })
  }
  // 保存
  const [formData, setFormData] = useState({
    title: "",
    purchaser_name: "",
    phone: "",
    is_default: false,
    id: 0
  })
  const rules = {
    title: [{
      message: "请输入抬头"
    }],
    purchaser_name: [{
      message: "请输入客户名称"
    }],
    phone: [{
      message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/
    }]
  }
  const {fetchData} = weightAddApi()
  const {fetchData: editFetch} = weightEditApi()
  const handleSave = ()=>{
    retrieval(formData, rules).then(async ()=>{
      const result = type=="add"?await fetchData({
        title: formData.title,
        purchaser_name: formData.purchaser_name,
        phone: formData.phone,
        is_default: formData.is_default,
      }):await editFetch({
        title: formData.title,
        purchaser_name: formData.purchaser_name,
        phone: formData.phone,
        is_default: formData.is_default,
        id: formData.id
      });
      if(result.success){
        Taro.eventCenter.trigger("weightList:refresh");
        Taro.navigateBack();
        alert.success("保存成功");
      }else{
        alert.error(result.msg);
      }
    }).catch((message)=>{
      alert.none(message)
    })
  }
  // 监听表单完善
  const [hozon, setHozon] = useState(false);
  useEffect(()=>{
    if(retrieval){
      retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false))
    }
  },[formData])

  return (
    <View className="certification">
      <Message text="认证不通过，原因：xxx，请重新认证"/>
      <View className="certification-content">
        <View className="certification-title">企业认证</View>
        <FromListCertification type="select" onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})}
        value={formData["title"]} label="认证类型" placeholder="企业认证"/>
        <FromListCertification onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/>
        <FromListCertification style={{border: "0"}} onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业营业" placeholder="注册号、统一社会信用代码、组织机构代码" required/>
        <View className="certification-upload">
          {/* <Text>营业执照正面</Text>
          <View className="certification-button">
            <View>查看证件</View>
            <View>重新上传</View>
          </View> */}
          <View className="certification-upload-no">
            <View className="certification-upload-no-icon">+</View>
            <View className="certification-upload-no-tips">上传营业执照下面</View>
          </View>
        </View>
      </View>
      <View className="certification-content">
        <View className="certification-title">法人认证</View>
        <FromListCertification onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人代表" placeholder="填写法人名称" required/>
        <FromListCertification style={{border: "0"}} onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人身份" placeholder="填写法人代表身份证号" required/>
        <View className="certification-upload">
          <Text>身份证正面</Text>
          <View className="certification-button">
            <View>查看证件</View>
            <View>重新上传</View>
          </View>
        </View>
        <View className="certification-upload">
          <Text>身份证反面</Text>
          <View className="certification-button">
            <View>查看证件</View>
            <View>重新上传</View>
          </View>
        </View>
      </View>
      <View className="certification-footer">
        <View className="certification-footer-button">
          <View>取消</View>
          <View>提交</View>
        </View>
      </View>
    </View>
  )
}