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

1

Browse Source
This commit is contained in:
cheng
2022-05-18 19:13:21 +08:00
parent d639f2b23b a538824185
commit 069303de80
43 changed files with 689 additions and 1918 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/comfirm.module.scss
+3 -2
View File
@@ -41,10 +41,11 @@
display: flex;
align-items: center;
background-color: #fff;
padding: 0 20px;
height: 116px;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
src/pages/order/comfirm.tsx
+4 -13
View File
@@ -15,6 +15,7 @@ import styles from './comfirm.module.scss'
import { getParam } from "@/common/system";
import useLogin from "@/use/useLogin";
import { alert, goLink } from "@/common/common";
import ShipmentMode from "../editOrder/components/shipmentMode";
export default () => {
const {checkLogin} = useLogin()
@@ -121,14 +122,9 @@ import { alert, goLink } from "@/common/common";
setSubmitOrderData((val) => ({...val, address_id:e.id}))
}
//收货方法 1:自提，2：物流
const shipmentMode = useRef([
{value:1, label:'上门自提', selected:false},
{value:2, label:'物流', selected:false}
])
const selectShipmentMode = (value) => {
const selectShipmentMode = useCallback((value) => {
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
}
}, [])
//获取备注
const getRemark = useCallback((e) => {
@@ -171,12 +167,7 @@ import { alert, goLink } from "@/common/common";
}
return (
<View className={styles.order_main}>
<View className={styles.order_title}>
<Text>收货方式</Text>
{shipmentMode.current.map(item => {
return <View className={classnames(styles.order_status, (submitOrderData?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
})}
</View>
<ShipmentMode onSelect={selectShipmentMode}/>
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
src/pages/order/components/addressInfo/index.module.scss
+22 -6
View File
@@ -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;
src/pages/order/components/addressInfo/index.tsx
+27 -17
View File
@@ -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>
)
})
src/pages/order/components/estimatedAmount/index.module.scss
+49 -3
View File
@@ -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;
}
}
}
}
src/pages/order/components/estimatedAmount/index.tsx
+41 -8
View File
@@ -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>
</>
)
}
})
src/pages/order/components/kindList/index.tsx
-1
View File
@@ -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>
</>
src/pages/order/components/orderState/index.module.scss
+2 -2
View File
@@ -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;
}
src/pages/order/components/orderState/index.tsx
+4 -2
View File
@@ -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>
)
})
src/pages/order/components/shipmentMode/index.module.scss
+33
View File
@@ -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;
}
}
src/pages/order/components/shipmentMode/index.tsx
+28
View File
@@ -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>
)
})
src/pages/order/components/weightMemo/index.module.scss
+39
View File
@@ -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;
}
}
}
src/pages/order/components/weightMemo/index.tsx
+36
View File
@@ -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>
)
})
src/pages/order/index.module.scss
+16 -8
View File
@@ -37,19 +37,24 @@
display: flex;
align-items: center;
background-color: #fff;
padding: 0 20px;
height: 116px;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.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;
@@ -61,7 +66,7 @@
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
justify-content: flex-end;
width: 100%;
height: 175px;
align-items: center;
@@ -74,13 +79,12 @@
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
color: $color_font_three;
}
.order_number_desc{
font-size: $font_size_medium;
@@ -115,4 +119,8 @@
}
}
.weight_memo_con{
margin-bottom: 20px;
}
}
src/pages/order/index.tsx
+17 -6
View File
@@ -1,4 +1,5 @@
import { GetSaleOrderDetailApi } from "@/api/order";
import { goLink } from "@/common/common";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
@@ -7,10 +8,10 @@ import Taro, { useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import WeightMemo from "./components/weightMemo";
import styles from './index.module.scss'
export default () => {
@@ -58,7 +59,7 @@ import styles from './index.module.scss'
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,
estimate_weight: orderDetail.estimate_weight,
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
colo_count: orderDetail.color_list.length, //颜色数量
@@ -76,7 +77,7 @@ import styles from './index.module.scss'
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: '123123121321',
data: orderDetail?.order_no||'',
success: function (res) {
Taro.showToast({
icon: 'none',
@@ -110,12 +111,20 @@ import styles from './index.module.scss'
setShowDesc(() => false)
}, [])
//修改地址
const changeAddress = useCallback(() => {
goLink('/pages/editOrder/index', {id: router.params.id})
}, [router.params])
return (
<View className={styles.order_main}>
<View className={styles.weight_memo_con}>
<WeightMemo/>
</View>
<OrderState />
<AddressInfo defaultValue={defaultAddress}/>
<View onClick={() => changeAddress()}>
<AddressInfo defaultValue={defaultAddress} disabled={true} />
</View>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号'>
@@ -127,6 +136,9 @@ import styles from './index.module.scss'
<SearchInput showBorder={false} title='下单时间'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
<SearchInput showBorder={false} title='付款时间'>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
</View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
@@ -137,7 +149,6 @@ import styles from './index.module.scss'
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.order_btn}>取消订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >