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

2022-12-12 14:47:52 +08:00 · 2022-12-12 14:47:52 +08:00 · 54682019fb
commit 54682019fb
parent 1ae297899a
10 changed files with 204 additions and 30 deletions
--- 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);
+    }
  }
 }
--- 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>
--- a/src/pages/details/components/guidePopup/index.module.scss
+++ 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;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/details/components/guidePopup/index.tsx
+++ 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)
--- 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;
--- 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>
--- 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);
--- 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>
--- 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)} />
--- 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>
                  )
                })
              }