546 lines
20 KiB
JavaScript
Executable File
546 lines
20 KiB
JavaScript
Executable File
import Taro, { getCurrentInstance, useDidShow } from '@tarojs/taro'
|
||
import React, { useEffect, useState, useMemo } from 'react'
|
||
import { useSelector, useDispatch } from 'react-redux'
|
||
import { View, Text, ScrollView } from '@tarojs/components'
|
||
import { AtButton } from 'taro-ui'
|
||
import { useImmer } from 'use-immer'
|
||
import qs from 'qs'
|
||
import api from '@/api'
|
||
import doc from '@/doc'
|
||
import { navigateTo, pickBy, classNames, throttle } from '@/utils'
|
||
import { useLogin, useDepChange, useDebounce } from '@/hooks'
|
||
import { fetchCartList, deleteCartItem, updateCartItemNum, updateCount } from '@/store/slices/cart'
|
||
import {
|
||
SpPage,
|
||
SpTabbar,
|
||
SpPrice,
|
||
SpRecommend,
|
||
SpLogin,
|
||
SpDefault,
|
||
SpCheckboxNew,
|
||
SpPrivacyModal,
|
||
SpImage,
|
||
SpGoodsItem
|
||
} from '@/components'
|
||
|
||
import CompGoodsItem from './comps/comp-goodsitem'
|
||
|
||
import './espier-index.scss'
|
||
|
||
// const tablist = [
|
||
// { title: '普通商品', icon: 'icon-putongshangpin-01', type: 'normal' },
|
||
// { title: '跨境商品', icon: 'icon-kuajingshangpin-01', type: 'cross' }
|
||
// ]
|
||
|
||
const initialState = {
|
||
recommendList: [], // 猜你喜欢
|
||
current: 0, // 0:普通商品 1:跨境商品
|
||
policyModal: false, // 隐私弹框
|
||
loading: false
|
||
}
|
||
|
||
function CartIndex () {
|
||
const { isLogin } = useLogin({
|
||
autoLogin: true,
|
||
policyUpdateHook: (isUpdate) => {
|
||
isUpdate && onPolicyChange(true)
|
||
}
|
||
})
|
||
|
||
const dispatch = useDispatch()
|
||
const $instance = getCurrentInstance()
|
||
const router = $instance.router
|
||
|
||
const [state, setState] = useImmer(initialState)
|
||
const { current, recommendList, policyModal, loading } = state
|
||
|
||
const { colorPrimary, openRecommend } = useSelector((state) => state.sys)
|
||
const { validCart = [], invalidCart = [], cartCount } = useSelector((state) => state.cart)
|
||
const { tabbar = 1 } = router?.params || {}
|
||
|
||
// useDepChange(() => {
|
||
// fetch()
|
||
// }, [isLogin])
|
||
|
||
useEffect(() => {
|
||
if (isLogin) fetch()
|
||
}, [isLogin])
|
||
|
||
useDidShow(() => {
|
||
if (isLogin) fetch()
|
||
})
|
||
|
||
const fetch = () => {
|
||
if (openRecommend == 1) {
|
||
}
|
||
getRecommendList() // 猜你喜欢
|
||
if (isLogin) {
|
||
getCartList()
|
||
}
|
||
}
|
||
|
||
const getCartList = async () => {
|
||
// Taro.showLoading({ title: '', })
|
||
// setState((draft) => {
|
||
// draft.loading = true
|
||
// })
|
||
const { type = 'distributor' } = router?.params || {}
|
||
const params = {
|
||
shop_type: type
|
||
}
|
||
await dispatch(fetchCartList(params))
|
||
await dispatch(updateCount(params))
|
||
Taro.hideLoading()
|
||
setState((draft) => {
|
||
draft.loading = false
|
||
})
|
||
}
|
||
|
||
const resolveActiveGroup = () => {
|
||
const groupsList = validCart.map((item) => {
|
||
// used_activity：满减 activity_grouping：满减&满折 gift_activity：满赠 plus_buy_activity:加价购
|
||
const {
|
||
list,
|
||
used_activity = [],
|
||
plus_buy_activity = [],
|
||
activity_grouping = [],
|
||
gift_activity = []
|
||
} = item
|
||
// 使用活动商品
|
||
// const tDict = reduceTransform(list, 'cart_id')
|
||
// const activityGrouping = activity_grouping;
|
||
// const cus_activity_list = used_activity.map(act => {
|
||
// const active = activityGrouping.find(a_item => String(a_item.activity_id) === String(act.activity_id))
|
||
// const cus_general_goods_list = active.cart_ids.map(id => {
|
||
// const cartItem = tDict[id]
|
||
// delete tDict[id]
|
||
// return cartItem
|
||
// })
|
||
// return { list: cus_general_goods_list, active }
|
||
// })
|
||
// console.log(cus_activity_list, 'cus_activity_list')
|
||
// cus_activity_list.push({ list: Object.values(tDict), active: null })
|
||
// 加购价
|
||
let all_plus_itemid_list = [] // 加价购商品id
|
||
let no_active_item = [] // 没有活动的商品
|
||
let cus_plus_item_list = plus_buy_activity.map((plusitem, index) => {
|
||
const { plus_item, activity_item_ids, activity_id } = plusitem
|
||
// 加购价换购的商品
|
||
let exchange_item = null
|
||
if (plus_item) {
|
||
exchange_item = pickBy(plus_item, { ...doc.cart.PLUS_BUY_ITEM, activity_id })
|
||
}
|
||
all_plus_itemid_list.push(activity_item_ids)
|
||
const general_goods = list.filter((k) => activity_item_ids.indexOf(k.item_id) > -1)
|
||
return {
|
||
...plusitem,
|
||
cus_general_goods_list: general_goods,
|
||
cus_plus_exchange_item_list: exchange_item
|
||
}
|
||
})
|
||
all_plus_itemid_list = all_plus_itemid_list.toString().split(',')
|
||
const goodsMap = reduceTransform(list, 'cart_id')
|
||
for (const key in goodsMap) {
|
||
if (all_plus_itemid_list.indexOf(goodsMap[key].item_id) < 0) {
|
||
no_active_item.push(goodsMap[key])
|
||
}
|
||
}
|
||
cus_plus_item_list.push({
|
||
discount_desc: null,
|
||
cus_general_goods_list: no_active_item.reverse(),
|
||
cus_plus_exchange_item_list: null
|
||
})
|
||
return {
|
||
...item,
|
||
cus_plus_item_list
|
||
// cus_activity_list
|
||
}
|
||
})
|
||
return groupsList || []
|
||
}
|
||
|
||
const reduceTransform = (list, label) => {
|
||
const newList = list.reduce((acc, val) => {
|
||
acc[val[label]] = val
|
||
return acc
|
||
}, {})
|
||
return newList
|
||
}
|
||
|
||
const getRecommendList = async () => {
|
||
const { list } = await api.cart.likeList({
|
||
page: 1,
|
||
pageSize: 1000
|
||
})
|
||
setState((draft) => {
|
||
draft.recommendList = list
|
||
})
|
||
}
|
||
|
||
// const onChangeSpTab = (current) => {
|
||
// setState(draft => {
|
||
// draft.current = current
|
||
// })
|
||
// // setState({
|
||
// // ...state,
|
||
// // current
|
||
// // })
|
||
// }
|
||
|
||
const onChangeGoodsIsCheck = async (item, type, checked) => {
|
||
Taro.showLoading({ title: '', mask: true })
|
||
// setState((draft) => {
|
||
// draft.loading = true
|
||
// })
|
||
let parmas = { is_checked: checked }
|
||
if (type === 'all') {
|
||
const cartIds = item.list.map((item) => item.cart_id)
|
||
parmas['cart_id'] = cartIds
|
||
} else {
|
||
parmas['cart_id'] = item.cart_id
|
||
}
|
||
try {
|
||
await api.cart.select(parmas)
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
getCartList()
|
||
}
|
||
|
||
const onDeleteCartGoodsItem = async ({ cart_id }) => {
|
||
const res = await Taro.showModal({
|
||
title: '提示',
|
||
content: '将当前商品移出购物车?',
|
||
showCancel: true,
|
||
cancel: '取消',
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
confirmColor: colorPrimary
|
||
})
|
||
if (!res.confirm) return
|
||
await dispatch(deleteCartItem({ cart_id }))
|
||
getCartList()
|
||
}
|
||
|
||
const onChangeCartGoodsItem = useDebounce(async (item, num) => {
|
||
console.log(`onChangeCartGoodsItem:`, num)
|
||
// setState((draft) => {
|
||
// draft.loading = true
|
||
// })
|
||
Taro.showLoading({ title: '', mask: true })
|
||
let { shop_id, cart_id } = item
|
||
const { type = 'distributor' } = router.params
|
||
await dispatch(updateCartItemNum({ shop_id, cart_id, num, type }))
|
||
getCartList()
|
||
}, 200)
|
||
|
||
const onClickImgAndTitle = async (item) => {
|
||
Taro.navigateTo({
|
||
url: `/pages/item/espier-detail?id=${item.item_id}&dtid=${item.shop_id}`
|
||
})
|
||
}
|
||
|
||
const onPolicyChange = (isShow = false) => {
|
||
setState((draft) => {
|
||
draft.policyModal = isShow
|
||
})
|
||
}
|
||
|
||
const handleCheckout = (item) => {
|
||
const { type = 'distributor' } = router.params
|
||
const { shop_id, is_delivery, is_ziti, shop_name, address, lat, lng, hour, mobile } = item
|
||
const query = {
|
||
cart_type: 'cart',
|
||
type,
|
||
shop_id,
|
||
is_delivery,
|
||
is_ziti,
|
||
name: shop_name,
|
||
store_address: address,
|
||
lat,
|
||
lng,
|
||
hour,
|
||
phone: mobile,
|
||
goodType: current == 0 ? 'normal' : 'cross'
|
||
}
|
||
Taro.navigateTo({
|
||
url: `/pages/cart/espier-checkout?${qs.stringify(query)}`
|
||
})
|
||
}
|
||
|
||
const groupsList = resolveActiveGroup()
|
||
|
||
const handleClickStore = (item) => {
|
||
const url = `/subpages/store/index?id=${item.distributor_info?.distributor_id || item.goods_id}`
|
||
Taro.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
|
||
return (
|
||
<SpPage
|
||
className={classNames('page-cart-index', {
|
||
'has-tabbar': tabbar == 1
|
||
})}
|
||
renderFooter={tabbar == 1 && <SpTabbar />}
|
||
showLogoLoading={loading}
|
||
showNavLogo isBlack showNavkfIcon
|
||
>
|
||
{/* {!isLogin && (
|
||
<View className='login-header'>
|
||
<View className='login-txt'>授权登录后同步购物车的商品</View>
|
||
<SpLogin onChange={() => { }}>
|
||
<View className='btn-login'>授权登录</View>
|
||
</SpLogin>
|
||
</View>
|
||
)} */}
|
||
{!loading && isLogin && groupsList?.length > 0 && (
|
||
<View>
|
||
{/* <SpTabs current={current} tablist={tablist} onChange={onChangeSpTab} /> */}
|
||
<View className='valid-cart-block'>
|
||
{groupsList.map((all_item, all_index) => {
|
||
const { cus_plus_item_list = [], activityList = [] } = all_item || {}
|
||
const allChecked = all_item.cart_total_count == all_item.list.length
|
||
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="total">共{all_item.cart_total_num}件</Text> */}
|
||
<Text className="total">共{cartCount}件</Text>
|
||
</View>
|
||
<View className='shop-cart-item-shadow'>
|
||
{/** 店铺商品开始 */}
|
||
{cus_plus_item_list.map((cus_item, cus_index) => {
|
||
const {
|
||
discount_desc,
|
||
activity_id,
|
||
cus_general_goods_list,
|
||
cus_plus_exchange_item_list
|
||
} = cus_item
|
||
return (
|
||
<View key={cus_index}>
|
||
{/** 换购开始 */}
|
||
{discount_desc && (
|
||
<View className='shop-cart-activity' key={activity_id}>
|
||
<View className='shop-cart-activity-item'>
|
||
<View
|
||
className='shop-cart-activity-item-left'
|
||
onClick={() =>
|
||
Taro.navigateTo({
|
||
url: `/marketing/pages/plusprice/detail-plusprice-list?marketing_id=${activity_id}`
|
||
})
|
||
}
|
||
>
|
||
<Text className='shop-cart-activity-label'>换购</Text>
|
||
<Text>{discount_desc.info}</Text>
|
||
</View>
|
||
<View
|
||
className='shop-cart-activity-item-right'
|
||
onClick={() =>
|
||
Taro.navigateTo({
|
||
url: `/marketing/pages/plusprice/cart-plusprice-list?marketing_id=${activity_id}`
|
||
})
|
||
}
|
||
>
|
||
去选择
|
||
<Text className='at-icon at-icon-chevron-right'></Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{/** 换购结束 */}
|
||
{/**普通商品开始 */}
|
||
{cus_general_goods_list.map((c_sitem, c_index) => (
|
||
<View className='shop-cart-item-bd' key={c_index}>
|
||
<View className='shop-activity'></View>
|
||
<View className='cart-item-wrap'>
|
||
<SpCheckboxNew
|
||
checked={c_sitem.is_checked}
|
||
onChange={onChangeGoodsIsCheck.bind(this, c_sitem, 'single')}
|
||
/>
|
||
<CompGoodsItem
|
||
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)}
|
||
showWarning
|
||
/>
|
||
</View>
|
||
{/**组合商品开始 */}
|
||
{c_sitem.packages &&
|
||
c_sitem.packages.map((pack_sitem, pack_index) => (
|
||
<View className='cart-item-wrap plus_items_bck' key={pack_index}>
|
||
<CompGoodsItem
|
||
disabled
|
||
info={pack_sitem}
|
||
goodType='packages'
|
||
isShowAddInput={false}
|
||
isShowDeleteIcon={false}
|
||
/>
|
||
</View>
|
||
))}
|
||
{/**组合商品开始 */}
|
||
</View>
|
||
))}
|
||
{/**普通商品开始 */}
|
||
{/**换购商品开始 */}
|
||
{cus_plus_exchange_item_list && (
|
||
<View className='cart-item-wrap plus_items_bck'>
|
||
<CompGoodsItem
|
||
disabled
|
||
info={cus_plus_exchange_item_list}
|
||
isShowAddInput={false}
|
||
isShowDeleteIcon={false}
|
||
/>
|
||
</View>
|
||
)}
|
||
{/**换购商品开始 */}
|
||
</View>
|
||
)
|
||
})}
|
||
{/** 店铺商品结束 */}
|
||
{/** 结算/全选操作开始 */}
|
||
<View className='shop-cart-item-ft'>
|
||
<View className='lf'>
|
||
<SpCheckboxNew
|
||
checked={allChecked}
|
||
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} showSeparator noDecimal />
|
||
</View>
|
||
{all_item.discount_fee > 0 && (
|
||
<View className='discount-price-wrap'>
|
||
共优惠：
|
||
<SpPrice
|
||
className='total-pirce'
|
||
value={all_item.discount_fee / 100}
|
||
/>
|
||
</View>
|
||
)}
|
||
</View>
|
||
<AtButton
|
||
className='btn-calc'
|
||
type='primary'
|
||
disabled={all_item.cart_total_num <= 0}
|
||
onClick={() => handleCheckout(all_item)}
|
||
>
|
||
立即结算
|
||
</AtButton>
|
||
</View>
|
||
</View>
|
||
{/** 结算/全选操作开始 */}
|
||
</View>
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
{false && invalidCart.length > 0 && (
|
||
<View className='invalid-cart-block'>
|
||
<View className='shop-cart-item'>
|
||
<View className='shop-cart-item-hd-disabeld'>已失效商品</View>
|
||
<View className='shop-cart-item-bd'>
|
||
<View className='shop-activity'></View>
|
||
{invalidCart.map((sitem, sindex) => (
|
||
<View
|
||
className='cart-item-warp-disabled'
|
||
key={`cart-item-warp-disabled__${sindex}`}
|
||
>
|
||
<SpCheckboxNew disabled />
|
||
<CompGoodsItem
|
||
info={sitem}
|
||
isShowAddInput={false}
|
||
onDelete={onDeleteCartGoodsItem.bind(this, sitem)}
|
||
/>
|
||
</View>
|
||
))}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
)}
|
||
|
||
{/* && invalidCart.length == 0 */}
|
||
{!loading && validCart.length == 0 && (
|
||
<View className='empty-box'>
|
||
{/* <SpDefault type='cart' message='购物车内暂无商品～'>
|
||
<AtButton type='primary' circle onClick={navigateTo.bind(this, '/pages/index', true)}>
|
||
去选购
|
||
</AtButton>
|
||
</SpDefault> */}
|
||
<View className='default-img' style={{ height: '80px', width: '100%', display: 'flex', justifyContent: 'center' }} >
|
||
<SpImage src='cart/logo-hui.png' width={160} isNew />
|
||
</View>
|
||
<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} /> */}
|
||
|
||
{/* <SpPrivacyModal open={policyModal} onCancel={onPolicyChange} onConfirm={onPolicyChange} /> */}
|
||
</SpPage>
|
||
)
|
||
}
|
||
|
||
export default CartIndex
|