🦄 refactor:新增编辑收货地址

project.private.config.json

@@ -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
         }
       ]
     }

src/api/addressList.ts

@@ -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",
+    })
+}

src/app.config.ts

@@ -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',

src/components/AddressList/index.tsx

@@ -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 AddressList = memo((props: Params) => {
-  const {addButtonEnabled=true,focusBorderEnabled=false} = props;
+  const { addButtonEnabled = true, focusBorderEnabled = false } = props;
-  const {fetchData, state} = addressListApi()
+  const { fetchData, state } = mppurchaseraddresslist()
   // 获取数据
-  const getData = async ()=>{
+  const getData = async () => {
-    const result = await fetchData();
+    const result = await fetchData({ purchaser_id: props.purchaser_id });
-    if(props.id){
+    if (props.id) {
       setFocusId(props.id as any);
-    }else{
+    } else {
-      result.data.list?.every(item=>{
+      result.data.list?.every(item => {
-        if(item.is_default){
+        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)=>{
+  const handleSelect = (item: any, index: number) => {
-    props.onSelect&&props.onSelect(item,index);
+    props.onSelect && props.onSelect(item, index);
-    if(focusBorderEnabled){
+    if (focusBorderEnabled) {
       setFocusId(item?.id);
     }
   }
   // 删除地址
-  const {fetchData: deleteFetch} = addressDeleteApi()
+  // const { fetchData: deleteFetch } = addressDeleteApi()
-  const handleDelete = (item:any)=>{
+  // const handleDelete = (item: any) => {
-    showModal(({
+  //   showModal(({
-      title: "提示",
+  //     title: "提示",
-      content: "是否删除地址？",
+  //     content: "是否删除地址？",
-      async success(ev){
+  //     async success(ev) {
-        if(ev.confirm){
+  //       if (ev.confirm) {
-          const result = await deleteFetch({id:item.id});
+  //         const result = await deleteFetch({ id: item.id });
-          if(result.success){
+  //         if (result.success) {
-            alert.success("删除成功");
+  //           alert.success("删除成功");
-            getData();
+  //           getData();
-          }else{
+  //         } else {
-            alert.success(result.msg);
+  //           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?.length > 0 ?
-            state?.data?.list?.map((item,index)=>{
+              state?.data?.list?.map((item, index) => {
-            // data.length>0?
+                // data.length>0?
-            // data.map((item,index)=>{
+                // data.map((item,index)=>{
-              return(
+                return (
-                <View onLongPress={()=>handleDelete(item)} onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}>
+                  <View onLongPress={() => handleDelete(item)} onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}>
-                  <View className="address-user">
+                    <View className="address-user">
-                    {item.name}
+                      {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>
                       {
-                        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">
+                    <View className="address-list-bottom">
-                      <Text className="iconfont icon-bianji"></Text>
+                      <View className="address-list-info">
-                    </Navigator>
+                        <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>
   )
 })

src/pages/addAddress/index.config.ts

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

src/pages/addAddress/index.module.scss

@@ -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;
+    }
+}

src/pages/addAddress/index.tsx

@@ -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} />
+
+        </>
+    )
+}

src/pages/addressManager/index.tsx

@@ -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>
   )
 }

src/pages/order/index.module.scss

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