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

【2.1面料详情页：色号补充涨跌（标准报价前后对比）、更新的日期；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000801
2022-12-23 11:48:08 +08:00 · 2022-12-23 11:48:08 +08:00 · 14767fed64
commit 14767fed64
parent 979373a2f4
5 changed files with 124 additions and 17 deletions
--- 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
 // 生成密钥
--- 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<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>
--- 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,
--- 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{
+
+  }
+}
--- 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<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>