✨ feat(ID1000773):二、面料详情首次引导；

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

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

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

@@ -48,7 +48,7 @@ const FeaturePopup = (param: Props) => {
 
   return (
     <Popup showTitle={false} show={param.showPopup} onClose={() => param.closePopup?.()}>
-      <ScrollView scrollY style={{ height: '1000rpx' }}>
+      <ScrollView scrollY className={styles.sollBox}>
         <View className={styles.main}>
           <View className={styles.title}>{param.productName}</View>
           <View className={styles.line}></View>

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

@@ -0,0 +1,107 @@
+.main {
+  width: 100vw;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1998;
+  overflow: hidden;
+  .mask {
+    border-radius: 20px 20px 0px 0px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.6);
+    transition: all 0.3s;
+    // opacity: 0;
+    .bigBox {
+      position: absolute;
+      padding: 32px;
+      border-radius: 16px;
+      background-color: #fff;
+      left: 10px;
+      top: 320px;
+      .topTitleBox {
+        display: flex;
+        align-items: center;
+        .topTitle {
+          color: #353535;
+          font-size: 28px;
+          margin-right: 10px;
+          font-weight: 500;
+        }
+      }
+      .modeBox {
+        margin-top: 20px;
+        display: flex;
+        .modeKindOne {
+          width: 160px;
+          height: 68px;
+          background: rgba(51, 127, 255, 0.1);
+          border-radius: 8px;
+          border: 1px solid #337fff;
+          font-size: 28px;
+          font-weight: 400;
+          color: #337fff;
+          text-align: center;
+          line-height: 68px;
+          margin-right: 18px;
+        }
+        .modeKindTwo {
+          margin-right: 18px;
+          background-color: #f6f6f6;
+          width: 160px;
+          height: 68px;
+          border-radius: 8px;
+          color: #626262;
+          font-size: 28px;
+          font-weight: 400;
+          color: #000000;
+          text-align: center;
+          line-height: 68px;
+        }
+      }
+      .line {
+        margin-top: 15px;
+        margin-bottom: 15px;
+        // width: 512px;
+        height: 1px;
+        background: #050000;
+        opacity: 0.1;
+      }
+      .pleaseFont {
+        font-size: 26px;
+        font-weight: 500;
+        color: #000000;
+        margin-bottom: 16px;
+      }
+      .saleFont {
+        font-size: 24px;
+        font-weight: 400;
+        color: #333333;
+        margin-bottom: 16px;
+      }
+      .flexBox {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .flexLeft {
+          font-size: 24px;
+          font-weight: 400;
+          color: #333333;
+        }
+        .flexRight {
+          font-size: 26px;
+          font-weight: 500;
+          color: #337fff;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+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 styles from './index.module.scss'
+import { GetProductKindListApi } from '@/api/material'
+import { getFilterData } from '@/common/util'
+import { alert, goLink } from '@/common/common'
+import { Mallproductinstruct } from '@/api/favorite'
+import IconFont from '@/components/iconfont/iconfont'
+
+interface Props {
+  closePopup: () => void
+}
+
+const guidePopup = (props: Props) => {
+  return (
+    <View className={styles.main}>
+      <View className={styles.mask}>
+        <View className={styles.bigBox}>
+          <View className={styles.topTitleBox}>
+            <View className={styles.topTitle}>布料类型</View>
+            <IconFont name="icon-tishi" size={30}></IconFont>
+          </View>
+          <View className={styles.modeBox}>
+            <View className={styles.modeKindOne}>大货</View>
+            <View className={styles.modeKindTwo}>剪版</View>
+            <View className={styles.modeKindTwo}>散剪</View>
+          </View>
+          <View className={styles.line}></View>
+          <View className={styles.pleaseFont}>请选择你需要的商品类型✨</View>
+          <View className={styles.saleFont}>大货：按【条数】销售；</View>
+          <View className={styles.saleFont}>散剪：按【米】销售；</View>
+          <View className={styles.flexBox}>
+            <View className={styles.flexLeft}>剪版：按【公斤】销售；</View>
+            <View className={styles.flexRight} onClick={() => props.closePopup?.()}>我知道了</View>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+export default memo(guidePopup)

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

@@ -27,9 +27,11 @@
     align-items: center;
     padding: 20px;
     .search_title {
+      display: flex;
       font-size: $font_size;
       color: #000;
-      width: 160px;
+      width: 200px;
+      align-items: center;
     }
     .search_list {
       display: flex;

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

@@ -4,6 +4,7 @@ import Big from 'big.js'
 import classnames from 'classnames'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import VirtualList from '@tarojs/components/virtual-list'
+import GuidePopup from '../guidePopup/index'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import LoadingCard from '@/components/loadingCard'
@@ -18,14 +19,16 @@ import { getFilterData } from '@/common/util'
 import LabAndImg from '@/components/LabAndImg'
 import useCommonData from '@/use/useCommonData'
 import LabAndImgShow from '@/components/LabAndImgShow'
+import IconFont from '@/components/iconfont/iconfont'
 
 interface param {
   show?: true | false
   onClose?: () => void
   title?: string
   productId?: number
+  is_first_login?: boolean // 是否首次进来需要展示引导
 }
-const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param) => {
+const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first_login = true }: param) => {
   const { adminUserInfo } = useSelector(state => state.userInfo)
 
   const [selectList, _] = useState([
@@ -310,13 +313,26 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param)
     }, 100)
   }, [show])
 
+  const [showGuidePopup, setshowGuidePopup] = useState(true)
+
+  useEffect(() => {
+    if (show) {
+      if (!is_first_login) {
+        console.log(is_first_login, 'showGuidePopupshowGuidePopup')
+        console.log(2222)
+        setshowGuidePopup(false)
+      }
+    }
+  }, [show])
+
   return (
     <View className={styles.shop_cart_main}>
       <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
         <View className={styles.popup_con}>
           <View className={styles.header}>{title}</View>
           <View className={styles.search}>
-            <View className={styles.search_title}>下单类型:</View>
+            <View className={styles.search_title}>下单类型  <View onClick={() => setshowGuidePopup(true)}><IconFont name="icon-tishi" size={30}></IconFont></View>:</View>
+
             <View className={styles.search_list}>
               {selectList.map((item, index) => {
                 return (
@@ -380,6 +396,9 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param)
         </View>
         {/* <View className='common_safe_area_y'></View> */}
       </Popup>
+      {
+        showGuidePopup && showPopup && <GuidePopup closePopup={() => setshowGuidePopup(false)}></GuidePopup>
+      }
       <View>
         <LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
       </View>

src/pages/details/index.module.scss

@@ -79,7 +79,7 @@
       display: grid;
       grid-template-columns: 50% 50%;
       grid-template-rows: auto auto auto;
-      grid-template-areas: 'a b' 'c d' 'e e';
+      grid-template-areas: 'a b' 'c d' 'e f';
       font-size: $font_size_medium;
       color: $color_font_three;
       background-color: rgba(247, 247, 247, 0.6);

src/pages/details/index.tsx

@@ -210,9 +210,9 @@ const Details = (props: Params) => {
           }
         </View>
         <View className={styles.con}>
-          <View className={styles.des_text}>
+          {/* <View className={styles.des_text}>
             编号：<Text>{productInfo.code}</Text>
-          </View>
+          </View> */}
           <View className={styles.des_text}>
             幅宽：<Text>{productInfo.width}</Text>
           </View>
@@ -297,7 +297,7 @@ const Details = (props: Params) => {
           </View>
         )}
       </View>
-      <OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id} />
+      <OrderCount show={showOrderCount} is_first_login={productInfo.is_first_login} 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>

src/pages/searchList/hightSearchList.tsx

@@ -252,7 +252,7 @@ export default () => {
             <View className={styles.product_list}>
               {materialList.list.map((item) => {
                 return (
-                  <Goods key={item} data={item}></Goods>
+                  <Goods clickItem={() => goLink(`/pages/details/index?id=${item.product_id}`)} key={item} data={item}></Goods>
                   // <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
                   //   <View className={styles.product_img}>
                   //     <LabAndImg value={labAndImgObj(item)} />

src/pages/searchList/search.tsx

@@ -230,7 +230,7 @@ export default () => {
               {
                 materialList?.list.map((item) => {
                   return (
-                    <Goods key={item} data={item}></Goods>
+                    <Goods clickItem={() => goLink(`/pages/details/index?id=${item.id}`)} key={item} data={item}></Goods>
                   )
                 })
               }