✨ feat(ID1000780):九、秒懂百科（面料特色说明）

project.private.config.json

@@ -23,7 +23,6 @@
           "launchMode": "default",
           "scene": null
         }
-        
       ]
     }
   }

src/api/favorite.ts

@@ -87,3 +87,11 @@ export const MoveFavoriteProductApi = () => {
     method: 'put',
   })
 }
+
+// 查看特色说明
+export const Mallproductinstruct = () => {
+  return useRequest({
+    url: '/v2/mall/product/instruct',
+    method: 'get',
+  })
+}

src/pages/details/components/feature/index.module.scss

@@ -0,0 +1,22 @@
+.main {
+  padding: 32px;
+  width: 686px;
+  .title {
+    font-size: 34px;
+    font-weight: 600;
+    color: #333333;
+  }
+  .line {
+    margin-top: 24px;
+    margin-bottom: 32px;
+    background-color: #f2f2f2;
+    height: 1px;
+  }
+  .topFont {
+    margin-top: 20px;
+    margin-bottom: 24px;
+    font-size: 28px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+  }
+}

src/pages/details/components/feature/index.tsx

@@ -0,0 +1,70 @@
+import { Button, Image, Input, RichText, ScrollView, Text, View } from '@tarojs/components'
+import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro'
+import classnames from 'classnames'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Goods from '../goods'
+import styles from './index.module.scss'
+import Popup from '@/components/popup'
+import { GetProductKindListApi } from '@/api/material'
+import { getFilterData } from '@/common/util'
+import { alert, goLink } from '@/common/common'
+import { Mallproductinstruct } from '@/api/favorite'
+
+interface Props {
+  showPopup: boolean
+  closePopup: () => void
+  productName?: string
+  productIds?: number
+}
+
+const FeaturePopup = (param: Props) => {
+  const { productIds, showPopup } = param
+  const { fetchData } = Mallproductinstruct()
+
+  const [nodes, setnodes] = useState<string>('')
+
+  const [list, setlist] = useState<any>([])
+  const getRich = async() => {
+    Taro.showLoading({
+      title: '加载中...',
+    })
+
+    const res = await fetchData({ product_id: productIds })
+    if (res.data) {
+      setnodes(res.data.instructions)
+      setlist([...res.data.product_list])
+      Taro.hideLoading()
+    }
+    else {
+      Taro.hideLoading()
+    }
+  }
+
+  useEffect(() => {
+    if (showPopup) {
+      getRich()
+    }
+  }, [showPopup])
+
+  return (
+    <Popup showTitle={false} show={param.showPopup} onClose={() => param.closePopup?.()}>
+      <ScrollView scrollY style={{ height: '1000rpx' }}>
+        <View className={styles.main}>
+          <View className={styles.title}>{param.productName}</View>
+          <View className={styles.line}></View>
+          <RichText nodes={nodes}></RichText>
+          <View className={styles.topFont}>推荐面料</View>
+          {
+            list.map((item, index) => {
+              return (
+                <Goods clickItem={() => goLink(`/pages/details/index?id=${item.id}`)} key={index} data={item}></Goods>
+              )
+            })
+          }
+        </View>
+      </ScrollView>
+    </Popup>
+  )
+}
+
+export default memo(FeaturePopup)

src/pages/details/components/goods/index.module.scss

@@ -0,0 +1,123 @@
+.itemBox {
+  width: 686px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid #e7e7e7;
+  display: flex;
+  // margin-left: 32px;
+  margin-bottom: 24px;
+
+  .picBox {
+    margin-right: 24px;
+    width: 144px;
+    height: 144px;
+    border-radius: 8px;
+    position: relative;
+
+    .pic {
+      width: 144px;
+      height: 144px;
+      border-radius: 8px;
+    }
+
+    .posBox {
+      position: absolute;
+      bottom: 0px;
+      right: 0px;
+      width: 69px;
+      height: 29px;
+      background: #000000;
+      border-radius: 15px 0px 8px 0px;
+      font-size: 18px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      text-align: center;
+      line-height: 29px;
+
+      opacity: 0.55;
+    }
+  }
+
+  .leftBox {
+    width: 144px;
+    height: 144px;
+    border-radius: 8px;
+    position: relative;
+    margin-right: 24px;
+
+    .pic {
+      width: 144px;
+      height: 144px;
+      border-radius: 8px;
+    }
+
+    .posBox {
+      position: absolute;
+      bottom: 0px;
+      right: 0px;
+      width: 69px;
+      height: 29px;
+      background: #000000;
+      border-radius: 15px 0px 8px 0px;
+      font-size: 18px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      text-align: center;
+      line-height: 29px;
+
+      opacity: 0.55;
+    }
+  }
+
+  .rightBox {
+    .productName {
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+      margin-bottom: 6px;
+    }
+
+    .tips {
+      font-size: 24px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #a6a6a6;
+      margin-bottom: 17px;
+    }
+
+    .flexTag {
+      display: flex;
+
+      .tagOne {
+        padding-left: 8px;
+        padding-right: 8px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        background: #e3ecff;
+        border-radius: 8px;
+        font-size: 22px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #4581ff;
+        text-align: center;
+        margin-right: 16px;
+      }
+
+      .tagTwo {
+        padding-left: 8px;
+        padding-right: 8px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        background: #ffeedb;
+        border-radius: 8px;
+        font-size: 22px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #fe8e0f;
+        text-align: center;
+      }
+    }
+  }
+}

