🌈 style:修改样式

This commit is contained in:
Haiyi 2022-11-01 17:25:53 +08:00
parent 159e0b9d56
commit 15dfae35fa
10 changed files with 237 additions and 82 deletions

View File

@ -1,4 +1,5 @@
.flexBox {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;

View File

@ -1,5 +1,5 @@
import { View } from "@tarojs/components"
import { memo, useEffect, useState, useMemo } from "react"
import { memo, useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from "react"
import style from "./index.module.scss"
interface prosObj {
obj?: {
@ -13,10 +13,13 @@ interface prosObj {
nextBuy?: (any) => void,
toPay?: (any) => void,
handSureGoods?: () => void,
showTuiGoods?: boolean
showTuiGoods?: boolean,
handApplyGoods?: () => void,
handApplyMoney?: () => void,
showDetail?: boolean
}
export default memo((props: prosObj) => {
export default memo(forwardRef((props: prosObj, ref) => {
const {
obj = {
sale_mode: 0,
@ -29,7 +32,10 @@ export default memo((props: prosObj) => {
cancle,
nextBuy,
toPay,
handSureGoods
handSureGoods,
handApplyGoods,
handApplyMoney,
showDetail = false
} = props
//判断显示取消订单
@ -97,8 +103,70 @@ export default memo((props: prosObj) => {
} else return false
}, [obj])
//判断显示申请退货
const showTuihuo = useMemo(() => {
if (
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 0) ||
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 1) ||
(obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 2) ||
(obj.sale_mode === 0 && obj.status == 9 && obj.settle_mode == 3) ||
(obj.sale_mode === 2 && obj.status == 9)
) {
return true
} else return false
}, [obj])
//判断显示申请退款
const showTuikuan = useMemo(() => {
if (
(obj.sale_mode === 0 && obj.status == 2 && obj.collect_status == 1) ||
(obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 0) ||
(obj.sale_mode === 0 && obj.status == 11 && (obj.collect_status == 1 || obj.collect_status == 2)) ||
(obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 0) ||
(obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 2) ||
(obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 1) ||
(obj.sale_mode === 1 && obj.status == 0) ||
(obj.sale_mode === 1 && obj.status == 9) ||
(obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 1) ||
(obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 2)
) {
return true
} else return false
}, [obj])
//多的不显示别的按钮
// const currentNums = useRef<any>({ nums: 0 })
const itemNums = useMemo(() => {
let nums = 0
if (showTake) {
nums = nums + 1
}
if (showCancel) {
nums = nums + 1
}
if (canBuy) {
nums = nums + 1
}
return nums
}, [obj])
useImperativeHandle(ref, () => ({
itemNums
}))
return (
<View className={style.flexBox}>
{
(showTuihuo && showDetail && itemNums === 0) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>退</View>
}
{
(showTuikuan && showDetail && itemNums === 0) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>退</View>
}
{
showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}></View>
}
@ -114,4 +182,4 @@ export default memo((props: prosObj) => {
</View>
)
})
}))

View File

@ -104,8 +104,10 @@
width: 64px;
height: 64px;
display: flex;
line-height: 64px;
align-items: center;
justify-content: center;
flex-direction: column;
color: #000;
font-size: 35px;
}

View File

@ -1,41 +1,75 @@
.sideBar_main {
display: flex;
height: 100%;
.sideBar_select {
width: 150px;
width: 176px;
height: 100%;
background-color: #eaeaea;
border-radius: 0 10px 10px 0;
background-color: #f7f7f7;
border-top-right-radius: 16px;
// border-radius: 0 10px 10px 0;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.sideBar_select_title {
position: relative;
height: 100px;
width: 100%;
width: 176px;
font-size: $font_size;
color: #727272;
display: flex;
flex-direction: column;
align-items: center;
flex-direction: column;
justify-content: center;
font-weight: 400;
text-align: center;
// border-top-right-radius: 16px;
// border-bottom-right-radius: 16px;
background-color: #ffffff;
.shu {
top: 55px;
left: 0px;
position: absolute;
width: 8px;
height: 40px;
background: #4581FF;
border-radius: 0px 4px 4px 0px;
margin-right: 20px;
}
.title_con {
width: 74px;
// width: 74px;
width: 112px;
// margin-left: 32px;
@include common_ellipsis($params: 4);
}
}
.sideBar_select_title_select {
background-color: #007AFF;
color: #fff;
border-radius: 0px 14px 14px 0px;
background-color: #f7f7f7;
color: #4581FF;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
// border-top-right-radius: 16px;
// border-radius: 0px 14px 14px 0px;
}
.indexBox {
background-color: red;
}
}
.sideBar_con {
flex: 1;
.sideBar_con_scroll {
width: 100%;
height: 100%;

View File

@ -1,5 +1,5 @@
import { ScrollView, View } from "@tarojs/components"
import React, { memo, ReactNode, useEffect, useRef, useState } from "react"
import React, { memo, ReactNode, useEffect, useMemo, useRef, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { useReady } from "@tarojs/taro";
@ -83,6 +83,15 @@ export default memo(({list = [],
})
})
const [currentIndex, setcurrentIndex] = useState(0)
useMemo(() => {
Taro.nextTick(() => {
let index = 0
index = list.findIndex(item => { return item.id == selected })
setcurrentIndex(currentIndex)
})
}, [selected])
return (
<>
<View className={classnames(styles.sideBar_main, 'side_bar_select')}>
@ -97,6 +106,9 @@ export default memo(({list = [],
key={item.id}
style={{ height: heightItem + 'rpx' }}
>
{
selected == item.id && <View className={styles.shu}></View>
}
<View className={styles.title_con}>
{item.name}
</View>

View File

@ -320,7 +320,10 @@ page {
position: fixed;
bottom: 0;
padding-bottom: 24px;
// position: relative;
.moreFontBox {
width: 200px;
.moreFont {
font-size: 28px;
@ -328,6 +331,9 @@ page {
color: rgba(0, 0, 0, 0.8);
margin-left: 48px;
}
}
.posssBox {
position: absolute;

View File

@ -596,6 +596,21 @@ export default () => {
}
}, [infoObj])
const BottomBtnsRef = useRef<any>()
const [showOther, setshowOther] = useState(false)
const testOther = useMemo(() => {
Taro.nextTick(() => {
if (BottomBtnsRef.current?.itemNums >= 2) {
setshowOther(true)
return true
} else {
setshowOther(false)
return false
}
})
}, [infoObj])
return (
<View className={styles.mainBox}>
{(infoObj?.status != 10 && <OrderState orderInfo={infoObj} />)}
@ -680,10 +695,13 @@ export default () => {
<View className={styles.safeBottom}></View>
<View className={styles.bottomBox}>
{
!showMore && <View className={styles.moreFont} onClick={() => setShowMore(true)}></View>
showOther &&
<>
{
!showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(true)}></View></View>
}
{
showMore && <View className={styles.moreFont} onClick={() => setShowMore(false)}></View>
showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(false)}></View></View>
}
{
showMore && <View className={styles.posssBox}>
@ -694,13 +712,21 @@ export default () => {
></BottomApply>
</View>
}
</>
}
<BottomBtns
ref={BottomBtnsRef}
showDetail
obj={infoObj}
showTuiGoods
cancle={(e) => cancle?.(e, infoObj)}
nextBuy={(e) => nextBuy?.(e, infoObj)}
toPay={(e) => toPay?.(e, infoObj)}
handSureGoods={() => handSureGoods?.()}
handApplyGoods={() => handApplyGood?.()}
handApplyMoney={() => handApplyMoney?.()}
></BottomBtns>
</View>
<PayPopup

View File

@ -6,7 +6,7 @@
flex-direction: column;
.pic {
width: 322px;
width: 522px;
height: 322px;
background: #fff;
// opacity: 0.3;

View File

@ -5,6 +5,10 @@ page {
.main {
background: #ffff;
.topBox {
padding-left: 24px;
}
.cancelFont {
width: 76px;
font-size: 28px;

View File

@ -350,9 +350,11 @@ export default memo(() => {
}
return (
<View className={styles.main}>
<View className={styles.topBox}>
<Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
<View className={styles.cancelFont} onClick={() => back()}></View>
</Search>
</View>
<View className={styles.line}></View>
{
!hasFonts && <>