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

🌈 style:修改样式

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/BottomBtns/index.module.scss
View File

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

78
src/components/BottomBtns/index.tsx
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>
)
})
}))

2
src/components/goodsItem/index.module.scss
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;
}

80
src/components/sideBar/index.module.scss
View File

@ -1,45 +1,79 @@
.sideBar_main{
.sideBar_main {
display: flex;
height: 100%;
.sideBar_select{
width: 150px;
.sideBar_select {
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;
display: none;
width: 0;
height: 0;
color: transparent;
}
.sideBar_select_title{
.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;
.title_con{
width: 74px;
@include common_ellipsis($params:4);
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: 112px;
// margin-left: 32px;
@include common_ellipsis($params: 4);
}
}
.sideBar_select_title_select{
background-color: #007AFF;
color: #fff;
border-radius: 0px 14px 14px 0px;
.sideBar_select_title_select {
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{
.sideBar_con {
flex: 1;
.sideBar_con_scroll{
.sideBar_con_scroll {
width: 100%;
height: 100%;
}
}
}

70
src/components/sideBar/index.tsx
View File

@ -1,39 +1,39 @@
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";
import InfiniteScroll, {StatusParam} from "../infiniteScroll";
import InfiniteScroll, { StatusParam } from "../infiniteScroll";
import LoadingCard from "../loadingCard";
type Params = {
list?: any[],
defaultValue?: number|string,
defaultValue?: number | string,
children?: ReactNode,
height?: string,
heightItem?: number,
sideBarOnClick?: (val:any) => void,
refresherTriggered?: true|false,
sideBarOnClick?: (val: any) => void,
refresherTriggered?: true | false,
selfOnRefresherRefresh?: () => void
selfOnScrolltolower?: () => void,
hasMore?: true|false,
hasMore?: true | false,
statusMore?: StatusParam
}
export default memo(({list = [],
defaultValue = 0,
height='100vh',
sideBarOnClick,
children,
heightItem = 100,
export default memo(({ list = [],
defaultValue = 0,
height = '100vh',
sideBarOnClick,
children,
heightItem = 100,
refresherTriggered = false,
selfOnRefresherRefresh,
selfOnScrolltolower,
hasMore = true,
statusMore = 0
}: Params) => {
let num_half = useRef(0)
const [selected, setSelected] = useState(defaultValue)
@ -47,56 +47,68 @@ export default memo(({list = [],
const index = list?.findIndex(item => {
return item.id == defaultValue
})
if(index !== -1) {
if (index !== -1) {
computeSelectTab(index)
}
}
const clickEvent = ({item, index}: {item, index:number}) => {
const clickEvent = ({ item, index }: { item, index: number }) => {
setSelected(item.id)
sideBarOnClick?.(item)
computeSelectTab(index)
}
const computeSelectTab = (index) => {
if((index + 1) > num_half.current) {
if ((index + 1) > num_half.current) {
let num = index + 1 - num_half.current
setTabId(list[num].id.toString())
} else {
setTabId(list[0].id.toString())
}
}
useReady(() => {
Taro.nextTick(() => {
let query = Taro.createSelectorQuery();
query.select('.side_bar_select').boundingClientRect(rect=>{
console.log('rect::',rect)
query.select('.side_bar_select').boundingClientRect(rect => {
console.log('rect::', rect)
let clientHeight = rect.height;
let clientWidth = rect.width;
let ratio = 750 / clientWidth;
let height = clientHeight * ratio;
num_half.current = Math.ceil(height/2/heightItem)
num_half.current = Math.ceil(height / 2 / heightItem)
init()
}).exec();
})
})
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')}>
<ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
<View className={classnames(styles.sideBar_main, 'side_bar_select')}>
<ScrollView scrollWithAnimation={true} style={{ height }} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
{
list?.map((item, index) => {
return(
<View
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.id)})}
onClick={() => clickEvent({item, index})}
return (
<View
className={classnames(styles.sideBar_select_title, { [styles.sideBar_select_title_select]: (selected == item.id) })}
onClick={() => clickEvent({ item, index })}
id={`tab_${item.id}`}
key={item.id}
style={{height:heightItem+'rpx'}}
style={{ height: heightItem + 'rpx' }}
>
{
selected == item.id && <View className={styles.shu}></View>
}
<View className={styles.title_con}>
{item.name}
</View>
@ -111,7 +123,7 @@ export default memo(({list = [],
</InfiniteScroll>
</View>
</View>
</>
)
})

18
src/pages/orderDetails/index.module.scss
View File

@ -320,15 +320,21 @@ page {
position: fixed;
bottom: 0;
padding-bottom: 24px;
// position: relative;
.moreFont {
font-size: 28px;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
margin-left: 48px;
// position: relative;
.moreFontBox {
width: 200px;
.moreFont {
font-size: 28px;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
margin-left: 48px;
}
}
.posssBox {
position: absolute;
left: 32px;

54
src/pages/orderDetails/index.tsx
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,27 +695,38 @@ export default () => {
<View className={styles.safeBottom}></View>
<View className={styles.bottomBox}>
{
!showMore && <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View>
}
{
showMore && <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View>
}
{
showMore && <View className={styles.posssBox}>
<BottomApply
obj={infoObj}
handApplyGoods={() => handApplyGood?.()}
handApplyMoney={() => handApplyMoney?.()}
></BottomApply>
</View>
showOther &&
<>
{
!showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View></View>
}
{
showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View></View>
}
{
showMore && <View className={styles.posssBox}>
<BottomApply
obj={infoObj}
handApplyGoods={() => handApplyGood?.()}
handApplyMoney={() => handApplyMoney?.()}
></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
@ -715,7 +741,7 @@ export default () => {
picUrl={picUrl}
></PayPopup>
<OfflinePay showKong={false} show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={infoObj}></OfflinePay>
</View>
</View >
)
}

4
src/pages/searchPage/components/empty/index.module.scss
View File

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

4
src/pages/searchPage/index.module.scss
View File

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

8
src/pages/searchPage/index.tsx
View File

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