xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

电子商城测试版v4

Browse Source
This commit is contained in:
cheng
2022-07-05 20:32:37 +08:00
parent 29090350ef
commit 7a2dc0006f
19 changed files with 649 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/afterOrderBtns/index.module.scss
+37
View File
@@ -1,3 +1,40 @@
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: flex-end;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 20px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 34px;
}
}
.order_btn_select{
color: $color_main;
border: 2px solid $color_main;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.btns_list{
width: 100%;
// margin-top: 30px;
src/components/afterOrderBtns/index.tsx
+25 -28
View File
@@ -17,10 +17,11 @@ type Param = {
return_apply_order_id: number //售后申请单
},
onClick?: (val: number) => void, //点击后触发的事件，返回订单状态
onBtnNull?: () => void //所有按钮都为空
fixedBottom?: true|false, //是否固定在底部
}
export default memo(({orderInfo, onClick, onBtnNull}:Param) => {
export default memo(({orderInfo, onClick, fixedBottom = true}:Param) => {
//售后订单状态
const {
ReturnStageApplying,
@@ -53,13 +54,6 @@ export default memo(({orderInfo, onClick, onBtnNull}:Param) => {
model_value: [],
label: '取消退货'
},
{
id: 2,
big_value: [ReturnStageWaitCheck.value],
cut_value: [],
model_value: [],
label: '退货物流'
},
{
id: 4,
big_value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value],
@@ -143,25 +137,28 @@ export default memo(({orderInfo, onClick, onBtnNull}:Param) => {
}, [orderBtnsShowList])
return (
<View className={styles.btns_list}>
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
<Text onClick={() => setShowMore(true)}>更多</Text>
{showMore&&<View className={styles.more_con}>
<View className={styles.more_list} style={styleTop}>
{orderBtnsShowList.map((item, index) => {
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
})}
</View>
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
</View>}
</View>}
<>
{(orderBtnsShowList.length > 0)&&<View className={classnames(fixedBottom&&styles.submit_order)}>
<View className={styles.btns_list}>
{(orderBtnsShowList.length > 3)&&<View className={styles.more}>
<Text onClick={() => setShowMore(true)}>更多</Text>
{showMore&&<View className={styles.more_con}>
<View className={styles.more_list} style={styleTop}>
{orderBtnsShowList.map((item, index) => {
return ((index >= 3) &&<View className={styles.more_item} key={item.id} onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
})}
</View>
<View className={styles.more_bg} catchMove onClick={() => setShowMore(false)}></View>
</View>}
</View>}
<View className={styles.list_scroll}>
{orderBtnsShowList.map((item, index) =>
(index < 3)&&<View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
)}
</View>
</View>
<View className={styles.list_scroll}>
{orderBtnsShowList.map((item, index) =>
(index < 3)&&<View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
)}
</View>
</View>
</View>}
</>
)
})
src/components/moveBtn/index.module.scss
+15 -1
View File
@@ -14,7 +14,21 @@
align-items: center;
z-index:999;
.shop_icon{
font-size: 50px;
font-size: 70px;
color: $color_main;
}
.product_num{
position: absolute;
font-size: 23px;
background-color: red;
color: #fff;
height: 36px;
line-height: 36px;
padding: 0 6px;
border-radius: 72px;
min-width: 25px;
text-align: center;
top: 0;
right: 0;
}
}
src/components/moveBtn/index.tsx
+15
View File
@@ -3,6 +3,7 @@ import Taro, { useReady } from "@tarojs/taro"
import { ReactElement, useEffect, useRef, useState } from "react"
import classnames from "classnames";
import styles from './index.module.scss'
import { GetShoppingCartApi } from "@/api/shopCart";
type param = {
children?: ReactElement|null,
@@ -22,6 +23,19 @@ export default ({children = null, onClick}:param) => {
setShowMoveBtn(true)
})
//获取数据
const [list, setList] = useState<any[]>([])
const {fetchData} = GetShoppingCartApi()
const getShoppingCart = async () => {
const {data} = await fetchData()
let color_list = data.color_list||[]
setList(color_list)
}
useEffect(() => {
getShoppingCart()
}, [])
const dragEnd = (e) => {
}
@@ -31,6 +45,7 @@ export default ({children = null, onClick}:param) => {
{children}
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
{(list.length > 0)&&<View className={styles.product_num}>{list.length > 99?'99+':list.length}</View>}
</MovableView>}
</MovableArea>
)
src/components/shopCart/index copy.tsx
+352
View File
@@ -0,0 +1,352 @@
import {Image, ScrollView, View } from "@tarojs/components"
import Popup from "@/components/popup"
import classnames from "classnames";
import MCheckbox from "@/components/checkbox";
import LoadingCard from "@/components/loadingCard";
import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { alert, goLink } from "@/common/common";
import {GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
import { debounce } from "@/common/util";
import Counter from "../counter";
import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from "@/api/user";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
const selectList = [
{value:0, title:'大货', unit:'条', eunit:'kg', step:1, digits:0, minNum:1, maxNum:100000, defaultNum:1},
{value:1,title:'剪板', unit:'米', eunit:'m', step:1, digits:2, minNum:0.5, maxNum:9.99, defaultNum:1},
{value:2,title:'散剪', unit:'米', eunit:'kg', step:1, digits:2, minNum:5, maxNum:100000, defaultNum:10},
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
}
useEffect(() => {
resetList()
setSelectStatus(true)
}, [selectIndex])
//重置勾选数据
const resetList = () => {
list?.map(item => {
if(selectIndex == item.sale_mode || selectIndex == -1) {
item.select = true
} else {
item.select = false
}
})
setList([...list])
}
//获取数据
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const {fetchData} = GetShoppingCartApi()
const getShoppingCart = async () => {
const {data} = await fetchData()
let color_list = data.color_list||[]
initList(color_list)
setLoading(false)
}
//初始化勾选数据
const [selectData, setSelectData] = useState<{id: number, checked: true|false}[]>([])
const initSelectData = (data:{id:number}[] = []) => {
let res = data?.map(item => {
return {id: item.id, checked: true}
})
setSelectData(() => res)
}
//初始化全部数据
const initList = (color_list) => {
color_list?.map(item => {
if(selectIndex == item.sale_mode) item.select = true
item.count = formatCount(item)
})
setList(color_list)
}
//显示是展示数据
useEffect(() => {
if(!show) {
setList([])
setSelectIndex(0)
} else {
setLoading(true)
getShoppingCart()
}
}, [show])
useEffect(() => {
return () => {
setList([])
}
}, [])
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
setShowPopup(show)
}, [show])
//全选反选
const [selectStatus, setSelectStatus] = useState(false)
const selectAll = () => {
list.map(item => {
if(selectIndex == item.sale_mode || selectIndex == -1)
item.select = !selectStatus
})
setSelectStatus(!selectStatus)
setList([...list])
}
//checkbox选中回调
const selectCallBack = (item) => {
item.select = true
checkSelect()
setList([...list])
}
//checkbox选中判断是否全部选中，全部选中后是全选，否则反选
const checkSelect = () => {
let list_count = 0
let select_count = 0
list?.map(item => {
if(selectIndex == -1 || selectIndex == item.sale_mode) {
list_count ++
if(item.select) select_count++
}
})
setSelectStatus(select_count == list_count)
}
//checkbox关闭回调
const colseCallBack = (item) => {
item.select = false
checkSelect()
setList([...list])
}
//popup关闭
const closePopup = () => {
onClose?.()
setShowPopup(false)
}
//删除购物车内容
const {fetchData:delShopFetchData} = DelShoppingCartApi()
const delSelect = () => {
getSelectId()
if(selectIds.current.length <= 0) return alert.none('请选择要删除的面料!')
Taro.showModal({
content: '删除所选商品？',
success: async function (res) {
if (res.confirm) {
const res = await delShopFetchData({id:selectIds.current})
if(res.success) {
getShoppingCart()
Taro.showToast({
title: '成功',
icon: 'success',
})
} else {
Taro.showToast({
title: res.msg,
icon: 'none',
})
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
//获取面料选中的id
const selectIds = useRef<number[]>([])
const getSelectId = () => {
selectIds.current = []
list?.map(item => {
if(selectIndex == -1 || selectIndex == item.sale_mode) {
item.select&&selectIds.current.push(item.id)
}
})
}
//格式化金额
const formatPirce = useCallback((price) => {
return Number(formatPriceDiv(price))
}, [])
//格式化数量
const formatCount = useCallback((item) => {
console.log('item:::',item)
return item.sale_mode == 0? item.roll : (item.length/100)
}, [])
//格式化单位
const formatUnit = useCallback((item) => {
return item.sale_mode == 0? '条':'米'
}, [])
//预估金额和总条数
const estimatePrice = useMemo(() => {
let estimate_amount = 0
let product_list = new Set() //面料
let color_count = 0 //颜色数量
let all_count = 0 //总数量
list.map(item => {
if(item.select) {
estimate_amount += item.estimate_amount
product_list.add(item.product_id)
color_count++
all_count += item.sale_mode == 0?item.roll: (item.length)
}
})
let all_count_text = selectIndex == 0?all_count + '条': (all_count/100) + '米'
return {price: Number(formatPriceDiv(estimate_amount)).toFixed(2), countText: `已选${product_list.size}种面料，${color_count}个颜色，共${all_count_text}`, color_count}
},[list])
//去结算
const {fetchData: useFetchData} = GetAdminUserInfoApi()
const {fetchData: applyOrderAccessFetchData} = ApplyOrderAccessApi()
const orderDetail = debounce( async () => {
let res = await useFetchData()
if(res.data.order_access_status !== 3) {
if(res.data.order_access_status == 1) applyOrderAccessFetchData()
Taro.showModal({
title: '提示',
content: '暂未开通下单权限功能，稍后有客服联系您，请注意接受电话。',
cancelText: '联系客服',
confirmText: '我知道',
success: function (res) {
if (res.confirm) {
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
return false
}
getSelectId()
if(selectIds.current.length == 0) {
alert.error('请选择面料')
} else {
let ids = selectIds.current.join('-')
setParam({ids, sale_mode:selectIndex}) //临时存储
closePopup()
goLink('/pages/order/comfirm')
}
}, 500)
//计数组件-当后端修改完成才修改前端显示
const {fetchData: fetchDataUpdateShoppingCart} = UpdateShoppingCartApi()
const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false)
const getInputValue = debounce(async (num, item) => {
let roll = item.sale_mode == 0?parseFloat(num):0
let length = item.sale_mode != 0?(parseFloat(num)*100):0
setUpdateShoppingCartLoading(() => true)
let res = await fetchDataUpdateShoppingCart({id: item.id, roll, length})
setUpdateShoppingCartLoading(() => false)
if(res.success) {
getShoppingCart()
}
}, 300)
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
<View className={styles.popup_con}>
<View className={styles.header}>
<View onClick={selectAll}>{!selectStatus?'全选':'反选'}</View>
<View onClick={delSelect}>
<text className={classnames('iconfont', 'icon-shanchu', styles.miconfont)}></text>
删除所选
</View>
</View>
<View className={styles.count_all}>{estimatePrice.countText}</View>
<View className={styles.search}>
{selectList.map((item) => {
return <View key={item.value} onClick={() => selectProduct(item.value)} className={classnames(styles.search_item, (selectIndex==item.value)&&styles.search_item_select)}>{item.title}</View>
})}
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list?.length > 0&&<InfiniteScroll moreStatus={false} >
<View className={styles.product_list}>
{list?.map((item, index) => {
return <View key={index} className={classnames(styles.product_item, (selectIndex!=-1&&selectIndex!= item.sale_mode)&&styles.no_product_item_select)}>
<View className={styles.checkbox}>
<MCheckbox disabled={selectIndex!=-1&&selectIndex!=item.sale_mode} status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
</View>
<View className={styles.img}>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}/>
</View>
<View className={styles.des}>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.subtitle}>{item.product_color_code +' ' + item.product_color_name}</View>
<View className={styles.tag}>{item.sale_mode_name}</View>
</View>
<View className={styles.count}>
<View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/{selectList[selectIndex].eunit}</text></View>
{/* <View className={styles.long}>×{formatCount(item)}{selectList[selectIndex].unit}</View> */}
<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={formatUnit(item)}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
disable={UpdateShoppingCartLoading}
/>
</View>
</View>
</View>
})}
</View>
</InfiniteScroll>}
{!loading&&list?.length == 0 &&<View className={styles.empty}>
<View className={styles.title}>暂未选择商品</View>
<View className={styles.btn}>去选购</View>
</View>}
</View>
<View className={styles.buy_btn}>
<View className={styles.buy_con}>
<View className={styles.icon}>
<View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
</View>
<View className={styles.price_con}>
<View className={styles.price_real}><text>￥</text>{estimatePrice.price}</View>
<View className={styles.price_forecast}>预估金额</View>
</View>
<View className={styles.goPay} onClick={() => orderDetail()}>
去结算({estimatePrice.color_count})
</View>
</View>
</View>
</View>
</Popup>
</View>
)
}
src/components/shopCart/index.tsx
+28 -30
View File
@@ -26,6 +26,7 @@ export default ({show = false, onClose}: param) => {
{value:2,title:'散剪', unit:'米', eunit:'kg', step:1, digits:2, minNum:5, maxNum:100000, defaultNum:10},
]
//切换面料类型
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
@@ -42,12 +43,12 @@ export default ({show = false, onClose}: param) => {
const resetList = () => {
list?.map(item => {
if(selectIndex == item.sale_mode || selectIndex == -1) {
item.select = true
checkboxData[item.id] = true
} else {
item.select = false
checkboxData[item.id] = false
}
})
setList([...list])
setCheckboxData(() => ({...checkboxData}))
}
//获取数据
@@ -58,25 +59,21 @@ export default ({show = false, onClose}: param) => {
const {data} = await fetchData()
let color_list = data.color_list||[]
initList(color_list)
setList(color_list)
setLoading(false)
}
//初始化勾选数据
const [selectData, setSelectData] = useState<{id: number, checked: true|false}[]>([])
const initSelectData = (data:{id:number}[] = []) => {
let res = data?.map(item => {
return {id: item.id, checked: true}
})
setSelectData(() => res)
}
//初始化全部数据
//初始化全部数据默认勾选
const [checkboxData, setCheckboxData] = useState<{[index:number]:true|false}>({})
const initStatus = useRef(false)
const initList = (color_list) => {
color_list?.map(item => {
if(selectIndex == item.sale_mode) item.select = true
item.count = formatCount(item)
})
setList(color_list)
if(initStatus.current) {
color_list?.map(item => {
if(selectIndex == item.sale_mode) checkboxData[item.id] = true
})
initStatus.current = false
}
setCheckboxData(() => checkboxData)
}
//显示是展示数据
@@ -86,6 +83,7 @@ export default ({show = false, onClose}: param) => {
setSelectIndex(0)
} else {
setLoading(true)
initStatus.current = true
getShoppingCart()
}
}, [show])
@@ -106,17 +104,17 @@ export default ({show = false, onClose}: param) => {
const selectAll = () => {
list.map(item => {
if(selectIndex == item.sale_mode || selectIndex == -1)
item.select = !selectStatus
checkboxData[item.id] = !selectStatus
})
setSelectStatus(!selectStatus)
setList([...list])
setCheckboxData(() => ({...checkboxData}))
}
//checkbox选中回调
const selectCallBack = (item) => {
item.select = true
checkboxData[item.id] = true
checkSelect()
setList([...list])
setCheckboxData(() => ({...checkboxData}))
}
//checkbox选中判断是否全部选中，全部选中后是全选，否则反选
@@ -126,7 +124,7 @@ export default ({show = false, onClose}: param) => {
list?.map(item => {
if(selectIndex == -1 || selectIndex == item.sale_mode) {
list_count ++
if(item.select) select_count++
if(checkboxData[item.id]) select_count++
}
})
setSelectStatus(select_count == list_count)
@@ -134,9 +132,9 @@ export default ({show = false, onClose}: param) => {
//checkbox关闭回调
const colseCallBack = (item) => {
item.select = false
checkboxData[item.id] = false
checkSelect()
setList([...list])
setCheckboxData(() => ({...checkboxData}))
}
//popup关闭
@@ -182,7 +180,7 @@ export default ({show = false, onClose}: param) => {
selectIds.current = []
list?.map(item => {
if(selectIndex == -1 || selectIndex == item.sale_mode) {
item.select&&selectIds.current.push(item.id)
checkboxData[item.id]&&selectIds.current.push(item.id)
}
})
}
@@ -210,7 +208,7 @@ export default ({show = false, onClose}: param) => {
let color_count = 0 //颜色数量
let all_count = 0 //总数量
list.map(item => {
if(item.select) {
if(checkboxData[item.id]) {
estimate_amount += item.estimate_amount
product_list.add(item.product_id)
color_count++
@@ -219,7 +217,7 @@ export default ({show = false, onClose}: param) => {
})
let all_count_text = selectIndex == 0?all_count + '条': (all_count/100) + '米'
return {price: Number(formatPriceDiv(estimate_amount)).toFixed(2), countText: `已选${product_list.size}种面料，${color_count}个颜色，共${all_count_text}`, color_count}
},[list])
},[list, checkboxData])
//去结算
@@ -293,7 +291,7 @@ export default ({show = false, onClose}: param) => {
{list?.map((item, index) => {
return <View key={index} className={classnames(styles.product_item, (selectIndex!=-1&&selectIndex!= item.sale_mode)&&styles.no_product_item_select)}>
<View className={styles.checkbox}>
<MCheckbox disabled={selectIndex!=-1&&selectIndex!=item.sale_mode} status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
<MCheckbox disabled={selectIndex!=-1&&selectIndex!=item.sale_mode} status={!!checkboxData[item.id]} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
</View>
<View className={styles.img}>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}/>
@@ -309,7 +307,7 @@ export default ({show = false, onClose}: param) => {
<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
defaultNum={formatCount(item)}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}