130 lines
4.5 KiB
TypeScript
130 lines
4.5 KiB
TypeScript
|
||
import { alert, retrieval } from "@/common/common"
|
||
import Address from "@/components/address"
|
||
import FromList from "@/components/FromList"
|
||
import { Button, Input, Text, Textarea, View } from "@tarojs/components"
|
||
import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro"
|
||
import { useEffect, useState } from "react"
|
||
import "./index.scss"
|
||
import {addressAddApi, addressDetailApi} from "@/api/addressManager"
|
||
|
||
export default ()=>{
|
||
const [showSiteModal, setShowSiteModal] = useState(false);
|
||
const {type,id} = useRouter().params;
|
||
useEffect(()=>{
|
||
if(type=="add"){
|
||
setNavigationBarTitle({title:"新增收货地址"})
|
||
}else{
|
||
// initalFormData();
|
||
setNavigationBarTitle({title:"编辑收货地址"})
|
||
}
|
||
},[])
|
||
// 获取编辑地址信息
|
||
const {fetchData: getFromData} = addressDetailApi()
|
||
const initalFormData = async ()=>{
|
||
const detail = await getFromData({id});
|
||
const siteArray = []
|
||
// setFormData({
|
||
// name: detail.data.name,
|
||
// phone: detail.data.phone,
|
||
// site: detail.data.,
|
||
// siteArray: [],
|
||
// district_id: detail.data.district_id,
|
||
// address_detail: detail.data.address_detail,
|
||
// is_default: false
|
||
// })
|
||
}
|
||
|
||
const {fetchData, state} = addressAddApi()
|
||
// 保存
|
||
const [formData, setFormData] = useState({
|
||
name: "",
|
||
phone:"",
|
||
site:"",
|
||
siteArray: [],
|
||
district_id:"",
|
||
address_detail: "",
|
||
is_default: false
|
||
})
|
||
const rules = {
|
||
name: [{
|
||
message: "请输入收货人姓名"
|
||
}],
|
||
phone: [{
|
||
message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/
|
||
}],
|
||
district_id: [{
|
||
message: "请选择地址"
|
||
}],
|
||
address_detail: [{
|
||
message: "请输入详细地址"
|
||
}],
|
||
}
|
||
const handleSave = ()=>{
|
||
retrieval(formData, rules).then(async ()=>{
|
||
const result = await fetchData({
|
||
name: formData.name,
|
||
phone:formData.phone,
|
||
site:formData.site,
|
||
district_id:formData.district_id,
|
||
address_detail: formData.address_detail,
|
||
is_default: formData.is_default
|
||
});
|
||
if(result.success){
|
||
alert.success("保存成功")
|
||
}else{
|
||
alert.error(result.msg);
|
||
}
|
||
// Taro.navigateBack();
|
||
}).catch((message)=>{
|
||
alert.none(message)
|
||
})
|
||
}
|
||
// 监听表单完善
|
||
const [hozon, setHozon] = useState(false);
|
||
useEffect(()=>{
|
||
if(retrieval){
|
||
retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false))
|
||
}
|
||
},[formData])
|
||
// 设置选择地址
|
||
const handleSetSite = (ev:any)=>{
|
||
console.log(ev);
|
||
|
||
if(ev.length>=3){
|
||
setFormData({
|
||
...formData,
|
||
siteArray: ev,
|
||
site: ev.map(item=>item.name+" "),
|
||
district_id: ev[ev.length-1]?.id
|
||
})
|
||
}else{
|
||
alert.error("请选择完整地址");
|
||
}
|
||
|
||
}
|
||
|
||
return (
|
||
<View className="add-address">
|
||
<FromList onInput={(ev:any)=>setFormData({...formData,name:ev.detail.value})} value={formData["name"]} label="联系人" placeholder="请输入收货人姓名"/>
|
||
<FromList onInput={(ev:any)=>setFormData({...formData,phone:ev.detail.value})} value={formData["phone"]} label="联系方式" placeholder="请输入联系方式"/>
|
||
<FromList value={formData["site"]} onClick={()=>setShowSiteModal(true)} label="收货地址" type="select" placeholder="请选择/省/市/区"/>
|
||
<FromList onInput={(ev:any)=>setFormData({...formData,address_detail:ev.detail.value})} value={formData["address_detail"]} label="详细地址" type="textarea" placeholder="请输入详细地址（街道、门牌号等）"/>
|
||
<View className="add-address-default">
|
||
<Text>设为默认地址</Text>
|
||
<View onClick={()=>setFormData({...formData ,is_default: !formData.is_default})}>
|
||
{
|
||
formData.is_default?<View className="add-address-default-active"><Text className="iconfont icon-tick"/></View>
|
||
:<View className="add-address-default-noactive"></View>
|
||
}
|
||
</View>
|
||
</View>
|
||
|
||
<Button style={{"background": hozon?'#007aff':''}} hoverClass="none" className={`add-address-save`} onClick={handleSave}>
|
||
保存
|
||
</Button>
|
||
<Address addressOnSelect={handleSetSite} defaultValue={[ {name: "广东省", id: 193}, {name: "佛山市", id: 202}, {name: "高明区", id: 204}]} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
|
||
</View>
|
||
)
|
||
}
|