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

🌈 style(ID1000944): 【蜘蛛管家】-退款/售后- UI还原

Browse Source 
【【蜘蛛管家】-退款/售后- UI还原】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000944
This commit is contained in:
xuan 2022-12-12 15:37:47 +08:00
parent a8f6eb6045
commit 53467bc5be
3 changed files with 53 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/index/index.module.scss
View File

@ -1,39 +1,39 @@
.main { .main {
background-color: $color_bg_one; background-color: $color_bg_one;
// height: 100vh; // height: 100vh;
display: flex;
flex-direction: column;
.search {
width: 100%;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
padding: 20px;
box-sizing: border-box;
align-items: center;
background-color: #fff;
.search { .search_collect {
width: 100%; font-size: 26px;
display: flex; border: 2px solid #007aff;
justify-content: space-between; color: #007aff;
padding: 20px; border-radius: 50px;
box-sizing: border-box; width: 132px;
align-items: center; height: 44px;
text-align: center;
.search_collect { line-height: 44px;
font-size: 26px;
border: 2px solid #007AFF;
color: #007AFF;
border-radius: 50px;
width: 132px;
height: 44px;
text-align: center;
line-height: 44px;
}
.search_input {
flex: 1;
margin-left: 20px;
}
} }
.products { .search_input {
padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom)); flex: 1;
height: calc(100vh - $customTabBarHeight - env(safe-area-inset-bottom) - 100px); margin-left: 20px;
} }
}
.products {
padding-bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
height: calc(100vh - $customTabBarHeight - env(safe-area-inset-bottom) - 100px);
}
} }
//246 //246

55
src/pages/refundPage/index.module.scss
View File

