246 lines
8.0 KiB
TypeScript
246 lines
8.0 KiB
TypeScript
import { Text, View } from '@tarojs/components'
|
|
import Taro, { getCurrentPages, useDidShow, useUnload } from '@tarojs/taro'
|
|
import { useCallback, useMemo, useRef, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import type { AddressItem } from './components/address'
|
|
import Address from './components/address'
|
|
import type { ColorItem } from './components/productCard'
|
|
import ProductCard from './components/productCard'
|
|
import Remark from './components/remark'
|
|
import { alert, goLink } from '@/common/common'
|
|
import { SubmitColorCardApi } from '@/api/colorCard'
|
|
import { getFilterData } from '@/common/util'
|
|
import { UseSubscriptionMessage } from '@/use/useCommon'
|
|
import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
|
|
import { formatHashTag } from '@/common/fotmat'
|
|
import { submitCutSampleOrderApi } from '@/api/cutSample'
|
|
import { addressListApi } from '@/api/addressManager'
|
|
import NavBar from '@/components/navBar'
|
|
import IconFont from '@/components/iconfont/iconfont'
|
|
|
|
export interface submitData {
|
|
address_id: number
|
|
cut_sample_order_product_color_list: { color_num: number; product_color_id: number }[]
|
|
remark: string
|
|
shipment_mode: number
|
|
}
|
|
|
|
export interface ParamItem {
|
|
code: string
|
|
id: number
|
|
color_card_name: string
|
|
texture_url: string
|
|
lab: { l: number; a: number; b: number }
|
|
rgb: { r: number; g: number; b: number }
|
|
is_add: boolean
|
|
count?: number
|
|
component: string
|
|
craft: string
|
|
describe: string
|
|
hexadecimal_code: string
|
|
is_favorite: boolean
|
|
kind_code: string
|
|
kind_id: number
|
|
kind_name: string
|
|
name: string
|
|
product_color_count: number
|
|
product_screw_id: number
|
|
weight_density: string
|
|
width: string
|
|
colors: ColorItem[]
|
|
}
|
|
export default () => {
|
|
const submitData = useRef<submitData>({
|
|
address_id: 0,
|
|
cut_sample_order_product_color_list: [],
|
|
remark: '',
|
|
shipment_mode: 2,
|
|
})
|
|
|
|
const [addressInfo, setAddressInfo] = useState<AddressItem>()
|
|
const getAddress = (e) => {
|
|
submitData.current.address_id = e.id
|
|
setAddressInfo(() => e)
|
|
}
|
|
const [list, setList] = useState<ParamItem[]>([])
|
|
useDidShow(() => {
|
|
const list = Taro.getStorageSync('cutSample') ? JSON.parse(Taro.getStorageSync('cutSample')) : []
|
|
const info = Taro.getStorageSync('cutSampleOther') ? JSON.parse(Taro.getStorageSync('cutSampleOther')) : {}
|
|
setList(() => list)
|
|
computeCount(list)
|
|
if (info.address) {
|
|
setAddressInfo(info.address)
|
|
submitData.current.address_id = info?.address?.id || 0
|
|
}
|
|
else {
|
|
getAddressDefault()
|
|
}
|
|
setRemarkData(info.remark)
|
|
})
|
|
|
|
useUnload(() => {
|
|
Taro.removeStorageSync('cutSample')
|
|
Taro.removeStorageSync('cutSampleOther')
|
|
})
|
|
|
|
const onAddCard = () => {
|
|
Taro.setStorageSync('cutSample', JSON.stringify(list))
|
|
Taro.setStorageSync('cutSampleOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark }))
|
|
Taro.navigateTo({
|
|
url: '/pages/cutSampleList/index',
|
|
})
|
|
}
|
|
|
|
const onDelData = useCallback((val: ParamItem) => {
|
|
return (id: number) => {
|
|
const res = val.colors?.filter((citem) => {
|
|
return citem.id != id
|
|
})
|
|
if (res.length <= 0 && list.length === 1) {
|
|
return alert.none('不能删除最后一个剪样')
|
|
}
|
|
else {
|
|
if (res.length > 0) {
|
|
list?.map((item, index) => {
|
|
if (item.id === val.id) {
|
|
list[index] = { ...item, colors: [...res] }
|
|
}
|
|
})
|
|
computeCount(list)
|
|
setList(() => [...list])
|
|
}
|
|
else {
|
|
const data = list?.filter(item => item.id != val.id)
|
|
computeCount(data)
|
|
setList(() => [...data])
|
|
}
|
|
}
|
|
}
|
|
}, [list])
|
|
|
|
// 计算总数
|
|
const [numText, setNumText] = useState('')
|
|
const computeCount = (list) => {
|
|
let p_count = 0
|
|
let c_count = 0
|
|
let all_count = 0
|
|
list?.map((item) => {
|
|
p_count += 1
|
|
item.colors?.map((citem) => {
|
|
c_count += 1
|
|
all_count += citem.count
|
|
})
|
|
})
|
|
console.log('list:::', list)
|
|
setNumText(() => `当前共 ${p_count} 种面料, ${c_count} 种色号,共 ${all_count} 份`)
|
|
}
|
|
|
|
const onChangeNum = useCallback((val: { id: number; count: number }) => {
|
|
list?.map((item) => {
|
|
item?.colors?.map((citem) => {
|
|
if (citem.id == val.id) {
|
|
citem.count = val.count
|
|
}
|
|
})
|
|
})
|
|
setList(() => list)
|
|
computeCount(list)
|
|
}, [list])
|
|
|
|
// 订阅消息
|
|
const { ColorCard } = SUBSCRIPTION_MESSAGE_SCENE
|
|
const { openSubscriptionMessage } = UseSubscriptionMessage()
|
|
|
|
const { fetchData: submitFetchData } = submitCutSampleOrderApi()
|
|
const onSubmitData = async() => {
|
|
Taro.showModal({
|
|
title: '确定提交订单？',
|
|
async success(val) {
|
|
if (val.confirm) {
|
|
submitData.current.cut_sample_order_product_color_list = []
|
|
list?.map((item) => {
|
|
item.colors?.map((citem) => {
|
|
submitData.current.cut_sample_order_product_color_list.push({
|
|
color_num: citem.count || 0,
|
|
product_color_id: citem.id,
|
|
})
|
|
})
|
|
})
|
|
if (!submitData.current.address_id) { return alert.none('请选择收货地址') }
|
|
await openSubscriptionMessage({ scenes: ColorCard.value })
|
|
const res = await submitFetchData(getFilterData(submitData.current))
|
|
if (res.success) {
|
|
alert.success('提交成功')
|
|
goLink('/pages/cutSampleListOrderDetail/index', { id: res.data.id }, 'redirectTo')
|
|
}
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
const [remarkData, setRemarkData] = useState('')
|
|
const onRemark = (e) => {
|
|
submitData.current.remark = e
|
|
setRemarkData(e)
|
|
}
|
|
|
|
// 获取默认地址
|
|
const { fetchData: addressListFetchData, state } = addressListApi()
|
|
const getAddressDefault = async() => {
|
|
const res = await addressListFetchData()
|
|
let defaultInfo: AddressItem|null = null
|
|
res?.data.list?.map((item) => {
|
|
if (item.is_default) {
|
|
defaultInfo = {
|
|
id: item.id,
|
|
address_title: item.province_name + item.city_name + item.district_name + item.address_detail,
|
|
address_name: item.name,
|
|
address_phone: item.phone,
|
|
}
|
|
}
|
|
})
|
|
submitData.current.address_id = defaultInfo!.id || 0
|
|
setAddressInfo(defaultInfo!)
|
|
}
|
|
const onClickBack = () => {
|
|
Taro.showModal({
|
|
content: '返回后页面数据将不回保留，确认返回？',
|
|
confirmColor: '#4a8dff',
|
|
success: ({ confirm }) => {
|
|
if (confirm) {
|
|
Taro.navigateBack({
|
|
delta: 1,
|
|
})
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
return <View className={styles.main}>
|
|
<NavBar hasLeft leftSlot={
|
|
<View onClick={onClickBack}>
|
|
<IconFont customClassName={styles.backIcon} name="icon-rukou" size={48} color="#191919"></IconFont>
|
|
</View>
|
|
} title="领取剪样"
|
|
></NavBar>
|
|
<View className={styles.address_info}><Address onSelect={getAddress} defaultValue={addressInfo} /></View>
|
|
<View className={styles.add_card_btn} onClick={onAddCard}>添加剪样</View>
|
|
{list?.map((item, index) => <View key={item.id} className={styles.card_con}>
|
|
<View className={styles.card_header}>{formatHashTag(item.code, item.name)}</View>
|
|
<View className={styles.card_list}>
|
|
{item.colors?.map(citem =>
|
|
<ProductCard key={citem.id} value={citem} onDelData={onDelData(item)} onChangeNum={onChangeNum} />,
|
|
)}
|
|
{(list?.length - 1 === index) && <View className={styles.express_btn}>快递到付</View>}
|
|
</View>
|
|
</View>)}
|
|
<View className={styles.remark}><Remark onSave={onRemark} defaultValue={remarkData} /></View>
|
|
<View className={styles.order_btn}>
|
|
<View className={styles.btn_con} onClick={onSubmitData}>
|
|
<Text>{numText}</Text>
|
|
<View className={styles.btn}>提交订单</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
}
|