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

✨ feat(优化码单):

Browse Source
This commit is contained in:
czm 2022-12-30 19:55:51 +08:00
parent 3e688d7893
commit 65462bd077
34 changed files with 561 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app.config.ts
View File

@ -4,6 +4,7 @@ export default {
pages: [
'pages/index/index',
'pages/user/index',
'pages/shopCar/index',
],
window: {
backgroundTextStyle: 'light',
@ -20,12 +21,19 @@ export default {
iconPath: './styles/tabbar/home.png',
selectedIconPath: './styles/tabbar/home_selected.png',
},
{
pagePath: 'pages/shopCar/index',
text: '购物车',
iconPath: './styles/tabbar/my.png',
selectedIconPath: './styles/tabbar/my_selected.png',
},
{
pagePath: 'pages/user/index',
text: '我的',
iconPath: './styles/tabbar/my.png',
selectedIconPath: './styles/tabbar/my_selected.png',
},
],
color: '#707070',
selectedColor: '#2680EB',
@ -191,18 +199,12 @@ export default {
'codeColorList/index',
],
},
{
root: 'pages/codeList',
pages: [
'index',
'codeColorList/index',
],
},
{
root: 'pages/codeList',
pages: [
'index',
],
},
],
}

4
src/common/constant.ts
View File

@ -4,7 +4,7 @@
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
// export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
@ -14,7 +14,7 @@
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
// export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷
// export const BASE_URL = 'http://192.168.1.42:50001/lymarket' // 杰
// export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰
// CDN
// 生成密钥

4
src/components/FromList/index.scss
View File

