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

🐞 fix(ID1000764): 售后入口入口位置问题

Browse Source 
【售后入口入口位置问题】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000764
This commit is contained in:
xuan 2022-12-13 14:42:56 +08:00
parent 30b2930a3a
commit a1c0645d39
6 changed files with 380 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -274,6 +274,13 @@
"query": "purchaser_id=1705",
"launchMode": "default",
"scene": null
},
{
"name": "订单页面",
"pathName": "pages/order/index",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

38
src/pages/order/components/NavBar/index.module.scss Normal file
View File

@ -0,0 +1,38 @@
.navBarContainer {
overflow: hidden;
background-color: #fff;
height: auto;
flex-shrink: 0;
}
.navBar {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 24px;
box-sizing: border-box;
.left_view {
flex: 2;
}
.title {
flex: 5;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
font-size: 36px;
font-weight: 550;
color: #000;
}
.right_view {
flex: 2;
}
}
.back {
display: flex;
align-items: center;
.iconName {
font-size: 28px;
}
}

75
src/pages/order/components/NavBar/index.tsx Normal file
View File

@ -0,0 +1,75 @@
import { View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import { useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
interface NavBarPropsType {
children?: React.ReactNode
hasLeft?: boolean
leftSlot?: React.ReactNode
title?: string
onClickLeftIcon?: () => void
}
const NavBar = (props: NavBarPropsType) => {
const { children, hasLeft = false, title = '', leftSlot, onClickLeftIcon } = props
const handleClickLeftIcon = () => {
onClickLeftIcon?.()
}
const menuButtonRect = useRef<Taro.getMenuButtonBoundingClientRect.Rect | null>(null)
const systemInfo = useRef<Taro.getSystemInfoSync.Result | null>(null)
const navBarExtendHeight = useRef<number>(0)
const rpxToPx = useRef(0)
const [, setForceUpdate] = useState({})
const [height, setHeight] = useState(0)
// 处理布局
const handleLayout = () => {
const { statusBarHeight, system } = systemInfo.current!
const ios = !!(system.toLowerCase().search('ios') + 1)
if (ios) {
navBarExtendHeight.current = 4 // 下方扩展4像素高度 防止下方边距太小
}
else {
navBarExtendHeight.current = 0
}
const { top, height: menuHeight } = menuButtonRect.current!
const height = menuHeight + (top - statusBarHeight!) * 2 + statusBarHeight! // 整个navBar的高度
console.log('height', height)
setHeight(height)
}
useEffect(() => {
systemInfo.current = Taro.getSystemInfoSync()
menuButtonRect.current = Taro.getMenuButtonBoundingClientRect()
rpxToPx.current = systemInfo.current.screenWidth / 750
setForceUpdate({})
handleLayout()
}, [])
const menuHeight = useMemo(() => {
return menuButtonRect.current?.height
}, [menuButtonRect.current])
const menuTop = useMemo(() => {
return menuButtonRect.current?.top
}, [menuButtonRect.current])
return <View className={styles.navBarContainer} style={{ height: `${height + navBarExtendHeight.current}px` }}>
<View className={styles.navBar} style={{ height: `${menuHeight}px`, marginTop: `${menuTop}px` }}>
<View className={styles.left_view}>
{hasLeft && leftSlot
? leftSlot
: <View className={styles.back} onClick={handleClickLeftIcon}>
<IconFont name="icon-zhankai" size={50} color="#000000" customStyle={{ transform: 'rotate(90deg)' }}></IconFont>
<View className={styles.iconName}>返回</View>
</View>
}
</View>
<View className={styles.title}>{ title || children }</View>
<View className={styles.right_view}>
</View>
</View>
</View>
}
export default NavBar

1
src/pages/order/index.config.ts
View File

@ -1,3 +1,4 @@
export default {
navigationBarTitleText: '订单',
navigationStyle: 'custom',
}

482
src/pages/order/index.module.scss
View File

@ -1,274 +1,280 @@
.orderContainer {
overflow: hidden;
height: 100%;
}
.flexBox {
display: flex;
width: 200px;
align-items: center;
justify-content: flex-end;
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: 24px;
}
.icon_shaixuan {
color: #0D7CFF;
font-size: 35px;
margin-right: 10px;
.searchBar {
background: #ffffff;
padding: 16px 24px;
position: sticky;
top: 0;
z-index: 99;
}
.activeshaixuan {
color: #000;
font-size: 35px;
margin-right: 10px;
color: #000;
font-size: 35px;
margin-right: 10px;
}
.shaixuan {
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
font-size: 28px;
font-weight: 400;
color: #000000;
}
.activeshai {
color: #0D7CFF;
margin-right: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0d7cff;
margin-right: 32px;
font-size: 28px;
font-weight: 400;
}
.popupBox {
// padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
// padding-bottom: env(safe-area-inset-bottom);
// padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
// padding-bottom: env(safe-area-inset-bottom);
.topBox {
.topBox {
display: flex;
padding-left: 48px;
.leftTop {
.lefttopTitle {
font-size: 28px;
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.lefttopSelectBox {
display: flex;
padding-left: 48px;
align-items: center;
width: 319px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
// opacity: 0.4;
justify-content: space-between;
margin-right: 16px;
.leftTop {
.lefttopTitle {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.lefttopSelectBox {
display: flex;
align-items: center;
width: 319px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
// opacity: 0.4;
justify-content: space-between;
margin-right: 16px;
.lefttopSelectNameactive {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #8b8b8b;
margin-left: 24px;
}
.lefttopSelectName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-left: 24px;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
}
}
.activelefttopSelectBox {
width: 319px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
border: 1px solid #337FFF;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 16px;
.lefttopSelectName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
margin-left: 24px;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
color: #337FFF;
}
}
}
}
.secondBox {
margin-top: 40px;
padding-left: 48px;
.secondTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
.lefttopSelectNameactive {
font-size: 28px;
font-weight: 400;
color: #8b8b8b;
margin-left: 24px;
}
.inputBox {
width: 654px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
// opacity: 0.4;
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
.orderInput {
margin-left: 24px;
width: 400px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.saomiao {
margin-right: 24px;
font-size: 40px;
color: #000;
}
}
}
.thirdBox {
margin-top: 30px;
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
.lefttopSelectName {
font-size: 28px;
font-weight: 400;
color: #000000;
margin-left: 24px;
}
.flexModebox {
margin-top: 24px;
display: flex;
.activemodeBox {
margin-right: 16px;
width: 152px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
line-height: 68px;
border: 1px solid #337FFF;
box-sizing: border-box;
}
.modeBox {
margin-right: 16px;
width: 152px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
.icon_more {
margin-right: 24px;
font-size: 30px;
}
}
}
.bottomBox {
// width: 100%;
// width: 750px;
height: 160px;
background: #FFFFFF;
// position: fixed;
// bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
z-index: 99;
.activelefttopSelectBox {
width: 319px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
border: 1px solid #337fff;
display: flex;
padding-top: 16px;
align-items: center;
justify-content: space-between;
margin-right: 16px;
.resetBox {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087EFF;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
text-align: center;
line-height: 80px;
background-color: #fff;
.lefttopSelectName {
font-size: 28px;
font-weight: 400;
color: #337fff;
margin-left: 24px;
}
.button {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
.icon_more {
margin-right: 24px;
font-size: 30px;
color: #337fff;
}
}
}
}
.activeButton {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
.secondBox {
margin-top: 40px;
padding-left: 48px;
.secondTopfont {
font-size: 28px;
font-weight: 500;
color: #000000;
}
// .areaBox {
// height: calc($customTabBarHeight + env(safe-area-inset-bottom));
// width: 100%;
// }
.inputBox {
width: 654px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
// opacity: 0.4;
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
.orderInput {
margin-left: 24px;
width: 400px;
font-size: 28px;
font-weight: 400;
color: #000000;
}
.saomiao {
margin-right: 24px;
font-size: 40px;
color: #000;
}
}
}
.thirdBox {
margin-top: 30px;
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-weight: 500;
color: #000000;
}
.flexModebox {
margin-top: 24px;
display: flex;
.activemodeBox {
margin-right: 16px;
width: 152px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
font-size: 28px;
font-weight: 400;
color: #337fff;
text-align: center;
line-height: 68px;
border: 1px solid #337fff;
box-sizing: border-box;
}
.modeBox {
margin-right: 16px;
width: 152px;
height: 68px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-weight: 400;
color: #000000;
text-align: center;
line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
}
}
.bottomBox {
// width: 100%;
// width: 750px;
height: 160px;
background: #ffffff;
// position: fixed;
// bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
z-index: 99;
display: flex;
padding-top: 16px;
align-items: center;
justify-content: space-between;
.resetBox {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087eff;
font-size: 28px;
font-weight: 500;
color: #337fff;
text-align: center;
line-height: 80px;
background-color: #fff;
}
.button {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-weight: 500;
color: #ffffff;
text-align: center;
line-height: 80px;
}
.activeButton {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337fff;
border-radius: 44px;
font-size: 32px;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
}
.order_list {
height: calc(100vh - $customTabBarHeight + env(safe-area-inset-bottom) - 230px);
background: #f7f7f7;
// .kongboxTwo {
// height: calc($customTabBarHeight + env(safe-area-inset-bottom));
// }
flex: 1 1 auto;
overflow: hidden;
// height: calc(100vh - $customTabBarHeight + env(safe-area-inset-bottom) - 230px);
background: #f7f7f7;
}
.afterSaleIcon {
position: relative;
width: 68px;
height: 68px;
background: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(104, 180, 255, 0.35);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 50%;
.iconName {
position: absolute;
top: -10px;
right: -30px;
width: 56px;
height: 30px;
background: #007aff;
border-radius: 10px 0px 10px 0px;
font-size: 18px;
font-weight: 400;
text-align: center;
line-height: 30px;
color: #ffffff;
}
}

18
src/pages/order/index.tsx
View File

@ -7,6 +7,7 @@ import styles from './index.module.scss'
import ItemList from './components/itemList'
import OfflinePay from './components/offlinePay'
import PayPopup from './components/PayPopup'
import NavBar from './components/NavBar'
import {
GetPayCode, MpEnumSaleOrderStatus,
MpSaleOrderCancel,
@ -24,6 +25,7 @@ import InfiniteScroll from '@/components/infiniteScroll'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
import { PAY_H5_CODE_URL } from '@/common/constant'
import { goLink } from '@/common/common'
interface filterObj {
purchaser_id?: string | number
@ -591,14 +593,22 @@ const Order = () => {
// }
}
const handleAfterSale = () => {
goLink('/pages/refundPage/index')
}
return (
<View>
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
<View className={classnames('flex-col', styles.orderContainer)}>
<NavBar hasLeft leftSlot={
<View className={styles.afterSaleIcon} onClick={handleAfterSale}>
<IconFont name="icon-shouhou" size={50} color="007aff"></IconFont>
<View className={styles.iconName}>售后</View>
</View>
} title="订单"
/>
<View className={styles.searchBar}>
<Search handScan={() => handScan()} defaultValue={searchField.order_no} showScan placeholder="搜索商品/名称/颜色/订单号" showBtn={false} changeOnSearch={getSearchData}>
<View className={styles.flexBox} onClick={() => showSelctPopup()}>
<IconFont name="icon-shaixuan" size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles.activeshaixuan} />
{/* <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View> */}
<View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
</View>
</Search>