🎈 perf(优化商城):

This commit is contained in:
czm 2022-11-29 18:47:12 +08:00
parent 9fa06c5a2c
commit c2ca7f9e4e
14 changed files with 342 additions and 332 deletions

9
package-lock.json generated
View File

@ -8070,6 +8070,8 @@
},
"node_modules/babel-loader/node_modules/webpack": {
"version": "4.46.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
"license": "MIT",
"peer": true,
"dependencies": {
@ -8153,9 +8155,8 @@
},
"node_modules/babel-plugin-dynamic-import-node": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
"resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
"integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
"license": "MIT",
"dependencies": {
"object.assign": "^4.1.0"
}
@ -34159,6 +34160,8 @@
},
"webpack": {
"version": "4.46.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
"peer": true,
"requires": {
"@webassemblyjs/ast": "1.9.0",
@ -34221,7 +34224,7 @@
},
"babel-plugin-dynamic-import-node": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
"resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
"integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
"requires": {
"object.assign": "^4.1.0"

View File

@ -28,7 +28,7 @@ export const GetProductKindListApi = () => {
*/
export const GetProductListApi = () => {
return useRequest({
url: `/v1/mall/product/list`,
url: `/v2/mall/product/list`,
method: 'get',
})
}

View File

@ -27,7 +27,7 @@ export const IMG_CND_Prefix = CURRENT_ENV.includes('production') ? 'https://cdn.
//在线支付图片baseUrl
export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_CAP_HTML_TO_IMAGE_BASE_URL
// export const CAP_HTML_TO_IMAGE_BASE_URL = CURRENT_ENV.includes('production') ? 'https://www.zzfzyc.com' : 'http://192.168.1.127:8082'
// export const CAP_HTML_TO_IMAGE_BASE_URL = 'http://192.168.1.127:8081'
// 上传图片视频
export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`

View File

@ -1,4 +1,4 @@
import { Input, View } from '@tarojs/components'
import { CustomWrapper, Input, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import Big from 'big.js'
import styles from './index.module.scss'
@ -109,7 +109,7 @@ const Counter = memo((props: params) => {
-
</View>
<View className={styles.input}>
<Input type='digit' value={String(value.count)} onInput={onInputEven} onBlur={onBluerEven} disabled={disabled} alwaysEmbed={true} cursorSpacing={150} />
<Input type='digit' value={value.count} onInput={onInputEven} onBlur={onBluerEven} disabled={disabled} alwaysEmbed={true} cursorSpacing={150} />
<View className={styles.unit}>{unit}</View>
</View>
<View className={styles.plus} onClick={() => onPlus()}>

View File

@ -60,8 +60,8 @@ export default memo((props: param) => {
return sale_model != item.sale_mode
}, [item])
return (
<View className={classnames(styles.product_item, model_status && styles.no_product_item_select)} onClick={clickProduct}>
<View className={styles.checkbox} catchMove>
<View className={classnames(styles.product_item, model_status && styles.no_product_item_select)}>
<View className={styles.checkbox}>
<MCheckbox status={item.selected} onSelect={selectCallBack} onClose={colseCallBack} disabled={model_status} />
</View>
<View className={styles.img}>

View File

@ -5,7 +5,7 @@ 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 { useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react'
import Taro from '@tarojs/taro'
import { alert, goLink } from '@/common/common'
import { GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi } from '@/api/shopCart'
@ -45,22 +45,28 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
{ value: 2, title: '散剪', unit: '米', eunit: 'kg', step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3 },
]
const [isPending, startTransition] = useTransition()
//切换面料类型
const [selectIndex, setSelectIndex] = useState<saleModeType>(default_sale_mode || 0)
const selectProduct = (index: 0 | 1 | 2) => {
setSelectIndex(index)
}
useEffect(() => {
if (!isPending) {
setSelectIndex(() => default_sale_mode!)
}
}, [default_sale_mode])
useEffect(() => {
startTransition(() => {
resetList()
setSelectStatus(true)
})
}, [selectIndex])
//获取购物车数据数量
const { setShopCount } = useCommonData()
const { getShopCount } = useCommonData()
//获取所有数据数据
const [list, setList] = useState<{ [id: number]: any }>({})
@ -193,6 +199,7 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
const res = await delShopFetchData({ id: selectIds.current })
if (res.success) {
getShoppingCart()
getShopCount()
Taro.showToast({
title: '成功',
icon: 'success',
@ -321,8 +328,8 @@ export default ({ show = false, onClose, intoStatus = 'shop', default_sale_mode
})}
</View>
<View className={styles.con}>
{loading && <LoadingCard />}
{!loading && listData?.length > 0 && (
{(loading || isPending) && <LoadingCard />}
{!loading && !isPending && listData?.length > 0 && (
<InfiniteScroll moreStatus={false}>
<View className={styles.product_list}>
{listData?.map((item) => {

View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
background-color: #fff;
.search {
padding: 20px;
}
@ -28,7 +28,7 @@
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
background-color: #c2c2c2;
position: absolute;
top: 0;
left: -50px;
@ -71,7 +71,6 @@
height: 0;
}
.popup_filter {
}
.popup_filter_item {
margin-bottom: 20px;
@ -131,11 +130,10 @@
padding: 0 20px;
}
.width_main {
}
}
.btn_list_element {
background-color: #F0F0F0;
background-color: #f0f0f0;
border-radius: 30px;
padding: 20px;
box-sizing: border-box;

View File

@ -14,6 +14,7 @@
justify-content: center;
align-items: center;
z-index: 999;
position: fixed;
.shop_icon {
font-size: 70px;
color: $color_main;

View File

@ -29,8 +29,6 @@ type ListParam = {
sale_price: string
total_price: string
weight_error: string
show_sale_price: boolean
show_total_price: boolean
}
export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>()
@ -49,9 +47,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
length: (citem.length / 100).toString(),
weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
show_sale_price: orderInfo.is_display_price,
total_price: formatPriceDiv(citem.total_sale_price || citem.estimate_amount).toString(), //小计
show_total_price: orderInfo.is_display_price,
weight_error: formatWeightDiv(citem.weight_error).toString(),
})
})
@ -92,8 +88,10 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
show_actual_amount: orderInfo.actual_amount > 0 && orderInfo.is_display_price,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0 && orderInfo.is_display_price,
show_barcode: true,
show_barcode: false, //条形码
order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(), //总空差重量
show_total_price: orderInfo.is_display_price,
show_sale_price: orderInfo.is_display_price,
}))
}
}, [orderInfo, show])

View File

@ -28,8 +28,6 @@ type ListParam = {
sale_price: string
total_price: string
weight_error: string
show_sale_price: boolean
show_total_price: boolean
}
export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>()
@ -54,9 +52,7 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
length: (citem.length / 100).toString(),
weight: formatWeightDiv(citem.actual_weight || citem.estimate_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
show_sale_price: orderInfo.is_display_price,
total_price: formatPriceDiv(citem.total_sale_price || citem.estimate_amount).toString(), //小计
show_total_price: orderInfo.is_display_price,
weight_error: formatWeightDiv(citem.weight_error).toString(),
})
})
@ -95,8 +91,10 @@ export default memo(({ show = true, onClose, company, orderInfo }: Param) => {
show_actual_amount: orderInfo.actual_amount > 0 && orderInfo.is_display_price,
wait_pay_amount: formatPriceDiv(orderInfo.wait_pay_amount).toString(),
show_wait_pay_amount: orderInfo.wait_pay_amount > 0 && orderInfo.is_display_price,
show_barcode: true,
show_barcode: false,
order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(), //总空差重量
show_total_price: orderInfo.is_display_price,
show_sale_price: orderInfo.is_display_price,
}))
}
}, [orderInfo])

View File

@ -31,9 +31,6 @@ type ListParam = {
deduction_weight: string
settle_weight: string
deduction_amount: string
show_sale_price: boolean
show_total_price: boolean
show_deduction_amount: boolean
}
export default memo(({ show = true, onClose, orderInfo }: Param) => {
const [detail, setDetail] = useState<any>()
@ -59,14 +56,11 @@ export default memo(({ show = true, onClose, orderInfo }: Param) => {
length: (citem.length / 100).toString(),
weight: formatWeightDiv(citem.label_weight).toString(),
sale_price: formatPriceDiv(citem.sale_price).toString(),
show_sale_price: orderInfo.is_display_price,
total_price: formatPriceDiv(citem.refund_amount).toString(), //小计
show_total_price: orderInfo.is_display_price,
weight_error: formatWeightDiv(citem.settle_weight_error).toString(),
deduction_weight: formatWeightDiv(citem.deductions_weight).toString(),
settle_weight: formatWeightDiv(citem.settle_weight).toString(),
deduction_amount: formatPriceDiv(citem.deductions_amount).toString(),
show_deduction_amount: orderInfo.is_display_price,
})
})
})
@ -89,6 +83,9 @@ export default memo(({ show = true, onClose, orderInfo }: Param) => {
show_order_total_deduction_amount: orderInfo.is_display_price,
order_total_weight_error: formatWeightDiv(orderInfo.total_weight_error).toString(),
list: lists,
show_total_price: orderInfo.is_display_price,
show_sale_price: orderInfo.is_display_price,
show_deduction_amount: orderInfo.is_display_price,
}))
}
}, [orderInfo])

View File

@ -1,94 +1,102 @@
import { Image, ScrollView, Text, View } from "@tarojs/components";
import { memo, useEffect, useRef, useState } from "react";
import classnames from "classnames";
import { Image, ScrollView, Text, View } from '@tarojs/components'
import { memo, useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Popup from "@/components/popup";
import Taro from "@tarojs/taro";
import { alert } from "@/common/common";
import { formatImgUrl } from "@/common/fotmat";
import useCheckAuthorize from "@/use/useCheckAuthorize";
import { GetPayCode } from "@/api/onlinePay";
import LoadingCard from "@/components/loadingCard";
import Popup from '@/components/popup'
import Taro from '@tarojs/taro'
import { alert } from '@/common/common'
import { formatImgUrl } from '@/common/fotmat'
import useCheckAuthorize from '@/use/useCheckAuthorize'
import { GetPayCode } from '@/api/onlinePay'
import LoadingCard from '@/components/loadingCard'
type Param = {
show?: true|false,
show?: true | false
onClose?: () => void
}
type Item = {
product_code: string,
product_name: string,
product_color_code: string,
product_color_name: string,
num: string,
weight: string,
sale_price: string,
product_code: string
product_name: string
product_color_code: string
product_color_name: string
num: string
weight: string
sale_price: string
total_price: string
}
type CodeParam = {
title: string,
company: string,
order_type: string,
sale_user: string,
order_created_time: string,
order_no: string,
department: string,
shipment_mode: string,
target_user_name: string,
target_address: string,
target_description: string,
pay_account: string,
bank_account_name: string,
bank_name: string,
pay_type: string,
client: string,
phone: string,
order_total_length: string,
order_total_price: string,
qrcode: string,
order_total_weight: string,
title: string
company: string
order_type: string
sale_user: string
order_created_time: string
order_no: string
department: string
shipment_mode: string
target_user_name: string
target_address: string
target_description: string
pay_account: string
bank_account_name: string
bank_name: string
pay_type: string
client: string
phone: string
order_total_length: string
order_total_price: string
qrcode: string
order_total_weight: string
list: Item[]
}
export default memo(({ show = true, onClose }: Param) => {
//获取支付二维码
const [payCodeImage, setPayCodeImage] = useState<string>('')
const fileData = useRef({
filePath: '',
base64: ''
base64: '',
})
const { fetchData, state } = GetPayCode()
const getCore = async () => {
let res = await fetchData({
title: "面料销售电子确认单",
company: "什么什么公司123",
order_type: "散剪",
sale_user: "小崔",
order_created_time:"2022/02/01 12:32:13",
order_no:"XS-211005888",
department:"嘻嘻嘻",
shipment_mode:"自提",
target_user_name:"大崔",
target_address:"阿斯顿发斯蒂芬",
target_description:"无",
pay_account:"1234567890123450001",
bank_account_name:"佛山市浩川长盛科技有限公司",
bank_name:"招商银行佛山分行禅城支行",
pay_type:"现结",
client:"客户名称",
phone:"15818085802",
order_total_length:"12",
order_total_price:"63000",
qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888",
order_total_weight:"300.00",
list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
title: '面料销售电子确认单',
company: '什么什么公司123',
order_type: '散剪',
sale_user: '小崔',
order_created_time: '2022/02/01 12:32:13',
order_no: 'XS-211005888',
department: '嘻嘻嘻',
shipment_mode: '自提',
target_user_name: '大崔',
target_address: '阿斯顿发斯蒂芬',
target_description: '无',
pay_account: '1234567890123450001',
bank_account_name: '佛山市浩川长盛科技有限公司',
bank_name: '招商银行佛山分行禅城支行',
pay_type: '现结',
client: '客户名称',
phone: '15818085802',
order_total_length: '12',
order_total_price: '63000',
qrcode: 'https://www.zzfzyc.com/checkorder/XS-211005888',
order_total_weight: '300.00',
list: [
{
product_code: '5215',
product_name: '26S双纱亲水滑爽棉',
product_color_code: '053',
product_color_name: '洋红',
num: '4',
weight: '123.23',
sale_price: '43',
total_price: '4510.7',
},
],
})
const base64 = res.data.base64
setPayCodeImage(() => base64)
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
@ -98,11 +106,9 @@ export default memo(({show = true, onClose}:Param) => {
data: fileData.current.base64,
encoding: 'base64',
})
}
useEffect(() => {
if(show)
getCore()
if (show) getCore()
}, [show])
//检查是否开启保存图片权限
@ -122,7 +128,7 @@ export default memo(({show = true, onClose}:Param) => {
},
fail: function (err) {
console.log('err::', err)
}
},
})
}
@ -131,7 +137,7 @@ export default memo(({show = true, onClose}:Param) => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
urls: [fileData.current.filePath], // 需要预览的图片http链接列表
})
}
@ -147,15 +153,17 @@ export default memo(({show = true, onClose}:Param) => {
</View>
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
{(state.loading && <LoadingCard />) || (
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
</ScrollView>}
<Image mode='widthFix' src={payCodeImage} onClick={showImage}></Image>
</ScrollView>
)}
</View>
<View className={styles.btns} onClick={saveImageCheck}>
</View>
<View className={styles.btns} onClick={saveImageCheck}></View>
</View>
</Popup>
</View>
)
})

View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f8f8f8;
background-color: #fff;
.search {
padding: 20px;
}
@ -102,16 +102,16 @@
position: relative;
height: 100%;
line-height: 86px;
&::before {
content: '';
opacity: 1;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60%);
// z-index: 99;
}
// &::before {
// content: '';
// opacity: 1;
// width: 30px;
// height: 100%;
// position: absolute;
// left: -15px;
// background-image: linear-gradient(to right, rgba(255, 255, 255), rgba(248, 248, 248, 1) 60%);
// // z-index: 99;
// }
.miconfont {
font-size: 27px;
}

View File

@ -3816,7 +3816,7 @@
"babel-plugin-dynamic-import-node@2.3.3":
"integrity" "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ=="
"resolved" "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
"resolved" "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
"version" "2.3.3"
dependencies:
"object.assign" "^4.1.0"