🐞 fix(修复ui):

This commit is contained in:
czm 2023-03-02 14:36:38 +08:00
parent f659bfb591
commit 990b8a4f1d
15 changed files with 45 additions and 14 deletions

View File

@ -32,9 +32,9 @@
border-radius: 10px; border-radius: 10px;
input { input {
font-size: $font_size_medium; font-size: $font_size_medium;
// text-align: right; text-align: center;
width: 100%; width: 100%;
padding-right: 10px; // padding-right: 10px;
} }
} }

View File

@ -2,7 +2,7 @@
display: flex; display: flex;
background-color: #fff; background-color: #fff;
font-size: 32px; font-size: 32px;
font-weight: 500; color: #000000cc;
.select_list_item { .select_list_item {
height: 96px; height: 96px;
text-align: center; text-align: center;
@ -18,6 +18,7 @@
.select_list_ed { .select_list_ed {
text { text {
border-bottom: 6px solid #337fff; border-bottom: 6px solid #337fff;
font-weight: 500;
} }
color: #4581ff; color: #4581ff;
} }

View File

@ -82,6 +82,7 @@
font-size: 28px; font-size: 28px;
text-align: right; text-align: right;
margin-top: 16px; margin-top: 16px;
font-weight: 700;
} }
.btns { .btns {
padding-top: 32px; padding-top: 32px;
@ -95,6 +96,7 @@
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
text-align: center; text-align: center;
line-height: 72px; line-height: 72px;
font-size: 28px;
} }
} }
} }

View File

@ -83,6 +83,7 @@
font-size: 28px; font-size: 28px;
text-align: right; text-align: right;
margin-top: 16px; margin-top: 16px;
font-weight: 700;
} }
.btns { .btns {
padding-top: 32px; padding-top: 32px;
@ -96,6 +97,7 @@
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
text-align: center; text-align: center;
line-height: 72px; line-height: 72px;
font-size: 28px;
} }
} }
} }

View File

@ -12,6 +12,9 @@
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text { text {
&:nth-child(1) {
font-weight: 700;
}
&:nth-child(2) { &:nth-child(2) {
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }
@ -25,5 +28,8 @@
height: 82px; height: 82px;
line-height: 82px; line-height: 82px;
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
.seleced {
color: rgba(0, 0, 0, 0.8);
}
} }
} }

View File

