update

src/components/sp-default/index.js

@@ -6,7 +6,8 @@ import SpImage from './../sp-image'
 import './index.scss'
 
 const TYPES = {
-  cart: 'empty_cart.png'
+  // cart: 'empty_cart.png'
+  cart: 'index/logo.png'
 }
 
 function SpDefault (props) {
@@ -21,7 +22,7 @@ function SpDefault (props) {
       )}
     >
       <View className='sp-default-hd'>
-        {type && <SpImage className='default-img' src={TYPES[type]} width={350} />}
+        {type && <SpImage className='default-img' src={TYPES[type]} width={350} isNew />}
       </View>
       <View className='sp-default-bd'>{message}</View>
       <View className='sp-default-ft'>{children}</View>

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 (
     <View className={classNames('sp-goods-item')} onClick={handleClick.bind(this)}>
       <View className='goods-item__hd'>
-        <SpImage lazyLoad src={info.pic} height={310} width={310} mode={"aspectFill"} />
+        <SpImage lazyLoad src={info.pic} height={height} width={width} mode={"scaleToFill"} />
         <View className="new">NEW</View>
       </View>
       {/* {renderBrand && <View className='goods-brand-wrap'>{renderBrand}</View>} */}
@@ -123,6 +126,7 @@ function SpGoodsItem (props) {
         <View className='goods-info'>
           <View className='goods-desc'>{info.brief}</View>
           <View className='goods-title'>{info.itemName}</View>
+          {showSalePrice && <>
             <View className="goods-price">
               <Text className="symobol">¥</Text>
               <Text className="price">{info.activityPrice || info.price}</Text>
@@ -141,6 +145,7 @@ function SpGoodsItem (props) {
               </ScrollView>
               <Text className="icon-my icon-arrow-right" onClick={() => setMove(move < (info.colors || colors).length - 2 ? move + 1 : move)}></Text>
             </View>
+          </>}
         </View>
 
         {/* 促销活动标签 */}
@@ -238,7 +243,7 @@ function SpGoodsItem (props) {
         )}
       </View>
 
-      <View className='goods-item__ft'>{renderFooter}</View>
+      {renderFooter && <View className='goods-item__ft'>{renderFooter}</View>}
 
       {/* {info.brand && (
         <View className='goods-item__ft'>

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() {
+  render () {
-    const { icon, className, title, button, value, btnText, to, isUrl, img } = this.props
+    const { icon, className, title, button, value, btnText, to, isUrl, img, width, height } = this.props
 
     return (
       <View className={classNames('sp-note', className)}>
         {/* {icon && <AtIcon prefixClass='sw-icon' value={value} size='60' color='#cdcdcd' />} */}
         {img && (
-          <SpImage className='default-img' src={img} width={292} height={224} />
+          <SpImage className='default-img' src={img} width={width} height={height} />
         )}
         <Text className='sp-note__text'>{title || this.props.children}</Text>
         {button && to && (

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 (
         <View className='sp-order-item__extra'>
           <Text className='sp-order-item__desc'>{info.goods_props}</Text>
-          {info.num && <Text className='sp-order-item__num'>数量：{info.num}</Text>}
           {info.item_spec_desc && (
-            <Text className='sp-order-item__desc'>{info.item_spec_desc}</Text>
+            <Text className='sp-order-item__desc'>{desc_info || info.item_spec_desc}</Text>
           )}
+          {info.num && <Text className='sp-order-item__num'>数量：{info.num}</Text>}
         </View>
       )
     }
@@ -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 (
     <View className='sp-order-item' onClick={onClick}>
@@ -79,7 +94,7 @@ function SpOrderItem(props) {
             />
           ) : (
             <View>
-              <SpPrice className='sp-order-item__price' value={info.price}></SpPrice>
+              <SpPrice className='sp-order-item__price' value={info.price} showSeparator noDecimal={false}></SpPrice>
               {/* {info.market_price > 0 && enMarketPrice && (
                 <SpPrice lineThrough value={info.market_price}></SpPrice>
               )} */}

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%;
+    width: 38%;
-    margin-bottom: 40px;
+    // 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;
+    // color: $color-gray;
-    font-size: $font-size-small;
+    // font-size: $font-size-small;
     // margin-bottom: 10px;
   }
   &__spec {
-    color: $color-gray;
+    // color: $color-gray;
-    font-size: $font-size-small;
+    // 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;
+  }
 }

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) {
             />
           </View>}
           {/* <Image className="chazhao" src={require("@/assets/chazhao-light.png")}></Image> */}
-          {showCustomNavigation ? <SpImage src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />
+          {showCustomNavigation ? <SpImage onClick={() => Taro.navigateTo({ url: '/pages/item/list' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />
             : <View className='icon-wrap'>
               <Text
                 className={classNames('iconfont', {
@@ -307,11 +309,12 @@ function SpPage (props, ref) {
                   }
                 }}
               />
-              {showNavCartIcon && <AtBadge value={10} maxValue={99}><SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /></AtBadge>}
+              {showNavCartIcon && <AtBadge value={cartCount} maxValue={99}><SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /></AtBadge>}
               {showNavHomeIcon && <SpImage src={`cart/home.png`} onClick={() => Taro.redirectTo({ url: '/pages/index' })} height={36} mode='heightFix' isNew />}
+              {showNavSearchIcon && <SpImage onClick={() => Taro.navigateTo({ url: '/pages/item/list' })} src={`member/chazhao-${isBlack ? "black" : "light"}.png`} height={34} mode='heightFix' isNew />}
             </View>
           }
-          {showNavkfIcon && <SpImage className='icon-kf' src={`index/kf.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew />}
+          {showNavkfIcon && <SpChat><SpImage className='icon-kf' src={`index/kf.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={46} mode='heightFix' isNew /></SpChat>}
         </View>}
 
         {isWeixin && <View className='title-container' style={styleNames(pageTitleStyle)}>

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;

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}
         </Text>
         {decimal !== undefined && !noDecimal && (
           <Text
             className='sp-price__decimal'
             style={styleNames({
-              fontSize: `${size - 4}rpx`
+              fontSize: `${size}rpx`
             })}
           >
             .{decimal}

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(
+    // console.log(
-      'skuDict:',
+    //   'skuDict:',
-      skuDictRef.current,
+    //   skuDictRef.current,
-      'selection:',
+    //   'selection:',
-      selection,
+    //   selection,
-      'disabledSet:',
+    //   'disabledSet:',
-      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 }) => {
+      (row) => {
-        calcDisabled(selection)
+        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) {
           <View className='sku-group' key={`sku-group__${index}`}>
             {/* <View className='sku-name'>{item.skuName}</View> */}
             <View className='sku-values'>
-              {item.skuValue.map((spec, idx) => (
+              {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
                     className={classNames('sku-btn', {
                       'active': spec.specId == selection[index],
                       'disabled': disabledSet.has(spec.specId),
+                    })}
+                    onClick={handleSelectSku.bind(this, spec, index)}
+                    key={`sku-values-item__${idx}`}
+                  >
+                    <SpImage src={spec.specImgs[0]} width={130} height={90} mode='aspectFit' key={`sku-img__${idx}`} />
+                  </View>
+                )
+                )}
+              </ScrollView>}
+              {index > 0 && item.skuValue.map((spec, idx) => (
+                <View
+                  className={classNames('sku-btn btn-noac', {
+                    'active': spec.specId == selection[index],
+                    'btn-primary': spec.specId == selection[index],
+                    'disabled': disabledSet.has(spec.specId),
                     'sku-img': spec.specImgs.length > 0
                   })}
                   onClick={handleSelectSku.bind(this, spec, index)}
                   key={`sku-values-item__${idx}`}
                 >
-                  {spec.specImgs.length > 0 && (
+                  {/* {spec.specImgs.length > 0 && (
                     <SpImage src={spec.specImgs[0]} width={260} height={260} />
-                  )}
+                  )} */}
-                  {index !== 0 && <View className='spec-name'>{spec.specName}</View>}
+                  <View className={classNames('spec-name', { 'pad': index === 2 })}>{spec.specName}</View>
                 </View>
               ))}
             </View>
           </View>
         ))}
         {!hideInputNumber && renderLimitTip()}
+        <View className="select">{skuText}</View>
       </View>
       {/* </SpFloatLayout> */}
     </View>
@@ -392,4 +417,4 @@ SpSkuSelect.options = {
   addGlobalClass: true
 }
 
-export default SpSkuSelect
+export default React.forwardRef(SpSkuSelect)

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: 1PX solid #fff;
-    border-radius: 4px;
+    border-radius: 8px;
-    margin: 0 24px 24px 0;
+    margin: 0 20px 20px 0;
-    color: #222;
+    color: #333;
     box-sizing: border-box;
     &.sku-img {
       padding: 0;
@@ -105,14 +138,31 @@
         margin: 8px 0;
       }
     }
-    &.active {
+    &.btn-noac {
-      background: #fff;
       /* prettier-ignore */
-      border: 1PX solid var(--color-primary);
+      border: 1PX solid #BCBCBC;
-      color: var(--color-primary);
+      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;
     }
   }
 

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

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 = () => {},
+    onDelete = () => { },
-    onChange = () => {},
+    onChange = () => { },
-    onClickImgAndTitle = () => {}
+    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}
+            width={150}
-            height={180}
+            height={150}
           />
         </View>
         <View className='comp-goodsitem-bd'>
           <View className='item-hd'>
-            <View className='goods-title'>
+            <View className='goods-title' onClick={onChangeGoodsIsCheck}>
               {/* {info.activity_type == 'package' && <Text className='goods-title__tag'>组合商品</Text>} */}
               {info.is_plus_buy && <Text className='goods-title__tag'>加价购</Text>}
               {info.item_name}
             </View>
             {isShowDeleteIcon && (
-              <Text className='iconfont icon-shanchu-01' onClick={() => onDelete(info)}></Text>
+              // <Text className='iconfont icon-shanchu-01' onClick={() => onDelete(info)}></Text>
+              <View className='del-btn' onClick={() => onDelete(info)}>
+                <Image src='/assets/close.png' className='del-icon'></Image></View>
             )}
           </View>
 
@@ -115,14 +119,10 @@ function CompGoodsItem(props) {
           </View>
 
           <View className='item-ft'>
-            <View className='item-fd-hd'></View>
             <View className='item-ft-bd'>
               <View className='goods-price-wrap'>
-                <SpPrice value={_price / 100} />
+                <View className='num-box'>
-                {info.market_price > 0 && enMarketPrice && (
+                  <Text>数量：</Text>
-                  <SpPrice className='mkt-price' lineThrough value={info.market_price / 100} />
-                )}
-              </View>
                   {isShowAddInput ? (
                     <SpInputNumber
                       value={localNum}
@@ -134,6 +134,15 @@ function CompGoodsItem(props) {
                     <Text className='item-num'>x {info.num}</Text>
                   )}
                 </View>
+                <SpPrice value={_price / 100} noDecimal={false} size={20} showSeparator />
+                {info.market_price > 0 && enMarketPrice && (
+                  <SpPrice className='mkt-price' lineThrough value={info.market_price / 100} />
+                )}
+              </View>
+            </View>
+            <View className='item-fd-hd'>
+              <SpPrice value={_price / 100 * info.num} noDecimal={false} showSeparator />
+            </View>
           </View>
         </View>
       </View>

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: 20px;
-    font-size: 24px;
+    color: #000;
-    color: #999;
+    opacity: 0.8;
-    padding: 5px 13px;
+    // padding: 5px 13px;
-    max-width: 300px;
+    max-width: 400px;
     min-width: 100px;
     display: inline-block;
     @include text-overflow();

src/pages/cart/espier-index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '购物车'
+  navigationBarTitleText: '',
+  navigationStyle: 'custom',
 }

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 (
     <SpPage
@@ -262,15 +271,16 @@ function CartIndex () {
         'has-tabbar': tabbar == 1
       })}
       renderFooter={tabbar == 1 && <SpTabbar />}
+      showNavLogo isBlack showNavkfIcon
     >
-      {!isLogin && (
+      {/* {!isLogin && (
         <View className='login-header'>
           <View className='login-txt'>授权登录后同步购物车的商品</View>
           <SpLogin onChange={() => { }}>
             <View className='btn-login'>授权登录</View>
           </SpLogin>
         </View>
-      )}
+      )} */}
       {isLogin && (
         <View>
           {/* <SpTabs current={current} tablist={tablist} onChange={onChangeSpTab} /> */}
@@ -281,8 +291,11 @@ function CartIndex () {
               return (
                 <View className='shop-cart-item' key={`shop-cart-item__${all_index}`}>
                   <View className='shop-cart-item-hd'>
-                    <Text className='iconfont icon-shop' />
+                    {/* <Text className='iconfont icon-shop' /> */}
-                    {all_item.shop_name || '自营'}
+                    {/* {all_item.shop_name || '自营'} */}
+                    购物车
+                    {/* <Text className="total">共{all_item.cart_total_num}件</Text> */}
+                    <Text className="total">共{cartCount}件</Text>
                   </View>
                   <View className='shop-cart-item-shadow'>
                     {/** 店铺商品开始 */}
@@ -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)}
                                 />
                               </View>
@@ -382,12 +396,14 @@ function CartIndex () {
                           label='全选'
                           onChange={onChangeGoodsIsCheck.bind(this, all_item, 'all')}
                         />
+                        {/* <Text className='total-num'>共{all_item.cart_total_num}件</Text> */}
+                        <Text className='total-num'>共{cartCount}件</Text>
                       </View>
                       <View className='rg'>
                         <View>
                           <View className='total-price-wrap'>
-                            合计：
+                            {/* 合计： */}
-                            <SpPrice className='total-pirce' value={all_item.total_fee / 100} />
+                            <SpPrice className='total-pirce' value={all_item.total_fee / 100} showSeparator noDecimal />
                           </View>
                           {all_item.discount_fee > 0 && (
                             <View className='discount-price-wrap'>
@@ -402,11 +418,10 @@ function CartIndex () {
                         <AtButton
                           className='btn-calc'
                           type='primary'
-                          circle
                           disabled={all_item.cart_total_num <= 0}
                           onClick={() => handleCheckout(all_item)}
                         >
-                          结算({all_item.cart_total_num})
+                          立即结算
                         </AtButton>
                       </View>
                     </View>
@@ -443,13 +458,65 @@ function CartIndex () {
       )}
 
       {validCart.length == 0 && invalidCart.length == 0 && (
-        <SpDefault type='cart' message='购物车内暂无商品～'>
+        <View className='empty-box'>
+          {/* <SpDefault type='cart' message='购物车内暂无商品～'>
             <AtButton type='primary' circle onClick={navigateTo.bind(this, '/pages/index', true)}>
               去选购
             </AtButton>
-        </SpDefault>
+          </SpDefault> */}
+          <SpImage className='default-img' src='index/logo.png' width={160} isNew />
+          <View className="empty-box-tit">购物车还是空的</View>
+          <View className="empty-box-sub-tit">快去挑选自己喜欢的宝贝吧~</View>
+          <SpLogin onChange={() => { }}>
+            <AtButton type='primary' onClick={navigateTo.bind(this, '/pages/index', true)}>
+              前往选购
+            </AtButton>
+          </SpLogin>
+          <View className="gap"></View>
+        </View>
       )}
 
+      {false && <sView className='bottom-box'>
+        <View className="bottom-box-tit" style={{ fontSize: validCart.length == 0 && invalidCart.length == 0 ? '40rpx' : '30rpx' }}>{validCart.length == 0 && invalidCart.length == 0 ? '商品推荐' : '专属推荐'}</View>
+        <ScrollView scrollX scrollWithAnimation showScrollbar={true} scrollLeft={0} className="shop-box">
+          {[
+            {
+              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) => (
+            <View className='goods-item-wrap' key={`goods-item-l__${idx}`}>
+              <SpGoodsItem
+                showSalePrice={false}
+                height={250}
+                width={250}
+                onStoreClick={handleClickStore}
+                info={{
+                  ...item
+                }}
+              />
+            </View>
+          ))}
+        </ScrollView>
+      </sView>}
+
       {/* 猜你喜欢 */}
       <SpRecommend className='recommend-block' info={recommendList} />
 

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;
+      font-size: 40px;
-      color: #333;
+      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;
+        }
+      }
+    }
+  }
 }

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 (
       <View className=''>
-        <View className='group' key={item.category_id} onClick={() => false && handleCustomClick(item.category_id)}>
+        {/* handleCustomClick(item.category_id) */}
+        <View className='group' key={item.category_id} onClick={() => handleClickItem(item)}>
           <View className='group-title'>探索全部
             <Text className='iconfont icon-qianwang-01' style={{ fontSize: 'inherit', marginLeft: '4px' }}></Text>
           </View>

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 () {
             ))}
           </View>}
           {isUpOperation && <View className="icon-kf">
-            <SpImage height="62" src='index/kf.png' isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
+            <SpChat><SpImage height="62" src='index/kf.png' isShowMenuByLongpress={false} lazyLoad isNew /></SpChat>
           </View>}
         </View>
         {isUpOperation && <ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="shop-box">

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 (
     <View className='comp-goodsbuytoolbar'>
       <View className='comp-goodsbuytoolbar-flex'>
-        <SpImage height={54} src='index/kf.png' mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage>
+        <SpChat> <SpImage height={54} src='index/kf.png' mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage></SpChat>
         <SpLogin className='shoucang-wrap' onChange={onChangeCollection.bind(this)}>
           <SpImage height={54} src={isFaved ? 'cart/star-full.png' : 'cart/star.png'} mode='heightFix' isShowMenuByLongpress={false} isNew></SpImage>
           {/* <View className='toolbar-item'>

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 (
     <SpPage
       className='page-item-espierdetail'
@@ -395,7 +413,19 @@ function EspierDetail (props) {
       {/* <Canvas id="canvas2" type="2d" onReady={onCanvasReady} /> */}
       {!info && <SpLoading />}
       {info && (
-        <View className='goods-contents'>
+        <ScrollView scrollY scrollWithAnimation showScrollbar={false} scrollTop={0} className='goods-contents' onScroll={(e) => {
+          // console.log('e', e.detail)
+          const { scrollTop } = e.detail
+          if (scrollTop >= 640) {
+            setState((draft) => {
+              draft.isShowScroll = true
+            })
+          } else {
+            setState((draft) => {
+              draft.isShowScroll = false
+            })
+          }
+        }}>
           <View className='goods-pic-container'>
             <Swiper
               className='goods-swiper'
@@ -641,6 +671,7 @@ function EspierDetail (props) {
           {/* Sku选择器列表 */}
           {/* Sku选择器 */}
           <MSpSkuSelect
+            ref={skuSelectRef}
             open={skuPanelOpen}
             type={selectType}
             info={info}
@@ -660,7 +691,17 @@ function EspierDetail (props) {
 
           <View className='goods-desc'>
             <View className='desc-hd'>
-              <Text className='desc-title'>宝贝详情</Text>
+              <SpImage
+                className='sku-image'
+                src={skuSelectRef.current?.getImgs()}
+                width={160}
+                height={160}
+                mode='aspectFit'
+              />
+              <View className='desc-title'>
+                <Text className='desc-title-txt'>{info?.itemName}</Text>
+                <SpGoodsPrice info={curItem ? curItem : info} />
+              </View>
             </View>
             {isArray(info.intro) ? (
               <View>
@@ -676,10 +717,81 @@ function EspierDetail (props) {
                 ))}
               </View>
             ) : (
-              <SpHtml content={info.intro} />
+              <>
+                {/* <SpHtml content={info.intro} /> */}
+              </>
             )}
+            {[{ open: false }, { open: false }, {}, {}, {}, {}, {}, {}].map((item, index) => <View className={classNames('sp-accordion')} key={`item__${index}`}>
+              <AtAccordion
+                open={isOpen}
+                isAnimation={false}
+                onClick={() => {
+                  setState((draft) => {
+                    draft.isOpen = !draft.isOpen
+                  })
+                }}
+                title={'标题' + (index + 1)}
+              >
+                <View>内容一</View>
+                <View>内容二</View>
+                <View>内容三</View>
+                <View>内容三</View>
+                <View>内容三</View>
+                <View>内容三</View>
+                {/* <SpHtml content={info.intro} /> */}
+              </AtAccordion>
+              <View onClick={() => {
+                setState((draft) => {
+                  draft.isOpen = !draft.isOpen
+                })
+              }}>
+                {isOpen ? <AtIcon value='subtract' size='16' color='#000' /> :
+                  <AtIcon value='add' size='16' color='#000' />}
+                {isOpen ? <></> : <View className="line"></View>}
+              </View>
+            </View>)}
+            <View className='bottom-box'>
+              <View className="bottom-box-tit">浏览历史</View>
+              <ScrollView scrollX scrollWithAnimation showScrollbar={true} scrollLeft={0} className="shop-box">
+                {[
+                  {
+                    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) => (
+                  <View className='goods-item-wrap' key={`goods-item-l__${idx}`}>
+                    <SpGoodsItem
+                      showSalePrice={false}
+                      height={250}
+                      width={250}
+                      onStoreClick={handleClickStore}
+                      info={{
+                        ...item
+                      }}
+                    />
+                  </View>
+                ))}
+              </ScrollView>
             </View>
           </View>
+        </ScrollView>
       )}
 
       <SpRecommend info={recommendList} />

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 {
+    .good-sku {
-      margin: 24px 16px;
+      margin: 40px 30px;
-      background-color: #fff;
+      box-sizing: border-box;
-      box-shadow: 0px 2px 10px 0px #eae7e0;
+      .sku-img {
-      .desc-hd {
+        white-space: nowrap;
-        height: 80px;
+        width: 100%;
-        text-align: center;
+        &-item {
-        line-height: 80px;
+          width: 130px;
+          margin-right: 20px;
+          display: inline-block;
+          &:last-child {
+            margin-right: 0;
           }
+          .sp-image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .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 {

src/pages/item/list.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '搜索结果'
+  navigationBarTitleText: '搜索列表'
 }

src/pages/item/list.js

@@ -347,6 +347,7 @@ function ItemList () {
         <SpSearchBar
           keyword={keywords}
           placeholder='搜索商品'
+          isOpened={true}
           onFocus={handleOnFocus}
           onChange={handleOnChange}
           onClear={handleOnClear}

src/subpage/pages/trade/comps/detail-item.js

@@ -63,7 +63,7 @@ export default class DetailItem extends Component {
     copyText(val)
     S.toast('复制成功')
   }
-  handleSelectionChange(item_id, checked) {
+  handleSelectionChange (item_id, checked) {
     //选择要申请售后的商品
     const { info } = this.props
     info.orders.map((item) => {
@@ -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 (
       <View className='detail-item' style={styleNames(getThemeStyle())}>
+        <Text className='detail-item__title'>商品信息</Text>
         {info &&
           info[showType] &&
           info[showType].map((item, idx) => (
             <View className='detail-item-good' key={`${idx}1`}>
               <View className='detail-item__fix'>
-                <Text className='detail-item__title'>第{idx + 1}件商品</Text>
                 {info.delivery_code ? null : item.delivery_code ? (
                   <View className='detail-item__code'>
                     <Text className='code'>物流单号：{item.delivery_code}</Text>
@@ -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}`
                     })

src/subpage/pages/trade/comps/detail-item.scss

@@ -5,11 +5,11 @@
   &-good {
     position: relative;
   }
-  &__fix {
+  // &__fix {
-    display: flex;
+  //   display: flex;
-    border-bottom: 1px solid #ececec;
+  //   border-bottom: 1px solid #ececec;
-    padding: 0 38px 0 27px;
+  //   padding: 0 38px 0 27px;
-  }
+  // }
 
   &__title {
     flex: 0 0 200px 0;
@@ -21,7 +21,7 @@
   }
   &__title {
     display: block;
-    font-size: 22px;
+    font-size: 26px;
     line-height: 36px;
     color: #333333;
     padding: 0 38px 17px 17px;

src/subpage/pages/trade/comps/item.scss

@@ -1,12 +1,12 @@
-@import "@/style/imports";
+@import '@/style/imports';
 
 .trade-item {
   background: #fff;
   border-radius: $item-border-radius;
-  padding:24px 0 32px 0;
+  padding: 24px 0 32px 0;
-  margin:0 16px; 
+  margin: 0 16px;
   margin-bottom: 24px;
-  box-shadow: 0px 2px 10px 0px #EAE7E0;
+  // box-shadow: 0px 2px 10px 0px #EAE7E0;
   .icon-globe {
     font-size: 32px;
     margin-right: 10px;
@@ -18,27 +18,25 @@
   }
 
   &__bd {
-    padding:0 16px;
+    padding: 0 16px;
   }
 
   &__hd {
-    padding:24px 16px; 
+    padding: 24px 16px;
     line-height: 1.4;
     border-bottom: 1px solid #e4e4e4;
     color: #a6a6a6;
 
-    .item{
+    .item {
       font-weight: 400;
       font-size: 24px;
     }
-    .lineone{
+    .lineone {
       color: #333333;
     }
-    .linetwo{
+    .linetwo {
       color: #999999;
     }
-
-    
   }
   &__total {
     padding: 20px 24px;

src/subpage/pages/trade/comps/new-item.js

@@ -22,54 +22,57 @@ export default class TradeItem extends Component {
     info: {},
     rateStatus: false,
     isShowDistributorInfo: true,
-    onClickBtn: () => {},
+    onClickBtn: () => { },
-    onClick: () => {}
+    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 (
-      <View className={`trade-item__total ${receipt_type === 'dada' && 'dadaTotal'}`}>
+      <View className={`trade-item__total ${receipt_type === 'dada' ? 'dadaTotal' : ''}`}>
         {receipt_type === 'dada' && (
           <View className='dada'>
             <Text className='iconfont icon-peisongxiangguan'></Text>
             达达同城配送
           </View>
         )}
-        {total}
+        <Text className="total-txt">共{totalItems}件商品</Text>
+        {/* {total} */}
+        <Text className="total-txt" style={{ marginRight: '2rpx' }}>总计：</Text>
+        <Text className='total-price'>{`￥  ${parseInt(int).toLocaleString() + (decimal ? '.' + decimal : '')}`}</Text>
       </View>
     )
   }
 
-  render() {
+  render () {
     const {
       customFooter,
       onClick,
@@ -95,7 +98,7 @@ export default class TradeItem extends Component {
         )}
         <View className='trade-item__msg'>
           <View className='item lineone'>订单编号：{info.tid}</View>
-          <View className='item linetwo'>下单时间：{info.create_date}</View>
+          <View className='item linetwo'>订单时间：{info.create_date}</View>
         </View>
         <View className='trade-item__bd' onClick={onClick}>
           {info &&
@@ -134,7 +137,7 @@ export default class TradeItem extends Component {
                 style={`background: ${colors.data[0].primary}`}
                 onClick={this.handleClickBtn.bind(this, 'pay')}
               >
-                立即支付
+                去支付
               </Button>
             </View>
           </View>

src/subpage/pages/trade/comps/new-item.scss

@@ -1,12 +1,12 @@
 @import '@/style/imports';
 
 .trade-item {
-  background: #fff;
+  border-radius: 6px;
-  border-radius: $item-border-radius;
+  padding: 30px 26px 32px 20px;
-  padding: 24px 0 32px 0;
+  margin: 0 22px;
-  margin: 0 16px;
   margin-bottom: 24px;
-  box-shadow: 0px 2px 10px 0px #eae7e0;
+  background: #f7f7f7;
+  // box-shadow: 0px 2px 10px 0px #eae7e0;
 
   .icon-globe {
     font-size: 32px;
@@ -29,7 +29,14 @@
     }
   }
   &__bd {
-    padding: 0 16px;
+    // padding: 0 16px;
+    .sp-order-item {
+      padding: 0;
+      margin-bottom: 10px;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
   }
   &__dist {
     margin-bottom: 24px;
@@ -39,7 +46,7 @@
     margin-top: 0px;
     .item {
       font-weight: 400;
-      font-size: 24px;
+      font-size: 20px;
     }
     .lineone {
       color: #333333;
@@ -49,8 +56,23 @@
     }
   }
   &__total {
-    padding: 0 $edge-size floor($edge-size/2);
+    // padding: 0 $edge-size floor($edge-size/2);
     text-align: right;
+    color: #000;
+    font-size: 32px;
+    display: flex;
+    align-items: baseline !important;
+    padding: 0 !important;
+    margin-top: -14px;
+    .total-txt {
+      font-size: 20px;
+      color: #000;
+      opacity: 0.85;
+      margin-right: 10px;
+    }
+    .total-price {
+      font-size: 32px;
+    }
   }
 
   &__hd {
@@ -106,9 +128,19 @@
       /*  #ifdef  h5  */
       button {
         border: none;
-        margin-left: 15px;
+        margin-left: 10px;
       }
       /*  #endif  */
+      .btn-action {
+        margin-left: 10px;
+        padding: 15px 20px;
+        line-height: 1;
+        border-radius: 6px;
+        font-size: 20px;
+        &::after {
+          border: none;
+        }
+      }
     }
   }
   &__status {

src/subpage/pages/trade/detail.config.js

@@ -1 +1,4 @@
-export default {}
+export default {
+  navigationBarTitleText: '订单详情',
+  navigationStyle: 'custom',
+}

src/subpage/pages/trade/detail.js

@@ -3,7 +3,7 @@ import Taro, { getCurrentInstance } from '@tarojs/taro'
 import { View, Text, Button, Image, ScrollView } from '@tarojs/components'
 import { connect } from 'react-redux'
 import { AtCountdown } from 'taro-ui'
-import { Loading, SpNavBar, FloatMenuMeiQia, SpNewShopItem } from '@/components'
+import { Loading, SpNavBar, FloatMenuMeiQia, SpNewShopItem, SpPage, SpPrice } from '@/components'
 import {
   log,
   pickBy,
@@ -88,20 +88,20 @@ export default class TradeDetail extends Component {
     }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     clearInterval(this.state.interval)
   }
 
-  componentDidShow() {
+  componentDidShow () {
     this.fetch()
   }
 
-  isPointitemGood() {
+  isPointitemGood () {
     const options = this.$instance.router.params
     return options.type === 'pointitem'
   }
 
-  calcTimer(totalSec) {
+  calcTimer (totalSec) {
     let remainingSec = totalSec
     const dd = Math.floor(totalSec / 24 / 3600)
     remainingSec -= dd * 3600 * 24
@@ -119,7 +119,7 @@ export default class TradeDetail extends Component {
     }
   }
 
-  async fetch() {
+  async fetch () {
     const { id } = this.$instance.router.params
     const data = await api.trade.detail(id)
     let sessionFrom = ''
@@ -305,7 +305,7 @@ export default class TradeDetail extends Component {
     await copyText(msg)
   }
 
-  async handlePay() {
+  async handlePay () {
     const { info } = this.state
 
     // this.setState({
@@ -404,7 +404,7 @@ export default class TradeDetail extends Component {
     // }
   }
 
-  async handleClickBtn(type, e) {
+  async handleClickBtn (type, e) {
     e.stopPropagation()
     const { info } = this.state
     if (type === 'home') {
@@ -464,7 +464,7 @@ export default class TradeDetail extends Component {
     }
   }
 
-  async handleClickRefund(type, item_id) {
+  async handleClickRefund (type, item_id) {
     const {
       info: { tid: order_id }
     } = this.state
@@ -655,7 +655,7 @@ export default class TradeDetail extends Component {
     // }
   }
 
-  render() {
+  render () {
     const { colors } = this.props
     const {
       info,
@@ -695,14 +695,16 @@ export default class TradeDetail extends Component {
     const { market_price: enMarketPrice } = order_page
 
     return (
-      <View
+      <SpPage
+        isBlack
         className={classNames('page-trade-detail trade-detail', {
           'islog': info.is_logistics,
           'trade-close': info.status == 'TRADE_CLOSED',
           'has-navbar': isNavbar()
         })}
+        showNavSearchIcon
       >
-        <SpNavBar title='订单详情' leftIconType='chevron-left' fixed='true' />
+        {/* <SpNavBar title='订单详情' leftIconType='chevron-left' fixed='true' /> */}
 
         {info.is_logistics && (
           <View className='custabs'>
@@ -724,7 +726,7 @@ export default class TradeDetail extends Component {
         )}
 
         <ScrollView scroll-y className='scroll-view' scrollIntoView={scrollIntoView}>
-          <View className='trade-detail-header' id='order-0'>
+          {false && <View className='trade-detail-header' id='order-0'>
             <View className='trade-detail-waitdeliver'>
               {info.is_logistics && <View className='oneline'>线上订单</View>}
               {info.status === 'WAIT_BUYER_PAY' && (
@@ -769,7 +771,7 @@ export default class TradeDetail extends Component {
                 </View>
               )}
             </View>
-          </View>
+          </View>}
           {info.dada && info.dada.id && info.dada.dada_status > 1 && info.dada.dada_status !== 5 && (
             <View className='dadaInfo'>
               <View className='name'>
@@ -812,7 +814,7 @@ export default class TradeDetail extends Component {
               )}
             </View>
           )}
-          <View className='trade-detail-address'>
+          {/* <View className='trade-detail-address'>
             {info.dada && info.dada.id && (
               <View className={`store ${info.dada && info.dada.id ? 'border' : ''}`}>
                 <Text
@@ -876,14 +878,14 @@ export default class TradeDetail extends Component {
                 </View>
               </View>
             )}
-          </View>
+          </View> */}
 
           <View className='trade-detail-goods'>
             {VERSION_PLATFORM && (
               <SpNewShopItem info={distributor} canJump inOrderDetail hasLogo={false} />
             )}
             <View className='line'>
-              <View className='left'>订单号：</View>
+              <View className='left'>订单编号 </View>
               <View className='right'>
                 {info.tid}
                 <Text className='fuzhi' onClick={this.copyOrderId.bind(this, info.tid)}>
@@ -891,7 +893,69 @@ export default class TradeDetail extends Component {
                 </Text>
               </View>
             </View>
+            <View className='line'>
+              <View className='left'>订单时间 </View>
+              <View className='right'>
+                {info.created_time_str}
+              </View>
+            </View>
+            <View className="order_status_msg">{info.order_status_msg}</View>
+            <View className="address-txt">收货地址</View>
+            <View className='info-trade'>
+              <Text className='address-detail'>
+                {info.receiver_state}
+                {info.receiver_city}
+                {info.receiver_district}
+                {info.receiver_address}
+              </Text>
+              <View className='user-info-trade'>
+                <Text className='receiverName'>{info.receiver_name}</Text>
+                {!this.isPointitemGood() && <Text>{info.receiver_mobile}</Text>}
+              </View>
+            </View>
+            <>
+              <View className="address-txt info-trade">
+                <Text>物流信息</Text>
+                <Text className='right'>查看详情</Text>
+              </View>
+              <View className='address-detail' style={{ marginTop: '4rpx' }}>物流单号：{info.receiver_name}</View>
+              <View className='address-detail'>物流公司：{info.receiver_name}</View>
+            </>
+            <View className="address-txt info-trade">
+              <Text>支付方式</Text>
+            </View>
+            <View className='address-detail' style={{ marginTop: '4rpx' }}>{isDeposit ? '余额支付' : '微信支付'}</View>
+
+          </View>
+          <View className='trade-detail-box'>
             <DetailItem info={info} isPointitem={this.isPointitemGood()} />
+            <View className="gap"></View>
+            <View className="trade-detail-info-new">
+              <View className='line'>
+                <View className='left'>订单金额</View>
+                <View className='right'>
+                  {transformTextByPoint(this.isPointitemGood(), info.item_fee_new, info.item_point)}
+                </View>
+              </View>
+              <View className='line'>
+                <View className='left'>优惠金额</View>
+                {/* 促销 + 优惠券 */}
+                <View className='right'>{`¥${parseFloat(info.promotion_discount + info.coupon_discount).toFixed(2)}`}</View>
+              </View>
+              <View className='line'>
+                <View className='left'>运费</View>
+                <View className='right'>
+                  {info.freight_type !== 'point'
+                    ? `¥${info.freight_fee}`
+                    : `${info.freight_fee * 100}${this.props.pointName}`}
+                </View>
+              </View>
+            </View>
+            <View className="gap"></View>
+            <View className="trade-detail-info-bottom">
+              <View className='left'>订单总计</View>
+              <SpPrice className='right' value={info.totalpayment} showSeparator noDecimal={false}></SpPrice>
+            </View>
           </View>
           {info.is_logistics && (
             <View className='logConfirm'>
@@ -938,7 +1002,7 @@ export default class TradeDetail extends Component {
                 <Text className='trade-money__num'>￥{info.totalpayment}</Text>
               )}
             </View> */}
-            {!info.is_logistics &&
+            {/* {!info.is_logistics &&
               info.can_apply_cancel != 0 &&
               (info.status === 'WAIT_BUYER_PAY' ||
                 (info.status === 'WAIT_SELLER_SEND_GOODS' &&
@@ -950,15 +1014,15 @@ export default class TradeDetail extends Component {
                     取消订单
                   </View>
                 </View>
-              )}
+              )} */}
           </View>
-          {info.remark && (
+          {/* {info.remark && (
             <View className='trade-detail-remark'>
               <View className='trade-detail-remark__header'>订单备注</View>
               <View className='trade-detail-remark__body'>{info.remark}</View>
             </View>
-          )}
+          )} */}
-          <View className='trade-detail-info'>
+          {false && <View className='trade-detail-info'>
             <View className='line'>
               <View className='left'>下单时间</View>
               <View className='right'>{info.created_time_str}</View>
@@ -1085,7 +1149,7 @@ export default class TradeDetail extends Component {
                 </View>
               </View>
             )}
-          </View>
+          </View>}
           {cancelData.cancel_id && (
             <View className='cancelData'>
               <View className='title'>取消理由：</View>
@@ -1149,7 +1213,7 @@ export default class TradeDetail extends Component {
                     ? 'trade-detail__footer_allWidthBtn'
                     : ''
                     }`}
-                  style={`background: ${colors.data[0].primary}; border-color: ${colors.data[0].primary};`}
+                  // style={`background: ${colors.data[0].primary}; border-color: ${colors.data[0].primary};`}
                   onClick={this.handleClickBtn.bind(this, 'home')}
                 >
                   继续购物
@@ -1217,7 +1281,7 @@ export default class TradeDetail extends Component {
             </View>
           </View>
         )}
-      </View>
+      </SpPage>
     )
   }
 }

src/subpage/pages/trade/detail.scss

@@ -3,7 +3,7 @@ $paddingBottom: 100px;
 
 .page-trade-detail {
   box-sizing: border-box;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
   &.paddingBottom {
     padding-bottom: $paddingBottom;
@@ -26,12 +26,12 @@ $paddingBottom: 100px;
   }
 
   .scroll-view {
-    @include page-scroll(0, $tabbar-height);
+    @include page-scroll(var(--nav-height), 140px);
   }
 
   &.has-navbar {
     .scroll-view {
-      top: $navigate-height;
+      // top: $navigate-height;
     }
   }
 
@@ -234,7 +234,7 @@ $paddingBottom: 100px;
       display: flex;
       justify-content: flex-start;
       font-size: 28px;
-      color: #666;
+      color: #5b5b5b;
       align-items: center;
       margin-top: 24px;
       .receiverName {
@@ -245,23 +245,73 @@ $paddingBottom: 100px;
       font-size: 32px;
       color: #333;
       font-weight: bold;
+      line-height: 1.2;
     }
   }
   .trade-detail-goods {
-    margin: 0 20px;
+    margin: 14px 22px 0;
-    padding-top: 16px;
+    // padding-top: 16px;
+    padding: 40px 30px 40px 20px;
     min-height: 100px;
-    background: #fff;
+    background: #f7f7f7;
-    border-radius: 6px 6px 0 0;
+    border-radius: 6px;
+    position: relative;
     .line {
       display: flex;
-      padding: 20px;
+      // padding: 20px;;
-      font-size: 24px;
+      font-size: 20px;
       color: #333;
-      .fuzhi {
+      .right {
-        margin-left: 20px;
+        margin-left: 4px;
-        color: #28a1ff;
+        font-size: 20px;
       }
+      .left {
+        font-size: 20px;
+      }
+      .fuzhi {
+        margin-left: 30px;
+        // color: #28a1ff;
+        line-height: 1;
+        border-bottom: 1px solid #101010;
+      }
+    }
+    .order_status_msg {
+      font-size: 26px;
+      color: #000;
+      position: absolute;
+      top: 36px;
+      right: 30px;
+    }
+    .address-txt {
+      font-size: 26px;
+      margin-top: 56px;
+      color: #000;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .right {
+        font-size: 20px;
+        color: #000;
+        border-bottom: 1px solid #000;
+      }
+    }
+    .user-info-trade {
+      display: flex;
+      justify-content: flex-start;
+      font-size: 20px;
+      color: #5b5b5b80;
+      align-items: center;
+      line-height: 1;
+      .receiverName {
+        margin-right: 20px;
+        font-size: inherit;
+      }
+    }
+    .address-detail {
+      font-size: 20px;
+      // line-height: 1;
+      color: #5b5b5b80;
     }
   }
   .order-item__pay-type {
@@ -273,7 +323,7 @@ $paddingBottom: 100px;
     padding: 10px 38px;
     margin: 0 20px 20px 20px;
     font-size: 26px;
-    color: #5b5b5b;
+    color: #5b5b5b80;
     background: #fff;
     border-radius: 0 0 6px 6px;
     &__num {
@@ -355,29 +405,80 @@ $paddingBottom: 100px;
       background: #fff;
     }
   }
+  .trade-detail-box {
+    background: #f7f7f7;
+    border-radius: 6px;
+    margin: 10px 22px;
+    .gap {
+      padding: 0 54px;
+      width: calc(100% - 108px);
+      box-sizing: border-box;
+      height: 2px;
+      background: #fff;
+      margin: 20px auto;
+    }
+    .trade-detail-info-new {
+      padding: 20px 24px;
+      .line {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 18px;
+        .left,
+        .right {
+          font-size: 20px;
+          color: #5b5b5b80;
+          line-height: 1;
+        }
+      }
+    }
+    .trade-detail-info-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 22px 50px;
+      .left {
+        font-size: 26px;
+      }
+      .right {
+        font-size: 32px;
+      }
+      .left,
+      .sp-price__symbol,
+      .sp-price__int {
+        font-weight: bold;
+      }
+    }
+  }
   .trade-detail__footer {
     position: fixed;
     left: 0;
     width: 100%;
     height: 100px;
-    bottom: 0;
+    bottom: $edge-margin;
     background: #fff;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     &__btn {
       width: 338px;
-      height: 84px;
+      height: 80px;
       flex-shrink: 0;
-      line-height: 84px;
+      line-height: 80px;
       text-align: center;
-      border-radius: 40px;
+      border-radius: 6px;
-      color: #333;
+      color: #000;
-      border: 2px solid #bbb;
+      border: 2px solid #000;
       overflow: hidden;
-      font-size: 26px;
+      font-size: 34px;
+      // font-weight: bold;
       flex: 1;
-      margin: 0 20rpx;
+      margin: 30px 50rpx;
+      margin-bottom: 80px;
+      box-sizing: border-box;
+      background: #fff;
+
       &.left {
         margin-left: 7%;
         width: 396px;
@@ -399,7 +500,7 @@ $paddingBottom: 100px;
       }
     }
     &_active {
-      color: #ffffff;
+      // color: #ffffff;
     }
     &_allWidthBtn {
       // width: 100%;
@@ -542,7 +643,8 @@ $paddingBottom: 100px;
   .detail-item {
     padding: 0;
     .detail-item__title {
-      padding: 10px 0;
+      padding: 30px 22px 0px;
+      color: #000;
     }
     .order-item__bd {
       margin-bottom: 0;

src/subpage/pages/trade/list.js

@@ -35,8 +35,9 @@ export default class TradeList extends Component {
       ...this.state,
       curTabIdx: 0,
       tabList: [
-        { title: '全部订单', status: '0' },
+        { title: '全部', status: '0' },
-        { title: '待支付', status: '5' },
+        { title: '待付款', status: '5' },
+        { title: '待发货', status: '6' },
         { title: '待收货', status: '1' }
       ],
       // 是否显示待评价
@@ -52,6 +53,7 @@ export default class TradeList extends Component {
     const _tabList = JSON.parse(JSON.stringify(this.state.tabList))
     if (evaluate == 1) {
       _tabList.push({ title: '待评价', status: '7', is_rate: 0 })
+      _tabList.push({ title: '售后', status: '---', is_rate: 0 })
     }
     const tabIdx = _tabList.findIndex((tab) => tab.status === status)
     if (tabIdx >= 0) {
@@ -312,6 +314,7 @@ export default class TradeList extends Component {
         className={classNames('page-trade-list', {
           'has-navbar': true || isNavbar()
         })}
+        showNavSearchIcon
       >
         <SpNavBar title='订单列表' leftIconType='chevron-left' fixed='true' />
         <AtTabs
@@ -349,8 +352,8 @@ export default class TradeList extends Component {
           })}
           {page.isLoading && <Loading>正在加载...</Loading>}
           {!page.isLoading && !page.hasNext && !list.length && (
-            <SpNote isUrl img={`${process.env.APP_IMAGE_CDN}/empty_order.png`}>
+            <SpNote isUrl img={`${process.env.APP_IMAGE_CDN_NEW}/index/logo.png`} height={144} width={144}>
-              您还没有商城订单呦~
+              您的{curTabIdx != '0' ? tabList[curTabIdx].title : ''}订单为空
             </SpNote>
           )}
           {!!curItemActionsId && <View className='layer' onClick={this.hideLayer} />}

src/subpage/pages/trade/list.scss

@@ -39,10 +39,12 @@
     &__item {
       // height: $tabs-height;
       color: $color-brand-accent-light;
+      font-size: 26px;
+      padding: 24px 10px;
     }
     &__item-underline {
-      width: 40%;
+      width: 70%;
-      left: 30%;
+      left: 15%;
       background: $color-brand-primary;
     }
     &__item--active {
@@ -60,7 +62,8 @@
         //   $tabs-height + 30px,
         //   $edge-margin
         // );
-        @include page-scroll($tabs-height + $navigate-height + 30px, $edge-margin);
+        // @include page-scroll($tabs-height + $navigate-height + 30px, $edge-margin);
+        @include page-scroll(calc(var(--nav-height) + 110px), $edge-margin);
         /*  #ifdef  h5  */
         @include page-scroll($navigate-height-h5 + $tabs-height + 30px, $edge-margin);
         /*  #endif  */
@@ -68,6 +71,17 @@
       &.with-tabs-wx {
         @include page-scroll($navigate-height-h5, $edge-margin);
       }
+      .sp-note {
+        .sp-image {
+          margin-top: 400px;
+        }
+        &__text {
+          margin-top: 24px;
+          font-weight: bold;
+          font-size: 40px;
+          color: #000;
+        }
+      }
     }
     .trade-cont {
       .more {
@@ -83,15 +97,17 @@
     position: relative;
     .btn-action {
       width: auto;
-      margin-left: 20px;
+      margin-left: 10px;
-      padding: 0 22px;
+      padding: 15px 20px;
-      height: 42px;
+      // height: 42px;
-      line-height: 42px;
+      line-height: 22px;
-      border-radius: 8px;
+      border-radius: 6px;
-      font-size: $font-size-small;
+      font-size: 20px;
       color: #fff;
       background: #fff;
       margin-top: 0px;
+      box-sizing: border-box;
+      box-shadow: 0 0 0 1px #000000 !important;
       &::after {
         background: none;
         border: none;

src/subpages/member/index.js

@@ -583,7 +583,7 @@ function MemberIndex (props) {
             </SpLogin>
             <SpLogin
               className='order-item'
-              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=1')}
+              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=6')}
             >
               <View className='order-item-view'>
                 <SpImage src='member/daifahuo.png' className='icon-style' isNew />
@@ -611,7 +611,7 @@ function MemberIndex (props) {
             </SpLogin>
             <SpLogin
               className='order-item'
-              onChange={handleClickLink.bind(this, '/subpage/pages/trade/after-sale')}
+              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
             >
               <View className='order-item-view'>
                 <SpImage src='member/yiwancheng.png' className='icon-style' isNew />
@@ -625,7 +625,8 @@ function MemberIndex (props) {
             </SpLogin>
             <SpLogin
               className='order-item'
-              onChange={handleClickLink.bind(this, '/subpage/pages/trade/after-sale')}
+              // /subpage/pages/trade/after-sale
+              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
             >
               <View className='order-item-view'>
                 <SpImage src='member/pingjia.png' className='icon-style' mode='aspectFit' height={42} isNew />

src/subpages/member/index.scss

@@ -217,7 +217,8 @@
     .order-bradge {
       position: absolute;
       top: -6px;
-      right: 45px;
+      // right: 45px;
+      right: -16px;
       font-size: 20px;
       display: block;
       border: 3px solid #fff;