diff --git a/src/common/common.ts b/src/common/common.ts index a5a7bc8..ef93cee 100644 --- a/src/common/common.ts +++ b/src/common/common.ts @@ -23,6 +23,7 @@ export const goLink = (path = '', params = {}, type:false|true = false) => { } } +<<<<<<< HEAD /** * 判断对象为空 * @param object @@ -86,4 +87,19 @@ export const retrieval = (data: any, message: string="请填写完信息", rules } resolve(null); }) - } \ No newline at end of file + } +======= + +// 金额千位分割符 +export const formatKbPrice = (number: string) => { + const ret = Array.from(number).reverse().reduce((result: string[],next,i,arr) => { + if((i+1)%3 === 0 && (i+1) !== arr.length) { + result.push(next,',') + return result; + } + result.push(next); + return result; + },[]) + return ret.reverse().join(''); +} +>>>>>>> 1557571 (确认订单) diff --git a/src/pages/order/components/addressInfo/index.module.scss b/src/pages/order/components/addressInfo/index.module.scss new file mode 100644 index 0000000..8273d60 --- /dev/null +++ b/src/pages/order/components/addressInfo/index.module.scss @@ -0,0 +1,54 @@ +.order_address{ + height: 178px; + background: #ffffff; + border-radius: 20px; + display: flex; + align-items: center; + padding: 30px; + box-sizing: border-box; + margin-top: 20px; + .order_address_icon{ + font-size: 60px; + } + .order_address_text_con{ + flex:1; + padding: 0 30px; + box-sizing: border-box; + .order_address_text_title{ + font-size: $font_size; + font-weight: 700; + @include common_ellipsis; + } + .order_address_text_name{ + margin-top: 20px; + color: $color_font_three; + font-size: $font_size_medium; + text{ + &:nth-child(1) { + margin-right: 40px; + } + } + } + } + .order_address_text_no{ + flex: 1; + font-size: $font_size; + font-weight: 700; + margin-left: 30px; + } + .order_address_more_icon{ + color: $color_font_three; + font-size: $font_size; + } + +} +.order_address_list { + height: 900px; + .order_address_title{ + font-size: $font_size; + font-weight: 700; + width: 100%; + text-align: center; + padding: 20px 0 30px 0; + } +} \ No newline at end of file diff --git a/src/pages/order/components/addressInfo/index.tsx b/src/pages/order/components/addressInfo/index.tsx new file mode 100644 index 0000000..9bcd9e0 --- /dev/null +++ b/src/pages/order/components/addressInfo/index.tsx @@ -0,0 +1,32 @@ +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 styles from './index.module.scss' + +export default () => { + const [showAddressList, setShowAddressList] = useState(false) + return ( + + setShowAddressList(true)}> + + {/* 请选择收货地址及信息 */} + + **省**市**区**街道****仓库**省**市**区**街道****仓库 + + 陈先生 + 1818877790 + + + + + setShowAddressList(false)}> + + 选择收货地址 + console.log(index, item)}/> + + + + ) +} \ 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 441627b..7e9ae1b 100644 --- a/src/pages/order/components/estimatedAmount/index.tsx +++ b/src/pages/order/components/estimatedAmount/index.tsx @@ -1,5 +1,6 @@ import { Text, View } from "@tarojs/components" import { useCallback, useEffect, useMemo } from "react" +import {formatKbPrice} from '@/common/common' import styles from './index.module.scss' type Param = { style?: Object, @@ -8,16 +9,19 @@ type Param = { export default ({style, number = 0}:Param) => { const priceDom = useCallback(() => { let res = number.toFixed(2).split('.') - let int_num = parseInt(res[0]).toLocaleString() + let int_num = parseInt(res[0]) + '' let decimals_num = res[1] return ( <> ¥ - {int_num} + {formatPrice(int_num)} .{decimals_num} ) }, [number]) + const formatPrice = useCallback((number: string) => { + return formatKbPrice(number) + }, []) return ( 预估金额 diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss new file mode 100644 index 0000000..78bda44 --- /dev/null +++ b/src/pages/order/components/orderState/index.module.scss @@ -0,0 +1,18 @@ +.order_flow_state{ + display: flex; + align-items: center; + padding: 0 30px; + height: 116px; + background-color: #fff; + border-radius: 20px; + .order_flow_state_text{ + color: $color_main; + font-size:$font_size; + font-weight: 700; + } + .order_flow_state_desc{ + color: $color_font_three; + font-size: $font_size_medium; + margin-left: 50px; + } +} \ No newline at end of file diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx new file mode 100644 index 0000000..58fec4d --- /dev/null +++ b/src/pages/order/components/orderState/index.tsx @@ -0,0 +1,14 @@ +import { View } from "@tarojs/components" +import styles from './index.module.scss' + +export default ({ + state = '', + desc = '' +}) => { + return ( + + {state} + {desc} + + ) +} \ No newline at end of file diff --git a/src/pages/order/components/remark/index.module.scss b/src/pages/order/components/remark/index.module.scss new file mode 100644 index 0000000..9f2b3d0 --- /dev/null +++ b/src/pages/order/components/remark/index.module.scss @@ -0,0 +1,47 @@ +.order_popup{ + display: flex; + flex-direction: column; + align-items: center; + padding: 20px 0; + .order_popup_title{ + color: $font_size_big; + font-weight: 700; + color: #000000; + padding-bottom: 20px; + } + .order_popup_input{ + width: 100%; + padding: 0 25px; + box-sizing: border-box; + margin-top: 43px; + position: relative; + .descDataNum{ + position: absolute; + right: 40px; + bottom: 10px; + height: 39px; + font-size: $font_size_medium; + color: $color_font_two; + } + textarea{ + background-color: $color_bg_one; + border-radius: 10px; + width: 100%; + height: 313px; + padding: 20px; + padding-bottom: 50px; + box-sizing: border-box; + font-size: $font_size; + } + } + .order_save_address{ + height: 82px; + background: #007aff; + border-radius: 40px; + width: 668px; + text-align: center; + line-height: 82px; + color: #fff; + margin-top: 60px; + } +} \ No newline at end of file diff --git a/src/pages/order/components/remark/index.tsx b/src/pages/order/components/remark/index.tsx new file mode 100644 index 0000000..05f485b --- /dev/null +++ b/src/pages/order/components/remark/index.tsx @@ -0,0 +1,35 @@ +import Popup from "@/components/popup" +import { Textarea, View } from "@tarojs/components" +import { useCallback, useState } from "react" +import styles from './index.module.scss' + +type Param = { + onBlur?: (val:any) => void + onSave?: (val: string) => void +} +export default ({onBlur, onSave}:Param) => { + const [descData, setDescData] = useState({ + number: 0, + value: '' + }) + + + const getDesc = useCallback((e) => { + let value = e.detail.value + setDescData({...descData, number:value.length, value}) + },[]) + + const setSave = () => { + onSave?.(descData.value) + } + return ( + + 添加备注 + + + {descData.number}/200 + + setSave()}>保存 + + ) +} \ No newline at end of file diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index ee30d79..d6246e0 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -4,6 +4,7 @@ padding: 20px; padding-bottom: 190px; box-sizing: border-box; + .order_title{ display: flex; align-items: center; @@ -12,6 +13,7 @@ background-color: #fff; height: 116px; border-radius: 20px; + margin-top: 20px; text{ flex:1; font-size: $font_size; @@ -31,35 +33,11 @@ } } } - .order_address{ - height: 178px; - background: #ffffff; - border-radius: 20px; - display: flex; - align-items: center; - padding: 30px; - box-sizing: border-box; - margin-top: 20px; - .order_address_icon{ - font-size: 60px; - } - .order_address_text{ - flex: 1; - font-size: $font_size; - font-weight: 700; - margin-left: 30px; - } - .order_address_more_icon{ - color: $color_font_three; - font-size: $font_size; - } - } - .order_desc{ display: flex; align-items: center; background-color: #fff; - padding: 0 30px; + padding: 0 20px; height: 116px; border-radius: 20px; margin-top: 20px; @@ -109,5 +87,32 @@ 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/index.tsx b/src/pages/order/index.tsx index 8d9b365..bc303c0 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,31 +1,57 @@ -import { Text, View } from "@tarojs/components" +import Popup from "@/components/popup"; +import SearchInput from "@/components/searchInput"; +import { Text, Textarea, View } from "@tarojs/components" +import Taro from "@tarojs/taro"; import classnames from "classnames"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, 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 './index.module.scss' export default () => { - const [price, setPrice] = useState(123000.33) - - return ( + 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: '复制成功' + }) + } + }) + } + return ( + - 收货方式 - 物流 - 上门自提 - - - - 请选择收货地址及信息 - + 收货方式 + 物流 + 上门自提 + - + setShowDesc(true)}> 订单备注 点击填写 + + 订单备注 + + + 13535359535 + clipboardData()}>复制 + + + + 2022-4-5 10:11:55 + + @@ -33,7 +59,10 @@ import styles from './index.module.scss' 提交订单 + setShowDesc(false)} > + console.log(e)}/> + - ) + ) } \ No newline at end of file diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx index 247fa58..787d428 100644 --- a/src/pages/searchList/search.tsx +++ b/src/pages/searchList/search.tsx @@ -9,12 +9,12 @@ export default () => { return ( - goLink('/pages/searchList/searchList')}/> + {}}/> 热门面料 - 高级搜索 + goLink('/pages/searchList/searchList')}>高级搜索 9265 diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index 21a5757..0a9c481 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -5,7 +5,6 @@ import Filter from "@/components/filter"; import InfiniteScroll from '@/components/infiniteScroll' import SortBtn from "@/components/sortBtn"; import SelectData from "./components/selectData"; -import Tabs from "@/components/tabs"; import { goLink } from "@/common/common"; import styles from './searchList.module.scss' import { useCallback, useState } from "react";