🦄 refactor:订单详情静态界面
This commit is contained in:
Haiyi
@@ -0,0 +1,212 @@
|
||||
.itemBox {
|
||||
margin-top: 38px;
|
||||
overflow: hidden;
|
||||
width: 702px;
|
||||
height: 536px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
margin-left: 24px;
|
||||
|
||||
.topItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
|
||||
.orderNo {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-right: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #0D7CFF;
|
||||
}
|
||||
}
|
||||
|
||||
.pussName {
|
||||
margin-left: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-left: 32px;
|
||||
width: 638px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contBox {
|
||||
width: 638px;
|
||||
margin-left: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.leftCont {
|
||||
width: 134px;
|
||||
height: 134px;
|
||||
// background: #000000;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.leftContNums {
|
||||
width: 134px;
|
||||
height: 39px;
|
||||
background: #000000;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
margin-left: 24px;
|
||||
|
||||
.rightTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 480px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.productBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.productName {
|
||||
margin-right: 8px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.productMode {
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
background: #337FFF;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipMode {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.colorsBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 480px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.colorNameOne {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
width: 133px;
|
||||
height: 30px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.colorName {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colorNameTwo {
|
||||
flex: 1;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.lineOne {
|
||||
width: 638px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
margin-left: 32px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.bottomMsg {
|
||||
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.msgLeft {
|
||||
margin-left: 32px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.msgRight {
|
||||
margin-right: 32px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.msgRightOne {
|
||||
margin-right: 32px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F64861;
|
||||
}
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { ScrollView, View } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import BottomBtns from '@/components/BottomBtns'
|
||||
|
||||
interface propsObj {
|
||||
obj: object
|
||||
}
|
||||
|
||||
|
||||
export default memo((props: propsObj) => {
|
||||
|
||||
const {
|
||||
obj = {}
|
||||
} = props
|
||||
|
||||
const cancle = (item) => {
|
||||
|
||||
}
|
||||
const nextBuy = (item) => {
|
||||
|
||||
}
|
||||
|
||||
const toPay = (item) => {
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.itemBox}>
|
||||
<View className={styles.topItem}>
|
||||
<View className={styles.orderNo}>单号：XS-LY-2208220092</View>
|
||||
<View className={styles.status}>待接单</View>
|
||||
</View>
|
||||
<View className={styles.pussName}>钟雨乔JENNIEEEEE</View>
|
||||
<View className={styles.line}></View>
|
||||
<View className={styles.contBox}>
|
||||
<View className={styles.leftCont}>
|
||||
<View className={styles.leftContNums}>颜色 (1)</View>
|
||||
</View>
|
||||
<View className={styles.rightCont}>
|
||||
<View className={styles.rightTop}>
|
||||
<View className={styles.productBox}>
|
||||
<View className={styles.productName}>9265# 26S全棉双卫衣</View>
|
||||
<View className={styles.productMode}>大货</View>
|
||||
</View>
|
||||
<View className={styles.shipMode}>物流</View>
|
||||
</View>
|
||||
<View className={styles.colorsBox}>
|
||||
<View className={styles.colorNameOne}>051# 花灰白</View>
|
||||
<View className={styles.colorName}>x5m</View>
|
||||
<View className={styles.colorNameTwo}>¥ 37.50/kg</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.lineOne}></View>
|
||||
<View className={styles.bottomMsg}>
|
||||
<View className={styles.msgLeft}>布料信息：</View>
|
||||
<View className={styles.msgRight}>2 种面料，4 种颜色，共 5 米</View>
|
||||
</View>
|
||||
<View className={styles.bottomMsg}>
|
||||
<View className={styles.msgLeft}>预估金额：</View>
|
||||
<View className={styles.msgRightOne}>¥3564.00</View>
|
||||
</View>
|
||||
<View className={styles.bottomBox}>
|
||||
<BottomBtns
|
||||
obj={obj}
|
||||
cancle={() => cancle(obj)}
|
||||
nextBuy={() => nextBuy(obj)}
|
||||
toPay={() => toPay(obj)}
|
||||
></BottomBtns>
|
||||
</View>
|
||||
</View >
|
||||
)
|
||||
})
|
||||
@@ -247,6 +247,7 @@
|
||||
|
||||
.order_list {
|
||||
height: calc(100vh - 160px);
|
||||
background: #f7f7f7;
|
||||
|
||||
.bigBpx {
|
||||
height: 200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { View, ScrollView, Input, Button } from '@tarojs/components'
|
||||
import { View, Input, Button } from '@tarojs/components'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
|
||||
import { mpenumsaleorderstatus, OrderListApi } from '@/api/order'
|
||||
import OrderStatusList from './components/orderStatusList'
|
||||
@@ -8,8 +8,8 @@ import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Popup from '@/components/popup'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { compose } from 'redux'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import ItemList from './components/itemList'
|
||||
|
||||
export default () => {
|
||||
//页码和页数
|
||||
@@ -243,11 +243,10 @@ export default () => {
|
||||
refresherEnabled={true}
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}>
|
||||
{orderData?.list?.map((item) => {
|
||||
{orderData?.list?.map((item, index) => {
|
||||
return (
|
||||
<View key={item.id} className={styles.order_item_con}>
|
||||
<View className={styles.bigBpx}>2222</View>
|
||||
{/* <Order value={item} onClickBtn={clickOrderBtn} /> */}
|
||||
<ItemList obj={item} key={index}></ItemList>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
@@ -309,7 +308,6 @@ export default () => {
|
||||
|
||||
<Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
|
||||
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { handSure?.() }}> 确认</Button >
|
||||
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
|
||||
Reference in New Issue
Block a user