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 { alert, retrieval } from "@/common/common" import Address from '@/components/address'
import Address from "@/components/address" import FromList from '@/components/FromList'
import FromList from "@/components/FromList" import { Button, Input, Text, Textarea, View } from '@tarojs/components'
import { Button, Input, Text, Textarea, View } from "@tarojs/components" import Taro, { setNavigationBarTitle, useRouter } from '@tarojs/taro'
import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro" import { useEffect, useState } from 'react'
import { useEffect, useState } from "react" import './index.scss'
import "./index.scss" import { addressAddApi, addressDetailApi, addressEditApi } from '@/api/addressManager'
import {addressAddApi, addressDetailApi,addressEditApi} from "@/api/addressManager" import useLogin from '@/use/useLogin'
import useLogin from "@/use/useLogin"
export default () => { 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,
@ -45,64 +44,80 @@ export default ()=>{
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: "请输入正确收货人姓名", {
message: '请输入正确收货人姓名',
// validator: (value:any, rule:any)=>{ // 自定义验证返回true表示匹配到了(错误) // validator: (value:any, rule:any)=>{ // 自定义验证返回true表示匹配到了(错误)
// return value.length>5; // 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,
is_default: formData.is_default
}):await editFetch({
name: formData.name, name: formData.name,
phone: formData.phone, phone: formData.phone,
district_id: formData.district_id, district_id: formData.district_id,
address_detail: formData.address_detail, address_detail: formData.address_detail,
is_default: formData.is_default, is_default: formData.is_default,
id: formData.id })
}); : await editFetch({
name: formData.name,
phone: formData.phone,
district_id: formData.district_id,
address_detail: formData.address_detail,
is_default: formData.is_default,
id: formData.id,
})
if (result.success) { if (result.success) {
Taro.eventCenter.trigger("addressList:refresh"); Taro.eventCenter.trigger('addressList:refresh')
Taro.navigateBack(); Taro.navigateBack()
alert.success("保存成功"); alert.success('保存成功')
} else { } else {
alert.error(result.msg); alert.error(result.msg)
} }
}).catch((message)=>{ })
.catch((message) => {
alert.none(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])
// 设置选择地址 // 设置选择地址
@ -111,31 +126,51 @@ export default ()=>{
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 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>