From ab1118c5b4c253bd1398208fb7ea3559462b3181 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Fri, 13 May 2022 19:28:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E7=A1=AE=E8=AE=A4=E8=AE=A2?= =?UTF-8?q?=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 5 +- src/common/client.js | 17 - src/common/{system.js => system.ts} | 16 + src/components/shopCart/index.module.scss | 8 +- src/components/shopCart/index.tsx | 21 +- src/constants/common.ts | 2 + .../details/components/orderCount/index.tsx | 6 +- src/pages/details/components/swiper/index.tsx | 1 - src/pages/index/index.tsx | 2 - src/pages/order/comfirm.config.ts | 3 + src/pages/order/comfirm.module.scss | 122 +++ src/pages/order/comfirm.tsx | 146 +++ .../components/addressInfo/index.module.scss | 1 + .../order/components/addressInfo/index.tsx | 44 +- .../components/estimatedAmount/index.tsx | 5 +- .../components/kindList/index.module.scss | 4 + src/pages/order/components/kindList/index.tsx | 124 +-- src/pages/order/index.tsx | 68 +- src/reducers/commonData.ts | 35 + src/reducers/hooks.ts | 4 +- src/reducers/index.ts | 4 +- .../font_2987621_l1qavt5630a/demo.css | 539 +++++++++++ .../font_2987621_l1qavt5630a/demo_index.html | 901 ++++++++++++++++++ .../font_2987621_l1qavt5630a/iconfont.css} | 56 +- .../font_2987621_l1qavt5630a/iconfont.js | 1 + .../font_2987621_l1qavt5630a/iconfont.json | 226 +++++ .../font_2987621_l1qavt5630a}/iconfont.ttf | Bin 8892 -> 9496 bytes .../font_2987621_l1qavt5630a/iconfont.woff | Bin 0 -> 6176 bytes .../font_2987621_l1qavt5630a/iconfont.woff2 | Bin 0 -> 5108 bytes src/styles/iconfont.scss | 9 +- src/styles/iconfont.ttf | Bin 9236 -> 9496 bytes src/use/useCommonData.ts | 23 + 32 files changed, 2233 insertions(+), 160 deletions(-) rename src/common/{system.js => system.ts} (66%) create mode 100644 src/constants/common.ts create mode 100644 src/pages/order/comfirm.config.ts create mode 100644 src/pages/order/comfirm.module.scss create mode 100644 src/pages/order/comfirm.tsx create mode 100644 src/reducers/commonData.ts create mode 100644 src/styles/download (2)/font_2987621_l1qavt5630a/demo.css create mode 100644 src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html rename src/styles/{bak/iconfont.scss => download (2)/font_2987621_l1qavt5630a/iconfont.css} (60%) create mode 100644 src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js create mode 100644 src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json rename src/styles/{bak => download (2)/font_2987621_l1qavt5630a}/iconfont.ttf (78%) create mode 100644 src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff create mode 100644 src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff2 create mode 100644 src/use/useCommonData.ts diff --git a/src/app.config.ts b/src/app.config.ts index c9abe95..441af6a 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -45,7 +45,7 @@ export default { { root: "pages/details", pages: [ - "index" + "index", ] }, { @@ -95,7 +95,8 @@ export default { { root: "pages/order", pages: [ - "index" + "index", + "comfirm" ] } ] diff --git a/src/common/client.js b/src/common/client.js index 0aefa83..e69de29 100644 --- a/src/common/client.js +++ b/src/common/client.js @@ -1,17 +0,0 @@ -import Taro from "@tarojs/taro"; - - -/** - * 设置 客户 本地存储 - * @param {Object} clientInfo - */ -export const setClient = (clientInfo) => { - Taro.setStorageSync('client', clientInfo) -} - -/** - * 返回 客户 本地存储 - */ -export const getClient = () => { - Taro.getStorageSync('client') || null -} diff --git a/src/common/system.js b/src/common/system.ts similarity index 66% rename from src/common/system.js rename to src/common/system.ts index 12e2036..1d99ae5 100644 --- a/src/common/system.js +++ b/src/common/system.ts @@ -32,3 +32,19 @@ export const getAccountInfo = () => { const result = Taro.getStorageSync('accountInfo') return result ? JSON.parse(result) : null } + +/** + * 设置 参数本地存储 + * @param {Object} info + */ +export const setParam = (info:Object) => { + Taro.setStorageSync('params', JSON.stringify(info)) +} + +/** + * 返回 参数本地存储 + */ +export const getParam = () => { + const res = Taro.getStorageSync('params') || null + return res?JSON.parse(res):null +} diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss index 9af0c2e..633b89e 100644 --- a/src/components/shopCart/index.module.scss +++ b/src/components/shopCart/index.module.scss @@ -35,13 +35,10 @@ border: 2px solid $color_main; background-color: #ecf5ff; color: $color_main; - width: 144px; - height: 51px; } } .con{ padding:30px; - padding-bottom: 100px; box-sizing: border-box; flex:1; height: 0; @@ -49,7 +46,7 @@ height: 100%; } .product_list{ - padding-bottom: 20px; + padding-bottom: 120px; .product_item{ display: flex; justify-content: space-between; @@ -148,7 +145,7 @@ .buy_btn{ width: 100%; position: fixed; - bottom: 0; + bottom: 20px; display: flex; justify-content: center; padding-bottom: constant(safe-area-inset-bottom); @@ -163,6 +160,7 @@ align-items: center; padding: 20px 0; box-sizing: border-box; + box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.5); .icon{ width: 100px; height: 100%; diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index dc900f4..15c5d43 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -9,7 +9,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import Taro from "@tarojs/taro"; import { alert, goLink } from "@/common/common"; import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart" -import { formatHashTag, formatImgUrl, formatMillionYuan } from "@/common/fotmat"; +import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import { setParam } from "@/common/system"; type param = { show?: true|false, @@ -175,13 +176,12 @@ export default ({show = false, onClose}: param) => { //格式化金额 const formatPirce = useCallback((price) => { - const {num} = formatMillionYuan(price, 100) - return Number(num) + return Number(formatPriceDiv(price)) }, []) //格式化数量 const formatCount = useCallback((item) => { - return item.sale_mode == 0? item.roll + '件': item.length + 'm' + return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm' }, []) //预估金额 @@ -190,7 +190,7 @@ export default ({show = false, onClose}: param) => { list.map(item => { if(item.select) count += item.sale_price }) - return Number(formatMillionYuan(count, 100).num) + return Number(formatPriceDiv(count)) },[list]) //去结算 @@ -200,7 +200,8 @@ export default ({show = false, onClose}: param) => { alert.error('请选择面料') } else { let ids = selectIds.current.join('-') - goLink('/pages/order/index',{ids, sale_mode:selectIndex}) + setParam({ids, sale_mode:selectIndex}) + goLink('/pages/order/comfirm') } } @@ -212,8 +213,8 @@ export default ({show = false, onClose}: param) => { {!selectStatus?'全选':'反选'} - - 删除勾选项 + + 删除所选 @@ -223,7 +224,7 @@ export default ({show = false, onClose}: param) => { {loading&&} - {!loading&&list?.length > 0&& + {!loading&&list?.length > 0&& {list?.map((item, index) => { return @@ -239,7 +240,7 @@ export default ({show = false, onClose}: param) => { {item.sale_mode_name} - ￥{formatPirce(item.sale_price)}/kg + ￥{formatPirce(item.sale_price)}/{selectList[selectIndex].eunit} ×{formatCount(item)} diff --git a/src/constants/common.ts b/src/constants/common.ts new file mode 100644 index 0000000..65b352f --- /dev/null +++ b/src/constants/common.ts @@ -0,0 +1,2 @@ +export const SET_COMMON = 'setCommon' +export const CLEAR_COMMON = 'clearCommon' \ No newline at end of file diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index 6f5233a..f581163 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -13,7 +13,7 @@ import {GetColorList} from "@/api/materialColor" import {AddShoppingCartApi} from "@/api/shopCart" import Taro, { useRouter } from "@tarojs/taro"; import UseLogin from "@/use/useLogin" -import { formatHashTag, formatMillionYuan } from "@/common/fotmat"; +import { formatHashTag, formatPriceDiv } from "@/common/fotmat"; import { getFilterData } from "@/common/util"; @@ -114,7 +114,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) if(item.count > 0) { sumCount = Big(sumCount).add(item.count).toNumber() kindCount ++ - color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:item.count} + color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:(item.count*100)} color_list.push(color_list_info) } @@ -195,7 +195,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //格式化金额 const formatPrice = useCallback((item) => { - const price = Number(formatMillionYuan(item[selectList[selectIndex].priceField], 100).num) + const price = Number(formatPriceDiv(item[selectList[selectIndex].priceField])) return ¥{price} /{selectList[selectIndex].eunit} }, [selectIndex]) diff --git a/src/pages/details/components/swiper/index.tsx b/src/pages/details/components/swiper/index.tsx index 7fa0497..be07358 100644 --- a/src/pages/details/components/swiper/index.tsx +++ b/src/pages/details/components/swiper/index.tsx @@ -21,7 +21,6 @@ export default ({list = []}: params) => { setPageIndex(e.detail.current + 1) } - return ( swiperChange(e)}> diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 9222be9..172de29 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -86,9 +86,7 @@ export default () => { setRefresherTriggeredStatus(true) } - - //页面下拉刷新 // const res = useManualPullDownRefresh() usePullDownRefresh(() => { diff --git a/src/pages/order/comfirm.config.ts b/src/pages/order/comfirm.config.ts new file mode 100644 index 0000000..b0cb522 --- /dev/null +++ b/src/pages/order/comfirm.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '确认订单' +} diff --git a/src/pages/order/comfirm.module.scss b/src/pages/order/comfirm.module.scss new file mode 100644 index 0000000..980cde1 --- /dev/null +++ b/src/pages/order/comfirm.module.scss @@ -0,0 +1,122 @@ +.order_main{ + min-height: 100%; + background-color:$color_bg_one; + padding: 20px; + padding-bottom: 190px; + box-sizing: border-box; + + .order_title{ + display: flex; + align-items: center; + padding: 20px 30px; + box-sizing: border-box; + background-color: #fff; + height: 116px; + border-radius: 20px; + margin-top: 20px; + text{ + flex:1; + font-size: $font_size; + font-weight: 700; + } + .order_status{ + background-color: #F0F0F0; + width: 148px; + height: 55px; + color: $color_font_three; + text-align: center; + line-height: 55px; + font-size: $font_size_medium; + border-radius: 30px; + &:nth-last-child(1) { + margin-left: 20px; + } + } + .order_status_selected{ + color: $color_main; + border: 1px solid $color_main; + } + } + .order_desc{ + display: flex; + align-items: center; + background-color: #fff; + padding: 0 20px; + height: 116px; + border-radius: 20px; + margin-top: 20px; + .order_desc_con{ + flex:1; + font-size: $font_size; + font-weight: 700; + } + .order_desc_text{ + font-size: $font_size_medium; + color: $color_font_two; + margin-right: 10px; + } + .miconfont{ + font-size: 20px; + color: $color_font_two; + } + } + .submit_order{ + display: flex; + position: fixed; + bottom: 0; + left: 0; + justify-content: space-between; + width: 100%; + height: 175px; + align-items: center; + background-color: #fff; + box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); + padding: 20px 50px; + box-sizing: border-box; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + .order_btn { + width: 250px; + height: 90px; + opacity: 0.6; + background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%); + border-radius: 46px; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + } + .order_number_desc{ + font-size: $font_size_medium; + color: $color_font_two; + } + } + .order_info{ + background-color: #fff; + margin-top: 20px; + border-radius: 20px; + padding: 20px; + .order_info_title{ + font-size: $font_size; + font-weight: 700; + margin-bottom: 20px; + + } + .order_num{ + display: flex; + justify-content: space-between; + align-items: center; + .order_num_btn{ + font-size: $font_size_medium; + padding: 5px 10px; + border: 2px solid #007cf7; + border-radius: 10px; + color: $color_main; + } + } + text{ + font-size: $font_size; + } + + } +} \ No newline at end of file diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx new file mode 100644 index 0000000..2bb5bd1 --- /dev/null +++ b/src/pages/order/comfirm.tsx @@ -0,0 +1,146 @@ +import { SaleOrderPreViewApi } from "@/api/order"; +import { formatPriceDiv } from "@/common/fotmat"; +import Popup from "@/components/popup"; +import SearchInput from "@/components/searchInput"; +import { Text, Textarea, View } from "@tarojs/components" +import Taro, { useRouter } from "@tarojs/taro"; +import classnames from "classnames"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import AddressInfo from "./components/addressInfo"; +import EstimatedAmount from "./components/estimatedAmount"; +import KindList from "./components/kindList"; +import OrderState from "./components/orderState"; +import Remark from "./components/remark"; +import styles from './comfirm.module.scss' +import { getParam } from "@/common/system"; + + export default () => { + const [showDesc, setShowDesc] = useState(false) + //下单信息 + type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]} + const [submitOrder, setSubmitOrder] = useState() + + //获取购物车传过来的id + type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} + const param = getParam() + const idsAndSaleModel = useRef({shopping_cart_product_color_list:[], sale_mode:0}) + useEffect(() => { + idsAndSaleModel.current.sale_mode = Number(param?.sale_mode) + param?.ids?.split('-')?.map(item => { + return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ + shopping_cart_product_color_id: Number(item) + }) + }) + getSaleOrderPreView() + }, []) + + //获取销售预览订单 + type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string} + const [preViewOrder, setPreViewOrder] = useState() //获取到的原始数据 + const {fetchData} = SaleOrderPreViewApi() + const getSaleOrderPreView = async () => { + if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { + let res = await fetchData(idsAndSaleModel.current) + setPreViewOrder(res.data) + } + } + + //监听获取到的数据 + useEffect(() => { + if(preViewOrder) + formatData() + }, [preViewOrder]) + + //格式化数据格式 + const [formatPreViewOrder, setFormatPreViewOrder] = useState() //格式化后的数据 + const formatData = () => { + if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) { + let dataList = {} + let num_count = 0 //总数量 + let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式 + preViewOrder?.product_color_list.map(item => { + dataList[item.product_code] = dataList[item.product_code]||{} + dataList[item.product_code].product_code = item.product_code + dataList[item.product_code].product_name = item.product_name + dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name + dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[] + dataList[item.product_code].color_list.push(item) + //大货 + if (preViewOrder.sale_mode == 0) num_count += item.roll + //剪板或散件 + if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length + orderList.push({shopping_cart_product_color_id:item.id}) + }) + if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100); + setFormatPreViewOrder({ + estimate_amount: preViewOrder.estimate_amount, //预估金额 + estimate_weight: preViewOrder.estimate_weight, + sale_mode: preViewOrder.sale_mode, + sale_mode_name: preViewOrder.sale_mode_name, + colo_count: preViewOrder.product_color_list.length, //颜色数量 + num_count: num_count, //总数量 + unit: preViewOrder.sale_mode == 0?'条':'m', //单位 + list: Object.values(dataList) + }) + setSubmitOrder({...submitOrder, list: orderList}) + } + } + const formatPreViewOrderMemo = useMemo(() => { + return formatPreViewOrder + }, [formatPreViewOrder]) + + //获取地址 + const getAddress = (e) => { + console.log('address::', submitOrder) + setSubmitOrder({...submitOrder, address_id:e.id}) + } + + //收货方法 1:自提，2：物流 + const shipmentMode = useRef([ + {value:1, label:'上门自提', selected:false}, + {value:2, label:'物流', selected:false} + ]) + const selectShipmentMode = (value) => { + setSubmitOrder({...submitOrder, shipment_mode:value}) + } + + //获取备注 + const getRemark = useCallback((e) => { + setSubmitOrder({...submitOrder, remark:e}) + }, []) + + //提交按钮是否可用 + const btnStatus = useMemo(() => { + console.log('submitOrder::',submitOrder) + return submitOrder?.address_id&& submitOrder.list?.length &&submitOrder.shipment_mode + }, [submitOrder]) + + return ( + + + 收货方式 + {shipmentMode.current.map(item => { + return selectShipmentMode(item.value)}>{item.label} + })} + + getAddress(e)}/> + + setShowDesc(true)}> + 订单备注 + 点击填写 + + + + + + {`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`} + + 提交订单2{btnStatus?'true':'false'} + + setShowDesc(false)} > + getRemark(e)}/> + + + + ) + } diff --git a/src/pages/order/components/addressInfo/index.module.scss b/src/pages/order/components/addressInfo/index.module.scss index 8273d60..abdae24 100644 --- a/src/pages/order/components/addressInfo/index.module.scss +++ b/src/pages/order/components/addressInfo/index.module.scss @@ -9,6 +9,7 @@ margin-top: 20px; .order_address_icon{ font-size: 60px; + color: $color_main; } .order_address_text_con{ flex:1; diff --git a/src/pages/order/components/addressInfo/index.tsx b/src/pages/order/components/addressInfo/index.tsx index 9bcd9e0..a176a93 100644 --- a/src/pages/order/components/addressInfo/index.tsx +++ b/src/pages/order/components/addressInfo/index.tsx @@ -2,31 +2,51 @@ import AddressList from "@/components/AddressList"; import Popup from "@/components/popup"; import { Text, View } from "@tarojs/components" import classnames from "classnames"; -import { useState } from "react"; +import { memo, useCallback, useEffect, useMemo, useState } from "react"; import styles from './index.module.scss' -export default () => { + +type Param = { + onSelect?: (val:any) => void +} + +export default memo(({onSelect}: Param) => { const [showAddressList, setShowAddressList] = useState(false) + + //选择地址 + const [userInfo, setUserInfo] = useState() + const getAddress = useCallback((val) => { + setShowAddressList(false) + setUserInfo(val) + onSelect?.(val) + }, []) + + //地址格式 + const formatAddress = useMemo(() => { + if(userInfo) { + return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail + } + }, [userInfo]) return ( setShowAddressList(true)}> - - {/* 请选择收货地址及信息 */} + + {!userInfo&&请选择收货地址及信息|| - **省**市**区**街道****仓库**省**市**区**街道****仓库 + {formatAddress} - 陈先生 - 1818877790 + {userInfo?.name} + {userInfo?.phone} - - + } + setShowAddressList(false)}> - 选择收货地址 - console.log(index, item)}/> + 请选择收货地址 + getAddress(item)}/> ) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/pages/order/components/estimatedAmount/index.tsx b/src/pages/order/components/estimatedAmount/index.tsx index 7e9ae1b..70f76c6 100644 --- a/src/pages/order/components/estimatedAmount/index.tsx +++ b/src/pages/order/components/estimatedAmount/index.tsx @@ -14,14 +14,11 @@ export default ({style, number = 0}:Param) => { return ( <> ¥ - {formatPrice(int_num)} + {Number(int_num).toLocaleString()} .{decimals_num} ) }, [number]) - const formatPrice = useCallback((number: string) => { - return formatKbPrice(number) - }, []) return ( 预估金额 diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss index ad8a7b2..18da4a6 100644 --- a/src/pages/order/components/kindList/index.module.scss +++ b/src/pages/order/components/kindList/index.module.scss @@ -67,6 +67,10 @@ } } .order_list_item_count{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; .count_num{ color: $color_main; font-size: $font_size; diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index 17d026a..d7feb64 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -1,88 +1,64 @@ +import { formatHashTag, formatPriceDiv } from "@/common/fotmat" import { View } from "@tarojs/components" -import { useState } from "react" +import { memo, useCallback } from "react" import EstimatedAmount from "../estimatedAmount" import styles from './index.module.scss' -export default () => { - const [price, setPrice] = useState(123000.33) +type OrderParam = { + estimate_amount: number, + estimate_weight: number, + list: any[], + sale_mode: number, + sale_mode_name: string + unit: string +} + + +export default memo(({value}:{value:OrderParam}) => { + //对应数量 + const formatCount = useCallback((item) => { + return value.sale_mode == 0? item.roll : Number(item.length / 100) + }, [value]) + //对应单价 + const standardPrice = useCallback(item => { + return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value.sale_mode == 1?'m':'kg') + }, [value]) return ( <> - - - 大货 - 0770# 21S单面平纹(食毛) - 共3种 - - - - - - - 1# 薄荷绿 - ¥40/kg - - - ×1条 - ¥1,000.5 - + { + value?.list.map(item => { + return + + {item.sale_mode_name} + {formatHashTag(item.product_code, item.product_name)} + 共{item.color_list.length}种 + + + {item.color_list?.map(colorItem => { + return + + + + {colorItem.product_color_code + ' ' + colorItem.product_color_name} + ¥{standardPrice(colorItem)} + + + ×{formatCount(colorItem)}{value.unit} + ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} + + + + })} - - - - - 1# 薄荷绿 - ¥40/kg - - - ×1条 - ¥1,000.5 - - - - - - - - 大货 - 0770# 21S单面平纹(食毛) - 共3种 - - - - - - - 1# 薄荷绿 - ¥40/kg - - - ×1条 - ¥1,000.5 - - - - - - - - 1# 薄荷绿 - ¥40/kg - - - ×1条 - ¥1,000.5 - - - - - + }) + } - - （按照25kg/条, 预估金额） + + {/* （按照25kg/条, 预估金额） */} ) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 3a8afc9..bdb5978 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,10 +1,11 @@ import { SaleOrderPreViewApi } from "@/api/order"; +import { formatPriceDiv } from "@/common/fotmat"; import Popup from "@/components/popup"; import SearchInput from "@/components/searchInput"; import { Text, Textarea, View } from "@tarojs/components" import Taro, { useRouter } from "@tarojs/taro"; import classnames from "classnames"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import AddressInfo from "./components/addressInfo"; import EstimatedAmount from "./components/estimatedAmount"; import KindList from "./components/kindList"; @@ -13,21 +14,8 @@ import Remark from "./components/remark"; import styles from './index.module.scss' export default () => { - const [price, setPrice] = useState(123000.33) const [showDesc, setShowDesc] = useState(false) - - //复制功能 - const clipboardData = () => { - Taro.setClipboardData({ - data: '123123121321', - success: function (res) { - Taro.showToast({ - icon: 'none', - title: '复制成功' - }) - } - }) - } + //获取购物车传过来的id type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} const router = useRouter() @@ -44,7 +32,7 @@ import styles from './index.module.scss' //获取销售预览订单 type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string} - const [preViewOrder, setPreViewOrder] = useState() + const [preViewOrder, setPreViewOrder] = useState() //获取到的原始数据 const {fetchData} = SaleOrderPreViewApi() const getSaleOrderPreView = async () => { if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { @@ -53,27 +41,61 @@ import styles from './index.module.scss' } } + //监听获取到的数据 useEffect(() => { - formatData() + if(preViewOrder) + formatData() }, [preViewOrder]) //格式化数据格式 + const [formatPreViewOrder, setFormatPreViewOrder] = useState() //格式化后的数据 const formatData = () => { if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) { let dataList = {} + let num_count = 0 //总数量 preViewOrder?.product_color_list.map(item => { dataList[item.product_code] = dataList[item.product_code]||{} dataList[item.product_code].product_code = item.product_code dataList[item.product_code].product_name = item.product_name - dataList[item.product_code].sale_mode_name = item.sale_mode_name + dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[] dataList[item.product_code].color_list.push(item) + //大货 + if (preViewOrder.sale_mode == 0) num_count += item.roll + //剪板或散件 + if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length + }) + if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100); + setFormatPreViewOrder({ + estimate_amount: preViewOrder.estimate_amount, //预估金额 + estimate_weight: preViewOrder.estimate_weight, + sale_mode: preViewOrder.sale_mode, + sale_mode_name: preViewOrder.sale_mode_name, + colo_count: preViewOrder.product_color_list.length, //颜色数量 + num_count: num_count, //总数量 + unit: preViewOrder.sale_mode == 0?'条':'m', //单位 + list: Object.values(dataList) }) - console.log('dataList::',Object.values(dataList)) - return Object.values(dataList) } } + const formatPreViewOrderMemo = useMemo(() => { + return formatPreViewOrder + }, [formatPreViewOrder]) + + //复制功能 + const clipboardData = () => { + Taro.setClipboardData({ + data: '123123121321', + success: function (res) { + Taro.showToast({ + icon: 'none', + title: '复制成功' + }) + } + }) + } + return ( @@ -83,7 +105,7 @@ import styles from './index.module.scss' 上门自提 - + setShowDesc(true)}> 订单备注 点击填写 @@ -103,8 +125,8 @@ import styles from './index.module.scss' - - 2种面料，6种颜色，共6条 + + {`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`} 提交订单 diff --git a/src/reducers/commonData.ts b/src/reducers/commonData.ts new file mode 100644 index 0000000..17968fc --- /dev/null +++ b/src/reducers/commonData.ts @@ -0,0 +1,35 @@ +//公共数据,什么都可往里面传，可用于临时传参 +import Taro from '@tarojs/taro' +import { + SET_COMMON, + CLEAR_COMMON +} from '../constants/common' + +export type DataParam = { + common: any +} + +type Action = { + type?: string, + data?: DataParam +} + + + +const INIT = { + common: Taro.getStorageSync('common')?JSON.parse(Taro.getStorageSync('common')):null, +} + +export default function counter (state = INIT, action: Action) { + const {type, data} = action + switch (type) { + case SET_COMMON: + Taro.setStorageSync('common',JSON.stringify(data)) + return {...state,...data} + case CLEAR_COMMON: + Taro.removeStorageSync('common') + return {...state, common: null} + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/hooks.ts b/src/reducers/hooks.ts index b882f8f..e2f3457 100644 --- a/src/reducers/hooks.ts +++ b/src/reducers/hooks.ts @@ -2,7 +2,9 @@ //该方法纯粹只是个Ts类型定义文件 import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux'; import { DataParam } from './userInfo'; +import { DataParam as commonDataParam } from './commonData'; type Params = { - userInfo: DataParam + userInfo: DataParam, + commonData: commonDataParam } export const useSelector: TypedUseSelectorHook = useReduxSelector; \ No newline at end of file diff --git a/src/reducers/index.ts b/src/reducers/index.ts index 2af35af..1b859e6 100644 --- a/src/reducers/index.ts +++ b/src/reducers/index.ts @@ -1,6 +1,8 @@ import { combineReducers } from 'redux' import userInfo from './userInfo' +import commonData from './commonData' export default combineReducers({ - userInfo + userInfo, + commonData }) \ No newline at end of file diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/demo.css b/src/styles/download (2)/font_2987621_l1qavt5630a/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/styles/download (2)/font_2987621_l1qavt5630a/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html b/src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html new file mode 100644 index 0000000..5debfad --- /dev/null +++ b/src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html @@ -0,0 +1,901 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    导航
    +
    &#xe664;
    +
    • + +
  • + +
    删除
    +
    &#xe663;
    +
    • + +
  • + +
    已发货
    +
    &#xe65b;
    +
    • + +
  • + +
    待配布
    +
    &#xe662;
    +
    • + +
  • + +
    邀请团队
    +
    &#xe65a;
    +
    • + +
  • + +
    退款、售后
    +
    &#xe65c;
    +
    • + +
  • + +
    待付款
    +
    &#xe65d;
    +
    • + +
  • + +
    设置
    +
    &#xe65e;
    +
    • + +
  • + +
    颜色对比
    +
    &#xe65f;
    +
    • + +
  • + +
    待发货
    +
    &#xe660;
    +
    • + +
  • + +
    包裹
    +
    &#xe661;
    +
    • + +
  • + +
    tick-pressed
    +
    &#xe652;
    +
    • + +
  • + +
    我的-pressed
    +
    &#xe655;
    +
    • + +
  • + +
    分类-pressed
    +
    &#xe656;
    +
    • + +
  • + +
    搜索
    +
    &#xe647;
    +
    • + +
  • + +
    分享
    +
    &#xe648;
    +
    • + +
  • + +
    筛选
    +
    &#xe649;
    +
    • + +
  • + +
    购物车
    +
    &#xe64a;
    +
    • + +
  • + +
    清空
    +
    &#xe64c;
    +
    • + +
  • + +
    加
    +
    &#xe64d;
    +
    • + +
  • + +
    减
    +
    &#xe64e;
    +
    • + +
  • + +
    收藏-pressed
    +
    &#xe64f;
    +
    • + +
  • + +
    收藏
    +
    &#xe650;
    +
    • + +
  • + +
    phone
    +
    &#xe651;
    +
    • + +
  • + +
    tick
    +
    &#xe653;
    +
    • + +
  • + +
    more,back
    +
    &#xe654;
    +
    • + +
  • + +
    分类
    +
    &#xe657;
    +
    • + +
  • + +
    编辑
    +
    &#xe658;
    +
    • + +
  • + +
    我的
    +
    &#xe659;
    +
    • + +
  • + +
    排序,升序
    +
    &#xea4c;
    +
    • + +
  • + +
    排序,降序
    +
    &#xea4d;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1652427368246') format('woff2'),
+       url('iconfont.woff?t=1652427368246') format('woff'),
+       url('iconfont.ttf?t=1652427368246') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 导航 +
    +
    .icon-daohang +
    +
    • + +
  • + +
    + 删除 +
    +
    .icon-shanchu +
    +
    • + +
  • + +
    + 已发货 +
    +
    .icon-yifahuo +
    +
    • + +
  • + +
    + 待配布 +
    +
    .icon-daipeibu +
    +
    • + +
  • + +
    + 邀请团队 +
    +
    .icon-yaoqingtuandui +
    +
    • + +
  • + +
    + 退款、售后 +
    +
    .icon-a-tuikuanshouhou +
    +
    • + +
  • + +
    + 待付款 +
    +
    .icon-daifukuan +
    +
    • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
    • + +
  • + +
    + 颜色对比 +
    +
    .icon-yanseduibi +
    +
    • + +
  • + +
    + 待发货 +
    +
    .icon-daifahuo +
    +
    • + +
  • + +
    + 包裹 +
    +
    .icon-baoguo +
    +
    • + +
  • + +
    + tick-pressed +
    +
    .icon-tick-pressed +
    +
    • + +
  • + +
    + 我的-pressed +
    +
    .icon-wode-pressed +
    +
    • + +
  • + +
    + 分类-pressed +
    +
    .icon-fenlei-pressed +
    +
    • + +
  • + +
    + 搜索 +
    +
    .icon-sousuo +
    +
    • + +
  • + +
    + 分享 +
    +
    .icon-fenxiang +
    +
    • + +
  • + +
    + 筛选 +
    +
    .icon-shaixuan +
    +
    • + +
  • + +
    + 购物车 +
    +
    .icon-gouwuche +
    +
    • + +
  • + +
    + 清空 +
    +
    .icon-qingkong +
    +
    • + +
  • + +
    + 加 +
    +
    .icon-jia +
    +
    • + +
  • + +
    + 减 +
    +
    .icon-jian +
    +
    • + +
  • + +
    + 收藏-pressed +
    +
    .icon-shoucang-pressed +
    +
    • + +
  • + +
    + 收藏 +
    +
    .icon-shoucang +
    +
    • + +
  • + +
    + phone +
    +
    .icon-phone +
    +
    • + +
  • + +
    + tick +
    +
    .icon-tick +
    +
    • + +
  • + +
    + more,back +
    +
    .icon-a-moreback +
    +
    • + +
  • + +
    + 分类 +
    +
    .icon-fenlei +
    +
    • + +
  • + +
    + 编辑 +
    +
    .icon-bianji +
    +
    • + +
  • + +
    + 我的 +
    +
    .icon-wode +
    +
    • + +
  • + +
    + 排序,升序 +
    +
    .icon-sort-up-full +
    +
    • + +
  • + +
    + 排序,降序 +
    +
    .icon-sort-down-full +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    导航
    +
    #icon-daohang
    +
    • + +
  • + +
    删除
    +
    #icon-shanchu
    +
    • + +
  • + +
    已发货
    +
    #icon-yifahuo
    +
    • + +
  • + +
    待配布
    +
    #icon-daipeibu
    +
    • + +
  • + +
    邀请团队
    +
    #icon-yaoqingtuandui
    +
    • + +
  • + +
    退款、售后
    +
    #icon-a-tuikuanshouhou
    +
    • + +
  • + +
    待付款
    +
    #icon-daifukuan
    +
    • + +
  • + +
    设置
    +
    #icon-shezhi
    +
    • + +
  • + +
    颜色对比
    +
    #icon-yanseduibi
    +
    • + +
  • + +
    待发货
    +
    #icon-daifahuo
    +
    • + +
  • + +
    包裹
    +
    #icon-baoguo
    +
    • + +
  • + +
    tick-pressed
    +
    #icon-tick-pressed
    +
    • + +
  • + +
    我的-pressed
    +
    #icon-wode-pressed
    +
    • + +
  • + +
    分类-pressed
    +
    #icon-fenlei-pressed
    +
    • + +
  • + +
    搜索
    +
    #icon-sousuo
    +
    • + +
  • + +
    分享
    +
    #icon-fenxiang
    +
    • + +
  • + +
    筛选
    +
    #icon-shaixuan
    +
    • + +
  • + +
    购物车
    +
    #icon-gouwuche
    +
    • + +
  • + +
    清空
    +
    #icon-qingkong
    +
    • + +
  • + +
    加
    +
    #icon-jia
    +
    • + +
  • + +
    减
    +
    #icon-jian
    +
    • + +
  • + +
    收藏-pressed
    +
    #icon-shoucang-pressed
    +
    • + +
  • + +
    收藏
    +
    #icon-shoucang
    +
    • + +
  • + +
    phone
    +
    #icon-phone
    +
    • + +
  • + +
    tick
    +
    #icon-tick
    +
    • + +
  • + +
    more,back
    +
    #icon-a-moreback
    +
    • + +
  • + +
    分类
    +
    #icon-fenlei
    +
    • + +
  • + +
    编辑
    +
    #icon-bianji
    +
    • + +
  • + +
    我的
    +
    #icon-wode
    +
    • + +
  • + +
    排序,升序
    +
    #icon-sort-up-full
    +
    • + +
  • + +
    排序,降序
    +
    #icon-sort-down-full
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/styles/bak/iconfont.scss b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.css similarity index 60% rename from src/styles/bak/iconfont.scss rename to src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.css index 868bd5f..b3cfe6f 100644 --- a/src/styles/bak/iconfont.scss +++ b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.css @@ -1,7 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2987621 */ - src: - url('iconfont.ttf?t=1650013104232') format('truetype'); + src: url('iconfont.woff2?t=1652427368246') format('woff2'), + url('iconfont.woff?t=1652427368246') format('woff'), + url('iconfont.ttf?t=1652427368246') format('truetype'); } .iconfont { @@ -12,6 +13,14 @@ -moz-osx-font-smoothing: grayscale; } +.icon-daohang:before { + content: "\e664"; +} + +.icon-shanchu:before { + content: "\e663"; +} + .icon-yifahuo:before { content: "\e65b"; } @@ -86,4 +95,45 @@ .icon-jian:before { content: "\e64e"; -} \ No newline at end of file +} + +.icon-shoucang-pressed:before { + content: "\e64f"; +} + +.icon-shoucang:before { + content: "\e650"; +} + +.icon-phone:before { + content: "\e651"; +} + +.icon-tick:before { + content: "\e653"; +} + +.icon-a-moreback:before { + content: "\e654"; +} + +.icon-fenlei:before { + content: "\e657"; +} + +.icon-bianji:before { + content: "\e658"; +} + +.icon-wode:before { + content: "\e659"; +} + +.icon-sort-up-full:before { + content: "\ea4c"; +} + +.icon-sort-down-full:before { + content: "\ea4d"; +} + diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js new file mode 100644 index 0000000..043dece --- /dev/null +++ b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js @@ -0,0 +1 @@ +!function(a){var t,h,l,o,i,e='',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss"),p=function(a,t){t.parentNode.insertBefore(a,t)};if(d&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function z(){i||(i=!0,l())}function n(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}z()}t=function(){var a,t=document.createElement("div");t.innerHTML=e,e=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?p(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(l=t,o=a.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,z())})}(window); \ No newline at end of file diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json new file mode 100644 index 0000000..b949949 --- /dev/null +++ b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json @@ -0,0 +1,226 @@ +{ + "id": "2987621", + "name": "电子商城", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "29692046", + "name": "导航", + "font_class": "daohang", + "unicode": "e664", + "unicode_decimal": 58980 + }, + { + "icon_id": "29588731", + "name": "删除", + "font_class": "shanchu", + "unicode": "e663", + "unicode_decimal": 58979 + }, + { + "icon_id": "29349174", + "name": "已发货", + "font_class": "yifahuo", + "unicode": "e65b", + "unicode_decimal": 58971 + }, + { + "icon_id": "29349143", + "name": "待配布", + "font_class": "daipeibu", + "unicode": "e662", + "unicode_decimal": 58978 + }, + { + "icon_id": "29346808", + "name": "邀请团队", + "font_class": "yaoqingtuandui", + "unicode": "e65a", + "unicode_decimal": 58970 + }, + { + "icon_id": "29346810", + "name": "退款、售后", + "font_class": "a-tuikuanshouhou", + "unicode": "e65c", + "unicode_decimal": 58972 + }, + { + "icon_id": "29346811", + "name": "待付款", + "font_class": "daifukuan", + "unicode": "e65d", + "unicode_decimal": 58973 + }, + { + "icon_id": "29346812", + "name": "设置", + "font_class": "shezhi", + "unicode": "e65e", + "unicode_decimal": 58974 + }, + { + "icon_id": "29346813", + "name": "颜色对比", + "font_class": "yanseduibi", + "unicode": "e65f", + "unicode_decimal": 58975 + }, + { + "icon_id": "29346814", + "name": "待发货", + "font_class": "daifahuo", + "unicode": "e660", + "unicode_decimal": 58976 + }, + { + "icon_id": "29346815", + "name": "包裹", + "font_class": "baoguo", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "29240262", + "name": "tick-pressed", + "font_class": "tick-pressed", + "unicode": "e652", + "unicode_decimal": 58962 + }, + { + "icon_id": "29240263", + "name": "我的-pressed", + "font_class": "wode-pressed", + "unicode": "e655", + "unicode_decimal": 58965 + }, + { + "icon_id": "29240264", + "name": "分类-pressed", + "font_class": "fenlei-pressed", + "unicode": "e656", + "unicode_decimal": 58966 + }, + { + "icon_id": "29240057", + "name": "搜索", + "font_class": "sousuo", + "unicode": "e647", + "unicode_decimal": 58951 + }, + { + "icon_id": "29240058", + "name": "分享", + "font_class": "fenxiang", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "29240059", + "name": "筛选", + "font_class": "shaixuan", + "unicode": "e649", + "unicode_decimal": 58953 + }, + { + "icon_id": "29240060", + "name": "购物车", + "font_class": "gouwuche", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "29240062", + "name": "清空", + "font_class": "qingkong", + "unicode": "e64c", + "unicode_decimal": 58956 + }, + { + "icon_id": "29240063", + "name": "加", + "font_class": "jia", + "unicode": "e64d", + "unicode_decimal": 58957 + }, + { + "icon_id": "29240064", + "name": "减", + "font_class": "jian", + "unicode": "e64e", + "unicode_decimal": 58958 + }, + { + "icon_id": "29240065", + "name": "收藏-pressed", + "font_class": "shoucang-pressed", + "unicode": "e64f", + "unicode_decimal": 58959 + }, + { + "icon_id": "29240066", + "name": "收藏", + "font_class": "shoucang", + "unicode": "e650", + "unicode_decimal": 58960 + }, + { + "icon_id": "29240067", + "name": "phone", + "font_class": "phone", + "unicode": "e651", + "unicode_decimal": 58961 + }, + { + "icon_id": "29240069", + "name": "tick", + "font_class": "tick", + "unicode": "e653", + "unicode_decimal": 58963 + }, + { + "icon_id": "29240070", + "name": "more,back", + "font_class": "a-moreback", + "unicode": "e654", + "unicode_decimal": 58964 + }, + { + "icon_id": "29240073", + "name": "分类", + "font_class": "fenlei", + "unicode": "e657", + "unicode_decimal": 58967 + }, + { + "icon_id": "29240074", + "name": "编辑", + "font_class": "bianji", + "unicode": "e658", + "unicode_decimal": 58968 + }, + { + "icon_id": "29240075", + "name": "我的", + "font_class": "wode", + "unicode": "e659", + "unicode_decimal": 58969 + }, + { + "icon_id": "18174913", + "name": "排序,升序", + "font_class": "sort-up-full", + "unicode": "ea4c", + "unicode_decimal": 59980 + }, + { + "icon_id": "18174920", + "name": "排序,降序", + "font_class": "sort-down-full", + "unicode": "ea4d", + "unicode_decimal": 59981 + } + ] +} diff --git a/src/styles/bak/iconfont.ttf b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.ttf similarity index 78% rename from src/styles/bak/iconfont.ttf rename to src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.ttf index 02f040877815f27842f4a519d3447dbd2ca6abbe..13d93758240fe6c975581a2eb2c65456988cabe4 100644 GIT binary patch delta 1433 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 Vy3-X=v9~jb2mJ*Q72)#he*l2Vx$Xb} literal 0 HcmV?d00001 diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff2 b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..20b6fdffcfbd19ab2746a4724826c71814a2b783 GIT binary patch literal 5108 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 WGpo!=_9gCZY1@r2tKwTY`+Gg-Rmmp+ literal 0 HcmV?d00001 diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss index 92fec06..5eb33fc 100644 --- a/src/styles/iconfont.scss +++ b/src/styles/iconfont.scss @@ -1,6 +1,6 @@ @font-face { font-family: "iconfont"; /* Project id 2987621 */ - src:url('iconfont.ttf?t=1652068398646') format('truetype'); + src: url('iconfont.ttf?t=1652427368246') format('truetype'); } .iconfont { @@ -11,6 +11,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-daohang:before { + content: "\e664"; +} + .icon-shanchu:before { content: "\e663"; } @@ -129,4 +133,5 @@ .icon-sort-down-full:before { content: "\ea4d"; -} \ No newline at end of file +} + diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf index 8b3787626e1beca58ad6b055deb8833b2ad26aac..13d93758240fe6c975581a2eb2c65456988cabe4 100644 GIT binary patch delta 1078 zcmXw&TSyd97{~u-W_M=S-Sw8YysYb}qiBk*?pR{$1-zuIcGvZiZQeHUMj0psYY`C< zVHhC_A_zT)LSXpNLk}X=lSEJE(;+MZqu#3R8&A#fJ9EBszH`3s`+v;Smc`cjvdHG6 z#V>#~2FQ7%W3wY~-aCH))?FYY5FQQ6tkx`Ws+h z$(|dV91PuFy+wQ0d9oYELo-vX65F(&Mz&`nG(H@^R`UYL@ledssmYtJX*qS*0pva) zr^ipWa%(+cGo&`7iwU8nW zM^=w)U;!#d$Y~W8OpvEdoaC*1=%76s1$Z+L90bhS(Zgsz7Jiz?Asz`x#4#ix z87W9b8k{(ebhyYP1DVKzm2Ov{(iuBNalm4x#o$Kvy6j?+d;c!YHp2+$TJRPD1pq%I zpitng0tyNq5KwsVb^#><-XWlrz&iz$9QauQr3rpc5TT60&kHDb@CyQ}0{o(Y>H)tb zpvu563#dl$E&){w-YuZI!Gi))0K7*)T7dToNEPrtM9cvs5O}|UqyoPpAkn}F1SB8$ zRe{+q9uknG;MWAyK=46<*?c}EFxz}UYMGGoI3Tr5kR71`xWVGtcj=jIkyk7!mb;c6 z>yA>SOeuTnqWaA?Vf$zg+gI${_WhXBn3oQlquMd$jCc09MqKw@&*?mcrN1N~`$+OK zoCY;4U(pJ5^Y!U|=5;eQNmW!u*32y;Vk}%BV7Ym8PStl`_BNX30shtU!xp zZpqJlmAaImCaQXQ-^otay|lj6%{ou@dVPV0+I+pDu&KN+!USd}iPkDdW>_Bk2r)N1hFx%Ddl|CG~HwKHEIt;I(c#V#xU}K=Z zE?@t1y|}r}h|8+ebE~zt>BXfv_C!6+Q-Y1x*27HZSyl!Hg_4W zVP0y$hZ1iFHBxd?a97OX!&&;e(2Y2HumxMui*4vbKOz{wAfkw22*Vg*vJY#x5sL`Da)=$`4)_-H*@ezjw#Fl8CRGKa$I3nNKRpX$O(m&Ku#*G335td zb&%5v>x7(9STW>m-J6)WpX)h=Z9vW|YzT5eVQY|!3Y&yXC~OyUNnzuVyg~^emlcWu zxuQ@O$W;Y({)k*ts1@Y8Le(HQ6zT_=RH!86rb102j^h27+)}7Bq@Z~JxlV;Vs6E!H zkcX$VH?n9Li{_~L(8^dZeQ{sjpZBl%Hv%Plr(Lt#!Rg?iP$o1HnhiC>N5YT8t?)*q d5&0VZ73+=dUtJ6Q7%`IWO8TII)t~9K@eeU{srUc@ diff --git a/src/use/useCommonData.ts b/src/use/useCommonData.ts new file mode 100644 index 0000000..eebefef --- /dev/null +++ b/src/use/useCommonData.ts @@ -0,0 +1,23 @@ +import { useDispatch } from 'react-redux' +import {SET_COMMON, CLEAR_COMMON} from '@/constants/common' +import {useSelector} from '@/reducers/hooks' +/** + * 这个hook 用来临时存储数据用 + */ +export default () => { + const {common: commonData} = useSelector(state => state.commonData) + const dispatch = useDispatch() + const setCommonData = (val:any) => { + dispatch({type:SET_COMMON, data:val}) + } + + const removeCommonData = () => { + dispatch({type:CLEAR_COMMON}) + } + + return { + setCommonData, + removeCommonData, + commonData + } +} \ No newline at end of file