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 {
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%;
}

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_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>

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

@ -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;
}
}
}

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

@ -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>

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

@ -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()

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

@ -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;

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 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>

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

@ -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;

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

@ -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>