From a1c42c16aa8dc0231c997dbfed33ca140d9a4d4d Mon Sep 17 00:00:00 2001 From: xuan Date: Thu, 2 Mar 2023 15:34:56 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix(ID1001418):=20=E3=80=90?= =?UTF-8?q?=E9=9D=A2=E6=96=99=E4=BC=98=E9=80=89A+=E3=80=91=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E8=BF=AD=E4=BB=A3UI=E6=9F=A5=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【【面料优选A+】首页迭代UI查验】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001418 --- src/components/filter/index.module.scss | 12 ++------ src/components/filter/index.tsx | 4 +-- src/components/product/index.module.scss | 22 +++++++++----- src/components/product/index.tsx | 9 +++--- src/pages/category/index.tsx | 11 ++++--- .../guessULikeList/index.module.scss | 29 ++++++++++++------- .../index/components/guessULikeList/index.tsx | 21 +++++++++----- src/pages/searchList/searchList.module.scss | 19 +++++++++--- src/pages/searchList/searchList.tsx | 10 +++++-- 9 files changed, 83 insertions(+), 54 deletions(-) diff --git a/src/components/filter/index.module.scss b/src/components/filter/index.module.scss index 8ed68f8..ea5f60f 100644 --- a/src/components/filter/index.module.scss +++ b/src/components/filter/index.module.scss @@ -14,7 +14,7 @@ } .popup_filter { flex: 1 1 auto; - overflow: scroll; + overflow-y: scroll; } .popup_filter_item { margin-bottom: 20px; @@ -36,7 +36,7 @@ border-radius: 34px; line-height: 69.2px; text-align: center; - font-size: $font_size_medium; + font-size: 28px; color: $color_font_one; border: 2px solid transparent; box-sizing: border-box; @@ -86,14 +86,6 @@ flex-flow: row nowrap; justify-content: space-between; 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 { width: 48%; } diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx index 7966d98..4403252 100644 --- a/src/components/filter/index.tsx +++ b/src/components/filter/index.tsx @@ -127,7 +127,7 @@ const Filter = (props: params) => { } > - + { kindList?.map((item, key) => { return @@ -196,7 +196,7 @@ const Filter = (props: params) => { - + onRestEven()}>重置 onVerify()}>确认 diff --git a/src/components/product/index.module.scss b/src/components/product/index.module.scss index c4ba858..a68a105 100644 --- a/src/components/product/index.module.scss +++ b/src/components/product/index.module.scss @@ -53,10 +53,10 @@ .title { font-size: $font_size; color: #707070; - @include common_ellipsis(2); + @include common_ellipsis; text { color: $color_font_one; - font-weight: bold; + font-weight: 500; } } .tag_list { @@ -65,10 +65,13 @@ .tag, .tag_g { max-width: 260rpx; + height: 34px; + @include common_ellipsis(); padding: 3px 10px; background-color: #cde5ff; - font-size: $font_size_min; + font-size: 24px; border-radius: 5px; + border: 0; color: $color_main; margin-right: 10px; margin-bottom: 10px; @@ -88,7 +91,7 @@ color: #707070; @include common_ellipsis; } - .bottom{ + .bottom { display: flex; justify-content: space-between; align-items: center; @@ -102,7 +105,10 @@ background: #fcf4e9; border-radius: 5px; font-size: 24px; + line-height: 34px; + height: 34px; display: flex; + border: 0; text { display: inline-block; height: 100%; @@ -115,18 +121,18 @@ color: #c57c26ff; } } - .price{ + .price { display: flex; justify-content: flex-end; color: $color_money; align-items: baseline; - margin-top: 8px; - font-weight: 550; + margin-top: 4px; + font-weight: 500; &_unit { font-size: 18px; } &_num { - font-size: $font_size_medium; + font-size: 28px; } } } diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index b5121f4..53ed226 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react' import classNames from 'classnames' import LabAndImg from '../LabAndImg' import IconFont from '../iconfont/iconfont' +import Tag from '../tag' import styles from './index.module.scss' import { goLink } from '@/common/common' import { formatHashTag, formatImgUrl } from '@/common/fotmat' @@ -35,8 +36,8 @@ const Product = ({ desStatus = true, productList = [] }: Params) => { {item.name} - {item.width} - {item.weight_density} + {item.width} + {item.weight_density} 染色；67.19%棉 28%涤纶 染色；67.19%棉 28%涤纶 @@ -46,9 +47,7 @@ const Product = ({ desStatus = true, productList = [] }: Params) => { { !!item.product_screw_id - && - 配套螺纹 - + && 配套螺纹 } diff --git a/src/pages/category/index.tsx b/src/pages/category/index.tsx index 7b40349..1d6db02 100644 --- a/src/pages/category/index.tsx +++ b/src/pages/category/index.tsx @@ -8,6 +8,9 @@ import { GetProductKindListApi, GetProductListApi } from '@/api/material' import { dataLoadingStatus } from '@/common/util' import Product from '@/components/product' import useLogin from '@/use/useLogin' + +const PAGE_LIMIT = 10 + // 分类 const Category = () => { useLogin() @@ -15,14 +18,14 @@ const Category = () => { const product_kind_id_ref = useRef(0) const product_kind_id_next_ref = useRef(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 { fetchData: productFetchData, state: productState } = GetProductListApi() // 点击面料类型 const getProductKindId = useCallback((e) => { pageNum.current.page = 1 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 }, []) @@ -39,7 +42,7 @@ const Category = () => { const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const getRefresherRefresh = async() => { pageNum.current.page = 1 - setFiltrate({ ...filtrate, size: 5 }) + setFiltrate({ ...filtrate, size: PAGE_LIMIT }) setRefresherTriggeredStatus(true) } @@ -55,7 +58,7 @@ const Category = () => { setProductData({ list: [], total: 0 }) const kind_id = id == -1 ? product_kind_id_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() diff --git a/src/pages/index/components/guessULikeList/index.module.scss b/src/pages/index/components/guessULikeList/index.module.scss index 3a72476..6684c7f 100644 --- a/src/pages/index/components/guessULikeList/index.module.scss +++ b/src/pages/index/components/guessULikeList/index.module.scss @@ -44,17 +44,25 @@ .item_con { display: flex; flex-flow: column nowrap; - justify-content: space-between; padding: 16px 20px; font-size: $font_size; flex: 1; .title { - font-size: $font_size; - color: #707070; - @include common_ellipsis(2); - text { - color: $color_font_one; - font-weight: bold; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + .title_text { + font-size: $font_size; + color: $color_font_three; + @include common_ellipsis(); + } + .title_text_code { + color: #333333; + margin-right: 10px; + } + .favorite { + width: 40px; + height: 40px; } } .tag_list { @@ -65,7 +73,9 @@ max-width: 260rpx; padding: 3px 10px; background-color: #cde5ff; - font-size: $font_size_min; + height: 34px; + line-height: 34px; + font-size: 24px; border-radius: 5px; border: 0; color: $color_main; @@ -83,18 +93,15 @@ justify-content: space-between; } .des { - width: 60%; font-size: $font_size_medium; color: #707070; @include common_ellipsis; } .price { display: flex; - width: 40%; justify-content: flex-end; color: $color_money; align-items: baseline; - margin-top: 8px; font-weight: 550; &_unit { font-size: 18px; diff --git a/src/pages/index/components/guessULikeList/index.tsx b/src/pages/index/components/guessULikeList/index.tsx index 10b3101..9c33807 100644 --- a/src/pages/index/components/guessULikeList/index.tsx +++ b/src/pages/index/components/guessULikeList/index.tsx @@ -2,7 +2,7 @@ import { Text, View } from '@tarojs/components' import { useCallback } from 'react' import styles from './index.module.scss' import LabAndImg from '@/components/LabAndImg' -import { formatHashTag, formatPriceDiv } from '@/common/fotmat' +import { formatHashTag, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat' import { goLink } from '@/common/common' import Tag from '@/components/tag' import IconFont from '@/components/iconfont/iconfont' @@ -30,7 +30,14 @@ const GuessULikeList = (props: PropsType) => { {item.is_favorite && } - {formatHashTag(item.code, item.name)} + + + {formatRemoveHashTag(item.code)}{item.name} + + + {item.is_favorite && } + + {item.width} {item.weight_density} @@ -39,12 +46,10 @@ const GuessULikeList = (props: PropsType) => { && 配套螺纹 } - - {item.component} - - ¥ - {formatPriceDiv(item.lowest_price).toLocaleString()}起 - + {item.component} + + ¥ + {formatPriceDiv(item.lowest_price).toLocaleString()}起 diff --git a/src/pages/searchList/searchList.module.scss b/src/pages/searchList/searchList.module.scss index 3e7b1f0..272b11f 100644 --- a/src/pages/searchList/searchList.module.scss +++ b/src/pages/searchList/searchList.module.scss @@ -169,9 +169,18 @@ page { flex-flow: column nowrap; justify-content: space-between; .title { - font-size: $font_size; - color: $color_font_three; - @include common_ellipsis(); + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + .title_text { + font-size: $font_size; + color: $color_font_three; + @include common_ellipsis(); + } + .favorite { + width: 40px; + height: 40px; + } } .tag_list { display: flex; @@ -179,9 +188,11 @@ page { .tag_g { max-width: 260rpx; @include common_ellipsis(); + height: 34px; padding: 3px 10px; background-color: #cde5ff; - font-size: $font_size_min; + font-size: 24px; + line-height: 34px; border-radius: 5px; border: 0; color: $color_main; diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index 32d8965..8e7bbbf 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -214,10 +214,16 @@ export default () => { {item.product_color_count}色 - {item.is_favorite && } - {formatHashTag(item.code, item.name)} + + + {formatHashTag(item.code, item.name)} + + + {item.is_favorite && } + + {item.width} {item.weight_density}