@ -8,7 +8,7 @@
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
margin-top: 20px;
margin-right: 64px;
margin-right: 30px;
}
.form-list-label-required::before {
content: '*';
@ -21,7 +21,7 @@
font-weight: 400;
}
.form-list-right-meet {
background: #f6f6f6;
// background: #f6f6f6;
width: 506px;
min-height: 80px;
border-radius: 20px;

17
src/components/checkbox/index.tsx
View File

@ -42,19 +42,6 @@ const Checkbox = (props: params, ref) => {
value: status,
defaultValue: false,
})
// const selectedRef = useRef(status)
// if (status !== undefined){
// selectedRef.current = status
// }
// const [, setForceUpdate] = useState({})
// const setSelected = useCallback((v: SetStateAction<boolean>) => {
// const nextValue = typeof v === 'function' ? (v as (prevValue: boolean) => boolean)(selectedRef.current) : v
// console.log('对比',nextValue, selectedRef.current)
// if (nextValue === selectedRef.current) return
// selectedRef.current = nextValue
// console.log('强制刷新', nextValue, selectedRef.current)
// setForceUpdate({})
// }, [])
const onSelectEven = () => {
if (disabled) { return false }
@ -96,9 +83,7 @@ const Checkbox = (props: params, ref) => {
useImperativeHandle(ref, () => ({
onSelectEven,
}))
// useEffect(() => {
// setSelected(status)
// }, [status])
return (
<View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
{!hiddenCheckboxIcon && (

1
src/components/codeSelect/index.module.scss
View File

@ -2,6 +2,7 @@
position: fixed;
font-size: 32px;
color: #fff;
z-index: 1300;
.code_list__card {
position: absolute;
width: 306px;

19
src/components/codeSelect/index.tsx
View File

@ -8,12 +8,9 @@ import ViewCodeList from '@/components/viewCodeList/index'
interface param {
y: number
custom_print_id: number
sale_order_id: number
orderObj?: any
}
export default ({ y, custom_print_id = 0, sale_order_id = 0, orderObj = {} }: param) => {
export default ({ y, orderObj = {} }: param) => {
const [screenHeight, setScreenHeight] = useState({
customer_service_y: 0,
code_list_y: 0,
@ -21,14 +18,16 @@ export default ({ y, custom_print_id = 0, sale_order_id = 0, orderObj = {} }: pa
const [showCode, setShowCode] = useState(false)
const onNavigateTo = () => {
if (custom_print_id) {
goLink(`/pages/codeSetting/index?custom_print_id=${custom_print_id}`)
if (orderObj?.custom_print_id) {
goLink(`/pages/codeSetting/index?custom_print_id=${orderObj?.custom_print_id}`)
}
else {
goLink(`/pages/codeSetting/index?sale_order_id=${sale_order_id}`)
goLink(`/pages/codeSetting/index?sale_order_id=${orderObj?.id}`)
}
}
const [showPopup, setshowPopup] = useState(false)
return (<>
{showCode && <View className={styles.mask} catchMove onClick={() => setShowCode(!showCode)}></View>}
<MovableView className={classnames(styles.code_list, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${y}rpx`}>
@ -37,13 +36,13 @@ export default ({ y, custom_print_id = 0, sale_order_id = 0, orderObj = {} }: pa
<IconFont name="icon-yuanshimadanyulan" size={46} />
<Text>原始码单预览</Text>
</View>
<View className={styles['code_list__card--item']} >
{!!orderObj?.custom_print_id && <View className={styles['code_list__card--item']} >
<IconFont name="icon-zidingyimadanyulan" size={46} />
<Text>自定义码单预览</Text>
</View>
</View>}
<View className={styles['code_list__card--item']} onClick={onNavigateTo}>
<IconFont name="icon-bianjizidingyimadan" size={46} />
<Text>{custom_print_id ? '编辑自定义码单' : '新建自定义码单'}</Text>
<Text>{orderObj?.custom_print_id ? '编辑自定义码单' : '新建自定义码单'}</Text>
</View>
</View>}
<View className={styles['code_list--text']} onClick={() => setShowCode(!showCode)}>码单</View>

2
src/components/moveBtn copy/index.module.scss
View File

@ -12,7 +12,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
z-index: 1300;
position: fixed;
image {
width: 100%;

2
src/components/moveBtn/index.module.scss
View File

@ -12,7 +12,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
z-index: 1300;
position: fixed;
image {
width: 100%;

5
src/components/moveBtn/index.tsx
View File

@ -21,9 +21,8 @@ interface param {
messagePath?: string
showCart?: false|true
orderObj?: any
orderInfo?: any
}
const MoveBtn = ({ orderObj = {}, children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false, orderInfo = {} }: param) => {
const MoveBtn = ({ orderObj = {}, children = null, onShopClick, showList = [], messageTitle = '', messagePath = '', showCart = false }: param) => {
const userInfo = useSelector(state => state.userInfo)
// 获取购物车数据数量
const { getShopCount, commonData } = useCommonData()
@ -103,7 +102,7 @@ const MoveBtn = ({ orderObj = {}, children = null, onShopClick, showList = [], m
>
<Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
</MovableView>}
{onShow('code') && <CodeSelect orderObj={orderObj} y={screenHeight.code as number} custom_print_id={orderInfo?.custom_print_id} sale_order_id={orderInfo?.id} />}
{onShow('code') && <CodeSelect orderObj={orderObj} y={screenHeight.code as number} />}
<Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} showCard={showCart} onClose={customerClose} />
</MovableArea>
)

135
src/context/ContextCodeSetting/index copy.tsx
View File

@ -1,135 +0,0 @@
import React, { useContext, useReducer } from 'react'
import { CustomPrintCalculationApi } from '@/api/codeManage'
interface params {
productData?: any
dispatch?: any
}
interface PropsType {
children: React.ReactNode
}
type ACTIONTYPE =
| { type: 'setInitData'; data: any }
| { type: 'updateData'; data: any }
| { type: 'changeAdjustType'; data: number }
| { type: 'changeSaveStatus'; data: boolean }
function createCtx<A extends {} | null>() {
const ctx = React.createContext<A | undefined>(undefined)
function useCtx() {
const c = useContext(ctx)
if (c === undefined) { throw new Error('useCtx must be inside a Provider with a value') }
return c
}
return [useCtx, ctx.Provider] as const
}
export const [useCurrenCode, CurrentUserProvider] = createCtx<params>()
export default (props: PropsType) => {
const initialState = {
data: null, // 码单数据
adjust_type: 1, // 码单调整类型
custom_print_id: 0, // 自定义码单id
sale_order_id: 0, // 销售码单id
admin_data: null, // 需要传给后端的数据
save_status: false, // 是否保存了数据
}
function reducer(state: typeof initialState, action: ACTIONTYPE) {
switch (action.type) {
case 'setInitData':
return onInitData(state, action)
case 'updateData':
return onUpdateData(state, action)
case 'changeAdjustType':
return { ...state, adjust_type: action.data }
case 'changeSaveStatus':
return { ...state, save_status: action.data }
default:
throw new Error('reducer没找到对应的type')
}
}
// 初始化数据
const onInitData = (state, action) => {
const { data, custom_print_id, sale_order_id } = action
const custom_order_total = {
total_weight_error: data?.total_weight_error,
total_sale_weight: data?.total_sale_weight,
total_amount: data?.total_amount,
}
data.weight_admin = 0
data.price_admin = 0
data.weight_error_admin = 0
data?.product_details?.map((item, index) => {
item.weight_admin = 0
item.price_admin = 0
item.weight_error_admin = 0
item.index_str = index.toString()
return item?.product_color_details?.map((citem, cindex) => {
citem.index_str = `${item.index_str}_${cindex}` // 通过这个可以快速定位数组位置
citem.weight_setting = citem.weight
citem.weight_error_setting = citem.weight_error
citem.price_setting = citem.price
citem.weight_admin = 0
citem.price_admin = 0
citem.weight_error_admin = 0
return citem
})
})
return {
...state,
data,
custom_print_id,
sale_order_id,
custom_order_total,
admin_data: null,
init_state: true,
}
}
// 后端所需数据
const onUpdateData = (state, action) => {
const { data } = action
const updateData = {
adjust_type: parseInt(state.adjust_type),
purchaser_form_title_id: 0,
custom_print_product: [],
price: 0,
weight: 0,
weight_error: 0,
custom_print_id: parseInt(state.custom_print_id!),
sale_order_id: parseInt(state.sale_order_id!),
}
updateData.weight = data?.weight_admin || 0
updateData.price = data?.price_admin || 0
updateData.weight_error = data?.weight_error_admin || 0
data?.product_details?.map((item) => {
const product_item = {
price: item.price_admin || 0,
weight: item.weight_admin || 0,
weight_error: item.weight_error_admin || 0,
product_id: item.product_id,
product_name: item.product_name,
custom_print_product_color: [],
}
item?.product_color_details?.map((citem) => {
product_item.custom_print_product_color.push({
price: citem.price_admin || 0,
weight: citem.weight_admin || 0,
weight_error: citem.weight_error_admin || 0,
product_color_id: citem.product_color_id,
product_color_name: citem.product_color_name,
})
})
updateData.custom_print_product.push(product_item)
})
return { ...state, admin_data: updateData, data: { ...data } }
}
const [productData, dispatch] = useReducer(reducer, initialState)
return (
<CurrentUserProvider value={{ productData, dispatch }} children={props.children}></CurrentUserProvider>
)
}

43
src/context/ContextShop/index.tsx Normal file
View File

@ -0,0 +1,43 @@
import React, { useContext, useReducer } from 'react'
import { useDispatch } from 'react-redux'
import { CustomPrintCalculationApi } from '@/api/codeManage'
import type { CodeParam } from '@/reducers/codeData'
import { useSelector } from '@/reducers/hooks'
interface params {
state: CodeParam
dispatch: React.Dispatch<any>
}
interface PropsType {
children: React.ReactNode
}
function createCtx<A extends {} | null>() {
const ctx = React.createContext<A | undefined>(undefined)
function useCtx() {
const c = useContext(ctx)
if (c === undefined) { throw new Error('useCtx must be inside a Provider with a value') }
return c
}
return [useCtx, ctx.Provider] as const
}
export const [useCurrenCode, CurrentProvider] = createCtx<params>()
// https://dev.to/elisealcala/react-context-with-usereducer-and-typescript-4obm
export default (props: PropsType) => {
const initialState = { count: 0 }
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 }
case 'decrement':
return { count: state.count - 1 }
default:
return state
}
}
const [state, dispatch] = useReducer(reducer, initialState)
return (
<CurrentProvider value={{ state, dispatch }} children={props.children}></CurrentProvider>
)
}

19
src/pages/codeList/components/codeModel/index.tsx
View File

@ -1,5 +1,6 @@
import { Text, View } from '@tarojs/components'
import { useEffect, useState } from 'react'
import { useDidHide, useDidShow } from '@tarojs/taro'
import { useEffect, useRef, useState } from 'react'
import ColorItem from '../colorItem'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
@ -8,11 +9,7 @@ import Search from '@/components/search'
import { GetCustomCodeLApi } from '@/api/codeManage'
export default () => {
const [formData, setFormData] = useState({
sale_start_time: '',
sale_end_time: '',
any_query: '',
})
const [formData, setFormData] = useState<{ sale_start_time?: string; sale_end_time?: string; any_query?: string }|null>(null)
// 获取码单列表
const [list, setList] = useState<any[]>([])
const { fetchData: getCustomCode } = GetCustomCodeLApi()
@ -20,12 +17,18 @@ export default () => {
const res = await getCustomCode(formData)
setList(() => res.data?.list)
}
const getDataStatus = useRef(false)
useEffect(() => {
onCustomCode()
getDataStatus && onCustomCode()
getDataStatus.current = true
}, [formData])
useDidShow(() => {
onCustomCode()
})
const onSearch = (val) => {
setFormData(e => ({ ...e, any_query: val }))
formData == null ? setFormData(() => ({ any_query: val })) : setFormData(e => ({ ...e, any_query: val }))
}
return <View>
<View className={styles.code_list_search}>

6
src/pages/codeList/components/colorItem/index.tsx
View File

@ -3,6 +3,7 @@ import { useMemo } from 'react'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import { formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import { goLink } from '@/common/common'
interface Param {
info: {
@ -17,6 +18,7 @@ interface Param {
total_amount: number
total_sale_weight: number
sale_mode_name: string
id: number
}
}
export default (props: Param) => {
@ -27,7 +29,7 @@ export default (props: Param) => {
count: `订单信息：共 ${info?.product_count} 种面料，${info?.product_color_count} 种颜色，共 ${info?.roll} 条`,
}
}, [info])
return <View className={styles.code_list_item}>
return <View className={styles.code_list_item} >
<View className={styles.code_list_con__title}>
<Text>订单号：{info?.sale_order_no}</Text>
<View className={styles.code_list_con__title_mode}>{info?.sale_mode_name}</View>
@ -54,7 +56,7 @@ export default (props: Param) => {
<View className={styles.code_list_number}>{product.count}</View>
<View className={styles.code_list_bottom}>
<View className={styles.code_list_bottom_item}>码单浏览</View>
<View className={styles.code_list_bottom_item}>码单编辑</View>
<View className={styles.code_list_bottom_item} onClick={() => goLink(`/pages/codeSetting/index?custom_print_id=${info.id}`)}>码单编辑</View>
</View>
</View>
}

16
src/pages/codeList/components/companyModel/index.tsx
View File

@ -1,6 +1,6 @@
import { Text, View } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import type { CompanyParam } from '../companyItem'
import CompanyItem from '../companyItem'
import styles from './index.module.scss'
@ -11,12 +11,20 @@ import { goLink } from '@/common/common'
export default () => {
const { fetchData } = weightListApi()
const [list, setList] = useState<CompanyParam['value'][]>([])
useDidShow(() => {
(async() => {
const getDataList = async() => {
const res = await fetchData()
setList(() => res.data?.list)
})()
}
const getDataStatus = useRef(false)
useEffect(() => {
getDataStatus && getDataList()
getDataStatus.current = true
}, [])
useDidShow(() => {
getDataList()
})
return <View className={styles.company_main}>
<View className={styles.company_search}>
<View className={styles['code_list_search--code']}><Search placeholder="请输入单据抬头/客户/单号" /></View>

4
src/pages/codeList/index.tsx
View File

@ -14,9 +14,9 @@ export default () => {
]
const [selectIndex, setSelectIndex] = useState(1)
return <View className={styles.code_list__main}>
<SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />
{selectIndex == 1 && <SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />}
{selectIndex == 1 && <CodeModel />}
{selectIndex == 2 && <CompanyModel />}
{/* <TimePickerPopup showTime /> */}
<TimePickerPopup showTime />
</View>
}

2
src/pages/codeSetting/codeColorList/components/main/index.tsx
View File

@ -13,7 +13,7 @@ export default () => {
const submit = () => {
const index = productData.color_item_data.index_str.split(',')[0]
productData.data.product_details[index] = productData.color_item_data
dispatch({ type: 'updateData', data: { ...productData.data } })
dispatch({ type: 'updateData', data: { ...productData.data }, update_status: 1 })
Taro.navigateBack()
}
useEffect(() => {

7
src/pages/codeSetting/components/colorItemSetting/colorBlock/index.tsx
View File

@ -50,11 +50,12 @@ export default memo((props: Param) => {
colorInfo.price_admin = updateData.price
colorInfo.weight_error_admin = updateData.weight_error
productData.color_item_data.product_color_details[index[1]] = { ...colorInfo }
productData.color_item_data = { ...productData.color_item_data }
dispatch({ type: 'updateColorData', data: { ...productData.color_item_data }, update_status: 1 })
}, [productData.color_item_data])
}, [colorInfo])
return <Index colorInfo={productData.color_item_data.product_color_details[index[1]]} onChangeNumber={changeNumber} />
return <Index colorInfo={colorInfo} onChangeNumber={changeNumber} />
})
const Index = memo((props: IndexParam) => {
@ -62,9 +63,7 @@ const Index = memo((props: IndexParam) => {
const getNumber: NumberParam = (num, type) => {
props.onChangeNumber?.(num, type)
}
useEffect(() => {
console.log('colorInfo777:::', colorInfo)
}, [colorInfo])
const defaultNum = useMemo(() => {
return {
weight: Big(colorInfo.weight_admin || 0).div(Big(1000)).toNumber(),

4
src/pages/codeSetting/components/colorItemSetting/index.tsx
View File

@ -1,9 +1,5 @@
import { Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Big from 'big.js'
import type { NumberParam } from '../settingNumber'
import SettingNumber from '../settingNumber'
import ProductItem from '../productItem'
import styles from './index.module.scss'
import ColorBlock from './colorBlock'
import IconFont from '@/components/iconfont/iconfont'

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

@ -287,7 +287,7 @@ const Order = () => {
[orderDetail],
)
return (
<MoveBtn orderObj={orderDetail} showList={['order', 'code']} orderInfo={orderDetail} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart>
<MoveBtn orderObj={orderDetail} showList={['order', 'code']} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart>
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />

42
src/pages/shopCar/components/bottomBtn/index.module.scss Normal file
View File

@ -0,0 +1,42 @@
.Settlement_btn {
display: flex;
align-items: center;
background-color: #fff;
padding: 24px 24px 24px 56px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 999;
.select_text {
padding: 0 32px 0 16px;
font-size: 28px;
}
.price_count {
flex: 1;
font-size: 28px;
.price {
text {
&:nth-child(2) {
color: red;
}
}
}
.count {
font-size: 25px;
color: #ccc;
}
}
.btn {
width: 184px;
height: 80px;
border-radius: 80px;
font-size: 30px;
font-weight: 500;
color: #fff;
background-color: #4581ff;
text-align: center;
line-height: 80px;
}
}

18
src/pages/shopCar/components/bottomBtn/index.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Text, View } from '@tarojs/components'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
export default () => {
return <View className={styles.Settlement_btn}>
<MCheckbox />
<Text className={styles.select_text}>全选</Text>
<View className={styles.price_count}>
<View className={styles.price}>
<Text>预估金额:</Text>
<Text>￥3564.00</Text>
</View>
<View className={styles.count}>已选1种面料,1个颜色,共4条</View>
</View>
<View className={styles.btn}>结算</View>
</View>
}

46
src/pages/shopCar/components/productBlock/index.module.scss Normal file
View File

@ -0,0 +1,46 @@
.shop_product {
padding: 0 32px;
background-color: #fff;
border-radius: 20px;
margin-top: 24px;
.shop_product_title {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
.title_desc {
flex: 1;
margin-left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
height: 100%;
.model {
display: flex;
align-items: center;
.label {
width: 60px;
height: 28px;
font-size: 20px;
background-color: #4581ff;
color: #fff;
text-align: center;
align-items: center;
border-radius: 10px;
margin-left: 16px;
}
}
}
.unit {
height: 30px;
width: 148px;
font-size: 25px;
text-align: center;
line-height: 30px;
border: 1px solid red;
color: red;
border-radius: 5px;
}
}
}

24
src/pages/shopCar/components/productBlock/index.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Text, View } from '@tarojs/components'
import ProductItem from '../productItem'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
export default () => {
return <View className={styles.shop_product}>
<View className={styles.shop_product_title}>
<MCheckbox />
<View className={styles.title_desc}>
<View className={styles.model}>
<Text className={styles.name}>0681# 26s全棉平纹</Text>
<Text className={styles.label}>大货</Text>
</View>
<View className={styles.unit}>大货单位:条</View>
</View>
</View>
<ProductItem />
<ProductItem />
<ProductItem />
<ProductItem />
</View>
}

50
src/pages/shopCar/components/productItem/index.module.scss Normal file
View File

@ -0,0 +1,50 @@
.shop_product_item_con {
padding-bottom: 20px;
.shop_product_item {
display: flex;
padding: 24px 0;
.item_con {
display: flex;
margin-left: 20px;
flex: 1;
.img {
width: 118px;
height: 118px;
}
.item_name_price_count {
flex: 1;
margin-left: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
.name_price {
display: flex;
justify-content: space-between;
font-size: 28px;
text {
&:nth-child(2) {
color: red;
}
}
}
.count {
width: 201px;
align-self: flex-end;
}
}
}
}
.recommended {
height: 60px;
padding: 0 20px 0 50px;
background-color: #ccc;
border-radius: 10px;
display: flex;
justify-content: space-between;
font-size: 25px;
align-items: center;
.icon {
transform: rotate(-90deg);
}
}
}

36
src/pages/shopCar/components/productItem/index.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Text, View } from '@tarojs/components'
import styles from './index.module.scss'
import MCheckbox from '@/components/checkbox'
import LabAndImg from '@/components/LabAndImg'
import Counter from '@/components/counter'
import IconFont from '@/components/iconfont/iconfont'
export default () => {
return <>
<View className={styles.shop_product_item_con}>
<View className={styles.shop_product_item}>
<MCheckbox />
<View className={styles.item_con}>
<View className={styles.img}>
<LabAndImg value={{}}></LabAndImg>
</View>
<View className={styles.item_name_price_count}>
<View className={styles.name_price}>
<Text>001# 环保黑</Text>
<Text>￥37.50/kg</Text>
</View>
<View className={styles.count}>
<Counter defaultNum={1} />
</View>
</View>
</View>
</View>
<View className={styles.recommended}>
<Text>选择专属一对一配套螺纹推荐</Text>
<View className={styles.icon}>
<IconFont name="icon-xiala" size={30} />
</View>
</View>
</View>
</>
}

12
src/pages/shopCar/components/screwed/index.module.scss Normal file
View File

@ -0,0 +1,12 @@
.screwed_main {
position: fixed;
width: 700px;
height: 500px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1300;
background-color: #fff;
}

10
src/pages/shopCar/components/screwed/index.tsx Normal file
View File

@ -0,0 +1,10 @@
import { View } from '@tarojs/components'
import { memo } from 'react'
import Search from '../search'
import styles from './index.module.scss'
export default memo(() => {
return <View className={styles.screwed_main}>
<Search />
</View>
})

22
src/pages/shopCar/components/search/index.module.scss Normal file
View File

@ -0,0 +1,22 @@
.shop_search {
display: flex;
justify-content: space-between;
height: 100px;
align-items: center;
.search_item {
height: 68px;
width: 224px;
border-radius: 68px;
text-align: center;
line-height: 68px;
font-size: 30px;
background-color: #f8f8f8;
color: rgba(0, 0, 0, 0.8);
}
.search_item_select {
background-color: #cde5ff;
color: #4581ff;
border: 1px solid #4581ff;
box-sizing: border-box;
}
}

23
src/pages/shopCar/components/search/index.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Text, View } from '@tarojs/components'
import { memo, useEffect, useState } from 'react'
import styles from './index.module.scss'
interface Params {
defaultIndex?: number
onSelect?: (val: number) => void
}
export default memo((props: Params) => {
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: 3, maxNum: 100000, defaultNum: 3 },
]
const { defaultIndex = 0, onSelect } = props
const [index, setIndex] = useState(0)
useEffect(() => {
defaultIndex !== index && setIndex(defaultIndex)
}, [defaultIndex])
return <View className={styles.shop_search}>
{selectList?.map(item => <View key={item.value} onClick={() => onSelect?.(item.value)} className={styles.search_item}>{item.title}</View>)}
</View>
})

0
src/pages/shopCar/index.config.ts Normal file
View File

36
src/pages/shopCar/index.module.scss Normal file
View File

@ -0,0 +1,36 @@
.shop_main {
min-height: 100vh;
background-color: #f8f8f8;
.shop_header {
padding: 0 24px;
background-color: #fff;
.shop_header_sort {
height: 88px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28px;
.sort {
display: flex;
align-items: center;
background-color: rgb(245, 245, 245);
height: 55px;
padding: 0 24px;
box-sizing: border-box;
border-radius: 55px;
font-size: 25px;
}
.edit {
display: flex;
align-items: center;
text {
margin-left: 10px;
}
}
}
}
.shop_con {
padding: 0 24px;
padding-bottom: 150px;
}
}

82
src/pages/shopCar/index.tsx Normal file
View File

@ -0,0 +1,82 @@
import { Text, View } from '@tarojs/components'
import React, { ReactHTMLElement, memo, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import Search from './components/search'
import ProductBlock from './components/productBlock'
import BottomBtn from './components/bottomBtn'
import Screwed from './components/screwed'
import IconFont from '@/components/iconfont/iconfont'
export default () => {
useEffect(() => {
initData()
}, [])
const [data, setData] = useState<any[]>([])
const initData = () => {
const product_list: any = []
new Array(10).fill('').map((item, index) => {
const product: any = {
product_code: `100${index}`,
product_id: index + 1,
product_name: '26s全棉平纹',
color_list: [],
}
new Array(130).fill('').map((citem, cindex) => {
product.color_list.push({
estimate_amount: 100,
estimate_weight: 100,
id: 0,
lab: {
a: 0,
b: 0,
l: 0,
},
length: 0,
product_code: '00',
product_color_code: `00${cindex}}`,
product_color_id: cindex + 1,
product_color_name: '环保黑',
product_id: 0,
product_name: 'string',
rgb: {
b: 0,
g: 0,
r: 0,
},
roll: 10,
sale_mode: 0,
sale_mode_name: '大货',
sale_offset: 500,
sale_price: 500,
standard_price: 500,
texture_url: '',
weight_error: 500,
})
})
product_list.push(product)
})
setData(product_list)
}
return <View className={styles.shop_main}>
<View className={styles.shop_header}>
<View className={styles.shop_header_sort}>
<View className={styles.sort}>
<IconFont name="icon-paixu" size={30} />
<Text>添加时间降序</Text>
</View>
<View className={styles.edit}>
<IconFont name="icon-guanli" size={43} />
<Text>编辑</Text>
</View>
</View>
<Search />
</View>
<View className={styles.shop_con}>
{data?.map((item, index) => <ProductBlock key={index} />)}
</View>
<BottomBtn />
{/* <Screwed /> */}
<View className="common_safe_area_y"></View>
</View>
}

8
src/pages/weightListAdd/index.scss
View File

@ -1,6 +1,14 @@
.add-code-header-main {
padding: 20px;
min-height: 100vh;
background-color: #f7f7f7ff;
}
.add-address {
display: flex;
flex-direction: column;
background-color: #fff;
padding-bottom: 20px;
border-radius: 16px;
.add-address-default {
display: flex;
align-items: center;

3
src/pages/weightListAdd/index.tsx
View File

@ -127,6 +127,7 @@ export default () => {
}
return (
<View className="add-code-header-main">
<View className="add-address">
<FromList
onInput={(ev: any) => setFormData({ ...formData, title: ev.detail.value })}
@ -173,5 +174,7 @@ export default () => {
</View>
</View>
</View>
)
}