wwl
/
bk-shop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复已知bug,隐藏首页品牌介绍,优化sku选择规则

main
王文龙 2024-02-28 18:42:55 +08:00
parent 1cc8f465a0
commit 15759db8bc
7 changed files with 80 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/sp-sku-select-new/index.js
View File

@ -28,7 +28,10 @@ const initialState = {
num: 1, num: 1,
loading: false, loading: false,
isClickSku: false, isClickSku: false,
isClickNum: false isClickNum: false,
isClickPattern: false,
showClickPattern: false,
skuTxtArr: []
} }
function SpSkuSelect (props, ref) { function SpSkuSelect (props, ref) {
@ -44,7 +47,7 @@ function SpSkuSelect (props, ref) {
// console.log('SpSkuSelect:info', info) // console.log('SpSkuSelect:info', info)
// const [state, setState] = useImmer(initialState) // const [state, setState] = useImmer(initialState)
const [state, setState] = useAsyncCallback(initialState) const [state, setState] = useAsyncCallback(initialState)
const { selection, curImage, disabledSet, curItem, skuText, num, loading, isClickSku } = state const { selection, curImage, disabledSet, curItem, skuText, num, loading, isClickSku, showClickPattern, skuTxtArr } = state
const dispatch = useDispatch() const dispatch = useDispatch()
const skuDictRef = useRef({}) const skuDictRef = useRef({})
@ -67,7 +70,8 @@ function SpSkuSelect (props, ref) {
if (a?.skuValue.length > 0 && b?.skuValue.length > 0 && c?.skuValue.length > 0) { if (a?.skuValue.length > 0 && b?.skuValue.length > 0 && c?.skuValue.length > 0) {
const key = [a.skuValue[0].specId, b.skuValue[0].specId, c.skuValue[0].specId].join('_') const key = [a.skuValue[0].specId, b.skuValue[0].specId, c.skuValue[0].specId].join('_')
const item = skuDictRef.current[key] const item = skuDictRef.current[key]
selItem = key && item && item.store > 0 && ['onsale'].includes(item.approveStatus) ? item : null // && item.store > 0
selItem = key && item && ['onsale'].includes(item.approveStatus) ? item : null
} }
} }
// 默认选中有库存并且前端可销售的sku // 默认选中有库存并且前端可销售的sku
@ -104,14 +108,14 @@ function SpSkuSelect (props, ref) {
for (let i = 0, l = skuList.length; i < l; i++) { for (let i = 0, l = skuList.length; i < l; i++) {
const { skuValue } = skuList[i] const { skuValue } = skuList[i]
if (i === 2) { // if (i === 2) {
for (let j = 0, k = skuValue.length; j < k; j++) { for (let j = 0, k = skuValue.length; j < k; j++) {
const id = skuValue[j].specId const id = skuValue[j].specId
if (!disabledSet.has(id) && !isNotDisabled(selection, i, id)) { if (!disabledSet.has(id) && !isNotDisabled(selection, i, id)) {
disabledSet.add(id) disabledSet.add(id)
}
} }
} }
// }
} }
// console.log( // console.log(
// 'skuDict:', // 'skuDict:',
@ -130,11 +134,19 @@ function SpSkuSelect (props, ref) {
? `已选择 ${curItem.specItem.map((item, index) => `${index === 1 ? item.specName.substr(0, 2) : item.specName}`).join(' ')}码` ? `已选择 ${curItem.specItem.map((item, index) => `${index === 1 ? item.specName.substr(0, 2) : item.specName}`).join(' ')}码`
: '请选择规格' : '请选择规格'
const _skuTxtArr = ['', '', '']
if (curItem) {
const name = curItem.specItem?.[0]?.specName
_skuTxtArr[0] = name ? name + ':' + curItem.itemBn : ''
_skuTxtArr[2] = name ? name + ':' + curItem.itemBnDetail : ''
}
setState((draft) => { setState((draft) => {
draft.selection = selection draft.selection = selection
draft.disabledSet = disabledSet draft.disabledSet = disabledSet
draft.curItem = curItem draft.curItem = curItem
draft.skuText = e === -1 ? '' : skuText draft.skuText = e === -1 ? '' : skuText
draft.skuTxtArr = _skuTxtArr
}) })
onChange(skuText, curItem, e === -1 ? 0 : e) onChange(skuText, curItem, e === -1 ? 0 : e)
@ -151,17 +163,30 @@ function SpSkuSelect (props, ref) {
_selection[idx] = specId _selection[idx] = specId
const key = _selection.join('_') const key = _selection.join('_')
const row = skuDictRef.current[key] || {} const row = skuDictRef.current[key] || {}
if (disabledSet.has(specId)) return if (row?.store <= 0) {
if (disabledSet.has(specId) && idx !== 2) return
setState((draft) => {
draft.selection[idx] = specId //null
draft.curImage = 1
})
return showToast('该规格库存为空')
}
if (!state.isClickNum) { if (!state.isClickNum) {
setState((draft) => { setState((draft) => {
draft.isClickNum = idx === 2 draft.isClickNum = idx === 2
}) })
} }
if (!state.isClickPattern) {
setState((draft) => {
draft.isClickPattern = idx === 1
})
}
setState( setState(
(draft) => { (draft) => {
draft.selection[idx] = specId //null draft.selection[idx] = specId //null
draft.curImage = 1 draft.curImage = 1
draft.isClickSku = draft.isClickNum ? row.store > 0 : idx === 2 draft.isClickSku = draft.isClickNum ? row.store > 0 : idx === 2
draft.showClickPattern = draft.isClickPattern ? row.store > 0 : idx === 1
}, },
(row) => { (row) => {
calcDisabled(row.selection, idx) calcDisabled(row.selection, idx)
@ -202,7 +227,7 @@ function SpSkuSelect (props, ref) {
const addToCart = async () => { const addToCart = async () => {
const { nospec } = info const { nospec } = info
if (!nospec && !curItem) { if ((!nospec && !curItem) || !isClickSku || !showClickPattern) {
showToast('请选择规格') showToast('请选择规格')
return return
} }
@ -224,7 +249,7 @@ function SpSkuSelect (props, ref) {
const fastBuy = async () => { const fastBuy = async () => {
const { nospec } = info const { nospec } = info
if ((!nospec && !curItem) || !isClickSku) { if ((!nospec && !curItem) || !isClickSku || !showClickPattern) {
showToast('请选择规格') showToast('请选择规格')
return return
} }
@ -362,6 +387,7 @@ function SpSkuSelect (props, ref) {
) )
} }
const txt = ['选择颜色', '', '选择尺码']
return ( return (
<View className='sp-sku-select'> <View className='sp-sku-select'>
{/* <SpFloatLayout {/* <SpFloatLayout
@ -391,9 +417,12 @@ function SpSkuSelect (props, ref) {
</View>} </View>}
<View className='sku-list'> <View className='sku-list'>
{info.skuList.map((item, index) => ( {info.skuList.map((item, index) => (
<View className='sku-group' key={`sku-group__${index}`}> <View className={classNames('sku-group', {
'mt30': index === 1
})} key={`sku-group__${index}`}>
{/* <View className='sku-name'>{item.skuName}</View> */} {/* <View className='sku-name'>{item.skuName}</View> */}
<View className='sku-values'> {index !== 1 && <View className="select-txt">{txt[index]}：{index === 2 ? isClickSku && skuTxtArr[index] : skuTxtArr[isClickSku ? 2 : index]}</View>}
<View className={classNames('sku-values')}>
{index === 0 && <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="sku-img-box"> {index === 0 && <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="sku-img-box">
{item.skuValue?.length > 0 && item.skuValue.map((spec, idx) => spec.specImgs.length > 0 && ( {item.skuValue?.length > 0 && item.skuValue.map((spec, idx) => spec.specImgs.length > 0 && (
<View <View
@ -411,11 +440,11 @@ function SpSkuSelect (props, ref) {
</ScrollView>} </ScrollView>}
{index > 0 && (item.skuValue.length > 0 ? item.skuValue.map((spec, idx) => ( {index > 0 && (item.skuValue.length > 0 ? item.skuValue.map((spec, idx) => (
<> <>
{index === 2 && disabledSet.has(spec.specId) ? null : <View {index === 2 && (showClickPattern && disabledSet.has(spec.specId)) ? null : <View
className={classNames('sku-btn btn-noac', { className={classNames('sku-btn btn-noac', {
'active': spec.specId == selection[index] && isClickSku, 'active': spec.specId == selection[index],
'btn-primary': index !== 2 ? spec.specId == selection[index] : spec.specId == selection[index] && isClickSku, 'btn-primary': index !== 2 ? index === 1 ? spec.specId == selection[index] && showClickPattern : spec.specId == selection[index] : spec.specId == selection[index] && isClickSku,
'disabled': disabledSet.has(spec.specId), 'disabled': index === 1 && disabledSet.has(spec.specId),
'sku-img': spec.specImgs.length > 0 'sku-img': spec.specImgs.length > 0
})} })}
onClick={handleSelectSku.bind(this, spec, index)} onClick={handleSelectSku.bind(this, spec, index)}
@ -432,7 +461,9 @@ function SpSkuSelect (props, ref) {
</View> </View>
))} ))}
{/* {!hideInputNumber && renderLimitTip()} */} {/* {!hideInputNumber && renderLimitTip()} */}
<View className="select">{skuText.split(' ').map((item, index) => <Text key={`sku-text__${index}`} style={{ marginRight: '14px' }}>{item}</Text>)}</View> <View className="select">
{/* {skuText.split(' ').map((item, index) => <Text key={`sku-text__${index}`} style={{ marginRight: '14px' }}>{item}</Text>)} */}
</View>
</View> </View>
{/* </SpFloatLayout> */} {/* </SpFloatLayout> */}
</View> </View>

14
src/components/sp-sku-select-new/index.scss
View File

@ -1,4 +1,5 @@
.sp-sku-select { .sp-sku-select {
margin-top: 20px;
.sku-info { .sku-info {
display: flex; display: flex;
.sku-image { .sku-image {
@ -43,7 +44,7 @@
.sku-list { .sku-list {
position: relative; position: relative;
padding: 0 30px; padding: 0 30px;
margin: 0; // margin-top: 20px;
// margin-top: 30px; // margin-top: 30px;
// margin-bottom: 100px; // margin-bottom: 100px;
.select { .select {
@ -54,7 +55,16 @@
} }
} }
.sku-group { .sku-group {
margin: 30px 0 0; margin: 10px 0 0;
&.mt30 {
margin-top: 30px;
}
.select-txt {
height: 24px;
line-height: 24px;
font-size: 24px;
margin-bottom: 14px;
}
} }
.buy-count { .buy-count {
margin-bottom: 20px; margin-bottom: 20px;

4
src/components/sp-sku-select/index.scss
View File

@ -41,8 +41,8 @@
} }
.sku-list { .sku-list {
margin-top: 30px; // margin-top: 30px;
margin-bottom: 100px; // margin-bottom: 100px;
} }
.sku-group { .sku-group {
margin-bottom: 20px; margin-bottom: 20px;

2
src/doc/goods.js
View File

@ -201,6 +201,8 @@ export const GOODS_INFO = {
specItems: ({ spec_items, is_point }) => { specItems: ({ spec_items, is_point }) => {
return pickBy(spec_items, { return pickBy(spec_items, {
approveStatus: 'approve_status', approveStatus: 'approve_status',
itemBn: ({ item_bn }) => item_bn ? item_bn.split('-')?.[0] : '',
itemBnDetail: 'item_bn',
specItem: ({ item_spec }) => { specItem: ({ item_spec }) => {
return pickBy(item_spec, { return pickBy(item_spec, {
specId: 'spec_value_id', specId: 'spec_value_id',

2
src/pages/cart/espier-checkout.scss
View File

@ -9,7 +9,7 @@ $margin24: 10px;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
background: #fff; background: #fff;
padding: 0 40px 90px 50px; padding: 10px 40px 90px 50px;
// height: 100%; // height: 100%;
&__total { &__total {
white-space: nowrap; white-space: nowrap;

2
src/pages/index.js
View File

@ -551,7 +551,7 @@ function Home () {
</ScrollView> </ScrollView>
</View>)} </View>)}
</>} </>}
{isUpOperation && showRecommend && <View className="brand" style={{ padding: '15px', height: '550px' }}> {false && isUpOperation && showRecommend && <View className="brand" style={{ padding: '15px', height: '550px' }}>
<View className="brand-title">品牌介绍</View> <View className="brand-title">品牌介绍</View>
<ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="brand-img" style={{ height: '220px' }}> <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="brand-img" style={{ height: '220px' }}>
<View className="brand-img-left brand-img-item" style={{ marginRight: '8px' }}> <View className="brand-img-left brand-img-item" style={{ marginRight: '8px' }}>

21
src/pages/recommend/list.js
View File

@ -47,6 +47,7 @@ export default class RecommendList extends Component {
shareInfo: {}, shareInfo: {},
isSpAddressOpened: false, isSpAddressOpened: false,
play: false, play: false,
windowWidth: 750,
page: { page: {
isLoading: true isLoading: true
} }
@ -578,10 +579,12 @@ export default class RecommendList extends Component {
query, query,
isShowSearch, isShowSearch,
isSpAddressOpened, isSpAddressOpened,
play play,
} = this.state } = this.state
const { colors } = this.props const { colors } = this.props
let address = info.province + info.city let address = info.province + info.city
const windowWidth = Taro.getSystemInfoSync().windowWidth
const height = windowWidth * 9 / 17
return ( return (
<SpPage renderFooter={<SpTabbar />} className='has-nav' title="" isBlack> <SpPage renderFooter={<SpTabbar />} className='has-nav' title="" isBlack>
@ -764,14 +767,14 @@ export default class RecommendList extends Component {
<View className="line"></View> <View className="line"></View>
</View> */} </View> */}
<View className="content-item"> <View className="content-item">
<SpImage height={400} width={750} mode="aspectFill" src='recommend/02.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/03.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/03.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/02.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/04.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/04.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/05.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/05.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/06.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/06.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/07.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/07.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/08.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/08.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
<SpImage height={400} width={750} mode="aspectFill" src='recommend/09.jpg' isShowMenuByLongpress={false} lazyLoad isNew /> <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/09.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
</View> </View>
</View> </View>
} }