xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
czm 2023-01-10 11:33:00 +08:00
parent 4de7804bac
commit 69724873bf
6 changed files with 143 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/constant.ts
View File

@ -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.42:50002/lymarket' // 杰
export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷
// export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰
// CDN
// 生成密钥

35
src/pages/details/components/orderCount/index.module.scss
View File

@ -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;

19
src/pages/details/components/orderCount/index.tsx
View File

@ -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 (

9
src/pages/details/components/recommend/index.module.scss
View File

@ -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;
}
}

53
src/pages/details/components/recommend/index.tsx
View File

@ -1,22 +1,59 @@
import { Text, View } from '@tarojs/components'
import { memo } from 'react'
import type { BaseEventOrig } from '@tarojs/components'
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
return <View className={styles.recommend} onClick={onClick}>
const { onClick, data } = props
const labAndImgObj = useMemo(
() => {
return { lab: data?.screw_lab, rgb: data?.screw_rgb, texture_url: data?.screw_texture_url }
},
[data],
)
const { getPhoneNumber, userInfo } = useLogin()
const getPhone = async(e) => {
if (!e.detail.code) { return alert.error('请授权手机号') }
try {
await getPhoneNumber(e.detail.code)
}
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={{}} customImageStyle={{ borderRadius: 0 }} />
<LabAndImg value={labAndImgObj} customImageStyle={{ borderRadius: 0 }} />
</View>
<View className={styles.con}>
<Text>0033#21支2*2螺纹</Text>
<Text>{formatHashTag(data?.product_screw_code, data?.product_screw_name)}</Text>
<Text>管家建议选择配套商品</Text>
</View>
<View className={styles.open_select}>
@ -25,4 +62,6 @@ export default memo((props: ParamType) => {
</View>
</View>
</View>
{(!userInfo.adminUserInfo?.is_authorize_phone && <Button className={styles.wxBtn} open-type="getPhoneNumber" onGetPhoneNumber={e => getPhone(e)}></Button>)}
</View>
})

28
src/pages/details/index.tsx
View File

@ -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>