--我的页面完成部分
This commit is contained in:
li tong bao
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '认证信息',
|
||||
enableShareAppMessage: true,
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
.certification{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F0F0F0;
|
||||
padding-bottom: 300px;
|
||||
.certification-content{
|
||||
background-color: white;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.certification-content:nth-of-type(3){
|
||||
margin-top: 18px;
|
||||
}
|
||||
.certification-title{
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin-left: 30px;
|
||||
padding-top: 40px;
|
||||
color: #000000;
|
||||
// border-top: 18px solid #F0F0F0;
|
||||
}
|
||||
.certification-upload{
|
||||
width: 642px;
|
||||
height: 316px;
|
||||
border: 10px solid #cde5ff;
|
||||
border-radius: 30px;
|
||||
margin: 0 auto;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: #68b4ff;
|
||||
background-color: #ECF5FF;
|
||||
position: relative;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.certification-upload text{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.certification-upload-no{
|
||||
display: flex;flex-direction: column;align-items: center;
|
||||
}
|
||||
.certification-upload-no-icon{
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
background: #68b4ff;
|
||||
box-shadow: 0px 0px 12px 0px #68b4ff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
}
|
||||
.certification-upload-no-tips{
|
||||
margin-top: 30px;
|
||||
border-radius: 30px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.certification-button{
|
||||
position: absolute;bottom: -10px;left: -10px;right: -10px;
|
||||
background-color: #858A8F;
|
||||
display: flex;
|
||||
height: 86px;
|
||||
border-radius: 0 0 30px 30px;
|
||||
}
|
||||
.certification-button view{
|
||||
flex: 1;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
.certification-button view:first-child{
|
||||
border-right: 1px solid #CCCCCC;
|
||||
}
|
||||
.certification-footer{
|
||||
width: 750px;
|
||||
height: 174px;
|
||||
background: #ffffff;
|
||||
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
|
||||
position: fixed;bottom: 0;left: 0;right: 0;
|
||||
width: 100%;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
}
|
||||
.certification-footer-button{
|
||||
width: 696px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
display: flex;
|
||||
border-radius: 40px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.certification-footer-button view{
|
||||
flex: 1;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
}
|
||||
.certification-footer-button view:last-child{
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user