update
王文龙
parent
5a852daca0
commit
3621def2f5
Binary file not shown.
|
After Width: | Height: | Size: 509 B |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,24 +126,26 @@ function SpGoodsItem (props) {
|
|||
<View className='goods-info'>
|
||||
<View className='goods-desc'>{info.brief}</View>
|
||||
<View className='goods-title'>{info.itemName}</View>
|
||||
<View className="goods-price">
|
||||
<Text className="symobol">¥</Text>
|
||||
<Text className="price">{info.activityPrice || info.price}</Text>
|
||||
</View>
|
||||
<View className="switch-color" onClick={(e) => e.stopPropagation()}>
|
||||
<Text className="icon-my icon-arrow" onClick={() => setMove(move > 1 ? move - 1 : 0)}></Text>
|
||||
<ScrollView onScroll={(e) => {
|
||||
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) => (
|
||||
<View className='color-item' style={{ transfor: `translateX(-${move * 32}px)` }} onClick={() => setCurrent(index)}>
|
||||
<View className={`color${index == current ? ' active' : ''}`} style={{ backgroundColor: item.color || '#000' }} key={`color__${index}`}></View>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
<Text className="icon-my icon-arrow-right" onClick={() => setMove(move < (info.colors || colors).length - 2 ? move + 1 : move)}></Text>
|
||||
</View>
|
||||
{showSalePrice && <>
|
||||
<View className="goods-price">
|
||||
<Text className="symobol">¥</Text>
|
||||
<Text className="price">{info.activityPrice || info.price}</Text>
|
||||
</View>
|
||||
<View className="switch-color" onClick={(e) => e.stopPropagation()}>
|
||||
<Text className="icon-my icon-arrow" onClick={() => setMove(move > 1 ? move - 1 : 0)}></Text>
|
||||
<ScrollView onScroll={(e) => {
|
||||
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) => (
|
||||
<View className='color-item' style={{ transfor: `translateX(-${move * 32}px)` }} onClick={() => setCurrent(index)}>
|
||||
<View className={`color${index == current ? ' active' : ''}`} style={{ backgroundColor: item.color || '#000' }} key={`color__${index}`}></View>
|
||||
</View>
|
||||
))}
|
||||
</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'>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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 && (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)} */}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
<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', {
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
</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,24 +119,29 @@ 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'>
|
||||
<Text>数量：</Text>
|
||||
{isShowAddInput ? (
|
||||
<SpInputNumber
|
||||
value={localNum}
|
||||
max={parseInt(info?.limitedBuy ? info?.limitedBuy?.limit_buy : info.store)}
|
||||
min={1}
|
||||
onChange={onChangeInputNumber}
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
{isShowAddInput ? (
|
||||
<SpInputNumber
|
||||
value={localNum}
|
||||
max={parseInt(info?.limitedBuy ? info?.limitedBuy?.limit_buy : info.store)}
|
||||
min={1}
|
||||
onChange={onChangeInputNumber}
|
||||
/>
|
||||
) : (
|
||||
<Text className='item-num'>x {info.num}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View className='item-fd-hd'>
|
||||
<SpPrice value={_price / 100 * info.num} noDecimal={false} showSeparator />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export default {
|
||||
navigationBarTitleText: '购物车'
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' />
|
||||
{all_item.shop_name || '自营'}
|
||||
{/* <Text className='iconfont icon-shop' /> */}
|
||||
{/* {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='购物车内暂无商品～'>
|
||||
<AtButton type='primary' circle onClick={navigateTo.bind(this, '/pages/index', true)}>
|
||||
去选购
|
||||
</AtButton>
|
||||
</SpDefault>
|
||||
<View className='empty-box'>
|
||||
{/* <SpDefault type='cart' message='购物车内暂无商品～'>
|
||||
<AtButton type='primary' circle onClick={navigateTo.bind(this, '/pages/index', true)}>
|
||||
去选购
|
||||
</AtButton>
|
||||
</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} />
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
<SpRecommend info={recommendList} />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
export default {
|
||||
navigationBarTitleText: '搜索结果'
|
||||
navigationBarTitleText: '搜索列表'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -347,6 +347,7 @@ function ItemList () {
|
|||
<SpSearchBar
|
||||
keyword={keywords}
|
||||
placeholder='搜索商品'
|
||||
isOpened={true}
|
||||
onFocus={handleOnFocus}
|
||||
onChange={handleOnChange}
|
||||
onClear={handleOnClear}
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
})
|
||||
|
|
@ -131,16 +131,16 @@ export default class DetailItem extends Component {
|
|||
(info.delivery_code
|
||||
? null
|
||||
: item.delivery_code && (
|
||||
<AtButton
|
||||
circle
|
||||
type='text'
|
||||
size='small'
|
||||
className='delivery-btn'
|
||||
onClick={this.handleLookDelivery.bind(this, item)}
|
||||
>
|
||||
查看物流
|
||||
</AtButton>
|
||||
))}
|
||||
<AtButton
|
||||
circle
|
||||
type='text'
|
||||
size='small'
|
||||
className='delivery-btn'
|
||||
onClick={this.handleLookDelivery.bind(this, item)}
|
||||
>
|
||||
查看物流
|
||||
</AtButton>
|
||||
))}
|
||||
{item.show_aftersales === 1 && (
|
||||
<AtButton
|
||||
circle
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
&-good {
|
||||
position: relative;
|
||||
}
|
||||
&__fix {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: 0 38px 0 27px;
|
||||
}
|
||||
// &__fix {
|
||||
// display: flex;
|
||||
// border-bottom: 1px solid #ececec;
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import "@/style/imports";
|
||||
@import '@/style/imports';
|
||||
|
||||
.trade-item {
|
||||
background: #fff;
|
||||
border-radius: $item-border-radius;
|
||||
padding:24px 0 32px 0;
|
||||
margin:0 16px;
|
||||
padding: 24px 0 32px 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&__total {
|
||||
padding: 0 $edge-size floor($edge-size/2);
|
||||
|
|
@ -18,27 +18,25 @@
|
|||
}
|
||||
|
||||
&__bd {
|
||||
padding:0 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__hd {
|
||||
padding:24px 16px;
|
||||
&__hd {
|
||||
padding: 24px 16px;
|
||||
line-height: 1.4;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
color: #a6a6a6;
|
||||
|
||||
.item{
|
||||
font-weight: 400;
|
||||
.item {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
.lineone{
|
||||
color: #333333;
|
||||
.lineone {
|
||||
color: #333333;
|
||||
}
|
||||
.linetwo{
|
||||
color: #999999;
|
||||
.linetwo {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&__total {
|
||||
padding: 20px 24px;
|
||||
|
|
|
|||
|
|
@ -22,54 +22,57 @@ export default class TradeItem extends Component {
|
|||
info: {},
|
||||
rateStatus: false,
|
||||
isShowDistributorInfo: true,
|
||||
onClickBtn: () => {},
|
||||
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 (
|
||||
<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 &&
|
||||
|
|
@ -118,9 +121,9 @@ export default class TradeItem extends Component {
|
|||
<View className='trade-item__ft-bd'>
|
||||
<Text className='trade-item__status'>{info.status_desc}</Text>
|
||||
{(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)) ? (
|
||||
<Button
|
||||
className='btn-action'
|
||||
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
|
||||
|
|
@ -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>
|
||||
|
|
@ -145,9 +148,9 @@ export default class TradeItem extends Component {
|
|||
<View className='trade-item__ft-bd'>
|
||||
<Text className='trade-item__status'>{info.status_desc}</Text>
|
||||
{(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)) ? (
|
||||
<Button
|
||||
className='btn-action'
|
||||
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@import '@/style/imports';
|
||||
|
||||
.trade-item {
|
||||
background: #fff;
|
||||
border-radius: $item-border-radius;
|
||||
padding: 24px 0 32px 0;
|
||||
margin: 0 16px;
|
||||
border-radius: 6px;
|
||||
padding: 30px 26px 32px 20px;
|
||||
margin: 0 22px;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
export default {}
|
||||
export default {
|
||||
navigationBarTitleText: '订单详情',
|
||||
navigationStyle: 'custom',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
padding-top: 16px;
|
||||
margin: 14px 22px 0;
|
||||
// padding-top: 16px;
|
||||
padding: 40px 30px 40px 20px;
|
||||
min-height: 100px;
|
||||
background: #fff;
|
||||
border-radius: 6px 6px 0 0;
|
||||
background: #f7f7f7;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
.line {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
font-size: 24px;
|
||||
// padding: 20px;;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
.fuzhi {
|
||||
margin-left: 20px;
|
||||
color: #28a1ff;
|
||||
.right {
|
||||
margin-left: 4px;
|
||||
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;
|
||||
color: #333;
|
||||
border: 2px solid #bbb;
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -35,8 +35,9 @@ export default class TradeList extends Component {
|
|||
...this.state,
|
||||
curTabIdx: 0,
|
||||
tabList: [
|
||||
{ title: '全部订单', status: '0' },
|
||||
{ title: '待支付', status: '5' },
|
||||
{ title: '全部', status: '0' },
|
||||
{ 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} />}
|
||||
|
|
|
|||
|
|
@ -39,10 +39,12 @@
|
|||
&__item {
|
||||
// height: $tabs-height;
|
||||
color: $color-brand-accent-light;
|
||||
font-size: 26px;
|
||||
padding: 24px 10px;
|
||||
}
|
||||
&__item-underline {
|
||||
width: 40%;
|
||||
left: 30%;
|
||||
width: 70%;
|
||||
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;
|
||||
padding: 0 22px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 8px;
|
||||
font-size: $font-size-small;
|
||||
margin-left: 10px;
|
||||
padding: 15px 20px;
|
||||
// height: 42px;
|
||||
line-height: 22px;
|
||||
border-radius: 6px;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue