--企业认证50%

src/pages/certification/components/SelectEnterpriseType.scss

@@ -0,0 +1,22 @@
+.select-enterprise-type{
+  .select-enterprise-type-btn{
+    color: #ABABAB;
+    font-size: 28px;
+    padding: 20px;
+    display: flex;justify-content: space-between;
+    border-bottom: 1rpx solid #eaeaea;
+  }
+  .select-enterprise-type-content{
+    padding: 0 20px;
+    padding-bottom: 120px;
+  }
+  .select-enterprise-type-content view{
+    padding: 20px 0;
+    font-size: 28px;
+    display: flex;justify-content: space-between;
+  }
+  .select-enterprise-type-content view text:last-child{
+    color: #007AFF;
+    font-size: 35px;
+  }
+}

src/pages/certification/components/SelectEnterpriseType.tsx

@@ -0,0 +1,56 @@
+import { Text, View } from "@tarojs/components"
+import Popup from "@/components/popup";
+import "./SelectEnterpriseType.scss"
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import {certificationTypeListApi} from "@/api/certification"
+
+interface Params{
+  confirm?: (selected:any)=>void, // 确定
+}
+
+export default forwardRef((props: Params, ref)=>{
+  const [modalShow, setModalShow] = useState(false)
+  // 获取认证信息
+  const {fetchData, state} = certificationTypeListApi();
+  useEffect(()=>{
+    fetchData();
+  }, [])
+  const [selected, setSelected] = useState({});
+  // 确定
+  const handleSelect = (item)=>{
+    setSelected(item);
+  }
+  // 设置弹窗是否显示
+  const setShow = (ev)=>{
+    setModalShow(ev);
+  }
+  useImperativeHandle(ref,()=>({
+    setShow
+  }))
+  // 确定
+  const handleConfirm = ()=>{
+    props.confirm&&props.confirm(selected);
+    setModalShow(false);
+  }
+  
+  return (
+    <View className="select-enterprise-type">
+      <Popup showTitle={false} show={modalShow} onClose={() => setModalShow(false)}>
+          <View className="select-enterprise-type-btn">
+            <View onClick={() => setModalShow(false)}>取消</View>
+            <View onClick={handleConfirm}>确定</View>
+          </View>
+          <View className="select-enterprise-type-content">
+            {
+              state.data?.list?.map((item,index)=>{
+                return <View onClick={()=>handleSelect(item)} key={index}>
+                  <Text>{item.name}</Text>
+                  {item.id==(selected as any).id?<Text className="iconfont icon-tick"/>:<Text/>}
+                </View>
+              })
+            }
+          </View>
+      </Popup>
+    </View>
+  )
+})

src/pages/certification/index.scss

@@ -16,6 +16,7 @@
     margin-left: 30px;
     padding-top: 40px;
     color: #000000;
