✨ feat:销售码单跳转支付

This commit is contained in:
Haiyi
2022-10-19 17:37:24 +08:00
parent 4b75ef1493
commit 42c5bb0952
7 changed files with 76 additions and 61 deletions
+50 -48
View File
@@ -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>
)
})}
+10 -3
View File
@@ -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;
}
}
+7 -4
View File
@@ -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>
</>