feat(1):

This commit is contained in:
czm 2022-09-05 18:00:01 +08:00
parent 8c7f25e7f9
commit 133e6414fa
2 changed files with 140 additions and 172 deletions

View File

@ -1,38 +1,37 @@
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, addressEditApi } from '@/api/addressManager'
import useLogin from '@/use/useLogin'
import { alert, retrieval } from "@/common/common" export default () => {
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,addressEditApi} from "@/api/addressManager"
import useLogin from "@/use/useLogin"
export default ()=>{
useLogin() useLogin()
const [showSiteModal, setShowSiteModal] = useState(false); const [showSiteModal, setShowSiteModal] = useState(false)
const {type,id} = useRouter().params; const { type, id } = useRouter().params
useEffect(()=>{ useEffect(() => {
if(type=="add"){ if (type == 'add') {
setNavigationBarTitle({title:"新增收货地址"}) setNavigationBarTitle({ title: '新增收货地址' })
}else{ } else {
initalFormData(); initalFormData()
setNavigationBarTitle({title:"编辑收货地址"}) setNavigationBarTitle({ title: '编辑收货地址' })
} }
},[]) }, [])
// 获取编辑地址信息 // 获取编辑地址信息
const {fetchData: getFromData} = addressDetailApi() const { fetchData: getFromData } = addressDetailApi()
const initalFormData = async ()=>{ const initalFormData = async () => {
const detail = await getFromData({id}); const detail = await getFromData({ id })
const { province_id,province_name,city_id,city_name,district_id,district_name } = detail.data; const { province_id, province_name, city_id, city_name, district_id, district_name } = detail.data
const siteArray = [{id: province_id, name: province_name}]; const siteArray = [{ id: province_id, name: province_name }]
city_id&&siteArray.push({id: city_id, name: city_name}); city_id && siteArray.push({ id: city_id, name: city_name })
district_id&&siteArray.push({id: district_id, name: district_name}); district_id && siteArray.push({ id: district_id, name: district_name })
setFormData({ setFormData({
name: detail.data.name, name: detail.data.name,
phone: detail.data.phone, phone: detail.data.phone,
site: siteArray.map(item=>item.name).join(" "), site: siteArray.map((item) => item.name).join(' '),
siteArray: siteArray as any, siteArray: siteArray as any,
district_id: detail.data.district_id, district_id: detail.data.district_id,
address_detail: detail.data.address_detail, address_detail: detail.data.address_detail,
@ -40,105 +39,141 @@ export default ()=>{
id: detail.data.id, id: detail.data.id,
}) })
} }
const {fetchData} = addressAddApi() const { fetchData } = addressAddApi()
const {fetchData: editFetch} = addressEditApi() const { fetchData: editFetch } = addressEditApi()
// 保存 // 保存
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: "", name: '',
phone:"", phone: '',
site:"", site: '',
siteArray: [], siteArray: [],
district_id:"", district_id: '',
address_detail: "", address_detail: '',
is_default: false, is_default: false,
id: 0 id: 0,
}) })
const rules = { const rules = {
name: [{ name: [
message: "请输入正确收货人姓名", {
// validator: (value:any, rule:any)=>{ // 自定义验证返回true表示匹配到了(错误) message: '请输入正确收货人姓名',
// return value.length>5; // validator: (value:any, rule:any)=>{ // 自定义验证返回true表示匹配到了(错误)
// } // return value.length>5;
}], // }
phone: [{ },
message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/ ],
}], phone: [
district_id: [{ {
message: "请选择地址" message: '请输入正确的电话号码',
}], regex: /^1[3|5|6|9|2|8|7]\d{9}$/,
address_detail: [{ },
message: "请输入详细地址" ],
}], district_id: [
{
message: '请选择地址',
},
],
address_detail: [
{
message: '请输入详细地址',
},
],
} }
const handleSave = ()=>{ const handleSave = () => {
retrieval(formData, rules).then(async ()=>{ retrieval(formData, rules)
const result = type=="add"?await fetchData({ .then(async () => {
name: formData.name, const result =
phone:formData.phone, type == 'add'
district_id:formData.district_id, ? await fetchData({
address_detail: formData.address_detail, name: formData.name,
is_default: formData.is_default phone: formData.phone,
}):await editFetch({ district_id: formData.district_id,
name: formData.name, address_detail: formData.address_detail,
phone:formData.phone, is_default: formData.is_default,
district_id:formData.district_id, })
address_detail: formData.address_detail, : await editFetch({
is_default: formData.is_default, name: formData.name,
id: formData.id phone: formData.phone,
}); district_id: formData.district_id,
if(result.success){ address_detail: formData.address_detail,
Taro.eventCenter.trigger("addressList:refresh"); is_default: formData.is_default,
Taro.navigateBack(); id: formData.id,
alert.success("保存成功"); })
}else{ if (result.success) {
alert.error(result.msg); Taro.eventCenter.trigger('addressList:refresh')
} Taro.navigateBack()
}).catch((message)=>{ alert.success('保存成功')
alert.none(message) } else {
}) alert.error(result.msg)
}
})
.catch((message) => {
alert.none(message)
})
} }
// 监听表单完善 // 监听表单完善
const [hozon, setHozon] = useState(false); const [hozon, setHozon] = useState(false)
useEffect(()=>{ useEffect(() => {
if(retrieval){ if (retrieval) {
retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false)) retrieval(formData)
.then(() => setHozon(true))
.catch(() => setHozon(false))
} }
},[formData]) }, [formData])
// 设置选择地址 // 设置选择地址
const handleSetSite = (ev:any)=>{ const handleSetSite = (ev: any) => {
if(ev.length > 0){ if (ev.length > 0) {
setFormData({ setFormData({
...formData, ...formData,
siteArray: ev, siteArray: ev,
site: ev.map(item=>item.name+" "), site: ev.map((item) => item.name + ' '),
district_id: ev[ev.length-1]?.id district_id: ev[ev.length - 1]?.id,
}) })
}else{ } else {
alert.error("请选择地址"); alert.error('请选择地址')
} }
} }
return ( return (
<View className="add-address"> <View className='add-address'>
<FromList onInput={(ev:any)=>setFormData({...formData,name:ev.detail.value})} value={formData["name"]} label="联系人" placeholder="请输入收货人姓名"/> <FromList
<FromList primordialType="number" onInput={(ev:any)=>setFormData({...formData,phone:ev.detail.value})} value={formData["phone"]} label="联系方式" placeholder="请输入联系方式"/> onInput={(ev: any) => setFormData({ ...formData, name: ev.detail.value })}
<FromList value={formData["site"]} onClick={()=>setShowSiteModal(true)} label="收货地址" type="select" placeholder="请选择/省/市/区"/> value={formData['name']}
<FromList onInput={(ev:any)=>setFormData({...formData,address_detail:ev.detail.value})} value={formData["address_detail"]} label="详细地址" type="textarea" placeholder="请输入详细地址(街道、门牌号等)"/> label='联系人'
<View className="add-address-default"> placeholder='请输入收货人姓名'
/>
<FromList
primordialType='number'
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> <Text></Text>
<View onClick={()=>setFormData({...formData ,is_default: !formData.is_default})}> <View onClick={() => setFormData({ ...formData, is_default: !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-active'>
:<View className="add-address-default-noactive"></View> <Text className='iconfont icon-tick' />
} </View>
) : (
<View className='add-address-default-noactive'></View>
)}
</View> </View>
</View> </View>
<Button style={{"background": hozon?'#007aff':''}} hoverClass="none" className={`add-address-save`} onClick={handleSave}> <Button style={{ background: hozon ? '#007aff' : '' }} hoverClass='none' className={`add-address-save`} onClick={handleSave}>
</Button> </Button>
<Address addressOnChange={handleSetSite} defaultValue={formData.siteArray} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/> <Address addressOnChange={handleSetSite} defaultValue={formData.siteArray} addressOnClose={() => setShowSiteModal(false)} show={showSiteModal} />
</View> </View>
) )
} }

