✨ feat:销售码单跳转支付
This commit is contained in:
@@ -6,17 +6,17 @@ import classnames from "classnames";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { GetAddressListApi } from "@/api/addressList";
|
||||
import { alert } from "@/common/common";
|
||||
import IconFont from "../iconfont/iconfont";
|
||||
|
||||
|
||||
type DefaultValueParm = {name: string, id:string|number, level?: number|string}
|
||||
type DefaultValueParm = { name: string, id: string | number, level?: number | string }
|
||||
|
||||
type Params = {
|
||||
addressOnSelect?: (val:DefaultValueParm[]) => void,
|
||||
addressOnChange?: (val:DefaultValueParm[]) => void,
|
||||
addressOnSelect?: (val: DefaultValueParm[]) => void,
|
||||
addressOnChange?: (val: DefaultValueParm[]) => void,
|
||||
addressOnClose?: () => void,
|
||||
show?: true|false,
|
||||
defaultValue?:DefaultValueParm[]
|
||||
selectStatus?: false|true, //false不需要选择完整地址,true需要选择完整地址
|
||||
show?: true | false,
|
||||
defaultValue?: DefaultValueParm[]
|
||||
selectStatus?: false | true, //false不需要选择完整地址,true需要选择完整地址
|
||||
}
|
||||
|
||||
type AddresParam = {
|
||||
@@ -26,7 +26,7 @@ type AddresParam = {
|
||||
level_name?: string,
|
||||
name?: string,
|
||||
parent_id?: number,
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -38,13 +38,13 @@ export default memo(({
|
||||
defaultValue = [],
|
||||
selectStatus = true
|
||||
}: Params) => {
|
||||
//省
|
||||
const provinceList = useRef<AddresParam[]>([])
|
||||
//市
|
||||
const cityList = useRef<AddresParam[]>([])
|
||||
//区
|
||||
const areaList = useRef<AddresParam[]>([])
|
||||
|
||||
//省
|
||||
const provinceList = useRef<AddresParam[]>([])
|
||||
//市
|
||||
const cityList = useRef<AddresParam[]>([])
|
||||
//区
|
||||
const areaList = useRef<AddresParam[]>([])
|
||||
|
||||
const [list, setList] = useState<AddresParam[]>([])
|
||||
const [selectIndex, setSelectIndex] = useState(0) //0 省, 1 市,2 区
|
||||
const [selectId, setSelectId] = useState(1) //选中的id
|
||||
@@ -53,54 +53,54 @@ export default memo(({
|
||||
const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在
|
||||
const [confirmBtnStatus, setConfirmBtnStatus] = useState(false) //确认按钮是否可用
|
||||
|
||||
const [bottomStyle, setBottomStyle] = useState({width:'100rpx',left:'0rpx'}) //底部滚动条样式
|
||||
const [bottomStyle, setBottomStyle] = useState({ width: '100rpx', left: '0rpx' }) //底部滚动条样式
|
||||
|
||||
useEffect(() => {
|
||||
if(selectArr.length == 0) {
|
||||
if (selectArr.length == 0) {
|
||||
setSelectArr(defaultValue)
|
||||
if(defaultValue.length > 1) setCityStatus(true)
|
||||
if(defaultValue.length > 2) setAreaStatus(true)
|
||||
if(defaultValue.length > 0) setConfirmBtnStatus(true)
|
||||
if (defaultValue.length > 1) setCityStatus(true)
|
||||
if (defaultValue.length > 2) setAreaStatus(true)
|
||||
if (defaultValue.length > 0) setConfirmBtnStatus(true)
|
||||
}
|
||||
}, [defaultValue])
|
||||
|
||||
|
||||
//获取地址
|
||||
const {fetchData} = GetAddressListApi()
|
||||
const { fetchData } = GetAddressListApi()
|
||||
useEffect(() => {
|
||||
getProvince()
|
||||
}, [])
|
||||
|
||||
|
||||
//选中内容
|
||||
const selectItem = (item) => {
|
||||
setSelectId(item.id)
|
||||
if(selectIndex == 0) {
|
||||
setSelectArr([{name:item.name, id:item.id, level:item.level}])
|
||||
if (selectIndex == 0) {
|
||||
setSelectArr([{ name: item.name, id: item.id, level: item.level }])
|
||||
getCity(item.id)
|
||||
setAreaStatus(false)
|
||||
setCityStatus(false)
|
||||
} else if(selectIndex == 1){
|
||||
setSelectArr([selectArr[0], {name:item.name, id:item.id, level:item.level}])
|
||||
} else if (selectIndex == 1) {
|
||||
setSelectArr([selectArr[0], { name: item.name, id: item.id, level: item.level }])
|
||||
area(item.id)
|
||||
} else {
|
||||
setSelectArr([selectArr[0], selectArr[1], {name:item.name, id:item.id, level:item.level}])
|
||||
setSelectArr([selectArr[0], selectArr[1], { name: item.name, id: item.id, level: item.level }])
|
||||
getDomDes('#address_tab_2')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
//地址数据
|
||||
useEffect(() => {
|
||||
if(selectArr && selectArr.length > 0)
|
||||
if (selectArr && selectArr.length > 0)
|
||||
addressOnChange?.(selectArr)
|
||||
}, [selectArr])
|
||||
|
||||
|
||||
//选中标题
|
||||
const onSelectIndex = (index) => {
|
||||
setSelectIndex(index)
|
||||
const selectid = selectArr[index]?selectArr[index].id:0
|
||||
const selectid = selectArr[index] ? selectArr[index].id : 0
|
||||
setSelectId(selectid as number)
|
||||
if(index == 0) {
|
||||
if (index == 0) {
|
||||
getProvince()
|
||||
} else if (index == 1) {
|
||||
const id = selectArr[0]?.id
|
||||
@@ -114,9 +114,9 @@ export default memo(({
|
||||
|
||||
//获取省
|
||||
const getProvince = async () => {
|
||||
let res = await fetchData({parent_id: 1})
|
||||
provinceList.current = res.data.list||[]
|
||||
if(provinceList.current.length > 0) {
|
||||
let res = await fetchData({ parent_id: 1 })
|
||||
provinceList.current = res.data.list || []
|
||||
if (provinceList.current.length > 0) {
|
||||
setSelectIndex(0)
|
||||
setList(() => provinceList.current)
|
||||
getDomDes('#address_tab_0')
|
||||
@@ -125,9 +125,9 @@ export default memo(({
|
||||
|
||||
//获取市
|
||||
const getCity = async (id) => {
|
||||
let res = await fetchData({parent_id: id})
|
||||
cityList.current = res.data.list||[]
|
||||
if(cityList.current.length > 0) {
|
||||
let res = await fetchData({ parent_id: id })
|
||||
cityList.current = res.data.list || []
|
||||
if (cityList.current.length > 0) {
|
||||
setSelectIndex(1)
|
||||
setList(() => cityList.current)
|
||||
setCityStatus(true)
|
||||
@@ -141,9 +141,9 @@ export default memo(({
|
||||
|
||||
//获取区
|
||||
const area = async (id) => {
|
||||
let res = await fetchData({parent_id: id})
|
||||
areaList.current = res.data.list||[]
|
||||
if(areaList.current.length > 0) {
|
||||
let res = await fetchData({ parent_id: id })
|
||||
areaList.current = res.data.list || []
|
||||
if (areaList.current.length > 0) {
|
||||
setSelectIndex(2)
|
||||
setList(() => areaList.current)
|
||||
setAreaStatus(true)
|
||||
@@ -165,7 +165,7 @@ export default memo(({
|
||||
const getDomDes = (id) => {
|
||||
setTimeout(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select(id).boundingClientRect(rect=>{
|
||||
query.select(id).boundingClientRect(rect => {
|
||||
let left = rect.left;
|
||||
let clientWidth = rect.width;
|
||||
console.log(clientWidth)
|
||||
@@ -180,7 +180,7 @@ export default memo(({
|
||||
//点击标题栏
|
||||
const selectTab = (index) => {
|
||||
onSelectIndex(index)
|
||||
getDomDes('#address_tab_'+index)
|
||||
getDomDes('#address_tab_' + index)
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -192,9 +192,9 @@ export default memo(({
|
||||
<View onClick={() => submitSelect()}>确定</View>
|
||||
</View>
|
||||
<View className={styles.address_select}>
|
||||
<View id="address_tab_0" onClick={() => selectTab(0)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 0)})}>{selectArr[0]?selectArr[0].name:'请选择'}</View>
|
||||
{cityStatus&&<View id="address_tab_1" onClick={() => selectTab(1)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 1)})}>{selectArr[1]?selectArr[1].name:'请选择'}</View>}
|
||||
{areaStatus&&<View id="address_tab_2" onClick={() => selectTab(2)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 2)})}>{selectArr[2]?selectArr[2].name:'请选择'}</View>}
|
||||
<View id="address_tab_0" onClick={() => selectTab(0)} className={classnames(styles.address_item, { [styles.addresst_select]: (selectIndex == 0) })}>{selectArr[0] ? selectArr[0].name : '请选择'}</View>
|
||||
{cityStatus && <View id="address_tab_1" onClick={() => selectTab(1)} className={classnames(styles.address_item, { [styles.addresst_select]: (selectIndex == 1) })}>{selectArr[1] ? selectArr[1].name : '请选择'}</View>}
|
||||
{areaStatus && <View id="address_tab_2" onClick={() => selectTab(2)} className={classnames(styles.address_item, { [styles.addresst_select]: (selectIndex == 2) })}>{selectArr[2] ? selectArr[2].name : '请选择'}</View>}
|
||||
<View style={bottomStyle} className={styles.bottom_index}></View>
|
||||
</View>
|
||||
<View className={styles.address_list}>
|
||||
@@ -202,9 +202,11 @@ export default memo(({
|
||||
<View className={styles.address_scroll_list}>
|
||||
{list.map(item => {
|
||||
return (
|
||||
<View onClick={() => selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}>
|
||||
<View onClick={() => selectItem(item)} className={classnames(styles.address_list_item, { [styles.addresst_select]: (selectId == item.id) })}>
|
||||
<View className={styles.address_list_item_name}>{item.name}</View>
|
||||
{(selectArr[selectIndex]?.id == item.id)&&<View className={`iconfont icon-lujing ${styles.address_iconfont}` }></View>}
|
||||
{(selectArr[selectIndex]?.id == item.id) &&
|
||||
<IconFont name={'icon-lujing'} color={'#327fff'} size={30}></IconFont>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
|
||||
.loadingCard_main{
|
||||
.loadingCard_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
.loading_text{
|
||||
|
||||
.loading_text {
|
||||
font-size: 26px;
|
||||
margin-top: 20px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
|
||||
.pic {
|
||||
margin-bottom: 20px;
|
||||
width: 410px;
|
||||
height: 268px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,21 +1,24 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { View, Image } from "@tarojs/components"
|
||||
import Loading from "@/components/loading"
|
||||
import style from "./index.module.scss"
|
||||
import { memo } from "react";
|
||||
|
||||
type Params = {
|
||||
title?: string,
|
||||
loadingIcon?: false|true
|
||||
loadingIcon?: false | true
|
||||
}
|
||||
export default memo(({
|
||||
title = "加载中...", //显示的文字
|
||||
loadingIcon = true //是否显示加载图标
|
||||
}:Params) => {
|
||||
}: Params) => {
|
||||
console.log('loadingCard:::')
|
||||
return (
|
||||
<>
|
||||
<View className={style.loadingCard_main}>
|
||||
{loadingIcon&&<Loading/>}
|
||||
{loadingIcon && <Loading />}
|
||||
{
|
||||
!loadingIcon && <Image className={style.pic} mode='aspectFill' lazyLoad src={'https://cdn.zzfzyc.com/empty.png'}></Image>
|
||||
}
|
||||
<View className={style.loading_text}>{title}</View>
|
||||
</View>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user