✨ feat(ID1000801): 2.1面料详情页：色号补充涨跌（标准报价前后对比）、更新的日期；

【2.1面料详情页：色号补充涨跌（标准报价前后对比）、更新的日期；】
https://www.tapd.cn/53459131/prong/stories/view/1153459131001000801

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
 // 生成密钥

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<string>('')
 
   // 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 }}
           ></Image>
         )}
-        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '' }}></View>}
+        {!value.texture_url && rgbStyle && <View className={styles.boxColor} style={{ ...rgbStyle, borderRadius: round ? '50%' : '', ...customImageStyle }}></View>}
         {!value.texture_url && !rgbStyle && (
-          <Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '' }} lazyLoad></Image>
+          <Image mode="aspectFill" src={formatImgUrl('')} className={styles.labAndImg_image} style={{ borderRadius: round ? '50%' : '', ...customImageStyle }} lazyLoad></Image>
         )}
         {name && <View className={styles.labAndImg_name}>{name}</View>}
       </View>

src/pages/details/index.config.ts

@@ -1,5 +1,5 @@
 export default {
-  navigationBarTitleText: '详情',
+  navigationBarTitleText: '商品详情',
   enablePullDownRefresh: true,
   backgroundTextStyle: 'dark',
   enableShareAppMessage: true,

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{
+
+  }
+}

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<CurrentDialogDetail>({} 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 (
     <MoveBtn showList={['customer']}>
@@ -245,11 +270,10 @@ const Details = (props: Params) => {
           <View className={styles.list}>
             {productInfo?.product_color_list?.map((item) => {
               return (
-                <View key={item.id} className={styles.item}>
+                <View key={item.id} className={styles.item} onClick={() => handleClickProductColor(item)}>
                   <View className={styles.item_color}>
                     <LabAndImg
                       value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url, title: item.code }}
-                      showStatus
                       round
                       name={formatRemoveHashTag(item.code)}
                     />
@@ -302,6 +326,42 @@ const Details = (props: Params) => {
         <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>
+        <Dialog show={showDialog} onClose={handleCloseDialog} onChange={handleChangeDialog} >
+          <View className={styles.productColorDialog}>
+            <View className={styles.productColorDialog_content}>
+              <View className={styles.productColorDialog_img}>
+                <LabAndImg
+                  customImageStyle={{ borderRadius: '0' }}
+                  value={{ lab: currentDialogDetail.current!.lab, rgb: currentDialogDetail.current!.rgb, texture_url: currentDialogDetail.current!.texture_url, title: currentDialogDetail.current!.code }}
+                />
+              </View>
+              <View className={styles.productColorDialog_info}>
+                <View className={styles.productColorDialog_title}>
+                  <Text className={styles.productColorDialog_name}>{currentDialogDetail.current!.name}</Text>
+                  <View className={styles.productColorDialog_price}>
+                    <Text>{formatPriceDiv(currentDialogDetail.current!.bulk_price)}/KG</Text>
+                    {
+                      currentDialogDetail.current!.length_cut_price ? (currentDialogDetail.current!.bulk_price > currentDialogDetail.current!.length_cut_price) ? <Text style={{ color: 'red', marginLeft: '10rpx' }}>↑</Text> : <Text style={{ color: 'green', marginLeft: '10rpx' }}>↓</Text> : null
+                    }
+                  </View>
+                </View>
+                <View className={styles.productColorDialog_bottomBar}>
+                  {
+                    currentDialogDetail.current!.length_cut_price
+                      ? <>
+                        <Text className={styles.productColorDialog_history}>更新于:{formatDateTime(currentDialogDetail.current!.update_price_time, 'YYYY-MM-DD') }</Text>
+                        <Text className={styles.productColorDialog_oldPrice}>{formatPriceDiv(currentDialogDetail.current!.length_cut_price)}/KG</Text>
+                      </>
+                      : <Text className={styles.productColorDialog_history}>暂无历史报价</Text>
+                  }
+                </View>
+              </View>
+            </View>
+            <View className={styles.productColorDialog_button}>
+              <NormalButton circle type="primary" size="normal" onClick={handleCloseDialog}>知道了</NormalButton>
+            </View>
+          </View>
+        </Dialog>
         <View className="common_safe_area_y"></View>
       </View>
     </MoveBtn>