--企业认证50%

src/api/certification.ts

@@ -0,0 +1,34 @@
+import { useRequest } from "@/use/useHttp"
+
+/**
+ *  企业认证信息获取
+ * @returns 
+ */
+ export const certificationDetailApi = () => {
+    return useRequest({
+        url: `/v1/mall/company/authentication`,
+        method: "get",
+    })
+}
+
+/**
+ *  企业认证信息提交 
+ * @returns 
+ */
+ export const certificationSaveApi = () => {
+    return useRequest({
+        url: `/v1/mall/company/authentication`,
+        method: "put",
+    })
+}
+
+/**
+ *  企业认证类型枚举列表
+ * @returns 
+ */
+ export const certificationTypeListApi = () => {
+    return useRequest({
+        url: `/v1/mall/enum/companyAuthenticationType`,
+        method: "get",
+    })
+}

src/common/constant.js

@@ -5,11 +5,11 @@
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
 // export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
-// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
+export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket`  // 开发环境
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket`  // 正式环境
-export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
+// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
 // export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添
 // export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
 

src/components/FromListCertification/index.scss

@@ -9,9 +9,9 @@
     font-size: 28px;
     font-weight: 400;
     color: #000000;
-    margin-top: 20px;
+    width: 200px;
-    width: 150px;
     border-right: 1px solid #F0F0F0;
+    display: flex;align-items: center;
   }
   .From-list-certification-label-required::before{
     content: "*";
@@ -19,12 +19,12 @@
     font-size: 28px;
   }
   .From-list-certification-right{
-    width: 506px;
+    min-width: 100px;
+    flex: 1;
     font-size: 26px;
     font-weight: 400;
   }
   .From-list-certification-right-meet{
-    width: 506px;
     min-height: 45px;
     border-radius: 20px;
     box-sizing: border-box;
@@ -69,6 +69,8 @@
   }
   .From-list-certification-right-placeholder{
     color: #ababab;
+    text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
+    width: 100%;
   }
   .From-list-certification-right-enter .icon-a-moreback{
     font-size: 28px;

src/components/FromListCertification/index.tsx

@@ -14,12 +14,13 @@ interface ListParams{
   style?: object, //整行样式
   labelStyle?: object, // label样式
   contentStyle?: object,
-  required?: boolean
+  required?: boolean,
+  showIcon?: boolean, // 是否显示右边的箭头，type=select
 }
 
 // 表单列表
 const FromList = memo((props:ListParams)=>{
-  const {type="input",value="",style={},labelStyle={},contentStyle={},required=false} = props;
+  const {type="input",value="",style={},labelStyle={},contentStyle={},required=false,showIcon=true} = props;
   
   return (
     <View style={style} className="From-list-certification">
@@ -44,7 +45,9 @@ const FromList = memo((props:ListParams)=>{
                     {props.placeholder}
                   </View>
                 }
-                <View className="From-list-certification-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
+                <View className="From-list-certification-right-enter">
+                  {showIcon&&<Text className="iconfont icon-a-moreback"></Text>}
+                </View>
               </>
             }
           </View>

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 {certificationSaveApi, certificationDetailApi} from "@/api/certification"
-import { useEffect, useState } from "react"
+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:"修改码单信息"})
-    }
   },[]);
-  // 获取编辑码单信息
+  // 获取认证信息
-  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,
+      ...detail.data??{},
-      purchaser_name: detail.data.purchaser_name,
+      legal_person_identity_url: detail?.data?.legal_person_identity_url??[],
-      phone: detail.data.phone,
+      // business_license_url: "https://test.cdn.zzfzyc.com/mall/827082e888860dd9da10f0fbb0ac3cf023081456.png"
-      is_default: detail.data.is_default,
+    } as any)
-      id: detail.data.id,
-    })
   }
   // 保存
   const [formData, setFormData] = useState({
-    title: "",
+    authentication_type: 0,
-    purchaser_name: "",
+    authentication_type_name: "",
-    phone: "",
+    business_license_url: "",
-    is_default: false,
+    legal_person: "",
-    id: 0
+    legal_person_identity: "",
-  })
+    legal_person_identity_url: [],
+    name: ""
+  });
   const rules = {
-    title: [{
+    authentication_type: [{
-      message: "请输入抬头"
+      message: "请选择认证类型"
     }],
-    purchaser_name: [{
+    name: [{
-      message: "请输入客户名称"
+      message: "请输入企业名称"
     }],
-    phone: [{
+    business_license_url: [{
-      message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/
+      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;
         }
-  const {fetchData} = weightAddApi()
+        return false;
-  const {fetchData: editFetch} = weightEditApi()
+      }
+    }],
+  }
+  const {fetchData} = certificationSaveApi()
   const handleSave = ()=>{
     retrieval(formData, rules).then(async ()=>{
-      const result = type=="add"?await fetchData({
+      const result = await fetchData({...formData})
-        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.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})}
+        <FromListCertification type="select" onClick={handleSelectTypeModalShow} value={(formData as any)?.authentication_type_name} label="认证类型" placeholder="企业认证"/>
-        value={formData["title"]} label="认证类型" placeholder="企业认证"/>
+        <SelectEnterpriseType ref={selectTypeRef} confirm={handleSelectTypeConfirm} />
-        <FromListCertification onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/>
+        <FromListCertification onInput={(ev:any)=>setFormData({...formData,name:ev.detail.value})} value={formData["name"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/>
-        <FromListCertification style={{border: "0"}} onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业营业" placeholder="注册号、统一社会信用代码、组织机构代码" required/>
+        <FromListCertification type="select" style={{border: "0"}}label="企业营业执照" placeholder="注册号、统一社会信用代码、组织机构代码" required showIcon={false}/>
-        <View className="certification-upload">
+        <View onClick={()=>handleUploadImage("business_license_url")} className="certification-upload">
-          {/* <Text>营业执照正面</Text>
+          {(formData as any)?.business_license_url?
+          <>
+            <Text>营业执照正面</Text>
             <View className="certification-button">
-            <View>查看证件</View>
+              <View onClick={(e)=>handleViewImage(e,(formData as any)?.business_license_url)}>查看证件</View>
               <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 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,title:ev.detail.value})} value={formData["title"]} 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 className="certification-upload">
+        <View onClick={()=>handleUploadImage(0)} className="certification-upload">
-          <Text>身份证正面</Text>
+          {(formData as any)?.legal_person_identity_url[0]?
+            <>
+              <Text>营业执照正面</Text>
               <View className="certification-button">
-            <View>查看证件</View>
+                <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 className="certification-upload">
+          }
-          <Text>身份证反面</Text>
+        </View>
+        <View onClick={()=>handleUploadImage(1)} className="certification-upload">
+          {(formData as any)?.legal_person_identity_url[1]?
+              <>
+                <Text>营业执照正面</Text>
                 <View className="certification-button">
-            <View>查看证件</View>
+                  <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>
+          <Navigator openType="navigateBack">取消</Navigator>
-          <View>提交</View>
+          <View onClick={handleSave}>提交</View>
         </View>
       </View>
     </View>