xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

筛选完成

Browse Source
This commit is contained in:
czm 2022-05-17 20:31:53 +08:00
parent 754b3330a9
commit d639f2b23b
22 changed files with 458 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/order.ts
View File

@ -3,7 +3,7 @@ import { useRequest } from "@/use/useHttp"
/**
* 下单现货销售单
*/
export const SaleOrderApi = () => {
export const SaleOrderApi = () => {
return useRequest({
url: `/v1/mall/saleOrder`,
method: "post",
@ -18,4 +18,14 @@ import { useRequest } from "@/use/useHttp"
url: `/v1/mall/saleOrder/preView`,
method: "put",
})
}
}
/**
* 获取销售单详情
*/
export const GetSaleOrderDetailApi = () => {
return useRequest({
url: `/v1/mall/saleOrder`,
method: "get",
})
}

1
src/components/AddressList/index.tsx
View File

@ -3,6 +3,7 @@ import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import "./index.scss"
import {addressListApi} from "@/api/addressManager"
import { useDidShow } from "@tarojs/taro"
interface Params{
refresherEnabled?: boolean,//是否开启刷新

24
src/components/filter/index.tsx
View File

@ -3,23 +3,26 @@ 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 { memo, useEffect, useRef, useState } from "react";
import styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void //确定搜索
onRest?: (val:Object) => void //重置
} & PopuParams
export default ({onClose, onFiltr, show = false, onRest}:params) => {
export default memo(({onClose, onFiltr, show = false, onRest}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesName: '',
seriesId: '',
width: '',
weight: '',
element: ''
element: '',
})
const selectFieldValue = useRef({width:'幅宽', weight:'克重', element:'成分', seriesName:'系列'})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
@ -34,7 +37,7 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
setFilterObj({...filterObj, seriesId:e.id, seriesName: e.name})
}
const onCloseEven = () => {
@ -44,10 +47,11 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
//重置数据
const onRestEven = () => {
let res = {
seriesName: '',
seriesId: '',
width: '',
weight: '',
element: ''
element: '',
}
setFilterObj(res)
onFiltr?.(filterObj)
@ -56,7 +60,7 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
//提交搜索
const onVerify = () => {
onFiltr?.(filterObj)
onFiltr?.({data:filterObj, field: selectFieldValue.current})
onClose?.()
}
@ -67,7 +71,6 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
}
return (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
@ -82,14 +85,14 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
<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} type="digit" onBlur={(e) => setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<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 type="digit" value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
<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>
@ -111,6 +114,5 @@ export default ({onClose, onFiltr, show = false, onRest}:params) => {
</View>
</View>
</Popup>
)
}
})

5
src/components/search/index.tsx
View File

@ -20,7 +20,7 @@ type Params = {
defaultValue?: string
}
export default forwardRef(({
export default memo(forwardRef(({
clickOnSearch, //点击筛选按钮触发
changeOnSearch, //输入文字触发
disabled = false, //是否禁用
@ -35,7 +35,6 @@ export default forwardRef(({
}:Params, ref) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
setInputCon(defaultValue)
}, [defaultValue])
@ -81,4 +80,4 @@ export default forwardRef(({
</View>
</>
)
})
}))

6
src/components/shopCart/index.tsx
View File

@ -11,6 +11,7 @@ import { alert, goLink } from "@/common/common";
import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
import { debounce } from "@/common/util";
type param = {
show?: true|false,
@ -194,7 +195,7 @@ export default ({show = false, onClose}: param) => {
},[list])
//去结算
const orderDetail = () => {
const orderDetail = debounce(() => {
getSelectId()
if(selectIds.current.length == 0) {
alert.error('请选择面料')
@ -203,8 +204,7 @@ export default ({show = false, onClose}: param) => {
setParam({ids, sale_mode:selectIndex})
goLink('/pages/order/comfirm')
}
}
}, 500)
return (
<View className={styles.shop_cart_main}>

14
src/pages/details/components/orderCount/index.tsx
View File

@ -14,7 +14,7 @@ import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
import { debounce, getFilterData } from "@/common/util";
@ -56,7 +56,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
let lists = initList(data.list)
setList([...lists])
setList(() => [...lists])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
@ -144,7 +144,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//添加购物车
const {getSelfUserInfo} = UseLogin()
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
const addShopCart = debounce( async () => {
try {
await getSelfUserInfo()
} catch(msg) {
@ -178,13 +178,13 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
})
}
}
}, 500)
//筛选数据
const searchInput = (e) => {
const searchInput = useCallback((e) => {
condition.current.code_or_name = e
getColorList()
}
}, [])
//清空搜索内容
const searchRef = useRef<any>(null)
@ -216,7 +216,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" ref={searchRef} changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
<Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => clearSearch()}>取消</View>
</View>}

5
src/pages/index/index.tsx
View File

@ -13,6 +13,7 @@ import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
import useLogin from '@/use/useLogin'
import LoadingCard from '@/components/loadingCard'
export default () => {
@ -98,8 +99,8 @@ export default () => {
<Banner/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
<View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
<Search disabled={true} style={{width: '263rpx'}} />
</View>
</View>
<View className={styles.products}>

11
src/pages/order/comfirm.module.scss
View File

@ -46,14 +46,18 @@
border-radius: 20px;
margin-top: 20px;
.order_desc_con{
flex:1;
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text{
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
flex:1;
}
.order_desc_text_hint{
text-align: right;
}
.miconfont{
font-size: 20px;
@ -86,6 +90,9 @@
align-items: center;
color: #fff;
}
.ok_order_btn {
opacity: 1;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;

99
src/pages/order/comfirm.tsx
View File

@ -1,30 +1,35 @@
import { SaleOrderPreViewApi } from "@/api/order";
import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
import { formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useRouter } from "@tarojs/taro";
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo";
import AddressInfo,{AddressInfoParam} from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import styles from './comfirm.module.scss'
import { getParam } from "@/common/system";
import useLogin from "@/use/useLogin";
import { alert, goLink } from "@/common/common";
export default () => {
const {checkLogin} = useLogin()
const [showDesc, setShowDesc] = useState(false)
//下单信息
type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
const [submitOrder, setSubmitOrder] = useState<OrderParams>()
const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
//获取购物车传过来的id
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useEffect(() => {
useDidShow(async () => {
await checkLogin()
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map(item => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
@ -32,11 +37,11 @@ import { getParam } from "@/common/system";
})
})
getSaleOrderPreView()
setSubmitOrder((val) => ({...val, sale_mode:param?.sale_mode}))
}, [])
setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
})
//获取销售预览订单
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string, default_address:AddressInfoParam}
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
@ -48,8 +53,11 @@ import { getParam } from "@/common/system";
//监听获取到的数据
useEffect(() => {
if(preViewOrder)
if(preViewOrder) {
formatData()
//当有默认地址时设置默认地址id
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
}
}, [preViewOrder])
//格式化数据格式
@ -83,16 +91,34 @@ import { getParam } from "@/common/system";
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: Object.values(dataList)
})
setSubmitOrder({...submitOrder, list: orderList})
setSubmitOrderData({...submitOrderData, list: orderList})
}
}
const formatPreViewOrderMemo = useMemo(() => {
console.log('formatPreViewOrder::',formatPreViewOrder)
return formatPreViewOrder
}, [formatPreViewOrder])
//格式化初始地址
const defaultAddress = useMemo(() => {
const address = preViewOrder?.default_address
if(address) {
return {
province_name: address.province_name,
city_name: address.city_name,
district_name: address.district_name,
address_detail: address.address_detail,
id: address.id,
name: address.name,
phone: address.phone
}
}
return null
}, [preViewOrder])
//获取地址
const getAddress = (e) => {
setSubmitOrder((val) => ({...val, address_id:e.id}))
setSubmitOrderData((val) => ({...val, address_id:e.id}))
}
//收货方法 1:自提，2：物流
@ -101,41 +127,72 @@ import { getParam } from "@/common/system";
{value:2, label:'物流', selected:false}
])
const selectShipmentMode = (value) => {
setSubmitOrder((val) => ({...val, shipment_mode:value}))
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
}
//获取备注
const getRemark = useCallback((e) => {
setSubmitOrder((val) => ({...val, remark:e}))
setSubmitOrderData((val) => ({...val, remark:e}))
setShowDesc(() => false)
}, [])
//提交按钮是否可用
const btnStatus = useMemo(() => {
console.log('submitOrder::',submitOrder)
return submitOrder?.address_id&& submitOrder.list?.length &&submitOrder.shipment_mode
}, [submitOrder])
console.log('submitOrder::',submitOrderData)
return submitOrderData?.address_id&& submitOrderData.list?.length &&submitOrderData.shipment_mode
}, [submitOrderData])
//提交订单
const {fetchData: saleOrderFetchData} = SaleOrderApi()
const submitOrderEven = () => {
if(!submitOrderData?.address_id) {
alert.error('请选择地址')
return false
}
if(!submitOrderData?.shipment_mode) {
alert.error('请选择收货方式')
return false
}
Taro.showModal({
title: '确定提交？',
success: async function (res) {
if (res.confirm) {
const res = await saleOrderFetchData(submitOrderData)
if(res.success) {
goLink('/pages/order/index',{id: res.data.id})
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
return (
<View className={styles.order_main}>
<View className={styles.order_title}>
<Text>收货方式</Text>
{shipmentMode.current.map(item => {
return <View className={classnames(styles.order_status, (submitOrder?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
return <View className={classnames(styles.order_status, (submitOrderData?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
})}
</View>
<AddressInfo onSelect={(e) => getAddress(e)}/>
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View>
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
{
submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<EstimatedAmount style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
</View>
<View className={classnames(styles.order_btn)}>提交订单{btnStatus?'true':'false'}</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>

24
src/pages/order/components/addressInfo/index.tsx
View File

@ -5,25 +5,39 @@ import classnames from "classnames";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from './index.module.scss'
export type AddressInfoParam = {
province_name: string,
city_name: string,
district_name: string,
address_detail: string,
id: number,
name: string,
phone: string
}
type Param = {
onSelect?: (val:any) => void
onSelect?: (val:any) => void,
defaultValue?: AddressInfoParam|null
}
export default memo(({onSelect}: Param) => {
export default memo(({onSelect, defaultValue = null}: Param) => {
const [showAddressList, setShowAddressList] = useState(false)
useEffect(() => {
setUserInfo(() => defaultValue)
}, [defaultValue])
//选择地址
const [userInfo, setUserInfo] = useState<any>()
const getAddress = useCallback((val) => {
setShowAddressList(false)
setUserInfo(val)
setShowAddressList(() => false)
setUserInfo(() => val)
onSelect?.(val)
}, [])
//地址格式
const formatAddress = useMemo(() => {
if(userInfo) {
console.log('userInfo::',userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}
}, [userInfo])

9
src/pages/order/components/kindList/index.module.scss
View File

@ -1,5 +1,11 @@
.orders_list_title{
padding: 20px 20px 10px 20px;
color: $color_font_two;
font-size: $font_size_medium;
}
.orders_list_con{
margin-top: 20px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
@ -90,7 +96,6 @@
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;

19
src/pages/order/components/kindList/index.tsx
View File

@ -1,6 +1,6 @@
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import { View } from "@tarojs/components"
import { memo, useCallback } from "react"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
@ -10,21 +10,30 @@ type OrderParam = {
list: any[],
sale_mode: number,
sale_mode_name: string
unit: string
unit: string,
colo_count: number,
num_count: number
}
export default memo(({value}:{value:OrderParam}) => {
export default memo(({value}:{value:OrderParam|null}) => {
//对应数量
const formatCount = useCallback((item) => {
return value.sale_mode == 0? item.roll : Number(item.length / 100)
return value?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [value])
//对应单价
const standardPrice = useCallback(item => {
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value.sale_mode == 1?'m':'kg')
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
}, [value])
//数量格式
const numText = useMemo(() => {
if(value)
return `${value?.list.length}种面料，${value?.colo_count}种颜色，共${value?.num_count }${value?.unit}`
}, [value])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{
value?.list.map(item => {

18
src/pages/order/components/orderState copy/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
}
}

14
src/pages/order/components/orderState copy/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}

96
src/pages/order/components/orderState/index.module.scss
View File

@ -1,18 +1,90 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
padding: 20px;
box-sizing:border-box;
.order_status_list{
max-height: 250px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
.order_status_list_show {
max-height: 1000px !important;
}
.order_status_item{
position: relative;
padding-left: 50px;
min-height: 120px;
.order_status_tail_end, .order_status_tail{
width: 20px;
height: 20px;
border: 2px solid $color_main;
background-color: #fff;
border-radius: 50%;
position:absolute;
left: 0;
top: 10px;
z-index: 10;
}
.order_status_tail_end{
background-color: $color_main;
}
.order_status_line{
border-left: 4px solid $color_main;
height: 100%;
top: 10px;
left: 10px;
position: absolute;
z-index: 1;
}
.order_status_content{
display: flex;
align-items: center;
.order_status_title{
color: $color_font_two;
font-size: $font_size_big;
font-weight: 700;
}
.order_status_time{
color: $color_font_two;
font-size: $font_size_medium;
padding: 0 20px;
}
.order_status_tag{
font-size: $font_size_min;
background: #F0F0F0;
border-radius: 6px;
padding: 5px 10px;
color: $color_font_two;
}
.order_status_select{
color: $color_main;
}
.order_status_tag_select{
color: $color_main;
}
}
.order_status_des{
color: $color_font_two;
font-size: $font_size_medium;
}
.order_status_des_select{
color: $color_font_one;
}
}
.more{
width: 100%;
text-align: center;
font-size: $font_size_min;
color: $color_font_one;
padding-top: 20px;
.miconfonts{
display: inline-block;
font-size: 25px;
transform:rotate(90deg);
}
.open_miconfonts{
transform:rotate(-90deg);
}
}
}

44
src/pages/order/components/orderState/index.tsx
View File

@ -1,14 +1,42 @@
import { View } from "@tarojs/components"
import { Text, View } from "@tarojs/components"
import { memo, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
export default ({
state = '',
desc = ''
}) => {
type Param = {
title: string,
time: string,
tag: string,
desc: string
}
export default memo(({list = []}:{list?:Param[]}) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
list = [
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
{title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
]
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{list.map((item, index) => <View className={styles.order_status_item}>
{(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.title}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
<View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
</View>)}
</View>
{(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
</View>
)
}
})

124
src/pages/order/index.tsx
View File

@ -1,5 +1,5 @@
import { SaleOrderPreViewApi } from "@/api/order";
import { formatPriceDiv } from "@/common/fotmat";
import { GetSaleOrderDetailApi } from "@/api/order";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
@ -16,72 +16,62 @@ import styles from './index.module.scss'
export default () => {
const [showDesc, setShowDesc] = useState(false)
//获取购物车传过来的id
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
const router = useRouter()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useEffect(() => {
idsAndSaleModel.current.sale_mode = Number(router.params.sale_mode)
router.params.ids?.split('-')?.map(item => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
shopping_cart_product_color_id: Number(item)
})
})
getSaleOrderPreView()
}, [])
//获取销售预览订单
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string}
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
let res = await fetchData(idsAndSaleModel.current)
setPreViewOrder(res.data)
if(router.params.id) {
let res = await getOrderFetchData({id: router.params.id})
setOrderDetail(res.data)
}
}
//监听获取到的数据
useEffect(() => {
if(preViewOrder)
if(orderDetail)
formatData()
}, [preViewOrder])
}, [orderDetail])
//格式化数据格式
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
if(orderDetail?.color_list&&orderDetail?.color_list.length > 0) {
let dataList = {}
let num_count = 0 //总数量
preViewOrder?.product_color_list.map(item => {
orderDetail?.color_list.map(item => {
dataList[item.product_code] = dataList[item.product_code]||{}
dataList[item.product_code].product_code = item.product_code
dataList[item.product_code].product_name = item.product_name
dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name
dataList[item.product_code].sale_mode_name = orderDetail.sale_mode_name
dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[]
dataList[item.product_code].color_list.push(item)
//大货
if (preViewOrder.sale_mode == 0) num_count += item.roll
if (orderDetail.sale_mode == 0) num_count += item.roll
//剪板或散件
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count += item.length
})
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100);
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
estimate_weight: preViewOrder.estimate_weight,
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
colo_count: preViewOrder.product_color_list.length, //颜色数量
if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100);
setFormatDetailOrder({
estimate_amount: orderDetail.estimate_amount, //预估金额
estimate_weight: orderDetail.estimate_weight,
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
colo_count: orderDetail.color_list.length, //颜色数量
num_count: num_count, //总数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: Object.values(dataList)
})
}
}
const formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
return formatDetailOrder
}, [formatDetailOrder])
//复制功能
const clipboardData = () => {
@ -96,42 +86,62 @@ import styles from './index.module.scss'
})
}
//格式化初始地址
const defaultAddress = useMemo(() => {
const address = orderDetail?.default_address
if(address) {
return {
province_name: address.province_name,
city_name: address.city_name,
district_name: address.district_name,
address_detail: address.address_detail,
id: address.id,
name: address.name,
phone: address.phone
}
}
return null
}, [orderDetail])
//订单备注
const [orderRemark, setOrderRemark] = useState('')
const getRemark = useCallback((e) => {
setOrderRemark(() => e)
setShowDesc(() => false)
}, [])
return (
<View className={styles.order_main}>
<OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
<View className={styles.order_title}>
<Text>收货方式</Text>
<View className={styles.order_status}>物流</View>
<View className={styles.order_status}>上门自提</View>
</View>
<AddressInfo/>
<OrderState />
<AddressInfo defaultValue={defaultAddress}/>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View>
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
</View>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单备注</View>
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号'>
<View className={styles.order_num}>
<Text>13535359535</Text>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间'>
<Text>2022-4-5 10:11:55</Text>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
</View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderRemark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<EstimatedAmount style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View>
</View>
<View className={styles.order_btn}>提交订单</View>
<View className={styles.order_btn}>取消订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => console.log(e)}/>
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
</View>

10
src/pages/searchList/components/selectData/index.module.scss
View File

@ -3,7 +3,7 @@
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
// display: flex;
white-space: nowrap;
::-webkit-scrollbar {
display:none;
@ -12,12 +12,12 @@
color:transparent;
}
.tabs_item{
flex:1;
min-width: 130px;
padding: 0 10px;
display: inline-block;
font-size: 24rpx;
font-size: 24px;
background-color: #ecf5ff;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
@ -30,7 +30,7 @@
align-items: center;
justify-content: center;
font-size: $font_size_medium;
@include common_ellipsis();
}
.tabs_index{
height: 5px;

4
src/pages/searchList/components/selectData/index.tsx
View File

@ -4,7 +4,7 @@ import classnames from "classnames";
import styles from './index.module.scss'
type ListProps = {
export type ListProps = {
title: string,
value: number
}
@ -44,7 +44,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
list.map((item, index) => {
return (
<View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
<View className={classnames(styles.tabs_item_con)}>{`${item.title}: ${item.value}`}</View>
</View>
)
})

1
src/pages/searchList/hightSearchList.module.scss
View File

@ -74,6 +74,7 @@
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;

64
src/pages/searchList/hightSearchList.tsx
View File

@ -1,6 +1,5 @@
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
@ -8,17 +7,16 @@ import SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useEffect, useRef, useState } from "react";
import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
import {GetLabProductApi} from "@/api/material"
import { getFilterData } from "@/common/util";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
import { goLink } from "@/common/common";
import SelectData, {ListProps} from "./components/selectData";
export default () => {
const {checkLogin} = useLogin()
@ -27,17 +25,6 @@ export default () => {
})
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
])
//搜索参数
const [searchField, setSearchField] = useState({
@ -45,7 +32,11 @@ export default () => {
a: '',
b: '',
page : 1,
size : 10
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取面料列表
@ -100,6 +91,7 @@ export default () => {
}
}
//监听lab数据变化
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(colorState.deviceLab) {
@ -114,6 +106,33 @@ export default () => {
goLink('/pages/details/index',{id:item.id})
}
//获取筛选条件
const getFiltr = (e) => {
const {data} = e
setSearchField({
...searchField,
width: data?.width,
weight_density: data?.weight,
size: 10,
component: data?.element,
product_kind_id: data?.seriesId
})
formatSelectList(e)
}
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
console.log('data123::',val.data)
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
data.push({title:val.field[key], value:val.data[key]})
}
}
setSelectList([...data])
}
//页面下拉刷新
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
@ -145,16 +164,9 @@ export default () => {
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</ScrollView>
<View className={styles.filter_scroll}>
<SelectData list={selectList}/>
</View>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@ -188,7 +200,7 @@ export default () => {
</InfiniteScroll>}
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
<Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
</View>
)
}

34
src/pages/searchList/searchList.tsx
View File

@ -4,7 +4,7 @@ import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SelectData from "./components/selectData";
import SelectData, {ListProps} from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useEffect, useRef, useState } from "react";
@ -24,7 +24,6 @@ export default () => {
const [showFilter, setShowFilter] = useState(false)
const router = useRouter()
const [selectList, setSelectList] = useState<any>([])
//搜索参数
const [searchField, setSearchField] = useState({
@ -69,10 +68,10 @@ export default () => {
}, [materialList])
//输入了搜索关键字
const getSearchData = (e) => {
const getSearchData = useCallback((e) => {
setMaterialList(() => ({list:[], total:0}))
setSearchField({...searchField, code_or_name:e, size:10})
}
setSearchField((val) => ({...val, code_or_name:e, size:10}))
}, [])
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
@ -95,19 +94,36 @@ export default () => {
//获取筛选条件
const getFiltr = (e) => {
const {data} = e
setSearchField({
...searchField,
width: e?.width,
weight_density: e?.weight,
width: data?.width,
weight_density: data?.weight,
size: 10,
component: e.element
component: data?.element,
product_kind_id: data?.seriesId
})
formatSelectList(e)
}
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
console.log('data123::',val.data)
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
data.push({title:val.field[key], value:val.data[key]})
}
}
console.log('data::',data)
setSelectList([...data])
}
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" placeholder="请输入面料关键词" btnStyle={{color: '#007AFF'}} defaultValue={router.params.key} changeOnSearch={(e) => getSearchData(e)} debounceTime={300}/>
<Search placeIcon="out" placeholder="请输入面料关键词" defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>