diff --git a/project.private.config.json b/project.private.config.json index 9d9ee30..7591a0f 100644 --- a/project.private.config.json +++ b/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 } ] } diff --git a/src/api/addressList.ts b/src/api/addressList.ts index 1bed7ec..c713344 100644 --- a/src/api/addressList.ts +++ b/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", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index 1499b6b..34053c4 100644 --- a/src/app.config.ts +++ b/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', diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index cd09aca..a4d047b 100644 --- a/src/components/AddressList/index.tsx +++ b/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 {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 ( { - state?.data?.list?.length>0? - state?.data?.list?.map((item,index)=>{ - // data.length>0? - // data.map((item,index)=>{ - return( - handleDelete(item)} onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}> - - {item.name} - { - item.is_default?默认: - {item.phone.replace(item.phone.substring(3,7), "****")} - } - - - - {item.province_name+item.city_name+item.district_name} - {/* {item.address_detail} */} - + state?.data?.list?.length > 0 ? + state?.data?.list?.map((item, index) => { + // data.length>0? + // data.map((item,index)=>{ + return ( + handleDelete(item)} onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}> + + {item.name} { - item.is_default&&{item.phone.replace(item.phone.substring(3,7), "****")} + item.is_default ? 默认 : + {item.phone.replace(item.phone.substring(3, 7), "****")} } - e.stopPropagation()} url={`/pages/addressAdd/index?type=edit&id=${item.id}`} hoverClass="none" className="address-edit"> - - + + + {item.province_name + item.city_name + item.district_name} + {/* {item.address_detail} */} + + { + item.is_default && {item.phone.replace(item.phone.substring(3, 7), "****")} + } + + e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${642}`} hoverClass="none" className="address-edit"> + + + - - ); - }): - 暂未添加地址 + ); + }) : + 暂未添加地址 } - {addButtonEnabled&&添加收货地址} + {addButtonEnabled && 添加收货地址} ) }) diff --git a/src/pages/addAddress/index.config.ts b/src/pages/addAddress/index.config.ts new file mode 100644 index 0000000..6fc5ca2 --- /dev/null +++ b/src/pages/addAddress/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '新增地址', + } \ No newline at end of file diff --git a/src/pages/addAddress/index.module.scss b/src/pages/addAddress/index.module.scss new file mode 100644 index 0000000..4c6a516 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/pages/addAddress/index.tsx b/src/pages/addAddress/index.tsx new file mode 100644 index 0000000..cae2f14 --- /dev/null +++ b/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( + [ + { + 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 ( + <> + + {itemList.map((item, index) => { + return ( + + + {item.title}* + + 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;' + > + + ) + })} + + + + + + 设置默认地址 + 提醒:下单会优先使用该地址 + + { onChange(e) }} /> + + + { + router.params.type === 'add' && + + + + } + { + router.params.type === 'edit' && + + + + + } +
onClose()} show={showSiteModal} /> + + + ) +} \ No newline at end of file diff --git a/src/pages/addressManager/index.tsx b/src/pages/addressManager/index.tsx index a0ef657..64c258b 100644 --- a/src/pages/addressManager/index.tsx +++ b/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 ( - {/* */} + ) } \ No newline at end of file diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index e3d688d..9e49602 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -133,7 +133,7 @@ .saomiao { margin-right: 24px; - font-size: 26px; + font-size: 40px; color: #000; } }