src/pages/details/components/goods/index.tsx

@@ -0,0 +1,42 @@
+import { Image, View } from '@tarojs/components'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from '../goods/index.module.scss'
+import LabAndImg from '@/components/LabAndImg'
+
+const Goods = (props: any) => {
+  const labAndImgObj = useCallback((item) => {
+    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
+  }, [])
+  return (
+    <View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
+      {
+        props.data?.texture_url === '' && <>
+
+          <View className={styles.picBox}>
+            <Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
+            <View className={styles.posBox}>{props.data?.product_color_count}色</View>
+          </View>
+        </>
+      }
+      {
+        props.data?.texture_url !== ''
+                && <>
+                  <View className={styles.leftBox}>
+                    <LabAndImg value={labAndImgObj(props.data)} />
+                    {/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
+                    <View className={styles.posBox}>{props.data?.product_color_count}色</View>
+                  </View>
+                </>
+      }
+      <View className={styles.rightBox}>
+        <View className={styles.productName}>{props.data?.code}#{props.data?.name}</View>
+        <View className={styles.tips}>{props.data?.component}</View>
+        <View className={styles.flexTag}>
+          <View className={styles.tagOne}>{props.data?.width}</View>
+          <View className={styles.tagTwo}>{props.data?.weight_density}</View>
+        </View>
+      </View>
+    </View>
+  )
+}
+export default memo(Goods)

src/pages/details/index.module.scss

@@ -58,12 +58,23 @@
     padding: 24px;
     margin-top: 16px;
     border-radius: 16px;
-    .title {
+    .flexBox {
-      font-size: $font_size;
+      display: flex;
-      font-weight: 500;
+      justify-content: space-between;
-      color: $color_font_one;
+      align-items: center;
       margin-bottom: 20px;
+      .title {
+        font-size: $font_size;
+        font-weight: 500;
+        color: $color_font_one;
+      }
+      .flexRight {
+        font-size: 26px;
+        font-weight: 500;
+        color: #337fff;
+      }
     }
+
     .con {
       display: grid;
       grid-template-columns: 50% 50%;

src/pages/details/index.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import DesSwiper from './components/swiper'
 import OrderCount from './components/orderCount'
 import styles from './index.module.scss'
+import FeaturePopup from './components/feature'
 import ShopCart from '@/components/shopCart'
 import { formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat'
 import { GetProductDetailApi } from '@/api/material'
@@ -175,6 +176,8 @@ const Details = (props: Params) => {
     getProductDetail()
   })
 
+  const [showPopup, setshowPopup] = useState(false)
+
   return (
     <View className={styles.main}>
       <DesSwiper list={productInfo.texture_url ? productInfo.texture_url.toString().split(',') : []} />
@@ -200,7 +203,12 @@ const Details = (props: Params) => {
         </View>
       </View>
       <View className={styles.des_data}>
-        <View className={styles.title}>商品参数</View>
+        <View className={styles.flexBox}>
+          <View className={styles.title}>商品参数</View>
+          {
+            productInfo.is_instruct && <View className={styles.flexRight} onClick={() => setshowPopup(true)}>{'特色百科 >'}</View>
+          }
+        </View>
         <View className={styles.con}>
           <View className={styles.des_text}>
             编号：<Text>{productInfo.code}</Text>
@@ -280,6 +288,7 @@ const Details = (props: Params) => {
       <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id} />
       <ShopCart show={showCart} onClose={() => setShowCart(false)} />
       <AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection} />
+      <FeaturePopup showPopup={showPopup} closePopup={() => setshowPopup(false)} productName={productName} productIds={Number(params?.id)}></FeaturePopup>
       <View className="common_safe_area_y"></View>
     </View>
   )