From 951acae9ba98400599298dc24864abb996acab64 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Thu, 16 Feb 2023 20:22:26 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E9=A2=86=E5=8F=96=E8=89=B2?= =?UTF-8?q?=E5=8D=A1):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/colorCard.ts | 34 +++++ src/app.config.ts | 7 +- src/common/constant.ts | 4 +- src/components/checkbox/index.module.scss | 7 +- src/components/checkbox/index.tsx | 4 +- src/components/counter/index.tsx | 8 +- src/components/remark/index.module.scss | 48 +++++++ src/components/remark/index.tsx | 46 +++++++ .../selectAddress/index.module.scss | 15 +++ src/components/selectAddress/index.tsx | 24 +++- .../components/productItem/index.tsx | 44 +++++-- src/pages/colorCard/index.tsx | 52 ++++++-- .../components/address/index.tsx | 62 ++++----- .../components/productCard/index.module.scss | 68 ++++------ .../components/productCard/index.tsx | 118 +++++++++++------- .../components/remark/index.tsx | 35 ++++-- src/pages/colorCardOrder/index.module.scss | 25 ++++ src/pages/colorCardOrder/index.tsx | 99 ++++++++++++++- .../components/address/index.module.scss | 39 ++++++ .../components/address/index.tsx | 48 +++++++ .../components/orderInfo/index.module.scss | 38 ++++++ .../components/orderInfo/index.tsx | 21 ++++ .../components/productCard/index.module.scss | 51 ++++++++ .../components/productCard/index.tsx | 49 ++++++++ .../components/remark/index.module.scss | 25 ++++ .../components/remark/index.tsx | 21 ++++ .../colorCardOrderDetail/index.config.ts | 4 + .../colorCardOrderDetail/index.module.scss | 45 +++++++ src/pages/colorCardOrderDetail/index.tsx | 29 +++++ .../components/productItem/index.module.scss | 3 +- .../components/productItem/index.tsx | 44 +++++-- src/pages/getColorCard/index.tsx | 109 ++++++++++++++-- 32 files changed, 1041 insertions(+), 185 deletions(-) create mode 100644 src/api/colorCard.ts create mode 100644 src/components/remark/index.module.scss create mode 100644 src/components/remark/index.tsx create mode 100644 src/pages/colorCardOrderDetail/components/address/index.module.scss create mode 100644 src/pages/colorCardOrderDetail/components/address/index.tsx create mode 100644 src/pages/colorCardOrderDetail/components/orderInfo/index.module.scss create mode 100644 src/pages/colorCardOrderDetail/components/orderInfo/index.tsx create mode 100644 src/pages/colorCardOrderDetail/components/productCard/index.module.scss create mode 100644 src/pages/colorCardOrderDetail/components/productCard/index.tsx create mode 100644 src/pages/colorCardOrderDetail/components/remark/index.module.scss create mode 100644 src/pages/colorCardOrderDetail/components/remark/index.tsx create mode 100644 src/pages/colorCardOrderDetail/index.config.ts create mode 100644 src/pages/colorCardOrderDetail/index.module.scss create mode 100644 src/pages/colorCardOrderDetail/index.tsx diff --git a/src/api/colorCard.ts b/src/api/colorCard.ts new file mode 100644 index 0000000..c8e0e6f --- /dev/null +++ b/src/api/colorCard.ts @@ -0,0 +1,34 @@ +import { useRequest as request } from '@/use/useHttp' + +/** + * 获取所有色卡列表 + * @returns + */ +export const GetColorCardApi = () => { + return request({ + url: '/v1/mall/colorCardOrder/canAddCard', + method: 'post', + }) +} + +/** + * 提交色卡 + * @returns + */ +export const SubmitColorCardApi = () => { + return request({ + url: '/v1/mall/colorCardOrder/submit', + method: 'post', + }) +} + +/** + * 获取色卡订单列表 + * @returns + */ +export const GetColorCardOrderApi = () => { + return request({ + url: '/v1/mall/colorCardOrder/list', + method: 'get', + }) +} diff --git a/src/app.config.ts b/src/app.config.ts index 26a8cf1..1f9cc41 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -224,6 +224,11 @@ export default { 'index', ], }, - + { + root: 'pages/colorCardOrderDetail', + pages: [ + 'index', + ], + }, ], } diff --git a/src/common/constant.ts b/src/common/constant.ts index dea2b0c..ede38c2 100644 --- a/src/common/constant.ts +++ b/src/common/constant.ts @@ -5,7 +5,7 @@ export const BASE_URL = CURRENT_BASE_URL // 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://pre.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` // 发 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发 @@ -14,7 +14,7 @@ export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布 // 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:50001/lymarket' // 婷 -// export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰 +export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰 // CDN // 生成密钥 diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss index fdaed3e..3eda977 100644 --- a/src/components/checkbox/index.module.scss +++ b/src/components/checkbox/index.module.scss @@ -36,14 +36,17 @@ border-color: $color_main; } } +.checkbox_main_no_selected { + border: 0 !important; +} .checkbox_item { display: flex; align-items: center; justify-content: center; } .no_checkbox_item { - border: 0; - background-color: #dddddd; + border: 0 !important; + background-color: #dddddd !important; } .checkbox_item_select { background-color: $color_main; diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index cb5f72f..ee1eef9 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -68,16 +68,16 @@ const Checkbox = (props: params, ref) => { [styles[`checkbox_main--${size}`]]: size, [styles['checkbox_main--round']]: round, [styles['checkbox_main--circle']]: circle, + [styles.checkbox_main_no_selected]: disabled, } return classObject } const getClassName = () => { - const classObject = { + return { [styles.no_checkbox_item]: disabled, [styles.checkbox_item_select]: selected, } - return classObject } useImperativeHandle(ref, () => ({ diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index 628a7e0..7a758a1 100644 --- a/src/components/counter/index.tsx +++ b/src/components/counter/index.tsx @@ -13,6 +13,8 @@ interface params { onChange?: (val: number) => void onBlue?: (val: number) => void // 失去焦点触发 onClickBtn?: (val: number) => void + onMax?: () => void // 触发大于最大值回调 + onMin?: () => void // 触发小于最小值回调 unit?: string disabled?: true | false // 是否禁用 returnZero?: true | false // 少于最小值时是否归0 @@ -28,6 +30,8 @@ const CounterDisplayName = (props: params) => { onChange, onBlue, onClickBtn, + onMax, + onMin, returnZero = false, unit = '', disabled = false, @@ -76,14 +80,14 @@ const CounterDisplayName = (props: params) => { const count = value.count let num_res = value.count if (!isInteger(num_res)) { - console.log('num_resaa::', num_res) num_res = Math.trunc(num_res) } else { - console.log('num_resbb::', num_res) num_res = Big(count).minus(step).toNumber() } + if (num_res < minNum) { onMin?.() } + if (returnZero) { num_res = num_res < minNum ? 0 : num_res } diff --git a/src/components/remark/index.module.scss b/src/components/remark/index.module.scss new file mode 100644 index 0000000..faac4cb --- /dev/null +++ b/src/components/remark/index.module.scss @@ -0,0 +1,48 @@ +.order_popup { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 0; + .order_popup_title { + color: $font_size_big; + font-weight: 700; + color: #000000; + padding-bottom: 20px; + } + .order_popup_input { + width: 100%; + padding: 0 25px; + box-sizing: border-box; + margin-top: 43px; + position: relative; + .descDataNum { + position: absolute; + right: 40px; + bottom: 10px; + height: 39px; + font-size: $font_size_medium; + color: $color_font_two; + } + textarea { + background-color: #f3f3f3; + border-radius: 10px; + width: 100%; + height: 313px; + padding: 20px; + padding-bottom: 50px; + box-sizing: border-box; + font-size: $font_size; + border: 2px solid #e6e6e6; + } + } + .order_save_address { + height: 82px; + background: $color_main; + border-radius: 40px; + width: 668px; + text-align: center; + line-height: 82px; + color: #fff; + margin-top: 60px; + } +} diff --git a/src/components/remark/index.tsx b/src/components/remark/index.tsx new file mode 100644 index 0000000..621b837 --- /dev/null +++ b/src/components/remark/index.tsx @@ -0,0 +1,46 @@ +import { Textarea, View } from '@tarojs/components' +import { useCallback, useEffect, useState } from 'react' +import styles from './index.module.scss' +import Popup from '@/components/popup' + +interface Param { + onBlur?: (val: any) => void + onSave?: (val: string) => void + show: boolean + onClose: (val: boolean) => void +} +export default (props: Param) => { + const [descData, setDescData] = useState({ + number: 0, + value: '', + count: 200, + }) + const [showDesc, setShowDesc] = useState(false) + useEffect(() => { + setShowDesc(props.show) + }, [props.show]) + const getDesc = useCallback((e) => { + const value = e.detail.value + let res = value + if (value.length > descData.count) { + res = value.slice(0, descData.count) + } + setDescData({ ...descData, number: res.length, value: res }) + }, []) + + const setSave = () => { + props.onSave?.(descData.value) + } + return ( + props.onClose(false)}> + + 编辑备注 + + + {descData.number}/{descData.count} + + setSave()}>保存 + + + ) +} diff --git a/src/components/selectAddress/index.module.scss b/src/components/selectAddress/index.module.scss index e69de29..19755ee 100644 --- a/src/components/selectAddress/index.module.scss +++ b/src/components/selectAddress/index.module.scss @@ -0,0 +1,15 @@ +.order_address_list { + height: 80vh; + .order_address_title { + font-size: $font_size; + font-weight: 700; + width: 100%; + text-align: center; + padding: 20px 0 30px 0; + height: 100px; + } + .addressList_con { + padding-bottom: 20px; + height: calc(100% - 160px); + } +} diff --git a/src/components/selectAddress/index.tsx b/src/components/selectAddress/index.tsx index e66c545..8116dac 100644 --- a/src/components/selectAddress/index.tsx +++ b/src/components/selectAddress/index.tsx @@ -1,16 +1,28 @@ import { View } from '@tarojs/components' -import { useState } from 'react' +import { useEffect, useState } from 'react' import AddressList from '../AddressList' import styles from './index.module.scss' import Popup from '@/components/popup' -export default () => { - const [showAddressList, setShowAddressList] = useState(false) - return setShowAddressList(false)}> +interface Params { + show: boolean + onClose: (val: boolean) => void + onSelect: (val: any) => void +} +export default (props: Params) => { + const [show, setShow] = useState(false) + useEffect(() => { + setShow(props.show) + }, [props.show]) + const getSelect = (e) => { + props.onSelect(e) + props.onClose(false) + } + return props.onClose(false)}> - 请选择收货地址 + 请选择收货地址2 - + diff --git a/src/pages/colorCard/components/productItem/index.tsx b/src/pages/colorCard/components/productItem/index.tsx index 48b1f1d..217c056 100644 --- a/src/pages/colorCard/components/productItem/index.tsx +++ b/src/pages/colorCard/components/productItem/index.tsx @@ -1,12 +1,42 @@ import { Text, View } from '@tarojs/components' +import { useMemo } from 'react' import styles from './index.module.scss' import LabAndImg from '@/components/LabAndImg' -export default () => { +interface color_card_info { + count: number + lab: { l: number; a: number; b: number } + name: string + rgb: { r: number; g: number; b: number } + texture_url: string +} + +export interface ParamItem { + color_card_count: number + color_card_number: number + id: number + order_id: number + order_no: string + order_status: number + order_status_name: string + shipment_mode: number + shipment_mode_name: string + color_card_info: color_card_info[] + +} + +interface Param { + value: ParamItem +} +export default (props: Param) => { + const { value } = props + const card_one = useMemo(() => { + return value.color_card_info ? value.color_card_info[0] : null + }, [value]) return - 单号：XS-LY-2208220092 - 申请中 + 单号：{value.order_no} + {value.order_status_name} @@ -15,16 +45,16 @@ export default () => { - 9265# 26S全棉双卫衣 - 物流 + {card_one?.name} + {value.shipment_mode_name} - x1本 + x{card_one?.count}本 色卡信息: - 3 种色卡，共 3 本 + {value.color_card_count} 种色卡，共 {value.color_card_number} 本 快递到付 取消订单 diff --git a/src/pages/colorCard/index.tsx b/src/pages/colorCard/index.tsx index 40ab910..39558d6 100644 --- a/src/pages/colorCard/index.tsx +++ b/src/pages/colorCard/index.tsx @@ -1,14 +1,17 @@ import { Image, Text, View } from '@tarojs/components' import Taro from '@tarojs/taro' -import { useRef, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import classNames from 'classnames' import styles from './index.module.scss' +import type { ParamItem } from './components/productItem' import ProductItem from './components/productItem' import SelectList from '@/components/selectList' import kong from '@/styles/image/kong.png' import LabAndImg from '@/components/LabAndImg' import InfiniteScroll from '@/components/infiniteScroll' import { goLink } from '@/common/common' +import { GetColorCardOrderApi } from '@/api/colorCard' +import { dataLoadingStatus } from '@/common/util' export default () => { const [selectIndex, setSelectIndex] = useState(1) @@ -27,6 +30,41 @@ export default () => { const changeStatus = (index: number) => { setStatusIndex(index) } + + const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({ + page: 1, + size: 10, + }) + + const [orderData, setOrderData] = useState<{ list: ParamItem[]; total: number }>({ + list: [], + total: 0, + }) + const { fetchData: fetchDataOrder, state: OrderState } = GetColorCardOrderApi() + const getColorCardOrder = async() => { + const res = await fetchDataOrder() + setOrderData(() => res.data) + } + + useEffect(() => { + getColorCardOrder() + }, []) + + // 上拉加载数据 + const pageNum = useRef({ size: searchData.size, page: searchData.page }) + const getScrolltolower = useCallback(() => { + if (colorCardData.list.length < colorCardData.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchData(e => ({ ...e, size })) + } + }, [colorCardData]) + + // 数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({ list: orderData?.list, total: orderData?.total, status: OrderState.loading }) + }, [orderData, OrderState]) + return setSelectIndex(index)} /> @@ -39,16 +77,16 @@ export default () => { } - {new Array(10).fill('').map((item) => { + {orderData.list?.map((item) => { return ( - + ) })} diff --git a/src/pages/colorCardOrder/components/address/index.tsx b/src/pages/colorCardOrder/components/address/index.tsx index a9ead27..780ae1c 100644 --- a/src/pages/colorCardOrder/components/address/index.tsx +++ b/src/pages/colorCardOrder/components/address/index.tsx @@ -4,41 +4,43 @@ import styles from './index.module.scss' import IconFont from '@/components/iconfont/iconfont' import AddressList from '@/components/AddressList' import Popup from '@/components/popup' +import SelectAddress from '@/components/selectAddress' interface Param { - address_title: string - address_name: string - address_phone: string - address_mode: string + onSelect: (val: number) => void } export default (props: Param) => { - const { - address_title = '广东省佛山市禅城区南庄镇吉利大道872巷备份', - address_name = '谭先生', - address_phone = '13334726540', - address_mode = '物流', - } = props + const [data, setData] = useState({ + address_title: '', + address_name: '', + address_phone: '', + address_mode: '物流', + }) - const [showList, setShowList] = useState(true) - return - - - - {address_title} - - - - {address_name + address_phone} - {address_mode} - - - setShowList(false)}> - - 请选择收货地址 - - + const [showList, setShowList] = useState(false) + const getAddress = (e) => { + props.onSelect(e.id) + setData(val => ({ + ...val, + address_title: e.province_name + e.district_name + e.city_name + e.address_detail, + address_name: e.name, + address_phone: e.phone, + })) + } + return <> + setShowList(true)}> + + + + {data.address_title || '请选择收货地址'} + + + + {`${data.address_name} ${data.address_phone}`} + {data.address_mode} - - + + setShowList(false)} onSelect={getAddress} /> + } diff --git a/src/pages/colorCardOrder/components/productCard/index.module.scss b/src/pages/colorCardOrder/components/productCard/index.module.scss index cd603cf..3d975ba 100644 --- a/src/pages/colorCardOrder/components/productCard/index.module.scss +++ b/src/pages/colorCardOrder/components/productCard/index.module.scss @@ -1,51 +1,27 @@ -.card_con { - background-color: #ffffff; - padding: 0 24px; - margin-top: 24px; - box-sizing: border-box; - border-radius: 16px; - .card_header { - height: 82px; - font-size: 28px; - color: rgba(0, 0, 0, 0.8); - font-weight: 500; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - line-height: 82px; - } - .card_list { - .card_item { - height: 140px; - display: flex; - padding-top: 24px; - color: rgba(0, 0, 0, 0.8); +.card_item { + height: 140px; + display: flex; + padding-top: 24px; + color: rgba(0, 0, 0, 0.8); - .img { - width: 108px; - height: 108px; - } - .name_count { - width: 100%; - margin-left: 42px; - flex: 1; - font-size: 28px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - .btns { - width: 100%; - display: flex; - justify-content: flex-end; - } - .count_btn { - margin-top: 27px; - width: 170px; - } - } - } - .express_btn { - font-size: 28px; - color: #f64861; + .img { + width: 108px; + height: 108px; + } + .name_count { + width: 100%; + margin-left: 42px; + flex: 1; + font-size: 28px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + .btns { width: 100%; - text-align: right; - padding: 32px 0 24px 0; + display: flex; + justify-content: flex-end; + } + .count_btn { + margin-top: 27px; + width: 170px; } } } diff --git a/src/pages/colorCardOrder/components/productCard/index.tsx b/src/pages/colorCardOrder/components/productCard/index.tsx index 68a6b4f..b3e97a7 100644 --- a/src/pages/colorCardOrder/components/productCard/index.tsx +++ b/src/pages/colorCardOrder/components/productCard/index.tsx @@ -1,49 +1,81 @@ import { Text, View } from '@tarojs/components' +import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro' +import { memo, useCallback, useEffect, useState } from 'react' import styles from './index.module.scss' import Counter from '@/components/counter' import LabAndImg from '@/components/LabAndImg' -export default () => { - return - 色卡信息 - - - - - 秋季平纹卫衣(食毛)系列 - - - - - - - - - - - - 秋季平纹卫衣(食毛)系列 - - - - - - - - - 快递到付 - - +interface ProductItemParamType { + code: string + id: number + name: string } + +export interface ParamItem { + id: number + affiliation_product: ProductItemParamType[] + 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 +} + +export interface Param { + value: ParamItem + onChangeNum?: (val: { id: number; count: number }) => void + onDelData?: (val: number) => void +} + +export default memo((props: Param) => { + return +}) + +const ProductItem = memo((props: Param) => { + const { value } = props + const labAndImgObj = useCallback( + (item) => { + return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url } + }, + [value], + ) + const onChangeNum = (num) => { + props.onChangeNum?.({ id: value.id, count: num }) + } + console.log('测试：：：', value) + const onMin = () => { + Taro.showModal({ + title: '确认删除所选色卡？', + success(res) { + if (res.confirm) { + props?.onDelData?.(value.id) + } + else if (res.cancel) { + props.onChangeNum?.({ id: value.id, count: 1 }) + } + }, + }) + } + return <> + + + + {value.color_card_name} + + + + + + + + +}) diff --git a/src/pages/colorCardOrder/components/remark/index.tsx b/src/pages/colorCardOrder/components/remark/index.tsx index 6571567..d4e52f7 100644 --- a/src/pages/colorCardOrder/components/remark/index.tsx +++ b/src/pages/colorCardOrder/components/remark/index.tsx @@ -1,14 +1,29 @@ import { Text, View } from '@tarojs/components' +import { useState } from 'react' import styles from './index.module.scss' +import Remark from '@/components/remark' -export default () => { - return - - 备注信息 - 填写/修改备注 - - - 尚未备注信息 - - +interface Param { + onSave?: (val: string) => void +} +export default (props: Param) => { + const [showRemark, setShowRemark] = useState(false) + const [data, setData] = useState('') + const getOnSave = (e: string) => { + setData(e) + props.onSave?.(e) + setShowRemark(false) + } + return <> + setShowRemark(true)}> + + 备注信息 + 填写/修改备注 + + + {data || '尚未备注信息'} + + + setShowRemark(false)} /> + } diff --git a/src/pages/colorCardOrder/index.module.scss b/src/pages/colorCardOrder/index.module.scss index 0834df3..8df6368 100644 --- a/src/pages/colorCardOrder/index.module.scss +++ b/src/pages/colorCardOrder/index.module.scss @@ -2,6 +2,7 @@ min-height: 100vh; background-color: #f7f7f7ff; padding: 24px; + padding-bottom: 180px; .add_card_btn { height: 82px; background: #ffffff; @@ -12,6 +13,30 @@ color: #337fff; margin-top: 24px; } + .card_con { + background-color: #ffffff; + padding: 0 24px; + margin-top: 24px; + box-sizing: border-box; + border-radius: 16px; + .card_header { + height: 82px; + font-size: 28px; + color: rgba(0, 0, 0, 0.8); + font-weight: 500; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + line-height: 82px; + } + .card_list { + .express_btn { + font-size: 28px; + color: #f64861; + width: 100%; + text-align: right; + padding: 32px 0 24px 0; + } + } + } .order_btn { position: fixed; diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx index 37e6b2c..5a80d0c 100644 --- a/src/pages/colorCardOrder/index.tsx +++ b/src/pages/colorCardOrder/index.tsx @@ -1,18 +1,105 @@ import { Text, View } from '@tarojs/components' +import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro' +import { useCallback, useMemo, useRef, useState } from 'react' import styles from './index.module.scss' import Address from './components/address' +import type { ParamItem } 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' +export interface submitData { + address_id: number + color_card_infos: { count: number; id: number }[] + remark: string +} export default () => { + const submitData = useRef({ + address_id: 0, + color_card_infos: [], + remark: '', + }) + const getAddress = (id: number) => { + submitData.current.address_id = id + } + const [list, setList] = useState([]) + useDidShow(() => { + const res = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : [] + setList(() => res) + computeCount(res) + Taro.removeStorageSync('colorCard') + }) + + const onAddCard = () => { + Taro.setStorageSync('colorCard', JSON.stringify(list)) + Taro.navigateTo({ + url: '/pages/getColorCard/index', + }) + } + + const onDelData = useCallback((id) => { + if (list.length === 1) { return alert.none('不能删除最后一个色卡') } + const res = list?.filter((item) => { + return item.id != id + }) + computeCount(res) + setList(() => res) + }, [list]) + + // 计算总数 + const [numText, setNumText] = useState('') + const computeCount = (list) => { + let res = 0 + list.map(item => res += item.count) + setNumText(() => `当前共 ${list.length} 种色卡, 共 ${res} 本`) + } + + const onChangeNum = useCallback((val: { id: number; count: number }) => { + list?.map((item) => { + if (item.id == val.id) { + item.count = val.count + } + }) + setList(() => list) + computeCount(list) + }, [list]) + + const { fetchData: submitFetchData } = SubmitColorCardApi() + const onSubmitData = async() => { + submitData.current.color_card_infos = [] + list?.map((item) => { + submitData.current.color_card_infos.push({ + count: item.count || 0, + id: item.id, + }) + }) + if (!submitData.current.address_id) { return alert.none('请选择收货地址') } + const res = await submitFetchData(getFilterData(submitData.current)) + if (res.success) { + alert.success('提交成功') + } + } + + const onRemark = (e) => { + submitData.current.remark = e + } + return -
- 添加色卡 - - +
+ 添加色卡 + + 色卡信息 + + {list?.map(item => )} + 快递到付 + + + - - 当前共 1 种色卡, 共 3 本 + + {numText} 提交订单 diff --git a/src/pages/colorCardOrderDetail/components/address/index.module.scss b/src/pages/colorCardOrderDetail/components/address/index.module.scss new file mode 100644 index 0000000..ed1e78e --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/address/index.module.scss @@ -0,0 +1,39 @@ +.address_con { + display: flex; + padding: 32px; + background-color: #ffffffff; + border-radius: 16px; + .message { + display: flex; + flex-direction: column; + width: 100%; + margin-left: 24px; + .info_address { + font-size: 28px; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding-bottom: 16px; + .address_name { + color: rgba(0, 0, 0, 0.8); + width: 461px; + } + } + .info_phone { + display: flex; + padding-top: 32px; + justify-content: space-between; + font-size: 28px; + color: rgba(0, 0, 0, 0.8); + text { + display: flex; + align-items: center; + &:nth-child(2) { + color: #337fffff; + } + } + } + } +} diff --git a/src/pages/colorCardOrderDetail/components/address/index.tsx b/src/pages/colorCardOrderDetail/components/address/index.tsx new file mode 100644 index 0000000..da1272f --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/address/index.tsx @@ -0,0 +1,48 @@ +import { Text, View } from '@tarojs/components' +import { useEffect, useState } from 'react' +import styles from './index.module.scss' +import IconFont from '@/components/iconfont/iconfont' +import AddressList from '@/components/AddressList' +import Popup from '@/components/popup' +import SelectAddress from '@/components/selectAddress' + +interface Param { + defaultValue: { + address_title: string + address_name: string + address_phone: string + } + +} +export default (props: Param) => { + const [data, setData] = useState({ + address_title: '', + address_name: '', + address_phone: '', + address_mode: '物流', + }) + useEffect(() => { + if (props.defaultValue) { + setData(e => ({ + ...e, + address_title: props.defaultValue.address_title, + address_name: props.defaultValue.address_name, + address_phone: props.defaultValue.address_phone, + })) + } + }, [props.defaultValue]) + return <> + + + + + {data.address_title || '请选择收货地址'} + + + {`${data.address_name} ${data.address_phone}`} + {data.address_mode} + + + + +} diff --git a/src/pages/colorCardOrderDetail/components/orderInfo/index.module.scss b/src/pages/colorCardOrderDetail/components/orderInfo/index.module.scss new file mode 100644 index 0000000..b59d3b9 --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/orderInfo/index.module.scss @@ -0,0 +1,38 @@ +.order_info { + height: 227px; + background: #ffffff; + border-radius: 16px; + padding: 0 32px; + margin-top: 24px; + .order_info_title { + height: 82px; + line-height: 82px; + font-size: 28px; + color: rgba(0, 0, 0, 0.8); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + .order_info_list { + font-size: 28px; + .order_info_item { + display: flex; + justify-content: space-between; + margin-top: 24px; + .left { + color: rgba(0, 0, 0, 0.4); + } + .right { + display: flex; + .copy_btn { + width: 65px; + height: 32px; + border-radius: 8px; + border: 1px solid #337fff; + text-align: center; + line-height: 32px; + color: #337fffff; + margin-left: 10px; + } + } + } + } +} diff --git a/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx b/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx new file mode 100644 index 0000000..6431354 --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx @@ -0,0 +1,21 @@ +import { Text, View } from '@tarojs/components' +import styles from './index.module.scss' + +export default () => { + return + 订单信息 + + + 订单编号： + + XS-LY-2208240001 + 复制 + + + + 创建时间： + 2022-08-24 14:54:21 + + + +} diff --git a/src/pages/colorCardOrderDetail/components/productCard/index.module.scss b/src/pages/colorCardOrderDetail/components/productCard/index.module.scss new file mode 100644 index 0000000..cd603cf --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/productCard/index.module.scss @@ -0,0 +1,51 @@ +.card_con { + background-color: #ffffff; + padding: 0 24px; + margin-top: 24px; + box-sizing: border-box; + border-radius: 16px; + .card_header { + height: 82px; + font-size: 28px; + color: rgba(0, 0, 0, 0.8); + font-weight: 500; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + line-height: 82px; + } + .card_list { + .card_item { + height: 140px; + display: flex; + padding-top: 24px; + color: rgba(0, 0, 0, 0.8); + + .img { + width: 108px; + height: 108px; + } + .name_count { + width: 100%; + margin-left: 42px; + flex: 1; + font-size: 28px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + .btns { + width: 100%; + display: flex; + justify-content: flex-end; + } + .count_btn { + margin-top: 27px; + width: 170px; + } + } + } + .express_btn { + font-size: 28px; + color: #f64861; + width: 100%; + text-align: right; + padding: 32px 0 24px 0; + } + } +} diff --git a/src/pages/colorCardOrderDetail/components/productCard/index.tsx b/src/pages/colorCardOrderDetail/components/productCard/index.tsx new file mode 100644 index 0000000..68a6b4f --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/productCard/index.tsx @@ -0,0 +1,49 @@ +import { Text, View } from '@tarojs/components' +import styles from './index.module.scss' +import Counter from '@/components/counter' +import LabAndImg from '@/components/LabAndImg' + +export default () => { + return + 色卡信息 + + + + + 秋季平纹卫衣(食毛)系列 + + + + + + + + + + + + 秋季平纹卫衣(食毛)系列 + + + + + + + + + 快递到付 + + +} diff --git a/src/pages/colorCardOrderDetail/components/remark/index.module.scss b/src/pages/colorCardOrderDetail/components/remark/index.module.scss new file mode 100644 index 0000000..2d34c54 --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/remark/index.module.scss @@ -0,0 +1,25 @@ +.remarks { + height: 165px; + background: #ffffff; + border-radius: 16px; + margin-top: 24px; + padding: 0 32px; + font-size: 28px; + .remarks_header { + display: flex; + height: 80px; + line-height: 80px; + justify-content: space-between; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + text { + &:nth-child(2) { + color: rgba(0, 0, 0, 0.8); + } + } + } + .remarks_message { + height: 82px; + line-height: 82px; + color: rgba(0, 0, 0, 0.4); + } +} diff --git a/src/pages/colorCardOrderDetail/components/remark/index.tsx b/src/pages/colorCardOrderDetail/components/remark/index.tsx new file mode 100644 index 0000000..9ea9a64 --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/remark/index.tsx @@ -0,0 +1,21 @@ +import { Text, View } from '@tarojs/components' +import { useState } from 'react' +import styles from './index.module.scss' +import Remark from '@/components/remark' + +interface Param { + value: string +} +export default (props: Param) => { + return <> + + + 备注信息 + + + + {props.value || '尚未备注信息'} + + + +} diff --git a/src/pages/colorCardOrderDetail/index.config.ts b/src/pages/colorCardOrderDetail/index.config.ts new file mode 100644 index 0000000..3447f0a --- /dev/null +++ b/src/pages/colorCardOrderDetail/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '色卡订单详情', + enableShareAppMessage: true, +} diff --git a/src/pages/colorCardOrderDetail/index.module.scss b/src/pages/colorCardOrderDetail/index.module.scss new file mode 100644 index 0000000..e00fee9 --- /dev/null +++ b/src/pages/colorCardOrderDetail/index.module.scss @@ -0,0 +1,45 @@ +.main { + min-height: 100vh; + background-color: #f7f7f7ff; + padding: 24px; + .add_card_btn { + height: 82px; + background: #ffffff; + border-radius: 16px; + border: 1px solid #337fff; + text-align: center; + line-height: 82px; + color: #337fff; + margin-top: 24px; + } + + .order_btn { + position: fixed; + height: 162px; + background: #ffffff; + box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06); + width: 100%; + bottom: 0; + left: 0; + padding: 0 24px; + display: flex; + justify-content: space-between; + box-sizing: border-box; + .btn_con { + display: flex; + align-items: center; + justify-content: flex-end; + width: 100%; + height: 100px; + } + .btn { + width: 195px; + height: 72px; + border: 1px solid rgba(0, 0, 0, 0.6); + border-radius: 40px; + text-align: center; + line-height: 72px; + color: #000000; + } + } +} diff --git a/src/pages/colorCardOrderDetail/index.tsx b/src/pages/colorCardOrderDetail/index.tsx new file mode 100644 index 0000000..4ee11b4 --- /dev/null +++ b/src/pages/colorCardOrderDetail/index.tsx @@ -0,0 +1,29 @@ +import { Text, View } from '@tarojs/components' +import { useState } from 'react' +import styles from './index.module.scss' +import Address from './components/address' +import ProductCard from './components/productCard' +import Remark from './components/remark' +import OrderInfo from './components/orderInfo' +import { goLink } from '@/common/common' +import SearchInput from '@/components/searchInput' + +export default () => { + const [data, setData] = useState({ + address_title: '广东省佛山市禅城区南庄镇吉利大道872巷备份', + address_name: '谭先生', + address_phone: '13334726540', + address_mode: '物流', + }) + return +
+ + + + + + 取消订单 + + + +} diff --git a/src/pages/getColorCard/components/productItem/index.module.scss b/src/pages/getColorCard/components/productItem/index.module.scss index 6dc5f36..7b54df1 100644 --- a/src/pages/getColorCard/components/productItem/index.module.scss +++ b/src/pages/getColorCard/components/productItem/index.module.scss @@ -15,13 +15,12 @@ } .card_info_label { display: grid; - grid-template-columns: repeat(3, 85px); + grid-template-columns: repeat(3, 100px); grid-gap: 10px 10px; margin-top: 10px; text { font-size: 24px; color: #4581ff; - width: 85px; height: 34px; text-align: center; line-height: 34px; diff --git a/src/pages/getColorCard/components/productItem/index.tsx b/src/pages/getColorCard/components/productItem/index.tsx index e16ac62..8e31233 100644 --- a/src/pages/getColorCard/components/productItem/index.tsx +++ b/src/pages/getColorCard/components/productItem/index.tsx @@ -1,29 +1,53 @@ import { Text, View } from '@tarojs/components' -import { useState } from 'react' +import { memo, useState } from 'react' import styles from './index.module.scss' import LabAndImg from '@/components/LabAndImg' import Checkbox from '@/components/checkbox' -export default () => { +interface ProductItemParamType { + code: string + id: number + name: string +} +export interface ParamType { + id: number + affiliation_product: ProductItemParamType[] + color_card_name: string + texture_url: string + lab: { l: number; a: number; b: number } + rgb: { r: number; g: number; b: number } + is_add: boolean + onSelect?: (val: ParamType, status: boolean) => void + count?: number +} + +export default memo((props: ParamType) => { + const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props const [checkStatus, setCheckStatus] = useState(false) const changeSelect = () => { setCheckStatus(!checkStatus) + props.onSelect?.(props, !checkStatus) + } + const onSelect = () => { + props.onSelect?.(props, true) + setCheckStatus(true) + } + const onClose = () => { + props.onSelect?.(props, false) + setCheckStatus(false) } return - 冬季平纹卫衣(食毛)系列 + {color_card_name} - 0042 - 0042 - 0042 - 0042 + {affiliation_product?.map(item => {item.code})} - - setCheckStatus(true)} onClose={() => setCheckStatus(false)} /> + e.stopPropagation()}> + -} +}) diff --git a/src/pages/getColorCard/index.tsx b/src/pages/getColorCard/index.tsx index 45c2059..bb333de 100644 --- a/src/pages/getColorCard/index.tsx +++ b/src/pages/getColorCard/index.tsx @@ -1,39 +1,130 @@ import { Image, Text, View } from '@tarojs/components' -import { useRef, useState } from 'react' +import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import classNames from 'classnames' import styles from './index.module.scss' +import type { ParamType } from './components/productItem' import ProductItem from './components/productItem' import InfiniteScroll from '@/components/infiniteScroll' import Search from '@/components/search' +import { GetColorCardApi } from '@/api/colorCard' +import { dataLoadingStatus, getFilterData } from '@/common/util' export default () => { - const [search, setSearch] = useState() + const { fetchData, state: cardState } = GetColorCardApi() + const [colorCardData, setColorCardData] = useState<{ list: ParamType[]; total: number }>({ + list: [], + total: 0, + }) + const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({ + page: 1, + size: 10, + }) + + const shopColorCardData = useRef([]) + + // 获取已加入购物车的数据id + const getShopId = () => { + if (shopColorCardData.current.length <= 0) { return null } + return shopColorCardData.current?.map((item) => { + return item.id + }) + } + + // 获取数据 + const getGetColorCard = async() => { + console.log('getShopId():::', getShopId()) + const { data } = await fetchData(getFilterData({ ...searchData, color_card_ids: getShopId() })) + setColorCardData(() => ({ list: data.list, total: data.total })) + setRefresherTriggeredStatus(() => false) + } + + useEffect(() => { + if (Taro.getStorageSync('colorCard') && shopColorCardData.current.length <= 0) { + shopColorCardData.current = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : [] + // Taro.removeStorageSync('colorCard') + } + getGetColorCard() + }, [searchData]) + const getSearch = (con) => { - setSearch(con) + setSearchData(e => ({ ...e, name: con })) } const onReset = () => { - setSearch('') + setSearchData(e => ({ ...e, name: '' })) } + + // 选择的数据 + const [selectList, setSelectList] = useState([]) + + // 数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({ list: colorCardData.list, total: cardState.total, status: cardState.loading }) + }, [colorCardData, cardState]) + + // 上拉加载数据 + const pageNum = useRef({ size: searchData.size, page: searchData.page }) + const getScrolltolower = useCallback(() => { + if (colorCardData.list.length < colorCardData.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchData(e => ({ ...e, size })) + } + }, [colorCardData]) + + // 列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async() => { + pageNum.current.size = 1 + setRefresherTriggeredStatus(true) + setSearchData(val => ({ ...val, size: 10 })) + } + + const onSubmit = () => { + selectList?.map((item) => { + item.count = 1 + }) + Taro.setStorageSync('colorCard', JSON.stringify([...selectList, ...shopColorCardData.current])) + Taro.redirectTo({ + url: '/pages/colorCardOrder/index', + }) + } + + const onSelectData = (val, status) => { + if (status) { + setSelectList(e => [...e, val]) + } + else { + const res = selectList?.filter((item) => { + return val.id != item.id + }) + setSelectList(e => res) + } + } + return - + 取消 - {new Array(10).fill('').map((item) => { + {colorCardData.list?.map((item) => { return ( - + ) })} - + 确认