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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/addAddress/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '新增地址',
}
src/pages/addAddress/index.module.scss
+207
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;
}
}
src/pages/addAddress/index.tsx
+287
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} />
</>
)
}