+    padding-bottom: 20px;
     // border-top: 18px solid #F0F0F0;
   }
   .certification-upload{
@@ -38,6 +39,10 @@
   .certification-upload-no{
     display: flex;flex-direction: column;align-items: center;
   }
+  .certification-upload image{
+    position: absolute;width: 100%;height: 100%;
+    object-fit: cover;border-radius: 30px;
+  }
   .certification-upload-no-icon{
     width: 104px;
     height: 104px;
@@ -56,10 +61,11 @@
   }
   .certification-button{
     position: absolute;bottom: -10px;left: -10px;right: -10px;
-    background-color: #858A8F;
+    background-color: rgba(0,0,0,0.65);
     display: flex;
     height: 86px;
     border-radius: 0 0 30px 30px;
+    z-index: 1;
   }
   .certification-button view{
     flex: 1;
@@ -79,6 +85,7 @@
     position: fixed;bottom: 0;left: 0;right: 0;
     width: 100%;
     display: flex;align-items: center;justify-content: center;
+    z-index: 2;
   }
   .certification-footer-button{
     width: 696px;
@@ -90,12 +97,16 @@
     box-sizing: border-box;
     overflow: hidden;
   }
-  .certification-footer-button view{
+  .certification-footer-button view,.certification-footer-button navigator{
     flex: 1;
     display: flex;align-items: center;justify-content: center;
     font-size: 32px;
     font-weight: 400;
     color: #007aff;
+    border: 0;border-radius: none;
+  }
+  .certification-footer-button navigator::after{
+    border: 0;border-radius: none;
   }
   .certification-footer-button view:last-child{
     color: white;

src/pages/certification/index.tsx

@@ -1,72 +1,73 @@
 
 import FromListCertification from "@/components/FromListCertification"
-import { Button, Input, Text, Textarea, View } from "@tarojs/components"
+import { Button, Image, Input, NavigationBar, Navigator, 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 {certificationSaveApi, certificationDetailApi} from "@/api/certification"
+import { useEffect, useRef, useState } from "react"
 import { alert, retrieval } from "@/common/common"
 import "./index.scss"
+import useUploadCDNImg from "@/use/useUploadImage";
 import Message from "@/components/Message"
+import { IMG_CND_Prefix } from "@/common/constant";
+import SelectEnterpriseType from "./components/SelectEnterpriseType"
 
 export default ()=>{
-  const {type,id} = useRouter().params;
   useEffect(()=>{
-    if(type=="add"){
-      setNavigationBarTitle({title:"添加码单信息"})
-    }else{
-      initalFormData();
-      setNavigationBarTitle({title:"修改码单信息"})
-    }
+    initalFormData();
   },[]);
-  // 获取编辑码单信息
-  const {fetchData: getFromData} = weightDetailApi()
+  // 获取认证信息
+  const {fetchData: getFromData} = certificationDetailApi()
   const initalFormData = async ()=>{
-    const detail = await getFromData({id});
+    const detail = await getFromData();
     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,
-    })
+      ...detail.data??{},
+      legal_person_identity_url: detail?.data?.legal_person_identity_url??[],
+      // business_license_url: "https://test.cdn.zzfzyc.com/mall/827082e888860dd9da10f0fbb0ac3cf023081456.png"
+    } as any)
   }
   // 保存
   const [formData, setFormData] = useState({
-    title: "",
-    purchaser_name: "",
-    phone: "",
-    is_default: false,
-    id: 0
-  })
+    authentication_type: 0,
+    authentication_type_name: "",
+    business_license_url: "",
+    legal_person: "",
+    legal_person_identity: "",
+    legal_person_identity_url: [],
+    name: ""
+  });
   const rules = {
-    title: [{
-      message: "请输入抬头"
+    authentication_type: [{
+      message: "请选择认证类型"
     }],
-    purchaser_name: [{
-      message: "请输入客户名称"
+    name: [{
+      message: "请输入企业名称"
+    }],
+    business_license_url: [{
+      message: "请上传营业执照"
+    }],
+    legal_person: [{
+      message: "请输入法人名称"
+    }],
+    // legal_person_identity: [{
+    //   message: "请输入正确法人身份证",
+    //   regex: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/      
+    // }],
+    legal_person_identity_url: [{
+      message: "请上传法人身份证",
+      validator: (value:any, rule:any)=>{ 
+        if(!value[0]||!value[1]){
+          return true;
+        }
+        return false;
+      }
     }],
-    phone: [{
-      message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/
-    }]
   }
-  const {fetchData} = weightAddApi()
-  const {fetchData: editFetch} = weightEditApi()
+  const {fetchData} = certificationSaveApi()
   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
-      });
+      const result = await fetchData({...formData})
       if(result.success){
-        Taro.eventCenter.trigger("weightList:refresh");
+        // Taro.eventCenter.trigger("weightList:refresh");
         Taro.navigateBack();
         alert.success("保存成功");
       }else{
@@ -83,51 +84,106 @@ export default ()=>{
       retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false))
     }
   },[formData])
