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

购物车添加数量组件

Browse Source
This commit is contained in:
czm 2022-06-22 20:34:24 +08:00
parent fab3cd8b86
commit b82dad781a
15 changed files with 166 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/shopCart.ts
View File

@ -32,3 +32,14 @@ export const DelShoppingCartApi = () => {
method: "delete",
})
}
/**
* 修改购物车数量
* @returns
*/
export const UpdateShoppingCartApi = () => {
return useRequest({
url: `/v1/mall/shoppingCart/productColor`,
method: "put",
})
}

6
src/app.config.ts
View File

@ -171,6 +171,12 @@ export default {
pages: [
"index",
]
},
{
root: "pages/collection",
pages: [
"index",
]
}
]
}

4
src/common/constant.js
View File

@ -6,11 +6,11 @@
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
// CDN

8
src/components/counter/index.tsx
View File

@ -11,12 +11,14 @@ type params = {
onChange?:(val:number) => void,
onBlue?:(val:number) => void, //失去焦点触发
onClickBtn?:(val:number) => void,
unit?: string
unit?: string,
disable?: true|false, //是否禁用
}
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => {
export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
const [value, setValue] = useState<any>({count:defaultNum})
const onPlus = () => {
if(disable) return false
let {count} = value
let num_res = Big(count).add(step).toNumber()
num_res = num_res >= maxNum?maxNum:num_res
@ -26,6 +28,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
onClickBtn?.(parseFloat(num_res))
}
const minus = () => {
if(disable) return false
let {count} = value
let num_res = Big(count).minus(step).toNumber()
num_res = num_res < minNum?minNum:num_res
@ -102,6 +105,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
onInput={onInputEven}
onBlur={onBluerEven}
type='digit'
disabled={disable}
/>
<View className={styles.unit}>{unit}</View>
</View>

2
src/components/orderBtns/index.tsx
View File

@ -6,6 +6,7 @@ import Taro from "@tarojs/taro"
import {useRef, memo, useState, useMemo } from "react"
import classnames from "classnames";
import styles from './index.module.scss'
import { AddShoppingCartApi } from "@/api/shopCart"
type Param = {
orderInfo: {
@ -180,6 +181,7 @@ export default memo(({orderInfo, onClick}:Param) => {
})
}
//显示更多按钮
const [showMore, setShowMore] = useState(false)
const styleTop = useMemo(() => {

14
src/components/shopCart/index.module.scss
View File

@ -17,6 +17,11 @@
margin-right: 10px;
}
}
.count_all{
font-size: 22px;
color: #ABABAB;
padding: 30px 20px;
}
.search{
display: flex;
justify-content: space-between;
@ -104,6 +109,15 @@
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.btn_count{
width: 235px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
.price{
font-size: $font_size;
font-weight: 700;

43
src/components/shopCart/index.tsx
View File

@ -8,7 +8,7 @@ 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} from "@/api/shopCart"
import {GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
import { debounce } from "@/common/util";
@ -189,15 +189,25 @@ export default ({show = false, onClose}: param) => {
return item.sale_mode == 0? '条':'米'
}, [])
//预估金额
//预估金额和总条数
const estimatePrice = useMemo(() => {
let count = 0
let estimate_amount = 0
let product_list = new Set() //面料
let color_count = 0 //颜色数量
let all_count = 0 //总数量
list.map(item => {
if(item.select) count += item.estimate_amount
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)
}
})
return Number(formatPriceDiv(count))
let all_count_text = selectIndex == 0?all_count + '条': (all_count/100) + '米'
return {price: Number(formatPriceDiv(estimate_amount)), countText: `已选${product_list.size}种面料，${color_count}个颜色，共${all_count_text}`, color_count}
},[list])
//去结算
const orderDetail = debounce(() => {
getSelectId()
@ -205,18 +215,27 @@ export default ({show = false, onClose}: param) => {
alert.error('请选择面料')
} else {
let ids = selectIds.current.join('-')
setParam({ids, sale_mode:selectIndex})
setParam({ids, sale_mode:selectIndex}) //临时存储
closePopup()
goLink('/pages/order/comfirm')
}
}, 500)
//计数组件
const getInputValue = (num, item) => {
//计数组件-当后端修改完成才修改前端显示
const {fetchData: fetchDataUpdateShoppingCart} = UpdateShoppingCartApi()
const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false)
const getInputValue = 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) {
item.count = parseFloat(num)
setList([...list])
}
}
return (
<View className={styles.shop_cart_main}>
@ -229,6 +248,7 @@ export default ({show = false, onClose}: param) => {
删除所选
</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>
@ -254,6 +274,7 @@ export default ({show = false, onClose}: param) => {
<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)}</View> */}
<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
@ -263,9 +284,11 @@ export default ({show = false, onClose}: param) => {
unit={formatUnit(item)}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
disable={UpdateShoppingCartLoading}
/>
</View>
</View>
</View>
})}
</View>
</InfiniteScroll>}
@ -281,11 +304,11 @@ export default ({show = false, onClose}: param) => {
<View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
</View>
<View className={styles.price_con}>
<View className={styles.price_real}><text>￥</text>{estimatePrice}</View>
<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>

4
src/pages/collection/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '我的收藏',
enableShareAppMessage: true,
}