@ -30,7 +30,7 @@ page {
margin-right: 32px; margin-right: 32px;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #000000; color: #000;
} }
.activeshai { .activeshai {
@ -50,7 +50,7 @@ page {
} }
.scrllStyle { .scrllStyle {
height: 500px; flex: 1 1 auto;
} }
.safeBox { .safeBox {
@ -58,7 +58,9 @@ page {
} }
.popupBox { .popupBox {
padding-bottom: env(safe-area-inset-bottom); display: flex;
flex-flow: column nowrap;
height: 75vh;
width: 100%; width: 100%;
.thirdBox { .thirdBox {
@ -72,8 +74,10 @@ page {
} }
.timeBox2 { .timeBox2 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 24px; margin-top: 24px;
background-color: #f6f6f6;
height: 68px; height: 68px;
background: #e9e9e9; background: #e9e9e9;
border-radius: 8px; border-radius: 8px;
@ -82,15 +86,7 @@ page {
line-height: 68px; line-height: 68px;
position: relative; position: relative;
font-size: 28px; font-size: 28px;
font-weight: 400; color: #848484;
color: #000000;
.more {
position: absolute;
right: 30px;
top: 5px;
font-size: 40px;
}
} }
.flexModebox { .flexModebox {
@ -98,39 +94,19 @@ page {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.activemodeBox {
margin-bottom: 16px;
margin-right: 16px;
// width: 152px;
// height: 68px;
padding: 17px 34px 17px 34px;
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 { .modeBox {
margin-bottom: 16px; margin-bottom: 16px;
margin-right: 16px; margin-right: 16px;
min-width: 152px;
padding: 17px 34px 17px 34px; padding: 17px 34px 17px 34px;
// width: 152px; color: #848484;
// height: 68px;
background: #f6f6f6; background: #f6f6f6;
border-radius: 8px; border-radius: 8px;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #000000;
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
text-align: center; text-align: center;
// line-height: 68px;
box-sizing: border-box; box-sizing: border-box;
// opacity: 0.4;
} }
} }
} }
@ -140,9 +116,6 @@ page {
// width: 750px; // width: 750px;
height: 160px; height: 160px;
background: #ffffff; background: #ffffff;
position: fixed;
bottom: 0;
z-index: 99;
display: flex; display: flex;
padding-top: 16px; padding-top: 16px;
align-items: center; align-items: center;
@ -194,3 +167,9 @@ page {
// width: 100%; // width: 100%;
// } // }
} }
.activemodeBox {
background: rgba(51, 127, 255, 0.1) !important;
color: #337fff !important;
font-weight: 550 !important;
border: 1px solid #337fff !important;
}

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

@ -269,6 +269,7 @@ const RefundPage = () => {
setStart(myDate.toLocaleDateString()) setStart(myDate.toLocaleDateString())
getOrderList() getOrderList()
setEnd('') setEnd('')
closePopup()
} }
const handSure = () => { const handSure = () => {
pageNum.current.page = 1 pageNum.current.page = 1
@ -307,7 +308,6 @@ const RefundPage = () => {
<Search placeholder="搜索商品/名称/颜色/订单号" showBtn={false} changeOnSearch={getSearchData} > <Search placeholder="搜索商品/名称/颜色/订单号" showBtn={false} changeOnSearch={getSearchData} >
<View className={styles.flexBox} onClick={() => showSelctPopup()}> <View className={styles.flexBox} onClick={() => showSelctPopup()}>
<IconFont name="icon-shaixuan" size={35} color={!isDisabled ? '#0D7CFF' : ''} customClassName={styles.activeshaixuan} /> <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 className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
</View> </View>
</Search> </Search>
@ -334,7 +334,7 @@ const RefundPage = () => {
})} })}
</InfiniteScroll> </InfiniteScroll>
</View> </View>
<Popup title="筛选订单" show={showPopup} onClose={() => closePopup()}> <Popup title="筛选订单" show={showPopup} onClose={closePopup}>
<View className={styles.popupBox}> <View className={styles.popupBox}>
<ScrollView className={styles.scrllStyle} scrollY> <ScrollView className={styles.scrllStyle} scrollY>
<View className={styles.thirdBox}> <View className={styles.thirdBox}>
@ -343,7 +343,7 @@ const RefundPage = () => {
{ {
stageList.map((item, index) => { stageList.map((item, index) => {
return ( return (
<View onClick={() => { handCheckStange(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View> <View onClick={() => { handCheckStange(item) }} className={classnames(styles.modeBox, item.checked && styles.activemodeBox)} key={index}>{item.name}</View>
) )
}) })
} }
@ -355,7 +355,7 @@ const RefundPage = () => {
{ {
modeList.map((item, index) => { modeList.map((item, index) => {
return ( return (
<View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View> <View onClick={() => { handCheckMode(item) }} className={classnames(styles.modeBox, item.checked && styles.activemodeBox)} key={index}>{item.name}</View>
) )
}) })
} }
@ -367,7 +367,7 @@ const RefundPage = () => {
{ {
typeList.map((item, index) => { typeList.map((item, index) => {
return ( return (
<View onClick={() => { handType(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View> <View onClick={() => { handType(item) }} className={classnames(styles.modeBox, item.checked && styles.activemodeBox)} key={index}>{item.name}</View>
) )
}) })
} }
@ -375,23 +375,19 @@ const RefundPage = () => {
</View> </View>
<View className={styles.thirdBox}> <View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>售后时间</View> <View className={styles.thirdTopfont}>售后时间</View>
<View className={styles.timeBox2} onClick={() => { setShowTime(true) }}>{timeArea} <View className={classnames(styles.timeBox2, timeArea !== '自定义起始时间' && styles.activemodeBox)} onClick={() => { setShowTime(true) }}>{timeArea}
<View className={styles.more}> <View className={styles.more}>
{ {
timeArea == '自定义起始时间' timeArea == '自定义起始时间' && <IconFont name="icon-chakanquanbukehu" color="#848484" size={40} customClassName={styles.more}></IconFont>
&& <IconFont name="icon-chakanquanbukehu" color="#000000" size={40} customClassName={styles.more}></IconFont>
} }
</View> </View>
</View> </View>
</View> </View>
<View className={styles.safeBox}></View>
</ScrollView> </ScrollView>
<View className={styles.bottomBox}> <View className={styles.bottomBox}>
<Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button > <Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
<Button className={classnames(isDisabled ? styles.button2 : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认</Button > <Button className={classnames(isDisabled ? styles.button2 : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认</Button >
</View> </View>
{/* <View className={styles.areaBox}></View> */}
</View> </View>
</Popup> </Popup>
<TimePickerPopup <TimePickerPopup