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

【【面料优选A+】首页迭代UI查验】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001418
2023-03-02 15:34:56 +08:00 · 2023-03-02 15:34:56 +08:00 · a1c42c16aa
commit a1c42c16aa
parent 5c0564e4a9
9 changed files with 83 additions and 54 deletions
--- 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%;
    }
--- a/src/components/filter/index.tsx
+++ b/src/components/filter/index.tsx
@ -127,7 +127,7 @@ const Filter = (props: params) => {
    }
    >
      <View className={styles.popup_main}>
-        <View className={styles.popup_filter}>
+        <ScrollView scrollY style={{ height: '60vh' }}>
          {
            kindList?.map((item, key) => {
              return <View key={key} className={styles.popup_filter_item}>
@ -196,7 +196,7 @@ const Filter = (props: params) => {
              </View>
            </View>
          </View>
-        </View>
+        </ScrollView>
        <View className={styles.btns_con}>
          <NormalButton customClassName={styles.rest_btn} type="primary" plain round onClick={() => onRestEven()}>重置</NormalButton>
          <NormalButton customClassName={styles.verify_btn} type="primary" round onClick={() => onVerify()}>确认</NormalButton>
--- 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;
      }
    }
  }
--- 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}
              </View>
              <View className={styles.tag_list}>
-                <View className={styles.tag}>{item.width}</View>
-                <View className={styles.tag_g}>{item.weight_density}</View>
+                <Tag customClassName={styles.tag} type="primary" size="small" circle>{item.width}</Tag>
+                <Tag customClassName={styles.tag_g} type="primary" size="small" circle>{item.weight_density}</Tag>
              </View>
              <View className={styles.des}>
                染色；67.19%棉 28%涤纶 染色；67.19%棉 28%涤纶
@ -46,9 +47,7 @@ const Product = ({ desStatus = true, productList = [] }: Params) => {
                  <View>
                    {
                      !!item.product_screw_id
-                      && <View className={styles.header_label}>
-                        <Text>配套螺纹</Text>
-                      </View>
+                      && <Tag customClassName={styles.header_label} circle type="primary" size="small">配套螺纹</Tag>
                    }
                  </View>
                </View>
--- 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()
--- 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;
--- 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 && <IconFont customClassName={styles.collection_icon} name="icon-shoucang1" size={40} />}
            </View>
            <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}>
                <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>
@ -39,12 +46,10 @@ const GuessULikeList = (props: PropsType) => {
                      && <Tag customClassName={styles.tag_g} circle type="primary" size="small">配套螺纹</Tag>
                }
              </View>
-              <View className={styles.bottom}>
-                <View className={styles.des}>{item.component}</View>
-                <View className={styles.price}>
-                  <Text className={styles.price_unit}>¥</Text>
-                  <Text className={styles.price_num}>{formatPriceDiv(item.lowest_price).toLocaleString()}起</Text>
-                </View>
+              <View className={styles.des}>{item.component}</View>
+              <View className={styles.price}>
+                <Text className={styles.price_unit}>¥</Text>
+                <Text className={styles.price_num}>{formatPriceDiv(item.lowest_price).toLocaleString()}起</Text>
              </View>
            </View>
          </View>
--- 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;
--- a/src/pages/searchList/searchList.tsx
+++ b/src/pages/searchList/searchList.tsx
@ -214,10 +214,16 @@ export default () => {
                    <View className={styles.product_img}>
                      <LabAndImg value={labAndImgObj(item)} />
                      <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 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}>
                        <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>