🌈 style(eslint): add eslint rules
This commit is contained in:
xuan
@@ -1,3 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '新增地址',
|
||||
}
|
||||
navigationBarTitleText: '新增地址',
|
||||
}
|
||||
|
||||
+319
-321
@@ -1,338 +1,336 @@
|
||||
import { alert } 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 } from "@tarojs/taro"
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import { mppurchaseraddress, mppurchaseraddressget, mppurchaseraddressput, mppurchaseraddressdelect } from '@/api/addressList'
|
||||
import { Button, Input, Switch, Text, Textarea, View } from '@tarojs/components'
|
||||
import Taro, { setNavigationBarTitle, useDidShow, useRouter } from '@tarojs/taro'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import FromList from '@/components/FromList'
|
||||
import Address from '@/components/address'
|
||||
import { alert } from '@/common/common'
|
||||
import { mppurchaseraddress, mppurchaseraddressdelect, mppurchaseraddressget, mppurchaseraddressput } from '@/api/addressList'
|
||||
import { getFilterData } from '@/common/util'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
|
||||
export default () => {
|
||||
const [itemList, setItemList] = useState<any[]>(
|
||||
[
|
||||
{
|
||||
title: '联系人',
|
||||
require: true,
|
||||
placeholderFont: '请输入收货人姓名',
|
||||
type: 'text',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '加工厂',
|
||||
require: false,
|
||||
placeholderFont: '请输入加工厂（选填）',
|
||||
type: 'text',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
require: true,
|
||||
placeholderFont: '请输入联系方式',
|
||||
type: 'number',
|
||||
value: '',
|
||||
maxLength: 11,
|
||||
},
|
||||
{
|
||||
title: '收货地址',
|
||||
require: true,
|
||||
placeholderFont: '请选择/省/市/区',
|
||||
type: 'select',
|
||||
disabled: true,
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '详细地址',
|
||||
require: true,
|
||||
placeholderFont: '请输入详细地址（街道、门牌号等）',
|
||||
type: 'text',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
)
|
||||
|
||||
const [itemList, setItemList] = useState<any[]>(
|
||||
[
|
||||
{
|
||||
title: '联系人',
|
||||
require: true,
|
||||
placeholderFont: '请输入收货人姓名',
|
||||
type: 'text',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '加工厂',
|
||||
require: false,
|
||||
placeholderFont: '请输入加工厂（选填）',
|
||||
type: 'text',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
require: true,
|
||||
placeholderFont: '请输入联系方式',
|
||||
type: 'number',
|
||||
value: '',
|
||||
maxLength: 11
|
||||
},
|
||||
{
|
||||
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[4].value }))
|
||||
}
|
||||
|
||||
const [ischecked, setIsChecked] = useState(false)
|
||||
const onChange = (eq) => {
|
||||
setIsChecked(eq.detail.value)
|
||||
setFormData((e) => ({ ...e, is_default: eq.detail.value, address_detail: itemList[4].value }))
|
||||
const router = useRouter()
|
||||
useDidShow(() => {
|
||||
if (router.params.type === 'add') {
|
||||
setNavigationBarTitle({ title: '新增收货地址' })
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
useDidShow(() => {
|
||||
if (router.params.type === 'add') {
|
||||
setNavigationBarTitle({ title: "新增收货地址" })
|
||||
} else {
|
||||
setFormData((e) => ({ ...e, id: router.params.id as any }))
|
||||
getInfo()
|
||||
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: '',
|
||||
factory: '',
|
||||
})
|
||||
// 获取相应id的信息
|
||||
const { fetchData: infoFetch } = mppurchaseraddressget()
|
||||
const [infoObj, setinfoObj] = useState<any>()
|
||||
const getInfo = async() => {
|
||||
const res = await infoFetch({
|
||||
id: router.params.id,
|
||||
})
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
site: "",
|
||||
siteArray: [],
|
||||
district_id: "",
|
||||
address_detail: "",
|
||||
is_default: false,
|
||||
id: '',
|
||||
factory: '',
|
||||
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,
|
||||
factory: res.data.factory,
|
||||
// purchaser_id: res.data.purchaser_id
|
||||
})
|
||||
setinfoObj(res.data)
|
||||
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
|
||||
}
|
||||
if (item.title === '加工厂') {
|
||||
item.value = res.data.factory
|
||||
}
|
||||
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) => {
|
||||
if (item.require) {
|
||||
return item.value !== ''
|
||||
}
|
||||
})
|
||||
//获取相应id的信息
|
||||
const { fetchData: infoFetch } = mppurchaseraddressget()
|
||||
const [infoObj, setinfoObj] = useState<any>()
|
||||
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,
|
||||
factory: res.data.factory
|
||||
// purchaser_id: res.data.purchaser_id
|
||||
})
|
||||
setinfoObj(res.data)
|
||||
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
|
||||
}
|
||||
if (item.title === '加工厂') {
|
||||
item.value = res.data.factory
|
||||
}
|
||||
return item
|
||||
})
|
||||
setItemList([...itemList])
|
||||
setIsChecked(res.data.is_default)
|
||||
if (obj.length < 4) {
|
||||
canShow = true
|
||||
}
|
||||
else {
|
||||
canShow = false
|
||||
}
|
||||
return canShow
|
||||
}, [itemList])
|
||||
|
||||
const [showSiteModal, setShowSiteModal] = useState(false)
|
||||
|
||||
const handleSetSite = (ev: any) => {
|
||||
const 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)
|
||||
}
|
||||
// `${res.data.province_name} + ${res.data.city_name} + ${res.data.district_name}`
|
||||
setFormData({
|
||||
name: itemList[0]?.value,
|
||||
phone: itemList[2]?.value,
|
||||
site: addressName.join(' '),
|
||||
district_id: ev[ev.length - 1]?.id,
|
||||
is_default: ischecked,
|
||||
address_detail: itemList[4]?.value,
|
||||
id: infoObj?.id ? infoObj?.id : '',
|
||||
siteArray: ev,
|
||||
factory: itemList[1]?.value,
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setFormData(formData)
|
||||
}, [formData])
|
||||
|
||||
const btnDisabled = useMemo(() => {
|
||||
let canShow = false
|
||||
const obj = itemList.filter(item => {
|
||||
if (item.require) {
|
||||
return item.value !== ''
|
||||
}
|
||||
})
|
||||
if (obj.length < 4) {
|
||||
canShow = true
|
||||
} else {
|
||||
canShow = false
|
||||
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(val => ({
|
||||
...val, name: itemList[0].value, phone: itemList[2].value, address_detail: itemList[4].value, factory: itemList[1].value,
|
||||
}))
|
||||
}
|
||||
|
||||
const showModal = (item) => {
|
||||
if (item.type === 'select') {
|
||||
setShowSiteModal(true)
|
||||
}
|
||||
}
|
||||
|
||||
const navBack = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
// 新增地址
|
||||
const { fetchData: addAddressFetch } = mppurchaseraddress()
|
||||
const handAdd = async() => {
|
||||
// if (!btnDisabled) return false
|
||||
const res = await addAddressFetch({ ...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() => {
|
||||
// if (!btnDisabled) return false
|
||||
const res = await putFetch({ ...formData, purchaser_id: Number(router.params.purchaser_id), id: Number(infoObj?.id) })
|
||||
if (res.msg === 'success') {
|
||||
Taro.showToast({
|
||||
title: '成功',
|
||||
icon: 'none',
|
||||
})
|
||||
navBack()
|
||||
}
|
||||
else {
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
})
|
||||
}
|
||||
}
|
||||
// 删除地址
|
||||
const { fetchData: deleteFetch } = mppurchaseraddressdelect()
|
||||
const handleDelete = async() => {
|
||||
Taro.showModal(({
|
||||
title: '提示',
|
||||
content: '是否删除地址？',
|
||||
async success(ev) {
|
||||
if (ev.confirm) {
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
})
|
||||
const result = await deleteFetch({ id: Number(formData.id) })
|
||||
if (result.success) {
|
||||
alert.success('删除成功')
|
||||
Taro.hideLoading()
|
||||
Taro.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
else {
|
||||
alert.error(result.msg)
|
||||
}
|
||||
}
|
||||
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 (
|
||||
<>
|
||||
<View className={styles.main}>
|
||||
{itemList.map((item, index) => {
|
||||
return (
|
||||
<View className={styles.itemBox} key={index}>
|
||||
<View className={styles.leftBox}>
|
||||
{item.title}
|
||||
{
|
||||
item.require && <Text style={{ color: 'red' }}>*</Text>
|
||||
}
|
||||
return it
|
||||
})
|
||||
setItemList([...itemList])
|
||||
setShowSiteModal(false)
|
||||
|
||||
}
|
||||
setFormData({
|
||||
name: itemList[0]?.value,
|
||||
phone: itemList[2]?.value,
|
||||
site: addressName.join(' '),
|
||||
district_id: ev[ev.length - 1]?.id,
|
||||
is_default: ischecked,
|
||||
address_detail: itemList[4]?.value,
|
||||
id: infoObj?.id ? infoObj?.id : '',
|
||||
siteArray: ev,
|
||||
factory: itemList[1]?.value
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
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((val) => ({
|
||||
...val, name: itemList[0].value, phone: itemList[2].value, address_detail: itemList[4].value, factory: itemList[1].value
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
const showModal = (item) => {
|
||||
if (item.type === 'select') {
|
||||
setShowSiteModal(true)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const navBack = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
//新增地址
|
||||
const { fetchData: addAddressFetch } = mppurchaseraddress()
|
||||
const handAdd = async () => {
|
||||
// if (!btnDisabled) return false
|
||||
let res = await addAddressFetch({ ...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 () => {
|
||||
// if (!btnDisabled) return false
|
||||
let res = await putFetch({ ...formData, purchaser_id: Number(router.params.purchaser_id), id: Number(infoObj?.id) })
|
||||
if (res.msg === 'success') {
|
||||
Taro.showToast({
|
||||
title: '成功',
|
||||
icon: "none"
|
||||
})
|
||||
navBack()
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: res.msg
|
||||
})
|
||||
}
|
||||
}
|
||||
// 删除地址
|
||||
const { fetchData: deleteFetch } = mppurchaseraddressdelect()
|
||||
const handleDelete = async () => {
|
||||
Taro.showModal(({
|
||||
title: "提示",
|
||||
content: "是否删除地址？",
|
||||
async success(ev) {
|
||||
if (ev.confirm) {
|
||||
Taro.showLoading({
|
||||
title: '请稍等...'
|
||||
})
|
||||
const result = await deleteFetch({ id: Number(formData.id) });
|
||||
if (result.success) {
|
||||
alert.success("删除成功");
|
||||
Taro.hideLoading()
|
||||
Taro.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
} else {
|
||||
alert.error(result.msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.main}>
|
||||
{itemList.map((item, index) => {
|
||||
return (
|
||||
<View className={styles.itemBox} key={index}>
|
||||
<View className={styles.leftBox}>
|
||||
{item.title}
|
||||
{
|
||||
item.require && <Text style={{ color: 'red' }}>*</Text>
|
||||
}
|
||||
</View>
|
||||
<Input
|
||||
placeholderStyle={styles.placeholderStyle}
|
||||
maxlength={item.maxLength ? 11 : 100}
|
||||
onBlur={(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}
|
||||
></Input>
|
||||
{
|
||||
item.type === 'select' && <IconFont name={'icon-chakanquanbukehu'} color={'#000000'} size={40}></IconFont>
|
||||
}
|
||||
</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>
|
||||
<Input
|
||||
placeholderStyle={styles.placeholderStyle}
|
||||
maxlength={item.maxLength ? 11 : 100}
|
||||
onBlur={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}
|
||||
></Input>
|
||||
{
|
||||
item.type === 'select' && <IconFont name="icon-chakanquanbukehu" color="#000000" size={40}></IconFont>
|
||||
}
|
||||
</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} onClick={() => handleDelete()}>删除</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} />
|
||||
</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} onClick={() => handleDelete()}>删除</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} />
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user