From 14767fed64a7dcd82cda93173606a884768c8c17 Mon Sep 17 00:00:00 2001 From: "w1359774872@163.com" Date: Fri, 23 Dec 2022 11:48:08 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ID1000801):=202.1=E9=9D=A2?= =?UTF-8?q?=E6=96=99=E8=AF=A6=E6=83=85=E9=A1=B5=EF=BC=9A=E8=89=B2=E5=8F=B7?= =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=B6=A8=E8=B7=8C=EF=BC=88=E6=A0=87=E5=87=86?= =?UTF-8?q?=E6=8A=A5=E4=BB=B7=E5=89=8D=E5=90=8E=E5=AF=B9=E6=AF=94=EF=BC=89?= =?UTF-8?q?=E3=80=81=E6=9B=B4=E6=96=B0=E7=9A=84=E6=97=A5=E6=9C=9F=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【2.1面料详情页：色号补充涨跌（标准报价前后对比）、更新的日期；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000801 --- src/common/constant.ts | 2 +- src/components/LabAndImg/index.tsx | 9 ++-- src/pages/details/index.config.ts | 2 +- src/pages/details/index.module.scss | 56 ++++++++++++++++++++-- src/pages/details/index.tsx | 72 ++++++++++++++++++++++++++--- 5 files changed, 124 insertions(+), 17 deletions(-) diff --git a/src/common/constant.ts b/src/common/constant.ts index 100e8f9..ea43c74 100644 --- a/src/common/constant.ts +++ b/src/common/constant.ts @@ -14,7 +14,7 @@ export const BASE_URL = CURRENT_BASE_URL // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添 // export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷 -// export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰 +// export const BASE_URL = 'http://192.168.1.42:50001/lymarket' // 杰 // CDN // 生成密钥 diff --git a/src/components/LabAndImg/index.tsx b/src/components/LabAndImg/index.tsx index 6cfe0e6..b8918f4 100644 --- a/src/components/LabAndImg/index.tsx +++ b/src/components/LabAndImg/index.tsx @@ -13,12 +13,13 @@ interface Param { rgb?: { r: number; g: number; b: number } // rgb title?: string } + customImageStyle?: React.CSSProperties showStatus?: true | false onClick?: (val: Param['value']) => void round?: boolean name?: string } -const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '' }: Param) => { +const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = '', customImageStyle = {} }: Param) => { const [imgs, setImgs] = useState('') // lab是否都是0 @@ -65,12 +66,12 @@ const LabAndImg = ({ value, onClick, showStatus = false, round = false, name = ' src={imgs} onError={e => checkLoad(e)} className={styles.labAndImg_image} - style={{ borderRadius: round ? '50%' : '' }} + style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} > )} - {!value.texture_url && rgbStyle && } + {!value.texture_url && rgbStyle && } {!value.texture_url && !rgbStyle && ( - + )} {name && {name}} diff --git a/src/pages/details/index.config.ts b/src/pages/details/index.config.ts index f715710..c856300 100644 --- a/src/pages/details/index.config.ts +++ b/src/pages/details/index.config.ts @@ -1,5 +1,5 @@ export default { - navigationBarTitleText: '详情', + navigationBarTitleText: '商品详情', enablePullDownRefresh: true, backgroundTextStyle: 'dark', enableShareAppMessage: true, diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss index 33602e1..4f5e4c6 100644 --- a/src/pages/details/index.module.scss +++ b/src/pages/details/index.module.scss @@ -131,11 +131,6 @@ width: 136px; height: 136px; border-radius: 50%; - image { - width: 100%; - height: 100%; - border-radius: 20px; - } } .item_name { text-align: center; @@ -236,3 +231,54 @@ left: 0; } } +.productColorDialog { + border-radius: 20px; + background-color: #e4eefd; + padding: 24px; + width: 75vw; + &_img{ + width: 100%; + height: 450px; + } + &_content{ + overflow: hidden; + border-radius: 20px; + margin-bottom: 20px; + } + &_info{ + background-color: #fff; + padding: 20px; + } + &_title{ + display: flex; + justify-content: space-between; + font-size: 28px; + color: #333333; + font-weight: 500; + margin-bottom: 14px; + } + &_name{ + + } + &_price{ + display: flex; + + } + &_bottomBar{ + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + font-size: 24px; + color: #999999; + } + &_history{ + + } + &_oldPrice{ + text-decoration: line-through; + } + &_button{ + + } +} diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index 9924c67..1c4a00c 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -1,13 +1,13 @@ import { Button, RichText, Text, View } from '@tarojs/components' import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' import classnames from 'classnames' -import { useCallback, useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useRef, 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 { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatRemoveHashTag } from '@/common/fotmat' import { GetProductDetailApi } from '@/api/material' import useLogin from '@/use/useLogin' import { AnalysisShortCodeApi, GetShortCodeApi } from '@/api/share' @@ -18,8 +18,9 @@ import { alert } from '@/common/common' import AddCollection from '@/components/addCollection' import { AddFavoriteApi, DelFavoriteProductApi } from '@/api/favorite' import useCommonData from '@/use/useCommonData' -import { IMG_CND_Prefix } from '@/common/constant' import MoveBtn from '@/components/moveBtn' +import Dialog from '@/components/Dialog' +import NormalButton from '@/components/normalButton' interface item { title: string; img: string; url: string; id: number } @@ -28,6 +29,16 @@ interface Params { swiperOnClick?: (val: item) => void style?: Object } +interface CurrentDialogDetail { + lab: { l: number; a: number; b: number } + rgb: { r: number; g: number; b: number } + texture_url: string + code: string + name: string + bulk_price: number + update_price_time: string | Date + length_cut_price: number +} const Details = (props: Params) => { const { getPhoneNumber, userInfo } = useLogin() @@ -90,7 +101,7 @@ const Details = (props: Params) => { type: ShareDetail.value, product_id: parseInt(params.id), }) - setSortCode({ ...userObj.sort_code, shareShortDetail: { title: productName as string, code: resDetail.md5_key, shareImg } }) + setSortCode({ ...userObj.sort_code, shareShortDetail: { title: productName as string, code: resDetail.md5_key, img: shareImg } }) } useDidShow(() => { judgeParam() @@ -177,6 +188,20 @@ const Details = (props: Params) => { }) const [showPopup, setshowPopup] = useState(false) + const currentDialogDetail = useRef({} as CurrentDialogDetail) + const [showDialog, setShowDialog] = useState(false) + const handleCloseDialog = () => { + setShowDialog(false) + } + const handleChangeDialog = (isShow) => { + setShowDialog(isShow) + } + // 选择颜色 + const handleClickProductColor = (current) => { + console.log('current', current) + currentDialogDetail.current = current + setShowDialog(true) + } return ( @@ -245,11 +270,10 @@ const Details = (props: Params) => { {productInfo?.product_color_list?.map((item) => { return ( - + handleClickProductColor(item)}> @@ -302,6 +326,42 @@ const Details = (props: Params) => { setShowCart(false)} /> setshowPopup(false)} productName={productName} productIds={Number(params?.id)}> + + + + + + + + + {currentDialogDetail.current!.name} + + {formatPriceDiv(currentDialogDetail.current!.bulk_price)}/KG + { + currentDialogDetail.current!.length_cut_price ? (currentDialogDetail.current!.bulk_price > currentDialogDetail.current!.length_cut_price) ? ↑ : ↓ : null + } + + + + { + currentDialogDetail.current!.length_cut_price + ? <> + 更新于:{formatDateTime(currentDialogDetail.current!.update_price_time, 'YYYY-MM-DD') } + {formatPriceDiv(currentDialogDetail.current!.length_cut_price)}/KG + + : 暂无历史报价 + } + + + + + 知道了 + + +