From dd69400dfa0a00b613faaf1426530523380cf093 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Mon, 20 Feb 2023 15:06:14 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(=E9=A2=86=E5=8F=96=E5=89=AA?= =?UTF-8?q?=E6=A0=B7=E5=AF=B9=E6=8E=A5):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/colorCard.ts | 11 ++ src/api/cutSample.ts | 78 +++++++++++ src/app.config.ts | 6 + src/common/constant.ts | 4 +- .../popupSelectColor/index.module.scss | 86 ++++++++++++ src/components/popupSelectColor/index.tsx | 123 +++++++++++++++++ .../components/colorCardList/index.tsx | 4 +- .../cutSampleList/index.module.scss | 67 +++++++++ .../components/cutSampleList/index.tsx | 128 ++++++++++++++++++ src/pages/colorCardClipping/index.tsx | 3 +- src/pages/colorCardOrder/index.tsx | 7 + .../components/address/index.module.scss | 39 ++++++ .../components/address/index.tsx | 69 ++++++++++ .../components/productCard/index.module.scss | 27 ++++ .../components/remark/index.module.scss | 25 ++++ .../components/remark/index.tsx | 33 +++++ src/pages/cutSampleListOrder/index.config.ts | 4 + .../cutSampleListOrder/index.module.scss | 75 ++++++++++ src/pages/cutSampleListOrder/index.tsx | 127 +++++++++++++++++ src/pages/details/index.module.scss | 26 ++-- src/pages/details/index.tsx | 35 ++++- 21 files changed, 960 insertions(+), 17 deletions(-) create mode 100644 src/api/cutSample.ts create mode 100644 src/components/popupSelectColor/index.module.scss create mode 100644 src/components/popupSelectColor/index.tsx create mode 100644 src/pages/colorCardClipping/components/cutSampleList/index.module.scss create mode 100644 src/pages/colorCardClipping/components/cutSampleList/index.tsx create mode 100644 src/pages/cutSampleListOrder/components/address/index.module.scss create mode 100644 src/pages/cutSampleListOrder/components/address/index.tsx create mode 100644 src/pages/cutSampleListOrder/components/productCard/index.module.scss create mode 100644 src/pages/cutSampleListOrder/components/remark/index.module.scss create mode 100644 src/pages/cutSampleListOrder/components/remark/index.tsx create mode 100644 src/pages/cutSampleListOrder/index.config.ts create mode 100644 src/pages/cutSampleListOrder/index.module.scss create mode 100644 src/pages/cutSampleListOrder/index.tsx diff --git a/src/api/colorCard.ts b/src/api/colorCard.ts index ce41af8..06da4c3 100644 --- a/src/api/colorCard.ts +++ b/src/api/colorCard.ts @@ -65,3 +65,14 @@ export const GetColorCardOrderDetailApi = () => { method: 'get', }) } + +/** + * 获取该面料是否绑定色卡 + * @returns + */ +export const GetColorCardOrderByProductApi = () => { + return request({ + url: '/v1/mall/product/colorCard', + method: 'get', + }) +} diff --git a/src/api/cutSample.ts b/src/api/cutSample.ts new file mode 100644 index 0000000..5697cc5 --- /dev/null +++ b/src/api/cutSample.ts @@ -0,0 +1,78 @@ +import { useRequest as request } from '@/use/useHttp' + +/** + * 获取所有剪样订单列表 + * @returns + */ +export const GetCutSampleOrderListApi = () => { + return request({ + url: '/v1/mall/cutSampleOrder/list', + method: 'post', + }) +} + +/** + * 获取剪样订单状态列表 + * @returns + */ +export const GetCutSampleOrderStatusApi = () => { + return request({ + url: '/v1/mall/cutSampleOrder/status', + method: 'get', + }) +} + +/** + * 取消订单 + * @returns + */ +export const ColorCardOrderCancelApi = () => { + return request({ + url: '/v1/mall/colorCardOrder/cancel', + 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', + }) +} + +/** + * 获取色卡订单详情 + * @returns + */ +export const GetColorCardOrderDetailApi = () => { + return request({ + url: '/v1/mall/colorCardOrder', + method: 'get', + }) +} + +/** + * 获取该面料是否绑定色卡 + * @returns + */ +export const GetColorCardOrderByProductApi = () => { + return request({ + url: '/v1/mall/product/colorCard', + method: 'get', + }) +} diff --git a/src/app.config.ts b/src/app.config.ts index 32bfcf1..9ef4a37 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -236,5 +236,11 @@ export default { 'index', ], }, + { + root: 'pages/cutSampleListOrder', + pages: [ + 'index', + ], + }, ], } diff --git a/src/common/constant.ts b/src/common/constant.ts index 19f8db6..a7f3967 100644 --- a/src/common/constant.ts +++ b/src/common/constant.ts @@ -1,4 +1,4 @@ -export const BASE_URL = CURRENT_BASE_URL +// export const BASE_URL = CURRENT_BASE_URL // export const BASE_URL = `http://192.168.0.75:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:50001/lymarket` // export const BASE_URL = `http://10.0.0.5:50001/lymarket` @@ -14,7 +14,7 @@ export const BASE_URL = CURRENT_BASE_URL // 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/popupSelectColor/index.module.scss b/src/components/popupSelectColor/index.module.scss new file mode 100644 index 0000000..eb56c0f --- /dev/null +++ b/src/components/popupSelectColor/index.module.scss @@ -0,0 +1,86 @@ +.main { + .header { + display: flex; + flex-direction: column; + padding: 32px 40px; + box-sizing: border-box; + text { + &:nth-child(1) { + font-size: 32px; + } + &:nth-child(2) { + font-size: 28px; + color: rgba(0, 0, 0, 0.4); + } + } + } + .color_list { + padding: 0 40px; + .scroll_view { + height: 70vh; + } + .color_list_con { + display: grid; + grid-template-columns: repeat(4, auto); + grid-gap: 37px 40px; + padding-bottom: 170px; + justify-content: flex-start; + } + .item { + width: 136px; + .item_color { + width: 136px; + height: 136px; + // border: 4px solid #4581ff; + box-sizing: border-box; + border-radius: 50%; + position: relative; + .icon { + position: absolute; + top: 0; + right: 0; + } + } + .select_color { + border: 4px solid #4581ff; + } + .item_name { + font-size: 24px; + color: #666666; + text-align: center; + margin-top: 10px; + } + } + } + .btns { + height: 162px; + background: #ffffff; + box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06); + display: flex; + padding: 16px 24px 0 24px; + justify-content: space-between; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + box-sizing: border-box; + .cancel, + .submit { + width: 335px; + height: 80px; + border-radius: 40px; + border: 1px solid #087eff; + text-align: center; + line-height: 80px; + } + .cancel { + font-size: 28px; + color: #4581ff; + } + .submit { + font-size: 28px; + color: #fff; + background: #4581ff; + } + } +} diff --git a/src/components/popupSelectColor/index.tsx b/src/components/popupSelectColor/index.tsx new file mode 100644 index 0000000..66aa29a --- /dev/null +++ b/src/components/popupSelectColor/index.tsx @@ -0,0 +1,123 @@ +import { ScrollView, Text, View } from '@tarojs/components' +import Taro from '@tarojs/taro' +import classNames from 'classnames' +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import Popup from '@/components/popup' +import LabAndImg from '@/components/LabAndImg' +import IconFont from '@/components/iconfont/iconfont' +import { GetProductDetailApi } from '@/api/material' +import { formatHashTag } from '@/common/fotmat' +import colorItem from '@/pages/codeList/components/colorItem' +import { goLink } from '@/common/common' + +export interface Param { + show: boolean + product_id: number + onClose?: () => void +} +export interface ColorItem { + bulk_price: number + code: string + id: number + kind_code: string + kind_id: number + kind_name: string + lab: { l: number; a: number; b: number } + last_bulk_price: number + length_cut_price: number + name: string + rgb: { r: number; g: number; b: number } + texture_url: string + update_price_time: string + weight_cut_price: number + status: boolean + count?: number +} + +export default memo((props: Param) => { + const { show = false, onClose, product_id } = props + const [colorList, setColorList] = useState([]) + + const { fetchData: productFetchData } = GetProductDetailApi() + const getProductDetail = async() => { + const res = await productFetchData({ id: product_id }) + setColorList(res.data.product_color_list || []) + } + + useEffect(() => { + (show && product_id) && getProductDetail() + }, [show, product_id]) + + const colorListRef = useRef([]) + useEffect(() => { + colorListRef.current = colorList + }, [colorList]) + + const onSelect = useCallback((val: ColorItem) => { + colorListRef.current.map((item, index) => { + if (item.id === val.id) { + colorListRef.current[index] = { ...item, status: !item.status } + } + }) + setColorList(() => [...colorListRef.current]) + }, []) + + const selectCount = useMemo(() => { + let count = 0 + colorList.map(item => item.status && (count += 1)) + return count + }, [colorList]) + + const onSubmit = () => { + const data: ColorItem[] = [] + colorList?.map((item) => { + if (item.status) { data.push({ ...item, count: 1 }) } + }) + Taro.setStorageSync('cutSample', JSON.stringify(data)) + goLink('/pages/cutSampleListOrder/index') + } + return + + + 请选择色号剪样( {colorList.length} ) + 剪样大小为A4，大约22cm*30cm + + + + + {colorList?.map((item) => { + return + })} + + + + + 取消 + 领取剪样({selectCount}) + + + +}) + +interface ColorItemCom { + item: ColorItem + onSelect?: (val: ColorItem) => void +} +const ColorSelectItem = memo((props: ColorItemCom) => { + const { item, onSelect } = props + console.log('abcedef', item) + return onSelect?.(item)}> + + + {item.status && + + } + + {item.name} + +}) diff --git a/src/pages/colorCardClipping/components/colorCardList/index.tsx b/src/pages/colorCardClipping/components/colorCardList/index.tsx index e33c46a..bb73613 100644 --- a/src/pages/colorCardClipping/components/colorCardList/index.tsx +++ b/src/pages/colorCardClipping/components/colorCardList/index.tsx @@ -34,9 +34,9 @@ export default () => { getColorCardOrder() }, [searchData]) - useDidShow(() => { + useEffect(() => { getColorCardOrderStatus() - }) + }, []) // 获取状态列表 const [statusList, setStatusList] = useState<{ id: 0|1|2; name: string }[]>([]) diff --git a/src/pages/colorCardClipping/components/cutSampleList/index.module.scss b/src/pages/colorCardClipping/components/cutSampleList/index.module.scss new file mode 100644 index 0000000..ba7dc4d --- /dev/null +++ b/src/pages/colorCardClipping/components/cutSampleList/index.module.scss @@ -0,0 +1,67 @@ +.btn_list { + height: 116px; + background: #ffffff; + border-top: 1px solid rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 24px; + .btn_item { + width: 224px; + height: 68px; + text-align: center; + line-height: 68px; + font-size: 28px; + border-radius: 68px; + background-color: #e9e9e9ff; + color: rgba(0, 0, 0, 0.6); + box-sizing: border-box; + } + .select_ed { + background-color: #337fff1a; + border: 1px solid #337fffff; + color: #337fffff; + } +} +.con { + height: calc(100vh - 376px); + display: flex; + .kong_image { + width: 410px; + height: 268px; + text-align: center; + image { + width: 100%; + height: 100%; + margin-bottom: 37px; + } + text { + font-size: 28px; + color: rgba(0, 0, 0, 0.4); + } + } + .con_list { + width: 100%; + padding: 0 24px; + } +} +.get_card_btn { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 16px 24px 66px 24px; + box-sizing: border-box; + background-color: #fff; + box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06); + text { + display: inline-block; + width: 702px; + height: 80px; + background: #4581ff; + border-radius: 40px; + color: #fff; + text-align: center; + line-height: 80px; + } +} diff --git a/src/pages/colorCardClipping/components/cutSampleList/index.tsx b/src/pages/colorCardClipping/components/cutSampleList/index.tsx new file mode 100644 index 0000000..a8f3c25 --- /dev/null +++ b/src/pages/colorCardClipping/components/cutSampleList/index.tsx @@ -0,0 +1,128 @@ +import { Image, Text, View } from '@tarojs/components' +import Taro, { useDidShow } from '@tarojs/taro' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import classNames from 'classnames' +import type { ParamItem } from '../productItem' +import ProductItem from '../productItem' +import styles from './index.module.scss' +import InfiniteScroll from '@/components/infiniteScroll' +import { alert, goLink } from '@/common/common' +import { dataLoadingStatus, getFilterData } from '@/common/util' +import kong from '@/styles/image/kong.png' +import { GetCutSampleOrderListApi, GetCutSampleOrderStatusApi } from '@/api/cutSample' + +export default () => { + const [searchData, setSearchData] = useState<{ status?: number; page: number; size: number }>({ + status: 0, + page: 1, + size: 10, + }) + + const [orderData, setOrderData] = useState<{ list: ParamItem[]; total: number }>({ + list: [], + total: 0, + }) + + const { fetchData: fetchDataOrder, state: OrderState } = GetCutSampleOrderListApi() + const getColorCardOrder = async() => { + const res = await fetchDataOrder(getFilterData(searchData)) + setRefresherTriggeredStatus(false) + setOrderData(() => res.data) + } + + useEffect(() => { + getColorCardOrder() + }, [searchData]) + + useDidShow(() => { + getColorCardOrderStatus() + }) + + // 获取状态列表 + const [statusList, setStatusList] = useState<{ id: 0|1|2; name: string }[]>([]) + const { fetchData: fetchDataStatus } = GetCutSampleOrderStatusApi() + const getColorCardOrderStatus = async() => { + const res = await fetchDataStatus() + setStatusList([{ id: 0, name: '全部记录' }, ...res.data.list]) + } + + // 上拉加载数据 + const pageNum = useRef({ size: searchData.size, page: searchData.page }) + const getScrolltolower = useCallback(() => { + if (orderData.list.length < orderData.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchData(e => ({ ...e, size })) + } + }, [orderData]) + + // 数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({ list: orderData?.list, total: orderData?.total, status: OrderState.loading }) + }, [orderData, OrderState]) + + // 列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async() => { + pageNum.current.page = 1 + setRefresherTriggeredStatus(true) + setSearchData(val => ({ ...val, size: 10 })) + } + + const changeStatus = (index: number) => { + pageNum.current.page = 1 + setSearchData(e => ({ ...e, status: index, page: 1, size: 10 })) + } + + // 取消订单 + // const { fetchData: fetchDataCancel } = ColorCardOrderCancelApi() + // const onCancel = async(id: number) => { + // Taro.showModal({ + // title: '确定取消订单？', + // async success(res) { + // if (res.confirm) { + // const res = await fetchDataCancel({ id }) + // if (res.success) { + // alert.success('取消成功') + // getColorCardOrder() + // } + // } + // else if (res.cancel) { + // console.log('用户点击取消') + // } + // }, + // }) + // } + + return <> + + {statusList.map(item => changeStatus(item.id)} className={classNames(styles.btn_item, searchData.status === item.id && styles.select_ed)}>{item.name})} + + + {false && + + 还没有领取过色卡 + } + + + {orderData.list?.map((item) => { + return ( + + + + ) + })} + + + + goLink('/pages/cutSampleList/index')}> + 领取剪样 + + +} diff --git a/src/pages/colorCardClipping/index.tsx b/src/pages/colorCardClipping/index.tsx index d3ab9ce..c9faa61 100644 --- a/src/pages/colorCardClipping/index.tsx +++ b/src/pages/colorCardClipping/index.tsx @@ -6,6 +6,7 @@ import styles from './index.module.scss' import type { ParamItem } from './components/productItem' import ProductItem from './components/productItem' import ColorCardList from './components/colorCardList' +import CutSampleList from './components/cutSampleList' import SelectList from '@/components/selectList' import kong from '@/styles/image/kong.png' import InfiniteScroll from '@/components/infiniteScroll' @@ -22,6 +23,6 @@ export default () => { return setSelectIndex(index)} /> - + {selectIndex == 1 ? : } } diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx index a6a95a5..244cbfc 100644 --- a/src/pages/colorCardOrder/index.tsx +++ b/src/pages/colorCardOrder/index.tsx @@ -10,6 +10,8 @@ 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' export interface submitData { address_id: number @@ -76,6 +78,10 @@ export default () => { computeCount(list) }, [list]) + // 订阅消息 + const { ColorCard } = SUBSCRIPTION_MESSAGE_SCENE + const { openSubscriptionMessage } = UseSubscriptionMessage() + const { fetchData: submitFetchData } = SubmitColorCardApi() const onSubmitData = async() => { submitData.current.color_card_infos = [] @@ -86,6 +92,7 @@ export default () => { }) }) 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('提交成功') diff --git a/src/pages/cutSampleListOrder/components/address/index.module.scss b/src/pages/cutSampleListOrder/components/address/index.module.scss new file mode 100644 index 0000000..ed1e78e --- /dev/null +++ b/src/pages/cutSampleListOrder/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/cutSampleListOrder/components/address/index.tsx b/src/pages/cutSampleListOrder/components/address/index.tsx new file mode 100644 index 0000000..26c560e --- /dev/null +++ b/src/pages/cutSampleListOrder/components/address/index.tsx @@ -0,0 +1,69 @@ +import { Text, View } from '@tarojs/components' +import { useEffect, useState } from 'react' +import styles from './index.module.scss' +import IconFont from '@/components/iconfont/iconfont' +import SelectAddress from '@/components/selectAddress' + +export interface AddressItem { + id: number + address_title?: string + address_name?: string + address_phone?: string +} +interface Param { + onSelect: (val: AddressItem) => void + defaultValue?: AddressItem +} + +export default (props: Param) => { + const { defaultValue } = props + const [data, setData] = useState({ + id: 0, + address_title: '', + address_name: '', + address_phone: '', + address_mode: '物流', + }) + + useEffect(() => { + setData(e => ({ + ...e, + id: e.id, + address_title: defaultValue?.address_title || '', + address_name: defaultValue?.address_name || '', + address_phone: defaultValue?.address_phone || '', + })) + }, [defaultValue]) + + const [showList, setShowList] = useState(false) + const getAddress = (e) => { + props.onSelect({ + id: e.id, + address_title: e.province_name + e.district_name + e.city_name + e.address_detail, + address_name: e.name, + address_phone: e.phone, + }) + 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/cutSampleListOrder/components/productCard/index.module.scss b/src/pages/cutSampleListOrder/components/productCard/index.module.scss new file mode 100644 index 0000000..3d975ba --- /dev/null +++ b/src/pages/cutSampleListOrder/components/productCard/index.module.scss @@ -0,0 +1,27 @@ +.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; + } + } +} diff --git a/src/pages/cutSampleListOrder/components/remark/index.module.scss b/src/pages/cutSampleListOrder/components/remark/index.module.scss new file mode 100644 index 0000000..2d34c54 --- /dev/null +++ b/src/pages/cutSampleListOrder/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/cutSampleListOrder/components/remark/index.tsx b/src/pages/cutSampleListOrder/components/remark/index.tsx new file mode 100644 index 0000000..9bce054 --- /dev/null +++ b/src/pages/cutSampleListOrder/components/remark/index.tsx @@ -0,0 +1,33 @@ +import { Text, View } from '@tarojs/components' +import { useEffect, useState } from 'react' +import styles from './index.module.scss' +import Remark from '@/components/remark' + +interface Param { + onSave?: (val: string) => void + defaultValue: string +} +export default (props: Param) => { + const [showRemark, setShowRemark] = useState(false) + const [data, setData] = useState('') + const getOnSave = (e: string) => { + setData(e) + props.onSave?.(e) + setShowRemark(false) + } + useEffect(() => { + setData(props.defaultValue) + }, [props.defaultValue]) + return <> + setShowRemark(true)}> + + 备注信息 + 填写/修改备注 + + + {data || '尚未备注信息'} + + + setShowRemark(false)} /> + +} diff --git a/src/pages/cutSampleListOrder/index.config.ts b/src/pages/cutSampleListOrder/index.config.ts new file mode 100644 index 0000000..b6f5435 --- /dev/null +++ b/src/pages/cutSampleListOrder/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '领取色卡', + enableShareAppMessage: true, +} diff --git a/src/pages/cutSampleListOrder/index.module.scss b/src/pages/cutSampleListOrder/index.module.scss new file mode 100644 index 0000000..8df6368 --- /dev/null +++ b/src/pages/cutSampleListOrder/index.module.scss @@ -0,0 +1,75 @@ +.main { + min-height: 100vh; + background-color: #f7f7f7ff; + padding: 24px; + padding-bottom: 180px; + .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; + } + .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; + 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: space-between; + width: 100%; + height: 100px; + } + text { + font-size: 24px; + color: rgba(0, 0, 0, 0.4); + margin-left: 15px; + } + .btn { + width: 293px; + height: 80px; + background: #4581ff; + border-radius: 40px; + text-align: center; + line-height: 80px; + color: #fff; + } + } +} diff --git a/src/pages/cutSampleListOrder/index.tsx b/src/pages/cutSampleListOrder/index.tsx new file mode 100644 index 0000000..afa346f --- /dev/null +++ b/src/pages/cutSampleListOrder/index.tsx @@ -0,0 +1,127 @@ +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 type { AddressItem } from './components/address' +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' +import { UseSubscriptionMessage } from '@/use/useCommon' +import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' + +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 [addressInfo, setAddressInfo] = useState() + const getAddress = (e) => { + submitData.current.address_id = e.id + setAddressInfo(() => e) + } + const [list, setList] = useState([]) + useDidShow(() => { + const list = Taro.getStorageSync('cutSample') ? JSON.parse(Taro.getStorageSync('cutSample')) : [] + const info = Taro.getStorageSync('colorCardOther') ? JSON.parse(Taro.getStorageSync('colorCardOther')) : {} + setList(() => list) + computeCount(list) + setAddressInfo(info.address) + setRemarkData(info.remark) + submitData.current.address_id = info?.address?.id || 0 + Taro.removeStorageSync('colorCard') + Taro.removeStorageSync('colorCardOther') + }) + + const onAddCard = () => { + Taro.setStorageSync('cutSample', JSON.stringify(list)) + Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark })) + Taro.navigateTo({ + url: '/pages/colorCardList/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 { ColorCard } = SUBSCRIPTION_MESSAGE_SCENE + const { openSubscriptionMessage } = UseSubscriptionMessage() + + 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('请选择收货地址') } + await openSubscriptionMessage({ scenes: ColorCard.value }) + const res = await submitFetchData(getFilterData(submitData.current)) + if (res.success) { + alert.success('提交成功') + goLink('/pages/colorCardOrderDetail/index', { id: res.data.id }) + } + } + + const [remarkData, setRemarkData] = useState('') + const onRemark = (e) => { + submitData.current.remark = e + setRemarkData(e) + } + + return +
+ 添加色卡 + + 色卡信息 + + {list?.map(item => )} + 快递到付 + + + + + + {numText} + 提交订单 + + + +} diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss index 380c285..b41a9a1 100644 --- a/src/pages/details/index.module.scss +++ b/src/pages/details/index.module.scss @@ -169,13 +169,19 @@ padding-bottom: env(safe-area-inset-bottom); .icon_btn { display: flex; - padding: 0 20px 0 50px; + flex: 1; + justify-content: space-between; + padding-left: 24px; + padding-right: 30px; + // padding: 0 20px 0 50px; } .buy_cart { - width: 150px; color: $color_font_three; text-align: center; position: relative; + display: flex; + align-items: center; + flex-direction: column; .text { font-size: $font_size_min; color: #333333; @@ -189,14 +195,14 @@ font-size: 23px; background-color: red; color: #fff; - height: 36px; - line-height: 36px; - padding: 0 6px; + height: 30px; + line-height: 30px; + padding: 0 3px; border-radius: 72px; min-width: 25px; text-align: center; top: 0; - right: 20px; + right: 0px; } } .customer_service { @@ -214,12 +220,14 @@ display: flex; justify-content: center; align-items: center; - width: 297px; - height: 100%; - background-color: $color_main; font-size: $font_size; color: #fff; position: relative; + width: 350px; + height: 80px; + background: #4581ff; + border-radius: 40px; + margin-right: 24px; } } .wxBtn { diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index dc7ec07..07689d8 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -1,4 +1,4 @@ -import { Button, RichText, Text, View } from '@tarojs/components' +import { Button, Icon, RichText, Text, View } from '@tarojs/components' import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' import classnames from 'classnames' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -24,6 +24,8 @@ import Dialog from '@/components/Dialog' import NormalButton from '@/components/normalButton' import IconFont from '@/components/iconfont/iconfont' import LabAndImgShow from '@/components/LabAndImgShow' +import PopupSelectColor from '@/components/popupSelectColor' +import { GetColorCardOrderByProductApi } from '@/api/colorCard' interface item { title: string; img: string; url: string; id: number } @@ -233,6 +235,23 @@ const Details = (props: Params) => { setRecommendStatus(true) }, []) + const { fetchData: colorCardFetchData } = GetColorCardOrderByProductApi() + const getColorCardData = async() => { + const res = await colorCardFetchData({ product_id: productInfo.id }) + if (res.data) { + res.data.count = 1 + Taro.setStorageSync('colorCard', JSON.stringify([res.data])) + Taro.navigateTo({ + url: '/pages/colorCardOrder/index', + }) + } + } + + const [showColorSelect, setShowColorSelect] = useState(false) + const openColorSelect = () => { + setShowColorSelect(true) + } + return ( @@ -323,7 +342,7 @@ const Details = (props: Params) => { - + {/* 询货/咨询 @@ -336,12 +355,21 @@ const Details = (props: Params) => { sendMessagePath={`/pages/details/index?id=${productInfo.id}`} > - + */} goLink('/pages/shopCar/index', {}, 'switchTab')}> 购物车 {commonData.shopCount > 0 && {commonData.shopCount > 99 ? '99+' : commonData.shopCount}} + + + 领取色卡 + + + + 领取剪样 + + {(!userInfo.adminUserInfo?.is_authorize_phone && ( @@ -395,6 +423,7 @@ const Details = (props: Params) => { + setShowColorSelect(false)} />