xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🦄 refactor:新增编辑收货地址

Browse Source
This commit is contained in:
Haiyi 2022-09-09 17:46:02 +08:00
parent afaad76fe3
commit f6a69a3ea6
9 changed files with 607 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
project.private.config.json
View File

@ -42,6 +42,20 @@
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/addressManager/index",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/addAddress/index",
"query": "type=add",
"launchMode": "default",
"scene": null
}
]
}

25
src/api/addressList.ts
View File

@ -4,9 +4,9 @@ import { useRequest } from "@/use/useHttp"
/**
* 获取行政地区列表
*/
export const GetAddressListApi = () => {
export const GetAddressListApi = () => {
return useRequest({
url: `/v1/mall/district/list`,
url: `/v1/mp/district/list`,
method: "get",
})
}
@ -18,3 +18,24 @@ export const mppurchaseraddresslist = () => {
method: "get",
})
}
//新增客户地址
export const mppurchaseraddress = () => {
return useRequest({
url: `/v1/mp/purchaser/address`,
method: "post",
})
}
//获取编辑地址信息
export const mppurchaseraddressget = () => {
return useRequest({
url: `/v1/mp/purchaser/address`,
method: "get",
})
}
//编辑收货地址信息
export const mppurchaseraddressput = () => {
return useRequest({
url: `/v1/mp/purchaser/address`,
method: "put",
})
}

3
src/app.config.ts
View File

