🌈 style(eslint): add eslint rules
This commit is contained in:
xuan
@@ -1,117 +1,119 @@
|
||||
|
||||
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
|
||||
import { memo, useEffect, useState, forwardRef, useImperativeHandle } from "react"
|
||||
import "./index.scss"
|
||||
import { mppurchaseraddresslist } from "@/api/addressList"
|
||||
import { alert } from "@/common/common"
|
||||
import Taro, { showModal, useDidShow, useRouter } from "@tarojs/taro"
|
||||
import { Button, Navigator, ScrollView, Text, View } from '@tarojs/components'
|
||||
import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import './index.scss'
|
||||
import { mppurchaseraddresslist } from '@/api/addressList'
|
||||
import { alert } from '@/common/common'
|
||||
import Taro, { showModal, useDidShow, useRouter } from '@tarojs/taro'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import { mpsaleOrderaddress } from '@/api/order'
|
||||
|
||||
interface Params {
|
||||
refresherEnabled?: boolean,//是否开启刷新
|
||||
onSelect?: (item: any, index: number) => void,//列表选择
|
||||
addButtonEnabled?: boolean, //是否显示添加按钮
|
||||
focusBorderEnabled?: boolean, //焦点显示蓝色边框
|
||||
id?: number, //默认选择值,
|
||||
purchaser_id: Number,
|
||||
refresherEnabled?: boolean// 是否开启刷新
|
||||
onSelect?: (item: any, index: number) => void// 列表选择
|
||||
addButtonEnabled?: boolean // 是否显示添加按钮
|
||||
focusBorderEnabled?: boolean // 焦点显示蓝色边框
|
||||
id?: number // 默认选择值,
|
||||
purchaser_id: Number
|
||||
// handSelect?: (any) => void
|
||||
}
|
||||
|
||||
// 地址列表
|
||||
const AddressList = memo(forwardRef((props: Params, AddressListRef) => {
|
||||
const pages = Taro.getCurrentPages() // 获取当前的页面栈
|
||||
const prevPage = pages[pages.length - 2]
|
||||
|
||||
let pages = Taro.getCurrentPages(); // 获取当前的页面栈
|
||||
let prevPage = pages[pages.length - 2];
|
||||
|
||||
const { addButtonEnabled = true, focusBorderEnabled = false } = props;
|
||||
const { addButtonEnabled = true, focusBorderEnabled = false } = props
|
||||
const { fetchData, state } = mppurchaseraddresslist()
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
const result = await fetchData({ purchaser_id: props.purchaser_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 => {
|
||||
setFocusId(props.id as any)
|
||||
}
|
||||
else {
|
||||
result.data.list?.every((item) => {
|
||||
if (item.is_default) {
|
||||
setFocusId(item.id);
|
||||
return false;
|
||||
setFocusId(item.id)
|
||||
return false
|
||||
}
|
||||
return true;
|
||||
return true
|
||||
})
|
||||
}
|
||||
let itemList: any[] = []
|
||||
result?.data?.list?.forEach(item => {
|
||||
const itemList: any[] = []
|
||||
result?.data?.list?.forEach((item) => {
|
||||
itemList.push(item?.id)
|
||||
})
|
||||
prevPage.setData({ //设置上一个页面的值
|
||||
ids: itemList
|
||||
});
|
||||
prevPage.setData({ // 设置上一个页面的值
|
||||
ids: itemList,
|
||||
})
|
||||
}
|
||||
useDidShow(() => {
|
||||
getData();
|
||||
getData()
|
||||
// 监听刷新
|
||||
Taro.eventCenter.on("addressList:refresh", getData);
|
||||
Taro.eventCenter.on('addressList:refresh', getData)
|
||||
return () => {
|
||||
Taro.eventCenter.off("addressList:refresh", getData);
|
||||
Taro.eventCenter.off('addressList:refresh', getData)
|
||||
}
|
||||
})
|
||||
// 处理刷新
|
||||
const [refreshState, setRefreshState] = useState(false);
|
||||
const handleRefresh = async () => {
|
||||
setRefreshState(true);
|
||||
await getData();
|
||||
setRefreshState(false);
|
||||
const [refreshState, setRefreshState] = useState(false)
|
||||
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 [focusId, setFocusId] = useState()
|
||||
const router = useRouter()
|
||||
const [addressObj, setAddressObj] = useState<any>({})
|
||||
// 列表选择
|
||||
const { fetchData: selectFetch } = mpsaleOrderaddress()
|
||||
const handleSelect = async (item: any, index: number) => {
|
||||
const handleSelect = async(item: any, index: number) => {
|
||||
if (router.params.orderId && router.params.orderId != '-100') {
|
||||
console.log(typeof (router.params.orderId) != 'undefined', 'router.params.orderId')
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
mask: true
|
||||
mask: true,
|
||||
})
|
||||
const res = await selectFetch({ address_id: item.id, id: Number(router.params.orderId), shipment_mode: 2 })
|
||||
if (res.msg === 'success') {
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({
|
||||
title: '成功',
|
||||
icon: 'success'
|
||||
icon: 'success',
|
||||
})
|
||||
Taro.navigateBack({
|
||||
delta: 1
|
||||
delta: 1,
|
||||
})
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: 'error'
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
} else {
|
||||
prevPage.setData({ //设置上一个页面的值
|
||||
}
|
||||
else {
|
||||
prevPage.setData({ // 设置上一个页面的值
|
||||
addressObj: item,
|
||||
// ids: itemList
|
||||
});
|
||||
})
|
||||
Taro.navigateBack({
|
||||
delta: 1
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
props.onSelect && props.onSelect(item, index);
|
||||
props.onSelect && props.onSelect(item, index)
|
||||
if (focusBorderEnabled) {
|
||||
setFocusId(item?.id);
|
||||
setFocusId(item?.id)
|
||||
}
|
||||
}
|
||||
|
||||
useImperativeHandle(AddressListRef, () => ({
|
||||
getData
|
||||
getData,
|
||||
}))
|
||||
|
||||
return (
|
||||
@@ -119,8 +121,8 @@ const AddressList = memo(forwardRef((props: Params, AddressListRef) => {
|
||||
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
|
||||
<View className="address-scroll-view-content" >
|
||||
{
|
||||
state?.data?.list?.length > 0 ?
|
||||
state?.data?.list?.map((item, index) => {
|
||||
state?.data?.list?.length > 0
|
||||
? state?.data?.list?.map((item, index) => {
|
||||
// data.length>0?
|
||||
// data.map((item,index)=>{
|
||||
return (
|
||||
@@ -143,19 +145,19 @@ const AddressList = memo(forwardRef((props: Params, AddressListRef) => {
|
||||
</View>
|
||||
<Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit">
|
||||
{/* <Text className="iconfont icon-bianji"></Text> */}
|
||||
<IconFont name={'icon-bianji'} size={40} color={'#717171'}></IconFont>
|
||||
<IconFont name="icon-bianji" size={40} color="#717171"></IconFont>
|
||||
</Navigator>
|
||||
</View>
|
||||
{
|
||||
item.factory !== '' && <>
|
||||
<View className='line'></View>
|
||||
<View className='bottom-font'>加工厂：{item.factory}</View></>
|
||||
<View className="line"></View>
|
||||
<View className="bottom-font">加工厂：{item.factory}</View></>
|
||||
}
|
||||
|
||||
</View>
|
||||
);
|
||||
}) :
|
||||
<View className="address-no-data">暂未添加地址</View>
|
||||
)
|
||||
})
|
||||
: <View className="address-no-data">暂未添加地址</View>
|
||||
}
|
||||
</View>
|
||||
</ScrollView>
|
||||
@@ -164,4 +166,4 @@ const AddressList = memo(forwardRef((props: Params, AddressListRef) => {
|
||||
)
|
||||
}))
|
||||
|
||||
export default AddressList;
|
||||
export default AddressList
|
||||
|
||||
+181
-177
@@ -1,191 +1,195 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { memo, useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from "react"
|
||||
import style from "./index.module.scss"
|
||||
import { View } from '@tarojs/components'
|
||||
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import style from './index.module.scss'
|
||||
|
||||
interface prosObj {
|
||||
obj?: {
|
||||
sale_mode?: Number,
|
||||
collect_status?: Number | string,
|
||||
status?: Number,
|
||||
payment_method?: Number,
|
||||
settle_mode?: Number | string,
|
||||
}
|
||||
cancle?: (any) => void,
|
||||
nextBuy?: (any) => void,
|
||||
toPay?: (any) => void,
|
||||
handSureGoods?: () => void,
|
||||
showTuiGoods?: boolean,
|
||||
handApplyGoods?: () => void,
|
||||
handApplyMoney?: () => void,
|
||||
showDetail?: boolean,
|
||||
goodsObj?: any
|
||||
obj?: {
|
||||
sale_mode?: Number
|
||||
collect_status?: Number | string
|
||||
status?: Number
|
||||
payment_method?: Number
|
||||
settle_mode?: Number | string
|
||||
}
|
||||
cancle?: (any) => void
|
||||
nextBuy?: (any) => void
|
||||
toPay?: (any) => void
|
||||
handSureGoods?: () => void
|
||||
showTuiGoods?: boolean
|
||||
handApplyGoods?: () => void
|
||||
handApplyMoney?: () => void
|
||||
showDetail?: boolean
|
||||
goodsObj?: any
|
||||
}
|
||||
|
||||
export default memo(forwardRef((props: prosObj, ref) => {
|
||||
const {
|
||||
obj = {
|
||||
sale_mode: 0,
|
||||
collect_status: '',
|
||||
status: '',
|
||||
payment_method: 0,
|
||||
settle_mode: ''
|
||||
},
|
||||
showTuiGoods = false,
|
||||
cancle,
|
||||
nextBuy,
|
||||
toPay,
|
||||
handSureGoods,
|
||||
handApplyGoods,
|
||||
handApplyMoney,
|
||||
showDetail = false,
|
||||
goodsObj = {}
|
||||
} = props
|
||||
//判断显示取消订单
|
||||
const {
|
||||
obj = {
|
||||
sale_mode: 0,
|
||||
collect_status: '',
|
||||
status: '',
|
||||
payment_method: 0,
|
||||
settle_mode: '',
|
||||
},
|
||||
showTuiGoods = false,
|
||||
cancle,
|
||||
nextBuy,
|
||||
toPay,
|
||||
handSureGoods,
|
||||
handApplyGoods,
|
||||
handApplyMoney,
|
||||
showDetail = false,
|
||||
goodsObj = {},
|
||||
} = props
|
||||
// 判断显示取消订单
|
||||
|
||||
const showCancel = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status === 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 1) ||
|
||||
(obj.sale_mode === 0 && obj.status === 2 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 11 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 11 && obj.settle_mode == 3) ||
|
||||
(obj.sale_mode === 0 && obj.status === 3 && obj.settle_mode == 3) ||
|
||||
(obj.sale_mode === 1 && obj.status === 10) ||
|
||||
(obj.sale_mode === 2 && obj.status === 10) ||
|
||||
(obj.sale_mode === 2 && obj.status === 0 && (obj.collect_status == 1 || obj.collect_status == 2)) ||
|
||||
(obj.sale_mode === 2 && obj.status === 0 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 1 && obj.status === 10) ||
|
||||
(obj.sale_mode === 2 && obj.status === 10)
|
||||
) {
|
||||
return true
|
||||
} else return false
|
||||
}, [obj])
|
||||
//判断显示再次购买
|
||||
const showBuy = useMemo(() => {
|
||||
if (
|
||||
obj.sale_mode === 0 ||
|
||||
(obj.sale_mode === 1 && obj.status !== 10) ||
|
||||
(obj.sale_mode === 2 && obj.status !== 10)
|
||||
) {
|
||||
return true
|
||||
} else return false
|
||||
}, [obj])
|
||||
//判断显示去付款
|
||||
const canBuy = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1) ||
|
||||
(obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 7 && obj.settle_mode == 3) ||
|
||||
(obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1) ||
|
||||
(obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 1) ||
|
||||
(obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 1) ||
|
||||
(obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 2 && obj.status === 2) ||
|
||||
(obj.sale_mode === 2 && obj.status === 7) ||
|
||||
(obj.sale_mode === 1 && obj.status === 10) ||
|
||||
(obj.sale_mode === 2 && obj.status === 10)
|
||||
) {
|
||||
return true
|
||||
} else return false
|
||||
}, [obj])
|
||||
const showCancel = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status === 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 1)
|
||||
|| (obj.sale_mode === 0 && obj.status === 2 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 11 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 11 && obj.settle_mode == 3)
|
||||
|| (obj.sale_mode === 0 && obj.status === 3 && obj.settle_mode == 3)
|
||||
|| (obj.sale_mode === 1 && obj.status === 10)
|
||||
|| (obj.sale_mode === 2 && obj.status === 10)
|
||||
|| (obj.sale_mode === 2 && obj.status === 0 && (obj.collect_status == 1 || obj.collect_status == 2))
|
||||
|| (obj.sale_mode === 2 && obj.status === 0 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 1 && obj.status === 10)
|
||||
|| (obj.sale_mode === 2 && obj.status === 10)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
else { return false }
|
||||
}, [obj])
|
||||
// 判断显示再次购买
|
||||
const showBuy = useMemo(() => {
|
||||
if (
|
||||
obj.sale_mode === 0
|
||||
|| (obj.sale_mode === 1 && obj.status !== 10)
|
||||
|| (obj.sale_mode === 2 && obj.status !== 10)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
else { return false }
|
||||
}, [obj])
|
||||
// 判断显示去付款
|
||||
const canBuy = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1)
|
||||
|| (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 7 && obj.settle_mode == 3)
|
||||
|| (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1)
|
||||
|| (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 1)
|
||||
|| (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 1)
|
||||
|| (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 2 && obj.status === 2)
|
||||
|| (obj.sale_mode === 2 && obj.status === 7)
|
||||
|| (obj.sale_mode === 1 && obj.status === 10)
|
||||
|| (obj.sale_mode === 2 && obj.status === 10)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
else { return false }
|
||||
}, [obj])
|
||||
|
||||
//判断显示确认收货
|
||||
const showTake = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 0) ||
|
||||
(obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 1) ||
|
||||
(obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 2) ||
|
||||
(obj.sale_mode === 0 && obj.status == 8 && obj.settle_mode == 3) ||
|
||||
(obj.sale_mode === 1 && obj.status == 8) ||
|
||||
(obj.sale_mode === 2 && obj.status == 8)
|
||||
) {
|
||||
return true
|
||||
} else return false
|
||||
}, [obj])
|
||||
// 判断显示确认收货
|
||||
const showTake = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 0)
|
||||
|| (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 1)
|
||||
|| (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 2)
|
||||
|| (obj.sale_mode === 0 && obj.status == 8 && obj.settle_mode == 3)
|
||||
|| (obj.sale_mode === 1 && obj.status == 8)
|
||||
|| (obj.sale_mode === 2 && obj.status == 8)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
else { return false }
|
||||
}, [obj])
|
||||
|
||||
// 判断显示申请退货
|
||||
const showTuihuo = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 0 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 1 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 2 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 9 && obj.settle_mode == 3 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 2 && obj.status == 9 && goodsObj?.av_return_product?.length)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
else { return false }
|
||||
}, [obj])
|
||||
// 判断显示申请退款
|
||||
const showTuikuan = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status == 2 && obj.collect_status == 1 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 2 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 3 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 11 && (obj.collect_status == 1 || obj.collect_status == 2) && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 0 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 2 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 1 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 1 && obj.status == 0 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 1 && obj.status == 9 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 1 && goodsObj?.av_return_product?.length)
|
||||
|| (obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 2 && goodsObj?.av_return_product?.length)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
else { return false }
|
||||
}, [obj])
|
||||
|
||||
// 多的不显示别的按钮
|
||||
// const currentNums = useRef<any>({ nums: 0 })
|
||||
const itemNums = useMemo(() => {
|
||||
let nums = 0
|
||||
if (showTake) {
|
||||
nums = nums + 1
|
||||
}
|
||||
if (showCancel) {
|
||||
nums = nums + 1
|
||||
}
|
||||
if (canBuy) {
|
||||
nums = nums + 1
|
||||
}
|
||||
if (showBuy) {
|
||||
nums = nums + 1
|
||||
}
|
||||
return nums
|
||||
}, [obj])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
itemNums,
|
||||
}))
|
||||
|
||||
//判断显示申请退货
|
||||
const showTuihuo = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 0 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 1 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 2 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 9 && obj.settle_mode == 3 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 2 && obj.status == 9 && goodsObj?.av_return_product?.length)
|
||||
) {
|
||||
return true
|
||||
} else return false
|
||||
}, [obj])
|
||||
//判断显示申请退款
|
||||
const showTuikuan = useMemo(() => {
|
||||
if (
|
||||
(obj.sale_mode === 0 && obj.status == 2 && obj.collect_status == 1 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 2 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 3 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 11 && (obj.collect_status == 1 || obj.collect_status == 2) && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 0 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 2 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 1 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 1 && obj.status == 0 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 1 && obj.status == 9 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 1 && goodsObj?.av_return_product?.length) ||
|
||||
(obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 2 && goodsObj?.av_return_product?.length)
|
||||
) {
|
||||
return true
|
||||
} else return false
|
||||
}, [obj])
|
||||
return (
|
||||
<View className={style.flexBox}>
|
||||
|
||||
//多的不显示别的按钮
|
||||
// const currentNums = useRef<any>({ nums: 0 })
|
||||
const itemNums = useMemo(() => {
|
||||
let nums = 0
|
||||
if (showTake) {
|
||||
nums = nums + 1
|
||||
}
|
||||
if (showCancel) {
|
||||
nums = nums + 1
|
||||
}
|
||||
if (canBuy) {
|
||||
nums = nums + 1
|
||||
}
|
||||
if (showBuy) {
|
||||
nums = nums + 1
|
||||
}
|
||||
return nums
|
||||
}, [obj])
|
||||
{
|
||||
(showTuihuo && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>申请退货</View>
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
itemNums
|
||||
}))
|
||||
{
|
||||
(showTuikuan && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>申请退款</View>
|
||||
|
||||
return (
|
||||
<View className={style.flexBox}>
|
||||
}
|
||||
{
|
||||
showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}>确认收货</View>
|
||||
}
|
||||
{
|
||||
showCancel && <View className={style.cancle} onClick={e => cancle?.(e)}>取消订单</View>
|
||||
}
|
||||
{
|
||||
showBuy && <View className={style.nextBuy} onClick={e => nextBuy?.(e)}>再次购买</View>
|
||||
}
|
||||
{
|
||||
canBuy && <View className={style.toBuy} onClick={e => toPay?.(e)}>去付款</View>
|
||||
}
|
||||
|
||||
{
|
||||
(showTuihuo && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>申请退货</View>
|
||||
}
|
||||
|
||||
{
|
||||
(showTuikuan && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>申请退款</View>
|
||||
|
||||
}
|
||||
{
|
||||
showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}>确认收货</View>
|
||||
}
|
||||
{
|
||||
showCancel && <View className={style.cancle} onClick={(e) => cancle?.(e)}>取消订单</View>
|
||||
}
|
||||
{
|
||||
showBuy && <View className={style.nextBuy} onClick={(e) => nextBuy?.(e)}>再次购买</View>
|
||||
}
|
||||
{
|
||||
canBuy && <View className={style.toBuy} onClick={(e) => toPay?.(e)}>去付款</View>
|
||||
}
|
||||
|
||||
</View>
|
||||
)
|
||||
}))
|
||||
</View>
|
||||
)
|
||||
}))
|
||||
|
||||
@@ -1,36 +1,35 @@
|
||||
import { View, Button } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import { Button, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type prosObj = {
|
||||
isDisabled: boolean,
|
||||
handSure?: () => void,
|
||||
clientId?: Number,
|
||||
clientName?: string
|
||||
interface prosObj {
|
||||
isDisabled: boolean
|
||||
handSure?: () => void
|
||||
clientId?: Number
|
||||
clientName?: string
|
||||
}
|
||||
|
||||
export default memo((props: prosObj) => {
|
||||
const {
|
||||
isDisabled = true,
|
||||
handSure,
|
||||
clientName = ''
|
||||
} = props
|
||||
const navTo = () => {
|
||||
Taro.navigateTo({
|
||||
url: '/pages/customerPage/index?clientId=' + props?.clientId
|
||||
})
|
||||
}
|
||||
const {
|
||||
isDisabled = true,
|
||||
handSure,
|
||||
clientName = '',
|
||||
} = props
|
||||
const navTo = () => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/customerPage/index?clientId=${props?.clientId}`,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.bottomBox}>
|
||||
<View className={styles.leftBottom} onClick={() => { navTo() }}>
|
||||
<View className={styles.nowFont}>当前客户：</View>
|
||||
<View className={styles.selctFont}>{clientName === '' ? '请选择客户 >' : clientName}</View>
|
||||
</View>
|
||||
<Button className={classnames(isDisabled ? styles.activeButton : styles.button)} disabled={isDisabled} onClick={() => { handSure?.() }}> 加入购物车</Button >
|
||||
</View >
|
||||
)
|
||||
return (
|
||||
<View className={styles.bottomBox}>
|
||||
<View className={styles.leftBottom} onClick={() => { navTo() }}>
|
||||
<View className={styles.nowFont}>当前客户：</View>
|
||||
<View className={styles.selctFont}>{clientName === '' ? '请选择客户 >' : clientName}</View>
|
||||
</View>
|
||||
<Button className={classnames(isDisabled ? styles.activeButton : styles.button)} disabled={isDisabled} onClick={() => { handSure?.() }}> 加入购物车</Button >
|
||||
</View >
|
||||
)
|
||||
})
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
*/
|
||||
|
||||
import { View } from '@tarojs/components'
|
||||
import React, { FC, ReactNode } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'
|
||||
|
||||
@@ -25,8 +26,8 @@ interface DividerProps {
|
||||
const Divider: FC<DividerProps> = (props) => {
|
||||
const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName = '', customStyles = {} } = props
|
||||
|
||||
const classname = classnames(styles['divider'], styles['divider-' + direction], customClassName)
|
||||
const contentClassname = classnames(styles['divider-text'], styles['is-' + contentPosition])
|
||||
const classname = classnames(styles.divider, styles[`divider-${direction}`], customClassName)
|
||||
const contentClassname = classnames(styles['divider-text'], styles[`is-${contentPosition}`])
|
||||
|
||||
const borderTopStyle: { borderTopStyle: BorderStype } = {
|
||||
borderTopStyle: borderStyle,
|
||||
|
||||
@@ -1,52 +1,54 @@
|
||||
|
||||
import { Input, Text, Textarea, View } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import "./index.scss"
|
||||
import { Input, Text, Textarea, View } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import './index.scss'
|
||||
|
||||
interface ListParams{
|
||||
label: string, //左边label
|
||||
onInput?: (ev:Object)=>void, // 输入框输入
|
||||
onClick?:()=>any, //点击列表
|
||||
placeholder?:string, // 提示文本
|
||||
children?: any, // 插槽
|
||||
type?: string // 类型：1.input,2.textarea,3.select,
|
||||
label: string // 左边label
|
||||
onInput?: (ev: Object) => void // 输入框输入
|
||||
onClick?: () => any // 点击列表
|
||||
placeholder?: string // 提示文本
|
||||
children?: any // 插槽
|
||||
type?: string // 类型：1.input,2.textarea,3.select,
|
||||
primordialType?: 'text'|'number'|'idcard'|'digit'
|
||||
value?: any,
|
||||
style?: object, //整行样式
|
||||
labelStyle?: object, // label样式
|
||||
contentStyle?: object,
|
||||
value?: any
|
||||
style?: object // 整行样式
|
||||
labelStyle?: object // label样式
|
||||
contentStyle?: object
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
// 表单列表
|
||||
const FromList = memo((props:ListParams)=>{
|
||||
const {type="input",value="",style={},labelStyle={},contentStyle={},required=false} = props;
|
||||
|
||||
const FromList = memo((props: ListParams) => {
|
||||
const { type = 'input', value = '', style = {}, labelStyle = {}, contentStyle = {}, required = false } = props
|
||||
|
||||
return (
|
||||
<View style={style} className="form-list">
|
||||
<View style={labelStyle} className={`form-list-label ${required&&"form-list-label-required"}`}>{props.label}</View>
|
||||
<View style={labelStyle} className={`form-list-label ${required && 'form-list-label-required'}`}>{props.label}</View>
|
||||
<View onClick={props?.onClick} className="form-list-right">
|
||||
{
|
||||
props.children??
|
||||
<View style={contentStyle} onClick={props?.onClick} className="form-list-right-meet">
|
||||
props.children
|
||||
?? <View style={contentStyle} onClick={props?.onClick} className="form-list-right-meet">
|
||||
{
|
||||
type=="input"?
|
||||
<View className="form-list-input">
|
||||
<Input value={value} placeholder-class="phcolor" type={props.primordialType||'text'} onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
{value&&
|
||||
<View><Text onClick={()=>props.onInput&&props.onInput({detail: {value: ""}})} className="iconfont icon-qingkong"/></View>
|
||||
}
|
||||
</View>:
|
||||
type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
|
||||
<>
|
||||
{
|
||||
props.value?<View>{value}</View>:
|
||||
<View className="form-list-right-placeholder">
|
||||
{props.placeholder}
|
||||
</View>
|
||||
}
|
||||
<View className="form-list-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
|
||||
</>
|
||||
type == 'input'
|
||||
? <View className="form-list-input">
|
||||
<Input value={value} placeholder-class="phcolor" type={props.primordialType || 'text'} onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
{value
|
||||
&& <View><Text onClick={() => props.onInput && props.onInput({ detail: { value: '' } })} className="iconfont icon-qingkong" /></View>
|
||||
}
|
||||
</View>
|
||||
: type == 'textarea'
|
||||
? <Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
: <>
|
||||
{
|
||||
props.value
|
||||
? <View>{value}</View>
|
||||
: <View className="form-list-right-placeholder">
|
||||
{props.placeholder}
|
||||
</View>
|
||||
}
|
||||
<View className="form-list-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
|
||||
</>
|
||||
}
|
||||
</View>
|
||||
}
|
||||
@@ -55,7 +57,7 @@ const FromList = memo((props:ListParams)=>{
|
||||
)
|
||||
})
|
||||
|
||||
const A = ()=>{
|
||||
|
||||
const A = () => {
|
||||
|
||||
}
|
||||
export default FromList;
|
||||
export default FromList
|
||||
|
||||
@@ -1,54 +1,56 @@
|
||||
|
||||
import { Input, Text, Textarea, View } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import "./index.scss"
|
||||
import { Input, Text, Textarea, View } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import './index.scss'
|
||||
|
||||
interface ListParams{
|
||||
label: string, //左边label
|
||||
onInput?: (ev:Object)=>void, // 输入框输入
|
||||
onClick?:()=>any, //点击列表
|
||||
placeholder?:string, // 提示文本
|
||||
children?: any, // 插槽
|
||||
type?: string // 类型：1.input,2.textarea,3.select
|
||||
value?: any,
|
||||
style?: object, //整行样式
|
||||
labelStyle?: object, // label样式
|
||||
contentStyle?: object,
|
||||
required?: boolean,
|
||||
showIcon?: boolean, // 是否显示右边的箭头，type=select
|
||||
label: string // 左边label
|
||||
onInput?: (ev: Object) => void // 输入框输入
|
||||
onClick?: () => any // 点击列表
|
||||
placeholder?: string // 提示文本
|
||||
children?: any // 插槽
|
||||
type?: string // 类型：1.input,2.textarea,3.select
|
||||
value?: any
|
||||
style?: object // 整行样式
|
||||
labelStyle?: object // label样式
|
||||
contentStyle?: object
|
||||
required?: boolean
|
||||
showIcon?: boolean // 是否显示右边的箭头，type=select
|
||||
}
|
||||
|
||||
// 表单列表
|
||||
const FromList = memo((props:ListParams)=>{
|
||||
const {type="input",value="",style={},labelStyle={},contentStyle={},required=false,showIcon=true} = props;
|
||||
|
||||
const FromList = memo((props: ListParams) => {
|
||||
const { type = 'input', value = '', style = {}, labelStyle = {}, contentStyle = {}, required = false, showIcon = true } = props
|
||||
|
||||
return (
|
||||
<View style={style} className="From-list-certification">
|
||||
<View style={labelStyle} className={`From-list-certification-label ${required&&"From-list-certification-label-required"}`}>{props.label}</View>
|
||||
<View style={labelStyle} className={`From-list-certification-label ${required && 'From-list-certification-label-required'}`}>{props.label}</View>
|
||||
<View onClick={props?.onClick} className="From-list-certification-right">
|
||||
{
|
||||
props.children??
|
||||
<View style={contentStyle} onClick={props?.onClick} className="From-list-certification-right-meet">
|
||||
props.children
|
||||
?? <View style={contentStyle} onClick={props?.onClick} className="From-list-certification-right-meet">
|
||||
{
|
||||
type=="input"?
|
||||
<View className="From-list-certification-input">
|
||||
<Input value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
{value&&
|
||||
<View><Text onClick={()=>props.onInput&&props.onInput({detail: {value: ""}})} className="iconfont icon-qingkong"/></View>
|
||||
}
|
||||
</View>:
|
||||
type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
|
||||
<>
|
||||
{
|
||||
props.value?<View>{value}</View>:
|
||||
<View className="From-list-certification-right-placeholder">
|
||||
{props.placeholder}
|
||||
</View>
|
||||
}
|
||||
<View className="From-list-certification-right-enter">
|
||||
{showIcon&&<Text className="iconfont icon-a-moreback"></Text>}
|
||||
type == 'input'
|
||||
? <View className="From-list-certification-input">
|
||||
<Input value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
{value
|
||||
&& <View><Text onClick={() => props.onInput && props.onInput({ detail: { value: '' } })} className="iconfont icon-qingkong" /></View>
|
||||
}
|
||||
</View>
|
||||
</>
|
||||
: type == 'textarea'
|
||||
? <Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
: <>
|
||||
{
|
||||
props.value
|
||||
? <View>{value}</View>
|
||||
: <View className="From-list-certification-right-placeholder">
|
||||
{props.placeholder}
|
||||
</View>
|
||||
}
|
||||
<View className="From-list-certification-right-enter">
|
||||
{showIcon && <Text className="iconfont icon-a-moreback"></Text>}
|
||||
</View>
|
||||
</>
|
||||
}
|
||||
</View>
|
||||
}
|
||||
@@ -57,7 +59,7 @@ const FromList = memo((props:ListParams)=>{
|
||||
)
|
||||
})
|
||||
|
||||
const A = ()=>{
|
||||
|
||||
const A = () => {
|
||||
|
||||
}
|
||||
export default FromList;
|
||||
export default FromList
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
import { alert, isEmptyObject } from '@/common/common'
|
||||
|
||||
@@ -23,7 +24,7 @@ export default (props: Params) => {
|
||||
getData({ moreStatus: true }, { moreStatus: true })
|
||||
}
|
||||
}, [query])
|
||||
const getData = async (startStatus, endStatus) => {
|
||||
const getData = async(startStatus, endStatus) => {
|
||||
const tRefreshDataRef = refreshDataRef.current as any
|
||||
setRefreshData({
|
||||
...tRefreshDataRef,
|
||||
@@ -44,7 +45,8 @@ export default (props: Params) => {
|
||||
...endStatus,
|
||||
loading: false,
|
||||
})
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
setData({
|
||||
list: result.data.list,
|
||||
// list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
|
||||
@@ -57,7 +59,8 @@ export default (props: Params) => {
|
||||
loading: false,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
alert.none(result.msg)
|
||||
setRefreshData({
|
||||
...tRefreshDataRef,
|
||||
@@ -83,8 +86,8 @@ export default (props: Params) => {
|
||||
})
|
||||
const dataRef = useRef({})
|
||||
// 下拉刷新
|
||||
const handleRefresh = async () => {
|
||||
let tRefreshData = refreshDataRef.current as any
|
||||
const handleRefresh = async() => {
|
||||
const tRefreshData = refreshDataRef.current as any
|
||||
setRefreshData({
|
||||
...tRefreshData,
|
||||
page: 1,
|
||||
@@ -93,9 +96,9 @@ export default (props: Params) => {
|
||||
getData({ refreshStatus: true, moreStatus: false }, { refreshStatus: false, moreStatus: true })
|
||||
}
|
||||
// 加载更多
|
||||
const handleMoreLoad = async () => {
|
||||
let t = dataRef.current as any
|
||||
let tRefreshData = refreshDataRef.current as any
|
||||
const handleMoreLoad = async() => {
|
||||
const t = dataRef.current as any
|
||||
const tRefreshData = refreshDataRef.current as any
|
||||
if (t.list.length < t.total) {
|
||||
setRefreshData({
|
||||
...tRefreshData,
|
||||
@@ -112,19 +115,20 @@ export default (props: Params) => {
|
||||
)
|
||||
}
|
||||
}
|
||||
//数据加载状态
|
||||
// 数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
return dataLoadingStatus({ list: data.list, total: data.total, status: refreshData.loading })
|
||||
}, [refreshData.loading])
|
||||
|
||||
return (
|
||||
<InfiniteScroll
|
||||
refresherEnabled={true}
|
||||
refresherEnabled
|
||||
refresherTriggered={refreshData.refreshStatus}
|
||||
moreStatus={refreshData.moreStatus}
|
||||
selfOnRefresherRefresh={handleRefresh}
|
||||
selfonScrollToLower={handleMoreLoad}
|
||||
statusMore={statusMore}>
|
||||
statusMore={statusMore}
|
||||
>
|
||||
{props.children}
|
||||
</InfiniteScroll>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { CustomWrapper, Input, View } from "@tarojs/components"
|
||||
import React, { FC } from "react"
|
||||
import { CustomWrapper, Input, View } from '@tarojs/components'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
// 解决 input 组件输入过快会出现闪烁的问题
|
||||
// https://github.com/NervJS/taro/issues/9664
|
||||
interface PropsType {
|
||||
@@ -10,7 +11,7 @@ interface PropsType {
|
||||
[Property: string]: any
|
||||
}
|
||||
const InputX: FC<PropsType> = (props) => {
|
||||
const {customClassName, customStyle,customInputStyle, customInputClassName,...inputProps} = props
|
||||
const { customClassName, customStyle, customInputStyle, customInputClassName, ...inputProps } = props
|
||||
return (
|
||||
<View className={customClassName} style={customStyle}>
|
||||
<CustomWrapper>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
|
||||
import Preview from '@/pages/details/components/preview'
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import LabAndImgShow from '../LabAndImgShow'
|
||||
import styles from './index.module.scss'
|
||||
import Preview from '@/pages/details/components/preview'
|
||||
import { formatImgUrl, formatRemoveHashTag } from '@/common/format'
|
||||
|
||||
//该组件宽高为100%需调整外层元素宽高
|
||||
type Param = {
|
||||
// 该组件宽高为100%需调整外层元素宽高
|
||||
interface Param {
|
||||
value?: {
|
||||
texture_url?: string //纹理图路径
|
||||
lab?: { l: number; a: number; b: number } //lab
|
||||
rgb?: { r: number; g: number; b: number } //rgb
|
||||
texture_url?: string // 纹理图路径
|
||||
lab?: { l: number; a: number; b: number } // lab
|
||||
rgb?: { r: number; g: number; b: number } // rgb
|
||||
title?: string
|
||||
}
|
||||
showStatus?: true | false
|
||||
@@ -20,18 +20,19 @@ type Param = {
|
||||
export default memo(({ value, onClick, showStatus = false }: Param) => {
|
||||
const [imgs, setImgs] = useState<string[]>([])
|
||||
|
||||
//lab是否都是0
|
||||
// lab是否都是0
|
||||
const rgbStyle = useMemo(() => {
|
||||
if (value?.lab && (value.lab.l || value.lab.a || value.lab.b)) {
|
||||
return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
}, [value])
|
||||
|
||||
useEffect(() => {
|
||||
if (value?.texture_url) {
|
||||
let res = value.texture_url.split(',').map((item) => {
|
||||
const res = value.texture_url.split(',').map((item) => {
|
||||
return formatImgUrl(item)
|
||||
})
|
||||
setImgs(() => res)
|
||||
@@ -44,7 +45,7 @@ export default memo(({ value, onClick, showStatus = false }: Param) => {
|
||||
}, [])
|
||||
const onShowLabAndImg = () => {
|
||||
onClick?.(value)
|
||||
if (!showStatus) return false
|
||||
if (!showStatus) { return false }
|
||||
setLabAndImgShow(true)
|
||||
}
|
||||
|
||||
@@ -55,9 +56,9 @@ export default memo(({ value, onClick, showStatus = false }: Param) => {
|
||||
return (
|
||||
<>
|
||||
<View className={styles.labAndImg_main} onClick={() => onShowLabAndImg()}>
|
||||
{imgs?.length > 0 && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} onError={handleImageError}></Image>}
|
||||
{imgs?.length > 0 && <Image mode="aspectFill" src={imgs[0]} className={styles.labAndImg_image} onError={handleImageError}></Image>}
|
||||
{!imgs?.length && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle }}></View>}
|
||||
{!imgs?.length && !rgbStyle && <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image}></Image>}
|
||||
{!imgs?.length && !rgbStyle && <Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image}></Image>}
|
||||
</View>
|
||||
<LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
|
||||
</>
|
||||
|
||||
@@ -1,39 +1,40 @@
|
||||
import { formatImgUrl } from '@/common/format'
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { formatImgUrl } from '@/common/format'
|
||||
|
||||
export type colorParams = {
|
||||
export interface colorParams {
|
||||
value?: {
|
||||
texture_url?: string //纹理图路径
|
||||
lab?: { l: number; a: number; b: number } //lab
|
||||
rgb?: { r: number; g: number; b: number } //rgb
|
||||
title?: string //标题
|
||||
texture_url?: string // 纹理图路径
|
||||
lab?: { l: number; a: number; b: number } // lab
|
||||
rgb?: { r: number; g: number; b: number } // rgb
|
||||
title?: string // 标题
|
||||
}
|
||||
show?: false | true
|
||||
onClose?: () => void
|
||||
showNumber?: number //图片显示张数，0不限制
|
||||
showNumber?: number // 图片显示张数，0不限制
|
||||
}
|
||||
export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) => {
|
||||
useEffect(() => {
|
||||
if (show && rgbStyle) setLabShow(() => true)
|
||||
if (show && value?.texture_url) onShowImage()
|
||||
if (!show) setLabShow(() => false)
|
||||
if (show && rgbStyle) { setLabShow(() => true) }
|
||||
if (show && value?.texture_url) { onShowImage() }
|
||||
if (!show) { setLabShow(() => false) }
|
||||
}, [show])
|
||||
|
||||
//显示颜色
|
||||
// 显示颜色
|
||||
const [labShow, setLabShow] = useState(false)
|
||||
//lab是否都是0
|
||||
// lab是否都是0
|
||||
const rgbStyle = useMemo(() => {
|
||||
if (value?.lab && (value.lab.l || value.lab.a || value.lab.b)) {
|
||||
return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return null
|
||||
}
|
||||
}, [value])
|
||||
|
||||
//显示图片
|
||||
// 显示图片
|
||||
const onShowImage = () => {
|
||||
onClose?.()
|
||||
let res: string[] = []
|
||||
@@ -42,7 +43,7 @@ export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) =
|
||||
return formatImgUrl(item)
|
||||
})
|
||||
}
|
||||
let n_res = showNumber == 0 ? res : res?.splice(0, showNumber)
|
||||
const n_res = showNumber == 0 ? res : res?.splice(0, showNumber)
|
||||
Taro.previewImage({
|
||||
current: n_res[0],
|
||||
urls: n_res,
|
||||
@@ -52,7 +53,7 @@ export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) =
|
||||
return (
|
||||
<>
|
||||
{labShow && (
|
||||
<View className={styles.main} catch-move='true' onClick={() => onClose?.()}>
|
||||
<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
|
||||
<View className={styles.con}>
|
||||
<View className={styles.rgb} style={rgbStyle!}></View>
|
||||
<View className={styles.name}>{value?.title}</View>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC } from 'react'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import type { FC } from 'react'
|
||||
import Iconfont from '../iconfont/iconfont'
|
||||
import LoadingCard from '../loadingCard/index'
|
||||
import styles from './index.module.scss'
|
||||
@@ -17,7 +17,7 @@ interface LoadMorePropsType extends LoadMoreEvent {
|
||||
noMoreText?: string
|
||||
}
|
||||
|
||||
const LoadMore: FC<LoadMorePropsType> = props => {
|
||||
const LoadMore: FC<LoadMorePropsType> = (props) => {
|
||||
const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', onClick } = props
|
||||
|
||||
const handleShowMore = () => {
|
||||
@@ -27,14 +27,16 @@ const LoadMore: FC<LoadMorePropsType> = props => {
|
||||
let component: JSX.Element | null = null
|
||||
if (status === 'loading') {
|
||||
component = <LoadingCard title={loadingText}></LoadingCard>
|
||||
} else if (status === 'more') {
|
||||
}
|
||||
else if (status === 'more') {
|
||||
component = (
|
||||
<View className='flex-row' onClick={handleShowMore}>
|
||||
<View className="flex-row" onClick={handleShowMore}>
|
||||
<Text style={{ marginRight: '5px' }}>{moreText}</Text>
|
||||
<Iconfont name='icon-zhankai' size={32}></Iconfont>
|
||||
<Iconfont name="icon-zhankai" size={32}></Iconfont>
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
component = <Text>{noMoreText}</Text>
|
||||
}
|
||||
return <View className={styles.loadMore}>{component}</View>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
|
||||
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import "./index.scss"
|
||||
import { Button, Navigator, ScrollView, Text, View } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import './index.scss'
|
||||
|
||||
interface Params{
|
||||
text: String,//提示信息
|
||||
text: String// 提示信息
|
||||
}
|
||||
|
||||
// 消息提示
|
||||
const Message = memo((props:Params)=>{
|
||||
const Message = memo((props: Params) => {
|
||||
return (
|
||||
<View className="message-custom-tips">
|
||||
<Text className="iconfont icon-zhuyi"></Text> {props.text}
|
||||
@@ -16,4 +16,4 @@ const Message = memo((props:Params)=>{
|
||||
)
|
||||
})
|
||||
|
||||
export default Message;
|
||||
export default Message
|
||||
|
||||
@@ -1,186 +1,187 @@
|
||||
import { ScrollView, View, Image } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { Image, ScrollView, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
// import BottomBtns from '@/components/BottomBtns'
|
||||
import { formatPriceDiv } from '@/common/format'
|
||||
import Taro from '@tarojs/taro'
|
||||
import Popup from '@/components/popup'
|
||||
import useCheckAuthorize from '@/use/useCheckAuthorize'
|
||||
import { alert } from '@/common/common'
|
||||
import { GetReturnPayCode } from "@/api/order"
|
||||
import { formatWeightDiv, formatDateTime } from '@/common/format'
|
||||
import { GetReturnPayCode } from '@/api/order'
|
||||
import { formatDateTime, formatWeightDiv } from '@/common/format'
|
||||
|
||||
interface Props {
|
||||
obj: any,
|
||||
// picUrl?: string,
|
||||
showPopup: boolean,
|
||||
popupClose: () => void
|
||||
obj: any
|
||||
// picUrl?: string,
|
||||
showPopup: boolean
|
||||
popupClose: () => void
|
||||
}
|
||||
|
||||
export default memo((props: Props) => {
|
||||
const { fetchData: payFetch } = GetReturnPayCode()
|
||||
const [PicUrl, setPicUrl] = useState<string>('')
|
||||
useEffect(() => {
|
||||
// 判断进来的是否是空对象，减少性能问题
|
||||
const length = Object.keys(props.obj)
|
||||
if (length.length > 0) { getPic() }
|
||||
}, [props.obj])
|
||||
|
||||
const { fetchData: payFetch } = GetReturnPayCode()
|
||||
const [PicUrl, setPicUrl] = useState<string>('')
|
||||
useEffect(() => {
|
||||
//判断进来的是否是空对象，减少性能问题
|
||||
var length = Object.keys(props.obj);
|
||||
if (length.length > 0) getPic()
|
||||
}, [props.obj])
|
||||
|
||||
const getPic = async () => {
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
mask: true
|
||||
})
|
||||
const list: any = [];
|
||||
let arr: any[] = []
|
||||
if (props.obj.type == 1) {
|
||||
arr = props.obj.quality_check_pass_product
|
||||
} else {
|
||||
arr = props.obj.product_list
|
||||
}
|
||||
arr.forEach((item) => {
|
||||
item.product_colors.forEach((it) => {
|
||||
list.push({
|
||||
product_code: item.code,
|
||||
product_name: item.name,
|
||||
product_color_code: it.code,
|
||||
product_color_name: it.name,
|
||||
num: it.roll.toString(),
|
||||
weight: formatWeightDiv(it.label_weight).toString(),
|
||||
deduction_weight: formatWeightDiv(it.deductions_weight).toString(),
|
||||
settle_weight: formatWeightDiv(it.settle_weight).toString(),
|
||||
deduction_amount: (it.deductions_amount / 100).toString(),
|
||||
sale_price: (it.sale_price / 100).toString(),
|
||||
total_price: (it.estimate_amount / 100).toString(),
|
||||
length: (it.length / 100).toString(),
|
||||
weight_error: formatWeightDiv(it.settle_weight_error).toString(),
|
||||
});
|
||||
});
|
||||
});
|
||||
const query = {
|
||||
list: list,
|
||||
title: "售后确认单",
|
||||
// show_qrcode: true,
|
||||
// show_barcode: true,
|
||||
// show_wait_pay_amount: true,
|
||||
order_type: props.obj.sale_mode_name,
|
||||
// shipment_mode: props.obj.shipment_mode_name,
|
||||
// company: props.obj.title_purchaser_name,
|
||||
sale_user: props.obj.sale_user_name,
|
||||
order_created_time: formatDateTime(props.obj.create_time),
|
||||
order_no: props.obj.return_order_no,
|
||||
// target_user_name: props.obj.target_user_name,
|
||||
// target_address: props.obj.address_detail,
|
||||
// target_description: props.obj.reason_describe,
|
||||
pay_account: props.obj.transfer_remittance_account,
|
||||
bank_account_name: props.obj.account_name,
|
||||
bank_name: props.obj.bank_of_deposit,
|
||||
// pay_type: props.obj.settle_mode_name,
|
||||
client: props.obj.purchaser_name,
|
||||
// phone: props.obj.target_user_phone,
|
||||
order_total_length: (props.obj.total_number / 100).toString(),
|
||||
order_total_price: (
|
||||
props.obj.refund_amount / 100
|
||||
).toString(),
|
||||
// total_weight_error_discount: (
|
||||
// props.obj.total_weight_error_discount / 100
|
||||
// ).toString(),
|
||||
order_total_num: props.obj.total_number.toString(),
|
||||
// qrcode: "",
|
||||
// order_total_weight: (props.obj.total_weight / 1000).toString(),
|
||||
// estimate_amount: (props.obj.estimate_amount / 100).toString(),
|
||||
// total_sale_price: (props.obj.total_sale_price / 100).toString(),
|
||||
// show_total_sale_price: true,
|
||||
// show_total_weight_error_discount: true,
|
||||
// actual_amount: (props.obj.actual_amount / 100).toString(),
|
||||
// wait_pay_amount: (props.obj.wait_pay_amount / 100).toString(),
|
||||
order_total_settle_weight: (
|
||||
props.obj.order_total_settle_weight / 1000
|
||||
).toString(),
|
||||
order_total_deduction_weight: (
|
||||
props.obj.order_total_deduction_weight / 1000
|
||||
).toString(),
|
||||
order_total_deduction_amount: (
|
||||
props.obj.order_total_deduction_amount / 100
|
||||
).toString(),
|
||||
order_total_weight_error: (
|
||||
props.obj.total_weight_error / 1000
|
||||
).toString(),
|
||||
};
|
||||
const res = await payFetch(query)
|
||||
if (res.data) {
|
||||
setPicUrl(res.data.base64)
|
||||
Taro.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
const fileData = useRef({
|
||||
filePath: '',
|
||||
base64: '',
|
||||
const getPic = async() => {
|
||||
Taro.showLoading({
|
||||
title: '请稍等...',
|
||||
mask: true,
|
||||
})
|
||||
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(PicUrl) || []
|
||||
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
const save = Taro.getFileSystemManager()
|
||||
save.writeFile({
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
})
|
||||
Taro.previewImage({
|
||||
current: fileData.current.filePath, // 当前显示
|
||||
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
|
||||
})
|
||||
const list: any = []
|
||||
let arr: any[] = []
|
||||
if (props.obj.type == 1) {
|
||||
arr = props.obj.quality_check_pass_product
|
||||
}
|
||||
|
||||
//检查是否开启保存图片权限
|
||||
const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })
|
||||
const saveImageCheck = async () => {
|
||||
const res = await check()
|
||||
res && saveImage()
|
||||
else {
|
||||
arr = props.obj.product_list
|
||||
}
|
||||
|
||||
//保存图片
|
||||
const saveImage = () => {
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(PicUrl) || []
|
||||
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
const save = Taro.getFileSystemManager()
|
||||
save.writeFile({
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
})
|
||||
alert.loading('正在保存图片')
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: fileData.current.filePath,
|
||||
success: function () {
|
||||
alert.success('图片保存成功')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('err::', err)
|
||||
},
|
||||
arr.forEach((item) => {
|
||||
item.product_colors.forEach((it) => {
|
||||
list.push({
|
||||
product_code: item.code,
|
||||
product_name: item.name,
|
||||
product_color_code: it.code,
|
||||
product_color_name: it.name,
|
||||
num: it.roll.toString(),
|
||||
weight: formatWeightDiv(it.label_weight).toString(),
|
||||
deduction_weight: formatWeightDiv(it.deductions_weight).toString(),
|
||||
settle_weight: formatWeightDiv(it.settle_weight).toString(),
|
||||
deduction_amount: (it.deductions_amount / 100).toString(),
|
||||
sale_price: (it.sale_price / 100).toString(),
|
||||
total_price: (it.estimate_amount / 100).toString(),
|
||||
length: (it.length / 100).toString(),
|
||||
weight_error: formatWeightDiv(it.settle_weight_error).toString(),
|
||||
})
|
||||
})
|
||||
})
|
||||
const query = {
|
||||
list,
|
||||
title: '售后确认单',
|
||||
// show_qrcode: true,
|
||||
// show_barcode: true,
|
||||
// show_wait_pay_amount: true,
|
||||
order_type: props.obj.sale_mode_name,
|
||||
// shipment_mode: props.obj.shipment_mode_name,
|
||||
// company: props.obj.title_purchaser_name,
|
||||
sale_user: props.obj.sale_user_name,
|
||||
order_created_time: formatDateTime(props.obj.create_time),
|
||||
order_no: props.obj.return_order_no,
|
||||
// target_user_name: props.obj.target_user_name,
|
||||
// target_address: props.obj.address_detail,
|
||||
// target_description: props.obj.reason_describe,
|
||||
pay_account: props.obj.transfer_remittance_account,
|
||||
bank_account_name: props.obj.account_name,
|
||||
bank_name: props.obj.bank_of_deposit,
|
||||
// pay_type: props.obj.settle_mode_name,
|
||||
client: props.obj.purchaser_name,
|
||||
// phone: props.obj.target_user_phone,
|
||||
order_total_length: (props.obj.total_number / 100).toString(),
|
||||
order_total_price: (
|
||||
props.obj.refund_amount / 100
|
||||
).toString(),
|
||||
// total_weight_error_discount: (
|
||||
// props.obj.total_weight_error_discount / 100
|
||||
// ).toString(),
|
||||
order_total_num: props.obj.total_number.toString(),
|
||||
// qrcode: "",
|
||||
// order_total_weight: (props.obj.total_weight / 1000).toString(),
|
||||
// estimate_amount: (props.obj.estimate_amount / 100).toString(),
|
||||
// total_sale_price: (props.obj.total_sale_price / 100).toString(),
|
||||
// show_total_sale_price: true,
|
||||
// show_total_weight_error_discount: true,
|
||||
// actual_amount: (props.obj.actual_amount / 100).toString(),
|
||||
// wait_pay_amount: (props.obj.wait_pay_amount / 100).toString(),
|
||||
order_total_settle_weight: (
|
||||
props.obj.order_total_settle_weight / 1000
|
||||
).toString(),
|
||||
order_total_deduction_weight: (
|
||||
props.obj.order_total_deduction_weight / 1000
|
||||
).toString(),
|
||||
order_total_deduction_amount: (
|
||||
props.obj.order_total_deduction_amount / 100
|
||||
).toString(),
|
||||
order_total_weight_error: (
|
||||
props.obj.total_weight_error / 1000
|
||||
).toString(),
|
||||
}
|
||||
const res = await payFetch(query)
|
||||
if (res.data) {
|
||||
setPicUrl(res.data.base64)
|
||||
Taro.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup show={props.showPopup} title={'退款码单'} onClose={() => props.popupClose?.()}>
|
||||
<View className={styles.popupBox}>
|
||||
<ScrollView enhanced scrollY className={styles.scroStyle}>
|
||||
<View className={styles.pic}>
|
||||
<Image lazyLoad mode='widthFix' style={{ width: '100%', height: '100%' }} src={PicUrl} onClick={() => showImage()}></Image>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className={styles.sure} onClick={() => saveImageCheck()}>保存图片</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
const fileData = useRef({
|
||||
filePath: '',
|
||||
base64: '',
|
||||
})
|
||||
|
||||
// 预览图片
|
||||
const showImage = () => {
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(PicUrl) || []
|
||||
const filePath = `${Taro.env.USER_DATA_PATH}/img${time}.${format}`
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
const save = Taro.getFileSystemManager()
|
||||
save.writeFile({
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
})
|
||||
Taro.previewImage({
|
||||
current: fileData.current.filePath, // 当前显示
|
||||
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
|
||||
// 检查是否开启保存图片权限
|
||||
const { check } = useCheckAuthorize({ scope: 'scope.writePhotosAlbum', msg: '您没授权，无法保存图片' })
|
||||
const saveImageCheck = async() => {
|
||||
const res = await check()
|
||||
res && saveImage()
|
||||
}
|
||||
|
||||
// 保存图片
|
||||
const saveImage = () => {
|
||||
const time = new Date().valueOf()
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(PicUrl) || []
|
||||
const filePath = `${Taro.env.USER_DATA_PATH}/img${time}.${format}`
|
||||
fileData.current.filePath = filePath
|
||||
fileData.current.base64 = bodyData
|
||||
const save = Taro.getFileSystemManager()
|
||||
save.writeFile({
|
||||
filePath: fileData.current.filePath,
|
||||
data: fileData.current.base64,
|
||||
encoding: 'base64',
|
||||
})
|
||||
alert.loading('正在保存图片')
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: fileData.current.filePath,
|
||||
success() {
|
||||
alert.success('图片保存成功')
|
||||
},
|
||||
fail(err) {
|
||||
console.log('err::', err)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup show={props.showPopup} title="退款码单" onClose={() => props.popupClose?.()}>
|
||||
<View className={styles.popupBox}>
|
||||
<ScrollView enhanced scrollY className={styles.scroStyle}>
|
||||
<View className={styles.pic}>
|
||||
<Image lazyLoad mode="widthFix" style={{ width: '100%', height: '100%' }} src={PicUrl} onClick={() => showImage()}></Image>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className={styles.sure} onClick={() => saveImageCheck()}>保存图片</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Segment = {
|
||||
interface Segment {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
type PropsType = {
|
||||
interface PropsType {
|
||||
list: Segment[]
|
||||
defaultId?: number
|
||||
onSelect?: (data: {id: number, name:string}) => void
|
||||
onSelect?: (data: { id: number; name: string }) => void
|
||||
}
|
||||
|
||||
const segmentedControl: FC<PropsType> = (props) => {
|
||||
const [selectInfo, setSelectInfo] = useState({
|
||||
selected: -1, //当前选中的id
|
||||
tabId: '', //需要滚动到的id
|
||||
selected: -1, // 当前选中的id
|
||||
tabId: '', // 需要滚动到的id
|
||||
})
|
||||
const { list, defaultId = -1, onSelect } = props
|
||||
|
||||
@@ -34,22 +35,22 @@ const segmentedControl: FC<PropsType> = (props) => {
|
||||
})
|
||||
if (index !== -1) {
|
||||
const num = index > 0 ? index - 1 : 0
|
||||
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
|
||||
setSelectInfo(e => ({ ...e, tabId: list[num].id.toString() }))
|
||||
}
|
||||
}
|
||||
setSelectInfo((e) => ({ ...e, selected: isValidNumber(defaultId) ? defaultId : -1 }))
|
||||
setSelectInfo(e => ({ ...e, selected: isValidNumber(defaultId) ? defaultId : -1 }))
|
||||
console.log('selectInfo', selectInfo)
|
||||
}, [defaultId])
|
||||
|
||||
const clickEvent = ({ item, index }: { item: any; index: number }) => {
|
||||
const num = index > 0 ? index - 1 : 0
|
||||
setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
|
||||
setSelectInfo(e => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
|
||||
onSelect?.(item)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.status_list}>
|
||||
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
|
||||
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation>
|
||||
<View className={styles.list_scroll}>
|
||||
{list.map((item, index) => {
|
||||
return (
|
||||
@@ -57,7 +58,8 @@ const segmentedControl: FC<PropsType> = (props) => {
|
||||
key={item.id}
|
||||
id={`tabs_${item.id}`}
|
||||
onClick={() => clickEvent({ item, index })}
|
||||
className={classnames(styles.status_item, selectInfo.selected === item.id ? styles.selected : '')}>
|
||||
className={classnames(styles.status_item, selectInfo.selected === item.id ? styles.selected : '')}
|
||||
>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { FC, MutableRefObject } from "react"
|
||||
import SelectSaleType from "../SelectSaleType"
|
||||
import SelectTimePicker from "../SelectTimePicker"
|
||||
import type { FC } from 'react'
|
||||
import React, { MutableRefObject } from 'react'
|
||||
import SelectSaleType from '../SelectSaleType'
|
||||
import SelectTimePicker from '../SelectTimePicker'
|
||||
import SelectMarketingDepartment from '../SelectMarketingDepartment'
|
||||
|
||||
|
||||
interface PropsType {
|
||||
children?: React.ReactNode
|
||||
}
|
||||
@@ -11,23 +11,23 @@ interface PropsType {
|
||||
const GroupItem = [
|
||||
SelectMarketingDepartment.name,
|
||||
SelectSaleType.name,
|
||||
SelectTimePicker.name
|
||||
SelectTimePicker.name,
|
||||
]
|
||||
|
||||
const SelectGroup: FC<PropsType> = (props: PropsType) => {
|
||||
const {children} = props
|
||||
const { children } = props
|
||||
|
||||
function handleChange(children,childEle) {
|
||||
return function (value: any){
|
||||
function handleChange(children, childEle) {
|
||||
return function(value: any) {
|
||||
childEle.props.onChange(value)
|
||||
children.forEach((child)=>{
|
||||
children.forEach((child) => {
|
||||
child.ref?.current.closePopup()
|
||||
})
|
||||
}
|
||||
}
|
||||
function handleCloseOverlay(children) {
|
||||
return function (){
|
||||
children.forEach((child)=>{
|
||||
return function() {
|
||||
children.forEach((child) => {
|
||||
child.ref?.current.closePopup()
|
||||
})
|
||||
}
|
||||
@@ -36,7 +36,7 @@ const SelectGroup: FC<PropsType> = (props: PropsType) => {
|
||||
const renderChildren = () => {
|
||||
return React.Children.map(children, (child) => {
|
||||
const childEle = child as React.FunctionComponentElement<any>
|
||||
return React.cloneElement(childEle, {onChange: handleChange(children,childEle), onCloseOverlay: handleCloseOverlay(children)})
|
||||
return React.cloneElement(childEle, { onChange: handleChange(children, childEle), onCloseOverlay: handleCloseOverlay(children) })
|
||||
})
|
||||
}
|
||||
return <>{renderChildren()}</>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { EnumMarketingDepartmentApi } from '@/api/index'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import { EnumMarketingDepartmentApi } from '@/api/index'
|
||||
|
||||
type ChangedValue = string | number
|
||||
|
||||
@@ -12,21 +12,20 @@ interface SelectSaleTypeProps {
|
||||
onCloseOverlay?: () => void
|
||||
}
|
||||
|
||||
type EnumList = {
|
||||
interface EnumList {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
// 营销部门
|
||||
const SelectSaleType = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
|
||||
const selectName = '营销部门'
|
||||
|
||||
const { onChange,onCloseOverlay } = props
|
||||
const { onChange, onCloseOverlay } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumMarketingDepartmentApi()
|
||||
|
||||
const getData = async () => {
|
||||
const getData = async() => {
|
||||
const res = await fetchData()
|
||||
setEnumList([{ id: -1, code: '', name: '全部' }, ...res.data.list])
|
||||
}
|
||||
@@ -60,15 +59,15 @@ const SelectSaleType = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
const displayTitle = useMemo(() => {
|
||||
if (currentValue === -1) {
|
||||
return selectName
|
||||
}
|
||||
return !!enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
}
|
||||
return enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
}, [enumList, currentValue])
|
||||
|
||||
return (
|
||||
<DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' ref={dropDownRef} onCloseOverlay={onCloseOverlay}>
|
||||
<DropDownItem title={displayTitle} value={currentValue} activeColor="#337fff" ref={dropDownRef} onCloseOverlay={onCloseOverlay}>
|
||||
<View className={styles.grid}>
|
||||
{!!enumList.length &&
|
||||
enumList.map((item: EnumList) => {
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList) => {
|
||||
return (
|
||||
<FilterButton isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { FC, memo, useEffect, useMemo, useState } from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
import type { FC } from 'react'
|
||||
import { memo, useEffect, useMemo, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { SaleOrderDataFormdataFormStatus } from '@/api/index'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { SaleOrderDataFormdataFormStatus } from '@/api/index'
|
||||
import { ShoppingProvider } from '@/pages/shopping/components/shoppingCart'
|
||||
|
||||
type ChangedValue = string | number
|
||||
@@ -15,21 +16,20 @@ interface SelectSaleTypeProps {
|
||||
dropDownClassName?: string
|
||||
}
|
||||
|
||||
type EnumList = {
|
||||
interface EnumList {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
// 销售排行指标
|
||||
const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
|
||||
|
||||
const selectName = '排行指标'
|
||||
|
||||
const { onChange, dropDownStyle, dropDownClassName } = props
|
||||
console.log(props)
|
||||
const { fetchData } = SaleOrderDataFormdataFormStatus()
|
||||
|
||||
const getData = async () => {
|
||||
const getData = async() => {
|
||||
const res = await fetchData()
|
||||
setEnumList([{ id: -1, code: '', name: '全部' }, ...res.data.list])
|
||||
}
|
||||
@@ -51,14 +51,14 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
|
||||
if (currentValue === -1) {
|
||||
return selectName
|
||||
}
|
||||
return !!enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
return enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
}, [enumList, currentValue])
|
||||
|
||||
return (
|
||||
<DropDownItem title={displayTitle} customClassName={dropDownClassName} customStyle={dropDownStyle} value={currentValue} activeColor='#337fff' showOverlay={false}>
|
||||
<DropDownItem title={displayTitle} customClassName={dropDownClassName} customStyle={dropDownStyle} value={currentValue} activeColor="#337fff" showOverlay={false}>
|
||||
<View className={classnames(styles.grid)}>
|
||||
{!!enumList.length &&
|
||||
enumList.map((item: EnumList) => {
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList) => {
|
||||
return (
|
||||
<FilterButton isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { EnumSalesTypeApi } from '@/api/index'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import { EnumSalesTypeApi } from '@/api/index'
|
||||
|
||||
type ChangedValue = string | number
|
||||
|
||||
@@ -13,7 +13,7 @@ interface SelectSaleTypeProps {
|
||||
defaultValue?: ChangedValue
|
||||
}
|
||||
|
||||
type EnumList = {
|
||||
interface EnumList {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
@@ -21,11 +21,11 @@ type EnumList = {
|
||||
// 销售类型
|
||||
const SelectSaleType = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
const selectName = '销售类型'
|
||||
const { onChange, defaultValue = 0,onCloseOverlay } = props
|
||||
const { onChange, defaultValue = 0, onCloseOverlay } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumSalesTypeApi()
|
||||
|
||||
const getData = async () => {
|
||||
const getData = async() => {
|
||||
const res = await fetchData()
|
||||
setEnumList([{ id: -1, code: '', name: '全部' }, ...res.data.list])
|
||||
}
|
||||
@@ -61,14 +61,14 @@ const SelectSaleType = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
if (currentValue === -1) {
|
||||
return selectName
|
||||
}
|
||||
return !!enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
return enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
}, [enumList, currentValue])
|
||||
|
||||
return (
|
||||
<DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' ref={dropDownRef} onCloseOverlay={onCloseOverlay}>
|
||||
<DropDownItem title={displayTitle} value={currentValue} activeColor="#337fff" ref={dropDownRef} onCloseOverlay={onCloseOverlay}>
|
||||
<View className={styles.grid}>
|
||||
{!!enumList.length &&
|
||||
enumList.map((item: EnumList) => {
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList) => {
|
||||
return (
|
||||
<FilterButton isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { formatDateTime } from '@/common/format'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import dayjs from 'dayjs'
|
||||
import { FC, forwardRef, memo, useImperativeHandle, useRef, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
@@ -7,23 +6,24 @@ import FilterButton from '../filterButton'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import TimePickerPopup from '../timePickerPopup'
|
||||
import styles from './index.module.scss'
|
||||
import { formatDateTime } from '@/common/format'
|
||||
|
||||
export type ChangedValue = string[]
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
defaultValue?: Key // 默认值
|
||||
timeOptions?: {[Property: string]: Value} // 支持自定义 时间配置
|
||||
defaultValue?: Key // 默认值
|
||||
timeOptions?: Record<string, Value> // 支持自定义 时间配置
|
||||
onChange?: (value: ChangedValue) => void
|
||||
onCloseOverlay?: () => void
|
||||
}
|
||||
|
||||
const FilterTimeOptions = {
|
||||
'0': {
|
||||
0: {
|
||||
name: '全部',
|
||||
date_min: '',
|
||||
date_max: '',
|
||||
},
|
||||
'1': {
|
||||
1: {
|
||||
name: '今天',
|
||||
date_min: `${dayjs(new Date())
|
||||
.add(0, 'day')
|
||||
@@ -32,7 +32,7 @@ const FilterTimeOptions = {
|
||||
.add(1, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
'2': {
|
||||
2: {
|
||||
name: '昨日',
|
||||
date_min: `${dayjs(new Date())
|
||||
.add(-1, 'day')
|
||||
@@ -41,7 +41,7 @@ const FilterTimeOptions = {
|
||||
.add(0, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
'3': {
|
||||
3: {
|
||||
name: '近7日',
|
||||
date_min: `${dayjs(new Date())
|
||||
.add(-7, 'day')
|
||||
@@ -50,7 +50,7 @@ const FilterTimeOptions = {
|
||||
.add(0, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
'4': {
|
||||
4: {
|
||||
name: '近30日',
|
||||
date_min: `${dayjs(new Date())
|
||||
.add(-30, 'day')
|
||||
@@ -59,7 +59,7 @@ const FilterTimeOptions = {
|
||||
.add(0, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
'5': {
|
||||
5: {
|
||||
name: '近90日',
|
||||
date_min: `${dayjs(new Date())
|
||||
.add(-90, 'day')
|
||||
@@ -68,7 +68,7 @@ const FilterTimeOptions = {
|
||||
.add(0, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
'custom': {
|
||||
custom: {
|
||||
name: '自定义时间',
|
||||
date_min: '',
|
||||
date_max: '',
|
||||
@@ -79,10 +79,10 @@ type Key = keyof typeof FilterTimeOptions
|
||||
type Value = typeof FilterTimeOptions[Key]
|
||||
|
||||
const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
const { onChange: change,onCloseOverlay, defaultValue = '0', timeOptions = FilterTimeOptions } = props
|
||||
const { onChange: change, onCloseOverlay, defaultValue = '0', timeOptions = FilterTimeOptions } = props
|
||||
// rerender 的时候需要更新 ref 的值
|
||||
const Options = useRef({ ...timeOptions, 'custom': FilterTimeOptions['custom'] })
|
||||
Options.current = { ...timeOptions, 'custom': FilterTimeOptions['custom'] }
|
||||
const Options = useRef({ ...timeOptions, custom: FilterTimeOptions.custom })
|
||||
Options.current = { ...timeOptions, custom: FilterTimeOptions.custom }
|
||||
|
||||
const [currentValue, setCurrentValue] = useState(defaultValue)
|
||||
|
||||
@@ -97,7 +97,6 @@ const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
// 点击关闭时间筛选
|
||||
const handClose = () => {
|
||||
setShowTime(false)
|
||||
|
||||
}
|
||||
|
||||
const handleClick = (key: Key) => {
|
||||
@@ -105,9 +104,9 @@ const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
change?.([Options.current[key].date_min, Options.current[key].date_max])
|
||||
customFilterButtonText.current = '自定义时间'
|
||||
}
|
||||
|
||||
|
||||
// 选择自定义时间
|
||||
const onSelectDate = event => {
|
||||
const onSelectDate = (event) => {
|
||||
console.log(event?.value, 'event?.value?.start')
|
||||
setCurrentDate({
|
||||
start: event?.value?.start,
|
||||
@@ -127,7 +126,7 @@ const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
setShowTime(true)
|
||||
}
|
||||
const dropDownRef = useRef<any>(null)
|
||||
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
@@ -143,12 +142,12 @@ const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
<>
|
||||
<DropDownItem
|
||||
title={currentValue === '0' ? '查询日期' : Options.current[currentValue].name}
|
||||
direction='down'
|
||||
direction="down"
|
||||
value={currentValue}
|
||||
activeColor='#337fff'
|
||||
activeColor="#337fff"
|
||||
ref={dropDownRef}
|
||||
onCloseOverlay={onCloseOverlay}
|
||||
>
|
||||
>
|
||||
<View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
|
||||
{Object.entries(Options.current)
|
||||
.slice(0, -1)
|
||||
@@ -159,9 +158,9 @@ const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'custom' === currentValue} onClick={handleCustomTime}>
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={currentValue === 'custom'} onClick={handleCustomTime}>
|
||||
<Text>{customFilterButtonText.current}</Text>
|
||||
<IconFont name='icon-chakanquanbukehu' color={'custom' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
<IconFont name="icon-chakanquanbukehu" color={currentValue === 'custom' ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
</DropDownItem>
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import Popup from '@/components/popup'
|
||||
import { Input, ScrollView, Text, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import TextareaEnhance from '@/components/textareaEnhance'
|
||||
import { CreateFavoriteApi, FavoriteListApi } from '@/api/favorite'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { getFilterData } from '@/common/util'
|
||||
|
||||
//原因选择
|
||||
type ReasonInfoParam = {
|
||||
show?: boolean //显示
|
||||
onClose?: () => void //关闭
|
||||
// 原因选择
|
||||
interface ReasonInfoParam {
|
||||
show?: boolean // 显示
|
||||
onClose?: () => void // 关闭
|
||||
onAdd?: (val: any) => void
|
||||
}
|
||||
export default memo(({ show = false, onClose, onAdd }: ReasonInfoParam) => {
|
||||
//获取列表
|
||||
const AddCollection = ({ show = false, onClose, onAdd }: ReasonInfoParam) => {
|
||||
// 获取列表
|
||||
const [list, setList] = useState([])
|
||||
const { fetchData: fetchDataList } = FavoriteListApi()
|
||||
const getFavoriteList = async () => {
|
||||
let res = await fetchDataList(getFilterData())
|
||||
const getFavoriteList = async() => {
|
||||
const res = await fetchDataList(getFilterData())
|
||||
setList(() => res.data.list)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (show) getFavoriteList()
|
||||
if (show) { getFavoriteList() }
|
||||
}, [show])
|
||||
|
||||
const onCreate = () => {
|
||||
@@ -42,8 +42,8 @@ export default memo(({ show = false, onClose, onAdd }: ReasonInfoParam) => {
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView scrollY className={styles.scrollView}>
|
||||
{list?.map((item: any) => (
|
||||
<View onClick={() => onAdd?.(item)} className={styles.collection_item}>
|
||||
{list?.map((item: any, key) => (
|
||||
<View onClick={() => onAdd?.(item)} className={styles.collection_item} key={key}>
|
||||
<View className={styles.name}>
|
||||
{item.name}
|
||||
<Text>（{item.product_color_list?.length || 0}）</Text>
|
||||
@@ -55,4 +55,5 @@ export default memo(({ show = false, onClose, onAdd }: ReasonInfoParam) => {
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
}
|
||||
export default memo(AddCollection)
|
||||
|
||||
+195
-196
@@ -1,225 +1,224 @@
|
||||
import { ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo, ReactHTMLElement, useEffect, useRef, useState } from "react";
|
||||
import Drawer from "@/components/popup";
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { GetAddressListApi } from "@/api/addressList";
|
||||
import { alert } from "@/common/common";
|
||||
import IconFont from "../iconfont/iconfont";
|
||||
import { ScrollView, Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { ReactHTMLElement, memo, useEffect, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
import Drawer from '@/components/popup'
|
||||
import { GetAddressListApi } from '@/api/addressList'
|
||||
import { alert } from '@/common/common'
|
||||
|
||||
type DefaultValueParm = { name: string, id: string | number, level?: number | string }
|
||||
interface DefaultValueParm { name: string; id: string | number; level?: number | string }
|
||||
|
||||
type Params = {
|
||||
addressOnSelect?: (val: DefaultValueParm[]) => void,
|
||||
addressOnChange?: (val: DefaultValueParm[]) => void,
|
||||
addressOnClose?: () => void,
|
||||
show?: true | false,
|
||||
defaultValue?: DefaultValueParm[]
|
||||
selectStatus?: false | true, //false不需要选择完整地址，true需要选择完整地址
|
||||
interface Params {
|
||||
addressOnSelect?: (val: DefaultValueParm[]) => void
|
||||
addressOnChange?: (val: DefaultValueParm[]) => void
|
||||
addressOnClose?: () => void
|
||||
show?: true | false
|
||||
defaultValue?: DefaultValueParm[]
|
||||
selectStatus?: false | true // false不需要选择完整地址，true需要选择完整地址
|
||||
}
|
||||
|
||||
type AddresParam = {
|
||||
ad_code?: string,
|
||||
id?: number,
|
||||
level?: number,
|
||||
level_name?: string,
|
||||
name?: string,
|
||||
parent_id?: number,
|
||||
interface AddresParam {
|
||||
ad_code?: string
|
||||
id?: number
|
||||
level?: number
|
||||
level_name?: string
|
||||
name?: string
|
||||
parent_id?: number
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default memo(({
|
||||
addressOnSelect,
|
||||
addressOnChange,
|
||||
addressOnClose,
|
||||
show = false,
|
||||
defaultValue = [],
|
||||
selectStatus = true
|
||||
const Address = ({
|
||||
addressOnSelect,
|
||||
addressOnChange,
|
||||
addressOnClose,
|
||||
show = false,
|
||||
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
|
||||
const [selectArr, setSelectArr] = useState<DefaultValueParm[]>([]) //选中的省市区
|
||||
const [cityStatus, setCityStatus] = useState(false) //城市是否存在
|
||||
const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在
|
||||
const [confirmBtnStatus, setConfirmBtnStatus] = useState(false) //确认按钮是否可用
|
||||
const [list, setList] = useState<AddresParam[]>([])
|
||||
const [selectIndex, setSelectIndex] = useState(0) // 0 省， 1 市，2 区
|
||||
const [selectId, setSelectId] = useState(1) // 选中的id
|
||||
const [selectArr, setSelectArr] = useState<DefaultValueParm[]>([]) // 选中的省市区
|
||||
const [cityStatus, setCityStatus] = useState(false) // 城市是否存在
|
||||
const [areaStatus, setAreaStatus] = useState(false) // 区镇是否存在
|
||||
const [confirmBtnStatus, setConfirmBtnStatus] = useState(false) // 确认按钮是否可用
|
||||
|
||||
const [bottomStyle, setBottomStyle] = useState({ width: '100rpx', left: '0rpx' }) //底部滚动条样式
|
||||
|
||||
useEffect(() => {
|
||||
if (selectArr.length == 0) {
|
||||
setSelectArr(defaultValue)
|
||||
if (defaultValue.length > 1) setCityStatus(true)
|
||||
if (defaultValue.length > 2) setAreaStatus(true)
|
||||
if (defaultValue.length > 0) setConfirmBtnStatus(true)
|
||||
}
|
||||
}, [defaultValue])
|
||||
|
||||
|
||||
//获取地址
|
||||
const { fetchData } = GetAddressListApi()
|
||||
useEffect(() => {
|
||||
getProvince()
|
||||
}, [])
|
||||
|
||||
//选中内容
|
||||
const selectItem = (item) => {
|
||||
setSelectId(item.id)
|
||||
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 }])
|
||||
area(item.id)
|
||||
} else {
|
||||
setSelectArr([selectArr[0], selectArr[1], { name: item.name, id: item.id, level: item.level }])
|
||||
getDomDes('#address_tab_2')
|
||||
}
|
||||
const [bottomStyle, setBottomStyle] = useState({ width: '100rpx', left: '0rpx' }) // 底部滚动条样式
|
||||
|
||||
useEffect(() => {
|
||||
if (selectArr.length == 0) {
|
||||
setSelectArr(defaultValue)
|
||||
if (defaultValue.length > 1) { setCityStatus(true) }
|
||||
if (defaultValue.length > 2) { setAreaStatus(true) }
|
||||
if (defaultValue.length > 0) { setConfirmBtnStatus(true) }
|
||||
}
|
||||
}, [defaultValue])
|
||||
// 获取地址
|
||||
const { fetchData } = GetAddressListApi()
|
||||
|
||||
//地址数据
|
||||
useEffect(() => {
|
||||
if (selectArr && selectArr.length > 0)
|
||||
addressOnChange?.(selectArr)
|
||||
}, [selectArr])
|
||||
// 获取省市区宽度
|
||||
const getDomDes = (id) => {
|
||||
setTimeout(() => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select(id).boundingClientRect((rect) => {
|
||||
const left = rect.left
|
||||
const clientWidth = rect.width
|
||||
console.log(clientWidth)
|
||||
setBottomStyle({
|
||||
width: `${clientWidth}px`,
|
||||
left: `${left}px`,
|
||||
})
|
||||
}).exec()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
//选中标题
|
||||
const onSelectIndex = (index) => {
|
||||
setSelectIndex(index)
|
||||
const selectid = selectArr[index] ? selectArr[index].id : 0
|
||||
setSelectId(selectid as number)
|
||||
if (index == 0) {
|
||||
getProvince()
|
||||
} else if (index == 1) {
|
||||
const id = selectArr[0]?.id
|
||||
getCity(id)
|
||||
} else {
|
||||
const id = selectArr[1]?.id
|
||||
area(id)
|
||||
}
|
||||
// 获取省
|
||||
const getProvince = async() => {
|
||||
const 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')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getProvince()
|
||||
}, [])
|
||||
|
||||
//获取省
|
||||
const getProvince = async () => {
|
||||
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')
|
||||
}
|
||||
// 地址数据
|
||||
useEffect(() => {
|
||||
if (selectArr && selectArr.length > 0) { addressOnChange?.(selectArr) }
|
||||
}, [selectArr])
|
||||
|
||||
// 获取区
|
||||
const area = async(id) => {
|
||||
const res = await fetchData({ parent_id: id })
|
||||
areaList.current = res.data.list || []
|
||||
if (areaList.current.length > 0) {
|
||||
setSelectIndex(2)
|
||||
setList(() => areaList.current)
|
||||
setAreaStatus(true)
|
||||
getDomDes('#address_tab_2')
|
||||
setConfirmBtnStatus(false)
|
||||
}
|
||||
|
||||
//获取市
|
||||
const getCity = async (id) => {
|
||||
let res = await fetchData({ parent_id: id })
|
||||
cityList.current = res.data.list || []
|
||||
if (cityList.current.length > 0) {
|
||||
setSelectIndex(1)
|
||||
setList(() => cityList.current)
|
||||
setCityStatus(true)
|
||||
getDomDes('#address_tab_1')
|
||||
setConfirmBtnStatus(false)
|
||||
} else {
|
||||
setConfirmBtnStatus(true)
|
||||
setCityStatus(false)
|
||||
}
|
||||
else {
|
||||
setConfirmBtnStatus(true)
|
||||
setAreaStatus(false)
|
||||
}
|
||||
}
|
||||
|
||||
//获取区
|
||||
const area = async (id) => {
|
||||
let res = await fetchData({ parent_id: id })
|
||||
areaList.current = res.data.list || []
|
||||
if (areaList.current.length > 0) {
|
||||
setSelectIndex(2)
|
||||
setList(() => areaList.current)
|
||||
setAreaStatus(true)
|
||||
getDomDes('#address_tab_2')
|
||||
setConfirmBtnStatus(false)
|
||||
} else {
|
||||
setConfirmBtnStatus(true)
|
||||
setAreaStatus(false)
|
||||
}
|
||||
// 获取市
|
||||
const getCity = async(id) => {
|
||||
const res = await fetchData({ parent_id: id })
|
||||
cityList.current = res.data.list || []
|
||||
if (cityList.current.length > 0) {
|
||||
setSelectIndex(1)
|
||||
setList(() => cityList.current)
|
||||
setCityStatus(true)
|
||||
getDomDes('#address_tab_1')
|
||||
setConfirmBtnStatus(false)
|
||||
}
|
||||
|
||||
//确定按钮
|
||||
const submitSelect = () => {
|
||||
addressOnClose?.()
|
||||
addressOnSelect?.(selectArr)
|
||||
else {
|
||||
setConfirmBtnStatus(true)
|
||||
setCityStatus(false)
|
||||
}
|
||||
}
|
||||
|
||||
//获取省市区宽度
|
||||
const getDomDes = (id) => {
|
||||
setTimeout(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select(id).boundingClientRect(rect => {
|
||||
let left = rect.left;
|
||||
let clientWidth = rect.width;
|
||||
console.log(clientWidth)
|
||||
setBottomStyle({
|
||||
width: clientWidth + 'px',
|
||||
left: left + 'px'
|
||||
})
|
||||
}).exec();
|
||||
}, 100)
|
||||
// 选中内容
|
||||
const selectItem = (item) => {
|
||||
setSelectId(item.id)
|
||||
if (selectIndex == 0) {
|
||||
setSelectArr([{ name: item.name, id: item.id, level: item.level }])
|
||||
getCity(item.id)
|
||||
setAreaStatus(false)
|
||||
setCityStatus(false)
|
||||
}
|
||||
|
||||
//点击标题栏
|
||||
const selectTab = (index) => {
|
||||
onSelectIndex(index)
|
||||
getDomDes('#address_tab_' + index)
|
||||
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 }])
|
||||
getDomDes('#address_tab_2')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer showTitle={false} show={show} onClose={submitSelect}>
|
||||
<View className={styles.address_main}>
|
||||
{/* <View className={styles.address_title}>
|
||||
// 选中标题
|
||||
const onSelectIndex = (index) => {
|
||||
setSelectIndex(index)
|
||||
const selectid = selectArr[index] ? selectArr[index].id : 0
|
||||
setSelectId(selectid as number)
|
||||
if (index == 0) {
|
||||
getProvince()
|
||||
}
|
||||
else if (index == 1) {
|
||||
const id = selectArr[0]?.id
|
||||
getCity(id)
|
||||
}
|
||||
else {
|
||||
const id = selectArr[1]?.id
|
||||
area(id)
|
||||
}
|
||||
}
|
||||
|
||||
// 确定按钮
|
||||
const submitSelect = () => {
|
||||
addressOnClose?.()
|
||||
addressOnSelect?.(selectArr)
|
||||
}
|
||||
|
||||
// 点击标题栏
|
||||
const selectTab = (index) => {
|
||||
onSelectIndex(index)
|
||||
getDomDes(`#address_tab_${index}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer showTitle={false} show={show} onClose={submitSelect}>
|
||||
<View className={styles.address_main}>
|
||||
{/* <View className={styles.address_title}>
|
||||
<View onClick={() => addressOnClose?.()}>取消</View>
|
||||
<View onClick={() => submitSelect()}>确定</View>
|
||||
</View> */}
|
||||
<View className={styles.sure} onClick={() => submitSelect()}>确定</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 style={bottomStyle} className={styles.bottom_index}></View>
|
||||
<View className={styles.sure} onClick={() => submitSelect()}>确定</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 style={bottomStyle} className={styles.bottom_index}></View>
|
||||
</View>
|
||||
<View className={styles.address_list}>
|
||||
<ScrollView scrollY className={styles.address_scroll}>
|
||||
<View className={styles.address_scroll_list}>
|
||||
{list.map((item, key) => {
|
||||
return (
|
||||
<View key={key} 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) && <IconFont name="icon-lujing" color="#327fff" size={30}></IconFont>
|
||||
}
|
||||
{
|
||||
(selectArr[selectIndex]?.id !== item.id) && <IconFont name="icon-chakanquanbukehu" color="#d8d8d8" size={30}></IconFont>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.address_list}>
|
||||
<ScrollView scrollY className={styles.address_scroll}>
|
||||
<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 className={styles.address_list_item_name}>{item.name}</View>
|
||||
{(selectArr[selectIndex]?.id == item.id) &&
|
||||
<IconFont name={'icon-lujing'} color={'#327fff'} size={30}></IconFont>
|
||||
}
|
||||
{
|
||||
(selectArr[selectIndex]?.id !== item.id) &&
|
||||
<IconFont name={'icon-chakanquanbukehu'} color={'#d8d8d8'} size={30}></IconFont>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
})
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default memo(Address)
|
||||
|
||||
@@ -1,202 +1,205 @@
|
||||
import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
|
||||
import { alert } from "@/common/common"
|
||||
import { ORDER_STATUS, SALE_MODE } from "@/common/enum"
|
||||
import { ScrollView, Text, View } from "@tarojs/components"
|
||||
import Taro from "@tarojs/taro"
|
||||
import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import { ScrollView, Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { ORDER_STATUS, SALE_MODE } from '@/common/enum'
|
||||
import { alert } from '@/common/common'
|
||||
import { CancelOrderApi, ReceiveOrderApi } from '@/api/order'
|
||||
|
||||
type Param = {
|
||||
orderInfo: {
|
||||
status: number, //订单状态
|
||||
orderId: number, //订单id
|
||||
actual_amount: number, //实付金额
|
||||
wait_pay_amount: number, //待付金额
|
||||
sale_mode: number //订单类型
|
||||
}|null,
|
||||
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
|
||||
interface Param {
|
||||
orderInfo: {
|
||||
status: number // 订单状态
|
||||
orderId: number // 订单id
|
||||
actual_amount: number // 实付金额
|
||||
wait_pay_amount: number // 待付金额
|
||||
sale_mode: number // 订单类型
|
||||
}|null
|
||||
onClick?: (val: number) => void // 点击后触发的事件，返回订单状态
|
||||
}
|
||||
|
||||
export default memo(({orderInfo, onClick}:Param) => {
|
||||
//订单状态枚举
|
||||
const {
|
||||
SaleOrderStatusBooking,
|
||||
SaleOrderStatusArranging,
|
||||
SaleOrderStatusArranged,
|
||||
SaleOrderStatusWaitingDelivery,
|
||||
SaleOrderStatusComplete,
|
||||
SaleOrderStatusRefund,
|
||||
SaleOrderStatusWaitingPayment,
|
||||
SaleOrderStatusWaitingReceipt,
|
||||
SaleOrderStatusAlreadyReceipt,
|
||||
SaleorderstatusWaitingPrePayment
|
||||
} = ORDER_STATUS
|
||||
export default memo(({ orderInfo, onClick }: Param) => {
|
||||
// 订单状态枚举
|
||||
const {
|
||||
SaleOrderStatusBooking,
|
||||
SaleOrderStatusArranging,
|
||||
SaleOrderStatusArranged,
|
||||
SaleOrderStatusWaitingDelivery,
|
||||
SaleOrderStatusComplete,
|
||||
SaleOrderStatusRefund,
|
||||
SaleOrderStatusWaitingPayment,
|
||||
SaleOrderStatusWaitingReceipt,
|
||||
SaleOrderStatusAlreadyReceipt,
|
||||
SaleorderstatusWaitingPrePayment,
|
||||
} = ORDER_STATUS
|
||||
|
||||
//订单类型
|
||||
const {
|
||||
SaLeModeBulk,
|
||||
SaleModeLengthCut,
|
||||
SaLeModeWeightCut,
|
||||
} = SALE_MODE
|
||||
|
||||
//订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现
|
||||
const orderBtnsList = useRef([
|
||||
{
|
||||
id: 1,
|
||||
value: [SaleOrderStatusBooking.value,
|
||||
SaleOrderStatusArranging.value,
|
||||
SaleOrderStatusArranged.value,
|
||||
SaleOrderStatusWaitingPayment.value,
|
||||
SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货
|
||||
label: '取消订单'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
|
||||
label: '去付款'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货
|
||||
label: '申请退款'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
|
||||
label: '查看物流'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应： 待收货, 已收货, 已退款
|
||||
label: '申请退货'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货
|
||||
label: '确认收货'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款
|
||||
label: '再次购买'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: [SaleOrderStatusBooking.value], //按钮对应： 待接单
|
||||
label: '退款'
|
||||
},
|
||||
])
|
||||
|
||||
// 订单类型
|
||||
const {
|
||||
SaLeModeBulk,
|
||||
SaleModeLengthCut,
|
||||
SaLeModeWeightCut,
|
||||
} = SALE_MODE
|
||||
|
||||
//判断是否显示该按钮
|
||||
const orderBtnsShow = (item) => {
|
||||
if(orderInfo) {
|
||||
if(item.id == 1) {
|
||||
//取消订单按钮
|
||||
return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款
|
||||
} else if (item.id == 2) {
|
||||
//去付款按钮
|
||||
return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示
|
||||
} else if(item.id == 3 ) {
|
||||
//申请退款, 只有大货才有
|
||||
return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款
|
||||
} else if( item.id == 8) {
|
||||
//退款按钮（直接退款不用申请）, 只有散剪和剪板有
|
||||
return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款
|
||||
}
|
||||
else {
|
||||
//其他按钮
|
||||
return item.value.includes(orderInfo.status)
|
||||
}
|
||||
// 订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现
|
||||
const orderBtnsList = useRef([
|
||||
{
|
||||
id: 1,
|
||||
value: [SaleOrderStatusBooking.value,
|
||||
SaleOrderStatusArranging.value,
|
||||
SaleOrderStatusArranged.value,
|
||||
SaleOrderStatusWaitingPayment.value,
|
||||
SaleOrderStatusWaitingDelivery.value], // 取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货
|
||||
label: '取消订单',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], // 去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
|
||||
label: '去付款',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: [SaleOrderStatusWaitingDelivery.value], // 申请退款按钮对应： 待发货
|
||||
label: '申请退款',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], // 取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
|
||||
label: '查看物流',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], // 申请退货按钮对应： 待收货, 已收货, 已退款
|
||||
label: '申请退货',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: [SaleOrderStatusWaitingReceipt.value], // 确认收货按钮对应： 待收货
|
||||
label: '确认收货',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], // 再次购买按钮对应： 待收货，已收货，已完成, 已退款
|
||||
label: '再次购买',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: [SaleOrderStatusBooking.value], // 按钮对应： 待接单
|
||||
label: '退款',
|
||||
},
|
||||
])
|
||||
|
||||
// 判断是否显示该按钮
|
||||
const orderBtnsShow = (item) => {
|
||||
if (orderInfo) {
|
||||
if (item.id == 1) {
|
||||
// 取消订单按钮
|
||||
return (orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) // 在待发货之前没有付过款
|
||||
}
|
||||
else if (item.id == 2) {
|
||||
// 去付款按钮
|
||||
return (orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) // 只要没有付完款就显示
|
||||
}
|
||||
else if (item.id == 3) {
|
||||
// 申请退款, 只有大货才有
|
||||
return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) // 大货在待发货付过款
|
||||
}
|
||||
else if (item.id == 8) {
|
||||
// 退款按钮（直接退款不用申请）, 只有散剪和剪板有
|
||||
return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) // 散剪和剪板在待接单时付过款
|
||||
}
|
||||
else {
|
||||
// 其他按钮
|
||||
return item.value.includes(orderInfo.status)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示的按钮数组
|
||||
const orderBtnsShowList: { id: number; value: any; label: string }[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter((item) => {
|
||||
return orderBtnsShow(item)
|
||||
})
|
||||
}, [orderInfo])
|
||||
|
||||
// 点击按钮操作
|
||||
const submitBtns = (val, index) => {
|
||||
(val == 1) && cancelOrder(); // 取消订单按钮
|
||||
(val == 2) && onClick?.(2); // 去付款按钮
|
||||
(val == 6) && receiveOrder() // 确认收货
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
const { fetchData: cancelFetchData } = CancelOrderApi()
|
||||
const cancelOrder = () => {
|
||||
Taro.showModal({
|
||||
title: '要取消该订单吗？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await cancelFetchData({ id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(1)
|
||||
}
|
||||
else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//显示的按钮数组
|
||||
const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter(item => {
|
||||
return orderBtnsShow(item)
|
||||
})
|
||||
}, [orderInfo])
|
||||
// 确认订单
|
||||
const { fetchData: receiveOrderFetchData } = ReceiveOrderApi()
|
||||
const receiveOrder = async() => {
|
||||
console.log('123456')
|
||||
Taro.showModal({
|
||||
title: '确定收货？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await receiveOrderFetchData({ sale_order_id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
onClick?.(6)
|
||||
alert.success('收货成功')
|
||||
}
|
||||
else {
|
||||
alert.error('收货失败')
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return { top: `-${(orderBtnsShowList.length - 3) * 70 + 10}rpx`, left: `-${10}rpx` }
|
||||
}, [orderBtnsShowList])
|
||||
|
||||
return (
|
||||
<View className={styles.btns_list}>
|
||||
{(orderBtnsShowList.length > 3) && <View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(true)}>更多</Text>
|
||||
{showMore && <View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
return ((index >= 3) && <View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
|
||||
})}
|
||||
</View>
|
||||
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
|
||||
</View>}
|
||||
</View>}
|
||||
|
||||
//点击按钮操作
|
||||
const submitBtns = (val, index) => {
|
||||
(val == 1)&&cancelOrder(); //取消订单按钮
|
||||
(val == 2)&&onClick?.(2); //去付款按钮
|
||||
(val == 6)&&receiveOrder(); //确认收货
|
||||
|
||||
}
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3) && <View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>,
|
||||
)}
|
||||
</View>
|
||||
|
||||
//取消订单
|
||||
const {fetchData: cancelFetchData} = CancelOrderApi()
|
||||
const cancelOrder = () => {
|
||||
Taro.showModal({
|
||||
title: '要取消该订单吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let res = await cancelFetchData({id: orderInfo?.orderId})
|
||||
if(res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(1)
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//确认订单
|
||||
const {fetchData: receiveOrderFetchData} = ReceiveOrderApi()
|
||||
const receiveOrder = async () => {
|
||||
console.log('123456')
|
||||
Taro.showModal({
|
||||
title: '确定收货？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId})
|
||||
if(res.success){
|
||||
onClick?.(6)
|
||||
alert.success('收货成功')
|
||||
} else {
|
||||
alert.error('收货失败')
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
|
||||
}, [orderBtnsShowList])
|
||||
|
||||
return (
|
||||
<View className={styles.btns_list}>
|
||||
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(true)}>更多</Text>
|
||||
{showMore&&<View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
|
||||
})}
|
||||
</View>
|
||||
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
|
||||
</View>}
|
||||
</View>}
|
||||
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
})
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,156 +1,158 @@
|
||||
import { alert } from "@/common/common"
|
||||
import { AFTER_ORDER_STATUS, ORDER_STATUS, REFUND_STATUS_ORDER, SALE_MODE } from "@/common/enum"
|
||||
import {Text, View } from "@tarojs/components"
|
||||
import Taro from "@tarojs/taro"
|
||||
import {useRef, memo, useState, useMemo } from "react"
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import { ReturnApplyOrderCancelApi } from "@/api/salesAfterOrder"
|
||||
import { throttle } from "@/common/util"
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { AFTER_ORDER_STATUS, ORDER_STATUS, REFUND_STATUS_ORDER, SALE_MODE } from '@/common/enum'
|
||||
import { alert } from '@/common/common'
|
||||
import { ReturnApplyOrderCancelApi } from '@/api/salesAfterOrder'
|
||||
import { throttle } from '@/common/util'
|
||||
|
||||
type Param = {
|
||||
orderInfo: {
|
||||
stage: number, //售后状态
|
||||
sale_mode: number, //订单类型
|
||||
type: number, //1退货，2退款
|
||||
return_apply_order_id: number //售后申请单
|
||||
is_quality_check: true|false //质检结果
|
||||
},
|
||||
onClick?: (val: number) => void, //点击后触发的事件，返回订单状态
|
||||
fixedBottom?: true|false, //是否固定在底部
|
||||
interface Param {
|
||||
orderInfo: {
|
||||
stage: number // 售后状态
|
||||
sale_mode: number // 订单类型
|
||||
type: number // 1退货，2退款
|
||||
return_apply_order_id: number // 售后申请单
|
||||
is_quality_check: true|false // 质检结果
|
||||
}
|
||||
onClick?: (val: number) => void // 点击后触发的事件，返回订单状态
|
||||
fixedBottom?: true|false // 是否固定在底部
|
||||
|
||||
}
|
||||
|
||||
export default memo(({orderInfo, onClick, fixedBottom = true}:Param) => {
|
||||
//售后订单状态
|
||||
const {
|
||||
ReturnStageApplying,
|
||||
ReturnStageWaitCheck,
|
||||
ReturnStageReturned,
|
||||
ReturnStageQualityCheckPendingRefund,
|
||||
ReturnStageServiceOrderPendingRefund,
|
||||
} = AFTER_ORDER_STATUS
|
||||
export default memo(({ orderInfo, onClick, fixedBottom = true }: Param) => {
|
||||
// 售后订单状态
|
||||
const {
|
||||
ReturnStageApplying,
|
||||
ReturnStageWaitCheck,
|
||||
ReturnStageReturned,
|
||||
ReturnStageQualityCheckPendingRefund,
|
||||
ReturnStageServiceOrderPendingRefund,
|
||||
} = AFTER_ORDER_STATUS
|
||||
|
||||
const {
|
||||
ReturnApplyOrderTypeAdvanceReceiptRefund, // 预收退款
|
||||
ReturnApplyOrderTypeReturnForRefund, // 退货退款
|
||||
ReturnApplyOrderTypeSalesRefund // 销售退款
|
||||
} = REFUND_STATUS_ORDER
|
||||
const {
|
||||
ReturnApplyOrderTypeAdvanceReceiptRefund, // 预收退款
|
||||
ReturnApplyOrderTypeReturnForRefund, // 退货退款
|
||||
ReturnApplyOrderTypeSalesRefund, // 销售退款
|
||||
} = REFUND_STATUS_ORDER
|
||||
|
||||
//注册按钮
|
||||
type orderBtnsListParams = {id: number, label: string, validatarFunc: (val: typeof orderInfo) => any}
|
||||
const orderBtnsList = useRef<orderBtnsListParams[]>([
|
||||
{
|
||||
id: 8,
|
||||
label: '申请记录',
|
||||
validatarFunc: (orderInfo) => {
|
||||
if(orderInfo.sale_mode !== 1) return [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value].includes(orderInfo.stage)
|
||||
return false
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: '取消退货',
|
||||
validatarFunc: (orderInfo) => {
|
||||
if(orderInfo?.sale_mode != 1 && orderInfo.type == ReturnApplyOrderTypeReturnForRefund.value) return [ReturnStageApplying.value, ReturnStageWaitCheck.value].includes(orderInfo.stage)
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '质检结果',
|
||||
validatarFunc: (orderInfo) => {
|
||||
return orderInfo?.is_quality_check
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '上传物流',
|
||||
validatarFunc: (orderInfo) => {
|
||||
return orderInfo?.stage == ReturnStageWaitCheck.value
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '取消退款',
|
||||
validatarFunc: (orderInfo) => {
|
||||
if (orderInfo?.sale_mode != 1 && orderInfo.type != ReturnApplyOrderTypeReturnForRefund.value) return [ReturnStageApplying.value, ReturnStageServiceOrderPendingRefund.value]?.includes(orderInfo.stage)
|
||||
if (orderInfo?.sale_mode == 1) return [ReturnStageApplying.value].includes(orderInfo.stage)
|
||||
return false
|
||||
}
|
||||
},
|
||||
])
|
||||
// 注册按钮
|
||||
interface orderBtnsListParams { id: number; label: string; validatarFunc: (val: typeof orderInfo) => any }
|
||||
const orderBtnsList = useRef<orderBtnsListParams[]>([
|
||||
{
|
||||
id: 8,
|
||||
label: '申请记录',
|
||||
validatarFunc: (orderInfo) => {
|
||||
if (orderInfo.sale_mode !== 1) { return [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value].includes(orderInfo.stage) }
|
||||
return false
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: '取消退货',
|
||||
validatarFunc: (orderInfo) => {
|
||||
if (orderInfo?.sale_mode != 1 && orderInfo.type == ReturnApplyOrderTypeReturnForRefund.value) { return [ReturnStageApplying.value, ReturnStageWaitCheck.value].includes(orderInfo.stage) }
|
||||
return false
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '质检结果',
|
||||
validatarFunc: (orderInfo) => {
|
||||
return orderInfo?.is_quality_check
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '上传物流',
|
||||
validatarFunc: (orderInfo) => {
|
||||
return orderInfo?.stage == ReturnStageWaitCheck.value
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '取消退款',
|
||||
validatarFunc: (orderInfo) => {
|
||||
if (orderInfo?.sale_mode != 1 && orderInfo.type != ReturnApplyOrderTypeReturnForRefund.value) { return [ReturnStageApplying.value, ReturnStageServiceOrderPendingRefund.value]?.includes(orderInfo.stage) }
|
||||
if (orderInfo?.sale_mode == 1) { return [ReturnStageApplying.value].includes(orderInfo.stage) }
|
||||
return false
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
//显示的按钮数组
|
||||
const orderBtnsShowList: any[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter(item => {
|
||||
return item.validatarFunc(orderInfo)
|
||||
})
|
||||
}, [orderInfo])
|
||||
// 显示的按钮数组
|
||||
const orderBtnsShowList: any[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter((item) => {
|
||||
return item.validatarFunc(orderInfo)
|
||||
})
|
||||
}, [orderInfo])
|
||||
|
||||
|
||||
|
||||
//点击按钮操作
|
||||
const submitBtns = throttle((val, index) => {
|
||||
if (val == 1) {
|
||||
cancelOrder({title:'要取消退货吗？', val})
|
||||
} else if (val == 6) {
|
||||
cancelOrder({title:'要取消退款吗？', val})
|
||||
} else {
|
||||
onClick?.(val)
|
||||
}
|
||||
}, 600)
|
||||
|
||||
//取消退货/退款
|
||||
const {fetchData: returnApplyOrderCancelFetchData} = ReturnApplyOrderCancelApi()
|
||||
const cancelOrder = ({title = '', val}) => {
|
||||
Taro.showModal({
|
||||
title,
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let res = await returnApplyOrderCancelFetchData({id: orderInfo?.return_apply_order_id})
|
||||
if(res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(val)
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击按钮操作
|
||||
const submitBtns = throttle((val, index) => {
|
||||
if (val == 1) {
|
||||
cancelOrder({ title: '要取消退货吗？', val })
|
||||
}
|
||||
else if (val == 6) {
|
||||
cancelOrder({ title: '要取消退款吗？', val })
|
||||
}
|
||||
else {
|
||||
onClick?.(val)
|
||||
}
|
||||
}, 600)
|
||||
|
||||
//显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
|
||||
}, [orderBtnsShowList])
|
||||
// 取消退货/退款
|
||||
const { fetchData: returnApplyOrderCancelFetchData } = ReturnApplyOrderCancelApi()
|
||||
const cancelOrder = ({ title = '', val }) => {
|
||||
Taro.showModal({
|
||||
title,
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await returnApplyOrderCancelFetchData({ id: orderInfo?.return_apply_order_id })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(val)
|
||||
}
|
||||
else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{(orderBtnsShowList.length > 0)&&<View className={classnames(fixedBottom&&styles.submit_order)}>
|
||||
<View className={styles.btns_list}>
|
||||
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(!showMore)}>{!showMore?'更多':'关闭'}</Text>
|
||||
{showMore&&<View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
|
||||
})}
|
||||
</View>
|
||||
{/* <View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View> */}
|
||||
</View>}
|
||||
</View>}
|
||||
// 显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return { top: `-${(orderBtnsShowList.length - 3) * 70 + 10}rpx`, left: `-${10}rpx` }
|
||||
}, [orderBtnsShowList])
|
||||
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3)&&<View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
return (
|
||||
<>
|
||||
{(orderBtnsShowList.length > 0) && <View className={classnames(fixedBottom && styles.submit_order)}>
|
||||
<View className={styles.btns_list}>
|
||||
{(orderBtnsShowList.length > 3) && <View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(!showMore)}>{!showMore ? '更多' : '关闭'}</Text>
|
||||
{showMore && <View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
return ((index >= 3) && <View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
|
||||
})}
|
||||
</View>
|
||||
{/* <View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View> */}
|
||||
</View>}
|
||||
</>
|
||||
)
|
||||
})
|
||||
</View>}
|
||||
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3) && <View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>,
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { memo, useCallback } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { numberWithCommas } from '@/common/format'
|
||||
|
||||
type Param = {
|
||||
number: number //数字
|
||||
status: 0 | 1 | 2 //0 小型，1中型，2大
|
||||
interface Param {
|
||||
number: number // 数字
|
||||
status: 0 | 1 | 2 // 0 小型，1中型，2大
|
||||
}
|
||||
export default memo(({ number = 0, status = 1 }: Param) => {
|
||||
const priceDom = useCallback(() => {
|
||||
let res = number.toFixed(2).split('.')
|
||||
let int_num = parseInt(res[0]) + ''
|
||||
let decimals_num = res[1]
|
||||
const res = number.toFixed(2).split('.')
|
||||
const int_num = `${parseInt(res[0])}`
|
||||
const decimals_num = res[1]
|
||||
return (
|
||||
<>
|
||||
<Text className={styles.price_text}>¥</Text>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { goLink } from '@/common/common'
|
||||
import { GetBannerList } from '@/api/banner'
|
||||
import styles from './index.module.scss'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { formatImgUrl } from '@/common/format'
|
||||
|
||||
type item = { title: string; img: string; url: string; id: number }
|
||||
interface item { title: string; img: string; url: string; id: number }
|
||||
|
||||
type params = {
|
||||
interface params {
|
||||
list?: item[]
|
||||
swiperOnClick?: (val: item) => void
|
||||
style?: Object
|
||||
}
|
||||
export default (props: params) => {
|
||||
let { swiperOnClick, style = {} } = props
|
||||
const { swiperOnClick, style = {} } = props
|
||||
|
||||
const [list, setList] = useState<any[]>([])
|
||||
const { fetchData, state } = GetBannerList()
|
||||
@@ -22,27 +22,28 @@ export default (props: params) => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const getData = async () => {
|
||||
const getData = async() => {
|
||||
const res = await fetchData()
|
||||
setList(res.data?.list)
|
||||
}
|
||||
|
||||
const skipTo = (item) => {
|
||||
if (item.jump_type == 2 || item.jump_type == 0) {
|
||||
goLink(item.link + '&title=' + item.title)
|
||||
} else {
|
||||
goLink(`${item.link}&title=${item.title}`)
|
||||
}
|
||||
else {
|
||||
goLink(item.link)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.swiper_con} style={style}>
|
||||
<Swiper className={styles.xswiper} indicatorColor='#ccc' indicatorActiveColor='#fff' circular indicatorDots autoplay>
|
||||
<Swiper className={styles.xswiper} indicatorColor="#ccc" indicatorActiveColor="#fff" circular indicatorDots autoplay>
|
||||
{list?.map((item) => {
|
||||
return (
|
||||
<SwiperItem key={item.id}>
|
||||
<View className={styles.image_item} onClick={() => skipTo(item)}>
|
||||
<Image mode='aspectFill' src={formatImgUrl(item.prev_view_url, '!w800')}></Image>
|
||||
<Image mode="aspectFill" src={formatImgUrl(item.prev_view_url, '!w800')}></Image>
|
||||
</View>
|
||||
</SwiperItem>
|
||||
)
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import styles from './index.module.scss'
|
||||
import { formatImgUrl } from '@/common/format'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { goLink } from '@/common/common'
|
||||
|
||||
type params = {
|
||||
interface params {
|
||||
show?: true | false
|
||||
onClose?: () => void
|
||||
}
|
||||
export default ({ show, onClose }: params) => {
|
||||
const onCustomer = async () => {
|
||||
let res = await Taro.showModal({
|
||||
const onCustomer = async() => {
|
||||
const res = await Taro.showModal({
|
||||
title: '是否拨打服务热线',
|
||||
confirmText: '拨打',
|
||||
content: '(0757) 8270 6695',
|
||||
@@ -33,7 +33,7 @@ export default ({ show, onClose }: params) => {
|
||||
<View className={styles.bindSalesman_main}>
|
||||
<View className={styles.bindSalesman_pop}>
|
||||
<View className={styles.bindSalesman_header}>
|
||||
<Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode='aspectFill' />
|
||||
<Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill" />
|
||||
</View>
|
||||
<View className={styles.bindSalesman_message}>
|
||||
<Text>提示</Text>
|
||||
|
||||
@@ -1,93 +1,93 @@
|
||||
import { View } from "@tarojs/components";
|
||||
import { memo, useEffect, useMemo, useState } from "react";
|
||||
import Taro, { useDidShow } from "@tarojs/taro";
|
||||
import {useBluetooth} from "@/use/contextBlueTooth"
|
||||
import SearchInput from "@/components/searchInput";
|
||||
import Popup from "@/components/bluetooth/Popup"
|
||||
import classnames from "classnames";
|
||||
import styles from "./css/linkBlueTooth.module.scss"
|
||||
import useCheckAuthorize from "@/use/useCheckAuthorize";
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { memo, useEffect, useMemo, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './css/linkBlueTooth.module.scss'
|
||||
import { useBluetooth } from '@/use/contextBlueTooth'
|
||||
import SearchInput from '@/components/searchInput'
|
||||
import Popup from '@/components/bluetooth/Popup'
|
||||
import useCheckAuthorize from '@/use/useCheckAuthorize'
|
||||
|
||||
export default memo(() => {
|
||||
const {state, init, startScan, connect, disconnect} = useBluetooth()
|
||||
const { state, init, startScan, connect, disconnect } = useBluetooth()
|
||||
|
||||
const {check} = useCheckAuthorize({scope:'scope.bluetooth', msg:'请开启小程序蓝牙权限'})
|
||||
const { check } = useCheckAuthorize({ scope: 'scope.bluetooth', msg: '请开启小程序蓝牙权限' })
|
||||
|
||||
useEffect(() => {
|
||||
init()
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
init()
|
||||
}, [])
|
||||
|
||||
const [linkStatus, setLinkStatus] = useState(1)
|
||||
useEffect(() => {
|
||||
if(!state.available) {
|
||||
setLinkStatus(1)
|
||||
} else if(state.available&&state.connected?.name) {
|
||||
setLinkStatus(3)
|
||||
} else {
|
||||
setLinkStatus(2)
|
||||
}
|
||||
}, [state.available, state.connected])
|
||||
|
||||
const linkName = useMemo(() => {
|
||||
return state.connected?.localName||''
|
||||
}, [state.connected])
|
||||
|
||||
//链接设备
|
||||
const onLinkListen = (item) => {
|
||||
if(!state.connected&&!state.connecting)
|
||||
connect(item)
|
||||
const [linkStatus, setLinkStatus] = useState(1)
|
||||
useEffect(() => {
|
||||
if (!state.available) {
|
||||
setLinkStatus(1)
|
||||
}
|
||||
else if (state.available && state.connected?.name) {
|
||||
setLinkStatus(3)
|
||||
}
|
||||
else {
|
||||
setLinkStatus(2)
|
||||
}
|
||||
}, [state.available, state.connected])
|
||||
|
||||
const [popupShow, setPopupShow] = useState(false)
|
||||
//显示设备列表
|
||||
const onFindDevice = () => {
|
||||
check().then(res => {
|
||||
if(linkStatus == 1) {
|
||||
Taro.showToast({
|
||||
title:'请打开手机蓝牙',
|
||||
icon:'none'
|
||||
})
|
||||
} else {
|
||||
setPopupShow(true)
|
||||
onFindEven()
|
||||
}
|
||||
const linkName = useMemo(() => {
|
||||
return state.connected?.localName || ''
|
||||
}, [state.connected])
|
||||
|
||||
// 链接设备
|
||||
const onLinkListen = (item) => {
|
||||
if (!state.connected && !state.connecting) { connect(item) }
|
||||
}
|
||||
|
||||
const [popupShow, setPopupShow] = useState(false)
|
||||
// 显示设备列表
|
||||
const onFindDevice = () => {
|
||||
check().then((res) => {
|
||||
if (linkStatus == 1) {
|
||||
Taro.showToast({
|
||||
title: '请打开手机蓝牙',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
const onFindEven = () => {
|
||||
if(!state.discovering&&!state.connected&&!state.connecting)
|
||||
startScan()
|
||||
}
|
||||
}
|
||||
else {
|
||||
setPopupShow(true)
|
||||
onFindEven()
|
||||
}
|
||||
})
|
||||
}
|
||||
const onFindEven = () => {
|
||||
if (!state.discovering && !state.connected && !state.connecting) { startScan() }
|
||||
}
|
||||
|
||||
//断开链接
|
||||
const onDisconnect = () => {
|
||||
disconnect()
|
||||
setPopupShow(false)
|
||||
}
|
||||
// 断开链接
|
||||
const onDisconnect = () => {
|
||||
disconnect()
|
||||
setPopupShow(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.main}>
|
||||
<SearchInput title="蓝牙设备" showIcon={true}>
|
||||
<View className={styles.bluetooth_link} onClick={onFindDevice}>
|
||||
<View className={classnames(styles.link_status, linkStatus == 3 &&styles.link_statused, linkStatus == 2&&styles.link_statused_no)}></View>
|
||||
{
|
||||
linkStatus == 1&&<View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>||
|
||||
linkStatus == 2&&<View className={classnames(styles.link_name,styles.link_name_no_link) }>未连接设备</View>||
|
||||
linkStatus == 3&&<View className={classnames(styles.link_name)}>{linkName}</View>
|
||||
}
|
||||
</View>
|
||||
</SearchInput>
|
||||
<Popup
|
||||
state={state}
|
||||
show={popupShow}
|
||||
onClose={() => setPopupShow(false)}
|
||||
onLink={item => onLinkListen(item)}
|
||||
onOff={onDisconnect}
|
||||
onFind={onFindEven}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<View className={styles.main}>
|
||||
<SearchInput title="蓝牙设备" showIcon>
|
||||
<View className={styles.bluetooth_link} onClick={onFindDevice}>
|
||||
<View className={classnames(styles.link_status, linkStatus == 3 && styles.link_statused, linkStatus == 2 && styles.link_statused_no)}></View>
|
||||
{
|
||||
linkStatus == 1 && <View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>
|
||||
|| linkStatus == 2 && <View className={classnames(styles.link_name, styles.link_name_no_link)}>未连接设备</View>
|
||||
|| linkStatus == 3 && <View className={classnames(styles.link_name)}>{linkName}</View>
|
||||
}
|
||||
</View>
|
||||
</SearchInput>
|
||||
<Popup
|
||||
state={state}
|
||||
show={popupShow}
|
||||
onClose={() => setPopupShow(false)}
|
||||
onLink={item => onLinkListen(item)}
|
||||
onOff={onDisconnect}
|
||||
onFind={onFindEven}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,73 +1,73 @@
|
||||
import { ScrollView, View } from "@tarojs/components"
|
||||
import { memo, useEffect, useState } from "react"
|
||||
import Loading from "@/components/loading"
|
||||
import style from "./css/popup.module.scss"
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import style from './css/popup.module.scss'
|
||||
import Loading from '@/components/loading'
|
||||
|
||||
interface params {
|
||||
state: any,
|
||||
show: Boolean,
|
||||
onClose: (Boolean) => void,
|
||||
onLink: (any) => void,
|
||||
children?: React.ReactNode
|
||||
onOff: () => void,
|
||||
onFind: () => void,
|
||||
state: any
|
||||
show: Boolean
|
||||
onClose: (Boolean) => void
|
||||
onLink: (any) => void
|
||||
children?: React.ReactNode
|
||||
onOff: () => void
|
||||
onFind: () => void
|
||||
}
|
||||
|
||||
export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
|
||||
const [popupShow, setPopupShow] = useState(show)
|
||||
useEffect(() => {
|
||||
setPopupShow(show)
|
||||
}, [show])
|
||||
const onCloseListener = () => {
|
||||
onClose(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
popupShow&&<View className={style.popup}>
|
||||
<View className={style.content}>
|
||||
<View className={style.title}>搜索设备</View>
|
||||
<View className={style.list}>
|
||||
<ScrollView scrollY className={style.scroll}>
|
||||
{
|
||||
(state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
|
||||
return (
|
||||
<View className={style.item} onClick={() => onLink(item)}>
|
||||
<View>{item.name}</View>
|
||||
{
|
||||
(!state.connecting&&!state.connected)&&<View >链接</View>||
|
||||
(state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
|
||||
(state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
})||
|
||||
<View className={style.noDevice}>
|
||||
{
|
||||
(!state.discovering)&& <>
|
||||
<View>暂无设备,请按以下条件检查</View>
|
||||
<View className={style.n_item}>1.请确保取色仪处于激活状态</View>
|
||||
<View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
|
||||
<View className={style.n_item}>3.请打开手机定位</View>
|
||||
</>||
|
||||
<View>设备搜索中</View>
|
||||
}
|
||||
|
||||
</View>
|
||||
|
||||
}
|
||||
</ScrollView>
|
||||
</View>
|
||||
export default memo(({ state, show = false, onClose, onLink, onOff, onFind }: params) => {
|
||||
const [popupShow, setPopupShow] = useState(show)
|
||||
useEffect(() => {
|
||||
setPopupShow(show)
|
||||
}, [show])
|
||||
const onCloseListener = () => {
|
||||
onClose(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
popupShow && <View className={style.popup}>
|
||||
<View className={style.content}>
|
||||
<View className={style.title}>搜索设备</View>
|
||||
<View className={style.list}>
|
||||
<ScrollView scrollY className={style.scroll}>
|
||||
{
|
||||
(state.devices && state.devices.length > 0) && state?.devices.map((item) => {
|
||||
return (
|
||||
<View className={style.item} onClick={() => onLink(item)}>
|
||||
<View>{item.name}</View>
|
||||
{
|
||||
state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
|
||||
(!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
|
||||
<View className={style.footer} onClick={onFind}>重新搜索</View>
|
||||
(!state.connecting && !state.connected) && <View >链接</View>
|
||||
|| (state.connecting && item.deviceId == state.connecting.deviceId) && <View className={style.link_ing}>正在链接...</View>
|
||||
|| (state.connected && item.deviceId == state.connected.deviceId) && <View className={style.link_success}>链接成功</View>
|
||||
}
|
||||
</View>
|
||||
<View className={style.mask} onClick={onCloseListener}></View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|| <View className={style.noDevice}>
|
||||
{
|
||||
(!state.discovering) && <>
|
||||
<View>暂无设备,请按以下条件检查</View>
|
||||
<View className={style.n_item}>1.请确保取色仪处于激活状态</View>
|
||||
<View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
|
||||
<View className={style.n_item}>3.请打开手机定位</View>
|
||||
</>
|
||||
|| <View>设备搜索中</View>
|
||||
}
|
||||
|
||||
</View>
|
||||
|
||||
}
|
||||
</ScrollView>
|
||||
</View>
|
||||
{
|
||||
state.connected && <View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>
|
||||
|| (!state.connected && state.discovering) && <View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color="orange" /></View>
|
||||
|| <View className={style.footer} onClick={onFind}>重新搜索</View>
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
</View>
|
||||
<View className={style.mask} onClick={onCloseListener}></View>
|
||||
</View>
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { Swiper, SwiperItem, View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import dayjs from 'dayjs'
|
||||
import React from 'react'
|
||||
import { Swiper, SwiperItem, View } from '@tarojs/components'
|
||||
import {
|
||||
import type {
|
||||
BaseEventOrig,
|
||||
ITouch,
|
||||
ITouchEvent
|
||||
ITouchEvent,
|
||||
} from '@tarojs/components/types/common'
|
||||
import {
|
||||
import type {
|
||||
AtCalendarBodyListGroup,
|
||||
AtCalendarBodyProps,
|
||||
AtCalendarBodyState,
|
||||
Calendar
|
||||
Calendar,
|
||||
} from '../../../types/calendar'
|
||||
import { delayQuerySelector } from '@/common/util'
|
||||
import generateCalendarGroup from '../common/helper'
|
||||
import AtCalendarDateList from '../ui/date-list/index'
|
||||
import AtCalendarDayList from '../ui/day-list/index'
|
||||
import { delayQuerySelector } from '@/common/util'
|
||||
|
||||
const ANIMTE_DURATION = 300
|
||||
|
||||
@@ -24,15 +24,15 @@ const defaultProps: Partial<AtCalendarBodyProps> = {
|
||||
marks: [],
|
||||
selectedDate: {
|
||||
end: Date.now(),
|
||||
start: Date.now()
|
||||
start: Date.now(),
|
||||
},
|
||||
format: 'YYYY-MM-DD',
|
||||
generateDate: Date.now()
|
||||
generateDate: Date.now(),
|
||||
}
|
||||
|
||||
export default class AtCalendarBody extends React.Component<
|
||||
AtCalendarBodyProps,
|
||||
Readonly<AtCalendarBodyState>
|
||||
AtCalendarBodyProps,
|
||||
Readonly<AtCalendarBodyState>
|
||||
> {
|
||||
static defaultProps: Partial<AtCalendarBodyProps> = defaultProps
|
||||
|
||||
@@ -46,7 +46,7 @@ export default class AtCalendarBody extends React.Component<
|
||||
maxDate,
|
||||
generateDate,
|
||||
selectedDate,
|
||||
selectedDates
|
||||
selectedDates,
|
||||
} = props
|
||||
|
||||
this.generateFunc = generateCalendarGroup({
|
||||
@@ -55,25 +55,25 @@ export default class AtCalendarBody extends React.Component<
|
||||
minDate,
|
||||
maxDate,
|
||||
marks,
|
||||
selectedDates
|
||||
selectedDates,
|
||||
})
|
||||
const listGroup = this.getGroups(generateDate, selectedDate)
|
||||
|
||||
this.state = {
|
||||
listGroup,
|
||||
offsetSize: 0,
|
||||
isAnimate: false
|
||||
isAnimate: false,
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
delayQuerySelector('.at-calendar-slider__main').then(res => {
|
||||
delayQuerySelector('.at-calendar-slider__main').then((res) => {
|
||||
this.maxWidth = res[0].width
|
||||
})
|
||||
}
|
||||
|
||||
public UNSAFE_componentWillReceiveProps(
|
||||
nextProps: AtCalendarBodyProps
|
||||
nextProps: AtCalendarBodyProps,
|
||||
): void {
|
||||
const {
|
||||
validDates,
|
||||
@@ -83,7 +83,7 @@ export default class AtCalendarBody extends React.Component<
|
||||
maxDate,
|
||||
generateDate,
|
||||
selectedDate,
|
||||
selectedDates
|
||||
selectedDates,
|
||||
} = nextProps
|
||||
|
||||
this.generateFunc = generateCalendarGroup({
|
||||
@@ -92,13 +92,13 @@ export default class AtCalendarBody extends React.Component<
|
||||
minDate,
|
||||
maxDate,
|
||||
marks,
|
||||
selectedDates
|
||||
selectedDates,
|
||||
})
|
||||
const listGroup = this.getGroups(generateDate, selectedDate)
|
||||
|
||||
this.setState({
|
||||
offsetSize: 0,
|
||||
listGroup
|
||||
listGroup,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -118,30 +118,30 @@ export default class AtCalendarBody extends React.Component<
|
||||
|
||||
private getGroups = (
|
||||
generateDate: number,
|
||||
selectedDate: Calendar.SelectedDate
|
||||
selectedDate: Calendar.SelectedDate,
|
||||
): AtCalendarBodyListGroup => {
|
||||
const dayjsDate = dayjs(generateDate)
|
||||
const arr: AtCalendarBodyListGroup = []
|
||||
const preList: Calendar.ListInfo<Calendar.Item> = this.generateFunc(
|
||||
dayjsDate.subtract(1, 'month').valueOf(),
|
||||
selectedDate
|
||||
selectedDate,
|
||||
)
|
||||
|
||||
const nowList: Calendar.ListInfo<Calendar.Item> = this.generateFunc(
|
||||
generateDate,
|
||||
selectedDate,
|
||||
true
|
||||
true,
|
||||
)
|
||||
|
||||
const nextList: Calendar.ListInfo<Calendar.Item> = this.generateFunc(
|
||||
dayjsDate.add(1, 'month').valueOf(),
|
||||
selectedDate
|
||||
selectedDate,
|
||||
)
|
||||
|
||||
const preListIndex =
|
||||
this.currentSwiperIndex === 0 ? 2 : this.currentSwiperIndex - 1
|
||||
const nextListIndex =
|
||||
this.currentSwiperIndex === 2 ? 0 : this.currentSwiperIndex + 1
|
||||
const preListIndex
|
||||
= this.currentSwiperIndex === 0 ? 2 : this.currentSwiperIndex - 1
|
||||
const nextListIndex
|
||||
= this.currentSwiperIndex === 2 ? 0 : this.currentSwiperIndex + 1
|
||||
|
||||
arr[preListIndex] = preList
|
||||
arr[nextListIndex] = nextList
|
||||
@@ -162,36 +162,36 @@ export default class AtCalendarBody extends React.Component<
|
||||
if (!this.props.isSwiper) {
|
||||
return
|
||||
}
|
||||
if (!this.isTouching) return
|
||||
if (!this.isTouching) { return }
|
||||
|
||||
const { clientX } = e.touches[0]
|
||||
const offsetSize = clientX - this.startX
|
||||
|
||||
this.setState({
|
||||
offsetSize
|
||||
offsetSize,
|
||||
})
|
||||
}
|
||||
|
||||
private animateMoveSlide = (offset: number, callback?: Function): void => {
|
||||
this.setState(
|
||||
{
|
||||
isAnimate: true
|
||||
isAnimate: true,
|
||||
},
|
||||
() => {
|
||||
this.setState({
|
||||
offsetSize: offset
|
||||
offsetSize: offset,
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.setState(
|
||||
{
|
||||
isAnimate: false
|
||||
isAnimate: false,
|
||||
},
|
||||
() => {
|
||||
callback && callback()
|
||||
}
|
||||
},
|
||||
)
|
||||
}, ANIMTE_DURATION)
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@@ -221,7 +221,7 @@ export default class AtCalendarBody extends React.Component<
|
||||
e: BaseEventOrig<{
|
||||
current: number
|
||||
source: string
|
||||
}>
|
||||
}>,
|
||||
): void => {
|
||||
const { current, source } = e.detail
|
||||
|
||||
@@ -234,21 +234,21 @@ export default class AtCalendarBody extends React.Component<
|
||||
private handleAnimateFinish = (): void => {
|
||||
if (this.changeCount > 0) {
|
||||
this.props.onSwipeMonth(
|
||||
this.isPreMonth ? -this.changeCount : this.changeCount
|
||||
this.isPreMonth ? -this.changeCount : this.changeCount,
|
||||
)
|
||||
this.changeCount = 0
|
||||
}
|
||||
}
|
||||
|
||||
private handleSwipeTouchStart = (
|
||||
e: ITouchEvent & { changedTouches: Array<ITouch> }
|
||||
e: ITouchEvent & { changedTouches: Array<ITouch> },
|
||||
): void => {
|
||||
const { clientY, clientX } = e.changedTouches[0]
|
||||
this.swipeStartPoint = this.props.isVertical ? clientY : clientX
|
||||
}
|
||||
|
||||
private handleSwipeTouchEnd = (
|
||||
e: ITouchEvent & { changedTouches: Array<ITouch> }
|
||||
e: ITouchEvent & { changedTouches: Array<ITouch> },
|
||||
): void => {
|
||||
const { clientY, clientX } = e.changedTouches[0]
|
||||
this.isPreMonth = this.props.isVertical
|
||||
@@ -266,12 +266,12 @@ export default class AtCalendarBody extends React.Component<
|
||||
className={classnames(
|
||||
'main',
|
||||
'at-calendar-slider__main',
|
||||
`at-calendar-slider__main--${process.env.TARO_ENV}`
|
||||
`at-calendar-slider__main--${process.env.TARO_ENV}`,
|
||||
)}
|
||||
>
|
||||
<AtCalendarDayList />
|
||||
<View className='main__body body'>
|
||||
<View className='body__slider body__slider--now'>
|
||||
<View className="main__body body">
|
||||
<View className="body__slider body__slider--now">
|
||||
<AtCalendarDateList
|
||||
list={listGroup[1].list}
|
||||
onClick={this.props.onDayClick}
|
||||
@@ -290,7 +290,7 @@ export default class AtCalendarBody extends React.Component<
|
||||
className={classnames(
|
||||
'main',
|
||||
'at-calendar-slider__main',
|
||||
`at-calendar-slider__main--${process.env.TARO_ENV}`
|
||||
`at-calendar-slider__main--${process.env.TARO_ENV}`,
|
||||
)}
|
||||
onTouchEnd={this.handleTouchEnd}
|
||||
onTouchMove={this.handleTouchMove}
|
||||
@@ -300,7 +300,7 @@ export default class AtCalendarBody extends React.Component<
|
||||
<View
|
||||
className={classnames('main__body body', {
|
||||
'main__body--slider': isSwiper,
|
||||
'main__body--animate': isAnimate
|
||||
'main__body--animate': isAnimate,
|
||||
})}
|
||||
style={{
|
||||
transform: isSwiper
|
||||
@@ -308,20 +308,20 @@ export default class AtCalendarBody extends React.Component<
|
||||
: '',
|
||||
WebkitTransform: isSwiper
|
||||
? `translateX(-100%) translate3d(${offsetSize}px,0,0)`
|
||||
: ''
|
||||
: '',
|
||||
}}
|
||||
>
|
||||
<View className='body__slider body__slider--pre'>
|
||||
<View className="body__slider body__slider--pre">
|
||||
<AtCalendarDateList list={listGroup[0].list} />
|
||||
</View>
|
||||
<View className='body__slider body__slider--now'>
|
||||
<View className="body__slider body__slider--now">
|
||||
<AtCalendarDateList
|
||||
list={listGroup[1].list}
|
||||
onClick={this.props.onDayClick}
|
||||
onLongClick={this.props.onLongClick}
|
||||
/>
|
||||
</View>
|
||||
<View className='body__slider body__slider--next'>
|
||||
<View className="body__slider body__slider--next">
|
||||
<AtCalendarDateList list={listGroup[2].list} />
|
||||
</View>
|
||||
</View>
|
||||
@@ -334,7 +334,7 @@ export default class AtCalendarBody extends React.Component<
|
||||
className={classnames(
|
||||
'main',
|
||||
'at-calendar-slider__main',
|
||||
`at-calendar-slider__main--${process.env.TARO_ENV}`
|
||||
`at-calendar-slider__main--${process.env.TARO_ENV}`,
|
||||
)}
|
||||
>
|
||||
<AtCalendarDayList />
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import dayjs from 'dayjs'
|
||||
import _flow from 'lodash/flow'
|
||||
import { Calendar } from '../../../types/calendar'
|
||||
import type { Calendar } from '../../../types/calendar'
|
||||
import * as constant from './constant'
|
||||
import plugins from './plugins'
|
||||
|
||||
@@ -10,35 +11,35 @@ function getFullItem(
|
||||
item: Partial<Calendar.Item>,
|
||||
options: Calendar.GroupOptions,
|
||||
selectedDate: Calendar.SelectedDate,
|
||||
isShowStatus?: boolean
|
||||
isShowStatus?: boolean,
|
||||
): any {
|
||||
if (options.marks.find(x => x.value === item.value)) {
|
||||
(item.marks as Array<Calendar.Mark>) = [{
|
||||
value: item.value as string
|
||||
value: item.value as string,
|
||||
}]
|
||||
}
|
||||
if (!isShowStatus) return item
|
||||
if (!isShowStatus) { return item }
|
||||
|
||||
const bindedPlugins = plugins.map(fn =>
|
||||
fn.bind(null, {
|
||||
options,
|
||||
selectedDate
|
||||
})
|
||||
selectedDate,
|
||||
}),
|
||||
)
|
||||
return _flow(bindedPlugins)(item)
|
||||
}
|
||||
|
||||
export default function generateCalendarGroup(
|
||||
options: Calendar.GroupOptions
|
||||
options: Calendar.GroupOptions,
|
||||
): (
|
||||
generateDate: number,
|
||||
selectedDate: Calendar.SelectedDate,
|
||||
isShowStatus?: boolean
|
||||
) => Calendar.ListInfo<Calendar.Item> {
|
||||
return function (
|
||||
generateDate: number,
|
||||
selectedDate: Calendar.SelectedDate,
|
||||
isShowStatus?: boolean
|
||||
) => Calendar.ListInfo<Calendar.Item> {
|
||||
return function(
|
||||
generateDate: number,
|
||||
selectedDate: Calendar.SelectedDate,
|
||||
isShowStatus?: boolean,
|
||||
): Calendar.ListInfo<Calendar.Item> {
|
||||
const date = dayjs(generateDate)
|
||||
|
||||
@@ -64,7 +65,7 @@ export default function generateCalendarGroup(
|
||||
_value: thisDate,
|
||||
text: thisDate.date(),
|
||||
type: constant.TYPE_PRE_MONTH,
|
||||
value: thisDate.format(format)
|
||||
value: thisDate.format(format),
|
||||
}
|
||||
|
||||
item = getFullItem(item, options, selectedDate, isShowStatus)
|
||||
@@ -81,7 +82,7 @@ export default function generateCalendarGroup(
|
||||
_value: thisDate,
|
||||
text: thisDate.date(),
|
||||
type: constant.TYPE_NOW_MONTH,
|
||||
value: thisDate.format(format)
|
||||
value: thisDate.format(format),
|
||||
}
|
||||
|
||||
item = getFullItem(item, options, selectedDate, isShowStatus)
|
||||
@@ -98,7 +99,7 @@ export default function generateCalendarGroup(
|
||||
_value: thisDate,
|
||||
text: thisDate.date(),
|
||||
type: constant.TYPE_NEXT_MONTH,
|
||||
value: thisDate.format(format)
|
||||
value: thisDate.format(format),
|
||||
}
|
||||
|
||||
item = getFullItem(item, options, selectedDate, isShowStatus)
|
||||
@@ -108,7 +109,7 @@ export default function generateCalendarGroup(
|
||||
|
||||
return {
|
||||
list,
|
||||
value: generateDate
|
||||
value: generateDate,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import dayjs from 'dayjs'
|
||||
import _isEmpty from 'lodash/isEmpty'
|
||||
import { Calendar } from '../../../types/calendar'
|
||||
import type { Calendar } from '../../../types/calendar'
|
||||
|
||||
interface PluginArg {
|
||||
options: Calendar.GroupOptions
|
||||
@@ -10,7 +10,7 @@ interface PluginArg {
|
||||
|
||||
export function handleActive(
|
||||
args: PluginArg,
|
||||
item: Calendar.Item
|
||||
item: Calendar.Item,
|
||||
): Calendar.Item {
|
||||
const { selectedDate } = args
|
||||
const { _value } = item
|
||||
@@ -20,10 +20,10 @@ export function handleActive(
|
||||
const dayjsEnd = dayjs(end)
|
||||
const dayjsStart = start ? dayjs(start) : dayjsEnd
|
||||
|
||||
item.isSelected =
|
||||
_value.isSame(dayjsEnd) ||
|
||||
_value.isSame(dayjsStart) ||
|
||||
(_value.isAfter(dayjsStart) && _value.isBefore(dayjsEnd))
|
||||
item.isSelected
|
||||
= _value.isSame(dayjsEnd)
|
||||
|| _value.isSame(dayjsStart)
|
||||
|| (_value.isAfter(dayjsStart) && _value.isBefore(dayjsEnd))
|
||||
|
||||
item.isSelectedHead = _value.isSame(dayjsStart)
|
||||
item.isSelectedTail = _value.isSame(dayjsEnd)
|
||||
@@ -35,14 +35,14 @@ export function handleActive(
|
||||
|
||||
export function handleMarks(
|
||||
args: PluginArg,
|
||||
item: Calendar.Item
|
||||
item: Calendar.Item,
|
||||
): Calendar.Item {
|
||||
const { options } = args
|
||||
const { _value } = item
|
||||
const { marks } = options
|
||||
|
||||
const markList = marks.filter(mark =>
|
||||
dayjs(mark.value).startOf('day').isSame(_value)
|
||||
dayjs(mark.value).startOf('day').isSame(_value),
|
||||
)
|
||||
|
||||
item.marks = markList.slice(0, 1)
|
||||
@@ -84,7 +84,7 @@ export function handleMarks(
|
||||
|
||||
export function handleDisabled(
|
||||
args: PluginArg,
|
||||
item: Calendar.Item
|
||||
item: Calendar.Item,
|
||||
): Calendar.Item {
|
||||
const { options } = args
|
||||
const { _value } = item
|
||||
@@ -93,16 +93,16 @@ export function handleDisabled(
|
||||
const dayjsMinDate = dayjs(minDate)
|
||||
const dayjsMaxDate = dayjs(maxDate)
|
||||
|
||||
item.isDisabled =
|
||||
!!(minDate && _value.isBefore(dayjsMinDate)) ||
|
||||
!!(maxDate && _value.isAfter(dayjsMaxDate))
|
||||
item.isDisabled
|
||||
= !!(minDate && _value.isBefore(dayjsMinDate))
|
||||
|| !!(maxDate && _value.isAfter(dayjsMaxDate))
|
||||
|
||||
return item
|
||||
}
|
||||
|
||||
export function handleValid(
|
||||
args: PluginArg,
|
||||
item: Calendar.Item
|
||||
item: Calendar.Item,
|
||||
): Calendar.Item {
|
||||
const { options } = args
|
||||
const { _value } = item
|
||||
@@ -110,7 +110,7 @@ export function handleValid(
|
||||
|
||||
if (!_isEmpty(validDates)) {
|
||||
const isInclude = validDates.some(date =>
|
||||
dayjs(date.value).startOf('day').isSame(_value)
|
||||
dayjs(date.value).startOf('day').isSame(_value),
|
||||
)
|
||||
|
||||
item.isDisabled = !isInclude
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import classnames from 'classnames'
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
import React from 'react'
|
||||
import { Picker, Text, View } from '@tarojs/components'
|
||||
import {
|
||||
import classnames from 'classnames'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import dayjs from 'dayjs'
|
||||
import React from 'react'
|
||||
import type {
|
||||
AtCalendarControllerProps,
|
||||
AtCalendarControllerState
|
||||
AtCalendarControllerState,
|
||||
} from '../../../types/calendar'
|
||||
|
||||
export default class AtCalendarController extends React.Component<
|
||||
AtCalendarControllerProps,
|
||||
AtCalendarControllerState
|
||||
AtCalendarControllerProps,
|
||||
AtCalendarControllerState
|
||||
> {
|
||||
public render(): JSX.Element {
|
||||
const {
|
||||
@@ -17,18 +18,18 @@ export default class AtCalendarController extends React.Component<
|
||||
minDate,
|
||||
maxDate,
|
||||
monthFormat,
|
||||
hideArrow
|
||||
hideArrow,
|
||||
} = this.props
|
||||
|
||||
const dayjsDate: Dayjs = dayjs(generateDate)
|
||||
const dayjsMinDate: Dayjs | boolean = !!minDate && dayjs(minDate)
|
||||
const dayjsMaxDate: Dayjs | boolean = !!maxDate && dayjs(maxDate)
|
||||
|
||||
const isMinMonth: boolean =
|
||||
dayjsMinDate && dayjsMinDate.startOf('month').isSame(dayjsDate)
|
||||
const isMinMonth: boolean
|
||||
= dayjsMinDate && dayjsMinDate.startOf('month').isSame(dayjsDate)
|
||||
|
||||
const isMaxMonth: boolean =
|
||||
dayjsMaxDate && dayjsMaxDate.startOf('month').isSame(dayjsDate)
|
||||
const isMaxMonth: boolean
|
||||
= dayjsMaxDate && dayjsMaxDate.startOf('month').isSame(dayjsDate)
|
||||
|
||||
const minDateValue: string = dayjsMinDate
|
||||
? dayjsMinDate.format('YYYY-MM')
|
||||
@@ -38,38 +39,42 @@ export default class AtCalendarController extends React.Component<
|
||||
: ''
|
||||
|
||||
return (
|
||||
<View className='at-calendar__controller controller'>
|
||||
{hideArrow ? null : (
|
||||
<View
|
||||
className={classnames('controller__arrow controller__arrow--left', {
|
||||
'controller__arrow--disabled': isMinMonth
|
||||
})}
|
||||
onClick={this.props.onPreMonth.bind(this, isMinMonth)}
|
||||
/>
|
||||
)}
|
||||
<View className="at-calendar__controller controller">
|
||||
{hideArrow
|
||||
? null
|
||||
: (
|
||||
<View
|
||||
className={classnames('controller__arrow controller__arrow--left', {
|
||||
'controller__arrow--disabled': isMinMonth,
|
||||
})}
|
||||
onClick={this.props.onPreMonth.bind(this, isMinMonth)}
|
||||
/>
|
||||
)}
|
||||
<Picker
|
||||
mode='date'
|
||||
fields='month'
|
||||
mode="date"
|
||||
fields="month"
|
||||
end={maxDateValue}
|
||||
start={minDateValue}
|
||||
onChange={this.props.onSelectDate}
|
||||
value={dayjsDate.format('YYYY-MM')}
|
||||
>
|
||||
<Text className='controller__info'>
|
||||
<Text className="controller__info">
|
||||
{dayjsDate.format(monthFormat)}
|
||||
</Text>
|
||||
</Picker>
|
||||
{hideArrow ? null : (
|
||||
<View
|
||||
className={classnames(
|
||||
'controller__arrow controller__arrow--right',
|
||||
{
|
||||
'controller__arrow--disabled': isMaxMonth
|
||||
}
|
||||
)}
|
||||
onClick={this.props.onNextMonth.bind(this, isMaxMonth)}
|
||||
/>
|
||||
)}
|
||||
{hideArrow
|
||||
? null
|
||||
: (
|
||||
<View
|
||||
className={classnames(
|
||||
'controller__arrow controller__arrow--right',
|
||||
{
|
||||
'controller__arrow--disabled': isMaxMonth,
|
||||
},
|
||||
)}
|
||||
onClick={this.props.onNextMonth.bind(this, isMaxMonth)}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
import classnames from 'classnames'
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
import React from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
import { BaseEventOrig } from '@tarojs/components/types/common'
|
||||
import {
|
||||
import classnames from 'classnames'
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import dayjs from 'dayjs'
|
||||
import React from 'react'
|
||||
import type { BaseEventOrig } from '@tarojs/components/types/common'
|
||||
import type {
|
||||
AtCalendarDefaultProps,
|
||||
AtCalendarProps,
|
||||
AtCalendarPropsWithDefaults,
|
||||
AtCalendarState,
|
||||
Calendar
|
||||
Calendar,
|
||||
} from '../../types/calendar'
|
||||
import AtCalendarBody from './body/index'
|
||||
import AtCalendarController from './controller/index'
|
||||
import './index.scss'
|
||||
|
||||
const defaultProps: AtCalendarDefaultProps = {
|
||||
validDates: [],
|
||||
marks: [],
|
||||
@@ -23,12 +25,12 @@ const defaultProps: AtCalendarDefaultProps = {
|
||||
isMultiSelect: false,
|
||||
format: 'YYYY-MM-DD',
|
||||
currentDate: Date.now(),
|
||||
monthFormat: 'YYYY年MM月'
|
||||
monthFormat: 'YYYY年MM月',
|
||||
}
|
||||
|
||||
export default class AtCalendar extends React.Component<
|
||||
AtCalendarProps,
|
||||
Readonly<AtCalendarState>
|
||||
AtCalendarProps,
|
||||
Readonly<AtCalendarState>
|
||||
> {
|
||||
static defaultProps: AtCalendarDefaultProps = defaultProps
|
||||
|
||||
@@ -42,7 +44,7 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
public UNSAFE_componentWillReceiveProps(nextProps: AtCalendarProps): void {
|
||||
const { currentDate, isMultiSelect } = nextProps
|
||||
if (!currentDate || currentDate === this.props.currentDate) return
|
||||
if (!currentDate || currentDate === this.props.currentDate) { return }
|
||||
|
||||
if (isMultiSelect && this.props.isMultiSelect) {
|
||||
const { start, end } = currentDate as Calendar.SelectedDate
|
||||
@@ -56,7 +58,7 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
const stateValue: AtCalendarState = this.getInitializeState(
|
||||
currentDate,
|
||||
isMultiSelect
|
||||
isMultiSelect,
|
||||
)
|
||||
|
||||
this.setState(stateValue)
|
||||
@@ -66,7 +68,7 @@ export default class AtCalendar extends React.Component<
|
||||
const { generateDate } = this.state
|
||||
|
||||
const stateValue: Partial<AtCalendarState> = {
|
||||
selectedDate: this.getSelectedDate(value.valueOf())
|
||||
selectedDate: this.getSelectedDate(value.valueOf()),
|
||||
}
|
||||
|
||||
const dayjsGenerateDate: Dayjs = value.startOf('month')
|
||||
@@ -81,19 +83,20 @@ export default class AtCalendar extends React.Component<
|
||||
}
|
||||
|
||||
private getMultiSelectedState = (
|
||||
value: Dayjs
|
||||
value: Dayjs,
|
||||
): Pick<AtCalendarState, 'selectedDate'> => {
|
||||
const { selectedDate } = this.state
|
||||
const { end, start } = selectedDate
|
||||
|
||||
const valueUnix: number = value.valueOf()
|
||||
const state: Pick<AtCalendarState, 'selectedDate'> = {
|
||||
selectedDate
|
||||
selectedDate,
|
||||
}
|
||||
|
||||
if (end) {
|
||||
state.selectedDate = this.getSelectedDate(valueUnix, 0)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
state.selectedDate.end = Math.max(valueUnix, +start)
|
||||
state.selectedDate.start = Math.min(valueUnix, +start)
|
||||
}
|
||||
@@ -103,11 +106,11 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
private getSelectedDate = (
|
||||
start: number,
|
||||
end?: number
|
||||
end?: number,
|
||||
): Calendar.SelectedDate => {
|
||||
const stateValue: Calendar.SelectedDate = {
|
||||
start,
|
||||
end: start
|
||||
end: start,
|
||||
}
|
||||
|
||||
if (typeof end !== 'undefined') {
|
||||
@@ -119,7 +122,7 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
private getInitializeState(
|
||||
currentDate: Calendar.DateArg | Calendar.SelectedDate,
|
||||
isMultiSelect?: boolean
|
||||
isMultiSelect?: boolean,
|
||||
): AtCalendarState {
|
||||
let end: number
|
||||
let start: number
|
||||
@@ -132,8 +135,8 @@ export default class AtCalendar extends React.Component<
|
||||
return {
|
||||
generateDate: generateDateValue,
|
||||
selectedDate: {
|
||||
start: ''
|
||||
}
|
||||
start: '',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -146,7 +149,8 @@ export default class AtCalendar extends React.Component<
|
||||
generateDateValue = dayjsStart.startOf('month').valueOf()
|
||||
|
||||
end = cEnd ? dayjs(cEnd).startOf('day').valueOf() : start
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
const dayjsStart = dayjs(currentDate as Calendar.DateArg)
|
||||
|
||||
start = dayjsStart.startOf('day').valueOf()
|
||||
@@ -157,14 +161,14 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
return {
|
||||
generateDate: generateDateValue,
|
||||
selectedDate: this.getSelectedDate(start, end)
|
||||
selectedDate: this.getSelectedDate(start, end),
|
||||
}
|
||||
}
|
||||
|
||||
private triggerChangeDate = (value: Dayjs): void => {
|
||||
const { format } = this.props
|
||||
|
||||
if (typeof this.props.onMonthChange !== 'function') return
|
||||
if (typeof this.props.onMonthChange !== 'function') { return }
|
||||
|
||||
this.props.onMonthChange(value.format(format))
|
||||
}
|
||||
@@ -175,7 +179,7 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
const _generateDate: Dayjs = dayjs(generateDate).add(vectorCount, 'month')
|
||||
this.setState({
|
||||
generateDate: _generateDate.valueOf()
|
||||
generateDate: _generateDate.valueOf(),
|
||||
})
|
||||
|
||||
if (vectorCount && typeof this.props.onMonthChange === 'function') {
|
||||
@@ -214,11 +218,11 @@ export default class AtCalendar extends React.Component<
|
||||
const _generateDate: Dayjs = dayjs(value)
|
||||
const _generateDateValue: number = _generateDate.valueOf()
|
||||
|
||||
if (this.state.generateDate === _generateDateValue) return
|
||||
if (this.state.generateDate === _generateDateValue) { return }
|
||||
|
||||
this.triggerChangeDate(_generateDate)
|
||||
this.setState({
|
||||
generateDate: _generateDateValue
|
||||
generateDate: _generateDateValue,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -226,7 +230,7 @@ export default class AtCalendar extends React.Component<
|
||||
const { isMultiSelect } = this.props
|
||||
const { isDisabled, value } = item
|
||||
|
||||
if (isDisabled) return
|
||||
if (isDisabled) { return }
|
||||
|
||||
const dayjsDate: Dayjs = dayjs(value)
|
||||
|
||||
@@ -234,7 +238,8 @@ export default class AtCalendar extends React.Component<
|
||||
|
||||
if (isMultiSelect) {
|
||||
stateValue = this.getMultiSelectedState(dayjsDate)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
stateValue = this.getSingleSelectdState(dayjsDate)
|
||||
}
|
||||
|
||||
@@ -251,7 +256,7 @@ export default class AtCalendar extends React.Component<
|
||||
const selectDate = this.state.selectedDate
|
||||
if (typeof this.props.onSelectDate === 'function') {
|
||||
const info: Calendar.SelectedDate = {
|
||||
start: dayjs(selectDate.start).format(this.props.format)
|
||||
start: dayjs(selectDate.start).format(this.props.format),
|
||||
}
|
||||
|
||||
if (selectDate.end) {
|
||||
@@ -259,7 +264,7 @@ export default class AtCalendar extends React.Component<
|
||||
}
|
||||
|
||||
this.props.onSelectDate({
|
||||
value: info
|
||||
value: info,
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -283,7 +288,7 @@ export default class AtCalendar extends React.Component<
|
||||
hideArrow,
|
||||
isVertical,
|
||||
monthFormat,
|
||||
selectedDates
|
||||
selectedDates,
|
||||
} = this.props as AtCalendarPropsWithDefaults
|
||||
|
||||
return (
|
||||
|
||||
+4
-4
@@ -1,4 +1,4 @@
|
||||
import dayjs from 'dayjs'
|
||||
import type dayjs from 'dayjs'
|
||||
// import { BaseEvent } from '@tarojs/components/types/common'
|
||||
|
||||
// #region Calendar
|
||||
@@ -8,7 +8,7 @@ declare namespace Calendar {
|
||||
export type classNameType =
|
||||
| string
|
||||
| Array<string>
|
||||
| { [key: string]: boolean }
|
||||
| Record<string, boolean>
|
||||
|
||||
export interface Mark {
|
||||
value: DateArg
|
||||
@@ -62,7 +62,7 @@ declare namespace Calendar {
|
||||
|
||||
export type List<T> = Array<T>
|
||||
|
||||
export type ListInfo<T> = {
|
||||
export interface ListInfo<T> {
|
||||
value: number
|
||||
|
||||
list: List<T>
|
||||
@@ -159,7 +159,7 @@ export interface AtCalendarState {
|
||||
}
|
||||
|
||||
export type AtCalendarPropsWithDefaults = AtCalendarProps &
|
||||
AtCalendarDefaultProps
|
||||
AtCalendarDefaultProps
|
||||
// #endregion
|
||||
|
||||
// #region AtCalendarController
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { Calendar } from '../../types/calendar'
|
||||
import type { Calendar } from '../../types/calendar'
|
||||
import * as constant from '../../common/constant'
|
||||
|
||||
const MAP: { [key: number]: string } = {
|
||||
const MAP: Record<number, string> = {
|
||||
[constant.TYPE_PRE_MONTH]: 'pre',
|
||||
[constant.TYPE_NOW_MONTH]: 'now',
|
||||
[constant.TYPE_NEXT_MONTH]: 'next'
|
||||
[constant.TYPE_NEXT_MONTH]: 'next',
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
@@ -33,10 +33,10 @@ export default class AtCalendarList extends React.Component<Props> {
|
||||
|
||||
public render(): JSX.Element | null {
|
||||
const { list } = this.props
|
||||
if (!list || list.length === 0) return null
|
||||
if (!list || list.length === 0) { return null }
|
||||
|
||||
return (
|
||||
<View className='at-calendar__list flex'>
|
||||
<View className="at-calendar__list flex">
|
||||
{list.map((item: Calendar.Item) => (
|
||||
<View
|
||||
key={`list-item-${item.value}`}
|
||||
@@ -52,25 +52,27 @@ export default class AtCalendarList extends React.Component<Props> {
|
||||
'flex__item--selected-head': item.isSelectedHead,
|
||||
'flex__item--selected-tail': item.isSelectedTail,
|
||||
'flex__item--blur':
|
||||
item.isDisabled ||
|
||||
item.type === constant.TYPE_PRE_MONTH ||
|
||||
item.type === constant.TYPE_NEXT_MONTH
|
||||
}
|
||||
item.isDisabled
|
||||
|| item.type === constant.TYPE_PRE_MONTH
|
||||
|| item.type === constant.TYPE_NEXT_MONTH,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<View className='flex__item-container'>
|
||||
<View className='container-text'>{item.text}</View>
|
||||
<View className="flex__item-container">
|
||||
<View className="container-text">{item.text}</View>
|
||||
</View>
|
||||
<View className='flex__item-extra extra'>
|
||||
{item.marks && item.marks.length > 0 ? (
|
||||
<View className='extra-marks'>
|
||||
{item.marks.map((mark, key) => (
|
||||
<Text key={key} className='mark'>
|
||||
{mark.value as React.ReactNode}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
) : null}
|
||||
<View className="flex__item-extra extra">
|
||||
{item.marks && item.marks.length > 0
|
||||
? (
|
||||
<View className="extra-marks">
|
||||
{item.marks.map((mark, key) => (
|
||||
<Text key={key} className="mark">
|
||||
{mark.value as React.ReactNode}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
: null}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import React from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
import React from 'react'
|
||||
|
||||
export default class AtCalendarHeader extends React.Component {
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<View className='at-calendar__header header'>
|
||||
<View className='header__flex'>
|
||||
<View className='header__flex-item'>日</View>
|
||||
<View className='header__flex-item'>一</View>
|
||||
<View className='header__flex-item'>二</View>
|
||||
<View className='header__flex-item'>三</View>
|
||||
<View className='header__flex-item'>四</View>
|
||||
<View className='header__flex-item'>五</View>
|
||||
<View className='header__flex-item'>六</View>
|
||||
<View className="at-calendar__header header">
|
||||
<View className="header__flex">
|
||||
<View className="header__flex-item">日</View>
|
||||
<View className="header__flex-item">一</View>
|
||||
<View className="header__flex-item">二</View>
|
||||
<View className="header__flex-item">三</View>
|
||||
<View className="header__flex-item">四</View>
|
||||
<View className="header__flex-item">五</View>
|
||||
<View className="header__flex-item">六</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import classNames from "classnames"
|
||||
import { FC, useCallback, useMemo, useRef } from "react"
|
||||
import IconFont, { IconNames } from "../iconfont/iconfont"
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import classNames from 'classnames'
|
||||
import type { FC } from 'react'
|
||||
import { useCallback, useMemo, useRef } from 'react'
|
||||
import type { IconNames } from '../iconfont/iconfont'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface CellPropsType {
|
||||
@@ -14,7 +16,7 @@ interface CellPropsType {
|
||||
customDescClassName?: string
|
||||
iconName?: IconNames
|
||||
}
|
||||
const Cell:FC<CellPropsType> = (props) => {
|
||||
const Cell: FC<CellPropsType> = (props) => {
|
||||
const { title, desc, isLink = false, customClassName, customStyle, onClick, iconName, customDescClassName } = props
|
||||
|
||||
const onClickRef = useRef(onClick)
|
||||
@@ -33,7 +35,7 @@ const Cell:FC<CellPropsType> = (props) => {
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text className={classNames(styles.descText, customDescClassName)}>{desc}</Text>
|
||||
{isLink && <IconFont name='icon-chakanquanbukehu' size={46} color='inherit'></IconFont>}
|
||||
{isLink && <IconFont name="icon-chakanquanbukehu" size={46} color="inherit"></IconFont>}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { usePropsValue } from '@/use/useCommon'
|
||||
import { View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import React, { forwardRef, SetStateAction, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
|
||||
import React, { SetStateAction, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
import { usePropsValue } from '@/use/useCommon'
|
||||
|
||||
type CheckboxSize = 'normal' | 'small'
|
||||
|
||||
type params = {
|
||||
onSelect?: () => void //选择触发
|
||||
onClose?: () => void //取消触发
|
||||
status?: boolean //是否选中
|
||||
interface params {
|
||||
onSelect?: () => void // 选择触发
|
||||
onClose?: () => void // 取消触发
|
||||
status?: boolean // 是否选中
|
||||
hiddenCheckboxIcon?: boolean // 隐藏多选框
|
||||
disabled?: boolean //是否禁用
|
||||
disabled?: boolean // 是否禁用
|
||||
triggerLabel?: boolean // 点击label是否触发选中
|
||||
circle?: boolean
|
||||
round?: boolean
|
||||
@@ -40,7 +40,7 @@ export default forwardRef((props: params, ref) => {
|
||||
} = props
|
||||
const [selected, setSelected] = usePropsValue({
|
||||
value: status,
|
||||
defaultValue: false
|
||||
defaultValue: false,
|
||||
})
|
||||
// const selectedRef = useRef(status)
|
||||
// if (status !== undefined){
|
||||
@@ -57,18 +57,19 @@ export default forwardRef((props: params, ref) => {
|
||||
// }, [])
|
||||
|
||||
const onSelectEven = () => {
|
||||
if (disabled) return false
|
||||
let res = !selected
|
||||
if (disabled) { return false }
|
||||
const res = !selected
|
||||
if (res) {
|
||||
onSelect?.()
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
onClose?.()
|
||||
}
|
||||
console.log('res', res)
|
||||
setSelected(res)
|
||||
}
|
||||
|
||||
const handleClickChildren = event => {
|
||||
const handleClickChildren = (event) => {
|
||||
if (!triggerLabel) {
|
||||
return event.stopPropagation()
|
||||
}
|
||||
@@ -103,7 +104,7 @@ export default forwardRef((props: params, ref) => {
|
||||
{!hiddenCheckboxIcon && (
|
||||
<View className={classnames(styles.checkbox_main, getMainClassName())}>
|
||||
<View className={classnames(styles.checkbox_item, getClassName())}>
|
||||
{selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
|
||||
{selected && <IconFont name="icon-a-jizhumima" size={22} color="#fff"></IconFont>}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { View, Text } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import IconFont from "../iconfont/iconfont"
|
||||
import style from "./index.module.scss"
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import style from './index.module.scss'
|
||||
|
||||
type Params = {
|
||||
onClose?: () => void,
|
||||
styleObj?: Object
|
||||
interface Params {
|
||||
onClose?: () => void
|
||||
styleObj?: Object
|
||||
}
|
||||
|
||||
export default memo(({onClose, styleObj = {}}:Params) => {
|
||||
return (
|
||||
<View style={styleObj} className={style.icon_a_cuowuwrong_self} onClick={onClose}>
|
||||
<View className={style.icon_a_btn}>
|
||||
<IconFont name='icon-guanbi' size={30} color='#ccc'></IconFont>
|
||||
</View>
|
||||
export default memo(({ onClose, styleObj = {} }: Params) => {
|
||||
return (
|
||||
<View style={styleObj} className={style.icon_a_cuowuwrong_self} onClick={onClose}>
|
||||
<View className={style.icon_a_btn}>
|
||||
<IconFont name="icon-guanbi" size={30} color="#ccc"></IconFont>
|
||||
</View>
|
||||
)
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
+114
-114
@@ -1,128 +1,128 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { View } from '@tarojs/components'
|
||||
import Big from 'big.js'
|
||||
import styles from "./index.module.scss"
|
||||
import { usePropsValue } from "@/use/useCommon"
|
||||
import InputX from "../InputX"
|
||||
import InputX from '../InputX'
|
||||
import styles from './index.module.scss'
|
||||
import { usePropsValue } from '@/use/useCommon'
|
||||
|
||||
type params = {
|
||||
minNum?: number, //最小值
|
||||
maxNum?: number, //最大值
|
||||
step?: number, //步长
|
||||
defaultNum?: number, //默认值
|
||||
digits?: number //多少位小数
|
||||
onChange?:(val:number) => void,
|
||||
onBlue?:(val:number) => void, //失去焦点触发
|
||||
onClickBtn?:(val:number) => void,
|
||||
unit?: string,
|
||||
disable?: boolean, //是否禁用
|
||||
interface params {
|
||||
minNum?: number // 最小值
|
||||
maxNum?: number // 最大值
|
||||
step?: number // 步长
|
||||
defaultNum?: number // 默认值
|
||||
digits?: number // 多少位小数
|
||||
onChange?: (val: number) => void
|
||||
onBlue?: (val: number) => void // 失去焦点触发
|
||||
onClickBtn?: (val: number) => void
|
||||
unit?: string
|
||||
disable?: boolean // 是否禁用
|
||||
}
|
||||
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange: onValueChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
|
||||
const [value, setValue] = usePropsValue<number>({
|
||||
value: defaultNum,
|
||||
defaultValue: defaultNum,
|
||||
onChange: (nextValue) => {
|
||||
onValueChange && onValueChange(nextValue)
|
||||
}
|
||||
})
|
||||
// 加号
|
||||
const onPlus = (event) => {
|
||||
event.stopPropagation()
|
||||
if (disable) return false
|
||||
let num_res = Big(value).add(step).toNumber()
|
||||
num_res = num_res >= maxNum ? maxNum : num_res
|
||||
num_res = formatDigits(num_res)
|
||||
setValue(num_res)
|
||||
onClickBtn?.(parseFloat(num_res))
|
||||
}
|
||||
// 减号
|
||||
const minus = (event) => {
|
||||
event.stopPropagation()
|
||||
if(disable) return false
|
||||
let num_res = Big(value).minus(step).toNumber()
|
||||
num_res = num_res < minNum ? minNum : num_res
|
||||
setValue(num_res)
|
||||
onClickBtn?.(parseFloat(num_res))
|
||||
}
|
||||
export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum = 0, onChange: onValueChange, onBlue, onClickBtn, unit = '', disable = false }: params) => {
|
||||
const [value, setValue] = usePropsValue<number>({
|
||||
value: defaultNum,
|
||||
defaultValue: defaultNum,
|
||||
onChange: (nextValue) => {
|
||||
onValueChange && onValueChange(nextValue)
|
||||
},
|
||||
})
|
||||
// 加号
|
||||
const onPlus = (event) => {
|
||||
event.stopPropagation()
|
||||
if (disable) { return false }
|
||||
let num_res = Big(value).add(step).toNumber()
|
||||
num_res = num_res >= maxNum ? maxNum : num_res
|
||||
num_res = formatDigits(num_res)
|
||||
setValue(num_res)
|
||||
onClickBtn?.(parseFloat(num_res))
|
||||
}
|
||||
// 减号
|
||||
const minus = (event) => {
|
||||
event.stopPropagation()
|
||||
if (disable) { return false }
|
||||
let num_res = Big(value).minus(step).toNumber()
|
||||
num_res = num_res < minNum ? minNum : num_res
|
||||
setValue(num_res)
|
||||
onClickBtn?.(parseFloat(num_res))
|
||||
}
|
||||
|
||||
//保留小数
|
||||
const formatDigits = (num) => {
|
||||
num = num + ''
|
||||
if(num.includes('.')&&digits > 0) {
|
||||
console.log('num::',num.includes('.'))
|
||||
let res = num.split('.')
|
||||
let last_num = res[1].substr(0, digits)
|
||||
return res[0] + '.' + last_num
|
||||
}
|
||||
return parseFloat(num)
|
||||
// 保留小数
|
||||
const formatDigits = (num) => {
|
||||
num = `${num}`
|
||||
if (num.includes('.') && digits > 0) {
|
||||
console.log('num::', num.includes('.'))
|
||||
const res = num.split('.')
|
||||
const last_num = res[1].substr(0, digits)
|
||||
return `${res[0]}.${last_num}`
|
||||
}
|
||||
return parseFloat(num)
|
||||
}
|
||||
|
||||
//检查数据
|
||||
const checkData = (val) => {
|
||||
let num = parseFloat(val)
|
||||
if(num > maxNum) return maxNum
|
||||
if(num < minNum) return minNum
|
||||
return val
|
||||
// 检查数据
|
||||
const checkData = (val) => {
|
||||
const num = parseFloat(val)
|
||||
if (num > maxNum) { return maxNum }
|
||||
if (num < minNum) { return minNum }
|
||||
return val
|
||||
}
|
||||
|
||||
const onInputEven = (e) => {
|
||||
const res = e.detail.value
|
||||
if (res === '') {
|
||||
setValue(minNum)
|
||||
return minNum
|
||||
}
|
||||
|
||||
|
||||
const onInputEven = (e) => {
|
||||
let res = e.detail.value
|
||||
if(res === '') {
|
||||
setValue(minNum)
|
||||
return minNum
|
||||
}
|
||||
else if(!isNaN(Number(res))) {
|
||||
let count = formatDigits(res)
|
||||
count = checkData(count)
|
||||
setValue(count as number)
|
||||
return count
|
||||
} else {
|
||||
let num = parseFloat(res)
|
||||
if (!isNaN(num)) {
|
||||
let count = formatDigits(num)
|
||||
count = checkData(count)
|
||||
setValue(count as number)
|
||||
return count
|
||||
} else {
|
||||
setValue(defaultNum)
|
||||
return defaultNum
|
||||
}
|
||||
|
||||
}
|
||||
else if (!isNaN(Number(res))) {
|
||||
let count = formatDigits(res)
|
||||
count = checkData(count)
|
||||
setValue(count as number)
|
||||
return count
|
||||
}
|
||||
else {
|
||||
const num = parseFloat(res)
|
||||
if (!isNaN(num)) {
|
||||
let count = formatDigits(num)
|
||||
count = checkData(count)
|
||||
setValue(count as number)
|
||||
return count
|
||||
}
|
||||
else {
|
||||
setValue(defaultNum)
|
||||
return defaultNum
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onBluerEven = () => {
|
||||
let num = parseFloat(String(value))
|
||||
console.log('onInputEven res===>', num)
|
||||
|
||||
if (!isNaN(num)) {
|
||||
let count = formatDigits(num)
|
||||
count = checkData(count)
|
||||
setValue(count as number)
|
||||
onBlue?.(count as number)
|
||||
return count
|
||||
} else {
|
||||
setValue(defaultNum)
|
||||
onBlue?.(defaultNum)
|
||||
return defaultNum
|
||||
}
|
||||
}
|
||||
const noop = (e) => {
|
||||
e.stopPropagation()
|
||||
const onBluerEven = () => {
|
||||
const num = parseFloat(String(value))
|
||||
console.log('onInputEven res===>', num)
|
||||
|
||||
if (!isNaN(num)) {
|
||||
let count = formatDigits(num)
|
||||
count = checkData(count)
|
||||
setValue(count as number)
|
||||
onBlue?.(count as number)
|
||||
return count
|
||||
}
|
||||
else {
|
||||
setValue(defaultNum)
|
||||
onBlue?.(defaultNum)
|
||||
return defaultNum
|
||||
}
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<View className={styles.reduce} onClick={minus}>
|
||||
}
|
||||
const noop = (e) => {
|
||||
e.stopPropagation()
|
||||
}
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<View className={styles.reduce} onClick={minus}>
|
||||
-
|
||||
</View>
|
||||
<View className={styles.input} onClick={noop}>
|
||||
<InputX value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type='digit' disabled={disable}/>
|
||||
<View className={styles.unit}>{unit}</View>
|
||||
</View>
|
||||
<View className={styles.plus} onClick={onPlus}>
|
||||
+
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
<View className={styles.input} onClick={noop}>
|
||||
<InputX value={String(value)} onInput={onInputEven} onBlur={onBluerEven} type="digit" disabled={disable} />
|
||||
<View className={styles.unit}>{unit}</View>
|
||||
</View>
|
||||
<View className={styles.plus} onClick={onPlus}>
|
||||
+
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { View } from "@tarojs/components";
|
||||
import { memo } from "react";
|
||||
import { View } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default memo(() => {
|
||||
return (
|
||||
<>
|
||||
<View className={styles.load_box}>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<View className={styles.load_box}>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
<View className={styles.load_box_item}></View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
* 注意：需要在父节点设置 position: relative;
|
||||
*/
|
||||
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import Iconfont from '../iconfont/iconfont'
|
||||
import Popup from '../popup'
|
||||
import Cell from '../cell'
|
||||
import Taro from '@tarojs/taro'
|
||||
import classNames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { usePropsValue } from '@/use/useCommon'
|
||||
// 弹窗选择向上弹窗还是向下弹窗
|
||||
type Direction = 'up' | 'down'
|
||||
// 配置 菜单可选项
|
||||
export type DropDownOptions = {
|
||||
export interface DropDownOptions {
|
||||
text: string
|
||||
value: number
|
||||
}
|
||||
@@ -33,24 +33,24 @@ interface PropsType extends DropDownEvent {
|
||||
activeColor?: string
|
||||
showOverlay?: boolean
|
||||
customClassName?: string
|
||||
customStyle?: React.CSSProperties,
|
||||
hasBottomBtn?: boolean //底部有按钮不允许点击蒙层关闭
|
||||
customStyle?: React.CSSProperties
|
||||
hasBottomBtn?: boolean // 底部有按钮不允许点击蒙层关闭
|
||||
}
|
||||
|
||||
export default forwardRef((props: PropsType, ref) => {
|
||||
const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true, hasBottomBtn = false,customClassName,customStyle,onCloseOverlay } = props
|
||||
const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true, hasBottomBtn = false, customClassName, customStyle, onCloseOverlay } = props
|
||||
|
||||
const [showPopup, setShowPopup] = useState(false)
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
show: showPopup,
|
||||
//暴露出方法给有需要的用
|
||||
// 暴露出方法给有需要的用
|
||||
closePopup() {
|
||||
setShowPopup(false)
|
||||
},
|
||||
showPopup() {
|
||||
setShowPopup(true)
|
||||
}
|
||||
},
|
||||
}), [showPopup])
|
||||
|
||||
const handleClickOption = (value: DropDownOptions['value']) => {
|
||||
@@ -63,7 +63,7 @@ export default forwardRef((props: PropsType, ref) => {
|
||||
const currentValue = value
|
||||
return options?.map(({ text, value }) => {
|
||||
currentValue === value && setText(text)
|
||||
return <Cell title={text} desc='' isLink onClick={() => handleClickOption(value)}></Cell>
|
||||
return <Cell title={text} desc="" isLink onClick={() => handleClickOption(value)}></Cell>
|
||||
})
|
||||
}, [value])
|
||||
|
||||
@@ -76,13 +76,13 @@ export default forwardRef((props: PropsType, ref) => {
|
||||
}
|
||||
|
||||
const handleClickTitle = () => {
|
||||
console.log('handleClickTitle', showPopup);
|
||||
console.log('handleClickTitle', showPopup)
|
||||
onCloseOverlay?.()
|
||||
setShowPopup(prev => !prev)
|
||||
}
|
||||
|
||||
const handleClosePopup = () => {
|
||||
if (hasBottomBtn) return
|
||||
if (hasBottomBtn) { return }
|
||||
setShowPopup(false)
|
||||
onCloseOverlay?.()
|
||||
}
|
||||
@@ -100,13 +100,14 @@ export default forwardRef((props: PropsType, ref) => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select('#DropDownItem').boundingClientRect()
|
||||
query.selectViewport().scrollOffset()
|
||||
query.exec(res => {
|
||||
query.exec((res) => {
|
||||
console.log('res==>', res)
|
||||
setScrollHeight(res[1].scrollHeight)
|
||||
if (direction === 'down') {
|
||||
setOverlayOffsetTop(res[0].bottom + 'px')
|
||||
} else {
|
||||
setOverlayOffsetTop(res[0].top + 'px')
|
||||
setOverlayOffsetTop(`${res[0].bottom}px`)
|
||||
}
|
||||
else {
|
||||
setOverlayOffsetTop(`${res[0].top}px`)
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
@@ -115,16 +116,17 @@ export default forwardRef((props: PropsType, ref) => {
|
||||
const getCustomStyle: React.CSSProperties = useMemo(() => {
|
||||
if (direction === 'up') {
|
||||
return { position: 'absolute', top: 0, height: overlayOffsetTop }
|
||||
} else {
|
||||
return { position: 'absolute', top: overlayOffsetTop, height: `calc(${scrollHeight + 'px'} - ${overlayOffsetTop})` }
|
||||
}
|
||||
else {
|
||||
return { position: 'absolute', top: overlayOffsetTop, height: `calc(${`${scrollHeight}px`} - ${overlayOffsetTop})` }
|
||||
}
|
||||
}, [overlayOffsetTop])
|
||||
|
||||
return (
|
||||
<View className={styles.dropDownItem} id='DropDownItem'>
|
||||
<View className={styles.dropDownItem} id="DropDownItem">
|
||||
<View className={classNames(customClassName, styles['dropDownItem--title'])} style={customStyle} onClick={handleClickTitle}>
|
||||
<Text className={styles['dropDownItem--title--text']} style={showPopup ? { color: activeColor } : {}}>
|
||||
{title ? title : text}
|
||||
{title || text}
|
||||
</Text>
|
||||
<Iconfont name={getIconName()} size={20} color={showPopup ? activeColor : '#7f7f7f'}></Iconfont>
|
||||
</View>
|
||||
@@ -136,8 +138,9 @@ export default forwardRef((props: PropsType, ref) => {
|
||||
safeAreaInsetBottom={false}
|
||||
customStyle={getCustomStyle}
|
||||
overlayStyle={getOverlayStyle()}
|
||||
position={direction === 'down' ? 'top' : 'bottom'}>
|
||||
{children ? children : <View className={styles.dropDownItemOptions}>{defaultOptions}</View>}
|
||||
position={direction === 'down' ? 'top' : 'bottom'}
|
||||
>
|
||||
{children || <View className={styles.dropDownItemOptions}>{defaultOptions}</View>}
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { View, Image } from '@tarojs/components'
|
||||
import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from "../empty/index.module.scss"
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from '../empty/index.module.scss'
|
||||
|
||||
interface PropsObj {
|
||||
picUrl?: string,
|
||||
text?: string
|
||||
picUrl?: string
|
||||
text?: string
|
||||
}
|
||||
|
||||
export default memo((pros: PropsObj) => {
|
||||
const {
|
||||
picUrl = '',
|
||||
text = '无搜索历史'
|
||||
} = pros
|
||||
|
||||
return (
|
||||
<View className={styles.mainBox}>
|
||||
<Image className={styles.pic} mode='aspectFill' lazyLoad src={picUrl}></Image>
|
||||
<View className={styles.text}>{text}</View>
|
||||
</View>
|
||||
)
|
||||
const {
|
||||
picUrl = '',
|
||||
text = '无搜索历史',
|
||||
} = pros
|
||||
|
||||
return (
|
||||
<View className={styles.mainBox}>
|
||||
<Image className={styles.pic} mode="aspectFill" lazyLoad src={picUrl}></Image>
|
||||
<View className={styles.text}>{text}</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,64 +1,65 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"
|
||||
import {formatKbPrice} from '@/common/common'
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import Taro from "@tarojs/taro";
|
||||
import AmountShow from "../amountShow";
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import AmountShow from '../amountShow'
|
||||
import styles from './index.module.scss'
|
||||
import { formatKbPrice } from '@/common/common'
|
||||
|
||||
type Param = {
|
||||
style?: Object,
|
||||
number?: number|string,
|
||||
title?: string,
|
||||
titleStatus?: true|false, //true 标题加大加深
|
||||
numberStatus?: 0|1|2, //数字尺寸
|
||||
messageTitle?: string,
|
||||
messageWidth?: number,
|
||||
messageShow?: true|false,
|
||||
numberFormat?: 'number'|'text' //数字还是字符串
|
||||
interface Param {
|
||||
style?: Object
|
||||
number?: number|string
|
||||
title?: string
|
||||
titleStatus?: true|false // true 标题加大加深
|
||||
numberStatus?: 0|1|2 // 数字尺寸
|
||||
messageTitle?: string
|
||||
messageWidth?: number
|
||||
messageShow?: true|false
|
||||
numberFormat?: 'number'|'text' // 数字还是字符串
|
||||
}
|
||||
export default memo(({number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageWidth = 430, messageShow = false, numberFormat = 'number'}:Param) => {
|
||||
const [show, setShow] = useState(messageShow)
|
||||
const onClose = () => {
|
||||
setShow(false)
|
||||
}
|
||||
const openShow = () => [
|
||||
setShow(true)
|
||||
]
|
||||
export default memo(({ number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageWidth = 430, messageShow = false, numberFormat = 'number' }: Param) => {
|
||||
const [show, setShow] = useState(messageShow)
|
||||
const onClose = () => {
|
||||
setShow(false)
|
||||
}
|
||||
const openShow = () => [
|
||||
setShow(true),
|
||||
]
|
||||
|
||||
const [style, setStyle] = useState<{top: string}>()
|
||||
const [style, setStyle] = useState<{ top: string }>()
|
||||
|
||||
useEffect(() => {
|
||||
if(show) {
|
||||
getDomDes('#message')
|
||||
} else {
|
||||
setStyle(() => ({top: '0'}))
|
||||
}
|
||||
}, [show])
|
||||
//设置弹出层高度
|
||||
const getDomDes = (id) => {
|
||||
setTimeout(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select(id).boundingClientRect(rect=>{
|
||||
let height = rect.height * 2 + 15;
|
||||
setStyle((e) => ({...e, top: `-${height}rpx`, opacity: 1}))
|
||||
}).exec();
|
||||
}, 0)
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
getDomDes('#message')
|
||||
}
|
||||
else {
|
||||
setStyle(() => ({ top: '0' }))
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.order_price}>
|
||||
<View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)} onClick={() => openShow()}>
|
||||
<Text>{title}</Text>
|
||||
<View className={styles.iconfont_msg}>
|
||||
{show&&<View style={{...style, width: `${messageWidth}rpx`}} id='message' className={classnames(styles.message)}>{messageTitle}</View>}
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
|
||||
</View>
|
||||
</View>
|
||||
{numberFormat == 'number' && <AmountShow status={numberStatus} number={(number as number / 100)}/>}
|
||||
{(numberFormat == 'text') && <View className={styles.refund_destination}>{number}</View>}
|
||||
{show&&<View className={styles.close} catchMove onClick={onClose}></View>}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
}, [show])
|
||||
// 设置弹出层高度
|
||||
const getDomDes = (id) => {
|
||||
setTimeout(() => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select(id).boundingClientRect((rect) => {
|
||||
const height = rect.height * 2 + 15
|
||||
setStyle(e => ({ ...e, top: `-${height}rpx`, opacity: 1 }))
|
||||
}).exec()
|
||||
}, 0)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.order_price}>
|
||||
<View className={classnames(styles.order_price_text, titleStatus && styles.emphasis)} onClick={() => openShow()}>
|
||||
<Text>{title}</Text>
|
||||
<View className={styles.iconfont_msg}>
|
||||
{show && <View style={{ ...style, width: `${messageWidth}rpx` }} id="message" className={classnames(styles.message)}>{messageTitle}</View>}
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
|
||||
</View>
|
||||
</View>
|
||||
{numberFormat == 'number' && <AmountShow status={numberStatus} number={(number as number / 100)} />}
|
||||
{(numberFormat == 'text') && <View className={styles.refund_destination}>{number}</View>}
|
||||
{show && <View className={styles.close} catchMove onClick={onClose}></View>}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
+107
-107
@@ -1,118 +1,118 @@
|
||||
import { GetProductKindListApi } from "@/api/material";
|
||||
import Popup, {Params as PopuParams} from "@/components/popup"
|
||||
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
|
||||
import { useDidShow } from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
import { Input, ScrollView, Text, Textarea, View } from '@tarojs/components'
|
||||
import { useDidShow } from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
import { memo, useEffect, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import type { Params as PopuParams } from '@/components/popup'
|
||||
import { GetProductKindListApi } from '@/api/material'
|
||||
|
||||
type params = {
|
||||
onFiltr?: (val:object) => void //确定搜索
|
||||
onRest?: (val:Object) => void //重置
|
||||
onFiltr?: (val: object) => void // 确定搜索
|
||||
onRest?: (val: Object) => void // 重置
|
||||
} & PopuParams
|
||||
export default memo(({onClose, onFiltr, show = false, onRest}:params) => {
|
||||
export default memo(({ onClose, onFiltr, show = false, onRest }: params) => {
|
||||
// 搜索条件
|
||||
const [filterObj, setFilterObj] = useState({
|
||||
seriesName: '',
|
||||
seriesId: '',
|
||||
width: '',
|
||||
weight: '',
|
||||
element: '',
|
||||
})
|
||||
|
||||
//搜索条件
|
||||
const [filterObj, setFilterObj] = useState({
|
||||
seriesName: '',
|
||||
seriesId: '',
|
||||
width: '',
|
||||
weight: '',
|
||||
element: '',
|
||||
})
|
||||
const selectFieldValue = useRef({ width: '幅宽', weight: '克重', element: '成分', seriesName: '系列' })
|
||||
|
||||
const selectFieldValue = useRef({width:'幅宽', weight:'克重', element:'成分', seriesName:'系列'})
|
||||
// 获取系列
|
||||
const { fetchData: kindFetchData } = GetProductKindListApi()
|
||||
const [kindList, setKindList] = useState<any[]>([])
|
||||
const getCategoryList = async() => {
|
||||
const { data } = await kindFetchData()
|
||||
setKindList(data.list)
|
||||
}
|
||||
|
||||
//获取系列
|
||||
const {fetchData: kindFetchData} = GetProductKindListApi()
|
||||
const [kindList, setKindList] = useState<any[]>([])
|
||||
const getCategoryList = async () => {
|
||||
let {data} = await kindFetchData()
|
||||
setKindList(data.list)
|
||||
useEffect(() => {
|
||||
show && getCategoryList()
|
||||
}, [show])
|
||||
|
||||
// 切换系列
|
||||
const changeKind = (e) => {
|
||||
setFilterObj({ ...filterObj, seriesId: e.id, seriesName: e.name })
|
||||
}
|
||||
|
||||
const onCloseEven = () => {
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
// 重置数据
|
||||
const onRestEven = () => {
|
||||
const res = {
|
||||
seriesName: '',
|
||||
seriesId: '',
|
||||
width: '',
|
||||
weight: '',
|
||||
element: '',
|
||||
}
|
||||
setFilterObj(res)
|
||||
onFiltr?.(filterObj)
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
show&&getCategoryList()
|
||||
}, [show])
|
||||
// 提交搜索
|
||||
const onVerify = () => {
|
||||
onFiltr?.({ data: filterObj, field: selectFieldValue.current })
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
//切换系列
|
||||
const changeKind = (e) => {
|
||||
setFilterObj({...filterObj, seriesId:e.id, seriesName: e.name})
|
||||
}
|
||||
// 获取幅宽或克重输入值或成分
|
||||
const setFieldData = (e, field) => {
|
||||
filterObj[field] = e.detail.value
|
||||
setFilterObj({ ...filterObj })
|
||||
}
|
||||
|
||||
const onCloseEven = () => {
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
//重置数据
|
||||
const onRestEven = () => {
|
||||
let res = {
|
||||
seriesName: '',
|
||||
seriesId: '',
|
||||
width: '',
|
||||
weight: '',
|
||||
element: '',
|
||||
}
|
||||
setFilterObj(res)
|
||||
onFiltr?.(filterObj)
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
//提交搜索
|
||||
const onVerify = () => {
|
||||
onFiltr?.({data:filterObj, field: selectFieldValue.current})
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
//获取幅宽或克重输入值或成分
|
||||
const setFieldData = (e, field) => {
|
||||
filterObj[field] = e.detail.value
|
||||
setFilterObj({...filterObj})
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
|
||||
<View className={styles.popup_main}>
|
||||
<View className={styles.popup_title}>全部筛选</View>
|
||||
<ScrollView scrollY className={styles.scroll}>
|
||||
<View className={styles.popup_filter}>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>系列</View>
|
||||
<View className={styles.btn_list}>
|
||||
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>幅宽</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input value={filterObj.width} onBlur={(e) => setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
|
||||
<View className={styles.unit}>cm</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>克重</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
|
||||
<View className={styles.unit}>kg</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>成分</View>
|
||||
<View className={styles.btn_list_element}>
|
||||
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setFieldData(e, 'element')}/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className={styles.btns_con}>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
|
||||
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
|
||||
</View>
|
||||
</View>
|
||||
return (
|
||||
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton>
|
||||
<View className={styles.popup_main}>
|
||||
<View className={styles.popup_title}>全部筛选</View>
|
||||
<ScrollView scrollY className={styles.scroll}>
|
||||
<View className={styles.popup_filter}>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>系列</View>
|
||||
<View className={styles.btn_list}>
|
||||
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id) && styles.select_btn_item)}>{item.name}</View>)}
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>幅宽</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input value={filterObj.width} onBlur={e => setFieldData(e, 'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx" /></View>
|
||||
<View className={styles.unit}>cm</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>克重</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input value={filterObj.weight} onBlur={e => setFieldData(e, 'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx" /></View>
|
||||
<View className={styles.unit}>kg</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>成分</View>
|
||||
<View className={styles.btn_list_element}>
|
||||
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={e => setFieldData(e, 'element')} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className={styles.btns_con}>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
|
||||
<View className={styles.verify_btn} onClick={() => onVerify()}>确认</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import classnames from "classnames"
|
||||
import { FC } from "react"
|
||||
import NormalButton from "../normalButton"
|
||||
import classnames from 'classnames'
|
||||
import type { FC } from 'react'
|
||||
import NormalButton from '../normalButton'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface ButtonPropsType {
|
||||
@@ -10,7 +10,7 @@ interface ButtonPropsType {
|
||||
customClassName?: string
|
||||
}
|
||||
|
||||
const FilterButton: FC<ButtonPropsType> = props => {
|
||||
const FilterButton: FC<ButtonPropsType> = (props) => {
|
||||
const { onClick, children, isActive = false, customClassName } = props
|
||||
const handleClick = () => {
|
||||
onClick?.()
|
||||
@@ -19,7 +19,8 @@ const FilterButton: FC<ButtonPropsType> = props => {
|
||||
<NormalButton
|
||||
customTextClassName={styles['filterButton--text']}
|
||||
customClassName={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)}
|
||||
onClick={handleClick}>
|
||||
onClick={handleClick}
|
||||
>
|
||||
{children}
|
||||
</NormalButton>
|
||||
)
|
||||
|
||||
+118
-117
@@ -1,128 +1,129 @@
|
||||
import { GetProductKindListApi } from "@/api/material";
|
||||
import Popup, {Params as PopuParams} from "@/components/popup"
|
||||
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
|
||||
import { useDidShow } from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
import { Input, ScrollView, Text, Textarea, View } from '@tarojs/components'
|
||||
import { useDidShow } from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import type { Params as PopuParams } from '@/components/popup'
|
||||
import { GetProductKindListApi } from '@/api/material'
|
||||
|
||||
type params = {
|
||||
onFiltr?: (val:object) => void
|
||||
onFiltr?: (val: object) => void
|
||||
} & PopuParams
|
||||
export default ({onClose, onFiltr, show = false}:params) => {
|
||||
export default ({ onClose, onFiltr, show = false }: params) => {
|
||||
// 搜索条件
|
||||
const [filterObj, setFilterObj] = useState({
|
||||
seriesId: '',
|
||||
minWidth: '',
|
||||
maxWidth: '',
|
||||
minWeight: '',
|
||||
maxWeight: '',
|
||||
element: '',
|
||||
})
|
||||
|
||||
//搜索条件
|
||||
const [filterObj, setFilterObj] = useState({
|
||||
seriesId: '',
|
||||
minWidth: '',
|
||||
maxWidth: '',
|
||||
minWeight: '',
|
||||
maxWeight: '',
|
||||
element: ''
|
||||
// 获取系列
|
||||
const { fetchData: kindFetchData } = GetProductKindListApi()
|
||||
const [kindList, setKindList] = useState<any[]>([])
|
||||
const getCategoryList = async() => {
|
||||
const { data } = await kindFetchData()
|
||||
setKindList(data.list)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
show && getCategoryList()
|
||||
}, [show])
|
||||
|
||||
// 切换系列
|
||||
const changeKind = (e) => {
|
||||
setFilterObj({ ...filterObj, seriesId: e.id })
|
||||
}
|
||||
|
||||
const onCloseEven = () => {
|
||||
onClose?.()
|
||||
}
|
||||
const onRest = () => {
|
||||
console.log('12123')
|
||||
setFilterObj({
|
||||
seriesId: '',
|
||||
minWidth: '',
|
||||
maxWidth: '',
|
||||
minWeight: '',
|
||||
maxWeight: '',
|
||||
element: '',
|
||||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
console.log(filterObj)
|
||||
}, [filterObj])
|
||||
|
||||
//获取系列
|
||||
const {fetchData: kindFetchData} = GetProductKindListApi()
|
||||
const [kindList, setKindList] = useState<any[]>([])
|
||||
const getCategoryList = async () => {
|
||||
let {data} = await kindFetchData()
|
||||
setKindList(data.list)
|
||||
}
|
||||
const onVerify = () => {
|
||||
console.log(filterObj)
|
||||
onFiltr?.(filterObj)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
show&&getCategoryList()
|
||||
}, [show])
|
||||
const setNumber = (e, field) => {
|
||||
console.log(e)
|
||||
const num = parseFloat(e.detail.value)
|
||||
if (isNaN(num)) {
|
||||
filterObj[field] = null
|
||||
}
|
||||
else {
|
||||
filterObj[field] = parseFloat(num.toFixed(2))
|
||||
}
|
||||
setFilterObj({ ...filterObj })
|
||||
}
|
||||
|
||||
//切换系列
|
||||
const changeKind = (e) => {
|
||||
setFilterObj({...filterObj, seriesId:e.id})
|
||||
}
|
||||
const setElement = (e) => {
|
||||
const res = e.detail.value
|
||||
setFilterObj({ ...filterObj, element: res })
|
||||
}
|
||||
return (
|
||||
|
||||
const onCloseEven = () => {
|
||||
onClose?.()
|
||||
}
|
||||
const onRest = () => {
|
||||
console.log('12123')
|
||||
setFilterObj({
|
||||
seriesId: '',
|
||||
minWidth: '',
|
||||
maxWidth: '',
|
||||
minWeight: '',
|
||||
maxWeight: '',
|
||||
element: ''
|
||||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
console.log(filterObj)
|
||||
}, [filterObj])
|
||||
|
||||
const onVerify = () => {
|
||||
console.log(filterObj)
|
||||
onFiltr?.(filterObj)
|
||||
}
|
||||
|
||||
const setNumber = (e, field) => {
|
||||
console.log(e)
|
||||
let num = parseFloat(e.detail.value)
|
||||
if(isNaN(num)) {
|
||||
filterObj[field] = null
|
||||
} else {
|
||||
filterObj[field] = parseFloat(num.toFixed(2))
|
||||
}
|
||||
setFilterObj({...filterObj})
|
||||
}
|
||||
|
||||
const setElement = (e) => {
|
||||
let res = e.detail.value
|
||||
setFilterObj({...filterObj, element:res})
|
||||
}
|
||||
return (
|
||||
|
||||
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
|
||||
<View className={styles.popup_main}>
|
||||
<View className={styles.popup_title}>全部筛选</View>
|
||||
<ScrollView scrollY className={styles.scroll}>
|
||||
<View className={styles.popup_filter}>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>系列</View>
|
||||
<View className={styles.btn_list}>
|
||||
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>幅宽</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
|
||||
<View className={styles.unit}>cm</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>克重</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
|
||||
<Text>—</Text>
|
||||
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
|
||||
<View className={styles.unit}>g</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>成分</View>
|
||||
<View className={styles.btn_list_element}>
|
||||
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className={styles.btns_con}>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
|
||||
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
|
||||
</View>
|
||||
</View>
|
||||
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton>
|
||||
<View className={styles.popup_main}>
|
||||
<View className={styles.popup_title}>全部筛选</View>
|
||||
<ScrollView scrollY className={styles.scroll}>
|
||||
<View className={styles.popup_filter}>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>系列</View>
|
||||
<View className={styles.btn_list}>
|
||||
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id) && styles.select_btn_item)}>{item.name}</View>)}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>幅宽</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={e => setNumber(e, 'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx" /></View>
|
||||
<View className={styles.unit}>cm</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>克重</View>
|
||||
<View className={styles.btn_list_input}>
|
||||
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={e => setNumber(e, 'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx" /></View>
|
||||
<Text>—</Text>
|
||||
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={e => setNumber(e, 'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx" /></View>
|
||||
<View className={styles.unit}>g</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.popup_filter_item}>
|
||||
<View className={styles.title}>成分</View>
|
||||
<View className={styles.btn_list_element}>
|
||||
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={e => setElement(e)} />
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
|
||||
)
|
||||
}
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<View className={styles.btns_con}>
|
||||
<View className={styles.btns_two}>
|
||||
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
|
||||
<View className={styles.verify_btn} onClick={() => onVerify()}>确认</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,103 +1,103 @@
|
||||
import { View, ScrollView, Image, Input } from '@tarojs/components'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import { Image, Input, ScrollView, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface props {
|
||||
clickAdd: (any) => void,
|
||||
// onInputEven?: (a: any, c: any) => void,
|
||||
clickReduce: (any) => void,
|
||||
handPlus: (any) => void,
|
||||
modeFont?: number
|
||||
value: {
|
||||
showInput?: boolean,
|
||||
nums?: string,
|
||||
bulk_price?: Number | 0,
|
||||
length_cut_price?: Number,
|
||||
weight_cut_price?: Number,
|
||||
code?: string,
|
||||
rgb?: { r: number, g: number, b: number },
|
||||
name?: string,
|
||||
roll?: number | string,
|
||||
buyNums?: number | string,
|
||||
id?: number,
|
||||
weight_error?: number | string
|
||||
},
|
||||
goodList?: any[],
|
||||
onBlur?: (a: any, c: any) => void
|
||||
clickAdd: (any) => void
|
||||
// onInputEven?: (a: any, c: any) => void,
|
||||
clickReduce: (any) => void
|
||||
handPlus: (any) => void
|
||||
modeFont?: number
|
||||
value: {
|
||||
showInput?: boolean
|
||||
nums?: string
|
||||
bulk_price?: Number | 0
|
||||
length_cut_price?: Number
|
||||
weight_cut_price?: Number
|
||||
code?: string
|
||||
rgb?: { r: number; g: number; b: number }
|
||||
name?: string
|
||||
roll?: number | string
|
||||
buyNums?: number | string
|
||||
id?: number
|
||||
weight_error?: number | string
|
||||
}
|
||||
goodList?: any[]
|
||||
onBlur?: (a: any, c: any) => void
|
||||
}
|
||||
|
||||
|
||||
export default memo((props: props) => {
|
||||
const [value, setValue] = useState<any>({ count: props.value.nums })
|
||||
const [value, setValue] = useState<any>({ count: props.value.nums })
|
||||
|
||||
const onInputEven = (e) => {
|
||||
let res = e.detail.value
|
||||
if (props.modeFont == 0) {
|
||||
if (Number(res) < 1) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
if (props.modeFont == 1) {
|
||||
if (Number(res) < 0) {
|
||||
setValue({ count: 0.5 })
|
||||
}
|
||||
}
|
||||
if (props.modeFont == 2) {
|
||||
if (Number(res) < 3) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
const onInputEven = (e) => {
|
||||
const res = e.detail.value
|
||||
if (props.modeFont == 0) {
|
||||
if (Number(res) < 1) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
if (props.modeFont == 1) {
|
||||
if (Number(res) < 0) {
|
||||
setValue({ count: 0.5 })
|
||||
}
|
||||
}
|
||||
if (props.modeFont == 2) {
|
||||
if (Number(res) < 3) {
|
||||
setValue({ count: '' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const type = useMemo(() => {
|
||||
if (props.modeFont === 0) {
|
||||
return 'number'
|
||||
} else {
|
||||
return 'digit'
|
||||
}
|
||||
}, [props.modeFont])
|
||||
return (
|
||||
<View className={styles.goodsBox}>
|
||||
{
|
||||
props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
|
||||
}
|
||||
{
|
||||
(props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0) &&
|
||||
<View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
|
||||
}
|
||||
<View className={styles.rightGoodbox}>
|
||||
<View className={styles.leftFontsbox}>
|
||||
<View className={styles.title}>{props.value?.code} {props.value?.name}</View>
|
||||
<View className={styles.productNums}>剩：{props.value?.roll}件</View>
|
||||
{
|
||||
props?.modeFont === 0 && <View className={styles.productName}>空差：{props?.value?.weight_error as number / 1000 || 0}Kg</View>
|
||||
}
|
||||
</View>
|
||||
<View className={styles.rightFontsbox}>
|
||||
<View className={styles.money}>¥{props?.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont != 1 ? '/Kg' : '/m'}</View>
|
||||
{
|
||||
props.value.showInput && <View className={styles.inputBox}>
|
||||
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
|
||||
<View className={styles.reduce}>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.numsBox}>
|
||||
<Input alwaysEmbed cursorSpacing={100} adjustPosition type={type as any} value={value.count} onInput={onInputEven} onBlur={(e) => props.onBlur?.(e, props.value.id)}></Input>
|
||||
|
||||
{/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
|
||||
</View>
|
||||
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
|
||||
+
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
{
|
||||
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd?.(props.value)}>+</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
const type = useMemo(() => {
|
||||
if (props.modeFont === 0) {
|
||||
return 'number'
|
||||
}
|
||||
else {
|
||||
return 'digit'
|
||||
}
|
||||
}, [props.modeFont])
|
||||
return (
|
||||
<View className={styles.goodsBox}>
|
||||
{
|
||||
props?.value?.rgb?.r == 0 && props?.value?.rgb?.g == 0 && props?.value?.rgb?.b == 0 && <Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
|
||||
}
|
||||
{
|
||||
(props?.value?.rgb?.r != 0 || props?.value?.rgb?.g != 0 || props?.value?.rgb?.b != 0)
|
||||
&& <View className={styles.pic} style={{ backgroundColor: `rgb(${props?.value?.rgb?.r} ${props?.value?.rgb?.g} ${props?.value.rgb?.b})` }}></View>
|
||||
}
|
||||
<View className={styles.rightGoodbox}>
|
||||
<View className={styles.leftFontsbox}>
|
||||
<View className={styles.title}>{props.value?.code} {props.value?.name}</View>
|
||||
<View className={styles.productNums}>剩：{props.value?.roll}件</View>
|
||||
{
|
||||
props?.modeFont === 0 && <View className={styles.productName}>空差：{props?.value?.weight_error as number / 1000 || 0}Kg</View>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
<View className={styles.rightFontsbox}>
|
||||
<View className={styles.money}>¥{props?.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont != 1 ? '/Kg' : '/m'}</View>
|
||||
{
|
||||
props.value.showInput && <View className={styles.inputBox}>
|
||||
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
|
||||
<View className={styles.reduce}>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.numsBox}>
|
||||
<Input alwaysEmbed cursorSpacing={100} adjustPosition type={type as any} value={value.count} onInput={onInputEven} onBlur={e => props.onBlur?.(e, props.value.id)}></Input>
|
||||
|
||||
{/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
|
||||
</View>
|
||||
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
|
||||
+
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
{
|
||||
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd?.(props.value)}>+</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
// ($event) => onInputEven($event, props.value)
|
||||
// ($event) => onInputEven($event, props.value)
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import IconFont, { IconNames } from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import classname from 'classnames'
|
||||
import type { IconNames } from '../iconfont/iconfont'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface PropsType {
|
||||
iconName: IconNames
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import React, { FC, useMemo } from "react"
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import IconFont, { IconNames } from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import type { FC } from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import type { IconNames } from '../iconfont/iconfont'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Direaction = 'left' | 'right' | 'bottom' | 'top'
|
||||
|
||||
type PropsType = {
|
||||
interface PropsType {
|
||||
iconName: IconNames
|
||||
iconSize?: number
|
||||
svg?: boolean
|
||||
color?: string,
|
||||
color?: string
|
||||
text?: string
|
||||
direction?: Direaction
|
||||
children?: React.ReactNode
|
||||
@@ -21,32 +23,32 @@ type PropsType = {
|
||||
}
|
||||
|
||||
const IconText: FC<PropsType> = (props) => {
|
||||
const { children, svg = false, iconName, iconSize = 40, text = '', color,textCustomStyle,direction='left' } = props
|
||||
const { children, svg = false, iconName, iconSize = 40, text = '', color, textCustomStyle, direction = 'left' } = props
|
||||
const classNameObject = {
|
||||
[styles['iconText--horizontal']]: ['left', 'right'].includes(direction),
|
||||
[styles['iconText--vertical']]: ['bottom', 'top'].includes(direction)
|
||||
[styles['iconText--vertical']]: ['bottom', 'top'].includes(direction),
|
||||
}
|
||||
const iconComponent = svg ? <IconFont name={iconName} size={iconSize} color={color}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>
|
||||
|
||||
const textComponent = children ? children : <Text className={classnames(props.textClassName, styles['text'])} style={textCustomStyle}>{text}</Text>
|
||||
const textComponent = children || <Text className={classnames(props.textClassName, styles.text)} style={textCustomStyle}>{text}</Text>
|
||||
|
||||
const component = ()=>{
|
||||
if(direction === 'left' || direction === 'top'){
|
||||
const component = () => {
|
||||
if (direction === 'left' || direction === 'top') {
|
||||
return <>
|
||||
{iconComponent}
|
||||
{textComponent}
|
||||
{iconComponent}
|
||||
{textComponent}
|
||||
</>
|
||||
}else if(direction === 'right' || direction === 'bottom'){
|
||||
}
|
||||
else if (direction === 'right' || direction === 'bottom') {
|
||||
return <>
|
||||
{textComponent}
|
||||
{iconComponent}
|
||||
{textComponent}
|
||||
{iconComponent}
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={classnames(styles.iconText,classNameObject, props.customStyle, props.customClass)}>
|
||||
<View className={classnames(styles.iconText, classNameObject, props.customStyle, props.customClass)}>
|
||||
{component()}
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,45 +1,46 @@
|
||||
import React, { useState, useEffect, FC } from "react";
|
||||
import { Block, View } from "@tarojs/components";
|
||||
import "./iconfont.scss";
|
||||
import Taro from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { Block, View } from '@tarojs/components'
|
||||
import type { FC } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import './iconfont.scss'
|
||||
import Taro from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
|
||||
const SystemWidth = Taro.getSystemInfoSync().windowWidth
|
||||
const quot = '"'
|
||||
|
||||
function hex2rgb(hex) {
|
||||
var rgb = [];
|
||||
const rgb = []
|
||||
|
||||
hex = hex.substr(1);
|
||||
hex = hex.substr(1)
|
||||
|
||||
if (hex.length === 3) {
|
||||
hex = hex.replace(/(.)/g, "$1$1");
|
||||
hex = hex.replace(/(.)/g, '$1$1')
|
||||
}
|
||||
|
||||
hex.replace(/../g, function(color: string) {
|
||||
rgb.push(parseInt(color, 0x10));
|
||||
return color;
|
||||
});
|
||||
hex.replace(/../g, (color: string) => {
|
||||
rgb.push(parseInt(color, 0x10))
|
||||
return color
|
||||
})
|
||||
|
||||
return "rgb(" + rgb.join(",") + ")";
|
||||
return `rgb(${rgb.join(',')})`
|
||||
}
|
||||
|
||||
export type IconNames = 'icon-shangchuanwenli' | 'icon-gouwuche' | 'icon-zixun' | 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
export type IconNames = 'icon-shangchuanwenli' | 'icon-gouwuche' | 'icon-zixun' | 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu'
|
||||
|
||||
type PropsType = {
|
||||
name: IconNames;
|
||||
size?: number;
|
||||
color?: string | string[];
|
||||
customStyle?: React.CSSProperties;
|
||||
customClassName?: string;
|
||||
};
|
||||
interface PropsType {
|
||||
name: IconNames
|
||||
size?: number
|
||||
color?: string | string[]
|
||||
customStyle?: React.CSSProperties
|
||||
customClassName?: string
|
||||
}
|
||||
|
||||
const IconFont:FC<PropsType> = ({
|
||||
const IconFont: FC<PropsType> = ({
|
||||
name,
|
||||
size = 36,
|
||||
color,
|
||||
customStyle = {},
|
||||
customClassName = ""
|
||||
customClassName = '',
|
||||
}) => {
|
||||
const [colors, setColors] = useState<PropsType['color']>()
|
||||
const [isStr, setIsStr] = useState(true)
|
||||
@@ -49,11 +50,12 @@ const IconFont:FC<PropsType> = ({
|
||||
setIsStr(typeof color === 'string')
|
||||
if (typeof color === 'string') {
|
||||
setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
setColors(
|
||||
color?.map(function (item) {
|
||||
color?.map((item) => {
|
||||
return item.indexOf('#') === 0 ? hex2rgb(item) : item
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
return () => {}
|
||||
@@ -84,238 +86,238 @@ const IconFont:FC<PropsType> = ({
|
||||
)} */}
|
||||
{/* icon-shangchuanwenli */}
|
||||
|
||||
{ name === 'icon-shangchuanwenli' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M883.2 176A28.8 28.8 0 0 1 912 204.8v261.2736a18.6368 18.6368 0 0 1-32 12.992l-27.9296-28.7232a14.4 14.4 0 0 1-4.0704-10.0352V240h-672v352l182.2336-174.6816a28.8 28.8 0 0 1 40.3712 0.512l139.9296 141.056a28.8 28.8 0 0 1 0 40.576l-6.1056 6.144a28.8256 28.8256 0 0 1-40.8832 0l-112.8832-113.7792L176 688v96h307.1872a28.8 28.8 0 0 1 28.8 28.8v6.4a28.8 28.8 0 0 1-28.8 28.8H140.8A28.8 28.8 0 0 1 112 819.2V204.8A28.8 28.8 0 0 1 140.8 176h742.4z m-118.8608 340.3136l117.1712 116.992a28.8 28.8 0 0 1 0 40.7552l-6.2848 6.272a28.8 28.8 0 0 1-40.704 0L777.6 623.488V819.2a28.8 28.8 0 0 1-28.8 28.8h-9.6A28.8 28.8 0 0 1 710.4 819.2V623.488L653.44 680.32a28.8 28.8 0 0 1-40.704 0l-6.2976-6.2848a28.8 28.8 0 0 1 0.0128-40.7552l117.1712-116.9792a28.8 28.8 0 0 1 40.704 0zM720 304c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(160,160,160)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gouwuche */}
|
||||
{ name === 'icon-shangchuanwenli' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M883.2 176A28.8 28.8 0 0 1 912 204.8v261.2736a18.6368 18.6368 0 0 1-32 12.992l-27.9296-28.7232a14.4 14.4 0 0 1-4.0704-10.0352V240h-672v352l182.2336-174.6816a28.8 28.8 0 0 1 40.3712 0.512l139.9296 141.056a28.8 28.8 0 0 1 0 40.576l-6.1056 6.144a28.8256 28.8256 0 0 1-40.8832 0l-112.8832-113.7792L176 688v96h307.1872a28.8 28.8 0 0 1 28.8 28.8v6.4a28.8 28.8 0 0 1-28.8 28.8H140.8A28.8 28.8 0 0 1 112 819.2V204.8A28.8 28.8 0 0 1 140.8 176h742.4z m-118.8608 340.3136l117.1712 116.992a28.8 28.8 0 0 1 0 40.7552l-6.2848 6.272a28.8 28.8 0 0 1-40.704 0L777.6 623.488V819.2a28.8 28.8 0 0 1-28.8 28.8h-9.6A28.8 28.8 0 0 1 710.4 819.2V623.488L653.44 680.32a28.8 28.8 0 0 1-40.704 0l-6.2976-6.2848a28.8 28.8 0 0 1 0.0128-40.7552l117.1712-116.9792a28.8 28.8 0 0 1 40.704 0zM720 304c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(160,160,160)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-gouwuche */}
|
||||
|
||||
{ name === 'icon-gouwuche' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 12.510609a185.032348 185.032348 0 0 1 185.032348 185.076869v38.912h-58.457044v-38.956521c0-65.847652-50.309565-119.986087-114.554434-125.996522l-7.479653-0.489739L512 70.967652a126.619826 126.619826 0 0 0-126.619826 126.575305v38.956521H326.878609v-38.956521a185.032348 185.032348 0 0 1 175.860869-184.765218z m295.980522 224.033391c19.945739 0 36.685913 15.09287 38.733913 34.949565l69.89913 681.761392a38.956522 38.956522 0 0 1-38.733913 42.918956H146.120348a38.956522 38.956522 0 0 1-38.733913-42.918956l69.89913-681.761392a38.956522 38.956522 0 0 1 38.733913-34.949565h591.961044z m-17.630609 58.412522H233.605565l-65.892174 642.804869h688.573218l-65.892174-642.804869z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zixun */}
|
||||
{ name === 'icon-gouwuche' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 12.510609a185.032348 185.032348 0 0 1 185.032348 185.076869v38.912h-58.457044v-38.956521c0-65.847652-50.309565-119.986087-114.554434-125.996522l-7.479653-0.489739L512 70.967652a126.619826 126.619826 0 0 0-126.619826 126.575305v38.956521H326.878609v-38.956521a185.032348 185.032348 0 0 1 175.860869-184.765218z m295.980522 224.033391c19.945739 0 36.685913 15.09287 38.733913 34.949565l69.89913 681.761392a38.956522 38.956522 0 0 1-38.733913 42.918956H146.120348a38.956522 38.956522 0 0 1-38.733913-42.918956l69.89913-681.761392a38.956522 38.956522 0 0 1 38.733913-34.949565h591.961044z m-17.630609 58.412522H233.605565l-65.892174 642.804869h688.573218l-65.892174-642.804869z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-zixun */}
|
||||
|
||||
{ name === 'icon-zixun' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 7.261091a412.485818 412.485818 0 0 1 407.598545 349.463273l-5.585454-0.186182a107.054545 107.054545 0 0 1 107.054545 107.054545v210.850909a107.054545 107.054545 0 0 1-107.054545 107.054546h-40.401455a107.054545 107.054545 0 0 1-107.054545-107.054546V463.592727c0-53.713455 39.563636-98.210909 91.229091-105.890909a351.278545 351.278545 0 0 0-691.665455 0.093091A107.008 107.008 0 0 1 257.489455 463.592727v210.850909a107.101091 107.101091 0 0 1-84.48 104.680728 160.581818 160.581818 0 0 0 148.48 99.328h88.901818a106.123636 106.123636 0 0 1 207.592727 25.879272l0.139636 4.840728a106.077091 106.077091 0 0 1-207.732363 30.347636h-88.901818a221.882182 221.882182 0 0 1-212.526546-158.021818h1.070546a107.054545 107.054545 0 0 1-107.054546-107.054546V463.592727a107.054545 107.054545 0 0 1 101.469091-106.961454A412.532364 412.532364 0 0 1 512 7.261091z m0 856.622545a44.962909 44.962909 0 0 0-44.869818 41.751273l-0.093091 3.584a44.962909 44.962909 0 0 0 89.832727 3.211636l0.093091-3.584A44.962909 44.962909 0 0 0 512 863.883636z m412.346182-445.067636v1.489455h-61.067637v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273v210.850909c0 25.367273 20.619636 45.940364 45.986909 45.940363h40.401455a45.986909 45.986909 0 0 0 45.986909-45.986909V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727zM64 463.592727v210.850909c0 21.829818 15.266909 40.122182 35.700364 44.823273l-0.046546-1.536h61.067637l0.046545 1.489455a45.986909 45.986909 0 0 0 35.607273-44.823273V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727v1.489455H99.653818v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dianhua */}
|
||||
{ name === 'icon-zixun' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 7.261091a412.485818 412.485818 0 0 1 407.598545 349.463273l-5.585454-0.186182a107.054545 107.054545 0 0 1 107.054545 107.054545v210.850909a107.054545 107.054545 0 0 1-107.054545 107.054546h-40.401455a107.054545 107.054545 0 0 1-107.054545-107.054546V463.592727c0-53.713455 39.563636-98.210909 91.229091-105.890909a351.278545 351.278545 0 0 0-691.665455 0.093091A107.008 107.008 0 0 1 257.489455 463.592727v210.850909a107.101091 107.101091 0 0 1-84.48 104.680728 160.581818 160.581818 0 0 0 148.48 99.328h88.901818a106.123636 106.123636 0 0 1 207.592727 25.879272l0.139636 4.840728a106.077091 106.077091 0 0 1-207.732363 30.347636h-88.901818a221.882182 221.882182 0 0 1-212.526546-158.021818h1.070546a107.054545 107.054545 0 0 1-107.054546-107.054546V463.592727a107.054545 107.054545 0 0 1 101.469091-106.961454A412.532364 412.532364 0 0 1 512 7.261091z m0 856.622545a44.962909 44.962909 0 0 0-44.869818 41.751273l-0.093091 3.584a44.962909 44.962909 0 0 0 89.832727 3.211636l0.093091-3.584A44.962909 44.962909 0 0 0 512 863.883636z m412.346182-445.067636v1.489455h-61.067637v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273v210.850909c0 25.367273 20.619636 45.940364 45.986909 45.940363h40.401455a45.986909 45.986909 0 0 0 45.986909-45.986909V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727zM64 463.592727v210.850909c0 21.829818 15.266909 40.122182 35.700364 44.823273l-0.046546-1.536h61.067637l0.046545 1.489455a45.986909 45.986909 0 0 0 35.607273-44.823273V463.592727a45.986909 45.986909 0 0 0-35.653818-44.776727v1.489455H99.653818v-1.489455a45.986909 45.986909 0 0 0-35.653818 44.823273z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-dianhua */}
|
||||
|
||||
{ name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M938.461867 771.925333a59.255467 59.255467 0 0 1 0 83.694934l-41.847467 41.847466c-30.9248 30.9248-71.611733 49.7664-120.9344 55.978667a293.410133 293.410133 0 0 1-36.864 2.286933c-35.84 0-74.581333-6.075733-115.541333-18.090666-111.274667-32.699733-228.2496-106.461867-329.352534-207.5648-101.102933-101.137067-174.865067-218.112-207.530666-329.352534-16.2816-55.3984-21.640533-106.7008-15.872-152.405333 6.2464-49.288533 25.088-89.975467 55.978666-120.900267l41.8816-41.847466a59.255467 59.255467 0 0 1 83.694934 0l184.149333 184.149333a59.255467 59.255467 0 0 1 0 83.694933l-41.847467 41.847467c-23.688533 23.6544-0.1024 100.352 66.9696 167.389867 67.072 67.072 143.701333 90.658133 167.389867 66.9696l41.8816-41.847467a59.255467 59.255467 0 0 1 83.694933 0l184.149334 184.149333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-peibu */}
|
||||
{ name === 'icon-dianhua' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M938.461867 771.925333a59.255467 59.255467 0 0 1 0 83.694934l-41.847467 41.847466c-30.9248 30.9248-71.611733 49.7664-120.9344 55.978667a293.410133 293.410133 0 0 1-36.864 2.286933c-35.84 0-74.581333-6.075733-115.541333-18.090666-111.274667-32.699733-228.2496-106.461867-329.352534-207.5648-101.102933-101.137067-174.865067-218.112-207.530666-329.352534-16.2816-55.3984-21.640533-106.7008-15.872-152.405333 6.2464-49.288533 25.088-89.975467 55.978666-120.900267l41.8816-41.847466a59.255467 59.255467 0 0 1 83.694934 0l184.149333 184.149333a59.255467 59.255467 0 0 1 0 83.694933l-41.847467 41.847467c-23.688533 23.6544-0.1024 100.352 66.9696 167.389867 67.072 67.072 143.701333 90.658133 167.389867 66.9696l41.8816-41.847467a59.255467 59.255467 0 0 1 83.694933 0l184.149334 184.149333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-peibu */}
|
||||
|
||||
{ name === 'icon-peibu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M336 96c77.504 0 142.144 55.12 156.864 128.288L492.8 224H832a80 80 0 0 1 80 80v544a80 80 0 0 1-80 80H384a80.16 80.16 0 0 1-19.84-2.48l1.072-0.192c-8.048 1.488-16.32 2.384-24.752 2.608L336 928h-64c-88.368 0-160-71.632-160-160V256c0-88.368 71.632-160 160-160h64z m160 191.984V768c0 35.952-11.84 69.12-31.872 95.84L464 864h368a16 16 0 0 0 15.888-14.128L848 848V304a16 16 0 0 0-14.128-15.888L832 288l-336-0.016zM336 672h-64a96 96 0 0 0-3.6 191.936L272 864h64a96 96 0 0 0 3.6-191.936L336 672z m0-512h-64a96 96 0 0 0-95.936 92.4L176 256v384a159.296 159.296 0 0 1 96-32h64c36.032 0 69.28 11.904 96 32V256a96 96 0 0 0-92.4-95.936L336 160z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zhankai1 */}
|
||||
{ name === 'icon-peibu' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M336 96c77.504 0 142.144 55.12 156.864 128.288L492.8 224H832a80 80 0 0 1 80 80v544a80 80 0 0 1-80 80H384a80.16 80.16 0 0 1-19.84-2.48l1.072-0.192c-8.048 1.488-16.32 2.384-24.752 2.608L336 928h-64c-88.368 0-160-71.632-160-160V256c0-88.368 71.632-160 160-160h64z m160 191.984V768c0 35.952-11.84 69.12-31.872 95.84L464 864h368a16 16 0 0 0 15.888-14.128L848 848V304a16 16 0 0 0-14.128-15.888L832 288l-336-0.016zM336 672h-64a96 96 0 0 0-3.6 191.936L272 864h64a96 96 0 0 0 3.6-191.936L336 672z m0-512h-64a96 96 0 0 0-95.936 92.4L176 256v384a159.296 159.296 0 0 1 96-32h64c36.032 0 69.28 11.904 96 32V256a96 96 0 0 0-92.4-95.936L336 160z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-zhankai1 */}
|
||||
|
||||
{ name === 'icon-zhankai1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 954.181818L1442.909091 46.545455H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi1 */}
|
||||
{ name === 'icon-zhankai1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 954.181818L1442.909091 46.545455H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouqi1 */}
|
||||
|
||||
{ name === 'icon-shouqi1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 69.818182l698.181818 907.636363H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouhou1 */}
|
||||
{ name === 'icon-shouqi1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 69.818182l698.181818 907.636363H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouhou1 */}
|
||||
|
||||
{ name === 'icon-shouhou1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M563.584 256C694.144 256 800 361.84 800 492.416v23.168C800 646.144 694.16 752 563.584 752H256l72.64-65.92A235.728 235.728 0 0 1 256 515.6v-23.168C256 361.856 361.84 256 492.416 256h71.168z m-109.76 198.4a49.52 49.52 0 0 0-49.456 49.6c0 27.392 22.144 49.6 49.44 49.6a49.52 49.52 0 0 0 49.472-49.6c0-27.392-22.144-49.6-49.456-49.6z m148.352 0a49.52 49.52 0 0 0-49.44 49.6c0 27.392 22.128 49.6 49.44 49.6a49.52 49.52 0 0 0 49.456-49.6c0-27.392-22.144-49.6-49.44-49.6z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' opacity='.95' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-cangku1 */}
|
||||
{ name === 'icon-shouhou1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M563.584 256C694.144 256 800 361.84 800 492.416v23.168C800 646.144 694.16 752 563.584 752H256l72.64-65.92A235.728 235.728 0 0 1 256 515.6v-23.168C256 361.856 361.84 256 492.416 256h71.168z m-109.76 198.4a49.52 49.52 0 0 0-49.456 49.6c0 27.392 22.144 49.6 49.44 49.6a49.52 49.52 0 0 0 49.472-49.6c0-27.392-22.144-49.6-49.456-49.6z m148.352 0a49.52 49.52 0 0 0-49.44 49.6c0 27.392 22.128 49.6 49.44 49.6a49.52 49.52 0 0 0 49.456-49.6c0-27.392-22.144-49.6-49.44-49.6z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' opacity='.95' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-cangku1 */}
|
||||
|
||||
{ name === 'icon-cangku1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M565.6 251.968l2.96 2.64 2.432 2.352 231.664 233.248c11.632 11.712 11.68 27.536 3.952 43.904a20 20 0 0 1-16 11.344l-2.08 0.112H754.4V738.56a43.424 43.424 0 0 1-38.56 43.152l-2.72 0.224-2.096 0.048H313.2a43.408 43.408 0 0 1-43.312-40.784l-0.08-2.64-0.016-193.024h-34.032a20 20 0 0 1-16.208-8.256l-1.152-1.792-0.752-1.456c-7.024-14.992-8.176-28.96 0.24-41.056l1.824-2.4 1.792-1.936 230.368-231.952a83.824 83.824 0 0 1 113.712-4.736zM576.976 592h-129.984a25.008 25.008 0 0 0 0 50h130a25.008 25.008 0 0 0 0-50z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-saoma */}
|
||||
{ name === 'icon-cangku1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M565.6 251.968l2.96 2.64 2.432 2.352 231.664 233.248c11.632 11.712 11.68 27.536 3.952 43.904a20 20 0 0 1-16 11.344l-2.08 0.112H754.4V738.56a43.424 43.424 0 0 1-38.56 43.152l-2.72 0.224-2.096 0.048H313.2a43.408 43.408 0 0 1-43.312-40.784l-0.08-2.64-0.016-193.024h-34.032a20 20 0 0 1-16.208-8.256l-1.152-1.792-0.752-1.456c-7.024-14.992-8.176-28.96 0.24-41.056l1.824-2.4 1.792-1.936 230.368-231.952a83.824 83.824 0 0 1 113.712-4.736zM576.976 592h-129.984a25.008 25.008 0 0 0 0 50h130a25.008 25.008 0 0 0 0-50z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-saoma */}
|
||||
|
||||
{ name === 'icon-saoma' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(89,102,247)'}' /%3E%3Cpath d='M302 592v130h129.984l0.016 40h-150c-11.04 0-20-8.96-20-20V592h40z m460 0v150c0 11.04-8.96 20-20 20H592v-40h130V592h40z m0-100v40h-500v-40h500z m-20-230c11.04 0 20 8.96 20 20V432h-40v-130H592v-40h150z m-310 0v40h-130V432h-40v-150c0-11.04 8.96-20 20-20H432z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dizhi1 */}
|
||||
{ name === 'icon-saoma' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(89,102,247)'}' /%3E%3Cpath d='M302 592v130h129.984l0.016 40h-150c-11.04 0-20-8.96-20-20V592h40z m460 0v150c0 11.04-8.96 20-20 20H592v-40h130V592h40z m0-100v40h-500v-40h500z m-20-230c11.04 0 20 8.96 20 20V432h-40v-130H592v-40h150z m-310 0v40h-130V432h-40v-150c0-11.04 8.96-20 20-20H432z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-dizhi1 */}
|
||||
|
||||
{ name === 'icon-dizhi1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M512 222c127.04 0 230 102.976 230 230 0 51.2-25.28 110.896-75.328 180.928l-3.536 4.896-3.648 4.976-6.512 8.704-6.816 8.912-7.04 8.96-7.28 9.056-7.52 9.152-7.728 9.216-4.016 4.736-10.176 11.744-2.128 2.432-8.512 9.584-8.736 9.696-9.008 9.792-9.232 9.92-9.488 10.016-9.28 9.648-19.232 21.12a20 20 0 0 1-28.4 1.168l-1.168-1.184-18.88-20.72-9.728-10.144-9.488-10.016-9.248-9.92-8.992-9.808-8.72-9.648-4.32-4.864-8.4-9.536-10.08-11.712-9.808-11.68-7.52-9.168-7.296-9.056-6.992-8.928-3.44-4.448-3.392-4.464-6.48-8.656c-54.768-74.24-82.432-137.12-82.432-190.704 0-127.04 102.976-230 230-230z m0 140a90 90 0 1 0 0 180 90 90 0 0 0 0-180z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-huodaofukuan */}
|
||||
{ name === 'icon-dizhi1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M512 222c127.04 0 230 102.976 230 230 0 51.2-25.28 110.896-75.328 180.928l-3.536 4.896-3.648 4.976-6.512 8.704-6.816 8.912-7.04 8.96-7.28 9.056-7.52 9.152-7.728 9.216-4.016 4.736-10.176 11.744-2.128 2.432-8.512 9.584-8.736 9.696-9.008 9.792-9.232 9.92-9.488 10.016-9.28 9.648-19.232 21.12a20 20 0 0 1-28.4 1.168l-1.168-1.184-18.88-20.72-9.728-10.144-9.488-10.016-9.248-9.92-8.992-9.808-8.72-9.648-4.32-4.864-8.4-9.536-10.08-11.712-9.808-11.68-7.52-9.168-7.296-9.056-6.992-8.928-3.44-4.448-3.392-4.464-6.48-8.656c-54.768-74.24-82.432-137.12-82.432-190.704 0-127.04 102.976-230 230-230z m0 140a90 90 0 1 0 0 180 90 90 0 0 0 0-180z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-huodaofukuan */}
|
||||
|
||||
{ name === 'icon-huodaofukuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M224 400m32 0l512 0q32 0 32 32l0 304q0 32-32 32l-512 0q-32 0-32-32l0-304q0-32 32-32Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M320.48 240h383.04a32 32 0 0 1 26.048 13.408l52.368 73.28A16 16 0 0 1 768.912 352H255.088a16 16 0 0 1-13.024-25.296l52.368-73.296A32 32 0 0 1 320.464 240z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M461.728 485.008l1.36 1.248L512 535.168l48.912-48.912a21.328 21.328 0 0 1 31.424 28.8l-1.248 1.36L563.488 544h23.184a21.328 21.328 0 0 1 0 42.672l-53.344-0.016v32h53.344a21.328 21.328 0 1 1 0 42.672h-53.344v21.344a21.328 21.328 0 1 1-42.656 0l-0.016-21.344h-53.328a21.328 21.328 0 1 1 0-42.656l53.328-0.016v-32h-53.328a21.328 21.328 0 0 1 0-42.656h23.168l-27.584-27.584a21.328 21.328 0 0 1 28.816-31.408z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(74,127,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yufukuan1 */}
|
||||
{ name === 'icon-huodaofukuan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M224 400m32 0l512 0q32 0 32 32l0 304q0 32-32 32l-512 0q-32 0-32-32l0-304q0-32 32-32Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M320.48 240h383.04a32 32 0 0 1 26.048 13.408l52.368 73.28A16 16 0 0 1 768.912 352H255.088a16 16 0 0 1-13.024-25.296l52.368-73.296A32 32 0 0 1 320.464 240z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M461.728 485.008l1.36 1.248L512 535.168l48.912-48.912a21.328 21.328 0 0 1 31.424 28.8l-1.248 1.36L563.488 544h23.184a21.328 21.328 0 0 1 0 42.672l-53.344-0.016v32h53.344a21.328 21.328 0 1 1 0 42.672h-53.344v21.344a21.328 21.328 0 1 1-42.656 0l-0.016-21.344h-53.328a21.328 21.328 0 1 1 0-42.656l53.328-0.016v-32h-53.328a21.328 21.328 0 0 1 0-42.656h23.168l-27.584-27.584a21.328 21.328 0 0 1 28.816-31.408z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(74,127,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yufukuan1 */}
|
||||
|
||||
{ name === 'icon-yufukuan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M762 422c11.04 0 20 8.96 20 20v300c0 11.04-8.96 20-20 20h-500c-11.04 0-20-8.96-20-20v-300c0-11.04 8.96-20 20-20h500zM512 622H352a10 10 0 0 0-10 10v20c0 5.52 4.48 10 10 10h160c5.52 0 10-4.48 10-10V632a10 10 0 0 0-10-10z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M404.96 223.872l322.384 119.36a20 20 0 0 1-6.944 38.768H325.392a20 20 0 0 1-17.632-29.44l63.04-117.792c5.808-10.848 21.12-15.728 34.16-10.896z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' opacity='.7' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yue */}
|
||||
{ name === 'icon-yufukuan1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M762 422c11.04 0 20 8.96 20 20v300c0 11.04-8.96 20-20 20h-500c-11.04 0-20-8.96-20-20v-300c0-11.04 8.96-20 20-20h500zM512 622H352a10 10 0 0 0-10 10v20c0 5.52 4.48 10 10 10h160c5.52 0 10-4.48 10-10V632a10 10 0 0 0-10-10z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M404.96 223.872l322.384 119.36a20 20 0 0 1-6.944 38.768H325.392a20 20 0 0 1-17.632-29.44l63.04-117.792c5.808-10.848 21.12-15.728 34.16-10.896z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' opacity='.7' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yue */}
|
||||
|
||||
{ name === 'icon-yue' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(252,168,70)'}' /%3E%3Cpath d='M772 402c5.52 0 10 4.48 10 10V752c0 5.52-4.48 10-10 10H252A10 10 0 0 1 242 752V412c0-5.52 4.48-10 10-10h520z m-185.856 85.856a20 20 0 0 0-28.288 0L512 533.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V672a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H532v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M262 292m10 0l480 0q10 0 10 10l0 40q0 10-10 10l-480 0q-10 0-10-10l0-40q0-10 10-10Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zidingyi */}
|
||||
{ name === 'icon-yue' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(252,168,70)'}' /%3E%3Cpath d='M772 402c5.52 0 10 4.48 10 10V752c0 5.52-4.48 10-10 10H252A10 10 0 0 1 242 752V412c0-5.52 4.48-10 10-10h520z m-185.856 85.856a20 20 0 0 0-28.288 0L512 533.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V672a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H532v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M262 292m10 0l480 0q10 0 10 10l0 40q0 10-10 10l-480 0q-10 0-10-10l0-40q0-10 10-10Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-zidingyi */}
|
||||
|
||||
{ name === 'icon-zidingyi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M497.12 695.84l-115.824 60.88a32 32 0 0 1-46.432-33.744l22.128-128.96a32 32 0 0 0-9.216-28.32l-93.68-91.328a32 32 0 0 1 17.728-54.576l129.488-18.816a32 32 0 0 0 24.08-17.504l57.92-117.328a32 32 0 0 1 57.376 0l57.92 117.328a32 32 0 0 0 24.08 17.504l129.488 18.816a32 32 0 0 1 17.728 54.576l-93.68 91.328a32 32 0 0 0-9.216 28.32l22.128 128.96a32 32 0 0 1-46.432 33.744l-115.808-60.896a32 32 0 0 0-29.792 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-jinetiaozheng */}
|
||||
{ name === 'icon-zidingyi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M497.12 695.84l-115.824 60.88a32 32 0 0 1-46.432-33.744l22.128-128.96a32 32 0 0 0-9.216-28.32l-93.68-91.328a32 32 0 0 1 17.728-54.576l129.488-18.816a32 32 0 0 0 24.08-17.504l57.92-117.328a32 32 0 0 1 57.376 0l57.92 117.328a32 32 0 0 0 24.08 17.504l129.488 18.816a32 32 0 0 1 17.728 54.576l-93.68 91.328a32 32 0 0 0-9.216 28.32l22.128 128.96a32 32 0 0 1-46.432 33.744l-115.808-60.896a32 32 0 0 0-29.792 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-jinetiaozheng */}
|
||||
|
||||
{ name === 'icon-jinetiaozheng' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M768 304a32 32 0 0 1 32 32v352a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V336a32 32 0 0 1 32-32h512z m-309.856 119.856a20 20 0 0 0-28.288 0L384 469.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V608a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H404v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008zM560 448h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z m0 112h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tuikuan1 */}
|
||||
{ name === 'icon-jinetiaozheng' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M768 304a32 32 0 0 1 32 32v352a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V336a32 32 0 0 1 32-32h512z m-309.856 119.856a20 20 0 0 0-28.288 0L384 469.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V608a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H404v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008zM560 448h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z m0 112h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-tuikuan1 */}
|
||||
|
||||
{ name === 'icon-tuikuan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M752 416a32 32 0 0 1 32 32v288a32 32 0 0 1-32 32H272a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h480z m-165.856 87.856a20 20 0 0 0-28.288 0L512 549.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V688a20 20 0 1 0 40 0v-20h50a20 20 0 1 0 0-40H532v-30h50a20 20 0 1 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M354.128 253.168a24 24 0 0 1 31.6 36.048l-1.856 1.616-26.816 21.168H720a24 24 0 0 1 23.888 21.696L744 336a24 24 0 0 1-21.696 23.888L720 360H288c-22.032 0-32.08-26.896-16.528-41.424l1.648-1.408 81.008-64z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zhankai */}
|
||||
{ name === 'icon-tuikuan1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M752 416a32 32 0 0 1 32 32v288a32 32 0 0 1-32 32H272a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h480z m-165.856 87.856a20 20 0 0 0-28.288 0L512 549.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V688a20 20 0 1 0 40 0v-20h50a20 20 0 1 0 0-40H532v-30h50a20 20 0 1 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M354.128 253.168a24 24 0 0 1 31.6 36.048l-1.856 1.616-26.816 21.168H720a24 24 0 0 1 23.888 21.696L744 336a24 24 0 0 1-21.696 23.888L720 360H288c-22.032 0-32.08-26.896-16.528-41.424l1.648-1.408 81.008-64z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-zhankai */}
|
||||
|
||||
{ name === 'icon-zhankai' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi */}
|
||||
{ name === 'icon-zhankai' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouqi */}
|
||||
|
||||
{ name === 'icon-shouqi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 355.861333a27.434667 27.434667 0 0 1 36.416-2.133333l2.389333 2.133333 232.746667 232.746667a27.434667 27.434667 0 0 1-36.394667 40.917333l-2.389333-2.133333-213.397334-213.333333-213.312 213.333333c-9.941333 9.941333-25.621333 10.666667-36.394666 2.133333l-2.389334-2.133333a27.434667 27.434667 0 0 1-2.133333-36.394667l2.133333-2.389333 232.746667-232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-lujing */}
|
||||
{ name === 'icon-shouqi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 355.861333a27.434667 27.434667 0 0 1 36.416-2.133333l2.389333 2.133333 232.746667 232.746667a27.434667 27.434667 0 0 1-36.394667 40.917333l-2.389333-2.133333-213.397334-213.333333-213.312 213.333333c-9.941333 9.941333-25.621333 10.666667-36.394666 2.133333l-2.389334-2.133333a27.434667 27.434667 0 0 1-2.133333-36.394667l2.133333-2.389333 232.746667-232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-lujing */}
|
||||
|
||||
{ name === 'icon-lujing' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1450 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M495.06688 1024a44.672 44.672 0 0 1-31.786667-13.653333L12.080213 549.461333a48.298667 48.298667 0 0 1 0.938667-64.938666 44.373333 44.373333 0 0 1 62.72-2.133334l419.328 428.373334L1375.877547 11.093333a44.330667 44.330667 0 0 1 61.696 2.944c16.682667 17.493333 17.493333 45.354667 1.962666 63.914667l-912.64 931.669333c-8.362667 8.96-19.797333 14.122667-31.829333 14.378667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(64,92,135)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-jizhumima */}
|
||||
{ name === 'icon-lujing' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1450 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M495.06688 1024a44.672 44.672 0 0 1-31.786667-13.653333L12.080213 549.461333a48.298667 48.298667 0 0 1 0.938667-64.938666 44.373333 44.373333 0 0 1 62.72-2.133334l419.328 428.373334L1375.877547 11.093333a44.330667 44.330667 0 0 1 61.696 2.944c16.682667 17.493333 17.493333 45.354667 1.962666 63.914667l-912.64 931.669333c-8.362667 8.96-19.797333 14.122667-31.829333 14.378667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(64,92,135)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-jizhumima */}
|
||||
|
||||
{ name === 'icon-jizhumima' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M36.571429 36.571429m146.285714 0l658.285714 0q146.285714 0 146.285714 146.285714l0 658.285714q0 146.285714-146.285714 146.285714l-658.285714 0q-146.285714 0-146.285714-146.285714l0-658.285714q0-146.285714 146.285714-146.285714Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}' /%3E%3Cpath d='M722.358857 262.144a54.857143 54.857143 0 0 1 93.988572 56.32l-2.706286 4.534857-292.571429 438.857143a54.857143 54.857143 0 0 1-80.457143 11.995429l-3.986285-3.657143-219.428572-219.428572a54.857143 54.857143 0 0 1 73.435429-81.334857l4.169143 3.766857 172.068571 172.105143 255.488-383.158857z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-a-jizhumima */}
|
||||
{ name === 'icon-jizhumima' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M36.571429 36.571429m146.285714 0l658.285714 0q146.285714 0 146.285714 146.285714l0 658.285714q0 146.285714-146.285714 146.285714l-658.285714 0q-146.285714 0-146.285714-146.285714l0-658.285714q0-146.285714 146.285714-146.285714Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}' /%3E%3Cpath d='M722.358857 262.144a54.857143 54.857143 0 0 1 93.988572 56.32l-2.706286 4.534857-292.571429 438.857143a54.857143 54.857143 0 0 1-80.457143 11.995429l-3.986285-3.657143-219.428572-219.428572a54.857143 54.857143 0 0 1 73.435429-81.334857l4.169143 3.766857 172.068571 172.105143 255.488-383.158857z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-a-jizhumima */}
|
||||
|
||||
{ name === 'icon-a-jizhumima' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1152 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M944.128 74.752a96 96 0 0 1 164.48 98.56l-4.736 7.936-512 768a96 96 0 0 1-140.8 20.992l-6.976-6.4-384-384a96 96 0 0 1 128.512-142.336l7.296 6.592 301.12 301.184 447.104-670.528z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-weixindenglu */}
|
||||
{ name === 'icon-a-jizhumima' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1152 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M944.128 74.752a96 96 0 0 1 164.48 98.56l-4.736 7.936-512 768a96 96 0 0 1-140.8 20.992l-6.976-6.4-384-384a96 96 0 0 1 128.512-142.336l7.296 6.592 301.12 301.184 447.104-670.528z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-weixindenglu */}
|
||||
|
||||
{ name === 'icon-weixindenglu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(11,189,99)'}' opacity='.9' /%3E%3Cpath d='M622.677333 425.102222c7.210667 0 14.279111 0.540444 21.404445 1.336889C624.910222 336.782222 529.521778 270.222222 420.593778 270.222222 298.851556 270.222222 199.111111 353.536 199.111111 459.377778c0 61.084444 33.166222 111.246222 88.618667 150.215111l-22.129778 66.887111 77.44-38.968889c27.690667 5.461333 49.905778 11.121778 77.553778 11.121778 6.968889 0 13.852444-0.312889 20.650666-0.824889a167.409778 167.409778 0 0 1-6.840888-46.648889c0.042667-97.194667 83.114667-176.071111 188.273777-176.071111z m-119.04-60.302222c16.739556 0 27.733333 11.036444 27.733334 27.776 0 16.654222-11.008 27.804444-27.733334 27.804444-16.554667 0-33.208889-11.150222-33.208889-27.804444 0-16.782222 16.625778-27.776 33.208889-27.776z m-155.008 55.580444c-16.611556 0-33.351111-11.150222-33.351111-27.804444 0-16.739556 16.739556-27.776 33.351111-27.776 16.625778 0 27.662222 11.008 27.662223 27.776 0 16.654222-11.036444 27.804444-27.662223 27.804444zM824.888889 598.471111c0-88.917333-88.618667-161.393778-188.16-161.393778-105.415111 0-188.359111 72.504889-188.359111 161.393778 0 89.173333 82.986667 161.408 188.359111 161.408 22.044444 0 44.316444-5.546667 66.446222-11.121778L763.904 782.222222l-16.64-55.608889C791.708444 693.048889 824.888889 648.618667 824.888889 598.471111z m-249.258667-27.847111c-10.993778 0-22.129778-10.993778-22.129778-22.229333 0-11.079111 11.136-22.229333 22.129778-22.229334 16.824889 0 27.733333 11.150222 27.733334 22.229334 0 11.235556-10.908444 22.229333-27.733334 22.229333z m121.841778 0c-10.922667 0-22.030222-10.993778-22.030222-22.229333 0-11.079111 11.064889-22.229333 22.016-22.229334 16.668444 0 27.733333 11.150222 27.733333 22.229334 0 11.235556-11.064889 22.229333-27.733333 22.229333z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-kehuxinxi */}
|
||||
{ name === 'icon-weixindenglu' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(11,189,99)'}' opacity='.9' /%3E%3Cpath d='M622.677333 425.102222c7.210667 0 14.279111 0.540444 21.404445 1.336889C624.910222 336.782222 529.521778 270.222222 420.593778 270.222222 298.851556 270.222222 199.111111 353.536 199.111111 459.377778c0 61.084444 33.166222 111.246222 88.618667 150.215111l-22.129778 66.887111 77.44-38.968889c27.690667 5.461333 49.905778 11.121778 77.553778 11.121778 6.968889 0 13.852444-0.312889 20.650666-0.824889a167.409778 167.409778 0 0 1-6.840888-46.648889c0.042667-97.194667 83.114667-176.071111 188.273777-176.071111z m-119.04-60.302222c16.739556 0 27.733333 11.036444 27.733334 27.776 0 16.654222-11.008 27.804444-27.733334 27.804444-16.554667 0-33.208889-11.150222-33.208889-27.804444 0-16.782222 16.625778-27.776 33.208889-27.776z m-155.008 55.580444c-16.611556 0-33.351111-11.150222-33.351111-27.804444 0-16.739556 16.739556-27.776 33.351111-27.776 16.625778 0 27.662222 11.008 27.662223 27.776 0 16.654222-11.036444 27.804444-27.662223 27.804444zM824.888889 598.471111c0-88.917333-88.618667-161.393778-188.16-161.393778-105.415111 0-188.359111 72.504889-188.359111 161.393778 0 89.173333 82.986667 161.408 188.359111 161.408 22.044444 0 44.316444-5.546667 66.446222-11.121778L763.904 782.222222l-16.64-55.608889C791.708444 693.048889 824.888889 648.618667 824.888889 598.471111z m-249.258667-27.847111c-10.993778 0-22.129778-10.993778-22.129778-22.229333 0-11.079111 11.136-22.229333 22.129778-22.229334 16.824889 0 27.733333 11.150222 27.733334 22.229334 0 11.235556-10.908444 22.229333-27.733334 22.229333z m121.841778 0c-10.922667 0-22.030222-10.993778-22.030222-22.229333 0-11.079111 11.064889-22.229333 22.016-22.229334 16.668444 0 27.733333 11.150222 27.733333 22.229334 0 11.235556-11.064889 22.229333-27.733333 22.229333z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-kehuxinxi */}
|
||||
|
||||
{ name === 'icon-kehuxinxi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M611.008 136c105.744 0 191.472 86.496 191.472 193.2 0 84.128-53.296 155.696-127.68 182.208C828.192 539.68 944 667.856 944 821.76a70.24 70.24 0 0 1-70.24 70.256l-78.624 0.016a81.664 81.664 0 0 0 4.864-27.84c0-166.08-107.52-306.464-255.248-352.336l0.192-0.016-0.48-0.08a350.88 350.88 0 0 0-34.592-8.8l2.48 0.512-2.24-0.608c89.92-29.44 154.88-114.064 154.88-213.856 0-59.04-22.72-112.752-59.92-152.896 1.952-0.064 3.936-0.096 5.92-0.096z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M440 64c124.272 0 225.008 100.736 225.008 225.008 0 99.872-65.088 184.544-155.136 213.92C675.248 536.224 800 685.28 800 864.192a81.824 81.824 0 0 1-81.824 81.824H161.824a81.824 81.824 0 0 1-81.76-78.352L80 864.16c0-178.88 124.752-327.984 290.128-361.248-90.048-29.376-155.12-114.048-155.12-213.92C215.008 164.736 315.728 64 440 64z m-0.096 442.416l-48.16 233.952c-1.072 5.184 0.208 10.592 3.488 14.752l30.528 38.8a18 18 0 0 0 28.288 0l30.544-38.8c3.264-4.16 4.544-9.568 3.472-14.752l-48.16-233.952z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yewuyuanqizi */}
|
||||
{ name === 'icon-kehuxinxi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M611.008 136c105.744 0 191.472 86.496 191.472 193.2 0 84.128-53.296 155.696-127.68 182.208C828.192 539.68 944 667.856 944 821.76a70.24 70.24 0 0 1-70.24 70.256l-78.624 0.016a81.664 81.664 0 0 0 4.864-27.84c0-166.08-107.52-306.464-255.248-352.336l0.192-0.016-0.48-0.08a350.88 350.88 0 0 0-34.592-8.8l2.48 0.512-2.24-0.608c89.92-29.44 154.88-114.064 154.88-213.856 0-59.04-22.72-112.752-59.92-152.896 1.952-0.064 3.936-0.096 5.92-0.096z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M440 64c124.272 0 225.008 100.736 225.008 225.008 0 99.872-65.088 184.544-155.136 213.92C675.248 536.224 800 685.28 800 864.192a81.824 81.824 0 0 1-81.824 81.824H161.824a81.824 81.824 0 0 1-81.76-78.352L80 864.16c0-178.88 124.752-327.984 290.128-361.248-90.048-29.376-155.12-114.048-155.12-213.92C215.008 164.736 315.728 64 440 64z m-0.096 442.416l-48.16 233.952c-1.072 5.184 0.208 10.592 3.488 14.752l30.528 38.8a18 18 0 0 0 28.288 0l30.544-38.8c3.264-4.16 4.544-9.568 3.472-14.752l-48.16-233.952z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yewuyuanqizi */}
|
||||
|
||||
{ name === 'icon-yewuyuanqizi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M597.333333 256h213.333334v384h-298.666667l-42.666667-85.333333H298.666667v298.666666H213.333333V170.666667h341.333334l42.666666 85.333333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(246,249,252)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-chakanquanbukehu */}
|
||||
{ name === 'icon-yewuyuanqizi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M597.333333 256h213.333334v384h-298.666667l-42.666667-85.333333H298.666667v298.666666H213.333333V170.666667h341.333334l42.666666 85.333333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(246,249,252)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-chakanquanbukehu */}
|
||||
|
||||
{ name === 'icon-chakanquanbukehu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M668.16 492.608c9.92 9.92 10.624 25.6 2.112 36.384l-2.144 2.4-232.736 232.736a27.424 27.424 0 0 1-40.928-36.384l2.144-2.4 213.344-213.376-213.344-213.312a27.424 27.424 0 0 1-2.144-36.384l2.144-2.4a27.424 27.424 0 0 1 36.384-2.144l2.4 2.144 232.736 232.736z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-biyan */}
|
||||
{ name === 'icon-chakanquanbukehu' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M668.16 492.608c9.92 9.92 10.624 25.6 2.112 36.384l-2.144 2.4-232.736 232.736a27.424 27.424 0 0 1-40.928-36.384l2.144-2.4 213.344-213.376-213.344-213.312a27.424 27.424 0 0 1-2.144-36.384l2.144-2.4a27.424 27.424 0 0 1 36.384-2.144l2.4 2.144 232.736 232.736z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-biyan */}
|
||||
|
||||
{ name === 'icon-biyan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M504 384.24l166.4-166.4a96 96 0 0 1 143.504 127.04c41.616 38.096 83.136 84.176 124.528 138.24l0.048-0.048a48 48 0 0 1 0.272 57.968C800.848 724.352 658.912 816 512.944 816c-46.832 0-93.792-9.44-140.896-28.288l90.224-90.208c15.856 4.24 32.528 6.496 49.728 6.496 106.032 0 192-85.968 192-192 0-17.2-2.256-33.872-6.496-49.728l-57.76 57.728-0.32 4.08a128.032 128.032 0 0 1-119.424 115.68l-166.4 166.4a96 96 0 0 1-146.4-123.136l-0.288 0.4c-44.8-38.56-89.744-85.552-134.8-140.976a48 48 0 0 1 0.272-60.8C223.296 299.232 370.144 208 512.944 208c46.304 0 92.48 9.6 138.496 28.784l-89.712 89.712A192.256 192.256 0 0 0 512 320c-106.032 0-192 85.968-192 192 0 17.2 2.256 33.872 6.496 49.728l57.76-57.728a128.016 128.016 0 0 1 119.744-119.76z m213.68-123.008l-2.032 1.872-452.544 452.544a32 32 0 0 0 43.2 47.12l2.048-1.872 452.544-452.544a32 32 0 0 0-43.2-47.12z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-bianji */}
|
||||
{ name === 'icon-biyan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M504 384.24l166.4-166.4a96 96 0 0 1 143.504 127.04c41.616 38.096 83.136 84.176 124.528 138.24l0.048-0.048a48 48 0 0 1 0.272 57.968C800.848 724.352 658.912 816 512.944 816c-46.832 0-93.792-9.44-140.896-28.288l90.224-90.208c15.856 4.24 32.528 6.496 49.728 6.496 106.032 0 192-85.968 192-192 0-17.2-2.256-33.872-6.496-49.728l-57.76 57.728-0.32 4.08a128.032 128.032 0 0 1-119.424 115.68l-166.4 166.4a96 96 0 0 1-146.4-123.136l-0.288 0.4c-44.8-38.56-89.744-85.552-134.8-140.976a48 48 0 0 1 0.272-60.8C223.296 299.232 370.144 208 512.944 208c46.304 0 92.48 9.6 138.496 28.784l-89.712 89.712A192.256 192.256 0 0 0 512 320c-106.032 0-192 85.968-192 192 0 17.2 2.256 33.872 6.496 49.728l57.76-57.728a128.016 128.016 0 0 1 119.744-119.76z m213.68-123.008l-2.032 1.872-452.544 452.544a32 32 0 0 0 43.2 47.12l2.048-1.872 452.544-452.544a32 32 0 0 0-43.2-47.12z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-bianji */}
|
||||
|
||||
{ name === 'icon-bianji' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M480 112a32 32 0 1 1 0 64H176v672h672V576a32 32 0 1 1 64 0v304a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32h336z m454.624-22.624a32 32 0 0 1 1.872 43.216l-1.872 2.032-400 400a32 32 0 0 1-47.12-43.216l1.872-2.032 400-400a32 32 0 0 1 45.248 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-daikuan */}
|
||||
{ name === 'icon-bianji' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M480 112a32 32 0 1 1 0 64H176v672h672V576a32 32 0 1 1 64 0v304a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32h336z m454.624-22.624a32 32 0 0 1 1.872 43.216l-1.872 2.032-400 400a32 32 0 0 1-47.12-43.216l1.872-2.032 400-400a32 32 0 0 1 45.248 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-daikuan */}
|
||||
|
||||
{ name === 'icon-daikuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M704 112a80 80 0 0 1 79.92 76.528L784 192v352c0 5.488-0.56 10.848-1.6 16.016L848 560a80 80 0 0 1 79.92 76.528L928 640v192a80 80 0 0 1-76.528 79.92L848 912H176a80 80 0 0 1-79.92-76.528L96 832V640a80 80 0 0 1 76.528-79.92L176 560l65.6 0.016a80.096 80.096 0 0 1-1.504-11.92L240 544V192a80 80 0 0 1 76.528-79.92L320 112h384z m144 512H176a16 16 0 0 0-15.888 14.128L160 640v192a16 16 0 0 0 14.128 15.888L176 848h672a16 16 0 0 0 15.888-14.128L864 832V640a16 16 0 0 0-16-16z m-144-448H320a16 16 0 0 0-15.888 14.128L304 192v352a16 16 0 0 0 14.128 15.888L320 560h384a16 16 0 0 0 15.888-14.128L720 544V192a16 16 0 0 0-16-16z m-80 224a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H400a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h224z m0-128a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H400a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-cangku */}
|
||||
{ name === 'icon-daikuan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M704 112a80 80 0 0 1 79.92 76.528L784 192v352c0 5.488-0.56 10.848-1.6 16.016L848 560a80 80 0 0 1 79.92 76.528L928 640v192a80 80 0 0 1-76.528 79.92L848 912H176a80 80 0 0 1-79.92-76.528L96 832V640a80 80 0 0 1 76.528-79.92L176 560l65.6 0.016a80.096 80.096 0 0 1-1.504-11.92L240 544V192a80 80 0 0 1 76.528-79.92L320 112h384z m144 512H176a16 16 0 0 0-15.888 14.128L160 640v192a16 16 0 0 0 14.128 15.888L176 848h672a16 16 0 0 0 15.888-14.128L864 832V640a16 16 0 0 0-16-16z m-144-448H320a16 16 0 0 0-15.888 14.128L304 192v352a16 16 0 0 0 14.128 15.888L320 560h384a16 16 0 0 0 15.888-14.128L720 544V192a16 16 0 0 0-16-16z m-80 224a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H400a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h224z m0-128a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H400a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-cangku */}
|
||||
|
||||
{ name === 'icon-cangku' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M415.776 103.52c51.104-51.456 133.632-52.768 186.72-3.36l3.888 3.776L977.04 477.12c18.624 18.752 18.72 44.048 6.336 70.24a32 32 0 0 1-28.928 18.32H899.84l0.016 308.816a69.472 69.472 0 0 1-66.08 69.408l-3.36 0.08h-636.48a69.456 69.456 0 0 1-69.44-69.488l-0.032-308.816H70a32 32 0 0 1-27.76-16.08l-1.216-2.352c-11.968-25.584-13.28-49.296 3.312-69.504l2.864-3.12z m140.384 41.072c-27.92-23.456-69.136-21.984-94.976 4.032L110.464 501.696h46a32 32 0 0 1 31.92 29.616l0.08 2.4v340.8c0 3.04 2.464 5.488 5.456 5.488h636.512c2.992 0 5.44-2.448 5.44-5.488v-340.8a32 32 0 0 1 31.984-32l43.392-0.016L561.44 149.472l-2.736-2.64zM616 640a40 40 0 1 1 0 80h-208a40 40 0 1 1 0-80h208z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-guanlidingdan */}
|
||||
{ name === 'icon-cangku' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M415.776 103.52c51.104-51.456 133.632-52.768 186.72-3.36l3.888 3.776L977.04 477.12c18.624 18.752 18.72 44.048 6.336 70.24a32 32 0 0 1-28.928 18.32H899.84l0.016 308.816a69.472 69.472 0 0 1-66.08 69.408l-3.36 0.08h-636.48a69.456 69.456 0 0 1-69.44-69.488l-0.032-308.816H70a32 32 0 0 1-27.76-16.08l-1.216-2.352c-11.968-25.584-13.28-49.296 3.312-69.504l2.864-3.12z m140.384 41.072c-27.92-23.456-69.136-21.984-94.976 4.032L110.464 501.696h46a32 32 0 0 1 31.92 29.616l0.08 2.4v340.8c0 3.04 2.464 5.488 5.456 5.488h636.512c2.992 0 5.44-2.448 5.44-5.488v-340.8a32 32 0 0 1 31.984-32l43.392-0.016L561.44 149.472l-2.736-2.64zM616 640a40 40 0 1 1 0 80h-208a40 40 0 1 1 0-80h208z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-guanlidingdan */}
|
||||
|
||||
{ name === 'icon-guanlidingdan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M800 96a80 80 0 0 1 80 80v672a80 80 0 0 1-80 80H224a80 80 0 0 1-80-80V176a80 80 0 0 1 80-80z m0 64H224a16 16 0 0 0-16 16v672a16 16 0 0 0 16 16h576a16 16 0 0 0 16-16V176a16 16 0 0 0-16-16z m-112 480a32 32 0 1 1 0 64H336a32 32 0 1 1 0-64h352z m0-160a32 32 0 1 1 0 64H336a32 32 0 1 1 0-64h352z m0-160a32 32 0 1 1 0 64H336a32 32 0 1 1 0-64h352z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-mima */}
|
||||
{ name === 'icon-guanlidingdan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M800 96a80 80 0 0 1 80 80v672a80 80 0 0 1-80 80H224a80 80 0 0 1-80-80V176a80 80 0 0 1 80-80z m0 64H224a16 16 0 0 0-16 16v672a16 16 0 0 0 16 16h576a16 16 0 0 0 16-16V176a16 16 0 0 0-16-16z m-112 480a32 32 0 1 1 0 64H336a32 32 0 1 1 0-64h352z m0-160a32 32 0 1 1 0 64H336a32 32 0 1 1 0-64h352z m0-160a32 32 0 1 1 0 64H336a32 32 0 1 1 0-64h352z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-mima */}
|
||||
|
||||
{ name === 'icon-mima' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 112c114.88 0 208 93.12 208 208l0.016 128.16A203.92 203.92 0 0 1 816 621.168V752a144 144 0 0 1-144 144H352a144 144 0 0 1-144-144v-130.832c0-71.744 37.472-136.512 96-173.024V320c0-114.88 93.12-208 208-208z m0 64a144 144 0 0 0-144 144v101.952l1.984-0.48a597.28 597.28 0 0 1 286.016 0.48V320a144 144 0 0 0-144-144z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-guanbi */}
|
||||
{ name === 'icon-mima' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 112c114.88 0 208 93.12 208 208l0.016 128.16A203.92 203.92 0 0 1 816 621.168V752a144 144 0 0 1-144 144H352a144 144 0 0 1-144-144v-130.832c0-71.744 37.472-136.512 96-173.024V320c0-114.88 93.12-208 208-208z m0 64a144 144 0 0 0-144 144v101.952l1.984-0.48a597.28 597.28 0 0 1 286.016 0.48V320a144 144 0 0 0-144-144z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-guanbi */}
|
||||
|
||||
{ name === 'icon-guanbi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M760.896 263.104a32 32 0 0 1 1.632 43.504l-1.632 1.76L557.248 512l203.648 203.648a32 32 0 0 1-43.504 46.88l-1.76-1.632L512 557.248 308.352 760.896a32 32 0 0 1-46.88-43.504l1.632-1.76L466.72 512 263.104 308.352a32 32 0 0 1 43.504-46.88l1.76 1.632L512 466.72l203.648-203.632a32 32 0 0 1 45.248 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-jianshao */}
|
||||
{ name === 'icon-guanbi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M760.896 263.104a32 32 0 0 1 1.632 43.504l-1.632 1.76L557.248 512l203.648 203.648a32 32 0 0 1-43.504 46.88l-1.76-1.632L512 557.248 308.352 760.896a32 32 0 0 1-46.88-43.504l1.632-1.76L466.72 512 263.104 308.352a32 32 0 0 1 43.504-46.88l1.76 1.632L512 466.72l203.648-203.632a32 32 0 0 1 45.248 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-jianshao */}
|
||||
|
||||
{ name === 'icon-jianshao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M256 480m32 0l448 0q32 0 32 32l0 0q0 32-32 32l-448 0q-32 0-32-32l0 0q0-32 32-32Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dingwei */}
|
||||
{ name === 'icon-jianshao' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M256 480m32 0l448 0q32 0 32 32l0 0q0 32-32 32l-448 0q-32 0-32-32l0 0q0-32 32-32Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-dingwei */}
|
||||
|
||||
{ name === 'icon-dingwei' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 48c203.248 0 368 164.752 368 368 0 81.92-40.448 177.44-120.528 289.488l-5.664 7.84-5.824 7.952-10.4 13.936-10.928 14.24-11.264 14.336-11.648 14.496-12.032 14.656-12.368 14.736-6.432 7.568-16.272 18.8-3.408 3.888-13.6 15.328-14 15.52-14.4 15.68-14.784 15.856-15.184 16.032-14.832 15.44-30.784 33.76a32 32 0 0 1-45.424 1.904l-1.872-1.904-30.208-33.152-15.584-16.208-15.168-16.048-14.8-15.872-14.4-15.68-13.92-15.44-6.944-7.776-13.408-15.264-16.16-18.752-15.68-18.672-12.048-14.672-11.648-14.512-11.2-14.256-5.488-7.12-5.44-7.152-10.368-13.856C188.272 602.32 144 501.712 144 416 144 212.752 308.752 48 512 48z m0 64c-167.888 0-304 136.112-304 304 0 67.792 37.376 154.288 113.872 259.6l5.408 7.36 10.064 13.472 5.152 6.768 5.184 6.72 10.816 13.792 11.216 13.952 11.632 14.16 15.168 18.064 3.024 3.536 12.64 14.64 13.104 14.912 6.608 7.408 13.632 15.12 14.064 15.312 14.448 15.52 14.848 15.68 16 16.656 7.12 7.824 7.696-8.432 15.264-15.872 14.848-15.68 14.448-15.52 14.032-15.296 13.648-15.104 19.696-22.304 12.704-14.72 6.096-7.152 12.016-14.336 11.616-14.144 11.216-13.952 10.864-13.824 5.248-6.816 5.088-6.672 10.048-13.44 5.568-7.616C778.672 570.192 816 483.744 816 416c0-167.888-136.112-304-304-304z m0 112c97.2 0 176 78.8 176 176s-78.8 176-176 176-176-78.8-176-176 78.8-176 176-176z m0 64a112 112 0 1 0 0 224 112 112 0 0 0 0-224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-saomiao */}
|
||||
{ name === 'icon-dingwei' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 48c203.248 0 368 164.752 368 368 0 81.92-40.448 177.44-120.528 289.488l-5.664 7.84-5.824 7.952-10.4 13.936-10.928 14.24-11.264 14.336-11.648 14.496-12.032 14.656-12.368 14.736-6.432 7.568-16.272 18.8-3.408 3.888-13.6 15.328-14 15.52-14.4 15.68-14.784 15.856-15.184 16.032-14.832 15.44-30.784 33.76a32 32 0 0 1-45.424 1.904l-1.872-1.904-30.208-33.152-15.584-16.208-15.168-16.048-14.8-15.872-14.4-15.68-13.92-15.44-6.944-7.776-13.408-15.264-16.16-18.752-15.68-18.672-12.048-14.672-11.648-14.512-11.2-14.256-5.488-7.12-5.44-7.152-10.368-13.856C188.272 602.32 144 501.712 144 416 144 212.752 308.752 48 512 48z m0 64c-167.888 0-304 136.112-304 304 0 67.792 37.376 154.288 113.872 259.6l5.408 7.36 10.064 13.472 5.152 6.768 5.184 6.72 10.816 13.792 11.216 13.952 11.632 14.16 15.168 18.064 3.024 3.536 12.64 14.64 13.104 14.912 6.608 7.408 13.632 15.12 14.064 15.312 14.448 15.52 14.848 15.68 16 16.656 7.12 7.824 7.696-8.432 15.264-15.872 14.848-15.68 14.448-15.52 14.032-15.296 13.648-15.104 19.696-22.304 12.704-14.72 6.096-7.152 12.016-14.336 11.616-14.144 11.216-13.952 10.864-13.824 5.248-6.816 5.088-6.672 10.048-13.44 5.568-7.616C778.672 570.192 816 483.744 816 416c0-167.888-136.112-304-304-304z m0 112c97.2 0 176 78.8 176 176s-78.8 176-176 176-176-78.8-176-176 78.8-176 176-176z m0 64a112 112 0 1 0 0 224 112 112 0 0 0 0-224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-saomiao */}
|
||||
|
||||
{ name === 'icon-saomiao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M176 640v208h208v64H144a32 32 0 0 1-32-32V640h64z m736 0v240a32 32 0 0 1-32 32H640v-64h208V640h64z m0-160v64H112v-64h800zM880 112a32 32 0 0 1 32 32v240h-64V176H640V112h240zM384 112v64H176v208H112V144a32 32 0 0 1 32-32h240z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-peihuo */}
|
||||
{ name === 'icon-saomiao' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M176 640v208h208v64H144a32 32 0 0 1-32-32V640h64z m736 0v240a32 32 0 0 1-32 32H640v-64h208V640h64z m0-160v64H112v-64h800zM880 112a32 32 0 0 1 32 32v240h-64V176H640V112h240zM384 112v64H176v208H112V144a32 32 0 0 1 32-32h240z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-peihuo */}
|
||||
|
||||
{ name === 'icon-peihuo' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 96a80 80 0 0 1 80 80v672a80 80 0 0 1-80 80H176a80 80 0 0 1-80-80V176a80 80 0 0 1 80-80z m0 64H176a16 16 0 0 0-16 16v672a16 16 0 0 0 16 16h672a16 16 0 0 0 16-16V176a16 16 0 0 0-16-16z m-383.68 159.68a32 32 0 0 1 1.632 43.488l-1.616 1.76L349.232 480H720a32 32 0 0 1 2.4 63.92L720 544H349.264l115.072 115.072a32 32 0 0 1 1.616 43.52l-1.616 1.744a32 32 0 0 1-43.52 1.616l-1.744-1.616-169.696-169.712a32 32 0 0 1-1.632-43.504l1.632-1.76L419.072 319.68a32 32 0 0 1 45.264 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shaixuan */}
|
||||
{ name === 'icon-peihuo' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 96a80 80 0 0 1 80 80v672a80 80 0 0 1-80 80H176a80 80 0 0 1-80-80V176a80 80 0 0 1 80-80z m0 64H176a16 16 0 0 0-16 16v672a16 16 0 0 0 16 16h672a16 16 0 0 0 16-16V176a16 16 0 0 0-16-16z m-383.68 159.68a32 32 0 0 1 1.632 43.488l-1.616 1.76L349.232 480H720a32 32 0 0 1 2.4 63.92L720 544H349.264l115.072 115.072a32 32 0 0 1 1.616 43.52l-1.616 1.744a32 32 0 0 1-43.52 1.616l-1.744-1.616-169.696-169.712a32 32 0 0 1-1.632-43.504l1.632-1.76L419.072 319.68a32 32 0 0 1 45.264 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shaixuan */}
|
||||
|
||||
{ name === 'icon-shaixuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M631.072 144a48 48 0 0 1 32.56 83.264L496 382v496.704a48 48 0 0 1-45.184 47.92L448 926.72a48 48 0 0 1-29.984-10.512l-128-102.4A48 48 0 0 1 272 776.304V382.016L104.368 227.264a48 48 0 0 1-4.704-65.52l1.984-2.304A48 48 0 0 1 136.928 144z m-40.928 64H177.84l142.72 131.728a48 48 0 0 1 15.328 31.936l0.112 3.344v393.616l96 76.8V375.008a48 48 0 0 1 13.072-32.928l2.368-2.352L590.144 208zM896 752a32 32 0 0 1 2.4 63.92L896 816H640a32 32 0 0 1-2.4-63.92L640 752h256z m0-192a32 32 0 0 1 2.4 63.92L896 624H640a32 32 0 0 1-2.4-63.92L640 560h256z m0-192a32 32 0 0 1 2.4 63.92L896 432H640a32 32 0 0 1-2.4-63.92L640 368h256z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-paiming */}
|
||||
{ name === 'icon-shaixuan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M631.072 144a48 48 0 0 1 32.56 83.264L496 382v496.704a48 48 0 0 1-45.184 47.92L448 926.72a48 48 0 0 1-29.984-10.512l-128-102.4A48 48 0 0 1 272 776.304V382.016L104.368 227.264a48 48 0 0 1-4.704-65.52l1.984-2.304A48 48 0 0 1 136.928 144z m-40.928 64H177.84l142.72 131.728a48 48 0 0 1 15.328 31.936l0.112 3.344v393.616l96 76.8V375.008a48 48 0 0 1 13.072-32.928l2.368-2.352L590.144 208zM896 752a32 32 0 0 1 2.4 63.92L896 816H640a32 32 0 0 1-2.4-63.92L640 752h256z m0-192a32 32 0 0 1 2.4 63.92L896 624H640a32 32 0 0 1-2.4-63.92L640 560h256z m0-192a32 32 0 0 1 2.4 63.92L896 432H640a32 32 0 0 1-2.4-63.92L640 368h256z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-paiming */}
|
||||
|
||||
{ name === 'icon-paiming' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M736 112a80 80 0 0 1 79.92 76.528L816 192v32.88a144.016 144.016 0 0 1-6.672 286.816C782.208 638.848 675.6 736.56 544 750.336L544 896h208a32 32 0 1 1 0 64H272a32 32 0 1 1 0-64l208-0.016v-145.648c-132.272-13.84-239.312-112.496-265.728-240.64C147.008 497.584 96 438.768 96 368a144.048 144.048 0 0 1 112-140.432V192a80 80 0 0 1 76.528-79.92L288 112h448z m0 64H288a16 16 0 0 0-15.888 14.128L272 192v256c0 132.544 107.456 240 240 240 130.88 0 237.28-104.752 239.952-234.976l0.016-2.832v-18.208L752 432v-128H752v-71.808H752V192a16 16 0 0 0-14.128-15.888L736 176z m-245.52 85.376c8.8-17.84 34.24-17.84 43.04 0l36.736 74.432 82.144 11.936c18.992 2.768 26.976 25.36 14.752 39.424l-1.44 1.52-59.456 57.92 14.032 81.84c3.248 18.896-15.776 33.472-32.912 26.192l-1.904-0.896L512 515.104l-73.472 38.64c-16.976 8.928-36.72-4.656-35.088-23.216l0.272-2.08 14.016-81.84-59.44-57.92c-13.728-13.392-6.912-36.368 11.248-40.544l2.064-0.4 82.128-11.936zM512 326.24l-20.8 42.128a24 24 0 0 1-18.08 13.12l-46.496 6.768 33.648 32.8a24 24 0 0 1 7.2 18.656l-0.288 2.592-7.952 46.304 41.6-21.856a24 24 0 0 1 19.952-1.088l2.384 1.088 41.584 21.856-7.936-46.304a24 24 0 0 1 5.136-19.312l1.76-1.92 33.648-32.816-46.496-6.752a24 24 0 0 1-16.928-11.072l-1.136-2.064L512 326.24z m304.016-36.64v156.8a80.032 80.032 0 0 0 0-156.8zM160 368a80.016 80.016 0 0 0 48 73.344v-146.688A80.016 80.016 0 0 0 160 368z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shanchusousuoxinxi */}
|
||||
{ name === 'icon-paiming' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M736 112a80 80 0 0 1 79.92 76.528L816 192v32.88a144.016 144.016 0 0 1-6.672 286.816C782.208 638.848 675.6 736.56 544 750.336L544 896h208a32 32 0 1 1 0 64H272a32 32 0 1 1 0-64l208-0.016v-145.648c-132.272-13.84-239.312-112.496-265.728-240.64C147.008 497.584 96 438.768 96 368a144.048 144.048 0 0 1 112-140.432V192a80 80 0 0 1 76.528-79.92L288 112h448z m0 64H288a16 16 0 0 0-15.888 14.128L272 192v256c0 132.544 107.456 240 240 240 130.88 0 237.28-104.752 239.952-234.976l0.016-2.832v-18.208L752 432v-128H752v-71.808H752V192a16 16 0 0 0-14.128-15.888L736 176z m-245.52 85.376c8.8-17.84 34.24-17.84 43.04 0l36.736 74.432 82.144 11.936c18.992 2.768 26.976 25.36 14.752 39.424l-1.44 1.52-59.456 57.92 14.032 81.84c3.248 18.896-15.776 33.472-32.912 26.192l-1.904-0.896L512 515.104l-73.472 38.64c-16.976 8.928-36.72-4.656-35.088-23.216l0.272-2.08 14.016-81.84-59.44-57.92c-13.728-13.392-6.912-36.368 11.248-40.544l2.064-0.4 82.128-11.936zM512 326.24l-20.8 42.128a24 24 0 0 1-18.08 13.12l-46.496 6.768 33.648 32.8a24 24 0 0 1 7.2 18.656l-0.288 2.592-7.952 46.304 41.6-21.856a24 24 0 0 1 19.952-1.088l2.384 1.088 41.584 21.856-7.936-46.304a24 24 0 0 1 5.136-19.312l1.76-1.92 33.648-32.816-46.496-6.752a24 24 0 0 1-16.928-11.072l-1.136-2.064L512 326.24z m304.016-36.64v156.8a80.032 80.032 0 0 0 0-156.8zM160 368a80.016 80.016 0 0 0 48 73.344v-146.688A80.016 80.016 0 0 0 160 368z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shanchusousuoxinxi */}
|
||||
|
||||
{ name === 'icon-shanchusousuoxinxi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 96c229.76 0 416 186.24 416 416S741.76 928 512 928 96 741.76 96 512 282.24 96 512 96z m-113.136 257.6A32 32 0 1 0 353.6 398.88L466.752 512l-113.136 113.136a32 32 0 0 0-1.872 43.216l1.872 2.032a32 32 0 0 0 45.248 0L512 557.248l113.136 113.136a32 32 0 0 0 43.216 1.872l2.032-1.872a32 32 0 0 0 0-45.248L557.248 512l113.136-113.136a32 32 0 0 0 1.872-43.216L670.4 353.6a32 32 0 0 0-45.248 0L512 466.752z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shijian */}
|
||||
{ name === 'icon-shanchusousuoxinxi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 96c229.76 0 416 186.24 416 416S741.76 928 512 928 96 741.76 96 512 282.24 96 512 96z m-113.136 257.6A32 32 0 1 0 353.6 398.88L466.752 512l-113.136 113.136a32 32 0 0 0-1.872 43.216l1.872 2.032a32 32 0 0 0 45.248 0L512 557.248l113.136 113.136a32 32 0 0 0 43.216 1.872l2.032-1.872a32 32 0 0 0 0-45.248L557.248 512l113.136-113.136a32 32 0 0 0 1.872-43.216L670.4 353.6a32 32 0 0 0-45.248 0L512 466.752z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shijian */}
|
||||
|
||||
{ name === 'icon-shijian' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M384 192v48h256v-48h160v48h112a32 32 0 0 1 32 32v592a32 32 0 0 1-32 32H112a32 32 0 0 1-32-32V272a32 32 0 0 1 32-32h112v-48h160z m496 304H144v336h736V496z m0-192H144v128h736v-128z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-sousuo */}
|
||||
{ name === 'icon-shijian' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M384 192v48h256v-48h160v48h112a32 32 0 0 1 32 32v592a32 32 0 0 1-32 32H112a32 32 0 0 1-32-32V272a32 32 0 0 1 32-32h112v-48h160z m496 304H144v336h736V496z m0-192H144v128h736v-128z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-sousuo */}
|
||||
|
||||
{ name === 'icon-sousuo' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M718.4 243.216c123.584 123.6 130.768 319.52 21.52 451.52l1.104 1.024 135.76 135.776a32 32 0 0 1-45.248 45.248l-135.776-135.76-1.024-1.104c-132 109.248-327.92 102.08-451.52-21.536C112 587.2 112 374.432 243.216 243.216s343.952-131.216 475.168 0z m-45.264 45.248c-106.224-106.208-278.448-106.208-384.672 0-106.208 106.24-106.208 278.448 0 384.672 97.968 97.968 253.408 106.208 360.768 21.28l4.704-3.792 20.064-16.624 16.624-20.064c87.664-105.92 82.096-261.472-13.216-361.12l-4.272-4.352z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouhou */}
|
||||
{ name === 'icon-sousuo' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M718.4 243.216c123.584 123.6 130.768 319.52 21.52 451.52l1.104 1.024 135.76 135.776a32 32 0 0 1-45.248 45.248l-135.776-135.76-1.024-1.104c-132 109.248-327.92 102.08-451.52-21.536C112 587.2 112 374.432 243.216 243.216s343.952-131.216 475.168 0z m-45.264 45.248c-106.224-106.208-278.448-106.208-384.672 0-106.208 106.24-106.208 278.448 0 384.672 97.968 97.968 253.408 106.208 360.768 21.28l4.704-3.792 20.064-16.624 16.624-20.064c87.664-105.92 82.096-261.472-13.216-361.12l-4.272-4.352z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouhou */}
|
||||
|
||||
{ name === 'icon-shouhou' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M112 480a32.256 32.256 0 0 1 9.248 1.36l0.432 0.128a31.712 31.712 0 0 1 14.992 10.128A32 32 0 0 1 144 512c0 203.248 164.752 368 368 368 142.528 0 270.336-81.76 331.392-207.792a32 32 0 1 1 57.6 27.904A431.968 431.968 0 0 1 512 944c-155.584 0-291.952-82.24-368-205.616V784a32 32 0 0 1-63.92 2.4L80 784V512a32 32 0 0 1 32-32z m308.592-152.496l2.032 1.872L512 418.72l89.376-89.36 2.032-1.872a32 32 0 0 1 45.088 45.088l-1.872 2.032L589.248 432H656a32 32 0 1 1 0 64h-112v80h112a32 32 0 1 1 0 64h-112v96a32 32 0 1 1-64 0v-96h-112a32 32 0 1 1 0-64h112v-80h-112a32 32 0 1 1 0-64h66.736l-57.36-57.376a32 32 0 0 1 43.216-47.12z m481.728 215.008l-0.224-0.08a31.76 31.76 0 0 1-16.16-11.872 31.952 31.952 0 0 1-5.856-16.16L880 512C880 308.752 715.248 144 512 144a368.032 368.032 0 0 0-335.424 216.384 32 32 0 1 1-58.304-26.4A432.016 432.016 0 0 1 512 80c155.584 0 291.952 82.24 368.016 205.632L880 240a32 32 0 0 1 63.92-2.4L944 240v272a32 32 0 0 1-29.6 31.92L912 544a32.256 32.256 0 0 1-9.248-1.36l-0.432-0.128z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-sousuofanhui */}
|
||||
{ name === 'icon-shouhou' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M112 480a32.256 32.256 0 0 1 9.248 1.36l0.432 0.128a31.712 31.712 0 0 1 14.992 10.128A32 32 0 0 1 144 512c0 203.248 164.752 368 368 368 142.528 0 270.336-81.76 331.392-207.792a32 32 0 1 1 57.6 27.904A431.968 431.968 0 0 1 512 944c-155.584 0-291.952-82.24-368-205.616V784a32 32 0 0 1-63.92 2.4L80 784V512a32 32 0 0 1 32-32z m308.592-152.496l2.032 1.872L512 418.72l89.376-89.36 2.032-1.872a32 32 0 0 1 45.088 45.088l-1.872 2.032L589.248 432H656a32 32 0 1 1 0 64h-112v80h112a32 32 0 1 1 0 64h-112v96a32 32 0 1 1-64 0v-96h-112a32 32 0 1 1 0-64h112v-80h-112a32 32 0 1 1 0-64h66.736l-57.36-57.376a32 32 0 0 1 43.216-47.12z m481.728 215.008l-0.224-0.08a31.76 31.76 0 0 1-16.16-11.872 31.952 31.952 0 0 1-5.856-16.16L880 512C880 308.752 715.248 144 512 144a368.032 368.032 0 0 0-335.424 216.384 32 32 0 1 1-58.304-26.4A432.016 432.016 0 0 1 512 80c155.584 0 291.952 82.24 368.016 205.632L880 240a32 32 0 0 1 63.92-2.4L944 240v272a32 32 0 0 1-29.6 31.92L912 544a32.256 32.256 0 0 1-9.248-1.36l-0.432-0.128z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-sousuofanhui */}
|
||||
|
||||
{ name === 'icon-sousuofanhui' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M454.16 217.84a32 32 0 0 1 1.616 43.52l-1.616 1.744-216.912 216.88L848 480a32 32 0 0 1 2.4 63.92L848 544H237.248l216.912 216.896a32 32 0 0 1 1.616 43.52l-1.616 1.744a32 32 0 0 1-43.52 1.616l-1.744-1.616-271.52-271.52a32 32 0 0 1-1.632-43.52l1.632-1.76 271.52-271.52a32 32 0 0 1 45.264 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-sousuoshanchu */}
|
||||
{ name === 'icon-sousuofanhui' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M454.16 217.84a32 32 0 0 1 1.616 43.52l-1.616 1.744-216.912 216.88L848 480a32 32 0 0 1 2.4 63.92L848 544H237.248l216.912 216.896a32 32 0 0 1 1.616 43.52l-1.616 1.744a32 32 0 0 1-43.52 1.616l-1.744-1.616-271.52-271.52a32 32 0 0 1-1.632-43.52l1.632-1.76 271.52-271.52a32 32 0 0 1 45.264 0z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-sousuoshanchu */}
|
||||
|
||||
{ name === 'icon-sousuoshanchu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 96c91.808 0 167.2 70.304 175.28 160H848a32 32 0 1 1 0 64h-32v544a64 64 0 0 1-64 64H272a64 64 0 0 1-64-64V320h-32a32 32 0 1 1 0-64h160.72C344.8 166.304 420.192 96 512 96z m240 224H272v544h480V320z m-336 128a32 32 0 0 1 32 32v224a32 32 0 1 1-64 0V480a32 32 0 0 1 32-32z m192 0a32 32 0 0 1 32 32v224a32 32 0 1 1-64 0V480a32 32 0 0 1 32-32z m-96-288a112.032 112.032 0 0 0-110.88 96h221.76A112.032 112.032 0 0 0 512 160z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tuikuan */}
|
||||
{ name === 'icon-sousuoshanchu' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 96c91.808 0 167.2 70.304 175.28 160H848a32 32 0 1 1 0 64h-32v544a64 64 0 0 1-64 64H272a64 64 0 0 1-64-64V320h-32a32 32 0 1 1 0-64h160.72C344.8 166.304 420.192 96 512 96z m240 224H272v544h480V320z m-336 128a32 32 0 0 1 32 32v224a32 32 0 1 1-64 0V480a32 32 0 0 1 32-32z m192 0a32 32 0 0 1 32 32v224a32 32 0 1 1-64 0V480a32 32 0 0 1 32-32z m-96-288a112.032 112.032 0 0 0-110.88 96h221.76A112.032 112.032 0 0 0 512 160z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-tuikuan */}
|
||||
|
||||
{ name === 'icon-tuikuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 112a64 64 0 0 1 63.92 60.8L912 176v96c0 157.28-126.08 285.12-282.72 287.952L624 560h-75.632l103.744 103.76a32 32 0 0 1 1.632 43.52l-1.632 1.744a32 32 0 0 1-43.504 1.616l-1.76-1.616-158.384-158.4a32 32 0 0 1-1.616-43.504l1.616-1.76 158.4-158.384a32 32 0 0 1 46.88 43.52l-1.632 1.744L548.336 496H624c123.712 0 224-100.288 224-224v-96H176v672h672V640a32 32 0 0 1 63.92-2.4L912 640v208a64 64 0 0 1-60.8 63.92L848 912H176a64 64 0 0 1-63.92-60.8L112 848V176a64 64 0 0 1 60.8-63.92L176 112h672z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tishi */}
|
||||
{ name === 'icon-tuikuan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 112a64 64 0 0 1 63.92 60.8L912 176v96c0 157.28-126.08 285.12-282.72 287.952L624 560h-75.632l103.744 103.76a32 32 0 0 1 1.632 43.52l-1.632 1.744a32 32 0 0 1-43.504 1.616l-1.76-1.616-158.384-158.4a32 32 0 0 1-1.616-43.504l1.616-1.76 158.4-158.384a32 32 0 0 1 46.88 43.52l-1.632 1.744L548.336 496H624c123.712 0 224-100.288 224-224v-96H176v672h672V640a32 32 0 0 1 63.92-2.4L912 640v208a64 64 0 0 1-60.8 63.92L848 912H176a64 64 0 0 1-63.92-60.8L112 848V176a64 64 0 0 1 60.8-63.92L176 112h672z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-tishi */}
|
||||
|
||||
{ name === 'icon-tishi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 64C299.92 128 128 299.92 128 512s171.92 384 384 384 384-171.92 384-384S724.08 128 512 128z m29.248 556.896V752h-64.32v-67.104h64.32zM515.712 272c42.464 0 76.448 12.096 101.984 36.288C643.232 332.48 656 363.392 656 401.04c0 22.784-4.688 41.28-14.064 55.472-9.376 14.192-28.272 35.056-56.72 62.592-20.688 20-34.112 36.928-40.24 50.8-6.144 13.872-9.216 34.352-9.216 61.44h-57.536c0-30.736 3.664-55.52 10.992-74.352 7.328-18.816 23.376-40.368 48.16-64.672l25.856-25.488a106.832 106.832 0 0 0 18.752-22.896c8.608-13.984 12.928-28.48 12.928-43.552 0-21.072-6.304-39.36-18.912-54.832-12.608-15.488-33.44-23.232-62.56-23.232-35.968 0-60.864 13.328-74.656 40-7.76 14.848-12.16 36.24-13.248 64.192H368c0-46.448 13.152-83.808 39.44-112.096C433.728 286.144 469.824 272 515.712 272z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-xianxiahuizong */}
|
||||
{ name === 'icon-tishi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 64C299.92 128 128 299.92 128 512s171.92 384 384 384 384-171.92 384-384S724.08 128 512 128z m29.248 556.896V752h-64.32v-67.104h64.32zM515.712 272c42.464 0 76.448 12.096 101.984 36.288C643.232 332.48 656 363.392 656 401.04c0 22.784-4.688 41.28-14.064 55.472-9.376 14.192-28.272 35.056-56.72 62.592-20.688 20-34.112 36.928-40.24 50.8-6.144 13.872-9.216 34.352-9.216 61.44h-57.536c0-30.736 3.664-55.52 10.992-74.352 7.328-18.816 23.376-40.368 48.16-64.672l25.856-25.488a106.832 106.832 0 0 0 18.752-22.896c8.608-13.984 12.928-28.48 12.928-43.552 0-21.072-6.304-39.36-18.912-54.832-12.608-15.488-33.44-23.232-62.56-23.232-35.968 0-60.864 13.328-74.656 40-7.76 14.848-12.16 36.24-13.248 64.192H368c0-46.448 13.152-83.808 39.44-112.096C433.728 286.144 469.824 272 515.712 272z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-xianxiahuizong */}
|
||||
|
||||
{ name === 'icon-xianxiahuizong' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M912 336a32 32 0 0 1 32 32v512a32 32 0 0 1-32 32H112a32 32 0 0 1-32-32V368a32 32 0 0 1 32-32h800z m-32 64H144v448h736V400z m-443.408 71.504l2.032 1.872L512 546.72l73.376-73.36a32 32 0 0 1 47.12 43.216l-1.872 2.032L589.248 560H624a32 32 0 1 1 0 64h-80v48h80a32 32 0 1 1 0 64h-80v32a32 32 0 1 1-64 0v-32h-80a32 32 0 1 1 0-64h80v-48h-80a32 32 0 1 1 0-64h34.736l-41.36-41.376a32 32 0 0 1 43.216-47.12zM128 192h768a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H128a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-xinzeng */}
|
||||
{ name === 'icon-xianxiahuizong' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M912 336a32 32 0 0 1 32 32v512a32 32 0 0 1-32 32H112a32 32 0 0 1-32-32V368a32 32 0 0 1 32-32h800z m-32 64H144v448h736V400z m-443.408 71.504l2.032 1.872L512 546.72l73.376-73.36a32 32 0 0 1 47.12 43.216l-1.872 2.032L589.248 560H624a32 32 0 1 1 0 64h-80v48h80a32 32 0 1 1 0 64h-80v32a32 32 0 1 1-64 0v-32h-80a32 32 0 1 1 0-64h80v-48h-80a32 32 0 1 1 0-64h34.736l-41.36-41.376a32 32 0 0 1 43.216-47.12zM128 192h768a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H128a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-xinzeng */}
|
||||
|
||||
{ name === 'icon-xinzeng' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 256a32 32 0 0 1 32 32l-0.016 192H736a32 32 0 1 1 0 64H543.984L544 736a32 32 0 1 1-64 0l-0.016-192H288a32 32 0 1 1 0-64h191.984L480 288a32 32 0 0 1 32-32z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yonghuming */}
|
||||
{ name === 'icon-xinzeng' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 256a32 32 0 0 1 32 32l-0.016 192H736a32 32 0 1 1 0 64H543.984L544 736a32 32 0 1 1-64 0l-0.016-192H288a32 32 0 1 1 0-64h191.984L480 288a32 32 0 0 1 32-32z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yonghuming */}
|
||||
|
||||
{ name === 'icon-yonghuming' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 64c-114.88 0-208 93.12-208 208s93.12 208 208 208 208-93.12 208-208S626.88 64 512 64zM351.168 912h321.664a176 176 0 0 0 159.888-102.448L859.2 752a137.76 137.76 0 0 0-99.424-192.896L722.4 552a1126.528 1126.528 0 0 0-420.8 0l-37.376 7.104A137.76 137.76 0 0 0 164.8 752l26.48 57.552A176 176 0 0 0 351.168 912z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yanjing */}
|
||||
{ name === 'icon-yonghuming' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 64c-114.88 0-208 93.12-208 208s93.12 208 208 208 208-93.12 208-208S626.88 64 512 64zM351.168 912h321.664a176 176 0 0 0 159.888-102.448L859.2 752a137.76 137.76 0 0 0-99.424-192.896L722.4 552a1126.528 1126.528 0 0 0-420.8 0l-37.376 7.104A137.76 137.76 0 0 0 164.8 752l26.48 57.552A176 176 0 0 0 351.168 912z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yanjing */}
|
||||
|
||||
{ name === 'icon-yanjing' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512.944 208c143.184 0 285.008 91.696 425.488 275.104l0.048-0.032a48 48 0 0 1 0.272 57.968C800.848 724.352 658.912 816 512.944 816c-145.6 0-292.544-91.2-440.832-273.552a48 48 0 0 1 0.272-60.8C223.296 299.232 370.144 208 512.944 208zM512 320c-106.032 0-192 85.968-192 192s85.968 192 192 192 192-85.968 192-192-85.968-192-192-192z m0 64a128 128 0 1 1 0 256 128 128 0 0 1 0-256z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yufukuan */}
|
||||
{ name === 'icon-yanjing' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512.944 208c143.184 0 285.008 91.696 425.488 275.104l0.048-0.032a48 48 0 0 1 0.272 57.968C800.848 724.352 658.912 816 512.944 816c-145.6 0-292.544-91.2-440.832-273.552a48 48 0 0 1 0.272-60.8C223.296 299.232 370.144 208 512.944 208zM512 320c-106.032 0-192 85.968-192 192s85.968 192 192 192 192-85.968 192-192-85.968-192-192-192z m0 64a128 128 0 1 1 0 256 128 128 0 0 1 0-256z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yufukuan */}
|
||||
|
||||
{ name === 'icon-yufukuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M327.136 109.216l581.216 258.768L912 368a32 32 0 0 1 32 32v480a32 32 0 0 1-32 32H112a32 32 0 0 1-32-32V400a32 32 0 0 1 32-32h61.776l108.352-243.36c7.28-16.336 27.424-23.248 45.008-15.424zM880 432H144v416h736V432zM512 688a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H256a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h256zM332.592 182.56L250.032 368h499.04l-416.48-185.44z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-wodekefu */}
|
||||
{ name === 'icon-yufukuan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M327.136 109.216l581.216 258.768L912 368a32 32 0 0 1 32 32v480a32 32 0 0 1-32 32H112a32 32 0 0 1-32-32V400a32 32 0 0 1 32-32h61.776l108.352-243.36c7.28-16.336 27.424-23.248 45.008-15.424zM880 432H144v416h736V432zM512 688a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H256a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h256zM332.592 182.56L250.032 368h499.04l-416.48-185.44z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-wodekefu */}
|
||||
|
||||
{ name === 'icon-wodekefu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M832 516.752a193.2 193.2 0 0 1 79.92 150.864l0.08 5.84v13.088c0 53.152-21.44 101.312-56.144 136.272l-3.904 3.84L912 880H657.44a192.72 192.72 0 0 1-127.536-48c165.2-1.024 299.152-133.808 302.048-298.56l0.064-16.688z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M521.2 144C701.68 144 848 290.32 848 470.8v34.4C848 685.68 701.68 832 521.2 832H96l100.256-91.264A325.856 325.856 0 0 1 96 505.2v-34.4C96 290.32 242.32 144 422.8 144h98.4z m-151.744 275.2c-37.76 0-68.368 30.8-68.368 68.8s30.608 68.8 68.368 68.8c37.76 0 68.368-30.8 68.368-68.8s-30.608-68.8-68.368-68.8z m205.088 0c-37.76 0-68.368 30.8-68.368 68.8s30.608 68.8 68.368 68.8c37.76 0 68.368-30.8 68.368-68.8s-30.608-68.8-68.368-68.8z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dizhi */}
|
||||
{ name === 'icon-wodekefu' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M832 516.752a193.2 193.2 0 0 1 79.92 150.864l0.08 5.84v13.088c0 53.152-21.44 101.312-56.144 136.272l-3.904 3.84L912 880H657.44a192.72 192.72 0 0 1-127.536-48c165.2-1.024 299.152-133.808 302.048-298.56l0.064-16.688z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M521.2 144C701.68 144 848 290.32 848 470.8v34.4C848 685.68 701.68 832 521.2 832H96l100.256-91.264A325.856 325.856 0 0 1 96 505.2v-34.4C96 290.32 242.32 144 422.8 144h98.4z m-151.744 275.2c-37.76 0-68.368 30.8-68.368 68.8s30.608 68.8 68.368 68.8c37.76 0 68.368-30.8 68.368-68.8s-30.608-68.8-68.368-68.8z m205.088 0c-37.76 0-68.368 30.8-68.368 68.8s30.608 68.8 68.368 68.8c37.76 0 68.368-30.8 68.368-68.8s-30.608-68.8-68.368-68.8z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-dizhi */}
|
||||
|
||||
{ name === 'icon-dizhi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 64c194.4 0 352 154.24 352 344.48 0 63.424-29.328 143.76-88 241.008l-0.768 1.28-5.264 5.792C705.696 725.92 613.92 769.28 512 769.28c-104.72 0-198.752-45.808-263.232-118.528C189.6 552.976 160 472.192 160 408.48 160 218.24 317.6 64 512 64z m0 241.28c-61.392 0-111.152 49.856-111.152 111.36S450.608 528 512 528s111.152-49.856 111.152-111.36-49.76-111.36-111.152-111.36z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M775.232 650.752C740.4 708.336 695.312 771.84 640 841.232l-17.824 22.112-18.496 22.512c-3.136 3.776-6.304 7.584-9.504 11.392l-19.52 23.104-20.192 23.488c-6.848 7.904-13.808 15.856-20.88 23.888L512 992a4097.536 4097.536 0 0 1-42.448-48.16l-20.192-23.488-19.52-23.104c-3.2-3.808-6.368-7.616-9.504-11.392l-18.496-22.512L384 841.232c-55.328-69.408-100.416-132.896-135.248-190.48 64.48 72.72 158.512 118.528 263.232 118.528 101.92 0 193.696-43.376 257.968-112.72l5.28-5.808z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouhouzhongxin */}
|
||||
{ name === 'icon-dizhi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 64c194.4 0 352 154.24 352 344.48 0 63.424-29.328 143.76-88 241.008l-0.768 1.28-5.264 5.792C705.696 725.92 613.92 769.28 512 769.28c-104.72 0-198.752-45.808-263.232-118.528C189.6 552.976 160 472.192 160 408.48 160 218.24 317.6 64 512 64z m0 241.28c-61.392 0-111.152 49.856-111.152 111.36S450.608 528 512 528s111.152-49.856 111.152-111.36-49.76-111.36-111.152-111.36z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M775.232 650.752C740.4 708.336 695.312 771.84 640 841.232l-17.824 22.112-18.496 22.512c-3.136 3.776-6.304 7.584-9.504 11.392l-19.52 23.104-20.192 23.488c-6.848 7.904-13.808 15.856-20.88 23.888L512 992a4097.536 4097.536 0 0 1-42.448-48.16l-20.192-23.488-19.52-23.104c-3.2-3.808-6.368-7.616-9.504-11.392l-18.496-22.512L384 841.232c-55.328-69.408-100.416-132.896-135.248-190.48 64.48 72.72 158.512 118.528 263.232 118.528 101.92 0 193.696-43.376 257.968-112.72l5.28-5.808z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouhouzhongxin */}
|
||||
|
||||
{ name === 'icon-shouhouzhongxin' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 384a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H176a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h672z m-376.448 112H384l11.264 13.312 68.608 132.608h-71.168l-6.656 48.64h77.312l-13.312 95.232h77.824l13.312-95.232h77.824l6.656-48.64h-71.168L670.72 496h-83.504l-71.12 98.816L471.552 496z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M335.536 148.56a32 32 0 0 1 35.12 53.44l-2.192 1.44L307.488 240H832a32 32 0 0 1 31.92 29.6L864 272a32 32 0 0 1-29.6 31.92L832 304H192c-31.616 0-43.68-40.576-18.528-58.112l2.064-1.328 160-96z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-wodeshoucang */}
|
||||
{ name === 'icon-shouhouzhongxin' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 384a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H176a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h672z m-376.448 112H384l11.264 13.312 68.608 132.608h-71.168l-6.656 48.64h77.312l-13.312 95.232h77.824l13.312-95.232h77.824l6.656-48.64h-71.168L670.72 496h-83.504l-71.12 98.816L471.552 496z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M335.536 148.56a32 32 0 0 1 35.12 53.44l-2.192 1.44L307.488 240H832a32 32 0 0 1 31.92 29.6L864 272a32 32 0 0 1-29.6 31.92L832 304H192c-31.616 0-43.68-40.576-18.528-58.112l2.064-1.328 160-96z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-wodeshoucang */}
|
||||
|
||||
{ name === 'icon-wodeshoucang' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128c6.48 0 13.072 1.424 19.264 4.448 8.592 4.16 15.552 11.024 19.792 19.488l98.88 197.44c3.808 7.6 11.152 12.864 19.68 14.08l221.088 31.68c23.808 3.392 40.304 25.168 36.832 48.64a42.704 42.704 0 0 1-12.688 24.544l-160 153.696c-6.16 5.92-8.96 14.432-7.52 22.8l37.776 217.008c4.064 23.36-11.84 45.536-35.552 49.552-9.44 1.6-19.152 0.08-27.632-4.32l-197.76-102.448a26.432 26.432 0 0 0-12.16-2.96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M512 128v673.648c-4.176 0-8.352 0.976-12.16 2.96L302.08 907.04c-21.28 11.04-47.616 2.976-58.816-18.016a42.368 42.368 0 0 1-4.368-27.216L276.64 644.8a25.52 25.52 0 0 0-7.52-22.8L109.152 468.32a42.48 42.48 0 0 1-0.8-60.688 43.776 43.776 0 0 1 24.928-12.512l221.12-31.664a26.112 26.112 0 0 0 19.664-14.08l98.88-197.44A43.616 43.616 0 0 1 511.984 128z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shoukuanliebiao */}
|
||||
{ name === 'icon-wodeshoucang' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128c6.48 0 13.072 1.424 19.264 4.448 8.592 4.16 15.552 11.024 19.792 19.488l98.88 197.44c3.808 7.6 11.152 12.864 19.68 14.08l221.088 31.68c23.808 3.392 40.304 25.168 36.832 48.64a42.704 42.704 0 0 1-12.688 24.544l-160 153.696c-6.16 5.92-8.96 14.432-7.52 22.8l37.776 217.008c4.064 23.36-11.84 45.536-35.552 49.552-9.44 1.6-19.152 0.08-27.632-4.32l-197.76-102.448a26.432 26.432 0 0 0-12.16-2.96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M512 128v673.648c-4.176 0-8.352 0.976-12.16 2.96L302.08 907.04c-21.28 11.04-47.616 2.976-58.816-18.016a42.368 42.368 0 0 1-4.368-27.216L276.64 644.8a25.52 25.52 0 0 0-7.52-22.8L109.152 468.32a42.48 42.48 0 0 1-0.8-60.688 43.776 43.776 0 0 1 24.928-12.512l221.12-31.664a26.112 26.112 0 0 0 19.664-14.08l98.88-197.44A43.616 43.616 0 0 1 511.984 128z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shoukuanliebiao */}
|
||||
|
||||
{ name === 'icon-shoukuanliebiao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M832 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H288a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h544z m-128 592H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM542.176 208H464l10.064 11.76 61.248 117.152h-63.536l-5.952 42.96h69.04L522.976 464h69.488l11.872-84.128h69.488l5.952-42.96h-63.552L720 208h-74.56l-63.504 87.296L542.176 208z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M288 128a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h-80a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-madanguanli */}
|
||||
{ name === 'icon-shoukuanliebiao' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M832 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H288a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h544z m-128 592H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM542.176 208H464l10.064 11.76 61.248 117.152h-63.536l-5.952 42.96h69.04L522.976 464h69.488l11.872-84.128h69.488l5.952-42.96h-63.552L720 208h-74.56l-63.504 87.296L542.176 208z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M288 128a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h-80a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-madanguanli */}
|
||||
|
||||
{ name === 'icon-madanguanli' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M128 128m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M544 128m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M128 544m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M544 544m32 0l80 0q32 0 32 32l0 288q0 32-32 32l-80 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(69,129,255)'}' opacity='.6' /%3E%3Cpath d='M752 544m32 0l80 0q32 0 32 32l0 288q0 32-32 32l-80 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[4]) || 'rgb(69,129,255)'}' opacity='.6' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-qusechazhao */}
|
||||
{ name === 'icon-madanguanli' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M128 128m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M544 128m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M128 544m32 0l288 0q32 0 32 32l0 288q0 32-32 32l-288 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M544 544m32 0l80 0q32 0 32 32l0 288q0 32-32 32l-80 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(69,129,255)'}' opacity='.6' /%3E%3Cpath d='M752 544m32 0l80 0q32 0 32 32l0 288q0 32-32 32l-80 0q-32 0-32-32l0-288q0-32 32-32Z' fill='${(isStr ? colors : colors?.[4]) || 'rgb(69,129,255)'}' opacity='.6' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-qusechazhao */}
|
||||
|
||||
{ name === 'icon-qusechazhao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M868.528 816.8c59.36 0 107.472-46.48 107.472-103.824 0-38.224-35.824-102.496-107.472-192.816-71.648 90.32-107.472 154.592-107.472 192.816 0 57.344 48.112 103.84 107.472 103.84z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M344 105.44l75.76 53.04c3.392 2.368 6.384 5.12 8.928 8.144 3.728 1.376 7.344 3.248 10.752 5.632l341.968 239.456a47.008 47.008 0 0 1 11.552 65.472L498.224 898.112a47.008 47.008 0 0 1-65.472 11.536L90.768 670.192a47.008 47.008 0 0 1-11.536-65.472l268.064-382.848-56.928-39.84A46.752 46.752 0 1 1 344 105.44z m112.528 192.928a40.336 40.336 0 0 0-56.128 9.904L221.424 563.76a40.288 40.288 0 0 0 44.448 61.76l382.24-113.232a40.288 40.288 0 0 0 11.68-71.648z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-pandiansaoma */}
|
||||
{ name === 'icon-qusechazhao' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M868.528 816.8c59.36 0 107.472-46.48 107.472-103.824 0-38.224-35.824-102.496-107.472-192.816-71.648 90.32-107.472 154.592-107.472 192.816 0 57.344 48.112 103.84 107.472 103.84z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M344 105.44l75.76 53.04c3.392 2.368 6.384 5.12 8.928 8.144 3.728 1.376 7.344 3.248 10.752 5.632l341.968 239.456a47.008 47.008 0 0 1 11.552 65.472L498.224 898.112a47.008 47.008 0 0 1-65.472 11.536L90.768 670.192a47.008 47.008 0 0 1-11.536-65.472l268.064-382.848-56.928-39.84A46.752 46.752 0 1 1 344 105.44z m112.528 192.928a40.336 40.336 0 0 0-56.128 9.904L221.424 563.76a40.288 40.288 0 0 0 44.448 61.76l382.24-113.232a40.288 40.288 0 0 0 11.68-71.648z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-pandiansaoma */}
|
||||
|
||||
{ name === 'icon-pandiansaoma' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M224 128h304v768H224a96 96 0 0 1-96-96V224a96 96 0 0 1 96-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M128 480h768v64H128zM896 656v208a32 32 0 0 1-32 32H656l-0.016-64H832V656h64z m-704 0v176h175.984L368 896H160a32 32 0 0 1-32-32V656h64zM864 128a32 32 0 0 1 32 32v208h-64V192H655.984L656 128h208zM128 160a32 32 0 0 1 32-32h208l-0.016 64H192v176H128V160z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yaoqingma */}
|
||||
{ name === 'icon-pandiansaoma' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M224 128h304v768H224a96 96 0 0 1-96-96V224a96 96 0 0 1 96-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M128 480h768v64H128zM896 656v208a32 32 0 0 1-32 32H656l-0.016-64H832V656h64z m-704 0v176h175.984L368 896H160a32 32 0 0 1-32-32V656h64zM864 128a32 32 0 0 1 32 32v208h-64V192H655.984L656 128h208zM128 160a32 32 0 0 1 32-32h208l-0.016 64H192v176H128V160z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yaoqingma */}
|
||||
|
||||
{ name === 'icon-yaoqingma' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M768 128a32 32 0 0 1 32 32v299.984L512 544l-288-84.016V160a32 32 0 0 1 32-32h512z m-112 240H368a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H368a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M168.96 443.952L512 544l343.04-100.048a32 32 0 0 1 40.96 30.72V864a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V474.672a32 32 0 0 1 40.96-30.72z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(64,122,244)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-duizhang */}
|
||||
{ name === 'icon-yaoqingma' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M768 128a32 32 0 0 1 32 32v299.984L512 544l-288-84.016V160a32 32 0 0 1 32-32h512z m-112 240H368a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H368a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M168.96 443.952L512 544l343.04-100.048a32 32 0 0 1 40.96 30.72V864a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V474.672a32 32 0 0 1 40.96-30.72z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(64,122,244)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-duizhang */}
|
||||
|
||||
{ name === 'icon-duizhang' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M864 96a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32h-128V288a32 32 0 0 0-29.6-31.92L704 256H288V128a32 32 0 0 1 32-32h544z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M704 256a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h544zM375.552 464H288l11.264 13.312 68.608 132.608h-71.168l-6.656 48.64h77.312l-13.312 95.232h77.824l13.312-95.232h77.824l6.656-48.64h-71.168L574.72 464h-83.504l-71.12 98.816L375.552 464z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tihuoliebiao */}
|
||||
{ name === 'icon-duizhang' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M864 96a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32h-128V288a32 32 0 0 0-29.6-31.92L704 256H288V128a32 32 0 0 1 32-32h544z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M704 256a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h544zM375.552 464H288l11.264 13.312 68.608 132.608h-71.168l-6.656 48.64h77.312l-13.312 95.232h77.824l13.312-95.232h77.824l6.656-48.64h-71.168L574.72 464h-83.504l-71.12 98.816L375.552 464z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-tihuoliebiao */}
|
||||
|
||||
{ name === 'icon-tihuoliebiao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M880 496v317.088A34.912 34.912 0 0 1 845.088 848H274.912A34.912 34.912 0 0 1 240 813.088V496h640zM240 242.912c0-19.28 15.632-34.912 34.912-34.912h570.176c19.28 0 34.912 15.632 34.912 34.912V432H240V242.912z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M224 144a16 16 0 0 1 16 16v668.112c7.84 5.28 14.624 12.032 19.888 19.888H880a32 32 0 0 1 32 32v16a32 32 0 0 1-32 32H259.872A72 72 0 1 1 160 828.144V224L112 224a16 16 0 0 1-16-16v-48a16 16 0 0 1 16-16h112z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yangpinduibi */}
|
||||
{ name === 'icon-tihuoliebiao' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M880 496v317.088A34.912 34.912 0 0 1 845.088 848H274.912A34.912 34.912 0 0 1 240 813.088V496h640zM240 242.912c0-19.28 15.632-34.912 34.912-34.912h570.176c19.28 0 34.912 15.632 34.912 34.912V432H240V242.912z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M224 144a16 16 0 0 1 16 16v668.112c7.84 5.28 14.624 12.032 19.888 19.888H880a32 32 0 0 1 32 32v16a32 32 0 0 1-32 32H259.872A72 72 0 1 1 160 828.144V224L112 224a16 16 0 0 1-16-16v-48a16 16 0 0 1 16-16h112z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yangpinduibi */}
|
||||
|
||||
{ name === 'icon-yangpinduibi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M528 80a32 32 0 0 1 32 32v800a32 32 0 0 1-32 32h-32a32 32 0 0 1-32-32v-64H160a32 32 0 0 1-32-32V208a32 32 0 0 1 32-32h304V112a32 32 0 0 1 32-32h32z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M560 176h304a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H560V176z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yansequyang */}
|
||||
{ name === 'icon-yangpinduibi' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M528 80a32 32 0 0 1 32 32v800a32 32 0 0 1-32 32h-32a32 32 0 0 1-32-32v-64H160a32 32 0 0 1-32-32V208a32 32 0 0 1 32-32h304V112a32 32 0 0 1 32-32h32z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M560 176h304a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H560V176z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yansequyang */}
|
||||
|
||||
{ name === 'icon-yansequyang' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M760.896 104.704a32 32 0 0 1 45.264 0l113.12 113.136a32 32 0 0 1 0 45.264L828.8 353.6l22.624 22.624a32 32 0 0 1 0 45.248l-45.248 45.264a32 32 0 0 1-45.264 0L557.248 263.104a32 32 0 0 1 0-45.264l45.264-45.248a32 32 0 0 1 45.248 0L670.4 195.2l90.512-90.512z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M579.888 285.728l158.4 158.4-396 395.968a48 48 0 0 1-67.872 0l-22.624 22.624a64 64 0 1 1-90.512-90.512l22.624-22.624a48 48 0 0 1 0-67.872l395.984-396z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-fahuoliebiao */}
|
||||
{ name === 'icon-yansequyang' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M760.896 104.704a32 32 0 0 1 45.264 0l113.12 113.136a32 32 0 0 1 0 45.264L828.8 353.6l22.624 22.624a32 32 0 0 1 0 45.248l-45.248 45.264a32 32 0 0 1-45.264 0L557.248 263.104a32 32 0 0 1 0-45.264l45.264-45.248a32 32 0 0 1 45.248 0L670.4 195.2l90.512-90.512z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M579.888 285.728l158.4 158.4-396 395.968a48 48 0 0 1-67.872 0l-22.624 22.624a64 64 0 1 1-90.512-90.512l22.624-22.624a48 48 0 0 1 0-67.872l395.984-396z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-fahuoliebiao */}
|
||||
|
||||
{ name === 'icon-fahuoliebiao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M864 416a32 32 0 0 1 32 32v416a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h704z m-80 320H528a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H608a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M748.8 192a32 32 0 0 1 28.24 16.944L896 432v16a32 32 0 0 0-32-32H160a32 32 0 0 0-32 32v-16l118.96-223.056A32 32 0 0 1 275.2 192h473.6z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yuncangkucun */}
|
||||
{ name === 'icon-fahuoliebiao' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M864 416a32 32 0 0 1 32 32v416a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h704z m-80 320H528a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H608a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M748.8 192a32 32 0 0 1 28.24 16.944L896 432v16a32 32 0 0 0-32-32H160a32 32 0 0 0-32 32v-16l118.96-223.056A32 32 0 0 1 275.2 192h473.6z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-yuncangkucun */}
|
||||
|
||||
{ name === 'icon-yuncangkucun' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 432v445.088A34.912 34.912 0 0 1 813.088 912H210.912A34.912 34.912 0 0 1 176 877.088V432h672zM608 704H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M536 64c108.8 0 197.328 86.88 199.936 195.072l0.016 1.024 3.936-2.624a112 112 0 1 1 63.952 206.464L800 464H392.8c-31.52 29.76-74.032 48-120.8 48-97.2 0-176-78.8-176-176s78.8-176 176-176c29.712 0 57.712 7.36 82.272 20.368C385.92 111.68 455.392 64 536 64z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-xiaoshou */}
|
||||
{ name === 'icon-yuncangkucun' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M848 432v445.088A34.912 34.912 0 0 1 813.088 912H210.912A34.912 34.912 0 0 1 176 877.088V432h672zM608 704H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3Cpath d='M536 64c108.8 0 197.328 86.88 199.936 195.072l0.016 1.024 3.936-2.624a112 112 0 1 1 63.952 206.464L800 464H392.8c-31.52 29.76-74.032 48-120.8 48-97.2 0-176-78.8-176-176s78.8-176 176-176c29.712 0 57.712 7.36 82.272 20.368C385.92 111.68 455.392 64 536 64z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-xiaoshou */}
|
||||
|
||||
{ name === 'icon-xiaoshou' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M511.92 496c159.808 0 298.16 97.36 365.056 239.152 13.76 29.184 25.264 72.912 34.496 131.2A53.312 53.312 0 0 1 858.784 928H518.768l63.552-80.736-70.4-342-70.4 342L505.024 928H165.152a53.312 53.312 0 0 1-52.592-61.808c9.664-60.08 21.712-105.056 36.16-134.912C216.288 591.6 353.568 496 511.92 496z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M520 296m-216 0a216 216 0 1 0 432 0 216 216 0 1 0-432 0Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(64,141,250)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-qianzhicangkucun */}
|
||||
{ name === 'icon-xiaoshou' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M511.92 496c159.808 0 298.16 97.36 365.056 239.152 13.76 29.184 25.264 72.912 34.496 131.2A53.312 53.312 0 0 1 858.784 928H518.768l63.552-80.736-70.4-342-70.4 342L505.024 928H165.152a53.312 53.312 0 0 1-52.592-61.808c9.664-60.08 21.712-105.056 36.16-134.912C216.288 591.6 353.568 496 511.92 496z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.5' /%3E%3Cpath d='M520 296m-216 0a216 216 0 1 0 432 0 216 216 0 1 0-432 0Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(64,141,250)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-qianzhicangkucun */}
|
||||
|
||||
{ name === 'icon-qianzhicangkucun' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M904.032 338.016a22.016 22.016 0 0 0-1.456-4.432l-67.616-154C823.28 147.776 790.944 128 750.272 128h-474.56c-39.856 0-70.832 19.392-82.064 50.064l-72.672 157.12a31.776 31.776 0 0 0-1.04 3.696A134.816 134.816 0 0 0 112 384.224c0.064 53.76 32.304 102.848 84.08 128.048 21.312 10.448 46.432 15.728 74.64 15.728h0.096c47.328-0.096 91.168-19.136 121.056-51.696 29.728 32.272 73.232 51.2 120.48 51.456 46.88-0.32 90.224-19.312 119.84-51.584 29.872 32.56 73.776 51.52 121.344 51.52 28.8-0.144 54.336-5.664 75.84-16.48 51.008-25.472 82.656-74.368 82.624-127.552a132.032 132.032 0 0 0-7.728-44.576 8.768 8.768 0 0 0-0.24-1.072z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M848 432v445.088A34.912 34.912 0 0 1 813.088 912H210.912A34.912 34.912 0 0 1 176 877.088V432h672zM608 752H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-lingquseka */}
|
||||
{ name === 'icon-qianzhicangkucun' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M904.032 338.016a22.016 22.016 0 0 0-1.456-4.432l-67.616-154C823.28 147.776 790.944 128 750.272 128h-474.56c-39.856 0-70.832 19.392-82.064 50.064l-72.672 157.12a31.776 31.776 0 0 0-1.04 3.696A134.816 134.816 0 0 0 112 384.224c0.064 53.76 32.304 102.848 84.08 128.048 21.312 10.448 46.432 15.728 74.64 15.728h0.096c47.328-0.096 91.168-19.136 121.056-51.696 29.728 32.272 73.232 51.2 120.48 51.456 46.88-0.32 90.224-19.312 119.84-51.584 29.872 32.56 73.776 51.52 121.344 51.52 28.8-0.144 54.336-5.664 75.84-16.48 51.008-25.472 82.656-74.368 82.624-127.552a132.032 132.032 0 0 0-7.728-44.576 8.768 8.768 0 0 0-0.24-1.072z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3Cpath d='M848 432v445.088A34.912 34.912 0 0 1 813.088 912H210.912A34.912 34.912 0 0 1 176 877.088V432h672zM608 752H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z m0-128H416a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.4' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-lingquseka */}
|
||||
|
||||
{ name === 'icon-lingquseka' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M352 160a32 32 0 0 1 32 32v672a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h192z m-96 560a48 48 0 1 0 0 96 48 48 0 0 0 0-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.6' /%3E%3Cpath d='M648.432 230.624l135.76 135.76a32 32 0 0 1 0 45.264L331.648 864.192a32 32 0 0 1-45.264 0l-54.992-54.976a48 48 0 1 0-16.608-16.608l-64.16-64.176a32 32 0 0 1 0-45.264l452.544-452.544a32 32 0 0 1 45.264 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.8' /%3E%3Cpath d='M864 640a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V672a32 32 0 0 1 32-32h704z m-608 80a48 48 0 1 0 0 96 48 48 0 0 0 0-96z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gouwu1 */}
|
||||
{ name === 'icon-lingquseka' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M352 160a32 32 0 0 1 32 32v672a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h192z m-96 560a48 48 0 1 0 0 96 48 48 0 0 0 0-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' opacity='.6' /%3E%3Cpath d='M648.432 230.624l135.76 135.76a32 32 0 0 1 0 45.264L331.648 864.192a32 32 0 0 1-45.264 0l-54.992-54.976a48 48 0 1 0-16.608-16.608l-64.16-64.176a32 32 0 0 1 0-45.264l452.544-452.544a32 32 0 0 1 45.264 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}' opacity='.8' /%3E%3Cpath d='M864 640a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V672a32 32 0 0 1 32-32h704z m-608 80a48 48 0 1 0 0 96 48 48 0 0 0 0-96z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-gouwu1 */}
|
||||
|
||||
{ name === 'icon-gouwu1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v32h84.032a32 32 0 0 1 31.712 27.712l71.36 528A32 32 0 0 1 811.392 896H212.608a32 32 0 0 1-31.712-36.288l71.36-528A32 32 0 0 1 283.968 304h84.016L368 272a144 144 0 0 1 144-144z m214.048 224H297.936l-67.024 496h562.16l-67.024-496zM512 176a96 96 0 0 0-95.936 92.4L416 272v32h192v-32a96 96 0 0 0-92.4-95.936L512 176z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dingdan1 */}
|
||||
{ name === 'icon-gouwu1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v32h84.032a32 32 0 0 1 31.712 27.712l71.36 528A32 32 0 0 1 811.392 896H212.608a32 32 0 0 1-31.712-36.288l71.36-528A32 32 0 0 1 283.968 304h84.016L368 272a144 144 0 0 1 144-144z m214.048 224H297.936l-67.024 496h562.16l-67.024-496zM512 176a96 96 0 0 0-95.936 92.4L416 272v32h192v-32a96 96 0 0 0-92.4-95.936L512 176z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-dingdan1 */}
|
||||
|
||||
{ name === 'icon-dingdan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M816 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H208a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h608z m-16 48H224v672h576V176z m-120 448a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z m0-144a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z m0-144a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gerenzhongxin1 */}
|
||||
{ name === 'icon-dingdan1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M816 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H208a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h608z m-16 48H224v672h576V176z m-120 448a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z m0-144a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z m0-144a24 24 0 0 1 0 48h-336a24 24 0 0 1 0-48h336z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-gerenzhongxin1 */}
|
||||
|
||||
{ name === 'icon-gerenzhongxin1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M624 544c150.224 0 272 121.776 272 272v80H128v-80c0-150.224 121.776-272 272-272h224z m0 48H400c-122.048 0-221.28 97.6-223.952 218.992L176 816v32h672v-32c0-122.048-97.6-221.28-218.992-223.952L624 592zM512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-139.76 143.936L512 496a144 144 0 0 1-144-144v-80a144 144 0 0 1 139.76-143.936L512 128z m0 48a96 96 0 0 0-95.936 92.4L416 272v80a96 96 0 0 0 191.936 3.6L608 352v-80a96 96 0 0 0-96-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouye1 */}
|
||||
{ name === 'icon-gerenzhongxin1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M624 544c150.224 0 272 121.776 272 272v80H128v-80c0-150.224 121.776-272 272-272h224z m0 48H400c-122.048 0-221.28 97.6-223.952 218.992L176 816v32h672v-32c0-122.048-97.6-221.28-218.992-223.952L624 592zM512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-139.76 143.936L512 496a144 144 0 0 1-144-144v-80a144 144 0 0 1 139.76-143.936L512 128z m0 48a96 96 0 0 0-95.936 92.4L416 272v80a96 96 0 0 0 191.936 3.6L608 352v-80a96 96 0 0 0-96-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouye1 */}
|
||||
|
||||
{ name === 'icon-shouye1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M543.84 690.24a31.728 31.728 0 0 0-29.472-31.552L512 658.592a31.76 31.76 0 0 0-31.744 29.296l-0.08 2.368V896h-47.76v-0.016L241.44 896a31.744 31.744 0 0 1-31.84-31.648V539.648l-39.84 39.872c-9.28 9.28-24.352 9.216-33.664-0.096a23.84 23.84 0 0 1-1.632-31.984l1.536-1.68 73.6-73.632v-3.456h3.456l236.288-236.272c33.168-33.168 86.592-33.824 120.912-2.096l2.544 2.432 235.936 235.936h5.648v5.648l73.52 73.536c9.328 9.328 9.376 24.4 0.096 33.664a23.792 23.792 0 0 1-31.968 1.456l-1.696-1.552-39.952-39.952v322.88c0 17.472-14.24 31.648-31.824 31.648l-190.992-0.016V896H543.84V690.24z m-58.832-425.856l-1.888 1.776-225.776 225.744v356.608h175.072v-158.256c0-43.712 35.632-79.136 79.584-79.136 43.952 0 79.584 35.424 79.584 79.136l-0.016 158.256h175.088l-0.016-354.784-227.408-227.408a39.696 39.696 0 0 0-54.224-1.936z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gerenzhongxin */}
|
||||
{ name === 'icon-shouye1' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M543.84 690.24a31.728 31.728 0 0 0-29.472-31.552L512 658.592a31.76 31.76 0 0 0-31.744 29.296l-0.08 2.368V896h-47.76v-0.016L241.44 896a31.744 31.744 0 0 1-31.84-31.648V539.648l-39.84 39.872c-9.28 9.28-24.352 9.216-33.664-0.096a23.84 23.84 0 0 1-1.632-31.984l1.536-1.68 73.6-73.632v-3.456h3.456l236.288-236.272c33.168-33.168 86.592-33.824 120.912-2.096l2.544 2.432 235.936 235.936h5.648v5.648l73.52 73.536c9.328 9.328 9.376 24.4 0.096 33.664a23.792 23.792 0 0 1-31.968 1.456l-1.696-1.552-39.952-39.952v322.88c0 17.472-14.24 31.648-31.824 31.648l-190.992-0.016V896H543.84V690.24z m-58.832-425.856l-1.888 1.776-225.776 225.744v356.608h175.072v-158.256c0-43.712 35.632-79.136 79.584-79.136 43.952 0 79.584 35.424 79.584 79.136l-0.016 158.256h175.088l-0.016-354.784-227.408-227.408a39.696 39.696 0 0 0-54.224-1.936z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-gerenzhongxin */}
|
||||
|
||||
{ name === 'icon-gerenzhongxin' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-288 0v-80a144 144 0 0 1 144-144z m112 416c150.224 0 272 121.776 272 272v80H128v-80c0-150.224 121.776-272 272-272h224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dingdan */}
|
||||
{ name === 'icon-gerenzhongxin' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-288 0v-80a144 144 0 0 1 144-144z m112 416c150.224 0 272 121.776 272 272v80H128v-80c0-150.224 121.776-272 272-272h224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-dingdan */}
|
||||
|
||||
{ name === 'icon-dingdan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M816 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H208a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h608z m-136 496h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z m0-144h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z m0-144h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouye */}
|
||||
{ name === 'icon-dingdan' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M816 128a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32H208a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h608z m-136 496h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z m0-144h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z m0-144h-336a24 24 0 0 0 0 48h336a24 24 0 0 0 0-48z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-shouye */}
|
||||
|
||||
{ name === 'icon-shouye' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M570.256 230.304l2.544 2.432 235.936 235.936h5.648v5.648l73.52 73.536c9.328 9.328 9.376 24.4 0.096 33.664a23.792 23.792 0 0 1-31.968 1.456l-1.696-1.552-39.952-39.952v322.88c0 17.472-14.24 31.648-31.824 31.648l-190.992-0.016V896H576V688a64 64 0 1 0-128 0v208h-15.584v-0.016L241.44 896a31.744 31.744 0 0 1-31.84-31.648V539.648l-39.84 39.872c-9.28 9.28-24.352 9.216-33.664-0.096a23.84 23.84 0 0 1-1.632-31.984l1.536-1.68 73.6-73.632v-3.456h3.456l236.288-236.272c33.168-33.168 86.592-33.824 120.912-2.096z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gouwu */}
|
||||
{ name === 'icon-shouye' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M570.256 230.304l2.544 2.432 235.936 235.936h5.648v5.648l73.52 73.536c9.328 9.328 9.376 24.4 0.096 33.664a23.792 23.792 0 0 1-31.968 1.456l-1.696-1.552-39.952-39.952v322.88c0 17.472-14.24 31.648-31.824 31.648l-190.992-0.016V896H576V688a64 64 0 1 0-128 0v208h-15.584v-0.016L241.44 896a31.744 31.744 0 0 1-31.84-31.648V539.648l-39.84 39.872c-9.28 9.28-24.352 9.216-33.664-0.096a23.84 23.84 0 0 1-1.632-31.984l1.536-1.68 73.6-73.632v-3.456h3.456l236.288-236.272c33.168-33.168 86.592-33.824 120.912-2.096z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
{/* icon-gouwu */}
|
||||
|
||||
{ name === 'icon-gouwu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v32h84.032a32 32 0 0 1 31.712 27.712l71.36 528A32 32 0 0 1 811.392 896H212.608a32 32 0 0 1-31.712-36.288l71.36-528A32 32 0 0 1 283.968 304h84.016L368 272a144 144 0 0 1 144-144z m0 48a96 96 0 0 0-95.936 92.4L416 272v32h192v-32a96 96 0 0 0-92.4-95.936L512 176z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{ name === 'icon-gouwu' && (<View style={{ backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 128a144 144 0 0 1 144 144v32h84.032a32 32 0 0 1 31.712 27.712l71.36 528A32 32 0 0 1 811.392 896H212.608a32 32 0 0 1-31.712-36.288l71.36-528A32 32 0 0 1 283.968 304h84.016L368 272a144 144 0 0 1 144-144z m0 48a96 96 0 0 0-95.936 92.4L416 272v32h192v-32a96 96 0 0 0-92.4-95.936L512 176z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle }} className={classnames('icon', customClassName)} />) }
|
||||
|
||||
</Block>
|
||||
)
|
||||
|
||||
@@ -1,20 +1,21 @@
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import React, { memo, ReactNode, useMemo, useState } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import React, { memo, useMemo, useState } from 'react'
|
||||
import LoadingCard from '../loadingCard'
|
||||
import style from './index.module.scss'
|
||||
import DotLoading from '@/components/dotLoading'
|
||||
import LoadingCard from '../loadingCard'
|
||||
import Empty from '@/components/empty'
|
||||
import { EMPTY_IMAGE, SEARCH_EMPTY_IMAGE } from '@/common/constant'
|
||||
|
||||
export type StatusParam = 0 | 1 | 2 | 3
|
||||
|
||||
type Params = {
|
||||
interface Params {
|
||||
styleObj?: React.CSSProperties
|
||||
selfonScrollToLower?: () => void
|
||||
enableLoadMoreStatus?: boolean
|
||||
safeAreaInsetBottom?: boolean
|
||||
moreStatus?: boolean
|
||||
statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
|
||||
statusMore?: StatusParam // 0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
|
||||
children?: ReactNode
|
||||
lowerThresholdNum?: number
|
||||
selfOnScrollToUpper?: () => void
|
||||
@@ -49,7 +50,7 @@ export default memo(
|
||||
moreStatus = true,
|
||||
statusMore = 0,
|
||||
enableBackToTop = true,
|
||||
emptySlot
|
||||
emptySlot,
|
||||
}: Params) => {
|
||||
const scrollToLower = () => {
|
||||
selfonScrollToLower?.()
|
||||
@@ -57,7 +58,7 @@ export default memo(
|
||||
const scrollToUpper = () => {
|
||||
selfOnScrollToUpper?.()
|
||||
}
|
||||
const scroll = e => {
|
||||
const scroll = (e) => {
|
||||
selfOnScroll?.(e)
|
||||
}
|
||||
const refresherPulling = () => {
|
||||
@@ -73,7 +74,7 @@ export default memo(
|
||||
selfOnRefresherAbort?.()
|
||||
}
|
||||
|
||||
//返回顶部
|
||||
// 返回顶部
|
||||
const scrollTop = useMemo(() => {
|
||||
if (statusMore == 0) {
|
||||
return 0.1
|
||||
@@ -84,36 +85,40 @@ export default memo(
|
||||
if (enableLoadMoreStatus) {
|
||||
if (!moreStatus) {
|
||||
return (
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
<View style={{ paddingBottom: `${paddingBottom}rpx` }} className={style.scrollViewCon}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<>
|
||||
{(statusMore == 2 || statusMore == 3) && (
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
<View style={{ paddingBottom: `${paddingBottom}rpx` }} className={style.scrollViewCon}>
|
||||
{children}
|
||||
<View className={style.infinite_scroll}>
|
||||
{statusMore == 2 ? (
|
||||
<View className={style.loading_more}>
|
||||
{statusMore == 2
|
||||
? (
|
||||
<View className={style.loading_more}>
|
||||
加载中
|
||||
<DotLoading />
|
||||
</View>
|
||||
) : (
|
||||
<View className={style.noMore}>没有更多数据了</View>
|
||||
)}
|
||||
<DotLoading />
|
||||
</View>
|
||||
)
|
||||
: (
|
||||
<View className={style.noMore}>没有更多数据了</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
{statusMore == 0 && <LoadingCard />}
|
||||
{statusMore == 1 && (emptySlot ? emptySlot : <Empty picUrl={SEARCH_EMPTY_IMAGE} text='暂无数据'/>)}
|
||||
{statusMore == 1 && (emptySlot || <Empty picUrl={SEARCH_EMPTY_IMAGE} text="暂无数据" />)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
<View style={{ paddingBottom: `${paddingBottom}rpx` }} className={style.scrollViewCon}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
@@ -123,7 +128,7 @@ export default memo(
|
||||
return (
|
||||
<>
|
||||
<ScrollView
|
||||
id='infiniteScroll'
|
||||
id="infiniteScroll"
|
||||
style={styleObj}
|
||||
className={style.scroll_main}
|
||||
scrollY
|
||||
@@ -137,11 +142,12 @@ export default memo(
|
||||
onRefresherRefresh={() => refresherRefresh()}
|
||||
onRefresherRestore={() => refresherRestore()}
|
||||
onRefresherAbort={() => refresherAbort()}
|
||||
refresherBackground='#F8F8F8'
|
||||
refresherBackground="#F8F8F8"
|
||||
enableBackToTop={enableBackToTop}
|
||||
scrollTop={scrollTop}>
|
||||
scrollTop={scrollTop}
|
||||
>
|
||||
{component()}
|
||||
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
|
||||
{safeAreaInsetBottom && <View className="common_safe_area_y"></View>}
|
||||
</ScrollView>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Button, Radio, View } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
@@ -25,7 +25,7 @@ const LayoutBlock: FC<PropsType> = (props) => {
|
||||
return classObject
|
||||
}
|
||||
|
||||
const handleClick = (event)=>{
|
||||
const handleClick = (event) => {
|
||||
console.log('event==>', event)
|
||||
onClick && onClick()
|
||||
}
|
||||
@@ -34,7 +34,8 @@ const LayoutBlock: FC<PropsType> = (props) => {
|
||||
<View
|
||||
className={classnames(styles.layoutBlock, getClassName(), customClassName)}
|
||||
style={customStyle}
|
||||
onClick={handleClick}>
|
||||
onClick={handleClick}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { memo, useMemo } from "react"
|
||||
import style from './index.module.scss'
|
||||
export default memo(({width=60, color='#6190e8'}:{width?:number, color?:string}) => {
|
||||
const styleObj = useMemo(() => {
|
||||
let obj = {}
|
||||
if(width > 0)
|
||||
obj = {width: width + 'rpx', height:width + 'rpx'}
|
||||
if(color)
|
||||
obj = {...obj, borderColor: color+' transparent transparent'}
|
||||
return obj
|
||||
|
||||
}, [width, color])
|
||||
console.log('loading:::')
|
||||
return (
|
||||
<View className={style.loading}
|
||||
style={styleObj}
|
||||
>
|
||||
<View style={styleObj} className={style.loading__ring}></View>
|
||||
<View style={styleObj} className={style.loading__ring}></View>
|
||||
<View style={styleObj} className={style.loading__ring}></View>
|
||||
</View>
|
||||
)
|
||||
|
||||
})
|
||||
import { View } from '@tarojs/components'
|
||||
import { memo, useMemo } from 'react'
|
||||
import style from './index.module.scss'
|
||||
|
||||
export default memo(({ width = 60, color = '#6190e8' }: { width?: number; color?: string }) => {
|
||||
const styleObj = useMemo(() => {
|
||||
let obj = {}
|
||||
if (width > 0) { obj = { width: `${width}rpx`, height: `${width}rpx` } }
|
||||
if (color) { obj = { ...obj, borderColor: `${color} transparent transparent` } }
|
||||
return obj
|
||||
}, [width, color])
|
||||
console.log('loading:::')
|
||||
return (
|
||||
<View className={style.loading}
|
||||
style={styleObj}
|
||||
>
|
||||
<View style={styleObj} className={style.loading__ring}></View>
|
||||
<View style={styleObj} className={style.loading__ring}></View>
|
||||
<View style={styleObj} className={style.loading__ring}></View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { View, Image } from '@tarojs/components'
|
||||
import Loading from '@/components/loading'
|
||||
import style from './index.module.scss'
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import { memo } from 'react'
|
||||
import style from './index.module.scss'
|
||||
import Loading from '@/components/loading'
|
||||
import Empty from '@/components/empty'
|
||||
|
||||
type Params = {
|
||||
interface Params {
|
||||
title?: string
|
||||
loadingIcon?: boolean
|
||||
}
|
||||
export default memo((props: Params) => {
|
||||
console.log(props)
|
||||
const {
|
||||
title = '加载中...', //显示的文字
|
||||
loadingIcon = true, //是否显示加载图标
|
||||
title = '加载中...', // 显示的文字
|
||||
loadingIcon = true, // 是否显示加载图标
|
||||
} = props
|
||||
console.log('loadingCard:::', props)
|
||||
return (
|
||||
<>
|
||||
<View className={style.loadingCard_main}>
|
||||
{loadingIcon && <Loading />}
|
||||
{!loadingIcon && <Image className={style.pic} mode='aspectFill' lazyLoad src={'https://cdn.zzfzyc.com/empty.png'}></Image>}
|
||||
{!loadingIcon && <Image className={style.pic} mode="aspectFill" lazyLoad src="https://cdn.zzfzyc.com/empty.png"></Image>}
|
||||
<View className={style.loading_text}>{title}</View>
|
||||
</View>
|
||||
</>
|
||||
|
||||
@@ -1,48 +1,49 @@
|
||||
import { MovableArea, MovableView, View } from "@tarojs/components"
|
||||
import Taro, { useReady } from "@tarojs/taro"
|
||||
import { ReactElement, useEffect, useRef, useState } from "react"
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
import { GetShoppingCartApi } from "@/api/shopCart";
|
||||
import useCommonData from "@/use/useCommonData";
|
||||
import { useSelector } from "@/reducers/hooks";
|
||||
import { MovableArea, MovableView, View } from '@tarojs/components'
|
||||
import Taro, { useReady } from '@tarojs/taro'
|
||||
import type { ReactElement } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { GetShoppingCartApi } from '@/api/shopCart'
|
||||
import useCommonData from '@/use/useCommonData'
|
||||
import { useSelector } from '@/reducers/hooks'
|
||||
|
||||
type param = {
|
||||
children?: ReactElement|null,
|
||||
onClick?: () => void
|
||||
interface param {
|
||||
children?: ReactElement|null
|
||||
onClick?: () => void
|
||||
}
|
||||
export default ({children = null, onClick}:param) => {
|
||||
//获取购物车数据数量
|
||||
const {getShopCount, commonData} = useCommonData()
|
||||
|
||||
const [screenHeight, setScreenHeight] = useState(0)
|
||||
const [showMoveBtn, setShowMoveBtn] = useState(false)
|
||||
const screenWidthRef = useRef(0)
|
||||
useReady(() => {
|
||||
const res = Taro.getSystemInfoSync()
|
||||
if(res.screenHeight) {
|
||||
let ratio = 750 / res.screenWidth
|
||||
setScreenHeight(res.screenHeight*ratio - 460)
|
||||
screenWidthRef.current = res.screenWidth/2
|
||||
}
|
||||
setShowMoveBtn(true)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
getShopCount()
|
||||
}, [])
|
||||
|
||||
const dragEnd = (e) => {
|
||||
export default ({ children = null, onClick }: param) => {
|
||||
// 获取购物车数据数量
|
||||
const { getShopCount, commonData } = useCommonData()
|
||||
|
||||
const [screenHeight, setScreenHeight] = useState(0)
|
||||
const [showMoveBtn, setShowMoveBtn] = useState(false)
|
||||
const screenWidthRef = useRef(0)
|
||||
useReady(() => {
|
||||
const res = Taro.getSystemInfoSync()
|
||||
if (res.screenHeight) {
|
||||
const ratio = 750 / res.screenWidth
|
||||
setScreenHeight(res.screenHeight * ratio - 460)
|
||||
screenWidthRef.current = res.screenWidth / 2
|
||||
}
|
||||
setShowMoveBtn(true)
|
||||
})
|
||||
|
||||
return (
|
||||
<MovableArea className={styles.movableItem}>
|
||||
{children}
|
||||
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
|
||||
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
|
||||
{(commonData.shopCount > 0)&&<View className={styles.product_num}>{commonData.shopCount > 99?'99+':commonData.shopCount}</View>}
|
||||
</MovableView>}
|
||||
</MovableArea>
|
||||
)
|
||||
}
|
||||
useEffect(() => {
|
||||
getShopCount()
|
||||
}, [])
|
||||
|
||||
const dragEnd = (e) => {
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<MovableArea className={styles.movableItem}>
|
||||
{children}
|
||||
{showMoveBtn && <MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia x="630rpx" y={`${screenHeight}rpx`} onTouchEnd={e => dragEnd(e)}>
|
||||
<View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)} ></View>
|
||||
{(commonData.shopCount > 0) && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
|
||||
</MovableView>}
|
||||
</MovableArea>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
@@ -32,11 +32,11 @@ const NormalButton: FC<PropsType> = (props) => {
|
||||
circle = false,
|
||||
customStyles = {},
|
||||
customClassName = '',
|
||||
customTextClassName = ''
|
||||
customTextClassName = '',
|
||||
} = props
|
||||
const getClassName = () => {
|
||||
const classObject = {
|
||||
[styles[`button--disabled`]]: disabled,
|
||||
[styles['button--disabled']]: disabled,
|
||||
[styles[`button--${size}`]]: size,
|
||||
[styles[`button--${type}`]]: type,
|
||||
[styles['button--round']]: round,
|
||||
@@ -53,9 +53,8 @@ const NormalButton: FC<PropsType> = (props) => {
|
||||
onClick && onClick(event)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={classnames(styles['button'], getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
|
||||
<View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
|
||||
<View className={classnames(styles['button--text'], customTextClassName)}>{children}</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,202 +1,205 @@
|
||||
import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
|
||||
import { alert } from "@/common/common"
|
||||
import { ORDER_STATUS, SALE_MODE } from "@/common/enum"
|
||||
import { ScrollView, Text, View } from "@tarojs/components"
|
||||
import Taro from "@tarojs/taro"
|
||||
import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import { ScrollView, Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { ORDER_STATUS, SALE_MODE } from '@/common/enum'
|
||||
import { alert } from '@/common/common'
|
||||
import { CancelOrderApi, ReceiveOrderApi } from '@/api/order'
|
||||
|
||||
type Param = {
|
||||
orderInfo: {
|
||||
status: number, //订单状态
|
||||
orderId: number, //订单id
|
||||
actual_amount: number, //实付金额
|
||||
wait_pay_amount: number, //待付金额
|
||||
sale_mode: number //订单类型
|
||||
}|null,
|
||||
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
|
||||
interface Param {
|
||||
orderInfo: {
|
||||
status: number // 订单状态
|
||||
orderId: number // 订单id
|
||||
actual_amount: number // 实付金额
|
||||
wait_pay_amount: number // 待付金额
|
||||
sale_mode: number // 订单类型
|
||||
}|null
|
||||
onClick?: (val: number) => void // 点击后触发的事件，返回订单状态
|
||||
}
|
||||
|
||||
export default memo(({orderInfo, onClick}:Param) => {
|
||||
//订单状态枚举
|
||||
const {
|
||||
SaleOrderStatusBooking,
|
||||
SaleOrderStatusArranging,
|
||||
SaleOrderStatusArranged,
|
||||
SaleOrderStatusWaitingDelivery,
|
||||
SaleOrderStatusComplete,
|
||||
SaleOrderStatusRefund,
|
||||
SaleOrderStatusWaitingPayment,
|
||||
SaleOrderStatusWaitingReceipt,
|
||||
SaleOrderStatusAlreadyReceipt,
|
||||
SaleorderstatusWaitingPrePayment
|
||||
} = ORDER_STATUS
|
||||
export default memo(({ orderInfo, onClick }: Param) => {
|
||||
// 订单状态枚举
|
||||
const {
|
||||
SaleOrderStatusBooking,
|
||||
SaleOrderStatusArranging,
|
||||
SaleOrderStatusArranged,
|
||||
SaleOrderStatusWaitingDelivery,
|
||||
SaleOrderStatusComplete,
|
||||
SaleOrderStatusRefund,
|
||||
SaleOrderStatusWaitingPayment,
|
||||
SaleOrderStatusWaitingReceipt,
|
||||
SaleOrderStatusAlreadyReceipt,
|
||||
SaleorderstatusWaitingPrePayment,
|
||||
} = ORDER_STATUS
|
||||
|
||||
//订单类型
|
||||
const {
|
||||
SaLeModeBulk,
|
||||
SaleModeLengthCut,
|
||||
SaLeModeWeightCut,
|
||||
} = SALE_MODE
|
||||
|
||||
//订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现
|
||||
const orderBtnsList = useRef([
|
||||
{
|
||||
id: 1,
|
||||
value: [SaleOrderStatusBooking.value,
|
||||
SaleOrderStatusArranging.value,
|
||||
SaleOrderStatusArranged.value,
|
||||
SaleOrderStatusWaitingPayment.value,
|
||||
SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货
|
||||
label: '取消订单'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
|
||||
label: '去付款'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货
|
||||
label: '申请退款'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
|
||||
label: '查看物流'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应： 待收货, 已收货, 已退款
|
||||
label: '申请退货'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货
|
||||
label: '确认收货'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款
|
||||
label: '再次购买'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: [SaleOrderStatusBooking.value], //按钮对应： 待接单
|
||||
label: '退款'
|
||||
},
|
||||
])
|
||||
|
||||
// 订单类型
|
||||
const {
|
||||
SaLeModeBulk,
|
||||
SaleModeLengthCut,
|
||||
SaLeModeWeightCut,
|
||||
} = SALE_MODE
|
||||
|
||||
//判断是否显示该按钮
|
||||
const orderBtnsShow = (item) => {
|
||||
if(orderInfo) {
|
||||
if(item.id == 1) {
|
||||
//取消订单按钮
|
||||
return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款
|
||||
} else if (item.id == 2) {
|
||||
//去付款按钮
|
||||
return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示
|
||||
} else if(item.id == 3 ) {
|
||||
//申请退款, 只有大货才有
|
||||
return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款
|
||||
} else if( item.id == 8) {
|
||||
//退款按钮（直接退款不用申请）, 只有散剪和剪板有
|
||||
return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款
|
||||
}
|
||||
else {
|
||||
//其他按钮
|
||||
return item.value.includes(orderInfo.status)
|
||||
}
|
||||
// 订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现
|
||||
const orderBtnsList = useRef([
|
||||
{
|
||||
id: 1,
|
||||
value: [SaleOrderStatusBooking.value,
|
||||
SaleOrderStatusArranging.value,
|
||||
SaleOrderStatusArranged.value,
|
||||
SaleOrderStatusWaitingPayment.value,
|
||||
SaleOrderStatusWaitingDelivery.value], // 取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货
|
||||
label: '取消订单',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], // 去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
|
||||
label: '去付款',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: [SaleOrderStatusWaitingDelivery.value], // 申请退款按钮对应： 待发货
|
||||
label: '申请退款',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], // 取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
|
||||
label: '查看物流',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], // 申请退货按钮对应： 待收货, 已收货, 已退款
|
||||
label: '申请退货',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: [SaleOrderStatusWaitingReceipt.value], // 确认收货按钮对应： 待收货
|
||||
label: '确认收货',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], // 再次购买按钮对应： 待收货，已收货，已完成, 已退款
|
||||
label: '再次购买',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: [SaleOrderStatusBooking.value], // 按钮对应： 待接单
|
||||
label: '退款',
|
||||
},
|
||||
])
|
||||
|
||||
// 判断是否显示该按钮
|
||||
const orderBtnsShow = (item) => {
|
||||
if (orderInfo) {
|
||||
if (item.id == 1) {
|
||||
// 取消订单按钮
|
||||
return (orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) // 在待发货之前没有付过款
|
||||
}
|
||||
else if (item.id == 2) {
|
||||
// 去付款按钮
|
||||
return (orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) // 只要没有付完款就显示
|
||||
}
|
||||
else if (item.id == 3) {
|
||||
// 申请退款, 只有大货才有
|
||||
return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) // 大货在待发货付过款
|
||||
}
|
||||
else if (item.id == 8) {
|
||||
// 退款按钮（直接退款不用申请）, 只有散剪和剪板有
|
||||
return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) // 散剪和剪板在待接单时付过款
|
||||
}
|
||||
else {
|
||||
// 其他按钮
|
||||
return item.value.includes(orderInfo.status)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示的按钮数组
|
||||
const orderBtnsShowList: { id: number; value: any; label: string }[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter((item) => {
|
||||
return orderBtnsShow(item)
|
||||
})
|
||||
}, [orderInfo])
|
||||
|
||||
// 点击按钮操作
|
||||
const submitBtns = (val, index) => {
|
||||
(val == 1) && cancelOrder(); // 取消订单按钮
|
||||
(val == 2) && onClick?.(2); // 去付款按钮
|
||||
(val == 6) && receiveOrder() // 确认收货
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
const { fetchData: cancelFetchData } = CancelOrderApi()
|
||||
const cancelOrder = () => {
|
||||
Taro.showModal({
|
||||
title: '要取消该订单吗？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await cancelFetchData({ id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(1)
|
||||
}
|
||||
else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//显示的按钮数组
|
||||
const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => {
|
||||
return orderBtnsList.current.filter(item => {
|
||||
return orderBtnsShow(item)
|
||||
})
|
||||
}, [orderInfo])
|
||||
// 确认订单
|
||||
const { fetchData: receiveOrderFetchData } = ReceiveOrderApi()
|
||||
const receiveOrder = async() => {
|
||||
console.log('123456')
|
||||
Taro.showModal({
|
||||
title: '确定收货？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await receiveOrderFetchData({ sale_order_id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
onClick?.(6)
|
||||
alert.success('收货成功')
|
||||
}
|
||||
else {
|
||||
alert.error('收货失败')
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return { top: `-${(orderBtnsShowList.length - 3) * 70 + 10}rpx`, left: `-${10}rpx` }
|
||||
}, [orderBtnsShowList])
|
||||
|
||||
return (
|
||||
<View className={styles.btns_list}>
|
||||
{(orderBtnsShowList.length > 3) && <View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(true)}>更多</Text>
|
||||
{showMore && <View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
return ((index >= 3) && <View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
|
||||
})}
|
||||
</View>
|
||||
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
|
||||
</View>}
|
||||
</View>}
|
||||
|
||||
//点击按钮操作
|
||||
const submitBtns = (val, index) => {
|
||||
(val == 1)&&cancelOrder(); //取消订单按钮
|
||||
(val == 2)&&onClick?.(2); //去付款按钮
|
||||
(val == 6)&&receiveOrder(); //确认收货
|
||||
|
||||
}
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3) && <View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>,
|
||||
)}
|
||||
</View>
|
||||
|
||||
//取消订单
|
||||
const {fetchData: cancelFetchData} = CancelOrderApi()
|
||||
const cancelOrder = () => {
|
||||
Taro.showModal({
|
||||
title: '要取消该订单吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let res = await cancelFetchData({id: orderInfo?.orderId})
|
||||
if(res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(1)
|
||||
} else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//确认订单
|
||||
const {fetchData: receiveOrderFetchData} = ReceiveOrderApi()
|
||||
const receiveOrder = async () => {
|
||||
console.log('123456')
|
||||
Taro.showModal({
|
||||
title: '确定收货？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId})
|
||||
if(res.success){
|
||||
onClick?.(6)
|
||||
alert.success('收货成功')
|
||||
} else {
|
||||
alert.error('收货失败')
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
|
||||
}, [orderBtnsShowList])
|
||||
|
||||
return (
|
||||
<View className={styles.btns_list}>
|
||||
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
|
||||
<Text onClick={() => setShowMore(true)}>更多</Text>
|
||||
{showMore&&<View className={styles.more_con}>
|
||||
<View className={styles.more_list} style={styleTop}>
|
||||
{orderBtnsShowList.map((item, index) => {
|
||||
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
|
||||
})}
|
||||
</View>
|
||||
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
|
||||
</View>}
|
||||
</View>}
|
||||
|
||||
<View className={styles.list_scroll}>
|
||||
{orderBtnsShowList.map((item, index) =>
|
||||
(index < 3)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
})
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
import { CancelOrderApi, ReceiveOrderApi } from '@/api/order'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { ORDER_STATUS, SALE_MODE, SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useRef, memo, useState, useMemo } from 'react'
|
||||
import { memo, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { ORDER_STATUS, SALE_MODE, SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { CancelOrderApi, ReceiveOrderApi } from '@/api/order'
|
||||
import { AddShoppingCartApi } from '@/api/shopCart'
|
||||
import { ApplyRefundApi } from '@/api/salesAfterOrder'
|
||||
import { UseSubscriptionMessage } from '@/use/useCommon'
|
||||
import { throttle } from '@/common/util'
|
||||
|
||||
type Param = {
|
||||
interface Param {
|
||||
orderInfo: {
|
||||
status: number //订单状态
|
||||
orderId: number //订单id
|
||||
actual_amount: number //实付金额
|
||||
wait_pay_amount: number //待付金额
|
||||
sale_mode: number //订单类型
|
||||
av_return_roll?: number //可退数量
|
||||
is_return?: true | false //是否申请了售后
|
||||
is_should_collect_audit?: true | false //应收单是否审核
|
||||
status: number // 订单状态
|
||||
orderId: number // 订单id
|
||||
actual_amount: number // 实付金额
|
||||
wait_pay_amount: number // 待付金额
|
||||
sale_mode: number // 订单类型
|
||||
av_return_roll?: number // 可退数量
|
||||
is_return?: true | false // 是否申请了售后
|
||||
is_should_collect_audit?: true | false // 应收单是否审核
|
||||
}
|
||||
showStatus?: 'detail' | 'list' //订单详情，订单列表
|
||||
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
|
||||
showStatus?: 'detail' | 'list' // 订单详情，订单列表
|
||||
onClick?: (val: number) => void // 点击后触发的事件，返回订单状态
|
||||
}
|
||||
|
||||
export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
//订单状态枚举
|
||||
// 订单状态枚举
|
||||
const {
|
||||
SaleOrderStatusBooking,
|
||||
SaleOrderStatusArranging,
|
||||
@@ -42,19 +42,19 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
SaleOrderStatusTaking,
|
||||
} = ORDER_STATUS
|
||||
|
||||
//订单类型
|
||||
// 订单类型
|
||||
const { SaLeModeBulk, SaleModeLengthCut, SaLeModeWeightCut } = SALE_MODE
|
||||
|
||||
//注册按钮, id:按钮id唯一，label：按钮名称，sort：排序数字越大越靠后，validatarFunc：验证
|
||||
type orderBtnsListParams = { id: number; label: string; sort: number; validatarFunc: (val: typeof orderInfo) => any }
|
||||
// 注册按钮, id:按钮id唯一，label：按钮名称，sort：排序数字越大越靠后，validatarFunc：验证
|
||||
interface orderBtnsListParams { id: number; label: string; sort: number; validatarFunc: (val: typeof orderInfo) => any }
|
||||
const orderBtnsList = useRef<orderBtnsListParams[]>([
|
||||
{
|
||||
id: 1,
|
||||
label: '取消订单',
|
||||
sort: 1,
|
||||
validatarFunc: (orderInfo) => {
|
||||
//在待发货之前没有付过款
|
||||
let orderStatus = [
|
||||
// 在待发货之前没有付过款
|
||||
const orderStatus = [
|
||||
SaleorderstatusWaitingPrePayment.value,
|
||||
SaleOrderStatusBooking.value,
|
||||
SaleOrderStatusArranging.value,
|
||||
@@ -71,8 +71,8 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
label: '去付款',
|
||||
sort: 100,
|
||||
validatarFunc: (orderInfo) => {
|
||||
//只要没有付完款就显示
|
||||
let orderStatus = [
|
||||
// 只要没有付完款就显示
|
||||
const orderStatus = [
|
||||
SaleOrderStatusTaking.value,
|
||||
SaleorderstatusWaitingPrePayment.value,
|
||||
SaleOrderStatusWaitingPayment.value,
|
||||
@@ -89,8 +89,8 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
label: '申请退款',
|
||||
sort: 5,
|
||||
validatarFunc: (orderInfo) => {
|
||||
//大货在待发货付过款
|
||||
let orderStatus = [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value]
|
||||
// 大货在待发货付过款
|
||||
const orderStatus = [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value]
|
||||
return orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount > 0 && orderInfo.av_return_roll && orderStatus.includes(orderInfo.status)
|
||||
},
|
||||
},
|
||||
@@ -99,7 +99,7 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
label: '申请退货',
|
||||
sort: 5,
|
||||
validatarFunc: (orderInfo) => {
|
||||
let orderStatus = [SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value]
|
||||
const orderStatus = [SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value]
|
||||
return orderInfo.av_return_roll && orderStatus.includes(orderInfo.status)
|
||||
},
|
||||
},
|
||||
@@ -108,7 +108,7 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
label: '确认收货',
|
||||
sort: 10,
|
||||
validatarFunc: (orderInfo) => {
|
||||
let orderStatus = [SaleOrderStatusWaitingReceipt.value]
|
||||
const orderStatus = [SaleOrderStatusWaitingReceipt.value]
|
||||
return orderStatus.includes(orderInfo.status)
|
||||
},
|
||||
},
|
||||
@@ -125,8 +125,8 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
label: '退款',
|
||||
sort: 5,
|
||||
validatarFunc: (orderInfo) => {
|
||||
//散剪和剪板在待接单时付过款
|
||||
let orderStatus = [SaleOrderStatusBooking.value]
|
||||
// 散剪和剪板在待接单时付过款
|
||||
const orderStatus = [SaleOrderStatusBooking.value]
|
||||
return orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount > 0 && orderStatus.includes(orderInfo.status)
|
||||
},
|
||||
},
|
||||
@@ -143,132 +143,144 @@ export default memo(({ orderInfo, showStatus = 'detail', onClick }: Param) => {
|
||||
label: '销售码单',
|
||||
sort: 9,
|
||||
validatarFunc: (orderInfo) => {
|
||||
if (orderInfo.sale_mode === 1 && showStatus == 'detail') return true
|
||||
if (orderInfo.sale_mode !== 1 && showStatus == 'detail') return orderInfo.is_should_collect_audit
|
||||
if (orderInfo.sale_mode === 1 && showStatus == 'detail') { return true }
|
||||
if (orderInfo.sale_mode !== 1 && showStatus == 'detail') { return orderInfo.is_should_collect_audit }
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
//显示的按钮数组
|
||||
// 显示的按钮数组
|
||||
const orderBtnsShowList: orderBtnsListParams[] = useMemo(() => {
|
||||
let list = orderBtnsList.current.filter((item) => {
|
||||
const list = orderBtnsList.current.filter((item) => {
|
||||
return item.validatarFunc(orderInfo)
|
||||
})
|
||||
return list.sort((a, b) => a.sort - b.sort)
|
||||
}, [orderInfo])
|
||||
|
||||
//小程序订阅
|
||||
// 小程序订阅
|
||||
const { ApplyGoods } = SUBSCRIPTION_MESSAGE_SCENE
|
||||
const { openSubscriptionMessage } = UseSubscriptionMessage()
|
||||
|
||||
//点击按钮操作
|
||||
const submitBtns = throttle(async (val, index) => {
|
||||
// 点击按钮操作
|
||||
const submitBtns = throttle(async(val, index) => {
|
||||
if (val == 1) {
|
||||
cancelOrder()
|
||||
} else if (val == 6) {
|
||||
}
|
||||
else if (val == 6) {
|
||||
receiveOrder()
|
||||
} else if (val == 5) {
|
||||
}
|
||||
else if (val == 5) {
|
||||
applyProduct()
|
||||
} else if (val == 3) {
|
||||
}
|
||||
else if (val == 3) {
|
||||
bigApplyRefurn()
|
||||
} else if (val == 8) {
|
||||
}
|
||||
else if (val == 8) {
|
||||
applyRefund()
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
onClick?.(val)
|
||||
}
|
||||
}, 800)
|
||||
|
||||
//大货申请退款
|
||||
// 大货申请退款
|
||||
const bigApplyRefurn = () => {
|
||||
Taro.showModal({
|
||||
title: '要申请退款吗？',
|
||||
success: async function (res) {
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
await openSubscriptionMessage({ orderId: orderInfo?.orderId, scenes: ApplyGoods.value })
|
||||
onClick?.(3)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//取消订单
|
||||
// 取消订单
|
||||
const { fetchData: cancelFetchData } = CancelOrderApi()
|
||||
const cancelOrder = () => {
|
||||
Taro.showModal({
|
||||
title: '要取消该订单吗？',
|
||||
success: async function (res) {
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
let res = await cancelFetchData({ id: orderInfo?.orderId })
|
||||
const res = await cancelFetchData({ id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
onClick?.(1)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
alert.none(res.msg)
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//确认订单
|
||||
// 确认订单
|
||||
const { fetchData: receiveOrderFetchData } = ReceiveOrderApi()
|
||||
const receiveOrder = async () => {
|
||||
const receiveOrder = async() => {
|
||||
Taro.showModal({
|
||||
title: '确定收货？',
|
||||
success: async function (res) {
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
alert.showLoading('收货中', true)
|
||||
let res = await receiveOrderFetchData({ sale_order_id: orderInfo?.orderId })
|
||||
const res = await receiveOrderFetchData({ sale_order_id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
onClick?.(6)
|
||||
alert.success('收货成功')
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
alert.error('收货失败')
|
||||
}
|
||||
alert.hideLoading()
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//退款
|
||||
// 退款
|
||||
const { fetchData: fetchDataApplyRefund } = ApplyRefundApi()
|
||||
const applyRefund = async () => {
|
||||
const applyRefund = async() => {
|
||||
Taro.showModal({
|
||||
title: '确定退款？',
|
||||
success: async function async(res) {
|
||||
if (res.confirm) {
|
||||
await openSubscriptionMessage({ orderId: orderInfo?.orderId, scenes: ApplyGoods.value })
|
||||
alert.showLoading('申请中', true)
|
||||
let res = await fetchDataApplyRefund({ sale_order_id: orderInfo?.orderId })
|
||||
const res = await fetchDataApplyRefund({ sale_order_id: orderInfo?.orderId })
|
||||
if (res.success) {
|
||||
alert.success('申请成功')
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
alert.error('申请失败')
|
||||
}
|
||||
alert.hideLoading()
|
||||
onClick?.(8)
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//申请退货
|
||||
const applyProduct = async () => {
|
||||
if (!orderInfo?.av_return_roll) return alert.none('该订单没有可退条数')
|
||||
// 申请退货
|
||||
const applyProduct = async() => {
|
||||
if (!orderInfo?.av_return_roll) { return alert.none('该订单没有可退条数') }
|
||||
await openSubscriptionMessage({ orderId: orderInfo?.orderId, scenes: ApplyGoods.value })
|
||||
goLink('/pages/applyAfterSales/index', { id: orderInfo?.orderId })
|
||||
}
|
||||
|
||||
//显示更多按钮
|
||||
// 显示更多按钮
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const styleTop = useMemo(() => {
|
||||
return { top: `-${(orderBtnsShowList.length - 3) * 70 + 10}rpx`, left: `-${10}rpx` }
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
import { RootPortal, View } from '@tarojs/components'
|
||||
import style from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { memo, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import CloseBtnIcon from '@/components/closeBtn'
|
||||
import Taro from '@tarojs/taro'
|
||||
import classnames from 'classnames'
|
||||
import type { ReactNode } from 'react'
|
||||
import { memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import style from './index.module.scss'
|
||||
import CloseBtnIcon from '@/components/closeBtn'
|
||||
|
||||
export interface PopupEvent {
|
||||
onClose?: () => void //关闭事件
|
||||
animationEnd?: () => void //弹出动画结束
|
||||
onClose?: () => void // 关闭事件
|
||||
animationEnd?: () => void // 弹出动画结束
|
||||
}
|
||||
|
||||
export interface Params extends PopupEvent {
|
||||
title?: string //标题
|
||||
show?: boolean //显示显示弹窗
|
||||
showTitle?: boolean //是否显示标题
|
||||
isFixed?: boolean //二次弹窗触发
|
||||
children?: ReactNode //插槽内容
|
||||
title?: string // 标题
|
||||
show?: boolean // 显示显示弹窗
|
||||
showTitle?: boolean // 是否显示标题
|
||||
isFixed?: boolean // 二次弹窗触发
|
||||
children?: ReactNode // 插槽内容
|
||||
// IconButton?: ReactNode, //
|
||||
showIconButton?: boolean //是否显示关闭按钮
|
||||
position?: 'bottom' | 'top' | 'right' //弹出位置
|
||||
showIconButton?: boolean // 是否显示关闭按钮
|
||||
position?: 'bottom' | 'top' | 'right' // 弹出位置
|
||||
customStyle?: React.CSSProperties
|
||||
overlayStyle?: React.CSSProperties
|
||||
safeAreaInsetBottom?: boolean // 是否为iphoneX提供小黑条适配
|
||||
@@ -47,7 +48,8 @@ export default memo(
|
||||
animationEnd?.()
|
||||
customStyle.overflow = 'unset'
|
||||
}, 260)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
clearTimeout(animationTime.current)
|
||||
}
|
||||
}, [show])
|
||||
@@ -60,20 +62,22 @@ export default memo(
|
||||
|
||||
return (
|
||||
<View className={style.drawer_main}>
|
||||
<View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
|
||||
<View catchMove className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
|
||||
{/* 遮罩层 start */}
|
||||
<View
|
||||
className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show, [style['drawer_mask--hidden']]: !showOverLay })}
|
||||
onClick={onClose}
|
||||
style={overlayStyle}></View>
|
||||
style={overlayStyle}
|
||||
></View>
|
||||
{/* 遮罩层 end */}
|
||||
<View
|
||||
style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}` }}
|
||||
className={classnames(style.drawer_container, style['drawer_container_' + position], {
|
||||
className={classnames(style.drawer_container, style[`drawer_container_${position}`], {
|
||||
[style.drawer_container_active]: show,
|
||||
[style[`drawer_container_${position}-withShadow`]]: !showOverLay,
|
||||
})}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
|
||||
{showIconButton && (
|
||||
<View className={style.common_close_btn_icon}>
|
||||
@@ -81,10 +85,10 @@ export default memo(
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View id='drawerContainerContext' className={style.drawer_container_context}>
|
||||
<View id="drawerContainerContext" className={style.drawer_container_context}>
|
||||
{children}
|
||||
</View>
|
||||
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
|
||||
{safeAreaInsetBottom && <View className="common_safe_area_y"></View>}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { Image, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { goLink } from '@/common/common'
|
||||
import styles from './index.module.scss'
|
||||
import { formatHashTag, formatImgUrl } from '@/common/format'
|
||||
import LabAndImg from '../LabAndImg'
|
||||
import { useCallback, useMemo } from 'react'
|
||||
import LabAndImg from '../LabAndImg'
|
||||
import styles from './index.module.scss'
|
||||
import { goLink } from '@/common/common'
|
||||
import { formatHashTag, formatImgUrl } from '@/common/format'
|
||||
|
||||
type Params = {
|
||||
interface Params {
|
||||
desStatus?: true | false
|
||||
productList?: any[]
|
||||
popupShow?: (any) => void
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { EnumSaleMode } from "@/common/Enumerate"
|
||||
import { FC } from "react"
|
||||
import Tag, { TagSize } from "../tag"
|
||||
import type { FC } from 'react'
|
||||
import type { TagSize } from '../tag'
|
||||
import Tag from '../tag'
|
||||
import { EnumSaleMode } from '@/common/Enumerate'
|
||||
|
||||
interface SaleModeProps {
|
||||
saleMode: number
|
||||
@@ -14,17 +15,17 @@ const SaleModeTag: FC<SaleModeProps> = (props) => {
|
||||
return (
|
||||
<>
|
||||
{saleMode === EnumSaleMode.Bulk && (
|
||||
<Tag circle type='bulk' size={size} customClassName={customClassName}>
|
||||
<Tag circle type="bulk" size={size} customClassName={customClassName}>
|
||||
大货
|
||||
</Tag>
|
||||
)}
|
||||
{saleMode === EnumSaleMode.Plate && (
|
||||
<Tag circle type='plate' size={size} customClassName={customClassName}>
|
||||
<Tag circle type="plate" size={size} customClassName={customClassName}>
|
||||
剪板
|
||||
</Tag>
|
||||
)}
|
||||
{saleMode === EnumSaleMode.BulkCut && (
|
||||
<Tag circle type='bulkCut' size={size} customClassName={customClassName}>
|
||||
<Tag circle type="bulkCut" size={size} customClassName={customClassName}>
|
||||
散剪
|
||||
</Tag>
|
||||
)}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import CloseBtn from '@/components/closeBtn'
|
||||
import classnames from 'classnames'
|
||||
import { forwardRef, memo, ReactNode, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import InputX from '../InputX/index'
|
||||
import styles from './index.module.scss'
|
||||
import CloseBtn from '@/components/closeBtn'
|
||||
|
||||
type Params = {
|
||||
interface Params {
|
||||
clickOnSearch?: (val: string) => void
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
@@ -20,9 +21,9 @@ type Params = {
|
||||
defaultValue?: string
|
||||
children?: ReactNode
|
||||
customRightSlot?: ReactNode
|
||||
adjustPosition?: boolean,
|
||||
adjustPosition?: boolean
|
||||
showScan?: boolean
|
||||
handScan?: () => void,
|
||||
handScan?: () => void
|
||||
cursorSpacing?: Number
|
||||
}
|
||||
|
||||
@@ -30,22 +31,22 @@ export default memo(
|
||||
forwardRef(
|
||||
(
|
||||
{
|
||||
clickOnSearch, //点击筛选按钮触发
|
||||
changeOnSearch, //输入文字触发
|
||||
clickOnSearch, // 点击筛选按钮触发
|
||||
changeOnSearch, // 输入文字触发
|
||||
adjustPosition = false,
|
||||
disabled = false, //是否禁用
|
||||
disabled = false, // 是否禁用
|
||||
placeholder = '输入搜索内容',
|
||||
showIcon = true, //是否显示关闭图标
|
||||
showBtn = false, //是否显示搜索按钮
|
||||
showIcon = true, // 是否显示关闭图标
|
||||
showBtn = false, // 是否显示搜索按钮
|
||||
btnStyle = {},
|
||||
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
|
||||
btnTitle = '搜索', //搜索文字
|
||||
defaultValue = '', //默认值
|
||||
placeIcon = 'inner', // 搜索图标位置：inner在里面，out在外面
|
||||
btnTitle = '搜索', // 搜索文字
|
||||
defaultValue = '', // 默认值
|
||||
children,
|
||||
customRightSlot,
|
||||
showScan = false,
|
||||
handScan,
|
||||
cursorSpacing = 0
|
||||
cursorSpacing = 0,
|
||||
}: Params,
|
||||
ref,
|
||||
) => {
|
||||
@@ -54,7 +55,6 @@ export default memo(
|
||||
setInputCon(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
|
||||
const onInputEven = (e) => {
|
||||
const value = e.detail.value
|
||||
setInputCon(value)
|
||||
@@ -80,23 +80,24 @@ export default memo(
|
||||
<View className={styles.search_con}>
|
||||
{showIcon && (
|
||||
<IconFont
|
||||
name='icon-sousuo'
|
||||
name="icon-sousuo"
|
||||
size={37}
|
||||
color='#ababac'
|
||||
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></IconFont>
|
||||
color="#ababac"
|
||||
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}
|
||||
></IconFont>
|
||||
)}
|
||||
<View className={styles.input_bar}>
|
||||
<InputX
|
||||
<InputX
|
||||
cursorSpacing={cursorSpacing as any}
|
||||
adjustPosition={adjustPosition}
|
||||
placeholderStyle='color:#ABABAB; font-size:26rpx'
|
||||
placeholderStyle="color:#ABABAB; font-size:26rpx"
|
||||
onConfirm={onSearch}
|
||||
disabled={disabled}
|
||||
value={inputCon}
|
||||
placeholder={placeholder}
|
||||
onInput={e => onInputEven(e)}
|
||||
customClassName={classnames(placeIcon == 'out' && styles.input_out)}
|
||||
customStyle={{width: '100%'}}
|
||||
customClassName={classnames(placeIcon == 'out' && styles.input_out)}
|
||||
customStyle={{ width: '100%' }}
|
||||
/>
|
||||
<View className={styles.search_closeBtn}>
|
||||
{!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}
|
||||
@@ -105,8 +106,9 @@ export default memo(
|
||||
<View
|
||||
onClick={() => {
|
||||
handScan?.()
|
||||
}}>
|
||||
<IconFont name={'icon-saomiao'} size={40} color={'#337FFF'}></IconFont>
|
||||
}}
|
||||
>
|
||||
<IconFont name="icon-saomiao" size={40} color="#337FFF"></IconFont>
|
||||
</View>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { memo, ReactNode, useMemo } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import { memo, useMemo } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import InputX from '../InputX'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Params = {
|
||||
interface Params {
|
||||
showIcon?: boolean
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
@@ -20,7 +21,7 @@ type Params = {
|
||||
}
|
||||
|
||||
export default memo((props: Params) => {
|
||||
let {
|
||||
const {
|
||||
showTitle = true,
|
||||
title = '标题',
|
||||
showIcon = false,
|
||||
@@ -33,14 +34,14 @@ export default memo((props: Params) => {
|
||||
titleStyle = {},
|
||||
} = props
|
||||
|
||||
let stylen = useMemo(() => {
|
||||
const stylen = useMemo(() => {
|
||||
if (!showBorder) {
|
||||
return { borderBottom: 0 }
|
||||
}
|
||||
return {}
|
||||
}, [showBorder])
|
||||
return (
|
||||
<View className={styles.searchInput_main} style={{ height: height, ...stylen }}>
|
||||
<View className={styles.searchInput_main} style={{ height, ...stylen }}>
|
||||
{showTitle && (
|
||||
<View className={styles.searchInput_title} style={titleStyle}>
|
||||
{title}
|
||||
@@ -51,7 +52,7 @@ export default memo((props: Params) => {
|
||||
<InputX disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
|
||||
)) || <>{props.children}</>}
|
||||
</View>
|
||||
{showIcon && <IconFont customClassName={styles.icon_more_self} name='icon-chakanquanbukehu' size={36} color='#333'></IconFont>}
|
||||
{showIcon && <IconFont customClassName={styles.icon_more_self} name="icon-chakanquanbukehu" size={36} color="#333"></IconFont>}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import styles from './index.module.scss'
|
||||
import { Image, Text, ScrollView, View, RootPortal } from '@tarojs/components'
|
||||
import { Image, RootPortal, ScrollView, Text, View } from '@tarojs/components'
|
||||
import React, { FC, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import Search from '../search'
|
||||
import Popup from '../popup'
|
||||
import { SelectProductListApi } from '@/api/index'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import { formatHashTag } from '@/common/format'
|
||||
import SearchInput from '../searchInput'
|
||||
import styles from './index.module.scss'
|
||||
import { formatHashTag } from '@/common/format'
|
||||
import { SelectProductListApi } from '@/api/index'
|
||||
|
||||
type PropsType = {
|
||||
interface PropsType {
|
||||
selectColorId: number
|
||||
noAll?: boolean
|
||||
onSelect?: Function
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
type productType = {
|
||||
interface productType {
|
||||
code?: string
|
||||
default?: boolean
|
||||
id: number
|
||||
@@ -46,19 +46,20 @@ const SelectProduct = forwardRef((params: PropsType, ref) => {
|
||||
)
|
||||
const originList = useRef<productType[]>([])
|
||||
|
||||
const getSelectData = item => {
|
||||
const getSelectData = (item) => {
|
||||
setSelectId(item.id)
|
||||
setSelectValue(changeName(item))
|
||||
setShowPopup(false)
|
||||
onSelect && onSelect(item)
|
||||
}
|
||||
|
||||
const changeName = item => {
|
||||
const changeName = (item) => {
|
||||
console.log('changeName', item)
|
||||
if (item) {
|
||||
if (item.id) {
|
||||
return formatHashTag(item.code, item.name)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return item.name
|
||||
}
|
||||
}
|
||||
@@ -68,8 +69,8 @@ const SelectProduct = forwardRef((params: PropsType, ref) => {
|
||||
getProductList()
|
||||
}, [])
|
||||
|
||||
const getProductList = async () => {
|
||||
let res = await fetchData()
|
||||
const getProductList = async() => {
|
||||
const res = await fetchData()
|
||||
// !noAll && res.data.list?.unshift({ name: '全部', id: 0 })
|
||||
!noAll && setProductList([{ name: '全部', id: 0 }, ...res.data.list])
|
||||
originList.current = [{ name: '全部', id: 0 }, ...res.data.list]
|
||||
@@ -81,13 +82,14 @@ const SelectProduct = forwardRef((params: PropsType, ref) => {
|
||||
setShowPopup(false)
|
||||
}
|
||||
|
||||
//输入了搜索关键字
|
||||
// 输入了搜索关键字
|
||||
const getSearchData = useCallback(
|
||||
async value => {
|
||||
async(value) => {
|
||||
console.log('e==>', value)
|
||||
if (value === '') {
|
||||
setProductList([...originList.current])
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
const res = await fetchData({
|
||||
code_or_name: value,
|
||||
})
|
||||
@@ -108,19 +110,19 @@ const SelectProduct = forwardRef((params: PropsType, ref) => {
|
||||
return (
|
||||
<>
|
||||
<View className={styles.select_input}>
|
||||
<SearchInput title='面料名称' showIcon={true} showBorder={false}>
|
||||
<SearchInput title="面料名称" showIcon showBorder={false}>
|
||||
<View onClick={clickEvent} className={classnames(styles.input_type, selectValue ? '' : 'noCon')}>
|
||||
{selectValue ? selectValue : '请选择'}
|
||||
{selectValue || '请选择'}
|
||||
</View>
|
||||
</SearchInput>
|
||||
</View>
|
||||
<Popup title='请选择面料名称' showTitle show={showPopup} onClose={closeEven} position='bottom' customStyle={{ zIndex: 9999 }}>
|
||||
<View style={{padding: '0 24rpx'}}>
|
||||
<Search placeholder='请输入编号/面料' showBtn={false} changeOnSearch={getSearchData} debounceTime={350}></Search>
|
||||
<Popup title="请选择面料名称" showTitle show={showPopup} onClose={closeEven} position="bottom" customStyle={{ zIndex: 9999 }}>
|
||||
<View style={{ padding: '0 24rpx' }}>
|
||||
<Search placeholder="请输入编号/面料" showBtn={false} changeOnSearch={getSearchData} debounceTime={350}></Search>
|
||||
</View>
|
||||
<View className={styles.selectList}>
|
||||
<ScrollView className={styles['selectList-scroll-view']} scrollY>
|
||||
{productList.map(item => {
|
||||
{productList.map((item) => {
|
||||
return (
|
||||
<View key={item.id} className={classnames(styles.selectItem, selectId == item.id ? styles.selected : '')} onClick={() => getSelectData(item)}>
|
||||
{changeName(item)}
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import { Image, ScrollView, View } from '@tarojs/components'
|
||||
import Popup from '@/components/popup'
|
||||
import classnames from 'classnames'
|
||||
import MCheckbox from '@/components/checkbox'
|
||||
import LoadingCard from '@/components/loadingCard'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import styles from './index.module.scss'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
|
||||
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
|
||||
import { setParam } from '@/common/system'
|
||||
import { debounce, throttle } from '@/common/util'
|
||||
import classnames from 'classnames'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import Counter from '../counter'
|
||||
import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from '@/api/user'
|
||||
import useCommonData from '@/use/useCommonData'
|
||||
import BindSalesmanPopup from '../bindSalesmanPopup'
|
||||
import LabAndImgShow from '../LabAndImgShow'
|
||||
import LabAndImg from '../LabAndImg'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import MCheckbox from '@/components/checkbox'
|
||||
import LoadingCard from '@/components/loadingCard'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { DelShoppingCartApi, GetShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
|
||||
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/format'
|
||||
import { setParam } from '@/common/system'
|
||||
import { debounce, throttle } from '@/common/util'
|
||||
import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from '@/api/user'
|
||||
import useCommonData from '@/use/useCommonData'
|
||||
|
||||
type param = {
|
||||
interface param {
|
||||
show?: true | false
|
||||
onClose?: () => void
|
||||
intoStatus?: 'again' | 'shop'
|
||||
default_sale_mode?: number //面料类型（0：大货， 1：剪版，2：散剪
|
||||
default_sale_mode?: number // 面料类型（0：大货， 1：剪版，2：散剪
|
||||
}
|
||||
export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode }: param) => {
|
||||
const selectList = [
|
||||
@@ -32,7 +32,7 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
{ value: 2, title: '散剪', unit: '米', eunit: 'kg', step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3 },
|
||||
]
|
||||
|
||||
//切换面料类型
|
||||
// 切换面料类型
|
||||
const [selectIndex, setSelectIndex] = useState(default_sale_mode || 0)
|
||||
const selectProduct = (index: number) => {
|
||||
setSelectIndex(index)
|
||||
@@ -46,53 +46,55 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
setSelectStatus(true)
|
||||
}, [selectIndex])
|
||||
|
||||
//获取购物车数据数量
|
||||
// 获取购物车数据数量
|
||||
const { setShopCount } = useCommonData()
|
||||
|
||||
//重置勾选数据
|
||||
// 重置勾选数据
|
||||
const resetList = () => {
|
||||
list?.map((item) => {
|
||||
if (selectIndex == item.sale_mode || selectIndex == -1) {
|
||||
checkboxData[item.id] = true
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
checkboxData[item.id] = false
|
||||
}
|
||||
})
|
||||
setCheckboxData(() => ({ ...checkboxData }))
|
||||
}
|
||||
|
||||
//获取数据
|
||||
// 获取数据
|
||||
const [list, setList] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { fetchData } = GetShoppingCartApi()
|
||||
const getShoppingCart = async () => {
|
||||
const getShoppingCart = async() => {
|
||||
const { data } = await fetchData()
|
||||
let color_list = data.color_list || []
|
||||
const color_list = data.color_list || []
|
||||
setShopCount(color_list.length)
|
||||
initList(color_list)
|
||||
setList(color_list)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
//初始化全部数据默认勾选
|
||||
const [checkboxData, setCheckboxData] = useState<{ [index: number]: true | false }>({})
|
||||
// 初始化全部数据默认勾选
|
||||
const [checkboxData, setCheckboxData] = useState<Record<number, true | false>>({})
|
||||
const initStatus = useRef(false)
|
||||
const initList = (color_list) => {
|
||||
if (initStatus.current) {
|
||||
color_list?.map((item) => {
|
||||
if (selectIndex == item.sale_mode) checkboxData[item.id] = true
|
||||
if (selectIndex == item.sale_mode) { checkboxData[item.id] = true }
|
||||
})
|
||||
initStatus.current = false
|
||||
}
|
||||
setCheckboxData(() => checkboxData)
|
||||
}
|
||||
|
||||
//显示是展示数据
|
||||
// 显示是展示数据
|
||||
useEffect(() => {
|
||||
if (!show) {
|
||||
setList([])
|
||||
setSelectIndex(default_sale_mode || 0)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
setLoading(true)
|
||||
initStatus.current = true
|
||||
getShoppingCart()
|
||||
@@ -111,57 +113,57 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
setShowPopup(show)
|
||||
}, [show])
|
||||
|
||||
//全选反选
|
||||
// 全选反选
|
||||
const [selectStatus, setSelectStatus] = useState(false)
|
||||
const selectAll = () => {
|
||||
list.map((item) => {
|
||||
if (selectIndex == item.sale_mode || selectIndex == -1) checkboxData[item.id] = !selectStatus
|
||||
if (selectIndex == item.sale_mode || selectIndex == -1) { checkboxData[item.id] = !selectStatus }
|
||||
})
|
||||
setSelectStatus(!selectStatus)
|
||||
setCheckboxData(() => ({ ...checkboxData }))
|
||||
}
|
||||
|
||||
//checkbox选中回调
|
||||
// checkbox选中回调
|
||||
const selectCallBack = (item) => {
|
||||
checkboxData[item.id] = true
|
||||
checkSelect()
|
||||
setCheckboxData(() => ({ ...checkboxData }))
|
||||
}
|
||||
|
||||
//checkbox选中判断是否全部选中，全部选中后是全选，否则反选
|
||||
// checkbox选中判断是否全部选中，全部选中后是全选，否则反选
|
||||
const checkSelect = () => {
|
||||
let list_count = 0
|
||||
let select_count = 0
|
||||
list?.map((item) => {
|
||||
if (selectIndex == -1 || selectIndex == item.sale_mode) {
|
||||
list_count++
|
||||
if (checkboxData[item.id]) select_count++
|
||||
if (checkboxData[item.id]) { select_count++ }
|
||||
}
|
||||
})
|
||||
setSelectStatus(select_count == list_count)
|
||||
}
|
||||
|
||||
//checkbox关闭回调
|
||||
// checkbox关闭回调
|
||||
const colseCallBack = (item) => {
|
||||
checkboxData[item.id] = false
|
||||
checkSelect()
|
||||
setCheckboxData(() => ({ ...checkboxData }))
|
||||
}
|
||||
|
||||
//popup关闭
|
||||
// popup关闭
|
||||
const closePopup = () => {
|
||||
onClose?.()
|
||||
setShowPopup(false)
|
||||
}
|
||||
|
||||
//删除购物车内容
|
||||
// 删除购物车内容
|
||||
const { fetchData: delShopFetchData } = DelShoppingCartApi()
|
||||
const delSelect = () => {
|
||||
getSelectId()
|
||||
if (selectIds.current.length <= 0) return alert.none('请选择要删除的面料!')
|
||||
if (selectIds.current.length <= 0) { return alert.none('请选择要删除的面料!') }
|
||||
Taro.showModal({
|
||||
content: '删除所选商品？',
|
||||
success: async function (res) {
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await delShopFetchData({ id: selectIds.current })
|
||||
if (res.success) {
|
||||
@@ -170,20 +172,22 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
title: '成功',
|
||||
icon: 'success',
|
||||
})
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
//获取面料选中的id
|
||||
// 获取面料选中的id
|
||||
const selectIds = useRef<number[]>([])
|
||||
const getSelectId = () => {
|
||||
selectIds.current = []
|
||||
@@ -194,27 +198,27 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
})
|
||||
}
|
||||
|
||||
//格式化金额
|
||||
// 格式化金额
|
||||
const formatPirce = useCallback((price) => {
|
||||
return Number(formatPriceDiv(price))
|
||||
}, [])
|
||||
|
||||
//格式化数量
|
||||
// 格式化数量
|
||||
const formatCount = useCallback((item) => {
|
||||
return item.sale_mode == 0 ? item.roll : item.length / 100
|
||||
}, [])
|
||||
|
||||
//格式化单位
|
||||
// 格式化单位
|
||||
const formatUnit = useCallback((item) => {
|
||||
return item.sale_mode == 0 ? '条' : '米'
|
||||
}, [])
|
||||
|
||||
//预估金额和总条数
|
||||
// 预估金额和总条数
|
||||
const estimatePrice = useMemo(() => {
|
||||
let estimate_amount = 0
|
||||
let product_list = new Set() //面料
|
||||
let color_count = 0 //颜色数量
|
||||
let all_count = 0 //总数量
|
||||
const product_list = new Set() // 面料
|
||||
let color_count = 0 // 颜色数量
|
||||
let all_count = 0 // 总数量
|
||||
list.map((item) => {
|
||||
if (checkboxData[item.id]) {
|
||||
estimate_amount += item.estimate_amount
|
||||
@@ -223,7 +227,7 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
all_count += item.sale_mode == 0 ? item.roll : item.length
|
||||
}
|
||||
})
|
||||
let all_count_text = selectIndex == 0 ? all_count + ' 条' : all_count / 100 + ' 米'
|
||||
const all_count_text = selectIndex == 0 ? `${all_count} 条` : `${all_count / 100} 米`
|
||||
return {
|
||||
price: Number(formatPriceDiv(estimate_amount)).toFixed(2),
|
||||
countText: `已选 ${product_list.size} 种面料，${color_count} 个颜色，共 ${all_count_text}`,
|
||||
@@ -231,13 +235,13 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
}
|
||||
}, [list, checkboxData])
|
||||
|
||||
//去结算
|
||||
// 去结算
|
||||
const { fetchData: useFetchData } = GetAdminUserInfoApi()
|
||||
const { fetchData: applyOrderAccessFetchData } = ApplyOrderAccessApi()
|
||||
const orderDetail = throttle(async () => {
|
||||
let res = await useFetchData()
|
||||
const orderDetail = throttle(async() => {
|
||||
const res = await useFetchData()
|
||||
if (res.data.order_access_status !== 3) {
|
||||
if (res.data.order_access_status == 1) applyOrderAccessFetchData()
|
||||
if (res.data.order_access_status == 1) { applyOrderAccessFetchData() }
|
||||
setShowBindSalesman(() => true)
|
||||
onClose?.()
|
||||
return false
|
||||
@@ -245,36 +249,38 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
getSelectId()
|
||||
if (selectIds.current.length == 0) {
|
||||
alert.error('请选择面料')
|
||||
} else {
|
||||
let ids = selectIds.current.join('-')
|
||||
setParam({ ids, sale_mode: selectIndex }) //临时存储
|
||||
}
|
||||
else {
|
||||
const ids = selectIds.current.join('-')
|
||||
setParam({ ids, sale_mode: selectIndex }) // 临时存储
|
||||
closePopup()
|
||||
if (intoStatus == 'again') {
|
||||
goLink('/pages/order/comfirm', {}, 'redirectTo')
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
goLink('/pages/order/comfirm')
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
|
||||
//计数组件-当后端修改完成才修改前端显示
|
||||
// 计数组件-当后端修改完成才修改前端显示
|
||||
const { fetchData: fetchDataUpdateShoppingCart } = UpdateShoppingCartApi()
|
||||
const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false)
|
||||
const getInputValue = debounce(async (num, item) => {
|
||||
let roll = item.sale_mode == 0 ? parseFloat(num) : 0
|
||||
let length = item.sale_mode != 0 ? parseFloat(num) * 100 : 0
|
||||
const getInputValue = debounce(async(num, item) => {
|
||||
const roll = item.sale_mode == 0 ? parseFloat(num) : 0
|
||||
const length = item.sale_mode != 0 ? parseFloat(num) * 100 : 0
|
||||
setUpdateShoppingCartLoading(() => true)
|
||||
let res = await fetchDataUpdateShoppingCart({ id: item.id, roll, length })
|
||||
const res = await fetchDataUpdateShoppingCart({ id: item.id, roll, length })
|
||||
setUpdateShoppingCartLoading(() => false)
|
||||
if (res.success) {
|
||||
getShoppingCart()
|
||||
}
|
||||
}, 300)
|
||||
|
||||
//绑定业务员和电话号码
|
||||
// 绑定业务员和电话号码
|
||||
const [showBindSalesman, setShowBindSalesman] = useState(false)
|
||||
|
||||
//显示图片弹窗
|
||||
// 显示图片弹窗
|
||||
const [showLabImage, setShowLabImage] = useState(false)
|
||||
const [labImageValue, setLabImageValue] = useState()
|
||||
const getLabAndImg = useCallback((val) => {
|
||||
@@ -303,7 +309,8 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
<View
|
||||
key={item.value}
|
||||
onClick={() => selectProduct(item.value)}
|
||||
className={classnames(styles.search_item, selectIndex == item.value && styles.search_item_select)}>
|
||||
className={classnames(styles.search_item, selectIndex == item.value && styles.search_item_select)}
|
||||
>
|
||||
{item.title}
|
||||
</View>
|
||||
)
|
||||
@@ -318,7 +325,8 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
return (
|
||||
<View
|
||||
key={item}
|
||||
className={classnames(styles.product_item, selectIndex != -1 && selectIndex != item.sale_mode && styles.no_product_item_select)}>
|
||||
className={classnames(styles.product_item, selectIndex != -1 && selectIndex != item.sale_mode && styles.no_product_item_select)}
|
||||
>
|
||||
<View className={styles.checkbox}>
|
||||
<MCheckbox
|
||||
disabled={selectIndex != -1 && selectIndex != item.sale_mode}
|
||||
@@ -345,16 +353,16 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
|
||||
</View>
|
||||
<View className={styles.count}>
|
||||
<View className={styles.des}>
|
||||
<View className={styles.subtitle}>{item.product_color_code + ' ' + item.product_color_name}</View>
|
||||
<View className={styles.subtitle}>{`${item.product_color_code} ${item.product_color_name}`}</View>
|
||||
<View className={styles.tag}>{item.sale_mode_name}</View>
|
||||
</View>
|
||||
<View className={styles.btn_count}>
|
||||
<Counter
|
||||
onBlue={(e) => getInputValue(e, item)}
|
||||
onBlue={e => getInputValue(e, item)}
|
||||
defaultNum={formatCount(item)}
|
||||
step={selectList[selectIndex].step}
|
||||
digits={selectList[selectIndex].digits}
|
||||
onClickBtn={(e) => getInputValue(e, item)}
|
||||
onClickBtn={e => getInputValue(e, item)}
|
||||
unit={formatUnit(item)}
|
||||
minNum={selectList[selectIndex].minNum}
|
||||
maxNum={selectList[selectIndex].maxNum}
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { View, ScrollView } from '@tarojs/components'
|
||||
import { useCallback, forwardRef, useEffect, useMemo, useRef, useState, memo, useImperativeHandle, } from 'react'
|
||||
import Search from '@/components/search'
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Popup from '@/components/popup'
|
||||
import Goods from "@/components/goodsItem"
|
||||
import BottomCustomer from "@/components/BottomCustomer"
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import { useDidShow } from '@tarojs/taro'
|
||||
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import VirtualList from '@tarojs/components/virtual-list'
|
||||
import DotLoading from "@/components/dotLoading"
|
||||
import Divider from '../divider';
|
||||
import { useDidShow } from '@tarojs/taro';
|
||||
import Divider from '../divider'
|
||||
import styles from './index.module.scss'
|
||||
import Search from '@/components/search'
|
||||
import Popup from '@/components/popup'
|
||||
import Goods from '@/components/goodsItem'
|
||||
import BottomCustomer from '@/components/BottomCustomer'
|
||||
import DotLoading from '@/components/dotLoading'
|
||||
|
||||
interface prosObj {
|
||||
showPopup?: false | true,
|
||||
closePopup?: () => void,
|
||||
goodList?: any[],
|
||||
typeList?: any[],
|
||||
handCheck?: (any) => void,
|
||||
showPopup?: false | true
|
||||
closePopup?: () => void
|
||||
goodList?: any[]
|
||||
typeList?: any[]
|
||||
handCheck?: (any) => void
|
||||
addNums?: (any) => void
|
||||
reduceNums?: (any) => void
|
||||
// oninputEvent?: (e: string, res: object) => void,
|
||||
getSearchData: (any) => void,
|
||||
handPlus: (any) => void,
|
||||
handSure: () => void,
|
||||
getSearchData: (any) => void
|
||||
handPlus: (any) => void
|
||||
handSure: () => void
|
||||
obj?: {
|
||||
code?: string,
|
||||
name?: string,
|
||||
code?: string
|
||||
name?: string
|
||||
|
||||
},
|
||||
modeFont: Number | string,
|
||||
clientName: string,
|
||||
clientId: Number,
|
||||
hasBottom?: true | false, //默认不占位底部
|
||||
}
|
||||
modeFont: Number | string
|
||||
clientName: string
|
||||
clientId: Number
|
||||
hasBottom?: true | false // 默认不占位底部
|
||||
onBlur?: (e: string, res: object) => void
|
||||
}
|
||||
export default memo(forwardRef((props: prosObj, ref) => {
|
||||
@@ -52,71 +52,69 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
clientId = -1,
|
||||
handSure,
|
||||
hasBottom = true,
|
||||
onBlur
|
||||
onBlur,
|
||||
} = props
|
||||
|
||||
|
||||
const SearchRef = useRef<any>()
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
Object: props,
|
||||
typeList: typeList,
|
||||
SearchRef
|
||||
typeList,
|
||||
SearchRef,
|
||||
}))
|
||||
|
||||
|
||||
//判断选择的类型
|
||||
// 判断选择的类型
|
||||
const showModefont = useMemo(() => {
|
||||
const modeObj = typeList.filter(item => {
|
||||
const modeObj = typeList.filter((item) => {
|
||||
return item.checked
|
||||
})
|
||||
if (modeObj[0].id === 0) {
|
||||
return '条'
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return '米'
|
||||
}
|
||||
}, [typeList])
|
||||
|
||||
//已选的颜色
|
||||
// 已选的颜色
|
||||
const selectTotal = useMemo(() => {
|
||||
const totalArr = goodList.filter(item => {
|
||||
const totalArr = goodList.filter((item) => {
|
||||
return item.showInput
|
||||
})
|
||||
return totalArr.length
|
||||
}, [goodList])
|
||||
|
||||
//选择的条数或者米数
|
||||
// 选择的条数或者米数
|
||||
const selectNums = useMemo(() => {
|
||||
let arr: any = []
|
||||
goodList.forEach(item => {
|
||||
const arr: any = []
|
||||
goodList.forEach((item) => {
|
||||
if (item.showInput) {
|
||||
arr.push(Number(item.nums))
|
||||
}
|
||||
})
|
||||
let hate = sum(arr)
|
||||
const hate = sum(arr)
|
||||
return hate
|
||||
}, [goodList])
|
||||
// onInputEven={(e, item) => oninputEvent?.(e, item)}
|
||||
|
||||
function sum(arr) {
|
||||
var s = 0;
|
||||
for (var i = arr.length - 1; i >= 0; i--) {
|
||||
s += arr[i];
|
||||
let s = 0
|
||||
for (let i = arr.length - 1; i >= 0; i--) {
|
||||
s += arr[i]
|
||||
}
|
||||
return s;
|
||||
return s
|
||||
}
|
||||
|
||||
|
||||
const rows = memo(({ id, index, style, data }: any) => {
|
||||
let item = data[index]
|
||||
const item = data[index]
|
||||
return (
|
||||
<>
|
||||
<Goods
|
||||
onBlur={(e, id) => onBlur?.(e, id)}
|
||||
modeFont={(modeFont as number)}
|
||||
handPlus={(item) => handPlus?.(item)}
|
||||
handPlus={item => handPlus?.(item)}
|
||||
value={item || {}}
|
||||
clickAdd={(item) => addNums?.(item)}
|
||||
clickAdd={item => addNums?.(item)}
|
||||
clickReduce={(item) => { reduceNums?.(item) }}
|
||||
goodList={goodList}
|
||||
></Goods>
|
||||
@@ -134,7 +132,7 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
<View className={styles.selectFont}>
|
||||
已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.typeFont}>布料类型</View>
|
||||
<View className={styles.flexType}>
|
||||
{typeList.map((item, index) => {
|
||||
@@ -144,14 +142,15 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
handCheck?.(item)
|
||||
}}
|
||||
key={index}
|
||||
className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>
|
||||
className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}
|
||||
>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<View style={{ position: 'sticky', top: 0, background: 'white', zIndex: '9999' }}>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.flexFonts}>
|
||||
<View className={styles.kingFont}>颜色分类({goodList?.length})</View>
|
||||
<View className={styles.danwei}>
|
||||
@@ -162,11 +161,11 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
<Search
|
||||
ref={SearchRef}
|
||||
cursorSpacing={100}
|
||||
placeholder='请输入搜索布料'
|
||||
placeholder="请输入搜索布料"
|
||||
showBtn={false}
|
||||
changeOnSearch={getSearchData}
|
||||
debounceTime={300}
|
||||
adjustPosition={true}
|
||||
adjustPosition
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
@@ -176,11 +175,12 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
<VirtualList
|
||||
className={styles.scrollview}
|
||||
height={300} /* 列表的高度 */
|
||||
width='100%' /* 列表的宽度 */
|
||||
width="100%" /* 列表的宽度 */
|
||||
itemData={goodList} /* 渲染列表的数据 */
|
||||
itemCount={goodList.length + 0} /* 渲染列表的长度 */
|
||||
itemSize={100} /* 列表单项的高度 */
|
||||
overscanCount={1}>
|
||||
overscanCount={1}
|
||||
>
|
||||
{rows}
|
||||
</VirtualList>
|
||||
</View>
|
||||
@@ -202,16 +202,14 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
<BottomCustomer
|
||||
clientName={clientName}
|
||||
clientId={clientId}
|
||||
isDisabled={selectTotal > 0 && clientName !== '' ? false : true}
|
||||
isDisabled={!(selectTotal > 0 && clientName !== '')}
|
||||
handSure={() => {
|
||||
handSure()
|
||||
}}></BottomCustomer>
|
||||
}}
|
||||
></BottomCustomer>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Popup>
|
||||
)
|
||||
|
||||
|
||||
}))
|
||||
|
||||
|
||||
+118
-117
@@ -1,129 +1,130 @@
|
||||
import { ScrollView, View } from "@tarojs/components"
|
||||
import React, { memo, ReactNode, useEffect, useMemo, useRef, useState } from "react"
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Taro, { useReady } from "@tarojs/taro";
|
||||
import InfiniteScroll, { StatusParam } from "../infiniteScroll";
|
||||
import LoadingCard from "../loadingCard";
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import Taro, { useReady } from '@tarojs/taro'
|
||||
import type { ReactNode } from 'react'
|
||||
import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import type { StatusParam } from '../infiniteScroll'
|
||||
import InfiniteScroll from '../infiniteScroll'
|
||||
import LoadingCard from '../loadingCard'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
|
||||
type Params = {
|
||||
list?: any[],
|
||||
defaultValue?: number | string,
|
||||
children?: ReactNode,
|
||||
height?: string,
|
||||
heightItem?: number,
|
||||
sideBarOnClick?: (val: any) => void,
|
||||
refresherTriggered?: true | false,
|
||||
selfOnRefresherRefresh?: () => void
|
||||
selfOnScrolltolower?: () => void,
|
||||
hasMore?: true | false,
|
||||
statusMore?: StatusParam
|
||||
interface Params {
|
||||
list?: any[]
|
||||
defaultValue?: number | string
|
||||
children?: ReactNode
|
||||
height?: string
|
||||
heightItem?: number
|
||||
sideBarOnClick?: (val: any) => void
|
||||
refresherTriggered?: true | false
|
||||
selfOnRefresherRefresh?: () => void
|
||||
selfOnScrolltolower?: () => void
|
||||
hasMore?: true | false
|
||||
statusMore?: StatusParam
|
||||
}
|
||||
|
||||
export default memo(({ list = [],
|
||||
defaultValue = 0,
|
||||
height = '100vh',
|
||||
sideBarOnClick,
|
||||
children,
|
||||
heightItem = 100,
|
||||
refresherTriggered = false,
|
||||
selfOnRefresherRefresh,
|
||||
selfOnScrolltolower,
|
||||
hasMore = true,
|
||||
statusMore = 0
|
||||
}: Params) => {
|
||||
export default memo(({
|
||||
list = [],
|
||||
defaultValue = 0,
|
||||
height = '100vh',
|
||||
sideBarOnClick,
|
||||
children,
|
||||
heightItem = 100,
|
||||
refresherTriggered = false,
|
||||
selfOnRefresherRefresh,
|
||||
selfOnScrolltolower,
|
||||
hasMore = true,
|
||||
statusMore = 0,
|
||||
}: Params) => {
|
||||
const num_half = useRef(0)
|
||||
|
||||
let num_half = useRef(0)
|
||||
const [selected, setSelected] = useState(defaultValue)
|
||||
const [tabId, setTabId] = useState('')
|
||||
|
||||
const [selected, setSelected] = useState(defaultValue)
|
||||
const [tabId, setTabId] = useState('')
|
||||
useEffect(() => {
|
||||
setSelected(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
useEffect(() => {
|
||||
setSelected(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const init = () => {
|
||||
const index = list?.findIndex(item => {
|
||||
return item.id == defaultValue
|
||||
})
|
||||
if (index !== -1) {
|
||||
computeSelectTab(index)
|
||||
}
|
||||
}
|
||||
|
||||
const clickEvent = ({ item, index }: { item, index: number }) => {
|
||||
setSelected(item.id)
|
||||
sideBarOnClick?.(item)
|
||||
computeSelectTab(index)
|
||||
}
|
||||
|
||||
const computeSelectTab = (index) => {
|
||||
if ((index + 1) > num_half.current) {
|
||||
let num = index + 1 - num_half.current
|
||||
setTabId(list[num].id.toString())
|
||||
} else {
|
||||
setTabId(list[0].id.toString())
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
Taro.nextTick(() => {
|
||||
let query = Taro.createSelectorQuery();
|
||||
query.select('.side_bar_select').boundingClientRect(rect => {
|
||||
console.log('rect::', rect)
|
||||
let clientHeight = rect.height;
|
||||
let clientWidth = rect.width;
|
||||
let ratio = 750 / clientWidth;
|
||||
let height = clientHeight * ratio;
|
||||
num_half.current = Math.ceil(height / 2 / heightItem)
|
||||
init()
|
||||
}).exec();
|
||||
})
|
||||
const init = () => {
|
||||
const index = list?.findIndex((item) => {
|
||||
return item.id == defaultValue
|
||||
})
|
||||
if (index !== -1) {
|
||||
computeSelectTab(index)
|
||||
}
|
||||
}
|
||||
|
||||
const [currentIndex, setcurrentIndex] = useState(0)
|
||||
useMemo(() => {
|
||||
Taro.nextTick(() => {
|
||||
let index = 0
|
||||
index = list.findIndex(item => { return item.id == selected })
|
||||
setcurrentIndex(currentIndex)
|
||||
})
|
||||
}, [selected])
|
||||
const clickEvent = ({ item, index }: { item; index: number }) => {
|
||||
setSelected(item.id)
|
||||
sideBarOnClick?.(item)
|
||||
computeSelectTab(index)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={classnames(styles.sideBar_main, 'side_bar_select')}>
|
||||
<ScrollView scrollWithAnimation={true} style={{ height }} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
|
||||
{
|
||||
list?.map((item, index) => {
|
||||
return (
|
||||
<View
|
||||
className={classnames(styles.sideBar_select_title, { [styles.sideBar_select_title_select]: (selected == item.id) })}
|
||||
onClick={() => clickEvent({ item, index })}
|
||||
id={`tab_${item.id}`}
|
||||
key={item.id}
|
||||
style={{ height: heightItem + 'rpx' }}
|
||||
>
|
||||
{
|
||||
selected == item.id && <View className={styles.shu}></View>
|
||||
}
|
||||
<View className={styles.title_con}>
|
||||
{item.name}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ScrollView>
|
||||
<View className={styles.sideBar_con}>
|
||||
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
|
||||
{children}
|
||||
</InfiniteScroll>
|
||||
const computeSelectTab = (index) => {
|
||||
if ((index + 1) > num_half.current) {
|
||||
const num = index + 1 - num_half.current
|
||||
setTabId(list[num].id.toString())
|
||||
}
|
||||
else {
|
||||
setTabId(list[0].id.toString())
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
Taro.nextTick(() => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select('.side_bar_select').boundingClientRect((rect) => {
|
||||
console.log('rect::', rect)
|
||||
const clientHeight = rect.height
|
||||
const clientWidth = rect.width
|
||||
const ratio = 750 / clientWidth
|
||||
const height = clientHeight * ratio
|
||||
num_half.current = Math.ceil(height / 2 / heightItem)
|
||||
init()
|
||||
}).exec()
|
||||
})
|
||||
})
|
||||
|
||||
const [currentIndex, setcurrentIndex] = useState(0)
|
||||
useMemo(() => {
|
||||
Taro.nextTick(() => {
|
||||
let index = 0
|
||||
index = list.findIndex((item) => { return item.id == selected })
|
||||
setcurrentIndex(currentIndex)
|
||||
})
|
||||
}, [selected])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={classnames(styles.sideBar_main, 'side_bar_select')}>
|
||||
<ScrollView scrollWithAnimation style={{ height }} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
|
||||
{
|
||||
list?.map((item, index) => {
|
||||
return (
|
||||
<View
|
||||
className={classnames(styles.sideBar_select_title, { [styles.sideBar_select_title_select]: (selected == item.id) })}
|
||||
onClick={() => clickEvent({ item, index })}
|
||||
id={`tab_${item.id}`}
|
||||
key={item.id}
|
||||
style={{ height: `${heightItem}rpx` }}
|
||||
>
|
||||
{
|
||||
selected == item.id && <View className={styles.shu}></View>
|
||||
}
|
||||
<View className={styles.title_con}>
|
||||
{item.name}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ScrollView>
|
||||
<View className={styles.sideBar_con}>
|
||||
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
|
||||
{children}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</>
|
||||
)
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
import { View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type params = {
|
||||
status?: 'top'|'bottom'|'none',
|
||||
onChange?: (val:{status:string, value:string}) => void,
|
||||
sortValue?: {desc: string, asc: string} //排序规则，后端制定
|
||||
interface params {
|
||||
status?: 'top'|'bottom'|'none'
|
||||
onChange?: (val: { status: string; value: string }) => void
|
||||
sortValue?: { desc: string; asc: string } // 排序规则，后端制定
|
||||
}
|
||||
type sortParam = 'none'|'top'|'bottom'
|
||||
export default forwardRef(({status = 'none', onChange, sortValue}: params,ref) => {
|
||||
const [sortStatus, setSortStatus] = useState<sortParam>()
|
||||
useEffect(() => {
|
||||
setSortStatus(() => status)
|
||||
}, [status])
|
||||
const changeSort = ():{status:sortParam, value:string} => {
|
||||
let status:sortParam = 'none'
|
||||
let value = ''
|
||||
if(sortStatus == 'none') {
|
||||
status = 'top'
|
||||
value = sortValue?.asc!
|
||||
}
|
||||
if(sortStatus == 'top') {
|
||||
status = 'bottom'
|
||||
value = sortValue?.desc!
|
||||
}
|
||||
if(sortStatus == 'bottom') status = 'none'
|
||||
setSortStatus(() => status)
|
||||
onChange?.({status, value})
|
||||
return {status, value}
|
||||
export default forwardRef(({ status = 'none', onChange, sortValue }: params, ref) => {
|
||||
const [sortStatus, setSortStatus] = useState<sortParam>()
|
||||
useEffect(() => {
|
||||
setSortStatus(() => status)
|
||||
}, [status])
|
||||
const changeSort = (): { status: sortParam; value: string } => {
|
||||
let status: sortParam = 'none'
|
||||
let value = ''
|
||||
if (sortStatus == 'none') {
|
||||
status = 'top'
|
||||
value = sortValue?.asc!
|
||||
}
|
||||
useImperativeHandle(ref, () => ({
|
||||
changeSort
|
||||
}))
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.click} onClick={changeSort}>
|
||||
<View className={classnames(styles.top, sortStatus == 'top'&&styles.selected)} ></View>
|
||||
<View className={classnames(styles.bottom, sortStatus == 'bottom'&&styles.selected)}></View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
if (sortStatus == 'top') {
|
||||
status = 'bottom'
|
||||
value = sortValue?.desc!
|
||||
}
|
||||
if (sortStatus == 'bottom') { status = 'none' }
|
||||
setSortStatus(() => status)
|
||||
onChange?.({ status, value })
|
||||
return { status, value }
|
||||
}
|
||||
useImperativeHandle(ref, () => ({
|
||||
changeSort,
|
||||
}))
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.click} onClick={changeSort}>
|
||||
<View className={classnames(styles.top, sortStatus == 'top' && styles.selected)} ></View>
|
||||
<View className={classnames(styles.bottom, sortStatus == 'bottom' && styles.selected)}></View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { ScrollView, View, Text } from '@tarojs/components'
|
||||
import { ScrollView, Text, View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { FC, useCallback, useMemo, useState } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import Iconfont from '../iconfont/iconfont'
|
||||
import InfiniteScroll from '../infiniteScroll'
|
||||
import LoadMore, { LoadMoreStatus } from '../LoadMore'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export type ColumnsType = {
|
||||
export interface ColumnsType {
|
||||
title: string
|
||||
dataIndex: string
|
||||
width: string
|
||||
@@ -15,7 +16,7 @@ export type ColumnsType = {
|
||||
ellipsis?: boolean | { isEllipsis: boolean; rows: number }
|
||||
}
|
||||
|
||||
export type RecordType = {
|
||||
export interface RecordType {
|
||||
key: string
|
||||
[Property: string]: any
|
||||
}
|
||||
@@ -27,8 +28,8 @@ export interface TablePropsType {
|
||||
height?: number
|
||||
}
|
||||
|
||||
const Table: FC<TablePropsType> = props => {
|
||||
const { columns, dataSource, onLoadMore, height=400 } = props
|
||||
const Table: FC<TablePropsType> = (props) => {
|
||||
const { columns, dataSource, onLoadMore, height = 400 } = props
|
||||
|
||||
const handleShowMore = () => {
|
||||
onLoadMore && onLoadMore()
|
||||
@@ -43,7 +44,8 @@ const Table: FC<TablePropsType> = props => {
|
||||
const rows = columnConfig.ellipsis.rows
|
||||
if (rows === 2) {
|
||||
columnStyle[styles.ellipsis_2] = true
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
columnStyle[styles.ellipsis_1] = true
|
||||
}
|
||||
}
|
||||
@@ -53,23 +55,25 @@ const Table: FC<TablePropsType> = props => {
|
||||
const loadMoreComponent = useMemo(() => {
|
||||
if (dataSource) {
|
||||
if (dataSource.list.length < dataSource.total) {
|
||||
return <LoadMore status='more' onClick={handleShowMore}></LoadMore>
|
||||
} else if (dataSource.list.length >= dataSource.total) {
|
||||
return <LoadMore status='noMore' onClick={handleShowMore}></LoadMore>
|
||||
return <LoadMore status="more" onClick={handleShowMore}></LoadMore>
|
||||
}
|
||||
} else {
|
||||
return <LoadMore status='loading' onClick={handleShowMore}></LoadMore>
|
||||
else if (dataSource.list.length >= dataSource.total) {
|
||||
return <LoadMore status="noMore" onClick={handleShowMore}></LoadMore>
|
||||
}
|
||||
}
|
||||
else {
|
||||
return <LoadMore status="loading" onClick={handleShowMore}></LoadMore>
|
||||
}
|
||||
}, [dataSource])
|
||||
|
||||
const sourceContainer = () => {
|
||||
return (
|
||||
<>
|
||||
{!!dataSource?.list?.length &&
|
||||
dataSource.list.map(source => {
|
||||
{!!dataSource?.list?.length
|
||||
&& dataSource.list.map((source) => {
|
||||
return (
|
||||
<View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
|
||||
{columns.map(column => {
|
||||
{columns.map((column) => {
|
||||
if (column.render) {
|
||||
return (
|
||||
<View className={styles.td} style={{ width: column.width }}>
|
||||
@@ -77,11 +81,12 @@ const Table: FC<TablePropsType> = props => {
|
||||
{column.render(source[column.dataIndex])}
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<View className={classnames(styles.td, getColumnStyle(column))} style={{ width: column.width }}>
|
||||
{
|
||||
source[column.dataIndex] //根据表头填数据
|
||||
source[column.dataIndex] // 根据表头填数据
|
||||
}
|
||||
</View>
|
||||
)
|
||||
@@ -98,7 +103,7 @@ const Table: FC<TablePropsType> = props => {
|
||||
return (
|
||||
<View className={styles.table}>
|
||||
<View className={classnames(styles.tr, styles['bg-header'])}>
|
||||
{columns.map(column => {
|
||||
{columns.map((column) => {
|
||||
return (
|
||||
<View className={styles.th} style={{ width: column.width }} key={column.key}>
|
||||
{column.title}
|
||||
@@ -106,7 +111,7 @@ const Table: FC<TablePropsType> = props => {
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom={true}>
|
||||
<InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom>
|
||||
{sourceContainer()}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
|
||||
@@ -1,61 +1,60 @@
|
||||
import { ScrollView, View } from "@tarojs/components";
|
||||
import { memo, useState, ReactNode, useEffect } from "react";
|
||||
import classnames from "classnames";
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import type { ReactNode } from 'react'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
|
||||
type ListProps = {
|
||||
title: string,
|
||||
value: number
|
||||
interface ListProps {
|
||||
title: string
|
||||
value: number
|
||||
}
|
||||
|
||||
type Params = {
|
||||
list?: ListProps[],
|
||||
defaultValue?: number|string,
|
||||
children?: ReactNode,
|
||||
tabsOnClick?: (ListProps) => void,
|
||||
style?:Object,
|
||||
interface Params {
|
||||
list?: ListProps[]
|
||||
defaultValue?: number|string
|
||||
children?: ReactNode
|
||||
tabsOnClick?: (ListProps) => void
|
||||
style?: Object
|
||||
|
||||
}
|
||||
|
||||
export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
|
||||
|
||||
const [selected, setSelected] = useState(defaultValue)
|
||||
const [tabId, setTabId] = useState('')
|
||||
export default memo(({ list = [], defaultValue = 0, tabsOnClick, style = {} }: Params) => {
|
||||
const [selected, setSelected] = useState(defaultValue)
|
||||
const [tabId, setTabId] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const index = list?.findIndex(item => {
|
||||
return item.value == defaultValue
|
||||
})
|
||||
if(index !== -1) {
|
||||
const num = index > 0?( index - 1) : 0
|
||||
setTabId(list[num].value.toString())
|
||||
}
|
||||
}, [])
|
||||
|
||||
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
|
||||
setSelected(item.value)
|
||||
tabsOnClick?.(item)
|
||||
const num = index > 0?( index - 1) : 0
|
||||
setTabId(list[num].value.toString())
|
||||
useEffect(() => {
|
||||
const index = list?.findIndex((item) => {
|
||||
return item.value == defaultValue
|
||||
})
|
||||
if (index !== -1) {
|
||||
const num = index > 0 ? (index - 1) : 0
|
||||
setTabId(list[num].value.toString())
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.tabs_main} id="tabs_main_ref">
|
||||
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
|
||||
<View className={styles.tabs_scroll}>
|
||||
{
|
||||
list.map((item, index) => {
|
||||
return (
|
||||
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
|
||||
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}, [])
|
||||
|
||||
const clickEvent = ({ item, index }: { item: ListProps; index: number }) => {
|
||||
setSelected(item.value)
|
||||
tabsOnClick?.(item)
|
||||
const num = index > 0 ? (index - 1) : 0
|
||||
setTabId(list[num].value.toString())
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.tabs_main} id="tabs_main_ref">
|
||||
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation scrollIntoView={`tabs_${tabId}`}>
|
||||
<View className={styles.tabs_scroll}>
|
||||
{
|
||||
list.map((item, index) => {
|
||||
return (
|
||||
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({ item, index })}>
|
||||
<View className={classnames(styles.tabs_item_con, { [styles.tabs_item_select]: selected == item.value })}>{item.title}</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
@@ -27,7 +27,7 @@ const Tag: FC<PropsType> = (props) => {
|
||||
onClick,
|
||||
circle = false,
|
||||
customStyle = {},
|
||||
plain = false, // 朴素
|
||||
plain = false, // 朴素
|
||||
customClassName = '',
|
||||
} = props
|
||||
const handleClick = (event) => {
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
import {Textarea, View } from "@tarojs/components";
|
||||
import { memo, useEffect, useMemo, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { Textarea, View } from '@tarojs/components'
|
||||
import { memo, useEffect, useMemo, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
//其他说明
|
||||
type Param = {
|
||||
title?: string,
|
||||
onChange?: (val: string) => void,
|
||||
placeholder?: string,
|
||||
defaultValue?: string,
|
||||
onlyRead?: false|true
|
||||
// 其他说明
|
||||
interface Param {
|
||||
title?: string
|
||||
onChange?: (val: string) => void
|
||||
placeholder?: string
|
||||
defaultValue?: string
|
||||
onlyRead?: false|true
|
||||
}
|
||||
export default memo(({onChange, title = '', placeholder = '请输入', defaultValue, onlyRead = false}:Param) => {
|
||||
const [descData, setDescData] = useState({
|
||||
number: 0,
|
||||
value: '',
|
||||
count: 200,
|
||||
show: false
|
||||
})
|
||||
const getDesc = (value = '') => {
|
||||
let res = value
|
||||
if(value.length > descData.count) {
|
||||
res = value.slice(0, descData.count)
|
||||
export default memo(({ onChange, title = '', placeholder = '请输入', defaultValue, onlyRead = false }: Param) => {
|
||||
const [descData, setDescData] = useState({
|
||||
number: 0,
|
||||
value: '',
|
||||
count: 200,
|
||||
show: false,
|
||||
})
|
||||
const getDesc = (value = '') => {
|
||||
let res = value
|
||||
if (value.length > descData.count) {
|
||||
res = value.slice(0, descData.count)
|
||||
}
|
||||
setDescData({ ...descData, number: res.length, value: res })
|
||||
onChange?.(res)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getDesc(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const toggleShowRealTextarea = (show) => {
|
||||
setDescData({ ...descData, show })
|
||||
}
|
||||
return (
|
||||
<View className={styles.other_desc}>
|
||||
<View className={styles.title}>{title}</View>
|
||||
<View className={styles.textarea}>
|
||||
{(descData.show && !onlyRead) && <Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={e => getDesc(e.detail.value)}></Textarea>
|
||||
|| <View className={classnames(styles.textarea_con_pretend, descData.value && styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value || placeholder}</View>
|
||||
}
|
||||
setDescData({...descData, number:res.length, value: res})
|
||||
onChange?.(res)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getDesc(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const toggleShowRealTextarea = (show) => {
|
||||
setDescData({...descData, show:show})
|
||||
}
|
||||
return (
|
||||
<View className={styles.other_desc}>
|
||||
<View className={styles.title}>{title}</View>
|
||||
<View className={styles.textarea}>
|
||||
{(descData.show && !onlyRead)&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e.detail.value)}></Textarea>||
|
||||
<View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||placeholder}</View>
|
||||
}
|
||||
<View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
<View className={styles.descDataNum}>{`${descData.number}/${descData.count}`}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import Popup from '@/components/popup'
|
||||
import { useState, memo } from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import AtCalendar from '@/components/calendar/index'
|
||||
import { memo, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import NormalButton from '../normalButton'
|
||||
import styles from './index.module.scss'
|
||||
import AtCalendar from '@/components/calendar/index'
|
||||
import Popup from '@/components/popup'
|
||||
|
||||
type DateArg = string | number | Date
|
||||
interface Props {
|
||||
@@ -14,14 +14,14 @@ interface Props {
|
||||
}
|
||||
|
||||
export default memo((props: Props) => {
|
||||
let { start = '', end = '', onSelectDate } = props
|
||||
const { start = '', end = '', onSelectDate } = props
|
||||
const [time, setTime] = useState<any>({})
|
||||
|
||||
const handTime = (e) => {
|
||||
const { start, end } = e.value
|
||||
// 如果选的是同一天的日期, end 自动加一天
|
||||
if (!end) {
|
||||
//判断如果没选下一天的时候
|
||||
// 判断如果没选下一天的时候
|
||||
e.value.end = `${dayjs(new Date(start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
|
||||
}
|
||||
if (start === end) {
|
||||
@@ -30,21 +30,20 @@ export default memo((props: Props) => {
|
||||
setTime(e)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles['time-box']}>
|
||||
<AtCalendar
|
||||
isMultiSelect
|
||||
format='YYYY-MM-DD 00:00:00'
|
||||
format="YYYY-MM-DD 00:00:00"
|
||||
currentDate={{
|
||||
start: start,
|
||||
end: end,
|
||||
start,
|
||||
end,
|
||||
}}
|
||||
onSelectDate={(e) => handTime?.(e)}
|
||||
onSelectDate={e => handTime?.(e)}
|
||||
/>
|
||||
</View>
|
||||
<NormalButton type='primary' onClick={() => onSelectDate?.(time)} size="normal" round customClassName={styles['sure-box']}>确认</NormalButton>
|
||||
<NormalButton type="primary" onClick={() => onSelectDate?.(time)} size="normal" round customClassName={styles['sure-box']}>确认</NormalButton>
|
||||
{/* <View className='sure-box' onClick={() => onSelectDate?.(time)}>
|
||||
确认
|
||||
</View> */}
|
||||
|
||||
@@ -13,11 +13,10 @@ interface Props {
|
||||
}
|
||||
|
||||
export default memo((props: Props) => {
|
||||
let { showTime = false, closePopup, start = '', end = '', onSelectDate } = props
|
||||
const { showTime = false, closePopup, start = '', end = '', onSelectDate } = props
|
||||
|
||||
|
||||
return (
|
||||
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
|
||||
<Popup title="选择时间" show={showTime} onClose={() => closePopup?.()}>
|
||||
<TimePicker start={start} end={end} onSelectDate={onSelectDate}></TimePicker>
|
||||
</Popup>
|
||||
)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { nextTick } from '@tarojs/runtime'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { nextTick } from '@tarojs/runtime'
|
||||
import classNames from 'classnames'
|
||||
import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useTransition } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
@@ -16,18 +16,18 @@ const convertPx = (px: number) => {
|
||||
return realPx
|
||||
}
|
||||
|
||||
type Placement =
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
type Placement =
|
||||
| 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end'
|
||||
|
||||
interface ToolTipEvent {
|
||||
@@ -55,14 +55,14 @@ const popoverStyle = {
|
||||
}
|
||||
|
||||
const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
const id = useId();
|
||||
const [,setForceUpdate] = useState({})
|
||||
const id = useId()
|
||||
const [, setForceUpdate] = useState({})
|
||||
const { placement = 'top-start', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
|
||||
|
||||
if (!content){
|
||||
if (!content) {
|
||||
throw new Error('tooltip: content 不能为空')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const [visible, setVisible] = useState(defaultVisible)
|
||||
|
||||
const onVisibleChangeRef = useRef(onVisibleChange)
|
||||
@@ -80,14 +80,12 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
},
|
||||
[visible],
|
||||
)
|
||||
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
setVisible(v => {
|
||||
setVisible((v) => {
|
||||
onVisibleChangeRef.current?.(!v)
|
||||
return !v
|
||||
})
|
||||
|
||||
}, [])
|
||||
|
||||
const handleClickMark = useCallback(() => {
|
||||
@@ -117,13 +115,12 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
|
||||
const contextRectRef = useRef<any>(null)
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if(visible && !contextRectRef.current) {
|
||||
nextTick(()=>{
|
||||
useEffect(() => {
|
||||
if (visible && !contextRectRef.current) {
|
||||
nextTick(() => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select(`#content-${id}`).boundingClientRect((res)=>{
|
||||
console.log('contextRectRef',res);
|
||||
query.select(`#content-${id}`).boundingClientRect((res) => {
|
||||
console.log('contextRectRef', res)
|
||||
contextRectRef.current = res
|
||||
setForceUpdate({})
|
||||
}).exec()
|
||||
@@ -136,7 +133,7 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select('#children').boundingClientRect()
|
||||
query.selectViewport().scrollOffset()
|
||||
query.exec(res => {
|
||||
query.exec((res) => {
|
||||
console.log(res[0])
|
||||
console.log(res[1])
|
||||
setChildrenRect(res[0])
|
||||
@@ -144,14 +141,13 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
setViewport(res[1])
|
||||
viewportRef.current = res[1]
|
||||
})
|
||||
|
||||
}, [])
|
||||
|
||||
// 箭头 坐标
|
||||
const arrowCoords = useMemo(() => {
|
||||
const contextRect = contextRectRef.current
|
||||
// contextRect 没获取到之前 隐藏
|
||||
if(!contextRect) return {top: '9999px'}
|
||||
if (!contextRect) { return { top: '9999px' } }
|
||||
console.log('getArrowSide==>', getArrowSide, childrenRectRef.current)
|
||||
switch (getArrowSide) {
|
||||
case 'bottom': // 下箭头
|
||||
@@ -188,12 +184,12 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
// content 坐标
|
||||
const contentCoords = useMemo(() => {
|
||||
const placementSide = placement.split('-')[1] as string // placement = 'top-start' 取 'start'
|
||||
console.log('placementSide',placementSide);
|
||||
console.log('placementSide', placementSide)
|
||||
let coordsStyle = {}
|
||||
const contextRect = contextRectRef.current
|
||||
// contextRect 没获取到之前 隐藏
|
||||
if(!contextRect) return {top: '9999px'}
|
||||
console.log('contextRect',contextRect);
|
||||
if (!contextRect) { return { top: '9999px' } }
|
||||
console.log('contextRect', contextRect)
|
||||
const childrenRect = childrenRectRef.current
|
||||
switch (getArrowSide) {
|
||||
case 'bottom': // 下箭头
|
||||
@@ -201,22 +197,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
bottom: convertPx(arrowSize) - 5,
|
||||
top: '',
|
||||
}
|
||||
if(placementSide === 'start'){
|
||||
if (placementSide === 'start') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
left: 0,
|
||||
right: '',
|
||||
}
|
||||
}else if(placementSide === 'end'){
|
||||
}
|
||||
else if (placementSide === 'end') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
left: '',
|
||||
right: 0,
|
||||
}
|
||||
}else{
|
||||
}
|
||||
else {
|
||||
return {
|
||||
...coordsStyle,
|
||||
left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
|
||||
left: `${-(contextRect?.width / 2 - childrenRect.width / 2)}px`,
|
||||
right: '',
|
||||
}
|
||||
}
|
||||
@@ -225,22 +223,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
left: childrenRect.width + convertPx(arrowSize) - 5,
|
||||
right: '',
|
||||
}
|
||||
if(placementSide === 'start'){
|
||||
if (placementSide === 'start') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
top: 0,
|
||||
bottom: '',
|
||||
}
|
||||
}else if(placementSide === 'end'){
|
||||
}
|
||||
else if (placementSide === 'end') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
top: '',
|
||||
bottom: -childrenRect.height + 'px',
|
||||
bottom: `${-childrenRect.height}px`,
|
||||
}
|
||||
}else{
|
||||
}
|
||||
else {
|
||||
return {
|
||||
...coordsStyle,
|
||||
top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
|
||||
top: `${-(contextRect.height / 2 - childrenRect.height / 2)}px`,
|
||||
bottom: '',
|
||||
}
|
||||
}
|
||||
@@ -249,22 +249,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
top: childrenRect.height + convertPx(arrowSize) - 5,
|
||||
bottom: '',
|
||||
}
|
||||
if(placementSide === 'start'){
|
||||
if (placementSide === 'start') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
left: 0,
|
||||
right: '',
|
||||
}
|
||||
}else if(placementSide === 'end'){
|
||||
}
|
||||
else if (placementSide === 'end') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
left: '',
|
||||
right: 0,
|
||||
}
|
||||
}else{
|
||||
}
|
||||
else {
|
||||
return {
|
||||
...coordsStyle,
|
||||
left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
|
||||
left: `${-(contextRect?.width / 2 - childrenRect.width / 2)}px`,
|
||||
right: '',
|
||||
}
|
||||
}
|
||||
@@ -273,22 +275,24 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
left: '',
|
||||
right: convertPx(arrowSize) - 5,
|
||||
}
|
||||
if(placementSide === 'start'){
|
||||
if (placementSide === 'start') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
top: 0,
|
||||
bottom: '',
|
||||
}
|
||||
}else if(placementSide === 'end'){
|
||||
}
|
||||
else if (placementSide === 'end') {
|
||||
return {
|
||||
...coordsStyle,
|
||||
top: '',
|
||||
bottom: -childrenRect.height + 'px',
|
||||
bottom: `${-childrenRect.height}px`,
|
||||
}
|
||||
}else{
|
||||
}
|
||||
else {
|
||||
return {
|
||||
...coordsStyle,
|
||||
top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
|
||||
top: `${-(contextRect.height / 2 - childrenRect.height / 2)}px`,
|
||||
bottom: '',
|
||||
}
|
||||
}
|
||||
@@ -296,17 +300,16 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
}, [getArrowSide, childrenRectRef.current, contextRectRef.current])
|
||||
|
||||
const ContentComponent = useMemo(() => {
|
||||
|
||||
return (
|
||||
<View className={classNames(styles.tooltip, visible ? '' : styles['tooltip-hidden'], customClassName)} style={customStyle}>
|
||||
{/* 箭头 */}
|
||||
<View className={classNames(styles.arrowIcon, styles[`arrowIcon-${getArrowSide}`])} style={arrowCoords}>
|
||||
<IconFont name='icon-shouqi1' size={arrowSize} color={popoverStyle.color}></IconFont>
|
||||
<IconFont name="icon-shouqi1" size={arrowSize} color={popoverStyle.color}></IconFont>
|
||||
</View>
|
||||
{/* content */}
|
||||
{<View className={styles['tooltip-inner']} id={`content-${id}`} style={{ ...contentCoords, ...customContentStyle }}>
|
||||
<View className={styles['tooltip-inner']} id={`content-${id}`} style={{ ...contentCoords, ...customContentStyle }}>
|
||||
<View className={styles['tooltip-inner-content']}>{content}</View>
|
||||
</View>}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}, [content, getArrowSide, visible, arrowCoords, contentCoords])
|
||||
@@ -316,7 +319,7 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
{/* 遮罩层 */}
|
||||
<View className={classNames(styles.mark, visible ? '' : styles['tooltip-hidden'])} onClick={handleClickMark}></View>
|
||||
<View className={styles['tooltip-container']}>
|
||||
<View onClick={handleClick} id='children'>
|
||||
<View onClick={handleClick} id="children">
|
||||
{children}
|
||||
</View>
|
||||
{ContentComponent}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import useUploadCDNImg from '@/use/useUploadImage'
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import { formatImgUrl } from '@/common/format'
|
||||
import { memo, useEffect, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import useUploadCDNImg from '@/use/useUploadImage'
|
||||
import { formatImgUrl } from '@/common/format'
|
||||
import Popup from '@/components/popup'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
//图片列表
|
||||
type ImageParam = {
|
||||
// 图片列表
|
||||
interface ImageParam {
|
||||
onChange?: (val: string[]) => void
|
||||
defaultList?: string[]
|
||||
onlyRead?: boolean
|
||||
@@ -22,22 +22,23 @@ const PictureItem = memo<ImageParam>(({ onChange, defaultList, onlyRead = false
|
||||
setImageLise(defaultList || [])
|
||||
}, [defaultList])
|
||||
|
||||
//上传图片
|
||||
const uploadImage = async () => {
|
||||
// 上传图片
|
||||
const uploadImage = async() => {
|
||||
setshowPopup(true)
|
||||
}
|
||||
|
||||
//上传图片逻辑
|
||||
const handPic = async (id) => {
|
||||
// 上传图片逻辑
|
||||
const handPic = async(id) => {
|
||||
// let resArr = List.filter(item => {
|
||||
// return item.check
|
||||
// })
|
||||
if (id == 1) {
|
||||
var list: any = await getWxPhoto('after-sale', 5)
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
var list: any = await getChatPhoto('after-sale', 5)
|
||||
}
|
||||
let images: any[] = []
|
||||
const images: any[] = []
|
||||
list?.map((item) => {
|
||||
images.push(item.url)
|
||||
})
|
||||
@@ -45,19 +46,19 @@ const PictureItem = memo<ImageParam>(({ onChange, defaultList, onlyRead = false
|
||||
setshowPopup(false)
|
||||
}
|
||||
|
||||
//删除图片
|
||||
// 删除图片
|
||||
const delImage = (index) => {
|
||||
imageList.splice(index, 1)
|
||||
setImageLise(() => [...imageList])
|
||||
}
|
||||
//监听上传的图片变化
|
||||
// 监听上传的图片变化
|
||||
useEffect(() => {
|
||||
onChange?.(imageList)
|
||||
}, [imageList])
|
||||
|
||||
//预览图片
|
||||
// 预览图片
|
||||
const showImage = () => {
|
||||
let list = imageList?.map((item) => {
|
||||
const list = imageList?.map((item) => {
|
||||
return formatImgUrl(item, '!w800')
|
||||
})
|
||||
Taro.previewImage({
|
||||
@@ -66,15 +67,16 @@ const PictureItem = memo<ImageParam>(({ onChange, defaultList, onlyRead = false
|
||||
})
|
||||
}
|
||||
|
||||
//筛选内容展示
|
||||
// 筛选内容展示
|
||||
const [showPopup, setshowPopup] = useState(false)
|
||||
const [List, setList] = useState<any[]>([{ id: 1, name: '手机相册', check: false }, { id: 2, name: '从微信对话选择', check: false }])
|
||||
//点击选择的方式
|
||||
// 点击选择的方式
|
||||
const handItem = (item) => {
|
||||
List.map(it => {
|
||||
List.map((it) => {
|
||||
if (item.id == it.id) {
|
||||
it.check = true
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
it.check = false
|
||||
}
|
||||
return it
|
||||
@@ -88,22 +90,22 @@ const PictureItem = memo<ImageParam>(({ onChange, defaultList, onlyRead = false
|
||||
<View className={styles.image_main}>
|
||||
{imageList?.map((item, index) => (
|
||||
<View className={styles.ImgItem}>
|
||||
<Image mode='aspectFill' src={formatImgUrl(item)} onClick={showImage}></Image>
|
||||
<Image mode="aspectFill" src={formatImgUrl(item)} onClick={showImage}></Image>
|
||||
{!onlyRead && <View onClick={() => delImage(index)}>
|
||||
<IconFont name={'icon-guanbi'} size={30} customClassName={styles['miconfont_close']} color={'#ffffff'}></IconFont>
|
||||
<IconFont name="icon-guanbi" size={30} customClassName={styles.miconfont_close} color="#ffffff"></IconFont>
|
||||
</View>}
|
||||
</View>
|
||||
))}
|
||||
{!onlyRead && (
|
||||
<View className={styles.uploadImg} onClick={uploadImage}>
|
||||
<IconFont name={'icon-xinzeng'} size={100} color={'#d8d8d8'}></IconFont>
|
||||
<IconFont name="icon-xinzeng" size={100} color="#d8d8d8"></IconFont>
|
||||
{/* <Text className={classnames(styles.miconfont, 'iconfont icon-xinzeng')}></Text> */}
|
||||
{/* <Text className={styles.uploadText}>上传照片</Text> */}
|
||||
</View>
|
||||
)}
|
||||
|
||||
</View>
|
||||
<Popup title={'选择方式'} show={showPopup} onClose={() => setshowPopup(false)} isFixed={true}>
|
||||
<Popup title="选择方式" show={showPopup} onClose={() => setshowPopup(false)} isFixed>
|
||||
<View className={styles.bigBoxThree}>
|
||||
{
|
||||
List.map((item, index) => {
|
||||
|
||||
Reference in New Issue
Block a user