@ -1,5 +1,6 @@
import { Text, View } from '@tarojs/components' import { Text, View } from '@tarojs/components'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import Remark from '@/components/remark' import Remark from '@/components/remark'
import IconFont from '@/components/iconfont/iconfont' import IconFont from '@/components/iconfont/iconfont'
@ -26,7 +27,7 @@ export default (props: Param) => {
<View className={styles.more}>/ <IconFont color="#000000FF" name="icon-rukou" size={30} /></View> <View className={styles.more}>/ <IconFont color="#000000FF" name="icon-rukou" size={30} /></View>
</View> </View>
<View className={styles.remarks_message}> <View className={styles.remarks_message}>
<Text>{data || '尚未备注信息'}</Text> <Text className={classNames(data ? styles.seleced : '')}>{data || '尚未备注信息'}</Text>
</View> </View>
</View> </View>
<Remark show={showRemark} onSave={getOnSave} onClose={() => setShowRemark(false)} /> <Remark show={showRemark} onSave={getOnSave} onClose={() => setShowRemark(false)} />

View File

@ -10,6 +10,7 @@
font-size: 28px; font-size: 28px;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 700;
} }
.order_info_list { .order_info_list {
font-size: 28px; font-size: 28px;

View File

@ -11,6 +11,9 @@
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text { text {
&:nth-child(1) {
font-weight: 700;
}
&:nth-child(2) { &:nth-child(2) {
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }

View File

@ -1,6 +1,7 @@
import { Text, View } from '@tarojs/components' import { Text, View } from '@tarojs/components'
import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro' import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
import { memo, useCallback, useEffect, useState } from 'react' import { memo, useCallback, useEffect, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import Counter from '@/components/counter' import Counter from '@/components/counter'
import LabAndImg from '@/components/LabAndImg' import LabAndImg from '@/components/LabAndImg'
@ -36,14 +37,15 @@ export interface Param {
value: ColorItem value: ColorItem
onChangeNum?: (val: { id: number; count: number }) => void onChangeNum?: (val: { id: number; count: number }) => void
onDelData?: (val: number) => void onDelData?: (val: number) => void
bottomStatus?: boolean
} }
export default memo((props: Param) => { export default memo((props: Param) => {
return <ProductItem onChangeNum={props.onChangeNum} onDelData={props.onDelData} value={props.value} /> return <ProductItem onChangeNum={props.onChangeNum} onDelData={props.onDelData} value={props.value} bottomStatus={props.bottomStatus} />
}) })
const ProductItem = memo((props: Param) => { const ProductItem = memo((props: Param) => {
const { value } = props const { value, bottomStatus = true } = props
const labAndImgObj = useCallback( const labAndImgObj = useCallback(
(item) => { (item) => {
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url } return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
@ -72,7 +74,7 @@ const ProductItem = memo((props: Param) => {
return <> return <>
<View key={value.id} className={styles.card_item}> <View key={value.id} className={styles.card_item}>
<View className={styles.img}><LabAndImg value={labAndImgObj(props.value)} /></View> <View className={styles.img}><LabAndImg value={labAndImgObj(props.value)} /></View>
<View className={styles.name_count}> <View className={classNames(styles.name_count, bottomStatus && styles.bottom_styles)}>
<Text>{formatHashTag(value.code, value.name)}</Text> <Text>{formatHashTag(value.code, value.name)}</Text>
<View className={styles.btns}> <View className={styles.btns}>
<View className={styles.count_btn}> <View className={styles.count_btn}>
@ -82,7 +84,7 @@ const ProductItem = memo((props: Param) => {
defaultNum={value.count} defaultNum={value.count}
onClickBtn={onChangeNum} onClickBtn={onChangeNum}
onBlue={onChangeNum} onBlue={onChangeNum}
unit="" unit=""
onMin={onMin} onMin={onMin}
onMax={onMax} onMax={onMax}
/> />

View File

@ -12,6 +12,9 @@
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text { text {
&:nth-child(1) {
font-weight: 700;
}
&:nth-child(2) { &:nth-child(2) {
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }

View File

@ -5,6 +5,11 @@
.backIcon { .backIcon {
transform: rotate(180deg); transform: rotate(180deg);
} }
.address_info {
padding: 20px 20px 0 20px;
}
.remark {
}
.add_card_btn { .add_card_btn {
margin: 24px; margin: 24px;
height: 82px; height: 82px;

View File

@ -223,18 +223,18 @@ export default () => {
</View> </View>
} title="领取剪样" } title="领取剪样"
></NavBar> ></NavBar>
<Address onSelect={getAddress} defaultValue={addressInfo} /> <View className={styles.address_info}><Address onSelect={getAddress} defaultValue={addressInfo} /></View>
<View className={styles.add_card_btn} onClick={onAddCard}></View> <View className={styles.add_card_btn} onClick={onAddCard}></View>
{list?.map(item => <View key={item.id} className={styles.card_con}> {list?.map((item, index) => <View key={item.id} className={styles.card_con}>
<View className={styles.card_header}>{formatHashTag(item.code, item.name)}</View> <View className={styles.card_header}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.card_list}> <View className={styles.card_list}>
{item.colors?.map(citem => {item.colors?.map(citem =>
<ProductCard key={citem.id} value={citem} onDelData={onDelData(item)} onChangeNum={onChangeNum} />, <ProductCard key={citem.id} value={citem} onDelData={onDelData(item)} onChangeNum={onChangeNum} />,
)} )}
<View className={styles.express_btn}></View> {(list?.length - 1 === index) && <View className={styles.express_btn}></View>}
</View> </View>
</View>)} </View>)}
<Remark onSave={onRemark} defaultValue={remarkData} /> <View className={styles.remark}><Remark onSave={onRemark} defaultValue={remarkData} /></View>
<View className={styles.order_btn}> <View className={styles.order_btn}>
<View className={styles.btn_con} onClick={onSubmitData}> <View className={styles.btn_con} onClick={onSubmitData}>
<Text>{numText}</Text> <Text>{numText}</Text>

View File

@ -10,6 +10,7 @@
font-size: 28px; font-size: 28px;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 700;
} }
.order_info_list { .order_info_list {
font-size: 28px; font-size: 28px;
@ -31,6 +32,7 @@
line-height: 32px; line-height: 32px;
color: #337fffff; color: #337fffff;
margin-left: 10px; margin-left: 10px;
font-size: 24px;
} }
} }
} }

View File

@ -38,7 +38,7 @@ export default (props: Param) => {
[value], [value],
) )
return <> return <>
{value?.map((pitem) => { {value?.map((pitem, pindex) => {
return <View key={pitem.product_id} className={styles.card_con}> return <View key={pitem.product_id} className={styles.card_con}>
<View className={styles.card_header}>{formatHashTag(pitem.code, pitem.name)}</View> <View className={styles.card_header}>{formatHashTag(pitem.code, pitem.name)}</View>
<View className={styles.card_list}> <View className={styles.card_list}>
@ -54,7 +54,7 @@ export default (props: Param) => {
</View> </View>
</View> </View>
})} })}
<View className={styles.express_btn}></View> {(value.length - 1 === pindex) && <View className={styles.express_btn}></View>}
</> </>
</View> </View>
</View> </View>

View File

@ -11,6 +11,9 @@
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text { text {
&:nth-child(1) {
font-weight: 700;
}
&:nth-child(2) { &:nth-child(2) {
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }