diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss index 345ad92..b50f17d 100644 --- a/src/components/checkbox/index.module.scss +++ b/src/components/checkbox/index.module.scss @@ -26,6 +26,6 @@ text-align: center; line-height: 40px; .miconfont{ - font-size: 26px; + font-size: 32px; } } \ No newline at end of file diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx index 4be58c4..48c45fc 100644 --- a/src/components/searchInput/index.tsx +++ b/src/components/searchInput/index.tsx @@ -12,6 +12,8 @@ type Params = { changeOnInput?: (string) => void, clickOnInput?: () => void, children?: ReactNode + height?: number, + titleStyle?: Object } @@ -24,7 +26,9 @@ export default memo((props: Params) => { placeholder = '请输入', showBorder = true, changeOnInput, - clickOnInput + clickOnInput, + height = 80, + titleStyle = {} } = props let stylen = useMemo(() => { @@ -34,8 +38,8 @@ export default memo((props: Params) => { return {} }, [showBorder]) return ( - - {showTitle&&{title}} + + {showTitle&&{title}} {!props.children&& clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/> ||{props.children} diff --git a/src/pages/order/components/amountShow/index.module.scss b/src/pages/order/components/amountShow/index.module.scss new file mode 100644 index 0000000..58368a8 --- /dev/null +++ b/src/pages/order/components/amountShow/index.module.scss @@ -0,0 +1,35 @@ +.order_price_num{ + color: $color_main; + font-weight: 700; + text{ + &:nth-child(1) { + font-size: $font_size_min; + } + &:nth-child(2) { + font-size: 26px; + } + &:nth-child(3) { + font-size: $font_size_medium; + } + } +} +.emphasis_num{ + .price_text{ + &:nth-child(2) { + font-size: $font_size_big; + } + } +} +.emphasis_num_big{ + .price_text{ + &:nth-child(1) { + font-size: $font_size_big; + } + &:nth-child(2) { + font-size: 60px; + } + &:nth-child(1) { + font-size: $font_size_big; + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/amountShow/index.tsx b/src/pages/order/components/amountShow/index.tsx new file mode 100644 index 0000000..877f7df --- /dev/null +++ b/src/pages/order/components/amountShow/index.tsx @@ -0,0 +1,28 @@ +import { Text, View } from "@tarojs/components"; +import { memo, useCallback } from "react"; +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + number: number, //数字 + status: 0|1|2 //0 小型，1中型，2大 +} +export default memo(({number = 0, status = 1}:Param) => { + const priceDom = useCallback(() => { + let res = number.toFixed(2).split('.') + let int_num = parseInt(res[0]) + '' + let decimals_num = res[1] + return ( + <> + ¥ + {Number(int_num).toLocaleString()} + .{decimals_num} + + ) + }, [number]) + return ( + + {priceDom()} + + ) +}) \ 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 269487e..0292f6b 100644 --- a/src/pages/order/components/estimatedAmount/index.tsx +++ b/src/pages/order/components/estimatedAmount/index.tsx @@ -3,6 +3,7 @@ import { memo, useCallback, useEffect, useMemo } from "react" import {formatKbPrice} from '@/common/common' import classnames from "classnames"; import styles from './index.module.scss' +import AmountShow from "../amountShow"; type Param = { style?: Object, number?: number, @@ -10,18 +11,6 @@ type Param = { status?: true|false, //true 加大加深 } export default memo(({style, number = 0, status = true, title = ''}:Param) => { - const priceDom = useCallback(() => { - let res = number.toFixed(2).split('.') - let int_num = parseInt(res[0]) + '' - let decimals_num = res[1] - return ( - <> - ¥ - {Number(int_num).toLocaleString()} - .{decimals_num} - - ) - }, [number]) return ( <> @@ -32,9 +21,7 @@ export default memo(({style, number = 0, status = true, title = ''}:Param) => { {/* 123123123121212312312312312 */} - - {priceDom()} - + ) diff --git a/src/pages/order/components/offlinePay/index.module.scss b/src/pages/order/components/offlinePay/index.module.scss new file mode 100644 index 0000000..f84e995 --- /dev/null +++ b/src/pages/order/components/offlinePay/index.module.scss @@ -0,0 +1,46 @@ +$top:170px; +.offlinePay_main{ + .offlinePay_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + } + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + + } + + .offlinePay_list{ + border-radius: 10px; + padding: 60px 0; + .offlinePay_con_text{ + font-size: $font_size; + font-weight: 700; + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/order/components/offlinePay/index.tsx b/src/pages/order/components/offlinePay/index.tsx new file mode 100644 index 0000000..4022374 --- /dev/null +++ b/src/pages/order/components/offlinePay/index.tsx @@ -0,0 +1,52 @@ +import { Text, View } from "@tarojs/components"; +import { memo } from "react"; +import AmountShow from "../amountShow"; +import classnames from "classnames"; +import styles from './index.module.scss' + +import MCheckbox from "@/components/checkbox"; +import Popup from "@/components/popup"; +import SearchInput from "@/components/searchInput"; +import Taro from "@tarojs/taro"; + +type Param = { + show?: true|false, + onClose?: () => void +} +export default memo(({show = true, onClose}:Param) => { + //复制功能 + const clipboardData = () => { + Taro.setClipboardData({ + data: '开户名称:佛山市浩川盛世科技有限公司; 开户银行:招商银行汾江支行; 转账汇款账号:62062342120001221231212', + success: function (res) { + Taro.showToast({ + icon: 'none', + title: '复制成功' + }) + } + }) + } + return ( + + + + + 线下汇款 + + + 佛山市浩川盛世科技有限公司 + + + 招商银行汾江支行 + + + 62062342120001221231212 + + + 复制信息 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss index 9101c29..195c10d 100644 --- a/src/pages/order/components/orderState/index.module.scss +++ b/src/pages/order/components/orderState/index.module.scss @@ -35,7 +35,7 @@ border-left: 2px solid $color_main; height: 100%; top: 10px; - left: 8px; + left: 9px; position: absolute; z-index: 1; } diff --git a/src/pages/order/components/payment/index.module.scss b/src/pages/order/components/payment/index.module.scss new file mode 100644 index 0000000..340b0ed --- /dev/null +++ b/src/pages/order/components/payment/index.module.scss @@ -0,0 +1,126 @@ +$top:190px; +.payment_main{ + .payment_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + } + + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + + } + .amount{ + text-align: center; + padding: 25px 0; + } + + .payment_list{ + background-color: #fff; + // box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16); + min-height: 300px; + border-radius: 10px; + padding-bottom: 100px; + position: relative; + background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat , + radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat; + filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16)); + position: relative; + &::before{ + content: ''; + position: absolute; + border-bottom: 3px dashed #ccc; + top: $top; + width: calc(100% - 100px); + left:0; + right: 0; + margin: auto; + + } + .payment_list_top_border{ + height: 32px; + width: 100%; + background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%); + border-radius: 10px 10px 0px 0px; + } + .payment_list_title{ + text-align: center; + padding: 30px 0 50px 0; + font-size: $font_size; + color: $color_font_three; + .payment_list_title_price_item{ + display: flex; + justify-content: space-between; + padding: 0 90px; + &:nth-child(1) { + margin-bottom: 15px; + } + } + text{ + &:nth-child(2) { + color: $color_main; + } + } + } + .payment_list_con{ + padding: 20px 30px 0 30px; + .payment_list_item{ + display: flex; + justify-content: space-between; + align-items: center; + height: 123px; + &:nth-last-child(n+2) { + border-bottom: 2px solid #F3F3F3; + } + } + .payment_list_item_left{ + display: flex; + flex-direction: column; + font-size: $font_size; + .payment_list_item_left_name{ + display: flex; + align-items: center; + } + .miconfont{ + font-size: 30px; + color: #FFC300; + padding-right: 10px; + } + .payment_list_item_left_price{ + font-size: $font_size_min; + color: $color_font_two; + padding-left: 35px; + padding-top: 5px; + } + } + .miconfont_more{ + font-size: 20px; + } + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/order/components/payment/index.tsx b/src/pages/order/components/payment/index.tsx new file mode 100644 index 0000000..4e6e223 --- /dev/null +++ b/src/pages/order/components/payment/index.tsx @@ -0,0 +1,104 @@ +import { Text, View } from "@tarojs/components"; +import { memo, useState } from "react"; +import AmountShow from "../amountShow"; +import classnames from "classnames"; +import styles from './index.module.scss' + +import MCheckbox from "@/components/checkbox"; +import Popup from "@/components/popup"; +import OfflinePay from "../offlinePay"; +import ScanPay from "../scanPay"; + +type Param = { + show?: true|false, + onClose?: () => void +} +export default memo(({show = false, onClose}:Param) => { + + //线下付款 + const [offlinePayShow, setofflinePayShow] = useState(false) + const onShowOfflinePay = () => { + setofflinePayShow(true) + onClose?.() + } + + //扫码支付 + const [scanPayShow, setScanPayShow] = useState(false) + const onShowScanPay = () => { + setScanPayShow(true) + onClose?.() + } + return ( + + + + + 订单支付 + + + + + + + {/* 向商家发起支付 */} + + + 订单金额 + ¥6,001.00 + + + 已付金额 + ¥1,801.00 + + + + + + + + + 预存款 + + 金额不足，剩余 ¥0.00 + + console.log()} onClose={() =>console.log()}/> + + + + + + x天账期 + + 可用额度 ¥3,000.00 + + console.log()} onClose={() =>console.log()}/> + + + + + + 线下汇款 + + + + + + + + + 扫码支付 + + + + + + + 确认交易 + + + setofflinePayShow(false)}/> + setScanPayShow(false)}/> + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/scanPay/index.module.scss b/src/pages/order/components/scanPay/index.module.scss new file mode 100644 index 0000000..dcb356d --- /dev/null +++ b/src/pages/order/components/scanPay/index.module.scss @@ -0,0 +1,54 @@ +$top:170px; +.scanPay_main{ + .scanPay_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + + } + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + } + .desc{ + font-size: $font_size_min; + color: $color_main; + text-align: center; + padding: 10px 0; + .miconfont{ + font-size: 25px; + } + } + + .scanPay_list{ + border-radius: 10px; + height: 900px; + image{ + width: 100%; + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx new file mode 100644 index 0000000..cd55c85 --- /dev/null +++ b/src/pages/order/components/scanPay/index.tsx @@ -0,0 +1,38 @@ +import { Image, ScrollView, Text, View } from "@tarojs/components"; +import { memo } from "react"; +import AmountShow from "../amountShow"; +import classnames from "classnames"; +import styles from './index.module.scss' + +import MCheckbox from "@/components/checkbox"; +import Popup from "@/components/popup"; +import SearchInput from "@/components/searchInput"; +import Taro from "@tarojs/taro"; +import { formatImgUrl } from "@/common/fotmat"; + +type Param = { + show?: true|false, + onClose?: () => void +} +export default memo(({show = true, onClose}:Param) => { + //复制功能 + return ( + + + + + 扫码支付 + + + 扫码支付成功后，自动更新状态 + + + + + {}}>保存电子确认单 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/submitOrderBtn/index.tsx b/src/pages/order/components/submitOrderBtn/index.tsx index 770d805..db9b432 100644 --- a/src/pages/order/components/submitOrderBtn/index.tsx +++ b/src/pages/order/components/submitOrderBtn/index.tsx @@ -33,6 +33,7 @@ export default memo(({style, number = 0}:Param) => { {priceDom()} + ) diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 600443e..5a3f8d5 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import AddressInfo from "./components/addressInfo"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; +import Payment from "./components/payment"; import Remark from "./components/remark"; import WeightMemo from "./components/weightMemo"; import styles from './index.module.scss' @@ -135,6 +136,12 @@ import styles from './index.module.scss' ) goLink('/pages/editOrder/index') } + + //去付款 + const [payMentShow, setPayMentShow] = useState(false) + const toPay = () => { + setPayMentShow(true) + } return ( @@ -172,11 +179,12 @@ import styles from './index.module.scss' 申请退货 查看物流 确认收货 - 再次购买 + toPay()}>去支付 setShowDesc(false)} > getRemark(e)}/> + setPayMentShow(false)}/> )