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

筛选完成

Browse Source
This commit is contained in:
cheng
2022-05-17 20:31:53 +08:00
parent 754b3330a9
commit d639f2b23b
22 changed files with 458 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/addressInfo/index.tsx
+19 -5
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])
src/pages/order/components/kindList/index.module.scss
+7 -2
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;
src/pages/order/components/kindList/index.tsx
+14 -5
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 => {
src/pages/order/components/orderState copy/index.module.scss
+18
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;
}
}
src/pages/order/components/orderState copy/index.tsx
+14
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>
)
}
src/pages/order/components/orderState/index.module.scss
+84 -12
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);
}
}
}
src/pages/order/components/orderState/index.tsx
+36 -8
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>
)
}
})