✨ feat(ID1000720详情螺纹推荐):

src/common/constant.ts

@@ -4,7 +4,7 @@
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
-export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
+// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
 // export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
@@ -13,8 +13,8 @@ export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
 // export const BASE_URL = 'https://www.zzfzyc.com/lymarket' // 正式环境
 // 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.28:50002/lymarket' // 婷
-export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
+// export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
 
 // CDN
 // 生成密钥

src/pages/details/components/orderCount/index.module.scss

@@ -9,6 +9,41 @@
     font-size: 32px;
     font-weight: 700;
     padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .header_title {
+      display: flex;
+      align-items: center;
+    }
+    .header_label {
+      width: 212px;
+      height: 40px;
+      background: #fcf4e9;
+      border-radius: 5px;
+      font-size: 24px;
+      display: flex;
+      text {
+        display: inline-block;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:nth-child(1) {
+          width: 80px;
+          height: 40px;
+          background: #fee5cd;
+          border-radius: 5px 0px 0px 5px;
+          color: #522b0fff;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          background: #fcf4e9ff;
+          border-radius: 0px 5px 5px 0px;
+          color: #c57c26ff;
+        }
+      }
+    }
   }
   .colorFind {
     padding: 10px 20px;

src/pages/details/components/orderCount/index.tsx

@@ -27,8 +27,9 @@ interface param {
   title?: string
   productId?: number
   is_first_login?: boolean // 是否首次进来需要展示引导
+  recommendStatus?: boolean
 }
-const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first_login = true }: param) => {
+const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first_login = true, recommendStatus = false }: param) => {
   const { adminUserInfo } = useSelector(state => state.userInfo)
 
   const [selectList, _] = useState([
@@ -137,7 +138,7 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
   }
   // 显示获取
   useEffect(() => {
-    if (show) {
+    if (show && productId) {
       setSelectIndex(0)
       condition.current.code_or_name = null
       setSearchShow(false)
@@ -145,7 +146,7 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
       getColorList()
     }
     setShowPopup(show)
-  }, [show])
+  }, [show, productId])
   // 重置数据
   useEffect(() => {
     setSearchShow(false)
@@ -330,10 +331,18 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
     <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.header}>
+            <View className={styles.header_title}>
+              <Text>{title}</Text>
+              <IconFont name="icon-rukou" color="#000000FF" />
+            </View>
+            {recommendStatus && <View className={styles.header_label}>
+              <Text>推荐</Text>
+              <Text>配套螺纹</Text>
+            </View>}
+          </View>
           <View className={styles.search}>
             <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 (

src/pages/details/components/recommend/index.module.scss

@@ -4,6 +4,7 @@
   border-radius: 16px;
   padding: 24px;
   box-sizing: border-box;
+  position: relative;
   .recommend_title {
     font-size: 28px;
     color: #000000ff;
@@ -44,4 +45,12 @@
       margin-right: 24px;
     }
   }
+  .wxBtn {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
 }

src/pages/details/components/recommend/index.tsx

@@ -1,28 +1,67 @@
-import { Text, View } from '@tarojs/components'
+import type { BaseEventOrig } from '@tarojs/components'
-import { memo } from 'react'
+import { Button, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { memo, useCallback, useMemo } from 'react'
 import styles from './index.module.scss'
 import LabAndImg from '@/components/LabAndImg'
 import IconFont from '@/components/iconfont/iconfont'
+import { formatHashTag } from '@/common/fotmat'
+import useLogin from '@/use/useLogin'
+import { alert } from '@/common/common'
 
+interface DataType {
+  product_screw_id: number
+  product_screw_name: string
+  product_screw_code: string
+  screw_rgb: { r: number; g: number; b: number }
+  screw_lab: { l: number; a: number; b: number }
+  screw_texture_url: string
+}
 interface ParamType {
-  onClick?: () => void
+  onClick?: (id: number) => void
+  data: DataType
+  is_authorize_phone?: string
 }
 export default memo((props: ParamType) => {
-  const { onClick } = props
+  const { onClick, data } = props
-  return <View className={styles.recommend} onClick={onClick}>
+  const labAndImgObj = useMemo(
-    <View className={styles.recommend_title}>螺纹配套</View>
+    () => {
-    <View className={styles.recommend_con}>
+      return { lab: data?.screw_lab, rgb: data?.screw_rgb, texture_url: data?.screw_texture_url }
-      <View className={styles.img}>
+    },
-        <LabAndImg value={{}} customImageStyle={{ borderRadius: 0 }} />
+    [data],
-      </View>
+  )
-      <View className={styles.con}>
+
-        <Text>0033#21支2*2螺纹</Text>
+  const { getPhoneNumber, userInfo } = useLogin()
-        <Text>管家建议选择配套商品</Text>
+  const getPhone = async(e) => {
-      </View>
+    if (!e.detail.code) { return alert.error('请授权手机号') }
-      <View className={styles.open_select}>
+    try {
-        <Text>去选购</Text>
+      await getPhoneNumber(e.detail.code)
-        <IconFont name="icon-rukou" size={37} />
+    }
+    catch (msg) {
+      Taro.showToast({
+        icon: 'none',
+        title: msg,
+      })
+      return false
+    }
+  }
+  return <View className={styles.recommend} >
+    <View className={styles.con} onClick={() => onClick?.(data?.product_screw_id)}>
+      <View className={styles.recommend_title}>螺纹配套</View>
+      <View className={styles.recommend_con}>
+        <View className={styles.img}>
+          <LabAndImg value={labAndImgObj} customImageStyle={{ borderRadius: 0 }} />
+        </View>
+        <View className={styles.con}>
+          <Text>{formatHashTag(data?.product_screw_code, data?.product_screw_name)}</Text>
+          <Text>管家建议选择配套商品</Text>
+        </View>
+        <View className={styles.open_select}>
+          <Text>去选购</Text>
+          <IconFont name="icon-rukou" size={37} />
+        </View>
       </View>
     </View>
+    {(!userInfo.adminUserInfo?.is_authorize_phone && <Button className={styles.wxBtn} open-type="getPhoneNumber" onGetPhoneNumber={e => getPhone(e)}></Button>)}
   </View>
 })

src/pages/details/index.tsx

@@ -49,6 +49,9 @@ const Details = (props: Params) => {
   const router = useRouter()
   const [params, setParams] = useState({ id: '', share: null })
 
+  const [productId, setProductId] = useState(0)
+  const [recommendStatus, setRecommendStatus] = useState(false)
+
   // 解析短码参数
   const { fetchData: fetchDataAnalysisShortCode } = AnalysisShortCodeApi()
   const analysisShortCode = async() => {
@@ -72,6 +75,7 @@ const Details = (props: Params) => {
   const { fetchData } = GetProductDetailApi()
   const getProductDetail = async() => {
     const { data } = await fetchData({ id: params.id })
+    setProductId(data.id)
     setProductInfo(data)
     Taro.stopPullDownRefresh()
   }
@@ -117,6 +121,7 @@ const Details = (props: Params) => {
       getProductDetail()
     }
   }, [params])
+
   // 授权手机号和下单
   const placeOrder = async(status = 'to_phone', e: any = {}) => {
     if (!productInfo.id) { return false }
@@ -133,6 +138,8 @@ const Details = (props: Params) => {
         return false
       }
     }
+    setProductId(productInfo.id)
+    setRecommendStatus(false)
     setShowOrderCount(true)
   }
 
@@ -206,6 +213,23 @@ const Details = (props: Params) => {
     setShowDialog(true)
   }
 
+  const recommendData = useMemo(() => {
+    return {
+      product_screw_id: productInfo?.product_screw_id,
+      product_screw_name: productInfo?.product_screw_name,
+      product_screw_code: productInfo?.product_screw_code,
+      screw_rgb: productInfo?.screw_rgb,
+      screw_lab: productInfo?.screw_lab,
+      screw_texture_url: productInfo?.screw_texture_url,
+    }
+  }, [productInfo])
+
+  const openProduct = useCallback((id) => {
+    setProductId(id)
+    setShowOrderCount(true)
+    setRecommendStatus(true)
+  }, [])
+
   return (
     <MoveBtn showList={['customer']}>
       <View className={styles.main}>
@@ -268,7 +292,7 @@ const Details = (props: Params) => {
             </View>
           </View>
         </View>
-        <Recommend onClick={() => placeOrder('to_order')} />
+        {!!productInfo?.product_screw_id && <Recommend onClick={openProduct} data={recommendData} />}
         <View className={styles.product_color}>
           <View className={styles.title}>色号信息 ({productInfo?.product_color_list?.length})</View>
           <View className={styles.list}>
@@ -328,7 +352,7 @@ const Details = (props: Params) => {
             </View>
           )}
         </View>
-        <OrderCount show={showOrderCount} is_first_login={productInfo.is_first_login} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id} />
+        <OrderCount show={showOrderCount} recommendStatus={recommendStatus} is_first_login={productInfo.is_first_login} onClose={() => setShowOrderCount(false)} title={productName} productId={productId} />
         <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>