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 1/2] =?UTF-8?q?=E2=9C=A8=20feat(ID1000773):=E4=BA=8C?= =?UTF-8?q?=E3=80=81=E9=9D=A2=E6=96=99=E8=AF=A6=E6=83=85=E9=A6=96=E6=AC=A1?= =?UTF-8?q?=E5=BC=95=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 ( param.closePopup?.()}> - + {param.productName} 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 ( + + + + + 布料类型 + + + + 大货 + 剪版 + 散剪 + + + 请选择你需要的商品类型✨ + 大货：按【条数】销售； + 散剪：按【米】销售； + + 剪版：按【公斤】销售； + props.closePopup?.()}>我知道了 + + + + + ) +} +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 ( closePopup()}> {title} - 下单类型: + 下单类型 setshowGuidePopup(true)}>: + {selectList.map((item, index) => { return ( @@ -380,6 +396,9 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param) {/* */} + { + showGuidePopup && showPopup && setshowGuidePopup(false)}> + } 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) => { } - + {/* 编号：{productInfo.code} - + */} 幅宽：{productInfo.width} @@ -297,7 +297,7 @@ const Details = (props: Params) => { )} - setShowOrderCount(false)} title={productName} productId={productInfo.id} /> + setShowOrderCount(false)} title={productName} productId={productInfo.id} /> setShowCart(false)} /> setshowPopup(false)} productName={productName} productIds={Number(params?.id)}> 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 () => { {materialList.list.map((item) => { return ( - + goLink(`/pages/details/index?id=${item.product_id}`)} key={item} data={item}> // goLinkPage(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 ( - + goLink(`/pages/details/index?id=${item.id}`)} key={item} data={item}> ) }) } From 658fcca80ddbeb64ed937aa33d195f292a97ffce Mon Sep 17 00:00:00 2001 From: xuan Date: Mon, 12 Dec 2022 18:49:02 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=88=20perf(=E9=82=80=E8=AF=B7?= =?UTF-8?q?=E7=A0=81):=20=E6=9B=BF=E6=8D=A2=E6=96=B0=E7=9A=84=E9=82=80?= =?UTF-8?q?=E8=AF=B7=E7=A0=81=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/bindSalesManDialog/index.tsx | 2 +- src/components/shopCart/index.tsx | 17 +++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/bindSalesManDialog/index.tsx b/src/components/bindSalesManDialog/index.tsx index 85f0f84..1ca29f9 100644 --- a/src/components/bindSalesManDialog/index.tsx +++ b/src/components/bindSalesManDialog/index.tsx @@ -21,7 +21,7 @@ interface Param { invitation_code: string; name: string; phone: string } interface params { onSuccess?: () => void } -interface SalesManDialogRef { +export interface SalesManDialogRef { show: boolean handleChange: (show: boolean) => void } diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index aab5f31..aea22b5 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -1,9 +1,10 @@ import { Image, ScrollView, View } from '@tarojs/components' import Taro from '@tarojs/taro' import classnames from 'classnames' -import { useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react' +import { Ref, useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react' import Counter from '../counter' -import BindSalesmanPopup from '../bindSalesmanPopup' +import type { SalesManDialogRef } from '../bindSalesManDialog' +import BindSalesManDialog from '../bindSalesManDialog' import LabAndImgShow from '../LabAndImgShow' import LabAndImg from '../LabAndImg' import styles from './index.module.scss' @@ -44,7 +45,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod { value: 1, title: '剪板', unit: '米', eunit: 'm', step: 1, digits: 2, minNum: 0.5, maxNum: 9.99, defaultNum: 1 }, { value: 2, title: '散剪', unit: '米', eunit: 'kg', step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3 }, ] - + const bindSalesManDialogRef = useRef(null) const [isPending, startTransition] = useTransition() // 切换面料类型 @@ -121,8 +122,6 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod setList(() => ({ ...list })) } - // 绑定业务员和电话号码 - const [showBindSalesman, setShowBindSalesman] = useState(false) // 显示时展示数据 useEffect(() => { if (!show) { @@ -132,7 +131,8 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod else { setLoading(true) getShoppingCart() - setShowBindSalesman(() => false) + // setShowBindSalesman(() => false) + bindSalesManDialogRef.current?.handleChange(false) } }, [show]) @@ -265,7 +265,8 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod const res = await FetchData() if (res.data.order_access_status !== 3) { if (res.data.order_access_status == 1) { applyOrderAccessFetchData() } - setShowBindSalesman(() => true) + bindSalesManDialogRef.current?.handleChange(true) + // setShowBindSalesman(() => true) onClose?.() return false } @@ -372,7 +373,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod - setShowBindSalesman(false)} /> +