diff --git a/iconfont.json b/iconfont.json index 180f0e0..c8c7f71 100644 --- a/iconfont.json +++ b/iconfont.json @@ -1,5 +1,5 @@ { - "symbol_url": "//at.alicdn.com/t/c/font_3786318_dbfm4mvm98c.js", + "symbol_url": "//at.alicdn.com/t/c/font_3786318_gquep5m0ohd.js", "save_dir": "./src/components/iconfont", "use_typescript": false, "use_rpx": true, diff --git a/src/api/colorCard.ts b/src/api/colorCard.ts index c8e0e6f..ce41af8 100644 --- a/src/api/colorCard.ts +++ b/src/api/colorCard.ts @@ -32,3 +32,36 @@ export const GetColorCardOrderApi = () => { method: 'get', }) } + +/** + * 获取色卡订单状态列表 + * @returns + */ +export const GetColorCardOrderStatusApi = () => { + return request({ + url: '/v1/mall/colorCardOrder/enum/auditStatus', + method: 'get', + }) +} + +/** + * 取消订单 + * @returns + */ +export const ColorCardOrderCancelApi = () => { + return request({ + url: '/v1/mall/colorCardOrder/cancel', + method: 'post', + }) +} + +/** + * 获取色卡订单详情 + * @returns + */ +export const GetColorCardOrderDetailApi = () => { + return request({ + url: '/v1/mall/colorCardOrder', + method: 'get', + }) +} diff --git a/src/app.config.ts b/src/app.config.ts index 1f9cc41..a5ae792 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -207,7 +207,7 @@ export default { ], }, { - root: 'pages/colorCard', + root: 'pages/colorCardClipping', pages: [ 'index', ], diff --git a/src/common/enum.ts b/src/common/enum.ts index 00dd311..7b3c036 100644 --- a/src/common/enum.ts +++ b/src/common/enum.ts @@ -54,6 +54,7 @@ export const SUBSCRIPTION_MESSAGE_SCENE = { SubmitOrder: { value: 1, label: '确认下单' }, ToPay: { value: 2, label: '去付款' }, ApplyGoods: { value: 3, label: '申请退款' }, + ColorCard: { value: 4, label: '申请色卡' }, } // 应收单退款状态枚举 diff --git a/src/components/iconfont/iconfont.tsx b/src/components/iconfont/iconfont.tsx index 3207b8b..d622f62 100644 --- a/src/components/iconfont/iconfont.tsx +++ b/src/components/iconfont/iconfont.tsx @@ -1,90 +1,132 @@ -import React, { useState, useEffect, FC } from "react"; -import { Block, View } from "@tarojs/components"; -import "./iconfont.scss"; -import Taro from "@tarojs/taro"; -import classnames from "classnames"; +import React, { useState, useEffect, FC } from "react"; +import { Block, View } from "@tarojs/components"; +import "./iconfont.scss"; +import Taro from "@tarojs/taro"; +import classnames from "classnames"; + +const SystemWidth = Taro.getSystemInfoSync().windowWidth +const quot = '"' + +function hex2rgb(hex) { + const rgb: number[] = []; + + hex = hex.substr(1); + + if (hex.length === 3) { + hex = hex.replace(/(.)/g, "$1$1"); + } + + hex.replace(/../g, function(color: string) { + rgb.push(parseInt(color, 0x10)); + return color; + }); + + return "rgb(" + rgb.join(",") + ")"; +} + +export type IconNames = 'icon-dingwei' | 'icon-xuanzhongyanse' | 'icon-sekajianyanglingqu' | 'icon-lingseka' | 'icon-lingjianyang' | 'icon-gerenzhongxin-dianji' | 'icon-shouye-dianji' | 'icon-gouwuche-weidianji' | 'icon-gerenzhongxin-weidianji' | 'icon-gouwuche-dianji' | 'icon-shouye-weidianji' | 'icon-paixu1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2'; + +type PropsType = { + name: IconNames; + size?: number; + color?: string | string[]; + customStyle?: React.CSSProperties; + customClassName?: string; +}; + +const IconFont:FC = ({ + name, + size = 36, + color, + customStyle = {}, + customClassName = "" +}) => { + const [colors, setColors] = useState() + const [isStr, setIsStr] = useState(true) + const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth) + + useEffect(() => { + setIsStr(typeof color === 'string') + if (typeof color === 'string') { + setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color) + } else { + setColors( + color?.map(function (item) { + return item.indexOf('#') === 0 ? hex2rgb(item) : item + }) + ) + } + return () => {} + }, [color]) + + useEffect(() => { + setSvgSize((size / 750) * SystemWidth) + }, [size]) + + // 也可以使用 if (name === 'xxx') { return } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题 + return ( + + {/* icon-colorCard 本地svg */ } + {/* { name === 'icon-colorCard' && () } */} + {/* icon-alipay */} + {/* {name === "icon-alipay" && ( + + )} */} + {/* icon-dingwei */} -const SystemWidth = Taro.getSystemInfoSync().windowWidth -const quot = '"' + { name === 'icon-dingwei' && () } +{/* icon-xuanzhongyanse */} -function hex2rgb(hex) { - const rgb: number[] = []; + { name === 'icon-xuanzhongyanse' && () } +{/* icon-sekajianyanglingqu */} - hex = hex.substr(1); + { name === 'icon-sekajianyanglingqu' && () } +{/* icon-lingseka */} - if (hex.length === 3) { - hex = hex.replace(/(.)/g, "$1$1"); - } + { name === 'icon-lingseka' && () } +{/* icon-lingjianyang */} - hex.replace(/../g, function(color: string) { - rgb.push(parseInt(color, 0x10)); - return color; - }); + { name === 'icon-lingjianyang' && () } +{/* icon-gerenzhongxin-dianji */} - return "rgb(" + rgb.join(",") + ")"; -} + { name === 'icon-gerenzhongxin-dianji' && () } +{/* icon-shouye-dianji */} -export type IconNames = 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2'; + { name === 'icon-shouye-dianji' && () } +{/* icon-gouwuche-weidianji */} -type PropsType = { - name: IconNames; - size?: number; - color?: string | string[]; - customStyle?: React.CSSProperties; - customClassName?: string; -}; + { name === 'icon-gouwuche-weidianji' && () } +{/* icon-gerenzhongxin-weidianji */} -const IconFont:FC = ({ - name, - size = 36, - color, - customStyle = {}, - customClassName = "" -}) => { - const [colors, setColors] = useState() - const [isStr, setIsStr] = useState(true) - const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth) + { name === 'icon-gerenzhongxin-weidianji' && () } +{/* icon-gouwuche-dianji */} - useEffect(() => { - setIsStr(typeof color === 'string') - if (typeof color === 'string') { - setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color) - } else { - setColors( - color?.map(function (item) { - return item.indexOf('#') === 0 ? hex2rgb(item) : item - }) - ) - } - return () => {} - }, [color]) + { name === 'icon-gouwuche-dianji' && () } +{/* icon-shouye-weidianji */} - useEffect(() => { - setSvgSize((size / 750) * SystemWidth) - }, [size]) + { name === 'icon-shouye-weidianji' && () } +{/* icon-paixu1 */} - // 也可以使用 if (name === 'xxx') { return } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题 - return ( - - {/* icon-colorCard 本地svg */ } - {/* { name === 'icon-colorCard' && () } */} - {/* icon-alipay */} - {/* {name === "icon-alipay" && ( - - )} */} - {/* icon-tips */} + { name === 'icon-paixu1' && () } +{/* icon-zhankai */} + + { name === 'icon-zhankai' && () } +{/* icon-shouqi */} + + { name === 'icon-shouqi' && () } +{/* icon-tips */} { name === 'icon-tips' && () } {/* icon-dianhua */} @@ -234,9 +276,9 @@ const IconFont:FC = ({ {/* icon-daifukuan2 */} { name === 'icon-daifukuan2' && () } - - - ) -} - -export default IconFont + + + ) +} + +export default IconFont diff --git a/src/pages/colorCard/index.module.scss b/src/pages/colorCard/index.module.scss deleted file mode 100644 index 6600ab7..0000000 --- a/src/pages/colorCard/index.module.scss +++ /dev/null @@ -1,73 +0,0 @@ -.main { - min-height: 100vh; - background-color: #f7f7f7ff; - display: flex; - flex-direction: column; - .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/colorCardList/index.module.scss b/src/pages/colorCardClipping/components/colorCardList/index.module.scss new file mode 100644 index 0000000..ba7dc4d --- /dev/null +++ b/src/pages/colorCardClipping/components/colorCardList/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/colorCardList/index.tsx b/src/pages/colorCardClipping/components/colorCardList/index.tsx new file mode 100644 index 0000000..37b22c6 --- /dev/null +++ b/src/pages/colorCardClipping/components/colorCardList/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 { ColorCardOrderCancelApi, GetColorCardOrderApi, GetColorCardOrderStatusApi } from '@/api/colorCard' +import { dataLoadingStatus, getFilterData } from '@/common/util' +import kong from '@/styles/image/kong.png' + +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 } = GetColorCardOrderApi() + 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 } = GetColorCardOrderStatusApi() + 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/getColorCard/index')}> + 领取色卡 + + +} diff --git a/src/pages/colorCard/components/productItem/index.module.scss b/src/pages/colorCardClipping/components/productItem/index.module.scss similarity index 92% rename from src/pages/colorCard/components/productItem/index.module.scss rename to src/pages/colorCardClipping/components/productItem/index.module.scss index e5d99ee..a751877 100644 --- a/src/pages/colorCard/components/productItem/index.module.scss +++ b/src/pages/colorCardClipping/components/productItem/index.module.scss @@ -5,6 +5,7 @@ box-sizing: border-box; background-color: #fff; border-radius: 16px; + padding-bottom: 20px; .item_header { height: 82px; display: flex; @@ -62,7 +63,7 @@ margin-top: 16px; } .btns { - padding: 16px 0; + padding-top: 32px; display: flex; justify-content: flex-end; text { diff --git a/src/pages/colorCard/components/productItem/index.tsx b/src/pages/colorCardClipping/components/productItem/index.tsx similarity index 75% rename from src/pages/colorCard/components/productItem/index.tsx rename to src/pages/colorCardClipping/components/productItem/index.tsx index 217c056..d35680e 100644 --- a/src/pages/colorCard/components/productItem/index.tsx +++ b/src/pages/colorCardClipping/components/productItem/index.tsx @@ -2,6 +2,7 @@ import { Text, View } from '@tarojs/components' import { useMemo } from 'react' import styles from './index.module.scss' import LabAndImg from '@/components/LabAndImg' +import { goLink } from '@/common/common' interface color_card_info { count: number @@ -27,13 +28,18 @@ export interface ParamItem { interface Param { value: ParamItem + onCancel?: (val: number) => void } export default (props: Param) => { - const { value } = props + const { value, onCancel } = props const card_one = useMemo(() => { return value.color_card_info ? value.color_card_info[0] : null }, [value]) - return + const onCancelEven = (e, id: number) => { + e.stopPropagation() + onCancel?.(id) + } + return goLink('/pages/colorCardOrderDetail/index', { id: value.order_id })} > 单号：{value.order_no} {value.order_status_name} @@ -57,6 +63,6 @@ export default (props: Param) => { {value.color_card_count} 种色卡，共 {value.color_card_number} 本 快递到付 - 取消订单 + {value.order_status === 1 && onCancelEven?.(e, value.order_id)}>取消订单} } diff --git a/src/pages/colorCard/index.tsx b/src/pages/colorCardClipping/index copy.tsx similarity index 52% rename from src/pages/colorCard/index.tsx rename to src/pages/colorCardClipping/index copy.tsx index 39558d6..ea1ebcd 100644 --- a/src/pages/colorCard/index.tsx +++ b/src/pages/colorCardClipping/index copy.tsx @@ -1,17 +1,16 @@ import { Image, Text, View } from '@tarojs/components' -import Taro from '@tarojs/taro' -import { useEffect, useMemo, useRef, useState } from 'react' +import Taro, { useDidShow } from '@tarojs/taro' +import { useCallback, 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' +import { alert, goLink } from '@/common/common' +import { ColorCardOrderCancelApi, GetColorCardOrderApi, GetColorCardOrderStatusApi } from '@/api/colorCard' +import { dataLoadingStatus, getFilterData } from '@/common/util' export default () => { const [selectIndex, setSelectIndex] = useState(1) @@ -20,18 +19,8 @@ export default () => { { value: 2, label: '剪样记录' }, ] - const [statusIndex, setStatusIndex] = useState(1) - const selectStatus = [ - { value: 1, label: '全部记录' }, - { value: 2, label: '申请中' }, - { value: 3, label: '已完成' }, - ] - - const changeStatus = (index: number) => { - setStatusIndex(index) - } - - const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({ + const [searchData, setSearchData] = useState<{ status?: number; page: number; size: number }>({ + status: 0, page: 1, size: 10, }) @@ -40,35 +29,82 @@ export default () => { list: [], total: 0, }) + const { fetchData: fetchDataOrder, state: OrderState } = GetColorCardOrderApi() const getColorCardOrder = async() => { - const res = await fetchDataOrder() + 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 } = GetColorCardOrderStatusApi() + 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 (colorCardData.list.length < colorCardData.total) { + if (orderData.list.length < orderData.total) { pageNum.current.page++ const size = pageNum.current.size * pageNum.current.page setSearchData(e => ({ ...e, size })) } - }, [colorCardData]) + }, [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 setSelectIndex(index)} /> - {selectStatus.map(item => changeStatus(item.value)} className={classNames(styles.btn_item, statusIndex === item.value && styles.select_ed)}>{item.label})} + {statusList.map(item => changeStatus(item.id)} className={classNames(styles.btn_item, searchData.status === item.id && styles.select_ed)}>{item.name})} {false && @@ -86,7 +122,7 @@ export default () => { {orderData.list?.map((item) => { return ( - + ) })} diff --git a/src/pages/colorCard/index.config.ts b/src/pages/colorCardClipping/index.config.ts similarity index 100% rename from src/pages/colorCard/index.config.ts rename to src/pages/colorCardClipping/index.config.ts diff --git a/src/pages/colorCardClipping/index.module.scss b/src/pages/colorCardClipping/index.module.scss new file mode 100644 index 0000000..abcd6f9 --- /dev/null +++ b/src/pages/colorCardClipping/index.module.scss @@ -0,0 +1,6 @@ +.main { + min-height: 100vh; + background-color: #f7f7f7ff; + display: flex; + flex-direction: column; +} diff --git a/src/pages/colorCardClipping/index.tsx b/src/pages/colorCardClipping/index.tsx new file mode 100644 index 0000000..d3ab9ce --- /dev/null +++ b/src/pages/colorCardClipping/index.tsx @@ -0,0 +1,27 @@ +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 styles from './index.module.scss' +import type { ParamItem } from './components/productItem' +import ProductItem from './components/productItem' +import ColorCardList from './components/colorCardList' +import SelectList from '@/components/selectList' +import kong from '@/styles/image/kong.png' +import InfiniteScroll from '@/components/infiniteScroll' +import { alert, goLink } from '@/common/common' +import { ColorCardOrderCancelApi, GetColorCardOrderApi, GetColorCardOrderStatusApi } from '@/api/colorCard' +import { dataLoadingStatus, getFilterData } from '@/common/util' + +export default () => { + const [selectIndex, setSelectIndex] = useState(1) + const selectList = [ + { value: 1, label: '色卡记录' }, + { value: 2, label: '剪样记录' }, + ] + + return + setSelectIndex(index)} /> + + +} diff --git a/src/pages/colorCardOrder/components/address/index.tsx b/src/pages/colorCardOrder/components/address/index.tsx index 780ae1c..26c560e 100644 --- a/src/pages/colorCardOrder/components/address/index.tsx +++ b/src/pages/colorCardOrder/components/address/index.tsx @@ -1,25 +1,48 @@ import { Text, View } from '@tarojs/components' -import { useState } from 'react' +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 { - onSelect: (val: number) => void +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(e.id) + 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, diff --git a/src/pages/colorCardOrder/components/remark/index.tsx b/src/pages/colorCardOrder/components/remark/index.tsx index d4e52f7..9bce054 100644 --- a/src/pages/colorCardOrder/components/remark/index.tsx +++ b/src/pages/colorCardOrder/components/remark/index.tsx @@ -1,10 +1,11 @@ import { Text, View } from '@tarojs/components' -import { useState } from 'react' +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) @@ -14,6 +15,9 @@ export default (props: Param) => { props.onSave?.(e) setShowRemark(false) } + useEffect(() => { + setData(props.defaultValue) + }, [props.defaultValue]) return <> setShowRemark(true)}> diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx index 5a80d0c..e1e8915 100644 --- a/src/pages/colorCardOrder/index.tsx +++ b/src/pages/colorCardOrder/index.tsx @@ -2,6 +2,7 @@ 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' @@ -21,19 +22,28 @@ export default () => { color_card_infos: [], remark: '', }) - const getAddress = (id: number) => { - submitData.current.address_id = id + + const [addressInfo, setAddressInfo] = useState() + const getAddress = (e) => { + submitData.current.address_id = e.id + setAddressInfo(() => e) } const [list, setList] = useState([]) useDidShow(() => { - const res = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : [] - setList(() => res) - computeCount(res) + const list = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : [] + 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('colorCard', JSON.stringify(list)) + Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark })) Taro.navigateTo({ url: '/pages/getColorCard/index', }) @@ -79,15 +89,18 @@ export default () => { 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 -
+
添加色卡 色卡信息 @@ -96,7 +109,7 @@ export default () => { 快递到付 - + {numText} diff --git a/src/pages/colorCardOrderDetail/components/address/index.module.scss b/src/pages/colorCardOrderDetail/components/address/index.module.scss index ed1e78e..97c83af 100644 --- a/src/pages/colorCardOrderDetail/components/address/index.module.scss +++ b/src/pages/colorCardOrderDetail/components/address/index.module.scss @@ -6,7 +6,7 @@ .message { display: flex; flex-direction: column; - width: 100%; + flex: 1; margin-left: 24px; .info_address { font-size: 28px; diff --git a/src/pages/colorCardOrderDetail/components/address/index.tsx b/src/pages/colorCardOrderDetail/components/address/index.tsx index da1272f..b0b8aba 100644 --- a/src/pages/colorCardOrderDetail/components/address/index.tsx +++ b/src/pages/colorCardOrderDetail/components/address/index.tsx @@ -33,7 +33,7 @@ export default (props: Param) => { }, [props.defaultValue]) return <> - + {data.address_title || '请选择收货地址'} diff --git a/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx b/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx index 6431354..cd4d018 100644 --- a/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx +++ b/src/pages/colorCardOrderDetail/components/orderInfo/index.tsx @@ -1,21 +1,32 @@ import { Text, View } from '@tarojs/components' +import Taro, { setClipboardData } from '@tarojs/taro' +import { memo } from 'react' import styles from './index.module.scss' +import { formatDateTime } from '@/common/fotmat' -export default () => { +export interface OrderInfoParam { + order_no?: string + create_time?: string +} + +export default memo((props: OrderInfoParam) => { + const handleCopy = () => { + setClipboardData({ data: props.order_no || '' }) + } return 订单信息 订单编号： - XS-LY-2208240001 - 复制 + {props.order_no} + 复制 创建时间： - 2022-08-24 14:54:21 + {formatDateTime(props.create_time)} -} +}) diff --git a/src/pages/colorCardOrderDetail/components/orderState/index.module.scss b/src/pages/colorCardOrderDetail/components/orderState/index.module.scss new file mode 100644 index 0000000..41bc389 --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/orderState/index.module.scss @@ -0,0 +1,166 @@ +.order_flow_state { + background-color: #fff; + border-radius: 20px; + padding: 20px; + box-sizing: border-box; + position: relative; + overflow: hidden; + margin-bottom: 20rpx; + .order_status_list { + overflow: hidden; + transition: all 0.3s ease-in-out; + .images { + display: flex; + padding: 10px 0 0 20px; + image { + width: 128px; + height: 128px; + margin-right: 10px; + } + } + } + .order_status_list_show { + max-height: 1000px !important; + } + .order_status_item { + position: relative; + &:nth-last-child(n + 2) { + padding-bottom: 30px; + } + .order_status_tail_end, + .order_status_tail { + width: 15px; + height: 15px; + border: 2px solid $color_main; + background-color: #fff; + border-radius: 50%; + position: absolute; + left: 0; + top: 10px; + z-index: 10; + } + .order_status_tail_end { + background-color: $color_main; + } + .order_status_line { + border-left: 2px solid $color_main; + height: 100%; + top: 10px; + left: 9px; + position: absolute; + z-index: 1; + } + .order_status_content { + display: flex; + align-items: center; + padding: 0 30px; + .order_status_title { + color: $color_font_two; + font-size: $font_size; + font-weight: 700; + } + .order_status_time { + color: $color_font_two; + font-size: $font_size_medium; + padding-left: 50px; + } + .order_status_tag { + font-size: $font_size_min; + background: #f0f0f0; + border-radius: 6px; + padding: 5px 10px; + color: $color_font_two; + } + .order_status_select { + color: $color_main; + } + .order_status_tag_select { + color: $color_main; + } + } + .order_status_des { + color: $color_font_two; + font-size: $font_size_medium; + padding-left: 30px; + display: inline-block; + } + .order_status_des_select { + color: $color_font_one; + } + .pay_time { + height: 56px; + background: #f6f6f6; + border-radius: 20px; + color: #3c3c3c; + font-size: 24px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin-top: 20px; + text { + font-size: 28px; + color: $color_main; + padding: 0 10px; + } + } + } + .more { + width: 100%; + text-align: center; + font-size: $font_size_min; + color: $color_font_one; + padding-top: 20px; + .miconfonts { + display: inline-block; + font-size: 25px; + transform: rotate(90deg); + } + .open_miconfonts { + transform: rotate(-90deg); + } + } + .image_tag { + width: 140px; + height: 144px; + .image { + width: 140px; + height: 144px; + } + position: absolute; + top: -10px; + right: -10px; + } + .refresh { + position: absolute; + top: 23px; + right: 20px; + display: flex; + color: #707070; + display: flex; + align-items: center; + + .mconfont { + font-size: 30px; + } + .refresh_text { + font-size: 23px; + } + } +} +.pay_title_tag { + margin-top: 10px; + font-size: 24px; + color: #ee7500; + background: rgba(255, 230, 206, 0.36); + border-radius: 10px; + height: 56px; + display: flex; + align-items: center; + position: relative; + z-index: 999; + .miconfont { + font-size: 30px; + padding: 0 20px; + } +} diff --git a/src/pages/colorCardOrderDetail/components/orderState/index.tsx b/src/pages/colorCardOrderDetail/components/orderState/index.tsx new file mode 100644 index 0000000..6f13a28 --- /dev/null +++ b/src/pages/colorCardOrderDetail/components/orderState/index.tsx @@ -0,0 +1,55 @@ +import { Image, Text, View } from '@tarojs/components' +import Taro from '@tarojs/taro' +import { memo } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import { formatDateTime, formatImgUrl } from '@/common/fotmat' + +export interface orderStateItem { + audit_remark: string + audit_time: string + delivery_appendix_url: string[] + order_status: number + order_status_name: string +} + +export interface orderStateParam { + onRefresh?: () => void + list?: orderStateItem[] +} +const OrderState = (props: orderStateParam) => { + const { list = [] } = props + + const onShowImage = (url: string, list: string[]) => { + Taro.previewImage({ + current: formatImgUrl(url, '!w800'), + urls: formatImages(list), + }) + } + const formatImages = (list: string[]) => { + return list?.map(item => formatImgUrl(item, '!w800')) + } + return ( + <> + + + {list?.map((item, index) => + {(list?.length > 1) && } + {(list?.length != (index + 1)) && } + + {item.order_status_name} + {formatDateTime(item.audit_time)} + + {item.audit_remark} + {item.delivery_appendix_url?.length > 0 && + {item.delivery_appendix_url?.map((citem, index) => { + return onShowImage(citem, item.delivery_appendix_url)}> + })} + } + )} + + + + ) +} +export default memo(OrderState) diff --git a/src/pages/colorCardOrderDetail/components/productCard/index.module.scss b/src/pages/colorCardOrderDetail/components/productCard/index.module.scss index cd603cf..eb4fa32 100644 --- a/src/pages/colorCardOrderDetail/components/productCard/index.module.scss +++ b/src/pages/colorCardOrderDetail/components/productCard/index.module.scss @@ -29,6 +29,15 @@ flex: 1; font-size: 28px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + width: 100%; + text { + &:nth-child(1) { + flex: 1; + @include common_ellipsis(); + } + } .btns { width: 100%; display: flex; diff --git a/src/pages/colorCardOrderDetail/components/productCard/index.tsx b/src/pages/colorCardOrderDetail/components/productCard/index.tsx index 68a6b4f..862e8d5 100644 --- a/src/pages/colorCardOrderDetail/components/productCard/index.tsx +++ b/src/pages/colorCardOrderDetail/components/productCard/index.tsx @@ -1,49 +1,45 @@ import { Text, View } from '@tarojs/components' +import { useCallback } from 'react' import styles from './index.module.scss' import Counter from '@/components/counter' import LabAndImg from '@/components/LabAndImg' -export default () => { +export interface orderParam { + affiliation_product: any + count: number + lab: { l: number; a: number; b: number } + name: string + rgb: { r: number; g: number; b: number } + texture_url: string +} + +interface Param { + value: orderParam[] +} + +export default (props: Param) => { + const { value } = props + const labAndImgObj = useCallback( + (item) => { + return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url } + }, + [value], + ) return 色卡信息 - - - - 秋季平纹卫衣(食毛)系列 - - - + <> + {value?.map((item, index) => { + return + + + {item.name} + x{item.count}本 - - - - - - - 秋季平纹卫衣(食毛)系列 - - - - - - - - - 快递到付 + })} + 快递到付 + } diff --git a/src/pages/colorCardOrderDetail/components/remark/index.module.scss b/src/pages/colorCardOrderDetail/components/remark/index.module.scss index 2d34c54..8ec7f59 100644 --- a/src/pages/colorCardOrderDetail/components/remark/index.module.scss +++ b/src/pages/colorCardOrderDetail/components/remark/index.module.scss @@ -1,5 +1,4 @@ .remarks { - height: 165px; background: #ffffff; border-radius: 16px; margin-top: 24px; @@ -18,8 +17,10 @@ } } .remarks_message { - height: 82px; - line-height: 82px; + padding: 20px 0; color: rgba(0, 0, 0, 0.4); } + .valuable { + color: rgba(0, 0, 0, 0.8); + } } diff --git a/src/pages/colorCardOrderDetail/components/remark/index.tsx b/src/pages/colorCardOrderDetail/components/remark/index.tsx index 9ea9a64..44638d4 100644 --- a/src/pages/colorCardOrderDetail/components/remark/index.tsx +++ b/src/pages/colorCardOrderDetail/components/remark/index.tsx @@ -1,10 +1,12 @@ -import { Text, View } from '@tarojs/components' +import { Input, Text, View } from '@tarojs/components' import { useState } from 'react' +import classNames from 'classnames' import styles from './index.module.scss' import Remark from '@/components/remark' interface Param { value: string + placeholder: string } export default (props: Param) => { return <> @@ -14,7 +16,7 @@ export default (props: Param) => { - {props.value || '尚未备注信息'} + {props.value || props.placeholder} diff --git a/src/pages/colorCardOrderDetail/index.module.scss b/src/pages/colorCardOrderDetail/index.module.scss index e00fee9..ee6524a 100644 --- a/src/pages/colorCardOrderDetail/index.module.scss +++ b/src/pages/colorCardOrderDetail/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; diff --git a/src/pages/colorCardOrderDetail/index.tsx b/src/pages/colorCardOrderDetail/index.tsx index 4ee11b4..8a150ff 100644 --- a/src/pages/colorCardOrderDetail/index.tsx +++ b/src/pages/colorCardOrderDetail/index.tsx @@ -1,29 +1,96 @@ import { Text, View } from '@tarojs/components' -import { useState } from 'react' +import Taro, { useDidShow, useRouter } from '@tarojs/taro' +import { useMemo, useState } from 'react' import styles from './index.module.scss' import Address from './components/address' +import type { orderParam } from './components/productCard' import ProductCard from './components/productCard' import Remark from './components/remark' import OrderInfo from './components/orderInfo' -import { goLink } from '@/common/common' +import type { orderStateItem } from './components/orderState' +import OrderState from './components/orderState' +import { alert, goLink } from '@/common/common' import SearchInput from '@/components/searchInput' +import { ColorCardOrderCancelApi, GetColorCardOrderDetailApi } from '@/api/colorCard' + +interface Param { + address: string + color_card_info: orderParam[] + create_time: string + create_user_name: string + creator_id: number + id: number + order_no: string + order_progress: orderStateItem[] + order_status: number + order_status_name: string + purchaser_id: number + purchaser_name: string + purchaser_phone: string + remark: string + sale_user_id: number + sale_user_name: string + shipment_mode: number + shipment_mode_name: string + target_user_name: string + target_user_phone: string + update_time: string + update_user_name: string + updater_id: number +} export default () => { - const [data, setData] = useState({ - address_title: '广东省佛山市禅城区南庄镇吉利大道872巷备份', - address_name: '谭先生', - address_phone: '13334726540', - address_mode: '物流', + const router = useRouter() + + const [orderData, setOrderData] = useState() + const { fetchData: fetchDataDtail } = GetColorCardOrderDetailApi() + const getColorCardOrderDetail = async() => { + const res = await fetchDataDtail({ id: router.params.id }) + setOrderData(() => res.data) + } + + useDidShow(() => { + getColorCardOrderDetail() }) + + const addressData = useMemo(() => { + return { + address_title: orderData?.address || '', + address_name: orderData?.purchaser_name || '', + address_phone: orderData?.purchaser_phone || '', + address_mode: orderData?.shipment_mode_name || '', + } + }, [orderData]) + + // 取消订单 + const { fetchData: fetchDataCancel } = ColorCardOrderCancelApi() + const onCancel = async() => { + Taro.showModal({ + title: '确定取消订单？', + async success(res) { + if (res.confirm) { + const res = await fetchDataCancel({ id: orderData?.id }) + if (res.success) { + alert.success('取消成功') + getColorCardOrderDetail() + } + } + else if (res.cancel) { + console.log('用户点击取消') + } + }, + }) + } return -
- - - - + +
+ + + + {orderData?.order_status === 1 && - 取消订单 + 取消订单 - + } } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 84cee29..342699b 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -60,7 +60,7 @@ export default () => { const menuList = [ { label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') }, { label: '码单管理', icon: 'icon-mdgl', icon_status: 'local', callback: () => goLink('/pages/codeList/index') }, - { label: '色卡剪样', icon: 'icon-yanseduibi', callback: () => goLink('/pages/colorCard/index') }, + { label: '色卡剪样', icon: 'icon-yanseduibi', callback: () => goLink('/pages/colorCardClipping/index') }, { label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') }, { label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', callback: () => (set_customer_service_show(true)) }, ]