From 54682019fb5bcf4a46b0f961b881cfda95e292df Mon Sep 17 00:00:00 2001
From: Haiyi <1021441632@qq.com>
Date: Mon, 12 Dec 2022 14:47:52 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ID1000773):=E4=BA=8C=E3=80=81?=
 =?UTF-8?q?=E9=9D=A2=E6=96=99=E8=AF=A6=E6=83=85=E9=A6=96=E6=AC=A1=E5=BC=95?=
 =?UTF-8?q?=E5=AF=BC=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/feature/index.module.scss      |  43 +++----
 .../details/components/feature/index.tsx      |   2 +-
 .../components/guidePopup/index.module.scss   | 107 ++++++++++++++++++
 .../details/components/guidePopup/index.tsx   |  43 +++++++
 .../components/orderCount/index.module.scss   |   4 +-
 .../details/components/orderCount/index.tsx   |  23 +++-
 src/pages/details/index.module.scss           |   2 +-
 src/pages/details/index.tsx                   |   6 +-
 src/pages/searchList/hightSearchList.tsx      |   2 +-
 src/pages/searchList/search.tsx               |   2 +-
 10 files changed, 204 insertions(+), 30 deletions(-)
 create mode 100644 src/pages/details/components/guidePopup/index.module.scss
 create mode 100644 src/pages/details/components/guidePopup/index.tsx

diff --git a/src/pages/details/components/feature/index.module.scss b/src/pages/details/components/feature/index.module.scss
index 02ec54e..5f5509a 100644
--- a/src/pages/details/components/feature/index.module.scss
+++ b/src/pages/details/components/feature/index.module.scss
@@ -1,22 +1,25 @@
-.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);
+.sollBox {
+  height: calc(100vh - 200px);
+  .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);
+    }
   }
 }
diff --git a/src/pages/details/components/feature/index.tsx b/src/pages/details/components/feature/index.tsx
index 39ac702..fcb0335 100644
--- a/src/pages/details/components/feature/index.tsx
+++ b/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>
diff --git a/src/pages/details/components/guidePopup/index.module.scss b/src/pages/details/components/guidePopup/index.module.scss
new file mode 100644
index 0000000..5874fbb
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/details/components/guidePopup/index.tsx b/src/pages/details/components/guidePopup/index.tsx
new file mode 100644
index 0000000..de8773b
--- /dev/null
+++ b/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)
diff --git a/src/pages/details/components/orderCount/index.module.scss b/src/pages/details/components/orderCount/index.module.scss
index f003bf6..a16693e 100644
--- a/src/pages/details/components/orderCount/index.module.scss
+++ b/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;
diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx
index f05f225..84a1b36 100644
--- a/src/pages/details/components/orderCount/index.tsx
+++ b/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>
diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss
index 7f843a8..33602e1 100644
--- a/src/pages/details/index.module.scss
+++ b/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);
diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx
index 3bb3d8f..85e7095 100644
--- a/src/pages/details/index.tsx
+++ b/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>
diff --git a/src/pages/searchList/hightSearchList.tsx b/src/pages/searchList/hightSearchList.tsx
index 0ae2c2a..132bc25 100644
--- a/src/pages/searchList/hightSearchList.tsx
+++ b/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)} />
diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx
index c70577c..2456660 100644
--- a/src/pages/searchList/search.tsx
+++ b/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>
                   )
                 })
               }