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

订单列表页面完成

Browse Source
This commit is contained in:
cheng
2022-05-19 20:31:53 +08:00
parent 7e5481a7e1
commit f30e174e3e
35 changed files with 1008 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/orderList/components/order/index.module.scss
+143
View File
@@ -0,0 +1,143 @@
.order_item{
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-sizing: border-box;
.header{
display: flex;
align-items: center;
.user{
display: flex;
align-items: center;
.name {
color: #000;
font-weight: 700;
margin-left: 15px;
font-size: $font_size;
}
image{
width: 70px;
height: 70px;
border-radius: 50%;
}
}
.order_num {
flex: 1;
font-size: $font_size_medium;
color: $color_font_one;
text-align: right;
padding-right: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
.miconfont {
font-size: 20px;
}
}
.tag{
font-size: $font_size_min;
padding: 5px 15px;
background-color: $color_main;
color: #fff;
border-radius: 0px 20px 0px 20px;
}
}
.product_title{
display: flex;
align-items: center;
padding: 35px 0;
.product_tag{
background-color: #CDE5FF;
font-size: $font_size_min;
padding: 5px 10px;
color: $color_main;
border-radius: 6px;
}
.product_name{
flex:1;
font-size: $font_size;
font-weight: 700;
padding-left: 20px;
}
.product_status{
font-size: $font_size;
color: $color_main;
}
}
.product_list{
display: flex;
.image{
width: 126px;
height: 126px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 10px;
box-sizing: border-box;
}
}
.color_list{
flex:1;
padding-left: 30px;
.color_item{
display: flex;
justify-content: space-between;
font-size: $font_size_min;
color: $color_font_three;
align-items: center;
margin-bottom: 20px;
.color_title{
font-weight: 700;
font-size: $font_size;
color: #000;
}
.color_more{
color: $color_font_three;
}
}
}
}
.color_count_num{
font-size: $font_size_min;
color: $color_font_two;
background-color: #F6F6F6;
border-radius: 10px;
padding: 10px 22px;
}
.btns_list{
display: flex;
justify-content: flex-end;
margin-top: 30px;
.btns_item{
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 72px;
font-size: $font_size;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 32px;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}
}
src/pages/orderList/components/order/index.tsx
+60
View File
@@ -0,0 +1,60 @@
import { formatImgUrl } from "@/common/fotmat";
import { useSelector } from "@/reducers/hooks";
import { Image, Text, View } from "@tarojs/components"
import classnames from "classnames";
import { memo } from "react";
import styles from './index.module.scss'
export default memo(() => {
const userInfo = useSelector(state => state.userInfo)
return (
<View className={styles.order_item}>
<View className={styles.header}>
<View className={styles.user}>
<Image src={`${userInfo.adminUserInfo.avatar_url}`}/>
<Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
</View>
<View className={styles.order_num}>
<Text>订单号：LY2278204399678</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<View className={styles.tag}>自提</View>
</View>
<View className={styles.product_title}>
<View className={styles.product_tag}>大货</View>
<View className={styles.product_name}>0770# 21S单面平纹(食毛)</View>
<View className={styles.product_status}>待接单</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl('')}/>
<View className={styles.color_num}>24色</View>
</View>
<View className={styles.color_list}>
<View className={styles.color_item}>
<View className={styles.color_title}>1# 薄荷绿</View>
<View className={styles.color_price}>¥40/kg</View>
<View className={styles.color_num}>×2条</View>
</View>
<View className={styles.color_item}>
<View className={styles.color_title}>1# 薄荷绿</View>
<View className={styles.color_price}>¥40/kg</View>
<View className={styles.color_num}>×2条</View>
</View>
<View className={styles.color_item}>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
</View>
</View>
</View>
<View className={styles.color_count_num}>2种面料，3种颜色，共6条</View>
<View className={styles.btns_list}>
<View className={styles.btns_item}>取消订单</View>
<View className={styles.btns_item}>修改地址</View>
<View className={styles.btns_item}>修改地址</View>
<View className={classnames(styles.btns_item, styles.end_btn)}>去付款</View>
</View>
</View>
)
})
src/pages/orderList/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '订单列表',
}
src/pages/orderList/index.module.scss
+36
View File
@@ -0,0 +1,36 @@
.order_list_main{
min-height: 100vh;
background-color: $color_bg_one;
display: flex;
flex-direction: column;
.title{
padding: 0 20px;
background-color: #fff;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
border-bottom: 2px solid #e2e2e2;
.order_status_list{
display: flex;
justify-content: space-between;
font-size: $font_size;
color: #9E9E9E;
margin-top: 20px;
.order_status_item{
padding: 20px 10px;
box-sizing: border-box;
}
.selected{
font-weight: 700;
color: #000;
border-bottom: 4px solid #707070;
// border-radius: 4px;
}
}
}
.order_list{
flex:1;
height: 0;
.order_item{
margin-top: 20px;
}
}
}
src/pages/orderList/index.tsx
+66
View File
@@ -0,0 +1,66 @@
import Search from "@/components/search"
import useLogin from "@/use/useLogin"
import { Image, Text, View } from "@tarojs/components"
import { useDidShow, useRouter } from "@tarojs/taro"
import { useCallback, useState } from "react"
import {ORDER_STATUS} from '@/common/enum'
import styles from './index.module.scss'
import classnames from "classnames";
import { useSelector } from "@/reducers/hooks"
import { formatImgUrl } from "@/common/fotmat"
import Order from "./components/order"
import InfiniteScroll from "@/components/infiniteScroll"
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
const router = useRouter()
//搜索参数
const [searchField, setSearchField] = useState({
shipment_mode:'',
page : 1,
size : 10,
key:''
})
//订单状态
type orderStatusParam = {value:number, label:string}[]
const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)]
const [selectStatus, setSelectStatus] = useState(-1)
const changeStatus = useCallback((e) => {
setSelectStatus(() => e)
}, [])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
// setMaterialList(() => ({list:[], total:0}))
setSearchField((val) => ({...val, code_or_name:e, size:10}))
}, [])
return (
<View className={styles.order_list_main}>
<View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
<View className={styles.order_status_list}>
{order_status.map(item => {
return <View key={item.value} onClick={() => changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label}</View>
})}
</View>
</View>
<View className={styles.order_list}>
<InfiniteScroll>
{new Array(10).fill('').map(item => {
return <View className={styles.order_item}> <Order/></View>
})}
</InfiniteScroll>
</View>
</View>
)
}