@ -9,7 +9,8 @@ export default defineAppConfig({
'pages/saleuserPage/index',
'pages/user/index',
'pages/orderDetails/index',
'pages/addressManager/index'
'pages/addressManager/index',
'pages/addAddress/index',
],
window: {
backgroundTextStyle: 'light',

135
src/components/AddressList/index.tsx
View File

@ -2,30 +2,31 @@
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import "./index.scss"
// import {addressListApi,addressDeleteApi} from "@/api/addressList"
import { mppurchaseraddresslist } from "@/api/addressList"
import { alert } from "@/common/common"
import Taro, { showModal } from "@tarojs/taro"
import Taro, { showModal, useDidShow } from "@tarojs/taro"
interface Params{
interface Params {
refresherEnabled?: boolean,//是否开启刷新
onSelect?: (item:any,index:number)=>void,//列表选择
onSelect?: (item: any, index: number) => void,//列表选择
addButtonEnabled?: boolean, //是否显示添加按钮
focusBorderEnabled?: boolean, //焦点显示蓝色边框
id?: number, //默认选择值
id?: number, //默认选择值,
purchaser_id: Number
}
// 地址列表
const AddressList = memo((props:Params)=>{
const {addButtonEnabled=true,focusBorderEnabled=false} = props;
const {fetchData, state} = addressListApi()
const AddressList = memo((props: Params) => {
const { addButtonEnabled = true, focusBorderEnabled = false } = props;
const { fetchData, state } = mppurchaseraddresslist()
// 获取数据
const getData = async ()=>{
const result = await fetchData();
if(props.id){
const getData = async () => {
const result = await fetchData({ purchaser_id: props.purchaser_id });
if (props.id) {
setFocusId(props.id as any);
}else{
result.data.list?.every(item=>{
if(item.is_default){
} else {
result.data.list?.every(item => {
if (item.is_default) {
setFocusId(item.id);
return false;
}
@ -33,90 +34,90 @@ const AddressList = memo((props:Params)=>{
})
}
}
useEffect(()=>{
useDidShow(() => {
getData();
// 监听刷新
Taro.eventCenter.on("addressList:refresh", getData);
return ()=>{
return () => {
Taro.eventCenter.off("addressList:refresh", getData);
}
},[])
})
// 处理刷新
const [refreshState, setRefreshState] = useState(false);
const handleRefresh = async ()=>{
const handleRefresh = async () => {
setRefreshState(true);
await getData();
setRefreshState(false);
}
const data = Array.from({length:15});
const data = Array.from({ length: 15 });
// 焦点
const [focusId, setFocusId] = useState();
// 列表选择
const handleSelect = (item: any, index: number)=>{
props.onSelect&&props.onSelect(item,index);
if(focusBorderEnabled){
const handleSelect = (item: any, index: number) => {
props.onSelect && props.onSelect(item, index);
if (focusBorderEnabled) {
setFocusId(item?.id);
}
}
// 删除地址
const {fetchData: deleteFetch} = addressDeleteApi()
const handleDelete = (item:any)=>{
showModal(({
title: "提示",
content: "是否删除地址？",
async success(ev){
if(ev.confirm){
const result = await deleteFetch({id:item.id});
if(result.success){
alert.success("删除成功");
getData();
}else{
alert.success(result.msg);
}
}
}
}))
}
// const { fetchData: deleteFetch } = addressDeleteApi()
// const handleDelete = (item: any) => {
// showModal(({
// title: "提示",
// content: "是否删除地址？",
// async success(ev) {
// if (ev.confirm) {
// const result = await deleteFetch({ id: item.id });
// if (result.success) {
// alert.success("删除成功");
// getData();
// } else {
// alert.success(result.msg);
// }
// }
// }
// }))
// }
return (
<View className="address-scroll-view">
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
<View className="address-scroll-view-content">
{
state?.data?.list?.length>0?
state?.data?.list?.map((item,index)=>{
// data.length>0?
// data.map((item,index)=>{
return(
<View onLongPress={()=>handleDelete(item)} onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}>
<View className="address-user">
{item.name}
{
item.is_default?<Text className="address-list-default">默认</Text>:
<Text className="address-list-phone">{item.phone.replace(item.phone.substring(3,7), "****")}</Text>
}
</View>
<View className="address-list-bottom">
<View className="address-list-info">
<View>{item.province_name+item.city_name+item.district_name}
{/* {item.address_detail} */}
</View>
state?.data?.list?.length > 0 ?
state?.data?.list?.map((item, index) => {
// data.length>0?
// data.map((item,index)=>{
return (
<View onLongPress={() => handleDelete(item)} onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}>
<View className="address-user">
{item.name}
{
item.is_default&&<Text className="address-list-phone">{item.phone.replace(item.phone.substring(3,7), "****")}</Text>
item.is_default ? <Text className="address-list-default">默认</Text> :
<Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
}
</View>
<Navigator onClick={e=>e.stopPropagation()} url={`/pages/addressAdd/index?type=edit&id=${item.id}`} hoverClass="none" className="address-edit">
<Text className="iconfont icon-bianji"></Text>
</Navigator>
<View className="address-list-bottom">
<View className="address-list-info">
<View>{item.province_name + item.city_name + item.district_name}
{/* {item.address_detail} */}
</View>
{
item.is_default && <Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
}
</View>
<Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${642}`} hoverClass="none" className="address-edit">
<Text className="iconfont icon-bianji"></Text>
</Navigator>
</View>
</View>
</View>
);
}):
<View className="address-no-data">暂未添加地址</View>
);
}) :
<View className="address-no-data">暂未添加地址</View>
}
</View>
</ScrollView>
{addButtonEnabled&&<Navigator url="/pages/addressAdd/index?type=add" hoverClass="none" className="add-address">添加收货地址</Navigator>}
{addButtonEnabled && <Navigator url={`/pages/addAddress/index?type=add&purchaser_id=${642}`} hoverClass="none" className="add-address">添加收货地址</Navigator>}
</View>
)
})

3
src/pages/addAddress/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '新增地址',
}

207
src/pages/addAddress/index.module.scss Normal file
View File

@ -0,0 +1,207 @@
.main {
background: #FFFFFF;
border-radius: 16px;
margin: 24px;
padding: 40px 32px 50px 32px;
.itemBox {
display: flex;
align-items: center;
padding-bottom: 40px;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 40px;
.leftBox {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
display: flex;
align-items: center;
margin-right: 50px;
}
.inputClass {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
}
.itemBox:first-child {
display: flex;
align-items: center;
padding-bottom: 40px;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 40px;
.leftBox {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
display: flex;
align-items: center;
padding-right: 25px;
}
.inputClass {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.itemBox:last-child {
display: flex;
align-items: center;
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: none;
.leftBox {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
display: flex;
align-items: center;
margin-right: 50px;
}
.inputClass {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.checkBox {
margin-left: 32px;
margin-top: 24px;
width: 702px;
height: 120px;
background: #FFFFFF;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
.leftCheck {
margin-left: 32px;
.topFont {
margin-top: 24px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.bottomFont {
margin-top: 8px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
}
.bottomBox {
width: 750px;
height: 160px;
background: #FFFFFF;
bottom: 0;
padding-top: 14px;
position: fixed;
display: flex;
.btn {
margin-left: 32px;
width: 702px;
height: 80px;
background: #337FFF;
border-radius: 44px;
opacity: 0.5;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.adtiveBtns {
margin-left: 32px;
width: 702px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.delectBox {
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087EFF;
margin-left: 48px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
text-align: center;
line-height: 80px;
}
.nobtn {
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
opacity: 0.5;
margin-left: 32px;
text-align: center;
line-height: 80px;
font-size: 28px;
color: FFFFFF;
}
.sureBox {
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left: 32px;
text-align: center;
line-height: 80px;
}
}

287
src/pages/addAddress/index.tsx Normal file
View File

@ -0,0 +1,287 @@
import { alert, retrieval } from "@/common/common"
import Address from "@/components/address"
import FromList from "@/components/FromList"
import { Button, Input, Text, Textarea, View, Switch } from "@tarojs/components"
import Taro, { setNavigationBarTitle, useDidShow, useRouter, showToast } from "@tarojs/taro"
import { useEffect, useMemo, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import { mppurchaseraddress, mppurchaseraddressget, mppurchaseraddressput } from '@/api/addressList'
import { getFilterData } from '@/common/util'
import search from "@/components/search"
export default () => {
const [itemList, setItemList] = useState<any[]>(
[
{
title: '联系人',
require: true,
placeholderFont: '请输入收货人姓名',
type: 'text',
value: '',
},
{
title: '联系方式',
require: true,
placeholderFont: '请输入联系方式',
type: 'number',
value: '',
},
{
title: '收货地址',
require: true,
placeholderFont: '请选择/省/市/区',
type: 'select',
disabled: true,
value: '',
},
{
title: '详细地址',
require: true,
placeholderFont: '请输入详细地址（街道、门牌号等）',
type: 'text',
value: '',
}
]
)
const [ischecked, setIsChecked] = useState(false)
const onChange = (eq) => {
setIsChecked(eq.detail.value)
setFormData((e) => ({ ...e, is_default: eq.detail.value, address_detail: itemList[3].value }))
}
const router = useRouter()
useDidShow(() => {
if (router.params.type === 'add') {
setNavigationBarTitle({ title: "新增收货地址" })
} else {
setFormData((e) => ({ ...e, id: router.params.id as any }))
getInfo()
setNavigationBarTitle({ title: "编辑收货地址" })
}
})
const [formData, setFormData] = useState({
name: "",
phone: "",
site: "",
siteArray: [],
district_id: "",
address_detail: "",
is_default: false,
id: '',
})
//获取相应id的信息
const { fetchData: infoFetch } = mppurchaseraddressget()
const getInfo = async () => {
let res = await infoFetch({
id: router.params.id,
})
if (res.data) {
let arr: any[] = []
arr = [
{ id: res.data.province_id, name: res.data.province_name },
{ id: res.data.city_id, name: res.data.city_name },
{ id: res.data.district_id, name: res.data.district_name }
]
setFormData({
name: res.data.name,
phone: res.data.phone,
site: res.data.province_name + res.data.city_name + res.data.district_name,
siteArray: arr as any,
address_detail: res.data.address_detail,
district_id: res.data.district_id,
is_default: res.data.is_default,
id: res.data.id,
// purchaser_id: res.data.purchaser_id
})
itemList.map(item => {
if (item.title === '联系人') {
item.value = res.data.name
}
if (item.title === '联系方式') {
item.value = res.data.phone
}
if (item.title === '收货地址') {
item.value = res.data.province_name, res.data.city_name, res.data.district_name
}
if (item.title === '详细地址') {
item.value = res.data.address_detail
}
return item
})
setItemList([...itemList])
setIsChecked(res.data.is_default)
}
}
// `${res.data.province_name} + ${res.data.city_name} + ${res.data.district_name}`
const btnDisabled = useMemo(() => {
let canShow = false
const obj = itemList.filter(item => {
return item.value !== ''
})
if (obj.length !== 4) {
canShow = true
} else {
canShow = false
}
return canShow
}, [itemList])
const [showSiteModal, setShowSiteModal] = useState(false);
const handleSetSite = (ev: any) => {
var addressName: any = []
ev.forEach(v => {
addressName.push(v.name)
})
if (ev.length === 3) {
itemList.map(it => {
if (it.type === 'select') {
it.value = addressName
}
return it
})
setItemList([...itemList])
setShowSiteModal(false)
}
setFormData({
name: itemList[0]?.value,
phone: itemList[1]?.value,
site: addressName.join(' '),
district_id: ev[ev.length - 1]?.id,
is_default: ischecked,
address_detail: itemList[3]?.value,
id: router.params.id ? router.params.id : '',
siteArray: ev
})
}
useEffect(() => {
setFormData(formData)
}, [formData])
useEffect(() => {
setItemList(itemList)
}, [itemList])
const onClose = () => {
setShowSiteModal(false)
}
const changeInput = (e, item) => {
itemList.map(it => {
if (it.title === item.title) {
it.value = e.detail.value
}
return it
})
setItemList([...itemList])
setFormData((e) => ({ ...e, name: itemList[0].value, phone: itemList[1].value, address_detail: itemList[3].value }))
}
const showModal = (item) => {
if (item.type === 'select') {
setShowSiteModal(true)
}
}
const navBack = () => {
Taro.navigateBack({
delta: 1
})
}
//新增地址
const { fetchData: addAddressFetch } = mppurchaseraddress()
const handAdd = async () => {
let res = await addAddressFetch({ ...getFilterData(formData), purchaser_id: Number(router.params.purchaser_id) })
if (res.data) {
Taro.showToast({
title: '成功',
icon: "none"
})
navBack()
} else {
Taro.showToast({
title: res.msg
})
}
}
// 编辑地址
const { fetchData: putFetch } = mppurchaseraddressput()
const handEdit = async () => {
let res = await putFetch({ ...getFilterData(formData), purchaser_id: Number(router.params.purchaser_id), id: Number(router.params.purchaser_id) })
if (res.msg === 'success') {
Taro.showToast({
title: '成功',
icon: "none"
})
navBack()
} else {
Taro.showToast({
title: res.msg
})
}
}
return (
<>
<View className={styles.main}>
{itemList.map((item, index) => {
return (
<View className={styles.itemBox} key={index}>
<View className={styles.leftBox}>
{item.title}<Text style={{ color: 'red' }}>*</Text>
</View>
<Input
onInput={(e) => changeInput(e, item)}
type={item.type}
onClick={() => showModal(item)}
style={{ width: '212px' }}
disabled={item.disabled}
placeholder={item.placeholderFont}
value={item.value}
className={styles.inputClass}
placeholderStyle='font-size: 28rpx;color: #000000;'
></Input>
</View>
)
})}
</View>
<View className={styles.checkBox}>
<View className={styles.leftCheck}>
<View className={styles.topFont}>设置默认地址</View>
<View className={styles.bottomFont}>提醒：下单会优先使用该地址</View>
</View>
<Switch checked={ischecked} color={'#337fff'} onChange={(e) => { onChange(e) }} />
</View>
{
router.params.type === 'add' &&
<View className={styles.bottomBox}>
<Button disabled={btnDisabled} onClick={() => handAdd()} className={classnames(btnDisabled ? styles.btn : styles.adtiveBtns)}>保存</Button>
</View>
}
{
router.params.type === 'edit' &&
<View className={styles.bottomBox}>
<Button className={styles.delectBox} >删除</Button>
<Button onClick={() => handEdit()} disabled={btnDisabled} className={classnames(btnDisabled ? styles.nobtn : styles.sureBox)} >确认</Button>
</View>
}
<Address addressOnChange={handleSetSite} defaultValue={formData.siteArray} addressOnClose={() => onClose()} show={showSiteModal} />
</>
)
}

4
src/pages/addressManager/index.tsx
View File

@ -5,10 +5,10 @@ import { stopPullDownRefresh, usePullDownRefresh } from "@tarojs/taro"
import { useState } from "react"
import "./index.scss"
export default ()=>{
export default () => {
return (
<View className="address-manager">
{/* <AddressList refresherEnabled={true}/> */}
<AddressList refresherEnabled={true} purchaser_id={642} />
</View>
)
}

2
src/pages/order/index.module.scss
View File

@ -133,7 +133,7 @@
.saomiao {
margin-right: 24px;
font-size: 26px;
font-size: 40px;
color: #000;
}
}