+  // 选择类型弹窗显示 
+  const selectTypeRef= useRef(null)
+  const handleSelectTypeModalShow = ()=>{
+    (selectTypeRef.current as any).setShow(true)
+  }
+  // 选择类型确定
+  const handleSelectTypeConfirm = (item)=>{
+    setFormData({
+      ...formData,
+      authentication_type: item.id,
+      authentication_type_name: item.name
+    });
+  }
+  // 上传图片
+  const {getWxPhoto} = useUploadCDNImg();
+  const handleUploadImage = async (text: any)=>{
+    let result = await getWxPhoto('mall');
+    if(text=="business_license_url"){
+      formData.business_license_url = IMG_CND_Prefix+(result as any).url;
+    }else{
+      formData.legal_person_identity_url[text]=IMG_CND_Prefix+(result as any).url as never;
+    }
+    setFormData({...formData});
+  }
+  // 查看图片
+  const handleViewImage = (event,url)=>{
+    event.stopPropagation();
+    Taro.previewImage({
+      current: url,
+      urls: [url]
+    })
+  }
 
   return (
     <View className="certification">
-      <Message text="认证不通过，原因：xxx，请重新认证"/>
+      {/* <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> */}
+        <FromListCertification type="select" onClick={handleSelectTypeModalShow} value={(formData as any)?.authentication_type_name} label="认证类型" placeholder="企业认证"/>
+        <SelectEnterpriseType ref={selectTypeRef} confirm={handleSelectTypeConfirm} />
+        <FromListCertification onInput={(ev:any)=>setFormData({...formData,name:ev.detail.value})} value={formData["name"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/>
+        <FromListCertification type="select" style={{border: "0"}}label="企业营业执照" placeholder="注册号、统一社会信用代码、组织机构代码" required showIcon={false}/>
+        <View onClick={()=>handleUploadImage("business_license_url")} className="certification-upload">
+          {(formData as any)?.business_license_url?
+          <>
+            <Text>营业执照正面</Text>
+            <View className="certification-button">
+              <View onClick={(e)=>handleViewImage(e,(formData as any)?.business_license_url)}>查看证件</View>
+              <View>重新上传</View>
+            </View>
+            <Image mode="aspectFit" src={(formData as any)?.business_license_url}/>
+          </>:
           <View className="certification-upload-no">
             <View className="certification-upload-no-icon">+</View>
-            <View className="certification-upload-no-tips">上传营业执照下面</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>
+        <FromListCertification onInput={(ev:any)=>setFormData({...formData,legal_person:ev.detail.value})} value={formData["legal_person"]} label="法人代表" placeholder="填写法人名称" required/>
+        <FromListCertification style={{border: "0"}} onInput={(ev:any)=>setFormData({...formData,legal_person_identity:ev.detail.value})} value={formData["legal_person_identity"]} label="法人身份" placeholder="填写法人代表身份证号" required/>
+        <View onClick={()=>handleUploadImage(0)} className="certification-upload">
+          {(formData as any)?.legal_person_identity_url[0]?
+            <>
+              <Text>营业执照正面</Text>
+              <View className="certification-button">
+                <View onClick={(e)=>handleViewImage(e,(formData as any)?.legal_person_identity_url[0])}>查看证件</View>
+                <View>重新上传</View>
+              </View>
+              <Image mode="aspectFit" src={(formData as any)?.legal_person_identity_url[0]}/>
+            </>:
+            <View className="certification-upload-no">
+              <View className="certification-upload-no-icon">+</View>
+              <View className="certification-upload-no-tips">上传身份证正面</View>
+            </View>
+          }
         </View>
-        <View className="certification-upload">
-          <Text>身份证反面</Text>
-          <View className="certification-button">
-            <View>查看证件</View>
-            <View>重新上传</View>
-          </View>
+        <View onClick={()=>handleUploadImage(1)} className="certification-upload">
+          {(formData as any)?.legal_person_identity_url[1]?
+              <>
+                <Text>营业执照正面</Text>
+                <View className="certification-button">
+                  <View onClick={(e)=>handleViewImage(e,(formData as any)?.legal_person_identity_url[1])}>查看证件</View>
+                  <View>重新上传</View>
+                </View>
+                <Image mode="aspectFit" src={(formData as any)?.legal_person_identity_url[1]}/>
+              </>:
+              <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-footer">
         <View className="certification-footer-button">
-          <View>取消</View>
-          <View>提交</View>
+          <Navigator openType="navigateBack">取消</Navigator>
+          <View onClick={handleSave}>提交</View>
         </View>
       </View>
     </View>

src/pages/userEdit/components/ModifyModal.tsx

@@ -33,17 +33,17 @@ export default memo(forwardRef((props:any,ref)=>{
   useImperativeHandle(ref, ()=>({setModalShow}))
   return (
     <Popup onClose={()=>setModalShow(false)} title={title} show={modalShow}>
-        <View style={{marginBottom: `${textareaBottom}px`}} className="modify-ickname-content">
-          <View className="modify-ickname-input">
-            <Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20}/>
-            <Text>{value?.length}/20</Text>
-          </View>
-          <Text className="modify-ickname-tips">请设置2-20个字符，可由中文、英文、数字组成</Text>
-          <View className="modify-ickname-operation">
-            <Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
-            <Button onClick={()=>props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
-          </View>
+      <View style={{marginBottom: `${textareaBottom}px`}} className="modify-ickname-content">
+        <View className="modify-ickname-input">
+          <Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20}/>
+          <Text>{value?.length}/20</Text>
         </View>
-      </Popup>
+        <Text className="modify-ickname-tips">请设置2-20个字符，可由中文、英文、数字组成</Text>
+        <View className="modify-ickname-operation">
+          <Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
+          <Button onClick={()=>props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
+        </View>
+      </View>
+    </Popup>
   )
 }))