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

🐞 fix(ID1001418): 【面料优选A+】首页迭代UI查验

Browse Source 
【【面料优选A+】首页迭代UI查验】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001418
This commit is contained in:
xuan 2023-03-02 15:34:56 +08:00
parent 5c0564e4a9
commit a1c42c16aa
9 changed files with 83 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/filter/index.module.scss
View File

@ -14,7 +14,7 @@
} }
.popup_filter { .popup_filter {
flex: 1 1 auto; flex: 1 1 auto;
overflow: scroll; overflow-y: scroll;
} }
.popup_filter_item { .popup_filter_item {
margin-bottom: 20px; margin-bottom: 20px;
@ -36,7 +36,7 @@
border-radius: 34px; border-radius: 34px;
line-height: 69.2px; line-height: 69.2px;
text-align: center; text-align: center;
font-size: $font_size_medium; font-size: 28px;
color: $color_font_one; color: $color_font_one;
border: 2px solid transparent; border: 2px solid transparent;
box-sizing: border-box; box-sizing: border-box;
@ -86,14 +86,6 @@
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
padding: 32px 0; padding: 32px 0;
// .btns_two {
// display: flex;
// height: 82px;
// border: 2px solid #cde5ff;
// box-sizing: border-box;
// font-size: $font_size_big;
// border-radius: 40px;
// margin-bottom: 20px;
.rest_btn { .rest_btn {
width: 48%; width: 48%;
} }

4
src/components/filter/index.tsx
View File

@ -127,7 +127,7 @@ const Filter = (props: params) => {
} }
> >
<View className={styles.popup_main}> <View className={styles.popup_main}>
<View className={styles.popup_filter}> <ScrollView scrollY style={{ height: '60vh' }}>
{ {
kindList?.map((item, key) => { kindList?.map((item, key) => {
return <View key={key} className={styles.popup_filter_item}> return <View key={key} className={styles.popup_filter_item}>
@ -196,7 +196,7 @@ const Filter = (props: params) => {
</View> </View>
</View> </View>
</View> </View>
</View> </ScrollView>
<View className={styles.btns_con}> <View className={styles.btns_con}>
<NormalButton customClassName={styles.rest_btn} type="primary" plain round onClick={() => onRestEven()}>重置</NormalButton> <NormalButton customClassName={styles.rest_btn} type="primary" plain round onClick={() => onRestEven()}>重置</NormalButton>
<NormalButton customClassName={styles.verify_btn} type="primary" round onClick={() => onVerify()}>确认</NormalButton> <NormalButton customClassName={styles.verify_btn} type="primary" round onClick={() => onVerify()}>确认</NormalButton>

22
src/components/product/index.module.scss
View File

@ -53,10 +53,10 @@
.title { .title {
font-size: $font_size; font-size: $font_size;
color: #707070; color: #707070;
@include common_ellipsis(2); @include common_ellipsis;
text { text {
color: $color_font_one; color: $color_font_one;
font-weight: bold; font-weight: 500;
} }
} }
.tag_list { .tag_list {
@ -65,10 +65,13 @@
.tag, .tag,
.tag_g { .tag_g {
max-width: 260rpx; max-width: 260rpx;
height: 34px;
@include common_ellipsis();
padding: 3px 10px; padding: 3px 10px;
background-color: #cde5ff; background-color: #cde5ff;
font-size: $font_size_min; font-size: 24px;
border-radius: 5px; border-radius: 5px;
border: 0;
color: $color_main; color: $color_main;
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -88,7 +91,7 @@
color: #707070; color: #707070;
@include common_ellipsis; @include common_ellipsis;
} }
.bottom{ .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -102,7 +105,10 @@
background: #fcf4e9; background: #fcf4e9;
border-radius: 5px; border-radius: 5px;
font-size: 24px; font-size: 24px;
line-height: 34px;
height: 34px;
display: flex; display: flex;
border: 0;
text { text {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -115,18 +121,18 @@
color: #c57c26ff; color: #c57c26ff;
} }
} }
.price{ .price {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
color: $color_money; color: $color_money;
align-items: baseline; align-items: baseline;
margin-top: 8px; margin-top: 4px;
font-weight: 550; font-weight: 500;
&_unit { &_unit {
font-size: 18px; font-size: 18px;
} }
&_num { &_num {
font-size: $font_size_medium; font-size: 28px;
} }
} }
} }

9
src/components/product/index.tsx
View File

@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import LabAndImg from '../LabAndImg' import LabAndImg from '../LabAndImg'
import IconFont from '../iconfont/iconfont' import IconFont from '../iconfont/iconfont'
import Tag from '../tag'
import styles from './index.module.scss' import styles from './index.module.scss'
import { goLink } from '@/common/common' import { goLink } from '@/common/common'
import { formatHashTag, formatImgUrl } from '@/common/fotmat' import { formatHashTag, formatImgUrl } from '@/common/fotmat'
@ -35,8 +36,8 @@ const Product = ({ desStatus = true, productList = [] }: Params) => {
{item.name} {item.name}
</View> </View>
<View className={styles.tag_list}> <View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View> <Tag customClassName={styles.tag} type="primary" size="small" circle>{item.width}</Tag>
<View className={styles.tag_g}>{item.weight_density}</View> <Tag customClassName={styles.tag_g} type="primary" size="small" circle>{item.weight_density}</Tag>
</View> </View>
<View className={styles.des}> <View className={styles.des}>
染色；67.19%棉 28%涤纶 染色；67.19%棉 28%涤纶 染色；67.19%棉 28%涤纶 染色；67.19%棉 28%涤纶
@ -46,9 +47,7 @@ const Product = ({ desStatus = true, productList = [] }: Params) => {
<View> <View>
{ {
!!item.product_screw_id !!item.product_screw_id
&& <View className={styles.header_label}> && <Tag customClassName={styles.header_label} circle type="primary" size="small">配套螺纹</Tag>
<Text>配套螺纹</Text>
</View>
} }
</View> </View>
</View> </View>

11
src/pages/category/index.tsx
View File

@ -8,6 +8,9 @@ import { GetProductKindListApi, GetProductListApi } from '@/api/material'
import { dataLoadingStatus } from '@/common/util' import { dataLoadingStatus } from '@/common/util'
import Product from '@/components/product' import Product from '@/components/product'
import useLogin from '@/use/useLogin' import useLogin from '@/use/useLogin'
const PAGE_LIMIT = 10
// 分类 // 分类
const Category = () => { const Category = () => {
useLogin() useLogin()
@ -15,14 +18,14 @@ const Category = () => {
const product_kind_id_ref = useRef(0) const product_kind_id_ref = useRef(0)
const product_kind_id_next_ref = useRef(0) const product_kind_id_next_ref = useRef(0)
const [productData, setProductData] = useState<{ list: any; total: number }>({ list: [], total: 0 }) const [productData, setProductData] = useState<{ list: any; total: number }>({ list: [], total: 0 })
const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 }) const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: PAGE_LIMIT, page: 1 })
const pageNum = useRef({ size: filtrate.size, page: filtrate.page }) const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
const { fetchData: productFetchData, state: productState } = GetProductListApi() const { fetchData: productFetchData, state: productState } = GetProductListApi()
// 点击面料类型 // 点击面料类型
const getProductKindId = useCallback((e) => { const getProductKindId = useCallback((e) => {
pageNum.current.page = 1 pageNum.current.page = 1
setProductData({ list: [], total: 0 }) setProductData({ list: [], total: 0 })
setFiltrate(list => ({ ...list, size: 5, product_kind_id: e.id })) setFiltrate(list => ({ ...list, size: PAGE_LIMIT, product_kind_id: e.id }))
product_kind_id_ref.current = e.id product_kind_id_ref.current = e.id
}, []) }, [])
@ -39,7 +42,7 @@ const Category = () => {
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async() => { const getRefresherRefresh = async() => {
pageNum.current.page = 1 pageNum.current.page = 1
setFiltrate({ ...filtrate, size: 5 }) setFiltrate({ ...filtrate, size: PAGE_LIMIT })
setRefresherTriggeredStatus(true) setRefresherTriggeredStatus(true)
} }
@ -55,7 +58,7 @@ const Category = () => {
setProductData({ list: [], total: 0 }) setProductData({ list: [], total: 0 })
const kind_id = id == -1 ? product_kind_id_ref.current : id const kind_id = id == -1 ? product_kind_id_ref.current : id
product_kind_id_next_ref.current = id product_kind_id_next_ref.current = id
setFiltrate(list => ({ ...list, size: 5, product_kind_id: kind_id })) setFiltrate(list => ({ ...list, size: PAGE_LIMIT, product_kind_id: kind_id }))
}, []) }, [])
const { fetchData } = GetProductKindListApi() const { fetchData } = GetProductKindListApi()

29
src/pages/index/components/guessULikeList/index.module.scss
View File

@ -44,17 +44,25 @@
.item_con { .item_con {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between;
padding: 16px 20px; padding: 16px 20px;
font-size: $font_size; font-size: $font_size;
flex: 1; flex: 1;
.title { .title {
font-size: $font_size; display: flex;
color: #707070; flex-flow: row nowrap;
@include common_ellipsis(2); justify-content: space-between;
text { .title_text {
color: $color_font_one; font-size: $font_size;
font-weight: bold; color: $color_font_three;
@include common_ellipsis();
}
.title_text_code {
color: #333333;
margin-right: 10px;
}
.favorite {
width: 40px;
height: 40px;
} }
} }
.tag_list { .tag_list {
@ -65,7 +73,9 @@
max-width: 260rpx; max-width: 260rpx;
padding: 3px 10px; padding: 3px 10px;
background-color: #cde5ff; background-color: #cde5ff;
font-size: $font_size_min; height: 34px;
line-height: 34px;
font-size: 24px;
border-radius: 5px; border-radius: 5px;
border: 0; border: 0;
color: $color_main; color: $color_main;
@ -83,18 +93,15 @@
justify-content: space-between; justify-content: space-between;
} }
.des { .des {
width: 60%;
font-size: $font_size_medium; font-size: $font_size_medium;
color: #707070; color: #707070;
@include common_ellipsis; @include common_ellipsis;
} }
.price { .price {
display: flex; display: flex;
width: 40%;
justify-content: flex-end; justify-content: flex-end;
color: $color_money; color: $color_money;
align-items: baseline; align-items: baseline;
margin-top: 8px;
font-weight: 550; font-weight: 550;
&_unit { &_unit {
font-size: 18px; font-size: 18px;

21
src/pages/index/components/guessULikeList/index.tsx
View File

@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components'
import { useCallback } from 'react' import { useCallback } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg' import LabAndImg from '@/components/LabAndImg'
import { formatHashTag, formatPriceDiv } from '@/common/fotmat' import { formatHashTag, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat'
import { goLink } from '@/common/common' import { goLink } from '@/common/common'
import Tag from '@/components/tag' import Tag from '@/components/tag'
import IconFont from '@/components/iconfont/iconfont' import IconFont from '@/components/iconfont/iconfont'
@ -30,7 +30,14 @@ const GuessULikeList = (props: PropsType) => {
{item.is_favorite && <IconFont customClassName={styles.collection_icon} name="icon-shoucang1" size={40} />} {item.is_favorite && <IconFont customClassName={styles.collection_icon} name="icon-shoucang1" size={40} />}
</View> </View>
<View className={styles.item_con}> <View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View> <View className={styles.title}>
<View className={styles.title_text}>
<Text className={styles.title_text_code}>{formatRemoveHashTag(item.code)}</Text>{item.name}
</View>
<View className={styles.favorite}>
{item.is_favorite && <IconFont customClassName={styles.collection_icon} name="icon-shoucang1" size={40} />}
</View>
</View>
<View className={styles.tag_list}> <View className={styles.tag_list}>
<Tag customClassName={styles.tag} circle type="primary" size="small">{item.width}</Tag> <Tag customClassName={styles.tag} circle type="primary" size="small">{item.width}</Tag>
<Tag customClassName={styles.tag_g} circle type="primary" size="small">{item.weight_density}</Tag> <Tag customClassName={styles.tag_g} circle type="primary" size="small">{item.weight_density}</Tag>
@ -39,12 +46,10 @@ const GuessULikeList = (props: PropsType) => {
&& <Tag customClassName={styles.tag_g} circle type="primary" size="small">配套螺纹</Tag> && <Tag customClassName={styles.tag_g} circle type="primary" size="small">配套螺纹</Tag>
} }
</View> </View>
<View className={styles.bottom}> <View className={styles.des}>{item.component}</View>
<View className={styles.des}>{item.component}</View> <View className={styles.price}>
<View className={styles.price}> <Text className={styles.price_unit}>¥</Text>
<Text className={styles.price_unit}>¥</Text> <Text className={styles.price_num}>{formatPriceDiv(item.lowest_price).toLocaleString()}起</Text>
<Text className={styles.price_num}>{formatPriceDiv(item.lowest_price).toLocaleString()}起</Text>
</View>
</View> </View>
</View> </View>
</View> </View>

19
src/pages/searchList/searchList.module.scss
View File

@ -169,9 +169,18 @@ page {
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-between;
.title { .title {
font-size: $font_size; display: flex;
color: $color_font_three; flex-flow: row nowrap;
@include common_ellipsis(); justify-content: space-between;
.title_text {
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.favorite {
width: 40px;
height: 40px;
}
} }
.tag_list { .tag_list {
display: flex; display: flex;
@ -179,9 +188,11 @@ page {
.tag_g { .tag_g {
max-width: 260rpx; max-width: 260rpx;
@include common_ellipsis(); @include common_ellipsis();
height: 34px;
padding: 3px 10px; padding: 3px 10px;
background-color: #cde5ff; background-color: #cde5ff;
font-size: $font_size_min; font-size: 24px;
line-height: 34px;
border-radius: 5px; border-radius: 5px;
border: 0; border: 0;
color: $color_main; color: $color_main;

10
src/pages/searchList/searchList.tsx
View File

@ -214,10 +214,16 @@ export default () => {
<View className={styles.product_img}> <View className={styles.product_img}>
<LabAndImg value={labAndImgObj(item)} /> <LabAndImg value={labAndImgObj(item)} />
<View className={styles.color_num}>{item.product_color_count}色</View> <View className={styles.color_num}>{item.product_color_count}色</View>
{item.is_favorite && <IconFont customClassName={styles.collection_icon} name="icon-shoucang1" size={40} />}
</View> </View>
<View className={styles.product_info}> <View className={styles.product_info}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View> <View className={styles.title}>
<Text className={styles.title_text}>
{formatHashTag(item.code, item.name)}
</Text>
<View className={styles.favorite}>
{item.is_favorite && <IconFont customClassName={styles.collection_icon} name="icon-shoucang1" size={40} />}
</View>
</View>
<View className={styles.tag_list}> <View className={styles.tag_list}>
<Tag customClassName={styles.tag} type="primary" size="small" circle>{item.width}</Tag> <Tag customClassName={styles.tag} type="primary" size="small" circle>{item.width}</Tag>
<Tag customClassName={styles.tag} type="primary" size="small" circle>{item.weight_density}</Tag> <Tag customClassName={styles.tag} type="primary" size="small" circle>{item.weight_density}</Tag>