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

🎈 perf(页面优化完成):

Browse Source
This commit is contained in:
cheng
2022-11-23 18:02:02 +08:00
parent 053ced7858
commit 9e6cf1738f
8 changed files with 389 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/details/index.module.scss
+36 -11
View File
@@ -1,7 +1,7 @@
.main {
min-height: 100%;
background-color: $color_bg_one;
padding-bottom: 100px;
padding: 20px 20px 100px 20px;
.product_header {
padding: 0 20px;
display: flex;
@@ -52,8 +52,9 @@
}
.des_data {
background-color: #fff;
padding: 20px;
padding: 24px;
margin-top: 16px;
border-radius: 16px;
.title {
font-size: $font_size;
font-weight: 700;
@@ -62,14 +63,20 @@
}
.con {
display: grid;
grid-template-columns: 260px auto;
grid-template-columns: auto auto;
font-size: $font_size_medium;
color: $color_font_three;
background-color: rgba(247, 247, 247, 0.6);
border-radius: 8px;
padding: 24px;
padding-bottom: 0;
color: rgba(0, 0, 0, 0.4);
.des_text {
display: flex;
margin-bottom: 16px;
margin-bottom: 24px;
text {
flex: 1;
color: #333333;
@include common_ellipsis(1);
}
}
@@ -86,15 +93,20 @@
.list {
margin-top: 30px;
display: grid;
grid-template-columns: 210px 210px 210px;
grid-template-columns: 25% 25% 25% 25%;
justify-content: space-between;
.item {
width: 210px;
width: 100%;
margin-bottom: 28px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
.item_color {
width: 210px;
height: 210px;
border-radius: 20px;
width: 136px;
height: 136px;
border-radius: 50%;
image {
width: 100%;
height: 100%;
@@ -104,11 +116,15 @@
.item_name {
text-align: center;
margin-top: 10px;
font-size: 24px;
color: #666666;
@include common_ellipsis;
}
.bulk_price {
color: #8a8a8a;
color: #999999;
font-size: 24px;
margin-top: 8px;
text-align: center;
}
}
@@ -141,7 +157,7 @@
font-size: $font_size_min;
}
.miconfont {
font-size: 36px;
font-size: 50px;
}
.product_num {
position: absolute;
@@ -158,6 +174,15 @@
right: 20px;
}
}
.customer_service {
text-align: center;
.miconfont {
font-size: 50px;
}
.text {
font-size: $font_size_min;
}
}
.buy_btn {
display: flex;
justify-content: center;
src/pages/details/index.tsx
+24 -9
View File
@@ -6,7 +6,7 @@ import OrderCount from './components/orderCount'
import ShopCart from '@/components/shopCart'
import styles from './index.module.scss'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import { formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat'
import { GetProductDetailApi } from '@/api/material'
import useLogin from '@/use/useLogin'
import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share'
@@ -193,11 +193,14 @@ export default (props: Params) => {
</View>
</View>
<View className={styles.des_data}>
<View className={styles.title}>详情参数</View>
<View className={styles.title}>商品参数</View>
<View className={styles.con}>
<View className={styles.des_text}>
编号：<Text>{productInfo.code}</Text>
</View>
<View className={styles.des_text}>
工艺：<Text>{productInfo.craft}</Text>
</View>
<View className={styles.des_text}>
幅宽：<Text>{productInfo.width}</Text>
</View>
@@ -210,15 +213,20 @@ export default (props: Params) => {
</View>
</View>
<View className={styles.product_color}>
<View className={styles.title}>色号 ({productInfo?.product_color_list?.length})</View>
<View className={styles.title}>色号信息 ({productInfo?.product_color_list?.length})</View>
<View className={styles.list}>
{productInfo?.product_color_list?.map((item) => {
return (
<View key={item.id} className={styles.item}>
<View className={styles.item_color}>
<LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }} showStatus={true} />
<LabAndImg
value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }}
showStatus={true}
round={true}
name={formatRemoveHashTag(item.code)}
/>
</View>
<View className={styles.item_name}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.item_name}>{item.name}</View>
<View className={styles.bulk_price}>{formatPriceDiv(item.bulk_price)}/Kg</View>
</View>
)
@@ -229,11 +237,18 @@ export default (props: Params) => {
<RichText nodes={html}></RichText>
</View>
<View className={styles.product_buy}>
<View className={styles.buy_cart} onClick={() => setShowCart(true)}>
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text}>购物车</View>
{commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
<View>
<View className={styles.customer_service}>
<View className={classnames('iconfont icon-kefu', styles.miconfont)}></View>
<View className={styles.text}>客服</View>
</View>
<View className={styles.buy_cart} onClick={() => setShowCart(true)}>
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text}>购物车</View>
{commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
</View>
</View>
{(!userInfo.adminUserInfo?.is_authorize_phone && (
<View className={styles.buy_btn}>
<Button className={styles.phoneBtn} open-type='getPhoneNumber' onGetPhoneNumber={(e) => placeOrder('to_phone', e)}></Button>