From 3621def2f533a8597b21b5e3914933984be1a8e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E9=BE=99?= Date: Wed, 24 Jan 2024 09:39:31 +0800 Subject: [PATCH] update --- src/assets/close.png | Bin 0 -> 509 bytes src/components/sp-default/index.js | 5 +- src/components/sp-goods-item/index.js | 47 +++--- src/components/sp-note/index.js | 12 +- src/components/sp-order-item/index.js | 27 +++- src/components/sp-order-item/index.scss | 39 +++-- src/components/sp-page/index.js | 11 +- src/components/sp-page/index.scss | 16 +- src/components/sp-price/index.js | 7 +- src/components/sp-sku-select-new/index.js | 75 ++++++--- src/components/sp-sku-select-new/index.scss | 76 +++++++-- src/components/sp-tabbar/index.scss | 17 ++ src/pages/cart/comps/comp-goodsitem.js | 49 +++--- src/pages/cart/comps/comp-goodsitem.scss | 53 ++++++- src/pages/cart/espier-index.config.js | 3 +- src/pages/cart/espier-index.js | 103 +++++++++--- src/pages/cart/espier-index.scss | 136 ++++++++++++++-- src/pages/category/comps/comp-series.js | 5 +- src/pages/index.js | 5 +- src/pages/item/comps/comp-buytoolbar.js | 8 +- src/pages/item/espier-detail.js | 128 ++++++++++++++- src/pages/item/espier-detail.scss | 144 +++++++++++++++-- src/pages/item/list.config.js | 2 +- src/pages/item/list.js | 1 + src/subpage/pages/trade/comps/detail-item.js | 30 ++-- .../pages/trade/comps/detail-item.scss | 12 +- src/subpage/pages/trade/comps/item.scss | 32 ++-- src/subpage/pages/trade/comps/new-item.js | 45 +++--- src/subpage/pages/trade/comps/new-item.scss | 50 ++++-- src/subpage/pages/trade/detail.config.js | 5 +- src/subpage/pages/trade/detail.js | 114 ++++++++++--- src/subpage/pages/trade/detail.scss | 150 +++++++++++++++--- src/subpage/pages/trade/list.js | 11 +- src/subpage/pages/trade/list.scss | 34 ++-- src/subpages/member/index.js | 7 +- src/subpages/member/index.scss | 3 +- 36 files changed, 1154 insertions(+), 308 deletions(-) create mode 100644 src/assets/close.png diff --git a/src/assets/close.png b/src/assets/close.png new file mode 100644 index 0000000000000000000000000000000000000000..394d244aa4cde1fdc5e84db92d28d311425aeabe GIT binary patch literal 509 zcmVPx$w@E}nR9HvVnLAFzFc3iBLd6Y$5-Ms$iNp!0SKI&&1UEp`oB)XuQBy$)djl#E z3|dQGV>#m)Z?aD9c-}lu{L73^o>?cH27RWCHG+bTiv^i=ht1K1=c1~qkH05%E9P57pc z6u>SKIZ#)J1z?we(h}R^(p`|*WC&^j9Wt96O|wZ4sK#sz z+hn_FF{-UuY3DZC!l4k+hG1ZNXrbev+tqE4|o>~R6Cb|OL^--ji$#e)^X1hEtughc;vt3>3jAhbg zR*breTzfdnw5t*%pxs>Lc5^k}&CiA|e&756yKnL - {type && } + {type && } {message} {children} diff --git a/src/components/sp-goods-item/index.js b/src/components/sp-goods-item/index.js index e3f86e9..08e3d4e 100755 --- a/src/components/sp-goods-item/index.js +++ b/src/components/sp-goods-item/index.js @@ -37,7 +37,10 @@ function SpGoodsItem (props) { showPrice = true, hideStore = false, renderBrand, - mode = 'scaleToFill' + mode = 'scaleToFill', + showSalePrice = true, + height = 310, + width = 310 } = props const [info, setInfo] = useState(props.info || null) const [current, setCurrent] = useState(0) @@ -102,7 +105,7 @@ function SpGoodsItem (props) { return ( - + NEW {/* {renderBrand && {renderBrand}} */} @@ -123,24 +126,26 @@ function SpGoodsItem (props) { {info.brief} {info.itemName} - - ¥ - {info.activityPrice || info.price} - - e.stopPropagation()}> - setMove(move > 1 ? move - 1 : 0)}> - { - console.log(e.detail.scrollLeft / 32) - // setMove(Math.floor(e.detail.scrollLeft / 32)) - }} scrollLeft={move * 32} scrollX scrollWithAnimation className='color-box' showScrollbar={false}> - {(info.colors || colors).map((item, index) => ( - setCurrent(index)}> - - - ))} - - setMove(move < (info.colors || colors).length - 2 ? move + 1 : move)}> - + {showSalePrice && <> + + ¥ + {info.activityPrice || info.price} + + e.stopPropagation()}> + setMove(move > 1 ? move - 1 : 0)}> + { + console.log(e.detail.scrollLeft / 32) + // setMove(Math.floor(e.detail.scrollLeft / 32)) + }} scrollLeft={move * 32} scrollX scrollWithAnimation className='color-box' showScrollbar={false}> + {(info.colors || colors).map((item, index) => ( + setCurrent(index)}> + + + ))} + + setMove(move < (info.colors || colors).length - 2 ? move + 1 : move)}> + + } {/* 促销活动标签 */} @@ -238,7 +243,7 @@ function SpGoodsItem (props) { )} - {renderFooter} + {renderFooter && {renderFooter}} {/* {info.brand && ( diff --git a/src/components/sp-note/index.js b/src/components/sp-note/index.js index 883418b..5d4dc9d 100755 --- a/src/components/sp-note/index.js +++ b/src/components/sp-note/index.js @@ -15,7 +15,9 @@ export default class SpNote extends Component { btnText: '', to: '', isUrl: true, - img: '' + img: '', + width: 292, + height: 224 } static options = { @@ -26,18 +28,18 @@ export default class SpNote extends Component { handleClick = () => { } - resolveUrl(img) { + resolveUrl (img) { return `/assets/imgs/${img}` } - render() { - const { icon, className, title, button, value, btnText, to, isUrl, img } = this.props + render () { + const { icon, className, title, button, value, btnText, to, isUrl, img, width, height } = this.props return ( {/* {icon && } */} {img && ( - + )} {title || this.props.children} {button && to && ( diff --git a/src/components/sp-order-item/index.js b/src/components/sp-order-item/index.js index c6dc3ba..d894f30 100755 --- a/src/components/sp-order-item/index.js +++ b/src/components/sp-order-item/index.js @@ -5,14 +5,14 @@ import { View, Text, Image } from '@tarojs/components' import { SpPage, SpPrice, SpImage, SpPoint } from '@/components' import './index.scss' -function SpOrderItem(props) { +function SpOrderItem (props) { const { payType = '', showExtra = true, info = null, isPointitemGood = false, isShowPointTag = false, - onClick = () => {}, + onClick = () => { }, customFooter, showDesc, renderDesc, @@ -24,16 +24,31 @@ function SpOrderItem(props) { const { market_price: enMarketPrice } = order_page if (!info) return null + const desc = info.item_spec_desc + let desc_info = '' + if (desc) { + try { + const descArr = desc.split(',') + descArr.forEach((item, index) => { + let [_, value] = item.split(':') + if (index === 1) { + value = value.substring(0, 2) + } + desc_info += value + ' ' + }) + } catch (error) { + } + } const showExtraComp = () => { if (showExtra) { return ( {info.goods_props} - {info.num && 数量：{info.num}} {info.item_spec_desc && ( - {info.item_spec_desc} + {desc_info || info.item_spec_desc} )} + {info.num && 数量：{info.num}} ) } @@ -41,7 +56,7 @@ function SpOrderItem(props) { const img = info.pic_path ? info.pic_path : Array.isArray(info.pics) ? info.pics[0] : info.pics - console.log('order item info:', info) + // console.log('order item info:', info) return ( @@ -79,7 +94,7 @@ function SpOrderItem(props) { /> ) : ( - + {/* {info.market_price > 0 && enMarketPrice && ( )} */} diff --git a/src/components/sp-order-item/index.scss b/src/components/sp-order-item/index.scss index 41d6914..1e1a700 100755 --- a/src/components/sp-order-item/index.scss +++ b/src/components/sp-order-item/index.scss @@ -4,23 +4,36 @@ display: flex; align-items: flex-start; padding: $edge-size; + &__extra { + width: 450px; + font-size: 20px; + line-height: 1; + color: #000; + opacity: 0.85; + } &__hd { - margin-right: 20px; + margin-right: 60px; } &__bd { - width: 50%; - margin-bottom: 40px; + width: 38%; + // margin-bottom: 40px; + padding: 20px 0; position: relative; + font-size: 20px; + line-height: 1; + box-sizing: border-box; } &__ft { flex: 1; text-align: right; - font-size: $font-size-small; + padding-top: 10px; + // font-size: $font-size-small; } &__title { // font-size: floor(0.95 * $font-size); @include multi-ellipsis(1); - line-height: 1.4; + margin-bottom: 26px; + color: #000; // margin: 0 0 15px; &-tag { display: inline-block; @@ -32,16 +45,17 @@ } } &__desc { - color: $color-gray; - font-size: $font-size-small; + // color: $color-gray; + // font-size: $font-size-small; // margin-bottom: 10px; } &__spec { - color: $color-gray; - font-size: $font-size-small; + // color: $color-gray; + // font-size: $font-size-small; max-width: 90%; min-width: 100px; display: inline-block; + opacity: 0.85; @include text-overflow(); } &__price { @@ -52,7 +66,8 @@ } &__num { display: block; - color: $color-gray; + margin-top: 26px; + // color: $color-gray; } &__pay-type { display: block; @@ -60,4 +75,8 @@ font-size: 20px; color: #c1c1c1; } + .sp-price__symbol, + .sp-price__int { + font-weight: bold !important; + } } diff --git a/src/components/sp-page/index.js b/src/components/sp-page/index.js index 47ad69e..cc61115 100755 --- a/src/components/sp-page/index.js +++ b/src/components/sp-page/index.js @@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux' import Taro, { useDidShow, usePageScroll, getCurrentInstance, useReady } from '@tarojs/taro' import { View, Text, Image } from '@tarojs/components' import { useImmer } from 'use-immer' -import { SpNavBar, SpFloatMenuItem, SpNote, SpLoading, SpImage } from '@/components' +import { SpNavBar, SpFloatMenuItem, SpNote, SpLoading, SpImage, SpChat } from '@/components' import { TABBAR_PATH } from '@/consts' import { classNames, styleNames, hasNavbar, isWeixin, isAlipay, isGoodsShelves, entryLaunch, isObject } from '@/utils' import { AtBadge } from 'taro-ui' @@ -26,6 +26,7 @@ const initialState = { function SpPage (props, ref) { const $instance = getCurrentInstance() const [state, setState] = useImmer(initialState) + const { cartCount = 0 } = useSelector((state) => state.cart) const { lock, lockStyle, pageTitle, isTabBarPage, customNavigation, cusCurrentPage, showLeftContainer, currentPath, showCustomNavigation, showNavCartIcon } = state const { className, @@ -50,6 +51,7 @@ function SpPage (props, ref) { showNavLogo = true, showNavkfIcon = false, showNavHomeIcon = false, + showNavSearchIcon = false, } = props let { renderTitle } = props const wrapRef = useRef(null) @@ -290,7 +292,7 @@ function SpPage (props, ref) { /> } {/* */} - {showCustomNavigation ? + {showCustomNavigation ? Taro.navigateTo({ url: '/pages/item/list' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew /> : - {showNavCartIcon && Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew />} + {showNavCartIcon && Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew />} {showNavHomeIcon && Taro.redirectTo({ url: '/pages/index' })} height={36} mode='heightFix' isNew />} + {showNavSearchIcon && Taro.navigateTo({ url: '/pages/item/list' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />} } - {showNavkfIcon && Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew />} + {showNavkfIcon && Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew />} } {isWeixin && diff --git a/src/components/sp-page/index.scss b/src/components/sp-page/index.scss index 70a0898..6cd4293 100755 --- a/src/components/sp-page/index.scss +++ b/src/components/sp-page/index.scss @@ -108,6 +108,20 @@ .icon-kf { margin-left: 40px; } + .at-badge { + &__num { + font-size: 14px; + width: 24px; + height: 24px; + line-height: 24px; + top: -6px; + right: 4px; + padding: 0; + border-radius: 50%; + overflow: hidden; + text-align: center; + } + } } .icon-wrap { // width: 56px; @@ -191,7 +205,7 @@ // background: #a0a0a0; } .title-container { - color: #333; + color: #000; } .custom-status-bar { background: #fff; diff --git a/src/components/sp-price/index.js b/src/components/sp-price/index.js index 0d40bb6..732e2e8 100755 --- a/src/components/sp-price/index.js +++ b/src/components/sp-price/index.js @@ -34,7 +34,8 @@ export default class SpPrice extends Component { appendText, lineThrough, plus, - size + size, + showSeparator = false } = this.props let _value = value if (isString(value)) { @@ -78,13 +79,13 @@ export default class SpPrice extends Component { fontSize: `${size}rpx` })} > - {int.indexOf('-') === 0 ? int.slice(1) : int} + {showSeparator ? parseInt(int).toLocaleString() : int.indexOf('-') === 0 ? int.slice(1) : int} {decimal !== undefined && !noDecimal && ( .{decimal} diff --git a/src/components/sp-sku-select-new/index.js b/src/components/sp-sku-select-new/index.js index b73eb4e..21c660d 100755 --- a/src/components/sp-sku-select-new/index.js +++ b/src/components/sp-sku-select-new/index.js @@ -1,8 +1,8 @@ -import React, { useEffect, useRef } from 'react' +import React, { useEffect, useImperativeHandle, useRef } from 'react' import { useSelector, useDispatch } from 'react-redux' import Taro from '@tarojs/taro' import { AtButton } from 'taro-ui' -import { View, Text } from '@tarojs/components' +import { View, Text, ScrollView } from '@tarojs/components' import { useImmer } from 'use-immer' import { SpFloatLayout, @@ -38,7 +38,7 @@ const initialState = { loading: false } -function SpSkuSelect (props) { +function SpSkuSelect (props, ref) { const { info, open = true, @@ -47,7 +47,7 @@ function SpSkuSelect (props) { type, hideInputNumber = false } = props - console.log('SpSkuSelect:info', info) + // console.log('SpSkuSelect:info', info) // const [state, setState] = useImmer(initialState) const [state, setState] = useAsyncCallback(initialState) const { selection, curImage, disabledSet, curItem, skuText, num, loading } = state @@ -62,8 +62,6 @@ function SpSkuSelect (props) { const init = () => { const { skuList, specItems } = info - console.log('skuList:', skuList) - console.log('specItems:', specItems) specItems.forEach((item) => { const key = item.specItem.map((spec) => spec.specId).join('_') skuDictRef.current[key] = item @@ -104,18 +102,21 @@ function SpSkuSelect (props) { } } } - console.log( - 'skuDict:', - skuDictRef.current, - 'selection:', - selection, - 'disabledSet:', - disabledSet - ) + // console.log( + // 'skuDict:', + // skuDictRef.current, + // 'selection:', + // selection, + // 'disabledSet:', + // disabledSet + // ) const curItem = skuDictRef.current[selection.join('_')] + // const skuText = curItem + // ? `已选：${curItem.specItem.map((item) => `${item.skuName}:${item.specName}`).join(',')}` + // : '请选择规格' const skuText = curItem - ? `已选：${curItem.specItem.map((item) => `${item.skuName}:${item.specName}`).join(',')}` + ? `已选择 ${curItem.specItem.map((item, index) => `${index === 1 ? item.specName.substr(0, 2) : item.specName}`).join(' ')}码` : '请选择规格' setState((draft) => { @@ -136,11 +137,11 @@ function SpSkuSelect (props) { if (disabledSet.has(specId)) return setState( (draft) => { - draft.selection[idx] = selection[idx] == specId ? null : specId + draft.selection[idx] = selection[idx] == specId ? specId : specId //null draft.curImage = 1 }, - ({ selection }) => { - calcDisabled(selection) + (row) => { + calcDisabled(row.selection) } ) } @@ -175,7 +176,6 @@ function SpSkuSelect (props) { } const { skuList } = info - console.log("🚀 ~ skuList:", skuList) const addToCart = async () => { const { nospec } = info @@ -234,6 +234,14 @@ function SpSkuSelect (props) { }) } + useImperativeHandle(ref, () => { + return { + fastBuy, + addToCart, + getImgs + } + }) + const renderFooter = () => { let btnTxt = '' Object.keys(BUY_TOOL_BTNS).forEach((key) => { @@ -362,26 +370,43 @@ function SpSkuSelect (props) { {/* {item.skuName} */} - {item.skuValue.map((spec, idx) => ( + {index === 0 && + {item.skuValue?.length > 0 && item.skuValue.map((spec, idx) => spec.specImgs.length > 0 && ( + + + + ) + )} + } + {index > 0 && item.skuValue.map((spec, idx) => ( 0 })} onClick={handleSelectSku.bind(this, spec, index)} key={`sku-values-item__${idx}`} > - {spec.specImgs.length > 0 && ( + {/* {spec.specImgs.length > 0 && ( - )} - {index !== 0 && {spec.specName}} + )} */} + {spec.specName} ))} ))} {!hideInputNumber && renderLimitTip()} + {skuText} {/* */} @@ -392,4 +417,4 @@ SpSkuSelect.options = { addGlobalClass: true } -export default SpSkuSelect +export default React.forwardRef(SpSkuSelect) diff --git a/src/components/sp-sku-select-new/index.scss b/src/components/sp-sku-select-new/index.scss index 338fb9a..4e05b55 100755 --- a/src/components/sp-sku-select-new/index.scss +++ b/src/components/sp-sku-select-new/index.scss @@ -41,12 +41,20 @@ } .sku-list { + position: relative; padding: 0 30px; + margin: 0; // margin-top: 30px; // margin-bottom: 100px; + .select { + position: absolute; + top: 156px; + right: 100px; + font-size: 22px; + } } .sku-group { - margin-bottom: 20px; + margin: 30px 0 0; } .buy-count { margin-bottom: 20px; @@ -70,23 +78,48 @@ .sku-values { display: flex; flex-wrap: wrap; - margin-top: 20px; + margin-top: 0px !important; .spec-name { display: block; // max-width: 260px; // @include text-overflow(); } + .sku-img-box { + width: 100%; + white-space: nowrap; + .sku-btn { + display: inline-block; + margin: 0 20px 0 0; + padding: 0; + background: #fff; + height: 90rpx; + overflow: hidden; + box-sizing: border-box; + // border: none; + &:last-child { + margin-right: 0; + } + .sp-image { + margin: auto 0; + display: inline-block; + box-sizing: border-box; + &-img { + display: inline-block; + } + } + } + } } .sku-btn { - padding: 0 16px; + padding: 16px 10px; // height: 60px; // line-height: 60px; - background: #f5f5f5; + background: #fff; /* prettier-ignore */ - border: 1PX solid #f5f5f5; - border-radius: 4px; - margin: 0 24px 24px 0; - color: #222; + border: 1PX solid #fff; + border-radius: 8px; + margin: 0 20px 20px 0; + color: #333; box-sizing: border-box; &.sku-img { padding: 0; @@ -105,14 +138,31 @@ margin: 8px 0; } } - &.active { - background: #fff; + &.btn-noac { /* prettier-ignore */ - border: 1PX solid var(--color-primary); - color: var(--color-primary); + border: 1PX solid #BCBCBC; + color: #222; + } + &.btn-primary { + background: var(--color-primary); + color: #fff; + } + .spec-name { + font-size: 22px; + line-height: 1; + &.pad { + padding: 0 4px; + } + } + &.active { + // background: #fff; + /* prettier-ignore */ + border: 1PX solid #BCBCBC; + // color: var(--color-primary); } &.disabled { - color: #cdcdcd; + color: #bcbcbc; + opacity: 0.7; } } diff --git a/src/components/sp-tabbar/index.scss b/src/components/sp-tabbar/index.scss index a992719..de50371 100755 --- a/src/components/sp-tabbar/index.scss +++ b/src/components/sp-tabbar/index.scss @@ -18,4 +18,21 @@ height: 54px !important; } } + .at-tab-bar__item { + .at-badge { + &__num { + font-size: 16px; + width: 26px; + height: 26px; + line-height: 26px; + top: -4px; + right: 8px; + padding: 0; + border-radius: 50%; + overflow: hidden; + text-align: center; + padding-left: 2px; + } + } + } } diff --git a/src/pages/cart/comps/comp-goodsitem.js b/src/pages/cart/comps/comp-goodsitem.js index f1d1d0a..2c6f357 100755 --- a/src/pages/cart/comps/comp-goodsitem.js +++ b/src/pages/cart/comps/comp-goodsitem.js @@ -10,16 +10,17 @@ import './comp-goodsitem.scss' const initialState = { localNum: 0 } -function CompGoodsItem(props) { +function CompGoodsItem (props) { const { info, children, isShowAddInput = true, isShowDeleteIcon = true, goodType, - onDelete = () => {}, - onChange = () => {}, - onClickImgAndTitle = () => {} + onDelete = () => { }, + onChange = () => { }, + onClickImgAndTitle = () => { }, + onChangeGoodsIsCheck = () => { } } = props const { priceSetting } = useSelector((state) => state.sys) const { userInfo = {}, vipInfo = {} } = useSelector((state) => state.user) @@ -46,6 +47,7 @@ function CompGoodsItem(props) { } const { price, activity_price, member_price, package_price } = info + console.log("🚀 ~ info:", info) let _price if (!isNaN(activity_price)) { _price = activity_price @@ -77,19 +79,21 @@ function CompGoodsItem(props) { className='comp-goodsitem-image' mode='aspectFill' src={info.pics} - width={180} - height={180} + width={150} + height={150} /> - + {/* {info.activity_type == 'package' && 组合商品} */} {info.is_plus_buy && 加价购} {info.item_name} {isShowDeleteIcon && ( - onDelete(info)}> + // onDelete(info)}> + onDelete(info)}> + )} @@ -115,24 +119,29 @@ function CompGoodsItem(props) { - - + + 数量： + {isShowAddInput ? ( + + ) : ( + x {info.num} + )} + + {info.market_price > 0 && enMarketPrice && ( )} - {isShowAddInput ? ( - - ) : ( - x {info.num} - )} + + + diff --git a/src/pages/cart/comps/comp-goodsitem.scss b/src/pages/cart/comps/comp-goodsitem.scss index ed3fc54..9df38c2 100755 --- a/src/pages/cart/comps/comp-goodsitem.scss +++ b/src/pages/cart/comps/comp-goodsitem.scss @@ -1,7 +1,10 @@ .comp-goodsitem { display: flex; + font-size: 26px; + line-height: 1; + color: #000; &-hd { - margin-right: 20px; + margin-right: 40px; } &-bd { flex: 1; @@ -15,16 +18,49 @@ display: flex; justify-content: space-between; align-items: center; + position: relative; + padding-bottom: 26px; + font-weight: bold; + // @include multi-ellipsis(2) + .del-btn { + padding: 14px; + position: absolute; + right: 0px; + top: -28rpx; + .del-icon { + width: 22px; + height: 22px; + } + } } .item-ft { // position: absolute; // bottom: 0; // left: 0; // right: 0; + margin-top: 26px; .goods-price-wrap { display: flex; align-items: center; + width: 100%; + justify-content: space-between; + .num-box { + font-size: 20px; + opacity: 0.9; + display: flex; + align-items: center; + .at-input-number { + height: 30px; + &__input { + top: -8px; + width: 36px; + } + &__btn { + width: 30px; + } + } + } } .mkt-price { margin-left: 8px; @@ -36,6 +72,11 @@ display: flex; justify-content: space-between; align-items: center; + margin-bottom: 26px; + } + .item-fd-hd { + text-align: end; + font-weight: bold; } .vip-grade { /* prettier-ignore */ @@ -99,11 +140,11 @@ } } .spec-desc { - background-color: #f5f5f5; - font-size: 24px; - color: #999; - padding: 5px 13px; - max-width: 300px; + font-size: 20px; + color: #000; + opacity: 0.8; + // padding: 5px 13px; + max-width: 400px; min-width: 100px; display: inline-block; @include text-overflow(); diff --git a/src/pages/cart/espier-index.config.js b/src/pages/cart/espier-index.config.js index dd6bc77..b31855c 100755 --- a/src/pages/cart/espier-index.config.js +++ b/src/pages/cart/espier-index.config.js @@ -1,3 +1,4 @@ export default { - navigationBarTitleText: '购物车' + navigationBarTitleText: '', + navigationStyle: 'custom', } diff --git a/src/pages/cart/espier-index.js b/src/pages/cart/espier-index.js index 55bdc32..d26eb0d 100755 --- a/src/pages/cart/espier-index.js +++ b/src/pages/cart/espier-index.js @@ -1,7 +1,7 @@ import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro' import React, { useEffect, useState, useMemo } from 'react' import { useSelector, useDispatch } from 'react-redux' -import { View, Text } from '@tarojs/components' +import { View, Text, ScrollView } from '@tarojs/components' import { AtButton } from 'taro-ui' import { useImmer } from 'use-immer' import qs from 'qs' @@ -18,7 +18,9 @@ import { SpLogin, SpDefault, SpCheckboxNew, - SpPrivacyModal + SpPrivacyModal, + SpImage, + SpGoodsItem } from '@/components' import CompGoodsItem from './comps/comp-goodsitem' @@ -52,7 +54,7 @@ function CartIndex () { const { current, recommendList, policyModal } = state const { colorPrimary, openRecommend } = useSelector((state) => state.sys) - const { validCart = [], invalidCart = [] } = useSelector((state) => state.cart) + const { validCart = [], invalidCart = [], cartCount } = useSelector((state) => state.cart) const { tabbar = 1 } = router?.params || {} // useDepChange(() => { @@ -70,8 +72,8 @@ function CartIndex () { const fetch = () => { if (openRecommend == 1) { - getRecommendList() // 猜你喜欢 } + getRecommendList() // 猜你喜欢 if (isLogin) { getCartList() } @@ -164,6 +166,7 @@ function CartIndex () { page: 1, pageSize: 1000 }) + console.log("🚀 ~ list:----169", list) setState((draft) => { draft.recommendList = list }) @@ -254,7 +257,13 @@ function CartIndex () { } const groupsList = resolveActiveGroup() - console.log(groupsList, 'list') + + const handleClickStore = (item) => { + const url = `/subpages/store/index?id=${item.distributor_info?.distributor_id || item.goods_id}` + Taro.navigateTo({ + url + }) + } return ( } + showNavLogo isBlack showNavkfIcon > - {!isLogin && ( + {/* {!isLogin && ( 授权登录后同步购物车的商品 { }}> 授权登录 - )} + )} */} {isLogin && ( {/* */} @@ -281,8 +291,11 @@ function CartIndex () { return ( - - {all_item.shop_name || '自营'} + {/* */} + {/* {all_item.shop_name || '自营'} */} + 购物车 + {/* 共{all_item.cart_total_num}件 */} + 共{cartCount}件 {/** 店铺商品开始 */} @@ -338,6 +351,7 @@ function CartIndex () { info={c_sitem} onDelete={onDeleteCartGoodsItem.bind(this, c_sitem)} onChange={onChangeCartGoodsItem.bind(this, c_sitem)} + onChangeGoodsIsCheck={onChangeGoodsIsCheck.bind(this, c_sitem, 'single', !c_sitem.is_checked)} onClickImgAndTitle={onClickImgAndTitle.bind(this, c_sitem)} /> @@ -382,12 +396,14 @@ function CartIndex () { label='全选' onChange={onChangeGoodsIsCheck.bind(this, all_item, 'all')} /> + {/* 共{all_item.cart_total_num}件 */} + 共{cartCount}件 - 合计： - + {/* 合计： */} + {all_item.discount_fee > 0 && ( @@ -402,11 +418,10 @@ function CartIndex () { handleCheckout(all_item)} > - 结算({all_item.cart_total_num}) + 立即结算 @@ -443,13 +458,65 @@ function CartIndex () { )} {validCart.length == 0 && invalidCart.length == 0 && ( - - - 去选购 - - + + {/* + + 去选购 + + */} + + 购物车还是空的 + 快去挑选自己喜欢的宝贝吧~ + { }}> + + 前往选购 + + + + )} + {false && + {validCart.length == 0 && invalidCart.length == 0 ? '商品推荐' : '专属推荐'} + + {[ + { + brief: "副标题", + itemName: "测试商品1", + price: "1099", + goods_id: 6, + pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c9xHQuJ96YIcZWtjRS0HBCTzp7dzXIs2pl' + }, + { + brief: "副标题", + itemName: "测试商品2", + price: "1099", + goods_id: 6, + pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/801c18d59d95ea26930fefc43bf66febTQjxb65cpnCqVLaOsYmiHdkDdYqBnXVm' + }, + { + brief: "副标题", + itemName: "测试商品3", + price: "1099", + goods_id: 6, + pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c90XruENsSSAhRiz0HPI3PjR8XQNVgbxHb' + }, + ].map((item, idx) => ( + + + + ))} + + } + {/* 猜你喜欢 */} diff --git a/src/pages/cart/espier-index.scss b/src/pages/cart/espier-index.scss index dd78b2c..dca6f3f 100755 --- a/src/pages/cart/espier-index.scss +++ b/src/pages/cart/espier-index.scss @@ -1,5 +1,6 @@ .page-cart-index { &.has-tabbar { + // padding-bottom: calc(#{$tabbar-height} + 140px); padding-bottom: $tabbar-height; } .login-header { @@ -30,19 +31,31 @@ } .shop-cart-item { padding: 0 16px; - margin-top: 40px; + margin-top: 10px; /* #ifdef alipay */ margin-top: 0; padding-top: 40px; /* #endif */ + margin-bottom: 36px; &-shadow { - box-shadow: 0px 2px 10px 0px #eae7e0; + // box-shadow: 0px 2px 10px 0px #eae7e0; } &-hd { - font-size: 30px; - color: #333; + font-size: 40px; + color: #000; font-weight: bold; - margin-bottom: 10px; + margin-bottom: 40px; + line-height: 1; + display: flex; + align-items: baseline; + padding-left: 6px; + .total { + font-size: 26px; + margin-left: 20px; + line-height: 1; + font-weight: normal; + // color: #999; + } } &-bd { background: #fff; @@ -52,15 +65,45 @@ display: flex; justify-content: space-between; align-items: center; - padding: 20px; + padding: 26px 40px 26px 60px; + position: fixed; + bottom: calc(#{$page-ipx-footer-height} - 2px); + z-index: 1080; + left: 0; + right: 0; + border-top: 1px solid #d9d9d9; + border-bottom: 1px solid #d9d9d9; + .lf { + display: flex; + align-items: flex-end; + .sp-checkbox-new { + align-items: flex-end; + .icon-my { + font-size: 32px; + color: #000; + } + } + .total-num { + font-size: 26px; + margin-left: 20px; + } + } .rg { display: flex; align-items: center; .total-pirce { font-size: 40px; + font-weight: bold; + .sp-price__int { + margin-left: 8px; + } } .btn-calc { - margin-left: 16px; + margin-left: 30px; + height: 74px; + line-height: 72px; + padding: 0px 28px; + border-radius: 6px; } } } @@ -111,10 +154,21 @@ } .cart-item-wrap { - padding: 16px; + padding: 60px 36px; display: flex; align-items: center; + background: #f7f7f7; + margin-bottom: 10px; + border-radius: 6px; + box-sizing: border-box; // justify-content: space-around; + .sp-checkbox-new { + .icon-my { + font-size: 24px; + margin-right: 10px; + color: #000; + } + } } .cart-item-warp-disabled { padding: 16px; @@ -131,16 +185,16 @@ .cart-goods-item, .comp-goodsitem { flex: 1; - width: 620px; + width: 590px; } .at-input-number { - border: 1PX solid #999; + border: 1px solid #999; border-radius: 0; height: 40px; &__input { /* prettier-ignore */ border-left: 1PX solid #999; - border-right: 1PX solid #999; + border-right: 1px solid #999; width: 60px; height: 32px; line-height: 32px; @@ -238,4 +292,64 @@ .sp-goods-item { border-radius: 2px; } + .empty-box { + padding-top: 90px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + .sp-image { + margin-bottom: 50px; + } + .at-button { + border-radius: 6px; + line-height: 1; + padding: 28px 82px; + height: auto; + font-size: 26px; + } + &-tit { + font-size: 30px; + color: #000; + } + &-sub-tit { + font-size: 22px; + color: #7f7f7f; + margin: 20px 0 40px; + } + .gap { + width: 100%; + height: 20px; + background: #f5f5f5; + margin-top: 90px; + } + } + .bottom-box { + margin-bottom: 50px; + &-tit { + font-size: 30px; + color: #000; + padding-left: 44px; + padding-top: 30px; + font-weight: 500; + line-height: 1; + } + .shop-box { + height: 466px; + width: 100%; + padding: 30px 30px 30px; + box-sizing: border-box; + transition: height 0.2s linear 0.2s; + white-space: nowrap; + .goods-item-wrap { + display: inline-block; + width: 250px; + height: 100%; + margin-right: 30px; + &:last-child { + margin-right: 0; + } + } + } + } } diff --git a/src/pages/category/comps/comp-series.js b/src/pages/category/comps/comp-series.js index acdc5c7..d1dd776 100755 --- a/src/pages/category/comps/comp-series.js +++ b/src/pages/category/comps/comp-series.js @@ -20,7 +20,7 @@ const CompSeries = (props) => { const handleClickItem = (item) => { const { category_id, main_category_id } = item - let url = '' + let url = '/pages/item/list' if (category_id) { url = `/pages/item/list?cat_id=${category_id}` } @@ -62,7 +62,8 @@ const CompSeries = (props) => { const renderCategoryChildHandler = (item = selChild) => { return ( - false && handleCustomClick(item.category_id)}> + {/* handleCustomClick(item.category_id) */} + handleClickItem(item)}> 探索全部 diff --git a/src/pages/index.js b/src/pages/index.js index f714079..cdecd71 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -18,7 +18,8 @@ import { SpCouponPackage, SpNavBar, SpImage, - SpGoodsItem + SpGoodsItem, + SpChat } from '@/components' import api from '@/api' import { @@ -429,7 +430,7 @@ function Home () { ))} } {isUpOperation && - + } {isUpOperation && diff --git a/src/pages/item/comps/comp-buytoolbar.js b/src/pages/item/comps/comp-buytoolbar.js index a0e712e..600fe83 100755 --- a/src/pages/item/comps/comp-buytoolbar.js +++ b/src/pages/item/comps/comp-buytoolbar.js @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import { useSelector, useDispatch } from 'react-redux' import Taro, { getCurrentInstance } from '@tarojs/taro' import { View, Text } from '@tarojs/components' -import { SpImage, SpLogin } from '@/components' +import { SpImage, SpLogin, SpChat } from '@/components' import { classNames, navigateTo, showToast, isWeb } from '@/utils' import { addCart } from '@/store/slices/cart' import { BUY_TOOL_BTNS, ACTIVITY_LIST } from '@/consts' @@ -86,11 +86,11 @@ function CompGoodsBuyToolbar (props) { } RenderBtns() - console.log('btns:', btns) + // console.log('btns:', btns) const onChangeLogin = async ({ key }) => { const { dtid, card_id, user_card_id } = $instance.router.params - console.log('onChangeLogin:', key) + // console.log('onChangeLogin:', key) if (key == 'notice') { const { subscribe } = info if (subscribe) return false @@ -149,7 +149,7 @@ function CompGoodsBuyToolbar (props) { return ( - + {/* diff --git a/src/pages/item/espier-detail.js b/src/pages/item/espier-detail.js index f2e069a..84ea10b 100755 --- a/src/pages/item/espier-detail.js +++ b/src/pages/item/espier-detail.js @@ -8,7 +8,7 @@ import Taro, { } from '@tarojs/taro' import { View, Text, Swiper, SwiperItem, Video, Canvas, ScrollView } from '@tarojs/components' import { useImmer } from 'use-immer' -import { AtCountdown } from 'taro-ui' +import { AtCountdown, AtAccordion, AtIcon } from 'taro-ui' import { SpPrice, SpCell, @@ -22,7 +22,8 @@ import { SpLogin, SpFloatMenuItem, SpChat, - SpGoodsPrice + SpGoodsPrice, + SpGoodsItem } from '@/components' import api from '@/api' import req from '@/api/req' @@ -94,7 +95,8 @@ const initialState = { curItem: null, recommendList: [], showSaleTotal: false, - showSku: true + showSku: true, + isOpen: false, } function EspierDetail (props) { @@ -107,6 +109,7 @@ function EspierDetail (props) { const { colorPrimary, openRecommend } = useSelector((state) => state.sys) const { setNavigationBarTitle } = useNavigation() const dispatch = useDispatch() + const skuSelectRef = useRef() const [state, setState] = useImmer(initialState) const { @@ -133,7 +136,8 @@ function EspierDetail (props) { curItem, recommendList, showSaleTotal, - showSku + showSku, + isOpen } = state useEffect(() => { @@ -346,6 +350,13 @@ function EspierDetail (props) { draft.skuPanelOpen = true draft.selectType = key }) + if (key === 'addcart') { + skuSelectRef.current?.addToCart?.() + + } else if (key === 'fastbuy') { + skuSelectRef.current?.fastBuy?.() + + } } const { windowWidth } = Taro.getSystemInfoSync() @@ -358,6 +369,13 @@ function EspierDetail (props) { } } + const handleClickStore = (item) => { + const url = `/subpages/store/index?id=${item.distributor_info?.distributor_id || item.goods_id}` + Taro.navigateTo({ + url + }) + } + return ( */} {!info && } {info && ( - + { + // console.log('e', e.detail) + const { scrollTop } = e.detail + if (scrollTop >= 640) { + setState((draft) => { + draft.isShowScroll = true + }) + } else { + setState((draft) => { + draft.isShowScroll = false + }) + } + }}> - 宝贝详情 + + + {info?.itemName} + + {isArray(info.intro) ? ( @@ -676,10 +717,81 @@ function EspierDetail (props) { ))} ) : ( - + <> + {/* */} + )} + {[{ open: false }, { open: false }, {}, {}, {}, {}, {}, {}].map((item, index) => + { + setState((draft) => { + draft.isOpen = !draft.isOpen + }) + }} + title={'标题' + (index + 1)} + > + 内容一 + 内容二 + 内容三 + 内容三 + 内容三 + 内容三 + {/* */} + + { + setState((draft) => { + draft.isOpen = !draft.isOpen + }) + }}> + {isOpen ? : + } + {isOpen ? <> : } + + )} + + 浏览历史 + + {[ + { + brief: "副标题", + itemName: "测试商品1", + price: "1099", + goods_id: 6, + pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c9xHQuJ96YIcZWtjRS0HBCTzp7dzXIs2pl' + }, + { + brief: "副标题", + itemName: "测试商品2", + price: "1099", + goods_id: 6, + pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/801c18d59d95ea26930fefc43bf66febTQjxb65cpnCqVLaOsYmiHdkDdYqBnXVm' + }, + { + brief: "副标题", + itemName: "测试商品3", + price: "1099", + goods_id: 6, + pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c90XruENsSSAhRiz0HPI3PjR8XQNVgbxHb' + }, + ].map((item, idx) => ( + + + + ))} + + - + )} diff --git a/src/pages/item/espier-detail.scss b/src/pages/item/espier-detail.scss index 8c91d67..c89fc1f 100755 --- a/src/pages/item/espier-detail.scss +++ b/src/pages/item/espier-detail.scss @@ -71,8 +71,9 @@ opacity: 0.5; } .goods-contents { + height: calc(100vh - #{$page-ipx-footer-height} - var(--nav-height)); .goods-info { - margin: 24px 30px; + margin: 20px 30px 10px; background-color: #fff; // padding: 20px 16px; // box-shadow: 0px 2px 10px 0px #eae7e0; @@ -86,16 +87,65 @@ color: #999; } } - .goods-desc { - margin: 24px 16px; - background-color: #fff; - box-shadow: 0px 2px 10px 0px #eae7e0; - .desc-hd { - height: 80px; - text-align: center; - line-height: 80px; + .good-sku { + margin: 40px 30px; + box-sizing: border-box; + .sku-img { + white-space: nowrap; + width: 100%; + &-item { + width: 130px; + margin-right: 20px; + display: inline-block; + &:last-child { + margin-right: 0; + } + .sp-image { + width: 100%; + height: 100%; + } + } } - .desc-title { + } + .goods-desc { + background-color: #fff; + // padding: 0 30px; + // box-shadow: 0px 2px 10px 0px #eae7e0; + height: calc(100vh - #{$page-ipx-footer-height} - var(--nav-height)); + // padding-bottom: calc(#{$page-ipx-footer-height} + 30px); + box-sizing: border-box; + position: relative; + overflow-y: scroll; + &::-webkit-scrollbar { + width: 0px; + height: 0px; + } + .desc-hd { + height: 160px; + padding: 20px 30px 0; + display: flex; + align-items: center; + border-bottom: 1px solid #9e9e9e80; + position: sticky; + z-index: 2; + top: -1px; + left: 0; + right: 0; + width: 100%; + background-color: #fff; + .desc-title { + font-size: 26px; + height: 160px; + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-direction: column; + flex: 1; + padding: 24px 50px; + box-sizing: border-box; + } + } + .desc-title-no { color: #222; position: relative; &:before { @@ -119,6 +169,80 @@ right: -24px; } } + .sp-accordion { + position: relative; + // padding: ; + .at-accordion__header { + padding: 26px 40px; + color: #000; + &::after { + border: none; + // border-bottom: 1px solid #9e9e9e80; + } + .at-accordion__info__title { + font-size: 26px; + } + .at-accordion__arrow { + display: none; + } + } + .at-accordion__content { + &::after { + border: none; + // border-bottom: 1px solid #9e9e9e80; + } + } + .at-accordion__body { + padding: 0 40px; + padding-bottom: 30px; + } + .at-icon { + position: absolute; + z-index: 0; + right: 40px; + top: 48px; + transform: translateY(-50%); + transition: all 0.2s ease-in-out; + } + .line { + display: block; + position: absolute; + width: 100%; + height: 1px; + background: #9e9e9e80; + top: 90px; + right: 0; + left: 0; + transition: all 0.2s ease-in-out; + } + } + .bottom-box { + border-top: 1px solid #9e9e9e80; + &-tit { + font-size: 30px; + color: #000; + padding-left: 44px; + padding-top: 50px; + font-weight: 500; + } + } + .shop-box { + height: 466px; + width: 100%; + padding: 30px 50px 40px; + box-sizing: border-box; + transition: height 0.2s linear 0.2s; + white-space: nowrap; + .goods-item-wrap { + display: inline-block; + width: 250px; + height: 100%; + margin-right: 30px; + &:last-child { + margin-right: 0; + } + } + } } } .goods-name { diff --git a/src/pages/item/list.config.js b/src/pages/item/list.config.js index fc82040..6915110 100755 --- a/src/pages/item/list.config.js +++ b/src/pages/item/list.config.js @@ -1,3 +1,3 @@ export default { - navigationBarTitleText: '搜索结果' + navigationBarTitleText: '搜索列表' } diff --git a/src/pages/item/list.js b/src/pages/item/list.js index 72a60b5..9cfa78a 100755 --- a/src/pages/item/list.js +++ b/src/pages/item/list.js @@ -347,6 +347,7 @@ function ItemList () { { @@ -73,7 +73,7 @@ export default class DetailItem extends Component { info }) } - handleQuantityChange(item, val) { + handleQuantityChange (item, val) { //改变售后商品的数量 const { info } = this.props info.orders.map((v) => { @@ -84,16 +84,16 @@ export default class DetailItem extends Component { }) } - render() { + render () { const { customFooter, info, isPointitem, showType } = this.props return ( + 商品信息 {info && info[showType] && info[showType].map((item, idx) => ( - 第{idx + 1}件商品 {info.delivery_code ? null : item.delivery_code ? ( 物流单号：{item.delivery_code} @@ -112,7 +112,7 @@ export default class DetailItem extends Component { isShowNational isPointitemGood={isPointitem} onClick={() => { - if(info.order_class == 'pointsmall') { + if (info.order_class == 'pointsmall') { Taro.navigateTo({ url: `/subpages/pointshop/espier-detail?id=${item.good_id}` }) @@ -131,16 +131,16 @@ export default class DetailItem extends Component { (info.delivery_code ? null : item.delivery_code && ( - - 查看物流 - - ))} + + 查看物流 + + ))} {item.show_aftersales === 1 && ( {}, - onClick: () => {} + onClickBtn: () => { }, + onClick: () => { } } static options = { addGlobalClass: true } - handleClickBtn(type) { + handleClickBtn (type) { const { info } = this.props this.props.onClickBtn && this.props.onClickBtn(type, info) } - computeTotalPrice() { + computeTotalPrice () { let total const { - info: { point, order_class, freight_fee, freight_type, total_fee, payment, receipt_type }, + info: { totalItems, point, order_class, freight_fee, freight_type, total_fee, payment, receipt_type }, payType, pointName } = this.props - + const [int, decimal] = String(payment || '').split('.') if (order_class === 'pointsmall') { if (freight_type === 'point' || (freight_type === 'cash' && freight_fee == 0)) { - total = `合计：${point} ${pointName}` + total = `总计：${point} ${pointName}` } else if (freight_type === 'cash' && freight_fee != 0) { - total = `合计：${point} ${pointName} + ￥${formatPriceToHundred(freight_fee)}` + total = `总计：${point} ${pointName} + ￥${formatPriceToHundred(freight_fee)}` } } else { if (payType === 'dhpoint') { - total = `合计：${total_fee}${pointName}` + total = `总计：${total_fee}${pointName}` } else { - total = `合计：￥${payment}` + total = `总计：￥ ${parseInt(int).toLocaleString() + (decimal ? '.' + decimal : '')}` } } return ( - + {receipt_type === 'dada' && ( 达达同城配送 )} - {total} + 共{totalItems}件商品 + {/* {total} */} + 总计： + {`￥ ${parseInt(int).toLocaleString() + (decimal ? '.' + decimal : '')}`} ) } - render() { + render () { const { customFooter, onClick, @@ -95,7 +98,7 @@ export default class TradeItem extends Component { )} 订单编号：{info.tid} - 下单时间：{info.create_date} + 订单时间：{info.create_date} {info && @@ -118,9 +121,9 @@ export default class TradeItem extends Component { {info.status_desc} {(info.order_status_des === 'PAYED' || info.order_status_des === 'NOTPAY') && - !info.is_logistics && - info.can_apply_cancel != 0 && - (info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? ( + !info.is_logistics && + info.can_apply_cancel != 0 && + (info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? ( @@ -145,9 +148,9 @@ export default class TradeItem extends Component { {info.status_desc} {(info.order_status_des === 'PAYED' || info.order_status_des === 'NOTPAY') && - info.can_apply_cancel != 0 && - !info.is_logistics && - (info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? ( + info.can_apply_cancel != 0 && + !info.is_logistics && + (info.receipt_type !== 'dada' || (info.dada && info.dada.dada_status === 0)) ? (