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

update

main
王文龙 2024-02-24 20:22:16 +08:00
parent 5545b6d619
commit ab8ccc7741
25 changed files with 1120 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/sp-goods-cell/index.js
View File

@ -136,14 +136,14 @@ function SpGoodsCell (props) {
<View className='price-gp'>
{isPoint && <SpPoint value={point} />}
{!isPoint && <SpPrice value={_price} noDecimal={false} showSeparator ></SpPrice>}
{info.marketPrice > 0 && (
{/* {info.marketPrice > 0 && (
<SpPrice
className='market-price'
size={32}
lineThrough
value={info.marketPrice}
></SpPrice>
)}
)} */}
</View>
</>
)

5
src/components/sp-goods-item/index.js
View File

@ -47,6 +47,7 @@ function SpGoodsItem (props) {
const [current, setCurrent] = useState(0)
const [move, setMove] = useState(0)
const [selColorItem, setSelColorItem] = useState({})
const { windowWidth } = Taro.getSystemInfoSync()
const setSelColor = (index, item) => {
setCurrent(index)
@ -134,7 +135,7 @@ function SpGoodsItem (props) {
<View className={classNames('sp-goods-item')} onClick={handleClick.bind(this)}>
<View className='goods-item__hd'>
<SpImage lazyLoad src={selColorItem.item_image_url?.[0] || info.spec_images?.[0]?.item_image_url?.[0] || info.pic} height={height} width={width} mode={"scaleToFill"} />
{info.tagList?.map((item, index) => <View className="new" style={{ borderColor: item.tag_color, color: item.font_color, left: index === 0 ? '20rpx' : index * 30 + 8 + 'rpx' }} key={index + item.item_id}>{item.tag_name}</View>)}
{info.tagList?.filter((item) => item.front_show === '1').map((item, index) => <View className="new" style={{ borderColor: item.tag_color, color: item.font_color, left: index === 0 ? '20rpx' : index * 30 + 8 + 'rpx' }} key={index + item.item_id}>{item.tag_name}</View>)}
{/* <View className="new" style={{ left: '120rpx' }}>NEW</View> */}
</View>
{/* {renderBrand && <View className='goods-brand-wrap'>{renderBrand}</View>} */}
@ -168,7 +169,7 @@ function SpGoodsItem (props) {
}} scrollLeft={move * 32} scrollX scrollWithAnimation className='color-box' showScrollbar={false}>
{(info.spec_images || colors).map((item, index) => (
<View className='color-item' style={{ transform: `translateX(-${move * 32}px)` }} onClick={() => setSelColor(index, item)} key={`color__${index}`}>
<View className={`color${index == current ? ' active' : ''}`} style={{ backgroundColor: item.color_value || '#000' }}></View>
<View className={`color${index == current ? ' active' : ''}`} style={{ backgroundColor: item.color_value || '#000', width: windowWidth >= 420 ? '14px' : '24rpx', height: windowWidth >= 420 ? '14px' : '24rpx' }}></View>
</View>
))}
</ScrollView>

4
src/components/sp-image/index.js
View File

@ -24,7 +24,8 @@ function SpImage (props) {
lazyLoad = false,
circle = false,
isNew = false,
isShowMenuByLongpress = true
isShowMenuByLongpress = true,
children
} = props
const [state, setState] = useImmer(initialState)
const { loadSuccess } = state
@ -83,6 +84,7 @@ function SpImage (props) {
// lazyLoad={lazyLoad}
showMenuByLongpress={isShowMenuByLongpress}
/>
{children}
</View>
)
}

1
src/components/sp-image/index.scss
View File

@ -2,6 +2,7 @@
box-sizing: border-box;
transition: all 0.2 ease-in-out;
opacity: 0;
position: relative;
&.opacity-1 {
opacity: 1;
}

7
src/components/sp-order-item/index.scss
View File

@ -15,7 +15,7 @@
margin-right: 60px;
}
&__bd {
width: 38%;
width: 42%;
// margin-bottom: 40px;
padding: 20px 0;
position: relative;
@ -26,7 +26,7 @@
&__ft {
flex: 1;
text-align: right;
padding-top: 10px;
padding-top: 8px;
// font-size: $font-size-small;
}
&__title {
@ -34,6 +34,7 @@
@include multi-ellipsis(1);
margin-bottom: 26px;
color: #000;
font-size: 20px;
// margin: 0 0 15px;
&-tag {
display: inline-block;
@ -45,6 +46,7 @@
}
}
&__desc {
opacity: 0.85;
// color: $color-gray;
// font-size: $font-size-small;
// margin-bottom: 10px;
@ -67,6 +69,7 @@
&__num {
display: block;
margin-top: 26px;
opacity: 0.85;
// color: $color-gray;
}
&__pay-type {

2
src/components/sp-page/index.js
View File

@ -309,7 +309,7 @@ function SpPage (props, ref) {
}
}}
/>
{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>}
{showNavCartIcon ? cartCount > 0 ? <AtBadge value={cartCount} maxValue={99}><SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /></AtBadge> : <SpImage src={`member/cart.png`} onClick={() => Taro.redirectTo({ url: '/pages/cart/espier-index' })} height={36} mode='heightFix' isNew /> : null}
{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>

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

@ -63,10 +63,13 @@ function SpSkuSelect (props, ref) {
const init = () => {
const { skuList, specItems } = info
console.log("🚀 ~ skuList:", skuList)
specItems.forEach((item) => {
const key = item.specItem.map((spec) => spec.specId).join('_')
skuDictRef.current[key] = item
if (item.store > 0) {
} else {
console.log("🚀 ~ item库存为0:", key, item.specItem.map((item) => item.specName).join('_'))
}
})
// 默认选中有库存并且前端可销售的sku
const defaultSpecItem = specItems.find((item) => item.store > 0 && ['onsale'].includes(item.approveStatus))
@ -75,24 +78,28 @@ function SpSkuSelect (props, ref) {
selection = defaultSpecItem.specItem.map((item) => item.specId)
}
calcDisabled(selection)
calcDisabled(selection, -1)
}
const calcDisabled = (selection, i = 0) => {
const { skuList } = info
const calcDisabled = (selection, e = 0) => {
const { skuList, specItems } = info
const disabledSet = new Set()
const makeReg = (sel, row, val) => {
const tSel = sel.slice()
const regStr = tSel.map((s, idx) => (row === idx ? val : !s ? '(\\d+)' : s)).join('_')
// console.log('regStr:', regStr)
return new RegExp(regStr)
return regStr
// return new RegExp(regStr)
}
const isNotDisabled = (sel, row, val) => {
const reg = makeReg(sel, row, val)
return Object.keys(skuDictRef.current).some((key) => {
return key.match(reg) && skuDictRef.current[key].store > 0 && ['onsale'].includes(skuDictRef.current[key].approveStatus)
if (key == reg) {
return skuDictRef.current[key].store > 0 && ['onsale'].includes(skuDictRef.current[key].approveStatus)
} else {
return false
}
})
}
@ -126,10 +133,10 @@ function SpSkuSelect (props, ref) {
draft.selection = selection
draft.disabledSet = disabledSet
draft.curItem = curItem
draft.skuText = skuText
draft.skuText = e === -1 ? '' : skuText
})
onChange(skuText, curItem, i)
onChange(skuText, curItem, e === -1 ? 0 : e)
}
// calcDisabled(initSelection)
@ -392,26 +399,28 @@ function SpSkuSelect (props, ref) {
)}
</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 && (
<SpImage src={spec.specImgs[0]} width={260} height={260} />
)} */}
<View className={classNames('spec-name', { 'pad': index === 2 })}>{spec.specName}</View>
</View>
<>
{!disabledSet.has(spec.specId) && <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 && (
<SpImage src={spec.specImgs[0]} width={260} height={260} />
)} */}
<View className={classNames('spec-name', { 'pad': index === 2 })}>{spec.specName}</View>
</View>}
</>
))}
</View>
</View>
))}
{!hideInputNumber && renderLimitTip()}
{/* {!hideInputNumber && renderLimitTip()} */}
<View className="select">{skuText.split(' ').map((item, index) => <Text key={`sku-text__${index}`} style={{ marginRight: '14px' }}>{item}</Text>)}</View>
</View>
{/* </SpFloatLayout> */}

1
src/doc/goods.js
View File

