From f6f2ce9e9509a6931c5818e64d030141db173f7c Mon Sep 17 00:00:00 2001 From: li tong bao <2903733959@qq.com> Date: Thu, 23 Jun 2022 16:56:25 +0800 Subject: [PATCH] =?UTF-8?q?--=E4=BC=81=E4=B8=9A=E8=AE=A4=E8=AF=8150%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/certification.ts | 34 +++ src/common/constant.js | 4 +- .../FromListCertification/index.scss | 10 +- .../FromListCertification/index.tsx | 9 +- .../components/SelectEnterpriseType.scss | 22 ++ .../components/SelectEnterpriseType.tsx | 56 +++++ src/pages/certification/index.scss | 15 +- src/pages/certification/index.tsx | 206 +++++++++++------- src/pages/userEdit/components/ModifyModal.tsx | 22 +- 9 files changed, 281 insertions(+), 97 deletions(-) create mode 100644 src/api/certification.ts create mode 100644 src/pages/certification/components/SelectEnterpriseType.scss create mode 100644 src/pages/certification/components/SelectEnterpriseType.tsx diff --git a/src/api/certification.ts b/src/api/certification.ts new file mode 100644 index 0000000..02e6d60 --- /dev/null +++ b/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", + }) +} \ No newline at end of file diff --git a/src/common/constant.js b/src/common/constant.js index 35b004c..2f4fa08 100644 --- a/src/common/constant.js +++ b/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` // 杰 diff --git a/src/components/FromListCertification/index.scss b/src/components/FromListCertification/index.scss index fc0ed5a..b2e4f71 100644 --- a/src/components/FromListCertification/index.scss +++ b/src/components/FromListCertification/index.scss @@ -9,9 +9,9 @@ font-size: 28px; font-weight: 400; color: #000000; - margin-top: 20px; - width: 150px; + width: 200px; 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; diff --git a/src/components/FromListCertification/index.tsx b/src/components/FromListCertification/index.tsx index 3017860..333fdc6 100644 --- a/src/components/FromListCertification/index.tsx +++ b/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 ( @@ -44,7 +45,9 @@ const FromList = memo((props:ListParams)=>{ {props.placeholder} } - + + {showIcon&&} + } diff --git a/src/pages/certification/components/SelectEnterpriseType.scss b/src/pages/certification/components/SelectEnterpriseType.scss new file mode 100644 index 0000000..f18cf81 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/pages/certification/components/SelectEnterpriseType.tsx b/src/pages/certification/components/SelectEnterpriseType.tsx new file mode 100644 index 0000000..acf9598 --- /dev/null +++ b/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 ( + + setModalShow(false)}> + + setModalShow(false)}>取消 + 确定 + + + { + state.data?.list?.map((item,index)=>{ + return handleSelect(item)} key={index}> + {item.name} + {item.id==(selected as any).id?:} + + }) + } + + + + ) +}) diff --git a/src/pages/certification/index.scss b/src/pages/certification/index.scss index 441d16b..a6c7bcf 100644 --- a/src/pages/certification/index.scss +++ b/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; diff --git a/src/pages/certification/index.tsx b/src/pages/certification/index.tsx index 0d0767d..b468626 100644 --- a/src/pages/certification/index.tsx +++ b/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 ( - + {/* */} 企业认证 - setFormData({...formData,title:ev.detail.value})} - value={formData["title"]} label="认证类型" placeholder="企业认证"/> - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/> - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业营业" placeholder="注册号、统一社会信用代码、组织机构代码" required/> - - {/* 营业执照正面 - - 查看证件 - 重新上传 - */} + + + setFormData({...formData,name:ev.detail.value})} value={formData["name"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/> + + handleUploadImage("business_license_url")} className="certification-upload"> + {(formData as any)?.business_license_url? + <> + 营业执照正面 + + handleViewImage(e,(formData as any)?.business_license_url)}>查看证件 + 重新上传 + + + : + - 上传营业执照下面 + 上传营业执照正面 + } 法人认证 - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人代表" placeholder="填写法人名称" required/> - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人身份" placeholder="填写法人代表身份证号" required/> - - 身份证正面 - - 查看证件 - 重新上传 - + setFormData({...formData,legal_person:ev.detail.value})} value={formData["legal_person"]} label="法人代表" placeholder="填写法人名称" required/> + setFormData({...formData,legal_person_identity:ev.detail.value})} value={formData["legal_person_identity"]} label="法人身份" placeholder="填写法人代表身份证号" required/> + handleUploadImage(0)} className="certification-upload"> + {(formData as any)?.legal_person_identity_url[0]? + <> + 营业执照正面 + + handleViewImage(e,(formData as any)?.legal_person_identity_url[0])}>查看证件 + 重新上传 + + + : + + + + 上传身份证正面 + + } - - 身份证反面 - - 查看证件 - 重新上传 - + handleUploadImage(1)} className="certification-upload"> + {(formData as any)?.legal_person_identity_url[1]? + <> + 营业执照正面 + + handleViewImage(e,(formData as any)?.legal_person_identity_url[1])}>查看证件 + 重新上传 + + + : + + + + 上传身份证正面 + + } - 取消 - 提交 + 取消 + 提交 diff --git a/src/pages/userEdit/components/ModifyModal.tsx b/src/pages/userEdit/components/ModifyModal.tsx index 0e51ac1..22c9db5 100644 --- a/src/pages/userEdit/components/ModifyModal.tsx +++ b/src/pages/userEdit/components/ModifyModal.tsx @@ -33,17 +33,17 @@ export default memo(forwardRef((props:any,ref)=>{ useImperativeHandle(ref, ()=>({setModalShow})) return ( setModalShow(false)} title={title} show={modalShow}> - - -