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

2024-02-28 18:42:55 +08:00 · 2024-02-28 18:42:55 +08:00 · 15759db8bc
parent 1cc8f465a0
commit 15759db8bc
7 changed files with 80 additions and 34 deletions
--- a/src/components/sp-sku-select-new/index.js
+++ b/src/components/sp-sku-select-new/index.js
@ -28,7 +28,10 @@ const initialState = {
  num: 1,
  loading: false,
  isClickSku: false,
-  isClickNum: false
+  isClickNum: false,
+  isClickPattern: false,
+  showClickPattern: false,
+  skuTxtArr: []
 }

 function SpSkuSelect (props, ref) {
@ -44,7 +47,7 @@ function SpSkuSelect (props, ref) {
  // console.log('SpSkuSelect:info', info)
  // const [state, setState] = useImmer(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 skuDictRef = useRef({})

@ -67,7 +70,8 @@ function SpSkuSelect (props, ref) {
      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 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
@ -104,14 +108,14 @@ function SpSkuSelect (props, ref) {

    for (let i = 0, l = skuList.length; i < l; i++) {
      const { skuValue } = skuList[i]
-      if (i === 2) {
-        for (let j = 0, k = skuValue.length; j < k; j++) {
-          const id = skuValue[j].specId
-          if (!disabledSet.has(id) && !isNotDisabled(selection, i, id)) {
-            disabledSet.add(id)
-          }
+      // if (i === 2) {
+      for (let j = 0, k = skuValue.length; j < k; j++) {
+        const id = skuValue[j].specId
+        if (!disabledSet.has(id) && !isNotDisabled(selection, i, id)) {
+          disabledSet.add(id)
        }
      }
+      // }
    }
    // console.log(
    //   'skuDict:',
@ -130,11 +134,19 @@ function SpSkuSelect (props, ref) {
      ? `已选择 ${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) => {
      draft.selection = selection
      draft.disabledSet = disabledSet
      draft.curItem = curItem
      draft.skuText = e === -1 ? '' : skuText
+      draft.skuTxtArr = _skuTxtArr
    })

    onChange(skuText, curItem, e === -1 ? 0 : e)
@ -151,17 +163,30 @@ function SpSkuSelect (props, ref) {
    _selection[idx] = specId
    const key = _selection.join('_')
    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) {
      setState((draft) => {
        draft.isClickNum = idx === 2
      })
    }
+    if (!state.isClickPattern) {
+      setState((draft) => {
+        draft.isClickPattern = idx === 1
+      })
+    }
    setState(
      (draft) => {
        draft.selection[idx] = specId  //null
        draft.curImage = 1
        draft.isClickSku = draft.isClickNum ? row.store > 0 : idx === 2
+        draft.showClickPattern = draft.isClickPattern ? row.store > 0 : idx === 1
      },
      (row) => {
        calcDisabled(row.selection, idx)
@ -202,7 +227,7 @@ function SpSkuSelect (props, ref) {

  const addToCart = async () => {
    const { nospec } = info
-    if (!nospec && !curItem) {
+    if ((!nospec && !curItem) || !isClickSku || !showClickPattern) {
      showToast('请选择规格')
      return
    }
@ -224,7 +249,7 @@ function SpSkuSelect (props, ref) {

  const fastBuy = async () => {
    const { nospec } = info
-    if ((!nospec && !curItem) || !isClickSku) {
+    if ((!nospec && !curItem) || !isClickSku || !showClickPattern) {
      showToast('请选择规格')
      return
    }
@ -362,6 +387,7 @@ function SpSkuSelect (props, ref) {
    )
  }

+  const txt = ['选择颜色', '', '选择尺码']
  return (
    <View className='sp-sku-select'>
      {/* <SpFloatLayout
@ -391,9 +417,12 @@ function SpSkuSelect (props, ref) {
      </View>}
      <View className='sku-list'>
        {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-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">
                {item.skuValue?.length > 0 && item.skuValue.map((spec, idx) => spec.specImgs.length > 0 && (
                  <View
@ -411,11 +440,11 @@ function SpSkuSelect (props, ref) {
              </ScrollView>}
              {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', {
-                      'active': spec.specId == selection[index] && isClickSku,
-                      'btn-primary': index !== 2 ? spec.specId == selection[index] : spec.specId == selection[index] && isClickSku,
-                      'disabled': disabledSet.has(spec.specId),
+                      'active': spec.specId == selection[index],
+                      'btn-primary': index !== 2 ? index === 1 ? spec.specId == selection[index] && showClickPattern : spec.specId == selection[index] : spec.specId == selection[index] && isClickSku,
+                      'disabled': index === 1 && disabledSet.has(spec.specId),
                      'sku-img': spec.specImgs.length > 0
                    })}
                    onClick={handleSelectSku.bind(this, spec, index)}
@ -432,7 +461,9 @@ function SpSkuSelect (props, ref) {
          </View>
        ))}
        {/* {!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>
      {/* </SpFloatLayout> */}
    </View>
--- a/src/components/sp-sku-select-new/index.scss
+++ b/src/components/sp-sku-select-new/index.scss
@ -1,4 +1,5 @@
 .sp-sku-select {
+  margin-top: 20px;
  .sku-info {
    display: flex;
    .sku-image {
@ -43,7 +44,7 @@
  .sku-list {
    position: relative;
    padding: 0 30px;
-    margin: 0;
+    // margin-top: 20px;
    // margin-top: 30px;
    // margin-bottom: 100px;
    .select {
@ -54,7 +55,16 @@
    }
  }
  .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 {
    margin-bottom: 20px;
--- a/src/components/sp-sku-select/index.scss
+++ b/src/components/sp-sku-select/index.scss
@ -41,8 +41,8 @@
  }

  .sku-list {
-    margin-top: 30px;
-    margin-bottom: 100px;
+    // margin-top: 30px;
+    // margin-bottom: 100px;
  }
  .sku-group {
    margin-bottom: 20px;
--- a/src/doc/goods.js
+++ b/src/doc/goods.js
@ -201,6 +201,8 @@ export const GOODS_INFO = {
  specItems: ({ spec_items, is_point }) => {
    return pickBy(spec_items, {
      approveStatus: 'approve_status',
+      itemBn: ({ item_bn }) => item_bn ? item_bn.split('-')?.[0] : '',
+      itemBnDetail: 'item_bn',
      specItem: ({ item_spec }) => {
        return pickBy(item_spec, {
          specId: 'spec_value_id',
--- a/src/pages/cart/espier-checkout.scss
+++ b/src/pages/cart/espier-checkout.scss
@ -9,7 +9,7 @@ $margin24: 10px;
    justify-content: space-between;
    align-items: flex-end;
    background: #fff;
-    padding: 0 40px 90px 50px;
+    padding: 10px 40px 90px 50px;
    // height: 100%;
    &__total {
      white-space: nowrap;
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -551,7 +551,7 @@ function Home () {
            </ScrollView>
          </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>
          <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="brand-img" style={{ height: '220px' }}>
            <View className="brand-img-left brand-img-item" style={{ marginRight: '8px' }}>
--- a/src/pages/recommend/list.js
+++ b/src/pages/recommend/list.js
@ -47,6 +47,7 @@ export default class RecommendList extends Component {
      shareInfo: {},
      isSpAddressOpened: false,
      play: false,
+      windowWidth: 750,
      page: {
        isLoading: true
      }
@ -578,10 +579,12 @@ export default class RecommendList extends Component {
      query,
      isShowSearch,
      isSpAddressOpened,
-      play
+      play,
    } = this.state
    const { colors } = this.props
    let address = info.province + info.city
+    const windowWidth = Taro.getSystemInfoSync().windowWidth
+    const height = windowWidth * 9 / 17

    return (
      <SpPage renderFooter={<SpTabbar />} className='has-nav' title="" isBlack>
@ -764,14 +767,14 @@ export default class RecommendList extends Component {
              <View className="line"></View>
            </View> */}
              <View className="content-item">
-                <SpImage height={400} width={750} mode="aspectFill" src='recommend/02.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
-                <SpImage height={400} width={750} mode="aspectFill" src='recommend/03.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
-                <SpImage height={400} width={750} 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={400} width={750} 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={400} width={750} 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/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={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/04.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
+                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/05.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
+                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/06.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
+                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/07.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
+                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/08.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
+                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/09.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
              </View>
            </View>
          }