This commit is contained in:
2022-05-18 19:13:21 +08:00
43 changed files with 689 additions and 1918 deletions
@@ -8,7 +8,7 @@
box-sizing: border-box;
margin-top: 20px;
.order_address_icon{
font-size: 60px;
font-size: 76px;
color: $color_main;
}
.order_address_text_con{
@@ -16,21 +16,37 @@
padding: 0 30px;
box-sizing: border-box;
.order_address_text_title{
font-size: $font_size;
font-weight: 700;
font-size: $font_size_medium;
margin-top: 10px;
@include common_ellipsis;
}
.order_address_text_name{
margin-top: 20px;
color: $color_font_three;
font-size: $font_size_medium;
align-items: center;
text{
&:nth-child(1) {
color: #000;
font-weight: 700;
font-size: $color_font_one;
margin-right: 40px;
}
&:nth-child(2) {
color: $color_font_one;
font-size: $font_size_medium;
}
}
}
}
.updateBtn{
font-size: $font_size_medium;
color: $color_font_three;
width: 96px;
height: 52px;
border: 2px solid #dddddd;
border-radius: 28px;
text-align: center;
line-height: 52px;
}
.order_address_text_no{
flex: 1;
font-size: $font_size;
@@ -15,11 +15,12 @@ export type AddressInfoParam = {
phone: string
}
type Param = {
onSelect?: (val:any) => void,
defaultValue?: AddressInfoParam|null
onSelect?: (val:any) => void, //选择
defaultValue?: AddressInfoParam|null //默认值
disabled?: false|true //true禁用后只用于展示
}
export default memo(({onSelect, defaultValue = null}: Param) => {
export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => {
const [showAddressList, setShowAddressList] = useState(false)
useEffect(() => {
@@ -36,31 +37,40 @@ export default memo(({onSelect, defaultValue = null}: Param) => {
//地址格式
const formatAddress = useMemo(() => {
if(userInfo) {
console.log('userInfo::',userInfo)
if(userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}
}, [userInfo])
const changeShow = () => {
if(!disabled)
setShowAddressList(() => true)
}
return (
<View>
<View className={styles.order_address} onClick={() => setShowAddressList(true)}>
<View className={styles.order_address} onClick={() => changeShow()}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
{!userInfo&&<View className={styles.order_address_text_no}>请选择收货地址及信息</View>||
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>{formatAddress}</View>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
{!userInfo&&
<>
<View className={styles.order_address_text_no}>请选择收货地址及信息</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
</>
||<>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
</View>
<View className={styles.order_address_text_title}>{formatAddress}</View>
</View>
</View>}
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
<View className={styles.updateBtn}>修改</View>
</>}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={(item) => getAddress(item)}/>
</View>
</Popup>
</Popup>}
</View>
)
})
@@ -1,23 +1,69 @@
.order_price{
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
&:nth-last-child(n+2) {
margin-bottom: 30px;
}
.order_price_text{
font-size: $font_size_medium;
margin-right: 10px;
// margin-right: 10px;
display: flex;
.iconfont_msg{
position: relative;
}
.miconfont{
font-size: 30px;
font-weight: normal;
}
.message{
position: absolute;
top: -50px;
background: #A8B3BD;
z-index: 9;
min-height: 50px;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
&::before{
z-index: 1;
position: absolute;
bottom: -7px;
left: 10px;
width: 15px;
height: 15px;
content: " ";
transform: rotate(45deg);
background: #A8B3BD;
box-sizing: border-box;
}
}
}
.emphasis{
font-weight: 700;
}
.order_price_num{
color: $color_main;
font-weight: 700;
text{
&:nth-child(1) {
font-size: $font_size_min;
}
&:nth-child(2) {
font-size: $font_size_big;
font-size: 26px;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
.emphasis_num{
text{
&:nth-child(2) {
font-size: $font_size_big;
}
}
}
}
@@ -1,12 +1,13 @@
import { Text, View } from "@tarojs/components"
import { useCallback, useEffect, useMemo } from "react"
import { memo, useCallback, useEffect, useMemo } from "react"
import {formatKbPrice} from '@/common/common'
import classnames from "classnames";
import styles from './index.module.scss'
type Param = {
style?: Object,
number?: number
}
export default ({style, number = 0}:Param) => {
export default memo(({style, number = 0}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
@@ -20,11 +21,43 @@ export default ({style, number = 0}:Param) => {
)
}, [number])
return (
<View className={styles.order_price}>
<Text className={styles.order_price_text}>预估金额</Text>
<View className={styles.order_price_num} style={style}>
{priceDom()}
<>
<View className={styles.order_price}>
<View className={styles.order_price_text}>
<Text>合计金额</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<View className={styles.order_price_num} style={style}>
{priceDom()}
</View>
</View>
</View>
<View className={styles.order_price}>
<View className={styles.order_price_text}>
<Text>空差优惠</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<View className={styles.order_price_num} style={style}>
{priceDom()}
</View>
</View>
<View className={styles.order_price}>
<View className={classnames(styles.order_price_text, styles.emphasis)}>
<Text>应付金额</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
{priceDom()}
</View>
</View>
</>
)
}
})
@@ -65,7 +65,6 @@ export default memo(({value}:{value:OrderParam|null}) => {
}
<View className={styles.order_estimated_amount}>
<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)}/>
{/* <View className={styles.order_price_des}>(按照25kg/条, 预估金额)</View> */}
</View>
</View>
</>
@@ -30,10 +30,10 @@
background-color: $color_main;
}
.order_status_line{
border-left: 4px solid $color_main;
border-left: 2px solid $color_main;
height: 100%;
top: 10px;
left: 10px;
left: 13px;
position: absolute;
z-index: 1;
}
@@ -1,8 +1,7 @@
import { Text, View } from "@tarojs/components"
import { Image, Text, View } from "@tarojs/components"
import { memo, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
title: string,
time: string,
@@ -37,6 +36,9 @@ export default memo(({list = []}:{list?:Param[]}) => {
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.tag}>
<Image src='./styles/image/hkfk.png' />
</View>
</View>
)
})
@@ -0,0 +1,33 @@
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
.order_status_selected{
color: $color_main;
border: 1px solid $color_main;
}
}
@@ -0,0 +1,28 @@
import { Text, View } from "@tarojs/components"
import styles from './index.module.scss'
import classnames from "classnames";
import { memo, useRef, useState } from "react";
type Param = {
onSelect?:(val:number) => void
}
export default memo(({onSelect}: Param) => {
//收货方法 1:自提,2:物流
const shipmentMode = useRef([
{value:1, label:'上门自提', selected:false},
{value:2, label:'物流', selected:false}
])
const [selectValue, setSelectValue] = useState()
const selectShipmentMode = (value) => {
setSelectValue(() => value)
onSelect?.(value)
}
return (
<View className={styles.order_title}>
<Text>收货方式</Text>
{shipmentMode.current.map(item => {
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
})}
</View>
)
})
@@ -0,0 +1,39 @@
.weight_memo{
background-color: #fff;
border-radius: 20px;
padding: 0 20px;
.weight_memo_item{
display: flex;
justify-content: space-between;
height: 130px;
&:nth-child(1) {
border-bottom: 1px solid #f3f3f3;
}
.title, .desc{
display: flex;
align-items: center;
}
.title {
font-size: $font_size;
font-weight: 700;
}
.desc{
color: $color_font_two;
font-size: $font_size_medium;
}
.miconfont_check, .miconfont_custom{
font-size: 37px;
color: $color_main;
font-weight: normal;
padding-right: 10px;
}
.miconfont_custom{
color:#FFC300;
}
.miconfont_more{
font-size: 30px;
padding-left: 10px;
}
}
}
@@ -0,0 +1,36 @@
import Popup from "@/components/popup"
import { Text, Textarea, View } from "@tarojs/components"
import { memo, useCallback, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
onCheck?: () => void
onCustom?: () => void
}
export default memo(({onCheck, onCustom}:Param) => {
return (
<View className={styles.weight_memo}>
<View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
<View className={styles.title}>
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
<Text>陆盈纺织</Text>
</View>
<View className={styles.desc}>
<Text>查看原码单</Text>
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
</View>
</View>
<View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
<View className={styles.title}>
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
<Text>我的码单</Text>
</View>
<View className={styles.desc}>
<Text>自定义</Text>
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
</View>
</View>
</View>
)
})