@ -122,6 +122,7 @@ export const GOODS_INFO = {
itemId: 'item_id',
itemBn: 'item_bn',
itemName: 'itemName',
itemName2: 'item_name_2',
brief: 'brief',
img: 'pics[0]',
imgs: 'pics',

51
src/doc/trade.js
View File

@ -72,18 +72,55 @@ export const SHOP_INFO = {
export const TRADE_AFTER_SALES_ITEM = {
orderId: 'order_id',
progress: 'progress',
aftersalesAddress: 'aftersales_address',
progressMsg: ({ app_info }) => app_info.progress_msg,
afterSalesBn: 'aftersales_bn',
aftersalesStatus: 'aftersales_status',
afterSalesType: 'aftersales_type',
distributorRemark: 'distributor_remark',
refuseReason: 'refuse_reason',
items: ({ detail }) => {
return pickBy(detail, {
pic: ({ orderItem }) => orderItem.pic,
itemName: ({ orderItem }) => orderItem.item_name,
itemSpecDesc: ({ orderItem }) => orderItem.item_spec_desc,
num: ({ orderItem }) => orderItem.num,
price: ({ orderItem }) => orderItem.total_fee / 100,
// return pickBy(detail, {
// pic: ({ orderItem }) => orderItem.pic,
// itemName: ({ orderItem }) => orderItem.item_name,
// itemSpecDesc: ({ orderItem }) => orderItem.item_spec_desc,
// num: ({ orderItem }) => orderItem.num,
// price: ({ orderItem }) => orderItem.total_fee / 100,
// })
const _detail = detail.filter(item => item.aftersales_bn).map(item => ({
...item, ...item.orderItem
}))
return pickBy(_detail, {
id: 'id',
pic: 'pic',
itemName: 'item_name',
price: ({ total_fee }) => total_fee / 100,
num: 'num',
// 可售后商品数
leftAftersalesNum: 'left_aftersales_num',
// 默认售后商品数
refundNum: 1,
itemSpecDesc: 'item_spec_desc',
point: 'point',
checked: () => false,
descInfo: ({ item_spec_desc }) => {
const desc = 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) {
}
return desc_info
}
}
})
},
hasAftersalesAddress: ({ aftersales_address }) => isObject(aftersales_address),
@ -93,6 +130,8 @@ export const TRADE_AFTER_SALES_ITEM = {
afterSalesContact: ({ aftersales_address }) => aftersales_address.aftersales_contact,
aftersalesHours: ({ aftersales_address }) => aftersales_address.aftersales_hours,
refundFee: ({ refund_fee }) => refund_fee / 100,
sendbackData: 'sendback_data',
hasSendbackData: ({ sendback_data }) => isObject(sendback_data),
refundPoint: 'refund_point',
reason: 'reason',
description: 'description',

35
src/pages/home/index.scss
View File

@ -73,13 +73,15 @@ page {
// height: calc(100vh - #{$tabbar-height});
transition: height 0.3s ease-in-out;
animation: fadeInAnimation 0.35s ease-in;
&.swiper-narrow {
height: calc(100vh - 620px - #{$tabbar-height} - var(--status-bar-height));
}
// &.swiper-narrow {
// height: calc(100vh - 620px - #{$tabbar-height} - var(--status-bar-height));
// }
}
.swiper-narrow {
height: calc(100vh - 620px - #{$tabbar-height} - var(--status-bar-height));
// height: calc(100vh - 620px - #{$tabbar-height} - var(--status-bar-height));
height: calc(100vh - 420px - #{$tabbar-height} - var(--status-bar-height));
transition: height 0.35s linear;
margin-top: -200px;
}
.item-btns {
display: flex;
@ -139,7 +141,7 @@ page {
}
}
.icon-kf {
position: absolute;
position: fixed;
right: 20px;
top: 60%;
width: 80px;
@ -236,6 +238,29 @@ page {
}
}
}
.recommend_btn {
display: flex;
flex-direction: column;
position: absolute;
bottom: 10%;
&-title {
font-size: 40px;
color: #fff;
margin-bottom: 12px;
font-weight: bold;
}
&-btn {
width: 174px;
height: 56px;
background-color: #000;
color: #fff;
font-size: 24px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
}
@keyframes fadeInAnimation {
from {
opacity: 0;

114
src/pages/index.js
View File

@ -102,12 +102,14 @@ const initialState = {
pic: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/image/1/2024/01/15/46fe6ca52277038e39ee2c026a4af3c90XruENsSSAhRiz0HPI3PjR8XQNVgbxHb'
},
],
goodList: []
goodList: [],
recommend: []
}
function Home () {
const [state, setState] = useImmer(initialState)
const [startY, setStartY] = useState(0)
const [startX, setStartX] = useState(0)
const [likeList, setLikeList] = useImmer([])
const { initState, openRecommend, openLocation, openStore, appName, openScanQrcode } = useSelector(
@ -120,8 +122,10 @@ function Home () {
const showAdv = useSelector((member) => member.user.showAdv)
const { location } = useSelector((state) => state.user)
const { setNavigationBarTitle } = useNavigation()
const { windowWidth } = Taro.getSystemInfoSync()
const imgW = parseFloat(((windowWidth * 2 - 60 - 32) / 3).toFixed(4))
const { wgts, loading, searchComp, pageData, fixedTop, filterWgts, isShowHomeHeader, isUpOperation, showRecommend, shopList, swiperList, goodList } = state
const { wgts, loading, searchComp, pageData, fixedTop, filterWgts, isShowHomeHeader, isUpOperation, showRecommend, shopList, swiperList, goodList, recommend } = state
const dispatch = useDispatch()
@ -130,6 +134,7 @@ function Home () {
init()
setNavigationBarTitle(appName)
getSwiperList()
getRecommendItems()
}
}, [initState])
@ -188,6 +193,50 @@ function Home () {
}
}
const getRecommendItems = async () => {
const req = {
page: 1,
pageSize: 10,
approve_status: 'onsale',
approve_status: 'onsale,only_show',
item_type: 'normal',
is_point: false,
// goodsSort: 6,
distributor_id: 0
}
const { list: jdList } = await api.item.search({ ...req, tag_id: 1 })
const { list: newList } = await api.item.search({ ...req, tag_id: 2 })
const { list: hotList } = await api.item.search({ ...req, tag_id: 3 })
setState((draft) => {
draft.recommend = [{
type: 'new',
text: "新品推荐",
btnTxt: '查看更多',
postions: 'left',
url: '',
img: 'index/rec/new.png',
list: newList
}, {
type: 'hot',
text: "热销单品",
btnTxt: '查看更多',
postions: 'left',
url: '',
img: 'index/rec/hot.png',
list: hotList
}, {
type: 'jd',
text: "ARIZONA",
btnTxt: '经典双扣',
postions: 'right',
url: '',
img: 'index/rec/jd.png',
list: jdList
}
]
})
}
const getSwiperList = async () => {
const res = await api.shop.homeSwiperList({ page: 1, pageSize: 999 })
const list = res?.list?.map((item) => {
@ -294,12 +343,16 @@ function Home () {
}
const handleTouchStart = (e) => {
setStartY(e.touches[0].clientY)
const { clientY, clientX } = e.touches[0]
setStartY(clientY)
setStartX(clientX)
}
const handleTouchEnd = (e) => {
const endY = e.changedTouches[0].clientY
const deltaY = endY - startY
const { clientX, clientY } = e.changedTouches[0]
const deltaY = clientY - startY
const deltaX = clientX - startX
if (Math.abs(deltaY) < 50) return
if (deltaY > 0) {
// 下滑操作
@ -415,7 +468,7 @@ function Home () {
<Image
src={item.src}
style={{ width: "100%", height: "100%", objectPosition: "center" }}
mode="aspectFill"
mode={isUpOperation ? 'aspectFill' : 'aspectFill'}
showMenuByLongpress={false}
/>
// <SpImage style={{ width: "100%", height: "100%" }} height="100%" src={item.src} isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
@ -464,7 +517,7 @@ function Home () {
<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 fadeIn" >
{isUpOperation && <ScrollView scrollX scrollWithAnimation showScrollbar={true} scrollLeft={0} className="shop-box fadeIn" >
{goodList.map((item, idx) => (
<View className='goods-item-wrap fadeIn' animation={{ duration: 500, timingFunction: 'ease-in-out', delay: 0 }} key={`goods-item-l__${idx + item.goods_id}`}>
<SpGoodsItem
@ -476,29 +529,52 @@ function Home () {
</View>
))}
</ScrollView>}
{isUpOperation && showRecommend && <View className="brand">
{/* 推荐图片+商品 */}
{isUpOperation && <>
{recommend.length > 0 && recommend.map((_item, id) => <View key={id + '__item'}>
<SpImage width={windowWidth * 2} height={windowWidth >= 400 ? 920 : 800} mode='scaleToFill' src={_item.img} isShowMenuByLongpress={false} lazyLoad isNew >
{/* <View className="recommend_btn" style={{ [_item.postions]: '70rpx' }}>
<View className="recommend_btn-title">{_item.text}</View>
<View className="recommend_btn-btn">{_item.btnTxt}</View>
</View> */}
</SpImage>
<ScrollView scrollX scrollWithAnimation showScrollbar={true} scrollLeft={0} className="shop-box fadeIn" >
{_item.list?.map((item, idx) => (
<View className='goods-item-wrap fadeIn' animation={{ duration: 500, timingFunction: 'ease-in-out', delay: 0 }} key={`goods-item-l__${idx + item.goods_id}`}>
<SpGoodsItem
onStoreClick={handleClickStore}
info={{
...item
}}
/>
</View>
))}
</ScrollView>
</View>)}
</>}
{isUpOperation && showRecommend && <View className="brand" style={{ padding: '15px', height: '550px' }}>
<View className="brand-title">品牌介绍</View>
<ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="brand-img">
<View className="brand-img-left brand-img-item">
<SpImage className="brand-img-top" width={220} height={294} mode='aspectFill' src="index/img/1774-1902.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<SpImage width={220} height={130} mode='aspectFill' src="index/img/1913.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<ScrollView scrollX scrollWithAnimation showScrollbar={false} scrollLeft={0} className="brand-img" style={{ height: '220px' }}>
<View className="brand-img-left brand-img-item" style={{ marginRight: '8px' }}>
<SpImage className="brand-img-top" width={imgW} height={294} mode='aspectFill' src="index/img/1774-1902.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<SpImage width={imgW} height={130} mode='aspectFill' src="index/img/1913.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
</View>
<View className="brand-img-center brand-img-item">
<SpImage height={440} width={220} mode='aspectFill' src="index/img/1968.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<View className="brand-img-center brand-img-item" style={{ marginRight: '8px' }}>
<SpImage height={440} width={imgW} mode='aspectFill' src="index/img/1968.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
</View>
<View className="brand-img-right brand-img-item">
<SpImage className="brand-img-top" width={220} height={324} mode='aspectFill' src="index/img/70.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<SpImage width={220} height={100} mode='aspectFill' src="index/img/1980.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<View className="brand-img-right brand-img-item" style={{ marginRight: '0px' }}>
<SpImage className="brand-img-top" width={imgW} height={324} mode='aspectFill' src="index/img/70.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<SpImage width={imgW} height={100} mode='aspectFill' src="index/img/1980.jpg" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
</View>
</ScrollView>
<SpImage onClick={() => Taro.navigateTo({
url: '/pages/webview?url=' + encodeURIComponent('https://www.baidu.com')
})} className="brand-guanzhu" width={690} mode="widthFix" src="index/guanzhu.png" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
})} className="brand-guanzhu" mode="widthFix" src="index/guanzhu.png" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
<View className="brand-dy">
<View className="brand-dy-tit">订阅消息</View>
<SpImage width={30} mode="widthFix" src="index/xiaoxi.png" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
</View>
<SpImage className="brand-logo" width={168} mode="widthFix" src="index/logo.png" isShowMenuByLongpress={false} lazyLoad isNew></SpImage>
{/* <SpImage className="brand-logo" width={168} mode="widthFix" src="index/logo.png" isShowMenuByLongpress={false} lazyLoad isNew></SpImage> */}
</View>}
{/* </ScrollView> */}

12
src/pages/item/espier-detail.js
View File

@ -472,7 +472,7 @@ function EspierDetail (props) {
<View className='goods-pic-container'>
<Swiper
className='goods-swiper'
// current={curImgIdx}
current={curImgIdx}
onChange={onChangeSwiper}
style={{
height: windowWidth
@ -519,7 +519,7 @@ function EspierDetail (props) {
</Swiper>
{info.imgs.length > 1 && (
<View className='swiper-pagegation'>{`${curImgIdx + 1}/${info.imgs.length}`}</View>
<View className='swiper-pagegation'>{`${curImgIdx + 1}/${(swiperList)?.length || 1}`}</View>
)}
{info.video && play && (
@ -604,8 +604,8 @@ function EspierDetail (props) {
<View className='goods-name-wrap'>
<View className='goods-name'>
<View className='title'>{info?.itemName}</View>
{/* <View className='brief'>{info.brief}</View> */}
<View className='brief'>{info.brief}</View>
<View className='title'>{info?.itemName2 || info?.itemName}</View>
</View>
{/* {(isWeixin || isAPP()) && (
// {(
@ -788,7 +788,7 @@ function EspierDetail (props) {
})
if (!item.isOpen) {
setState((draft) => {
draft.scrollTop = 610 + Math.random()
draft.scrollTop = 1010 + Math.random()
})
}
}}
@ -806,7 +806,7 @@ function EspierDetail (props) {
})
if (!item.isOpen) {
setState((draft) => {
draft.scrollTop = 610 + Math.random()
draft.scrollTop = 1010 + Math.random()
})
}
}}>

6
src/pages/item/espier-detail.scss
View File

@ -255,8 +255,10 @@
// @include multi-ellipsis(2);
}
.brief {
font-size: 28px;
color: #666;
font-size: 36px;
font-weight: bold;
margin-bottom: 10px;
// color: #666;
// @include text-overflow();
}
}

109
src/subpage/pages/trade/comps/new-item.js
View File

@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { classNames, formatPriceToHundred } from '@/utils'
import { SpOrderItem, SpNewShopItem } from '@/components'
import { AtCountdown } from 'taro-ui'
import './new-item.scss'
@ -42,6 +43,7 @@ export default class TradeItem extends Component {
payType,
pointName
} = this.props
const [int, decimal] = String(payment || '').split('.')
if (order_class === 'pointsmall') {
if (freight_type === 'point' || (freight_type === 'cash' && freight_fee == 0)) {
@ -73,7 +75,10 @@ export default class TradeItem extends Component {
}
// 修改地址
clickToEditAddress (choose) {
clickToEditAddress () {
const { choose } = this.props.info
console.log("🚀 ~ TradeItem ~ this.props.info:", this.props.info)
return
Taro.navigateTo({
url: `/marketing/pages/member/address?isSelected=${choose}`
})
@ -88,7 +93,8 @@ export default class TradeItem extends Component {
showActions,
colors,
rateStatus,
isShowDistributorInfo
isShowDistributorInfo,
onTimeUp = () => { }
} = this.props
if (!info) {
@ -104,7 +110,21 @@ export default class TradeItem extends Component {
</View>
)}
<View className='trade-item__msg'>
<View className='item lineone'>订单编号：{info.tid}</View>
<View className='' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<View className='item lineone'>订单编号：{info.tid}</View>
{info.status === 'WAIT_BUYER_PAY' && <View style={{ display: 'flex', alignItems: 'center' }}>
<Text style={{ marginRight: '6rpx', color: '#163586', fontSize: '20rpx' }}>等待付款 </Text>
{info.timer && <AtCountdown
format={{ day: '天', hours: ':', minutes: ':', seconds: '' }}
day={info.timer.dd}
hours={info.timer.hh}
minutes={info.timer.mm}
seconds={info.timer.ss}
isShowDay={info.timer.dd > 0}
onTimeUp={onTimeUp}
/>}
</View>}
</View>
<View className='item linetwo'>订单时间：{info.create_date}</View>
</View>
<View className='trade-item__bd' onClick={onClick}>
@ -126,7 +146,7 @@ export default class TradeItem extends Component {
<View className='trade-item__ft'>
<View className='trade-item__ft-actions'></View>
<View className='trade-item__ft-bd'>
<Text className='trade-item__status'>{info.status_desc}</Text>
{/* <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 &&
@ -153,17 +173,19 @@ export default class TradeItem extends Component {
<View className='trade-item__ft'>
<View className='trade-item__ft-actions'></View>
<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') &&
{/* <Text className='trade-item__status'>{info.status_desc}</Text> */}
{false && (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)) ? (
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'cancel')}
// onClick={this.handleClickBtn.bind(this, 'cancel')}
onClick={this.clickToEditAddress.bind(this)}
>
取消订单
{/* 取消订单 */}
修改地址
</Button>
) : null}
{info.pay_status === 'PAYED' &&
@ -191,7 +213,7 @@ export default class TradeItem extends Component {
<View className='trade-item__ft'>
<View className='trade-item__ft-actions'></View>
<View className='trade-item__ft-bd'>
<Text className='trade-item__status'>{info.status_desc}</Text>
{/* <Text className='trade-item__status'>{info.status_desc}</Text> */}
<Button
className='btn-action'
style={`background: ${colors.data[0].primary}`}
@ -227,7 +249,7 @@ export default class TradeItem extends Component {
)}
</View>
<View className='trade-item__ft-bd'>
<Text className='trade-item__status'>{info.status_desc}</Text>
{/* <Text className='trade-item__status'>{info.status_desc}</Text> */}
{/* {info.receipt_type !== 'dada' && (
<Button
className='btn-action'
@ -241,18 +263,26 @@ export default class TradeItem extends Component {
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'confirm')}
onClick={this.handleClickBtn.bind(this, 'delivery')}
>
确认收货
查看物流
</Button>
)}
<Button
{!info.aftersales_bn ? <Button
className='btn-action'
style={`background: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'detail')}
// onClick={this.handleClickBtn.bind(this, 'detail')}
onClick={this.handleClickBtn.bind(this, 'confirm')}
>
订单详情
</Button>
确认收货
</Button> :
<Button
className='btn-action'
style={`background: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'aftersales')}
>
售后进度
</Button>}
</View>
</View>
)}
@ -273,8 +303,8 @@ export default class TradeItem extends Component {
</View>
</View>
<View className='trade-item__ft-bd'>
<Text className='trade-item__status'>{info.status_desc}</Text>
{rateStatus && info.is_rate == 0 ? (
{/* <Text className='trade-item__status'>{info.status_desc}</Text> */}
{/* {rateStatus && info.is_rate == 0 ? (
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
@ -282,22 +312,41 @@ export default class TradeItem extends Component {
>
评价
</Button>
) : null}
{info.receipt_type === 'logistics' && (
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'delivery')}
>
查看物流
</Button>
)}
) : null} */}
{
!info.aftersales_bn && (
<Button
className='btn-action'
style={`box-shadow: 0 0 0 1PX ${colors.data[0].primary}; color: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'aftersales')}
>
{/* 查看物流 */}
{info.aftersales_bn ? '售后进度' : '申请售后'}
</Button>
)}
{false && info.is_rate == 0 && !info.aftersales_bn && <Button
className='btn-action'
style={`background: ${colors.data[0].primary};width:120rpx`}
// onClick={this.handleClickBtn.bind(this, 'detail')}
onClick={this.handleClickBtn.bind(this, 'rate')}
>
{/* 查看详情 */}
评价
</Button>}
</View>
</View>
)}
{!customFooter && !!info.aftersales_bn && info.status !== 'WAIT_BUYER_CONFIRM_GOODS' && (
<View className='trade-item__ft'>
<View className='trade-item__ft-actions'></View>
<View className='trade-item__ft-bd'>
{/* <Text className='trade-item__status'>{info.status_desc}</Text> */}
<Button
className='btn-action'
style={`background: ${colors.data[0].primary}`}
onClick={this.handleClickBtn.bind(this, 'detail')}
onClick={this.handleClickBtn.bind(this, 'aftersales')}
>
订单详情
售后进度
</Button>
</View>
</View>

14
src/subpage/pages/trade/comps/new-item.scss
View File

@ -54,6 +54,20 @@
.linetwo {
color: #999999;
}
.at-countdown {
line-height: 30px;
&__time-box {
font-size: 20px;
color: #163586;
font-family: inherit;
font-weight: normal;
}
&__separator {
padding: 0;
font-size: 22px;
color: #163586;
}
}
}
&__total {
// padding: 0 $edge-size floor($edge-size/2);

89
src/subpage/pages/trade/detail.js
View File

@ -169,16 +169,20 @@ export default class TradeDetail extends Component {
point_use: 'point_use',
mobile: 'mobile',
dada: ({ dada }) => {
console.log('dada')
console.log(dada)
return dada
},
receiver_city: 'receiver_city',
receiver_district: 'receiver_district',
receiver_address: 'receiver_address',
status_desc: 'order_status_msg',
delivery_code: 'delivery_code',
delivery_name: 'delivery_corp_name',
delivery_code: ({ order_delivery = {} }) => {
const { delivery_code, delivery_corp, delivery_corp_name, delivery_id } = order_delivery.list?.[0] || {}
return delivery_code
},
delivery_name: ({ order_delivery = {} }) => {
const { delivery_code, delivery_corp, delivery_corp_name, delivery_id } = order_delivery.list?.[0] || {}
return delivery_corp_name
},
delivery_type: 'delivery_type',
delivery_status: 'delivery_status',
pay_status: 'pay_status',
@ -222,8 +226,13 @@ export default class TradeDetail extends Component {
market_fee: ({ market_fee }) => market_fee / 100,
item_fee_new: ({ item_fee_new }) => item_fee_new / 100,
promotion_discount: ({ promotion_discount }) => promotion_discount / 100,
ziti_info: 'ziti_info'
ziti_info: 'ziti_info',
timer: ({ auto_cancel_seconds }) => auto_cancel_seconds > 0 ? this.calcTimer(auto_cancel_seconds) : null
})
const delivery = data.order_delivery?.list?.[0] || {}
info.delivery_corp_name = delivery.delivery_corp_name
info.delivery_corp = delivery.delivery_corp
info.delivery_code = delivery.delivery_code
const ziti = pickBy(data.distributor, {
store_name: 'store_name',
@ -486,6 +495,7 @@ export default class TradeDetail extends Component {
if (flag) {
Taro.showLoading({ title: '' })
let { delivery_type, delivery_id, order_type, tid: order_id } = this.state.info
console.log("🚀 ~ TradeDetail ~ delivery_type, delivery_id, order_type, tid: order_id:", delivery_type, delivery_id, order_type, order_id)
let list = []
if (delivery_type !== 'new') {
list = await api.trade.deliveryInfoNew({ delivery_id })
@ -494,7 +504,7 @@ export default class TradeDetail extends Component {
}
const nList = pickBy(list, {
title: 'AcceptStation',
content: ({ AcceptTime }) => [AcceptTime]
content: ({ AcceptTime }) => AcceptTime ? AcceptTime.substring(5, 16) : ''
})
this.setState({
deliveryList: nList
@ -690,15 +700,14 @@ export default class TradeDetail extends Component {
showQRcode,
pickup_code,
distributor,
showDeliveryModal
showDeliveryModal,
deliveryList
} = this.state
if (!info) {
return <Loading></Loading>
return <View style={{ marginTop: '100px' }}><Loading ></Loading></View>
}
console.log('==tradeInfo==>', tradeInfo)
//订单未支付
const NOT_PAY = tradeInfo && tradeInfo.tradeState === 'NOTPAY'
@ -935,14 +944,14 @@ export default class TradeDetail extends Component {
{!this.isPointitemGood() && <Text>{info.receiver_mobile}</Text>}
</View>
</View>
<>
{!!info.delivery_code && <>
<View className="address-txt info-trade">
<Text>物流信息</Text>
<Text className='right' onClick={() => this.handleClickDelivery(true)}>查看详情</Text>
</View>
<View className='address-detail' style={{ marginTop: '4rpx' }}>物流单号：{info.receiver_name}</View>
<View className='address-detail'>物流公司：{info.receiver_name}</View>
</>
<View className='address-detail' style={{ marginTop: '4rpx' }}>物流单号：{info.delivery_code}</View>
<View className='address-detail'>物流公司：{info.delivery_corp_name}</View>
</>}
<View className="address-txt info-trade">
<Text>支付方式</Text>
</View>
@ -956,19 +965,21 @@ export default class TradeDetail extends Component {
<View className='line'>
<View className='left'>订单金额</View>
<View className='right'>
{transformTextByPoint(this.isPointitemGood(), info.item_fee_new, info.item_point)}
<SpPrice size={20} value={info.item_fee_new} showSeparator noDecimal={false} />
{/* {transformTextByPoint(this.isPointitemGood(), info.item_fee_new, info.item_point)} */ console.log(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>
<SpPrice size={20} value={info.promotion_discount + info.coupon_discount} showSeparator noDecimal={false} />
{/* <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}`
? <SpPrice size={20} value={info.freight_fee} showSeparator noDecimal={false} />
: `${info.freight_fee * 100}${this.props.pointName}`}
</View>
</View>
@ -1211,16 +1222,16 @@ export default class TradeDetail extends Component {
// !VERSION_IN_PURCHASE &&
// !this.isPointitemGood() && (
// 先禁止掉！！！
// info.can_apply_aftersales === 1 && (
// <View
// className={`trade-detail__footer__btn ${info.is_logistics &&
// 'trade-detail__footer_active trade-detail__footer_allWidthBtn'
// }`}
// onClick={this.handleClickBtn.bind(this, 'aftersales')}
// >
// 申请售后
// </View>
// )
info.can_apply_aftersales === 1 && (
<View
className={`trade-detail__footer__btn ${info.is_logistics &&
'trade-detail__footer_active trade-detail__footer_allWidthBtn'
}`}
onClick={this.handleClickBtn.bind(this, 'aftersales')}
>
申请售后
</View>
)
}
{
// 继续购物 先禁止掉！！！
@ -1261,7 +1272,7 @@ export default class TradeDetail extends Component {
</View>
)
}
{
{/* {
// 联系客服
(info.status === 'TRADE_SUCCESS' ||
(info.receipt_type === 'dada' && info.dada.dada_status === 9)) &&
@ -1288,7 +1299,7 @@ export default class TradeDetail extends Component {
)}
</View>
)
}
} */}
</View>
)}
@ -1315,29 +1326,21 @@ export default class TradeDetail extends Component {
<View className="curtain_content">
<View className="curtain_content_title">
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
<Text className="">物流信息</Text>
<Text className="" style={{ marginLeft: '6px' }}>物流信息</Text>
</View>
<View className="receiver_name">
{'顺丰快递' || info.receiver_name}：{'SF000000000000' || info.receiver_phone}
{info.delivery_corp_name}：{info.delivery_code}
</View>
<ScrollView scrollY
scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
<View class="receiver_item">
{deliveryList.map((item, index) => <View class="receiver_item" key={`item_${index}`}>
<View className="receiver_item_left">
02-01 12:00
{item.content}
</View>
<View className="receiver_item_right">
测试--快件达[上海长宁兆丰店]
{item.title}
</View>
</View>
<View class="receiver_item">
<View className="receiver_item_left">
02-01 14:00
</View>
<View className="receiver_item_right">
测试--快件达[上海长宁xx店]
</View>
</View>
</View>)}
</ScrollView>
</View>
</AtCurtain>

9
src/subpage/pages/trade/detail.scss
View File

@ -457,7 +457,7 @@ $paddingBottom: 100px;
width: 100%;
height: 100px;
// bottom: $edge-margin;
bottom: 30px;
bottom: 0;
background: #fff;
display: flex;
justify-content: space-evenly;
@ -516,6 +516,7 @@ $paddingBottom: 100px;
position: initial;
transform: inherit;
margin: 0 20px;
margin-bottom: 80px;
width: calc(100% - 40px);
}
}
@ -744,17 +745,17 @@ $paddingBottom: 100px;
.receiver_item {
display: flex;
box-sizing: border-box;
font-style: 20px;
font-size: 20px;
&:not(:last-child) {
margin-bottom: 30px;
}
&_left {
width: 190px;
font-style: 20px;
font-size: 20px;
}
&_right {
flex: 1;
font-style: 20px;
font-size: 20px;
}
}
}

40
src/subpage/pages/trade/invoice-info.js
View File

@ -5,7 +5,8 @@ import { Loading, SpPage, SpPrice, SpCheckboxNew } from '@/components'
import api from '@/api'
import { classNames, navigateTo } from '@/utils'
import { AtModal, AtIcon } from 'taro-ui'
// import { log, pickBy, resolveOrderStatus, authSetting } from '@/utils'
import { log, pickBy, resolveOrderStatus, authSetting } from '@/utils'
import doc from '@/doc'
import './invoice-info.scss'
import { useImmer } from 'use-immer'
@ -82,6 +83,41 @@ function InvoiceInfo (props) {
draft.visible = false
})
}
const handleInvoiceClick = () => {
authSetting('invoiceTitle', async () => {
const res = await Taro.chooseInvoiceTitle()
if (res.errMsg === 'chooseInvoiceTitle:ok') {
log.debug('[invoice] info:', res)
const {
type,
content,
company_address,
bankname,
bankaccount,
company_phone,
registration_number
} = pickBy(res, doc.checkout.INVOICE_TITLE)
let invoice_parmas = {
invoice_type: 'normal',
invoice_content: {
title: type == 0 ? 'unit' : 'individual',
content,
company_address,
registration_number,
bankname,
bankaccount,
company_phone
}
}
console.log("🚀 ~ invoice_parmas:", invoice_parmas)
// setState((draft) => {
// draft.invoiceTitle = content
// draft.paramsInfo = { ...paramsInfo, ...invoice_parmas }
// })
}
})
}
return <SpPage className='page-invoice-info has-navbar' navigationBarTitleText='开票信息'>
<View className="info-bd">
@ -93,7 +129,7 @@ function InvoiceInfo (props) {
{showDetail ? <View className='flex'>
<Text className='ck'>查看</Text>
<AtIcon value='chevron-right' size='18' color='#000'></AtIcon>
</View> : <Text className='sq'>一键授权微信发票</Text>}
</View> : <Text className='sq' onClick={handleInvoiceClick}>一键授权微信发票</Text>}
</View>
</View>
{showDetail && <View className="info-item">

2
src/subpage/pages/trade/invoice-list.js
View File

@ -45,7 +45,7 @@ export default class InvoiceList extends Component {
tid: 'order_id',
status_desc: 'order_status_msg',
status: ({ order_status }) => resolveOrderStatus(order_status),
totalItems: ({ items }) => items.reduce((acc, item) => +item.num + acc, 0),
totalItems: ({ items }) => items?.reduce((acc, item) => +item.num + acc, 0),
payment: ({ total_fee }) => (total_fee / 100).toFixed(2),
pay_type: 'pay_type',
point: 'point',

183
src/subpage/pages/trade/list.js
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { View, ScrollView, Text } from '@tarojs/components'
import { connect } from 'react-redux'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { AtTabs, AtTabsPane, AtCurtain } from 'taro-ui'
import _mapKeys from 'lodash/mapKeys'
import { Loading, SpNote, SpNavBar, SpPage } from '@/components'
import { Loading, SpNote, SpNavBar, SpPage, SpImage } from '@/components'
import api from '@/api'
import { withPager } from '@/hocs'
import {
@ -15,7 +15,8 @@ import {
classNames,
isNavbar,
getBrowserEnv,
VERSION_PLATFORM
VERSION_PLATFORM,
formatDateTime
} from '@/utils'
import { Tracker } from '@/service'
import TradeItem from './comps/new-item'
@ -44,7 +45,11 @@ export default class TradeList extends Component {
evaluate: 1,
list: [],
rate_status: false,
curItemActionsId: null
curItemActionsId: null,
showDeliveryModal: false,
deliveryList: [],
deliveryName: '',
deliveryCode: ''
}
}
@ -52,7 +57,8 @@ export default class TradeList extends Component {
const { status = 0, evaluate = 1 } = this.$instance.router.params
const _tabList = JSON.parse(JSON.stringify(this.state.tabList))
if (evaluate == 1) {
_tabList.push({ title: '待评价', status: '7', is_rate: 0 })
// _tabList.push({ title: '待评价', status: '7', is_rate: 0 })
_tabList.push({ title: '已完成', status: '7', is_rate: 0 })
_tabList.push({ title: '售后', status: '---', is_rate: 0 })
}
const tabIdx = _tabList.findIndex((tab) => tab.status === status)
@ -80,7 +86,10 @@ export default class TradeList extends Component {
onPullDownRefresh = () => {
Tracker.dispatch('PAGE_PULL_DOWN_REFRESH')
this.refresh()
}
refresh = () => {
Taro.showLoading({
title: '加载中',
icon: 'none'
@ -98,6 +107,24 @@ export default class TradeList extends Component {
this.hideLayer()
}
calcTimer (totalSec) {
let remainingSec = totalSec
const dd = Math.floor(totalSec / 24 / 3600)
remainingSec -= dd * 3600 * 24
const hh = Math.floor(remainingSec / 3600)
remainingSec -= hh * 3600
const mm = Math.floor(remainingSec / 60)
remainingSec -= mm * 60
const ss = Math.floor(remainingSec)
return {
dd,
hh,
mm,
ss
}
}
async fetch (params) {
const { tabList, curTabIdx } = this.state
@ -116,19 +143,39 @@ export default class TradeList extends Component {
}
)
const {
list,
pager: { count: total },
rate_status
} = await api.trade.list(params)
let list = [],
total = 0,
rate_status = false
if (params.status === '---') {
params.aftersales_status = 0
const { list: _list, total_count: _total } = await api.aftersales.list(params)
list = _list
total = _total
rate_status = true
} else {
const {
list: _list,
pager: { count: _total },
rate_status: _rate_status
} = await api.trade.list(params)
list = _list
total = _total
rate_status = _rate_status
}
let nList = pickBy(list, {
tid: 'order_id',
status_desc: 'order_status_msg',
order_status_des: 'order_status_des',
aftersales_bn: ({ aftersales_bn, aftersales }) => {
return aftersales_bn || aftersales?.aftersales_bn
},
aftersales_type: ({ aftersales }) => {
return aftersales?.aftersales_type
},
status: ({ order_status }) => resolveOrderStatus(order_status),
totalItems: ({ items }) => items.reduce((acc, item) => +item.num + acc, 0),
totalItems: ({ items }) => items?.reduce((acc, item) => +item.num + acc, 0),
// payment: ({ item_fee_new }) => (item_fee_new / 100).toFixed(2),
payment: ({ total_fee }) => (+total_fee / 100).toFixed(2),
payment: ({ total_fee, refund_fee }) => ((+total_fee || refund_fee) / 100).toFixed(2),
total_fee: 'total_fee',
pay_type: 'pay_type',
point: 'point',
@ -138,7 +185,9 @@ export default class TradeList extends Component {
type: 'type',
is_rate: 'is_rate',
dada: 'dada',
create_date: 'create_date',
create_date: ({ create_date, create_time }) => {
return create_date || formatDateTime(create_time * 1000)
},
is_all_delivery: 'is_all_delivery',
is_logistics: 'is_split',
receipt_type: 'receipt_type',
@ -153,8 +202,8 @@ export default class TradeList extends Component {
orders_delivery_id: 'orders_delivery_id',
order_type: 'order_type',
can_apply_cancel: 'can_apply_cancel',
order: ({ items }) =>
pickBy(items, {
order: ({ items, detail }) =>
pickBy(items || detail, {
order_id: 'order_id',
item_id: 'item_id',
pic_path: 'pic',
@ -169,7 +218,8 @@ export default class TradeList extends Component {
point: 'item_point',
num: 'num',
order_item_type: 'order_item_type'
})
}),
timer: ({ auto_cancel_time, create_time }) => auto_cancel_time > parseInt(new Date().getTime() / 1000) ? this.calcTimer(auto_cancel_time - parseInt(new Date().getTime() / 1000)) : null
})
log.debug('[trade list] list fetched and processed: ', nList)
@ -206,9 +256,11 @@ export default class TradeList extends Component {
}
handleClickItem = (trade) => {
const { tid } = trade
const { tid, aftersales_bn } = trade
let url = `/subpage/pages/trade/detail?id=${tid}`
if (aftersales_bn) {
url = `/subpages/trade/after-sale?aftersales_bn=${aftersales_bn}&id=${tid}`
}
if (trade.order_class === 'pointsmall') {
url += `&type=pointitem`
@ -221,7 +273,7 @@ export default class TradeList extends Component {
handleClickItemBtn = async (trade, type) => {
console.log(trade)
const { tid } = trade
const { tid, aftersales_bn } = trade
let detailUrl = `/subpage/pages/trade/detail?id=${tid}`
@ -249,6 +301,11 @@ export default class TradeList extends Component {
url: `/marketing/pages/item/rate?id=${tid}`
})
break
case 'aftersales':
Taro.navigateTo({
url: `/subpages/trade/after-sale?id=${tid}&aftersales_bn=${aftersales_bn || ''}`
})
break
case 'delivery':
{
let {
@ -261,16 +318,17 @@ export default class TradeList extends Component {
tid,
order_type
} = trade
if (is_all_delivery || delivery_type === 'old') {
Taro.navigateTo({
url: `/subpage/pages/trade/delivery-info?delivery_id=${orders_delivery_id}&delivery_code=${delivery_code}&delivery_corp=${delivery_corp}&delivery_name=${delivery_corp_name || delivery_corp
}&delivery_type=${delivery_type}&order_type=${order_type}&order_id=${tid}`
})
} else {
Taro.navigateTo({
url: `/subpage/pages/trade/split-bagpack?order_type=${order_type}&order_id=${tid}`
})
}
this.handleClickDelivery(true, trade)
// if (is_all_delivery || delivery_type === 'old') {
// Taro.navigateTo({
// url: `/subpage/pages/trade/delivery-info?delivery_id=${orders_delivery_id}&delivery_code=${delivery_code}&delivery_corp=${delivery_corp}&delivery_name=${delivery_corp_name || delivery_corp
// }&delivery_type=${delivery_type}&order_type=${order_type}&order_id=${tid}`
// })
// } else {
// Taro.navigateTo({
// url: `/subpage/pages/trade/split-bagpack?order_type=${order_type}&order_id=${tid}`
// })
// }
}
break
default:
@ -280,13 +338,38 @@ export default class TradeList extends Component {
}
}
handleClickDelivery = async (flag, trade) => {
if (flag) {
Taro.showLoading({ title: '' })
let { delivery_type, delivery_id, order_type, tid: order_id } = trade
let list = []
if (delivery_type !== 'new') {
list = await api.trade.deliveryInfoNew({ delivery_id })
} else {
list = await api.trade.deliveryInfo(order_type, order_id)
}
const nList = pickBy(list, {
title: 'AcceptStation',
content: ({ AcceptTime }) => AcceptTime ? AcceptTime.substring(5, 16) : ''
})
this.setState({
deliveryList: nList,
deliveryName: trade.delivery_corp_name,
deliveryCode: trade.delivery_code
})
}
this.setState({ showDeliveryModal: flag })
Taro.hideLoading()
// Taro.navigateTo({
// url: `/subpage/pages/trade/delivery-info?order_type=${this.state.info.order_type}&order_id=${this.state.info.tid}&delivery_code=${this.state.info.delivery_code}&delivery_corp=${this.state.info.delivery_corp}&delivery_name=${this.state.info.delivery_name}`
// })
}
handleActionClick = (type, item) => {
console.log(type, item)
this.hideLayer()
}
handleActionBtnClick = (item) => {
console.log(item)
this.setState({
curItemActionsId: item.tid
})
@ -307,7 +390,12 @@ export default class TradeList extends Component {
list = [],
page,
rateStatus,
evaluate
evaluate,
showDeliveryModal,
deliveryList,
info = {},
deliveryName,
deliveryCode
} = this.state
return (
@ -349,6 +437,7 @@ export default class TradeList extends Component {
onClickBtn={this.handleClickItemBtn.bind(this, item)}
onActionBtnClick={this.handleActionBtnClick.bind(this, item)}
onActionClick={this.handleActionClick.bind(this, item)}
onTimeUp={this.refresh}
/>
)
})}
@ -360,6 +449,34 @@ export default class TradeList extends Component {
)}
{!!curItemActionsId && <View className='layer' onClick={this.hideLayer} />}
</ScrollView>
<AtCurtain
className='curtain'
isOpened={showDeliveryModal}
onClose={() => {
this.setState({ showDeliveryModal: false })
}}
>
<View className="curtain_content">
<View className="curtain_content_title">
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
<Text className="" style={{ marginLeft: '6px' }}>物流信息</Text>
</View>
<View className="receiver_name">
{deliveryName}：{deliveryCode}
</View>
<ScrollView scrollY
scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
{deliveryList.map((item, index) => <View class="receiver_item" key={`item_${index}`}>
<View className="receiver_item_left">
{item.content}
</View>
<View className="receiver_item_right">
{item.title}
</View>
</View>)}
</ScrollView>
</View>
</AtCurtain>
</SpPage>
)
}

69
src/subpage/pages/trade/list.scss
View File

@ -148,6 +148,75 @@
color: #000;
}
}
.curtain {
.at-curtain__container {
width: 100%;
padding: 0 30px;
}
.at-curtain__btn-close--bottom {
// display: none;
border: none;
top: 10px;
right: 10px;
left: auto;
&::after,
&::before {
background-color: #000;
}
}
&_content {
width: 100%;
background-color: #fff;
border-radius: 10px;
padding: 100px 46px;
box-sizing: border-box;
&_title {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
line-height: 1;
margin-bottom: 80px;
color: #000;
.sp-image {
margin-right: 4px;
}
}
.receiver_name {
font-size: 26px;
color: #000;
margin: 80px 0;
}
&_text {
line-height: 1.4;
height: 650px;
color: #000;
font-size: 26px;
.receiver_item {
display: flex;
box-sizing: border-box;
font-size: 20px;
&:not(:last-child) {
margin-bottom: 30px;
}
&_left {
width: 190px;
font-size: 20px;
}
&_right {
flex: 1;
font-size: 20px;
}
}
}
}
.no-text {
color: #7e7e7e;
font-size: 20rpx;
margin-top: 28rpx;
line-height: 1.4;
}
}
}
// .trade-item__hd-cont{

22
src/subpages/member/index.js
View File

@ -304,6 +304,15 @@ function MemberIndex (props) {
const resAssets = await api.member.memberAssets()
const { discount_total_count, fav_total_count, point_total_count } = resAssets
// aftersales: 0 //待处理的售后总数
// aftersales_pending: 0 //待处理的售后
// aftersales_processing: 0 //处理中售后
// normal_not_rate: 3 //待评价
// normal_notpay_notdelivery: 0 // 未付款未发货
// normal_payed_daifahuo: 4 // 待发货
// normal_payed_daishouhuo: 0 // 待收货
// normal_payed_daiziti: 0 //待自提订单
// normal_payed_notdelivery: 4 // 已付款未发货 or 已付款已发货
const {
aftersales, // 待处理售后
@ -603,9 +612,9 @@ function MemberIndex (props) {
>
<View className='order-item-view'>
<SpImage src='member/daishouhuo.png' className='icon-style' isNew />
{state.waitEvaluateNum > 0 && (
{state.waitRecevieNum > 0 && (
<View className='order-bradge'>
<Text>{state.waitEvaluateNum}</Text>
<Text>{state.waitRecevieNum}</Text>
</View>
)}
<Text className='order-txt'>待收货</Text>
@ -617,15 +626,16 @@ function MemberIndex (props) {
>
<View className='order-item-view'>
<SpImage src='member/yiwancheng.png' className='icon-style' isNew />
{state.afterSalesNum > 0 && (
{state.waitEvaluateNum > 0 && (
<View className='order-bradge'>
<Text>{state.afterSalesNum}</Text>
<Text>{state.waitEvaluateNum}</Text>
</View>
)}
<Text className='order-txt'>已完成</Text>
</View>
</SpLogin>
<SpLogin
{/* 先隐藏评价功能 02-24 */}
{false && <SpLogin
className='order-item'
// /subpage/pages/trade/after-sale
onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
@ -639,7 +649,7 @@ function MemberIndex (props) {
)}
<Text className='order-txt'>评价</Text>
</View>
</SpLogin>
</SpLogin>}
</View>
</CompPanel>

1
src/subpages/member/index.scss
View File

@ -155,6 +155,7 @@
padding: 30px 16px 50px;
.comp-panel {
&-bd {
padding: 24px 50px;
margin-top: 20px;
}
.extra {

350
src/subpages/trade/after-sale.js
View File

@ -4,16 +4,16 @@ import { useImmer } from "use-immer"
import Taro, { getCurrentInstance } from "@tarojs/taro"
import api from "@/api"
import doc from "@/doc"
import { AtButton, AtInput, AtTextarea } from 'taro-ui'
import { AtButton, AtInput, AtCurtain, AtCountdown } from 'taro-ui'
import { SpPage, SpTabs, SpCell, SpCheckbox, SpImage, SpInputNumber, SpFloatLayout, SpUpload, SpPrice, SpHtml, SpOrderItem } from '@/components'
import { View, Text, Picker } from "@tarojs/components"
import { AFTER_SALE_TYPE, REFUND_FEE_TYPE } from '@/consts'
import { pickBy, showToast, classNames, VERSION_STANDARD, VERSION_PLATFORM, JumpGoodDetail } from '@/utils'
import { View, Text, Picker, Input, ScrollView } from "@tarojs/components"
import { AFTER_SALE_TYPE, REFUND_FEE_TYPE, LOGISTICS_CODE } from '@/consts'
import { pickBy, showToast, classNames, VERSION_STANDARD, VERSION_PLATFORM, JumpGoodDetail, copyText } from '@/utils'
import "./after-sale.scss"
const initialState = {
info: null,
curTabIdx: 0,
curTabIdx: 1,
tabList: AFTER_SALE_TYPE,
reasonIndex: '',
reasons: [],
@ -34,15 +34,27 @@ const initialState = {
afterSaleDesc: {
intro: '',
is_open: false
}
},
afterSaleChecked: {},
afterSaleTotalNum: 0,
allClicked: false,
afterSaleTotalprice: 0,
loading: true,
isOpened: false,
isAddrOpened: false,
aftersales: null,
expressList: [],
corpIndex: null,
logi_no: ''
}
function TradeAfterSale (props) {
const $instance = getCurrentInstance()
const { aftersales_bn: afterSaleTid } = $instance.router.params
const [state, setState] = useImmer(initialState)
const pageRef = useRef()
const { info, curTabIdx, tabList, reasonIndex, reasons, refundFee, refundPoint, refundType, refundTypeList, description, pic, openRefundType, selectRefundValue,
refundStore, contact, mobile, afterSaleDesc, offlineAftersalesIsOpen, offlineAftersales } = state
refundStore, contact, mobile, afterSaleDesc, offlineAftersalesIsOpen, offlineAftersales, afterSaleTotalNum, allClicked, afterSaleTotalprice, loading, isOpened, isAddrOpened, aftersales, expressList, corpIndex, logi_no } = state
useEffect(() => {
fetch()
@ -52,6 +64,15 @@ function TradeAfterSale (props) {
draft.refundStore = item
})
})
const _expressList = Object.keys(LOGISTICS_CODE).map(key => {
return {
name: LOGISTICS_CODE[key],
code: key
}
})
setState(draft => {
draft.expressList = _expressList
})
return () => {
Taro.eventCenter.off('onEventPickerStore')
@ -70,8 +91,63 @@ function TradeAfterSale (props) {
Taro.navigateBack()
}
const onSubmitExp = async () => {
const { item_id, orderId: order_id, afterSalesBn: aftersales_bn } = aftersales
const corp_code = expressList[corpIndex]?.code
if (!corp_code) {
showToast('请填写物流公司')
return
}
if (!logi_no) {
showToast('请填写物流单号')
return
}
await api.aftersales.sendback({
item_id,
order_id,
aftersales_bn,
logi_no,
corp_code
})
showToast('操作成功')
setTimeout(() => {
// Taro.navigateBack()
fetch()
}, 300)
}
const onChangeExpress = (e) => {
const { value } = e.detail
setState(draft => {
draft.corpIndex = value
})
}
const getLogisticName = () => {
const { name } = expressList[corpIndex] || {}
return name
}
const fetch = async () => {
const { id } = $instance.router.params
const { id, aftersales_bn } = $instance.router.params
if (aftersales_bn) {
const resInfo = await api.aftersales.info({
aftersales_bn,
// item_id,
// order_id
})
const _aftersales = pickBy(resInfo, doc.trade.TRADE_AFTER_SALES_ITEM)
console.log("🚀 ~ _aftersales:", _aftersales)
if (_aftersales.sendbackData) {
const { corp_code } = _aftersales.sendbackData
_aftersales.sendbackData.name = LOGISTICS_CODE[corp_code]
}
setState(draft => {
draft.aftersales = _aftersales
draft.afterSaleTotalNum = _aftersales.items.reduce((sum, { num }) => sum + num, 0)
draft.afterSaleTotalprice = _aftersales.items.reduce((sum, { price }) => sum + price, 0)
})
}
const { orderInfo, offline_aftersales_is_open, distributor } = await api.trade.detail(id)
const reasons = await api.aftersales.reasonList()
const { intro, is_open } = await api.aftersales.remindDetail()
@ -90,17 +166,29 @@ function TradeAfterSale (props) {
draft.refundTypeList = REFUND_FEE_TYPE.filter(item => item.value != 'offline')
draft.refundType = 'logistics'
}
draft.loading = false
})
}
const onChangeItemCheck = (item, index, e) => {
const onChangeItemCheck = (item, index, type) => {
// const _info = info
// _info.items[index].checked = e
setState(draft => {
draft.info.items[index].checked = e
if (type === 'all') {
draft.allClicked = !allClicked
draft.info.items.map((_item) => {
_item.checked = !allClicked
})
} else {
draft.info.items[index].checked = !item.checked
}
draft.allClicked = draft.info.items.every((item) => item.checked)
draft.afterSaleTotalNum = draft.info.items.filter((_item) => _item.checked).reduce((sum, { num }) => sum + num, 0)
draft.afterSaleTotalprice = draft.info.items.filter((_item) => _item.checked).reduce((sum, { price }) => sum + price, 0)
})
}
const onChangeItemNum = (e, index) => {
setState(draft => {
draft.info.items[index].refundNum = e
})
@ -147,15 +235,15 @@ function TradeAfterSale (props) {
}
if (!reasons?.[reasonIndex]) {
return showToast('请选择售后原因')
return showToast('请选择退货原因')
}
const aftersales_type = tabList[curTabIdx].type
const reason = reasons?.[reasonIndex]
let params = {
detail: checkedItems.map(({ id: _id, refundNum }) => {
detail: checkedItems.map(({ id: _id, refundNum, num }) => {
return {
id: _id,
num: refundNum
num: num || refundNum
}
}),
order_id: id,
@ -193,19 +281,29 @@ function TradeAfterSale (props) {
await api.aftersales.apply(params)
showToast('提交成功')
setTimeout(() => {
Taro.redirectTo({
url: `/subpage/pages/trade/detail?id=${id}`
})
}, 200)
// Taro.redirectTo({
// url: `/subpage/pages/trade/detail?id=${id}`
// })
// fetch()
Taro.navigateBack()
}, 500)
}
return <SpPage ref={pageRef} className='page-trade-after-sale' renderFooter={
<View className='btn-wrap'>
<AtButton circle type='primary' onClick={onSubmit}>提交</AtButton>
</View>
const handleClickCopy = (val) => {
copyText(val)
Taro.showToast({
title: '复制成功',
icon: 'none'
})
}
return <SpPage ref={pageRef} loading={loading} className='page-trade-after-sale has-navbar' isBlack showNavSearchIcon renderFooter={
!loading && !afterSaleTid ? <View className='btn-wrap'>
<AtButton type='primary' onClick={onSubmit}>提交售后申请</AtButton>
</View> : null
}
>
<View className="after-item">
{!afterSaleTid ? <View className="after-item">
<View className="after-item-label">请选择售后类型:</View>
<Picker
mode='selector'
@ -221,25 +319,79 @@ function TradeAfterSale (props) {
<View className="iconfont icon-arrowRight" style={{ color: tabList[curTabIdx] > -1 ? '#000' : '#a5a5a5' }}></View>
</View>
</Picker>
</View> : aftersales?.progress != 12 ? <View className="after-item">
<View className="after-item-label">售后单号：{afterSaleTid}</View>
<View className="after-item-label" style={{ fontSize: '30rpx', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', opacity: '80', margin: '36rpx 0 50rpx 0', lineHeight: '0.8' }}>
<Text style={{ marginRight: '20rpx', fontWeight: 'bold' }}>{['', '售后审核通过，请您发货并填写物流单号', '等待商家确认收货', '已驳回', '已完成', '退款驳回', '退款完成', '已关闭', '商家确认收货,等待审核退款', '退款处理中'][aftersales?.progress || 0]}</Text>
<View style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
{/* <View style={{ fontSize: '20rpx', textAlign: 'end' }}>还剩<AtCountdown
format={{ day: '天', hours: '时', minutes: '分', seconds: '' }}
isShowDay
day={1}
hours={23}
minutes={59}
seconds={0}
/></View> */}
<Text onClick={() => setState(draft => { draft.isOpened = true })} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', padding: '0 0 4rpx' }}>全部流程</Text>
</View>
</View>
</View> : null}
<View className="after-item" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: '30rpx' }}>
<Text style={{ fontSize: '24rpx', marginTop: '-10rpx' }}>退货单号填写</Text>
{aftersales?.hasAftersalesAddress && <Text onClick={() => setState(draft => { draft.isAddrOpened = true })} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', padding: '0 0 4rpx', marginTop: '-10rpx', lineHeight: 0.8 }}>查看退货地址</Text>}
</View>
<View className="after-item mt-40" style={{ marginBottom: '50rpx' }}>
{!aftersales?.hasSendbackData ? <Picker
mode='selector'
rangeKey='name'
range={expressList}
onChange={onChangeExpress}
>
<View className="after-item-input">
<View className={`input-txt`}>{`${getLogisticName() || '请选择快递公司'}`}</View>
<View className="iconfont icon-arrowRight" style={{ color: getLogisticName() ? '#000' : '#a5a5a5' }}></View>
</View>
</Picker> : <View className="after-item-input">
<View className={`input-txt color-hui`}>{`${aftersales?.sendbackData?.name || ''}`}</View>
</View>}
</View>
<View className="after-item mt-40" style={{ marginBottom: '50rpx' }}>
<View className="after-item-input">
{!aftersales?.hasSendbackData ? <Input className="desc-ipt" value={logi_no} placeholder='物流单号' onInput={(e) => {
setState(draft => {
draft.logi_no = e.detail.value
})
}}></Input>
:
<View className={`input-txt color-hui`}>{`${aftersales?.sendbackData?.logi_no || ''}`}</View>}
</View>
</View>
<View style={{ margin: '0 auto', marginBottom: '70rpx', textAlign: 'center' }}>
{/* <AtButton type='primary' onClick={onSubmitExp}>确认上传</AtButton> */}
<Text onClick={() => handleClickCopy(aftersales?.sendbackData?.logi_no || '')} style={{ fontSize: '20rpx', borderBottom: '1px solid #000', lineHeight: 0.8 }}>复制物流单号</Text>
</View>
{/* <SpTabs current={curTabIdx} tablist={tabList} onChange={(e) => {
setState(draft => {
draft.curTabIdx = e
})
}} /> */}
<View className="choose-item">请选择您要退货的商品</View>
<View className="choose-all">
<SpCheckbox label='全选' checked={false} onChange={() => { }} />
</View>
{!afterSaleTid ? <>
<View className="choose-item">请选择您要退货的商品</View>
<View className="choose-all">
<SpCheckbox label='全选' checked={allClicked} onChange={onChangeItemCheck.bind(this, null, null, 'all')} />
</View>
</> : <Text className="choose-item" style={{ fontSize: '30rpx', fontWeight: 'bold' }}>已选择的退货商品</Text>}
<View className='refund-items'>
<View className='items-container'>
{
info?.items.map((item, index) => (
<View className="item-box">
(aftersales?.items || info?.items || []).map((item, index) => (
<View className="item-box" onClick={onChangeItemCheck.bind(this, item, index)}>
<View className='item-wrap' key={`item-wrap__${index}`}>
<View className='item-hd'>
<SpCheckbox disabled={item.leftAftersalesNum} checked={item.checked} onChange={onChangeItemCheck.bind(this, item, index)} />
</View>
{!afterSaleTid && <View className='item-hd'>
<SpCheckbox checked={item.checked} onChange={onChangeItemCheck.bind(this, item, index)} />
</View>}
<View className='item-bd'>
{/* <SpOrderItem
key={`item__${index}`}
@ -267,28 +419,28 @@ function TradeAfterSale (props) {
</View>
<View className='goods-info-ft'>
<Text>数量：{item.num}</Text>
<SpPrice size={20} value={item.price / item.num} showSeparator noDecimal />
<SpInputNumber
<SpPrice size={20} value={item.price / item.num} showSeparator noDecimal={false} />
{/* <SpInputNumber
disabled={!item.leftAftersalesNum}
value={item.refundNum}
max={item.leftAftersalesNum}
min={1}
onChange={(e) => onChangeItemNum(e, index)}
/>
/> */}
</View>
</View>
</View>
</View>
<SpPrice value={item.price} showSeparator noDecimal />
<SpPrice value={item.price} showSeparator noDecimal={false} />
</View>
))
}
</View>
</View>
<View className="after-item mt-40">
<View className="after-item-label color-hui">退货原因:</View>
<Picker
<View className="after-item mt-40" style={{ marginTop: '60rpx' }}>
<View className="after-item-label color-hui">退货原因</View>
{!afterSaleTid ? <Picker
mode='selector'
range={reasons}
onChange={(e) => {
@ -298,16 +450,18 @@ function TradeAfterSale (props) {
}}
>
<View className="after-item-input">
<View className="input-txt">{`${reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
<View className={`input-txt`}>{`${reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
<View className="iconfont icon-arrowRight" style={{ color: reasons?.[reasonIndex] ? '#000' : '#a5a5a5' }}></View>
</View>
</Picker>
</Picker> : <View className="after-item-input">
<View className={`input-txt color-hui`}>{`${aftersales?.reason || reasons?.[reasonIndex] || '请选择退货原因'}`}</View>
</View>}
</View>
<View className="after-item mt-40">
<View className="after-item-label color-hui">退货数量:</View>
<View className="after-item-label color-hui">退货数量*</View>
<View className="after-item-input">
<View className="input-txt color-hui">{`${reasons?.[reasonIndex] || '请选择退货数量'}`}</View>
<View className="input-txt color-hui">{`${afterSaleTotalNum || '请选择退货数量'}`}</View>
</View>
</View>
@ -338,7 +492,7 @@ function TradeAfterSale (props) {
</View>
</View>}
{curTabIdx == 1 && <View className='return-goods-type'>
{/* {curTabIdx == 1 && <View className='return-goods-type'>
<SpCell border title='退货方式' value={getRefundTypeName()} isLink onClick={() => {
setState(draft => {
draft.openRefundType = true
@ -377,19 +531,28 @@ function TradeAfterSale (props) {
/>}></SpCell>
</>
}
</View>}
</View>} */}
<View className='desc-container'>
<View className='title'>补充描述</View>
<View className='desc-content'>
<Text className='iconfont icon-bianji1'></Text>
<AtTextarea type='textarea' name='description' value={description} placeholder='请输入您的补充描述（选填）' maxLength={200} onChange={(e) => {
<View className='title'>
<Text>退货商品{afterSaleTotalNum}件</Text>
<Text>退款金额：<SpPrice size={30} value={afterSaleTotalprice} showSeparator noDecimal={false} /></Text>
</View>
{!afterSaleTid ? <View className='desc-content'>
{/* <Text className='iconfont icon-bianji1'></Text> */}
{/* <AtTextarea type='textarea' name='description' value={description} placeholder='在此填写备注要求' maxLength={200} onChange={(e) => {
setState(draft => {
draft.description = e
})
}} />
}} /> */}
<Input className="desc-ipt" value={description} placeholder='在此填写备注要求' onInput={(e) => {
setState(draft => {
draft.description = e.detail.value
})
}}></Input>
</View>
<SpUpload
: <View style={{ opacity: '0.8', fontSize: '24rpx' }}>备注：{aftersales?.description || description}</View>}
{/* <SpUpload
value={pic}
max={3}
onChange={(val) => {
@ -397,7 +560,7 @@ function TradeAfterSale (props) {
draft.pic = val
})
}}
/>
/> */}
</View>
{
@ -441,6 +604,89 @@ function TradeAfterSale (props) {
</View>
))}
</SpFloatLayout>
<AtCurtain
className='curtain'
isOpened={isOpened}
onClose={() => {
setState((draft) => {
draft.isOpened = false
})
}}
>
<View className="curtain_content">
<View className="curtain_content_title">
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
<Text style={{ marginLeft: '6px' }}>退货流程</Text>
</View>
<View className={`receiver_name ${false && 'active'}`}>提交申请</View>
<View className={`receiver_name ${aftersales?.progress == 0 && 'active'}`} style={{ display: 'flex', alignItems: 'flex-end' }}>
<Text style={{ marginRight: '36px' }}>商家处理</Text>
{/* <View style={{ color: '#000', fontSize: '20rpx' }}>还剩<AtCountdown
format={{ day: '天', hours: '时', minutes: '分', seconds: '' }}
isShowDay
day={1}
hours={23}
minutes={59}
seconds={0}
/></View> */}
</View>
<View className="receiver_name op">商家同意后，请按照给出的退货地址退货，并请记录退货运单</View>
<View className="receiver_name op">如商家拒绝，您可以修改申请后再次发起，商家会重新处理</View>
<View className="receiver_name op" style={{ marginBottom: '50rpx' }}>如商家超时未处理，退货申请将达成，请按系统给出的退货地址退货</View>
<View className={`receiver_name ${[2].includes(aftersales?.progress) && 'active'}`}>寄回商品</View>
<View className={`receiver_name ${aftersales?.progress == 4 && aftersales?.aftersalesStatus != 2 && 'active'}`}>商家退款</View>
<View className={`receiver_name ${aftersales?.progress == 4 && aftersales?.aftersalesStatus == 2 && 'active'}`}>退款成功</View>
<View className="line"></View>
<View className="curtain_content_text">
<View className="curtain_content_text_title">温馨提示</View>
<View class="receiver_item">
BIRKENSTOCK支持七天(从收到商品之日起开始计算)无理由退换货如需退换货，退回货品需不影响二次销售原装鞋盒务必完好(如鞋盒有遗失需补偿20元)。试穿时需将鞋盒内的包装纸垫于脚下，过程中不刻意踩踏后跟如鞋面或鞋底出现脏污、磨损、破损，鞋跟出现折痕等，都将影响商品的二次销售。我们将无法为您提供七天无理由退换货服务，敬请谅解。如果您还有其他问题或需要更多帮助，可及时联系客服，我们将竭诚为您服务(特别提示:仓库不接受到付、平邮、邮政小包。)
</View>
</View>
<AtButton type='primary' onClick={() => setState((draft) => { draft.isOpened = false })}>我知道了</AtButton>
</View>
</AtCurtain>
<AtCurtain
className='curtain'
isOpened={isAddrOpened}
onClose={() => {
setState((draft) => {
draft.isAddrOpened = false
})
}}
>
<View className="curtain_content">
<View className="curtain_content_title">
<SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
<Text style={{ marginLeft: '6px' }}>退货地址</Text>
</View>
<View className={`addr_item`}>
<View className="addr_item_left">收件人</View>
<View className="addr_item_right">{aftersales?.afterSalesContact}</View>
</View>
<View className={`addr_item`}>
<View className="addr_item_left">联系电话</View>
<View className="addr_item_right">{aftersales?.afterSalesMobile}</View>
</View>
<View className={`addr_item`}>
<View className="addr_item_left">收件地址</View>
<View className="addr_item_right">{aftersales?.afterSalesAddress}</View>
</View>
<View className={`addr_item`}>
<View className="addr_item_left">邮编</View>
<View className="addr_item_right">{aftersales?.afterSalesZip}</View>
</View>
<View className="fuzhi">复制地址</View>
<View className="line" style={{ margin: '130rpx 0 110rpx 0' }}></View>
<View className="curtain_content_text">
<View className="curtain_content_text_title">温馨提示</View>
<View class="receiver_item">
BIRKENSTOCK支持七天(从收到商品之日起开始计算)无理由退换货如需退换货，退回货品需不影响二次销售原装鞋盒务必完好(如鞋盒有遗失需补偿20元)。试穿时需将鞋盒内的包装纸垫于脚下，过程中不刻意踩踏后跟如鞋面或鞋底出现脏污、磨损、破损，鞋跟出现折痕等，都将影响商品的二次销售。我们将无法为您提供七天无理由退换货服务，敬请谅解。如果您还有其他问题或需要更多帮助，可及时联系客服，我们将竭诚为您服务(特别提示:仓库不接受到付、平邮、邮政小包。)
</View>
</View>
</View>
</AtCurtain>
</SpPage>
}

181
src/subpages/trade/after-sale.scss
View File

@ -1,6 +1,10 @@
.page-trade-after-sale {
.sp-page-body {
padding-bottom: 50px;
}
.after-item {
padding: 0 22px;
margin-top: 30px;
&.mt-40 {
margin-top: 40px;
}
@ -11,7 +15,7 @@
margin-bottom: 20px;
}
.color-hui {
background: #f5f5f5;
color: #00000060;
}
&-input {
box-sizing: border-box;
@ -31,8 +35,27 @@
}
}
}
.at-countdown {
line-height: 30px;
&__item:last-child {
display: none;
}
&__time-box {
font-size: 20px;
font-family: inherit;
font-weight: normal;
}
&__separator {
padding: 0;
font-size: 22px;
}
}
.btn-wrap {
padding: 20px;
padding: 50px;
margin-bottom: 100px;
.at-button__text {
font-size: 36px;
}
}
.comp-trade-info {
margin-top: 20px;
@ -70,8 +93,14 @@
display: flex;
padding-left: 54px;
box-sizing: border-box;
.sp-checkbox-new .icon-checkbox-weixuan,
.sp-checkbox-new .icon-checkbox-xuanzhong {
color: #00000090;
font-size: 30px;
}
.sp-checkbox-new__label {
font-style: 26px;
font-size: 26px;
}
}
.reason-container {
@ -94,7 +123,11 @@
}
.items-container {
// padding: 0 32px 20px;
padding: 24px 0;
// padding: 24px 0;
margin-top: 30px;
&:not(:last-child) {
margin-bottom: 10px;
}
}
.item-box {
padding: 30px;
@ -114,6 +147,12 @@
}
.item-hd {
margin-right: 40px;
.sp-checkbox-new .icon-checkbox-weixuan,
.sp-checkbox-new .icon-checkbox-xuanzhong {
color: #00000090;
font-size: 30px;
}
}
.item-bd {
flex: 1;
@ -250,13 +289,22 @@
}
.desc-container {
background-color: #fff;
margin: 24px 16px 0;
margin: 24px 22px 0;
padding-bottom: 30px;
border-radius: 16px;
.desc-content {
margin: 0 32px;
padding: 16px 18px;
border: 2px solid #00000090;
border-radius: 6px;
display: flex;
overflow: hidden;
.desc-ipt {
font-size: 26px;
}
.input-placeholder {
color: #a5a5a5;
font-size: 26px;
}
}
.icon-bianji1 {
color: #aaaaaa;
@ -272,8 +320,11 @@
.title {
font-size: 30px;
font-weight: 500;
color: #333;
padding: 28px 32px;
color: #000;
padding: 50px 0 26px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.sp-upload {
@ -381,4 +432,118 @@
margin-left: 30px;
}
}
.curtain {
.at-curtain__container {
width: 100%;
padding: 0 30px;
}
.at-curtain__btn-close--bottom {
// display: none;
border: none;
top: 10px;
right: 10px;
left: auto;
&::after,
&::before {
background-color: #000;
}
}
&_content {
width: 100%;
background-color: #fff;
border-radius: 10px;
padding: 100px 44px 50px;
box-sizing: border-box;
&_title {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
line-height: 1;
margin-bottom: 80px;
color: #000;
.sp-image {
margin-right: 4px;
}
}
.receiver_name {
font-size: 20px;
color: #000;
&:not(:last-child) {
margin-bottom: 34px;
}
&.active {
color: #163586;
font-size: 26px;
}
}
.op {
opacity: 0.6;
}
.line {
padding: 0 30px;
box-sizing: border-box;
height: 2px;
background: #ccc;
margin-top: -10px;
}
.addr_item {
display: flex;
align-items: center;
font-size: 20px;
margin: 24px 0;
&_left {
width: 150px;
font-size: 20px;
}
&_right {
flex: 1;
font-size: 20px;
}
}
.fuzhi {
font-size: 20px;
margin-top: 50px;
border-bottom: 2px solid #000;
line-height: 0.85;
margin: 0 auto;
margin-top: 56px;
text-align: center;
width: 78px;
}
&_text {
line-height: 1.4;
height: 250px;
color: #000;
font-size: 20px;
padding: 60px 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&_title {
font-size: 26px;
color: #000;
margin-bottom: 30px;
}
.receiver_item {
display: flex;
box-sizing: border-box;
font-size: 16px;
text-align: center;
line-height: 1.8;
opacity: 0.8;
}
}
.at-button__text {
font-style: 36px;
}
}
.no-text {
color: #7e7e7e;
font-size: 20rpx;
margin-top: 28rpx;
line-height: 1.4;
}
}
}