🎈 perf(页面优化完成):

src/components/LabAndImg/index.module.scss

@@ -1,16 +1,35 @@
 .labAndImg_main {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  position: relative;
+  // border: 1px #eee solid;
+  display: flex;
+  justify-content: center;
   .boxColor {
     width: 100%;
     height: 100%;
     border-radius: 20px;
-    border: 1px solid #818181;
+    // border: 1px solid #818181;
     box-sizing: border-box;
   }
   .labAndImg_image {
     width: 100%;
     height: 100%;
-    border-radius: 20px !important;
+    border-radius: 20px;
+  }
+  .labAndImg_name {
+    position: absolute;
+    margin: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 80%;
+    text-align: center;
+    font-size: 24px;
+    border-radius: 50px;
+    padding: 7px;
+    background-color: #fff;
+    @include common_ellipsis;
   }
 }

src/components/LabAndImg/index.tsx

@@ -15,8 +15,10 @@ type Param = {
   }
   showStatus?: true | false
   onClick?: (val: Param['value']) => void
+  round?: boolean
+  name?: string
 }
-export default memo(({ value, onClick, showStatus = false }: Param) => {
+export default memo(({ value, onClick, showStatus = false, round = false, name = '' }: Param) => {
   const [imgs, setImgs] = useState<string[]>([])
 
   //lab是否都是0
@@ -50,10 +52,13 @@ export default memo(({ value, onClick, showStatus = false }: Param) => {
 
   return (
     <>
-      <View className={styles.labAndImg_main} onClick={() => onShowLabAndImg()}>
+      <View className={styles.labAndImg_main} style={{ borderRadius: round ? '50%' : '' }} onClick={() => onShowLabAndImg()}>
-        {value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image}></Image>}
+        {value.texture_url && <Image mode='aspectFill' src={imgs[0]} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>}
-        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle }}></View>}
+        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
-        {!value.texture_url && !rgbStyle && <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image}></Image>}
+        {!value.texture_url && !rgbStyle && (
+          <Image mode='aspectFill' src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }}></Image>
+        )}
+        {name && <View className={styles.labAndImg_name}>{name}</View>}
       </View>
       <LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow} />
     </>

src/components/product/index.module.scss

@@ -1,10 +1,9 @@
-
+.products_list {
-.products_list{
   padding: 0 20px 20px 20px;
   box-sizing: border-box;
   height: 100%;
 }
-.products_item{
+.products_item {
   width: 100%;
   background-color: #fff;
   border-radius: 20px;
@@ -12,23 +11,23 @@
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
-    &:nth-child(n+2){
+  &:nth-child(n + 2) {
     margin-top: 16px;
   }
-    .item_img{
+  .item_img {
     width: 198px;
     height: 198px;
     position: relative;
-        image{
+    image {
       width: 100%;
       height: 100%;
       border-radius: 10px;
     }
-        .num{
+    .num {
       padding: 5px 10px 5px 20px;
       font-size: $font_size_min;
       position: absolute;
-            right:0;
+      right: 0;
       bottom: 0;
       background: rgba($color: #000, $alpha: 0.3);
       border-radius: 36px 0px 20px 0px;
@@ -36,48 +35,49 @@
       text-align: center;
     }
   }
-    .item_con{
+  .item_con {
     padding-left: 20px;
     font-size: $font_size;
-        flex:1;
+    flex: 1;
-        .title{
+    .title {
       font-size: $font_size;
       color: #707070;
       @include common_ellipsis(2);
-            text{
+      text {
         color: $color_font_one;
         font-weight: bold;
       }
     }
-        .tag_list{
+    .tag_list {
       display: flex;
       margin-top: 16px;
       flex-wrap: wrap;
-            .tag, .tag_g{
+      .tag,
+      .tag_g {
         max-width: 260rpx;
         padding: 3px 10px;
-                background-color: #CDE5FF;
+        background-color: #cde5ff;
         font-size: $font_size_min;
         border-radius: 5px;
         color: $color_main;
         margin-right: 10px;
         margin-bottom: 10px;
       }
-            .tag_g{
+      .tag_g {
-                background-color: #FFE6CE;
+        background-color: #ffe6ce;
-                color: #EE7500;
+        color: #ee7500;
       }
     }
-        .introduce{
+    .introduce {
       font-size: $font_size_medium;
       color: $color_font_two;
-            
+      @include common_ellipsis;
     }
-        .des{
+    .des {
-            font-size:$font_size_medium;
+      font-size: $font_size_medium;
       color: #707070;
       margin-top: 16px;
-            @include common_ellipsis($params:2);
+      @include common_ellipsis($params: 2);
     }
   }
 }

src/components/product/index.tsx

@@ -1,38 +1,45 @@
-import { Image, View } from "@tarojs/components"
+import { Image, View } from '@tarojs/components'
-import Taro from "@tarojs/taro"
+import Taro from '@tarojs/taro'
-import { goLink } from "@/common/common"
+import { goLink } from '@/common/common'
 import styles from './index.module.scss'
-import { formatHashTag, formatImgUrl } from "@/common/fotmat"
+import { formatHashTag, formatImgUrl } from '@/common/fotmat'
-import LabAndImg from "../LabAndImg"
+import LabAndImg from '../LabAndImg'
-import { useCallback, useMemo } from "react"
+import { useCallback, useMemo } from 'react'
 
 type Params = {
-    desStatus?: true|false,
+  desStatus?: true | false
   productList?: any[]
 }
-export default ({desStatus = true, productList = []}:Params) => {
+export default ({ desStatus = true, productList = [] }: Params) => {
-
+  const labAndImgObj = useCallback(
-    const labAndImgObj = useCallback((item) => {
+    (item) => {
-        return {lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}
+      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
-    }, [productList])
+    },
+    [productList],
+  )
   return (
     <View className={styles.products_list}>
-            {productList?.map(item => {
+      {productList?.map((item) => {
-                return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
+        return (
+          <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
             <View className={styles.item_img}>
-                        <LabAndImg value={labAndImgObj(item)}/>
+              <LabAndImg value={labAndImgObj(item)} />
               <View className={styles.num}>{item.product_color_count}色</View>
             </View>
             <View className={styles.item_con}>
-                    <View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
+              <View className={styles.title}>
+                <text>{formatHashTag(item.code, '')} </text>
+                {item.name}
+              </View>
               <View className={styles.tag_list}>
                 <View className={styles.tag}>{item.width}</View>
                 <View className={styles.tag_g}>{item.weight_density}</View>
               </View>
-                    <View className={styles.introduce}>{item.component}</View>
+              <View className={styles.introduce}>{item.craft + '；' + item.component}</View>
-                        {desStatus&&<View className={styles.des}>{item.describe}</View>}
+              {desStatus && <View className={styles.des}>{item.describe}</View>}
             </View>
           </View>
+        )
       })}
     </View>
   )

src/pages/details/index.module.scss

@@ -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;
+          width: 136px;
-          height: 210px;
+          height: 136px;
-          border-radius: 20px;
+          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

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

src/styles/iconfont.scss

@@ -1,10 +1,14 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 2987621 */
+  font-family: 'iconfont'; /* Project id 2987621 */
   src: url('iconfont.ttf?t=1658997423433') format('truetype');
 }
+@font-face {
+  font-family: 'iconfont2'; /* Project id 2987621 */
+  src: url('iconfont2.ttf?t=1658997423433') format('truetype');
+}
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: 'iconfont', 'iconfont2' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -12,214 +16,333 @@
 }
 
 .icon-wodekefu:before {
-  content: "\e67a";
+  content: '\e67a';
 }
 
 .icon-yaoqingma:before {
-  content: "\e679";
+  content: '\e679';
 }
 
 .icon-gengduo:before {
-  content: "\e677";
+  content: '\e677';
 }
 
 .icon-shanchu-2:before {
-  content: "\e678";
+  content: '\e678';
 }
 
 .icon-shangchuanzhaopian:before {
-  content: "\e676";
+  content: '\e676';
 }
 
 .icon-zuzhiziliao:before {
-  content: "\e66e";
+  content: '\e66e';
 }
 
 .icon-rili:before {
-  content: "\e66f";
+  content: '\e66f';
 }
 
 .icon-yishoucang:before {
-  content: "\e670";
+  content: '\e670';
 }
 
 .icon-tongguorenzheng:before {
-  content: "\e671";
+  content: '\e671';
 }
 
 .icon-gerenziliao:before {
-  content: "\e672";
+  content: '\e672';
 }
 
 .icon-shuaxin:before {
-  content: "\e673";
+  content: '\e673';
 }
 
 .icon-piliangguanli:before {
-  content: "\e674";
+  content: '\e674';
 }
 
 .icon-xinzeng:before {
-  content: "\e675";
+  content: '\e675';
 }
 
 .icon-yucunkuan:before {
-  content: "\e66c";
+  content: '\e66c';
 }
 
 .icon-xianxiahuikuan:before {
-  content: "\e669";
+  content: '\e669';
 }
 
 .icon-xtianzhangqi:before {
-  content: "\e66a";
+  content: '\e66a';
 }
 
 .icon-saomazhifu:before {
-  content: "\e66b";
+  content: '\e66b';
 }
 
 .icon-fahuo:before {
-  content: "\e66d";
+  content: '\e66d';
 }
 
 .icon-zhuyi:before {
-  content: "\e668";
+  content: '\e668';
 }
 
 .icon-zhushi:before {
-  content: "\e667";
+  content: '\e667';
 }
 
 .icon-zidingyimadan:before {
-  content: "\e665";
+  content: '\e665';
 }
 
 .icon-a-yuanmadanmadanguanli:before {
-  content: "\e666";
+  content: '\e666';
 }
 
 .icon-daohang:before {
-  content: "\e664";
+  content: '\e664';
 }
 
 .icon-shanchu:before {
-  content: "\e663";
+  content: '\e663';
 }
 
 .icon-yifahuo:before {
-  content: "\e65b";
+  content: '\e65b';
 }
 
 .icon-daipeibu:before {
-  content: "\e662";
+  content: '\e662';
 }
 
 .icon-yaoqingtuandui:before {
-  content: "\e65a";
+  content: '\e65a';
 }
 
 .icon-a-tuikuanshouhou:before {
-  content: "\e65c";
+  content: '\e65c';
 }
 
 .icon-daifukuan:before {
-  content: "\e65d";
+  content: '\e65d';
 }
 
 .icon-shezhi:before {
-  content: "\e65e";
+  content: '\e65e';
 }
 
 .icon-yanseduibi:before {
-  content: "\e65f";
+  content: '\e65f';
 }
 
 .icon-daifahuo:before {
-  content: "\e660";
+  content: '\e660';
 }
 
 .icon-baoguo:before {
-  content: "\e661";
+  content: '\e661';
 }
 
 .icon-tick-pressed:before {
-  content: "\e652";
+  content: '\e652';
 }
 
 .icon-wode-pressed:before {
-  content: "\e655";
+  content: '\e655';
 }
 
 .icon-fenlei-pressed:before {
-  content: "\e656";
+  content: '\e656';
 }
 
 .icon-sousuo:before {
-  content: "\e647";
+  content: '\e647';
 }
 
 .icon-fenxiang:before {
-  content: "\e648";
+  content: '\e648';
 }
 
 .icon-shaixuan:before {
-  content: "\e649";
+  content: '\e649';
 }
 
 .icon-gouwuche:before {
-  content: "\e64a";
+  content: '\e64a';
 }
 
 .icon-qingkong:before {
-  content: "\e64c";
+  content: '\e64c';
 }
 
 .icon-jia:before {
-  content: "\e64d";
+  content: '\e64d';
 }
 
 .icon-jian:before {
-  content: "\e64e";
+  content: '\e64e';
 }
 
 .icon-shoucang-pressed:before {
-  content: "\e64f";
+  content: '\e64f';
 }
 
 .icon-shoucang:before {
-  content: "\e650";
+  content: '\e650';
 }
 
 .icon-phone:before {
-  content: "\e651";
+  content: '\e651';
 }
 
 .icon-tick:before {
-  content: "\e653";
+  content: '\e653';
 }
 
 .icon-a-moreback:before {
-  content: "\e654";
+  content: '\e654';
 }
 
 .icon-fenlei:before {
-  content: "\e657";
+  content: '\e657';
 }
 
 .icon-bianji:before {
-  content: "\e658";
+  content: '\e658';
 }
 
 .icon-wode:before {
-  content: "\e659";
+  content: '\e659';
 }
 
 .icon-sort-up-full:before {
-  content: "\ea4c";
+  content: '\ea4c';
 }
 
 .icon-sort-down-full:before {
-  content: "\ea4d";
+  content: '\ea4d';
 }
 
+.icon-shezhi:before {
+  content: '\e630';
+}
+
+.icon-tishi:before {
+  content: '\e631';
+}
+
+.icon-erweima:before {
+  content: '\e632';
+}
+
+.icon-dianjishoucang:before {
+  content: '\e633';
+}
+
+.icon-gouwuche:before {
+  content: '\e634';
+}
+
+.icon-shoucangchenggong:before {
+  content: '\e635';
+}
+
+.icon-fenxiangshangpin:before {
+  content: '\e636';
+}
+
+.icon-kefu:before {
+  content: '\e637';
+}
+
+.icon-xinzenganniu:before {
+  content: '\e62e';
+}
+
+.icon-jianshaoanniu:before {
+  content: '\e62f';
+}
+
+.icon-daifahuo:before {
+  content: '\e629';
+}
+
+.icon-daishouhuo:before {
+  content: '\e62a';
+}
+
+.icon-tuikuan-shouhou:before {
+  content: '\e62b';
+}
+
+.icon-daipeibu:before {
+  content: '\e62c';
+}
+
+.icon-daifukuan:before {
+  content: '\e62d';
+}
+
+.icon-shezhi:before {
+  content: '\e630';
+}
+
+.icon-tishi:before {
+  content: '\e631';
+}
+
+.icon-erweima:before {
+  content: '\e632';
+}
+
+.icon-dianjishoucang:before {
+  content: '\e633';
+}
+
+.icon-gouwuche:before {
+  content: '\e634';
+}
+
+.icon-shoucangchenggong:before {
+  content: '\e635';
+}
+
+.icon-fenxiangshangpin:before {
+  content: '\e636';
+}
+
+.icon-kefu:before {
+  content: '\e637';
+}
+
+.icon-xinzenganniu:before {
+  content: '\e62e';
+}
+
+.icon-jianshaoanniu:before {
+  content: '\e62f';
+}
+
+.icon-daifahuo:before {
+  content: '\e629';
+}
+
+.icon-daishouhuo:before {
+  content: '\e62a';
+}
+
+.icon-tuikuan-shouhou:before {
+  content: '\e62b';
+}
+
+.icon-daipeibu:before {
+  content: '\e62c';
+}
+
+.icon-daifukuan:before {
+  content: '\e62d';
+}