View File

@ -43,9 +43,9 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
//重置数据 //重置数据
useEffect(() => { useEffect(() => {
// const newList = initList(list) const newList = initList(list)
startTransition(() => { startTransition(() => {
// setList([...newList]) setList([...newList])
}) })
condition.current.code_or_name = null condition.current.code_or_name = null
setSearchShow(false) setSearchShow(false)
@ -199,18 +199,6 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
setSearchShow(false) setSearchShow(false)
} }
//格式化金额
const formatPrice = (item) => {
return Number(formatPriceDiv(item[selectList[selectIndex].priceField]))
// return (
// <View className={styles.priceText}>
// <Text>¥</Text>
// {price}
// <Text> /{selectList[selectIndex].eunit}</Text>
// </View>
// )
}
//显示图片弹窗 //显示图片弹窗
const [showLabImage, setShowLabImage] = useState(false) const [showLabImage, setShowLabImage] = useState(false)
const [labImageValue, setLabImageValue] = useState() const [labImageValue, setLabImageValue] = useState()
@ -222,47 +210,6 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
setShowLabImage(() => false) setShowLabImage(() => false)
}, []) }, [])
//虚拟滚动
// const Rows = memo(({ id, index, style, data }: any) => {
// let item = data[index]
// return (
// <>
// {(item && (
// <View className={styles.item} key={item.id}>
// <View className={styles.item_color}>
// <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={false} onClick={getLabAndImg} />
// </View>
// <View className={styles.item_con}>
// <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
// <View className={styles.num}>{formatPrice(item)}</View>
// </View>
// <View className={styles.btn_con}>
// {(!item.show && (
// <View className={styles.btn} onClick={() => onAdd(item)}>
// 添加
// </View>
// )) || (
// <View className={styles.btn_count}>
// <Counter
// otherData={item}
// onBlue={getInputValue}
// defaultNum={item.count}
// step={selectList[selectIndex].step}
// digits={selectList[selectIndex].digits}
// onClickBtn={getInputValue}
// unit={selectList[selectIndex].unit}
// minNum={selectList[selectIndex].minNum}
// maxNum={selectList[selectIndex].maxNum}
// />
// </View>
// )}
// </View>
// </View>
// )) || <View className={styles.item}></View>}
// </>
// )
// })
return ( return (
<View className={styles.shop_cart_main}> <View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}> <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
@ -344,20 +291,6 @@ export default memo(({ show = false, onClose, title = '', productId = 0 }: param
})} })}
</View> </View>
</InfiniteScroll> </InfiniteScroll>
// <View className={styles.color_con}>
// <VirtualList
// className={styles.virtual_list}
// height={400}
// width='100%'
// itemData={list}
// itemCount={list.length + 1}
// itemSize={100}
// overscanCount={1}>
// {Rows}
// </VirtualList>
// <View className='common_safe_area_y'></View>
// </View>
)} )}
{list.length <= 0 && !colorState.loading && <View className={styles.noData}></View>} {list.length <= 0 && !colorState.loading && <View className={styles.noData}></View>}
</View> </View>