0
src/pages/collection/index.module.scss Normal file
View File

12
src/pages/collection/index.tsx Normal file
View File

@ -0,0 +1,12 @@
import Search from "@/components/search"
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={(e) => console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} />
</View>
</View>
)
}

2
src/pages/details/components/orderCount/index.tsx
View File

@ -296,7 +296,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
// </InfiniteScroll>}
<View className={styles.color_con}>
<VirtualList
height={500} /* 列表的高度 */
height={400} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={list} /* 渲染列表的数据 */
itemCount={list.length} /* 渲染列表的长度 */

21
src/pages/order/components/addressInfoDetail/index.tsx
View File

@ -20,7 +20,6 @@ export type AddressInfoParam = {
}
type Param = {
onSelect?: (val:any) => void, //选择地址
defaultValue?: AddressInfoParam|null, //默认值
disabled?: false|true, //true禁用后只用于展示
onChangeShipmentMode?: (val: number) => void, //返回收货方式
status?: 1|2, //1确认订单时使用， 2订单流程
@ -35,7 +34,7 @@ type Param = {
}
}
export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, status = 2}: Param, ref) => {
export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false}: Param, ref) => {
const [addressInfo, setAddressInfo] = useState<any>()
@ -46,6 +45,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, stat
}
}, [orderInfo])
//地址格式
const formatAddress = useMemo(() => {
if(addressInfo?.province_name) {
@ -58,7 +58,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, stat
//打开地址列表
const [showAddressList, setShowAddressList] = useState(false)
const changeShow = () => {
if(receivingStatus == 2 && !logisticsShow)
if(receivingStatus == 2 && !logisticsShow && !disabledSelect)
setShowAddressList(() => true)
}
@ -72,6 +72,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, stat
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
const onReceivingStatus = (value, e) => {
e.stopPropagation()
if(!disabledSelect) return false
changeReceivingStatus(value)
}
const changeReceivingStatus = debounce(async (value) => {
@ -123,9 +124,21 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, stat
SaleOrderStatusAlreadyReceipt,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusCancel
SaleOrderStatusCancel,
} = ORDER_STATUS
//禁用
const disabledSelect = useMemo(() => {
let statusList = [
SaleOrderStatusWaitingReceipt.value,
SaleOrderStatusAlreadyReceipt.value,
SaleOrderStatusComplete.value,
SaleOrderStatusRefund.value,
SaleOrderStatusCancel.value,
]
return (statusList.includes(orderInfo?.status!)||disabled)
}, [orderInfo, disabled])
//根据订单状态判断是否显示物流
const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value]
const logisticsShow = useMemo(() => {

43
src/pages/order/index.tsx
View File

@ -4,12 +4,14 @@ import {
CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { AddShoppingCartApi } from "@/api/shopCart";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import ShopCart from "@/components/shopCart";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
@ -97,7 +99,8 @@ import styles from './index.module.scss'
name: orderDetail?.target_user_name,
phone: orderDetail?.target_user_phone,
shipment_mode: orderDetail?.shipment_mode,
id: orderDetail?.id
id: orderDetail?.id,
sale_mode: orderDetail?.sale_mode,
}
}, [orderDetail])
@ -152,6 +155,9 @@ import styles from './index.module.scss'
toPay()
} else if(val == 3) {
setRefundShow(true)
} else if(val == 7) {
//再购
addShopCart()
}
}, [orderDetail])
@ -199,6 +205,40 @@ import styles from './index.module.scss'
setRefundShow(false)
}, [])
//添加购物车
const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
orderDetail?.product_list.map(pitem => {
pitem?.product_colors.map(citem => {
if(orderDetail?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll})
} else {
return color_list.push({product_color_id: citem.id, length: citem.length})
}
})
})
const state = await addFetchData({
sale_mode: orderDetail?.sale_mode,
color_list
})
if(state.success) {
Taro.showToast({
title:'已加入购物车'
})
setShowCart(true)
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
return (
<View className={styles.order_main}>
<OrderState orderInfo={orderDetail} onRefresh={refresh}/>
@ -238,6 +278,7 @@ import styles from './index.module.scss'
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onClose={applyRefundClose}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<View className="common_safe_area_y"></View>
</View>
)

2
src/pages/salesAfter/components/addressInfoDetail/index.tsx
View File

@ -25,7 +25,7 @@ export default memo(({return_address = '', return_phone = '', onLogistics, stage
//是否显示地址
const showAddress = useMemo(() => {
return stage != ReturnStageApplying.value
}, [])
}, [stage])
//上传物流
const upLogistics = useMemo(() => {

4
src/use/useHttp.ts
View File

@ -110,7 +110,7 @@ export const useRequest = (options:option = {
success: false, // 请求是否成功
data: {},
msg: '',
loading: true,
loading: false,
error: null,
query: {},
filter: null,
@ -127,7 +127,7 @@ export const useRequest = (options:option = {
const {login} = useLoginRequest()
useEffect(() => {
console.log('变化::', state.loading)
console.log('变化1::', state.loading)
}, [state.loading])
// 请求函数
const fetchData = async (sub_options?:any) => {