xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

支付页面开发

Browse Source
This commit is contained in:
czm 2022-05-23 20:31:38 +08:00
parent 07e4c028d1
commit a3780aba0f
14 changed files with 504 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/checkbox/index.module.scss
View File

@ -26,6 +26,6 @@
text-align: center;
line-height: 40px;
.miconfont{
font-size: 26px;
font-size: 32px;
}
}

10
src/components/searchInput/index.tsx
View File

@ -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 (
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_main} style={{height: height + 'rpx'}}>
{showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
<View className={styles.searchInput_con}>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<View>{props.children}</View>

35
src/pages/order/components/amountShow/index.module.scss Normal file
View File

@ -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;
}
}
}

28
src/pages/order/components/amountShow/index.tsx Normal file
View File

@ -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 (
<>
<Text className={styles.price_text}>¥</Text>
<Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
<Text className={styles.price_text}>.{decimals_num}</Text>
</>
)
}, [number])
return (
<View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
{priceDom()}
</View>
)
})

17
src/pages/order/components/estimatedAmount/index.tsx
View File

@ -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 (
<>
<Text>¥</Text>
<Text>{Number(int_num).toLocaleString()}</Text>
<Text>.{decimals_num}</Text>
</>
)
}, [number])
return (
<>
<View className={styles.order_price}>
@ -32,9 +21,7 @@ export default memo(({style, number = 0, status = true, title = ''}:Param) => {
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<View className={classnames(styles.order_price_num, status&&styles.emphasis_num)} style={style}>
{priceDom()}
</View>
<AmountShow status={1} number={number}/>
</View>
</>
)

46
src/pages/order/components/offlinePay/index.module.scss Normal file
View File

@ -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;
}
}

52
src/pages/order/components/offlinePay/index.tsx Normal file
View File

@ -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 (
<View className={styles.offlinePay_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.offlinePay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>线下汇款</View>
<View className={styles.offlinePay_list}>
<SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>佛山市浩川盛世科技有限公司</Text>
</SearchInput>
<SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>招商银行汾江支行</Text>
</SearchInput>
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>62062342120001221231212</Text>
</SearchInput>
</View>
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
</View>
</Popup>
</View>
)
})

2
src/pages/order/components/orderState/index.module.scss
View File

@ -35,7 +35,7 @@
border-left: 2px solid $color_main;
height: 100%;
top: 10px;
left: 8px;
left: 9px;
position: absolute;
z-index: 1;
}

126
src/pages/order/components/payment/index.module.scss Normal file
View File

@ -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;
}
}

104
src/pages/order/components/payment/index.tsx Normal file
View File

@ -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 (
<View className={styles.payment_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.payment_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>订单支付</View>
<View className={styles.amount}>
<AmountShow status={2} number={6000.33}/>
</View>
<View className={styles.payment_list}>
<View className={styles.payment_list_top_border}></View>
<View className={styles.payment_list_title}>
{/* <Text>向商家发起支付</Text> */}
<View className={styles.payment_list_title_price}>
<View className={styles.payment_list_title_price_item}>
<Text>订单金额</Text>
<Text>¥6,001.00</Text>
</View>
<View className={styles.payment_list_title_price_item}>
<Text>已付金额</Text>
<Text>¥1,801.00</Text>
</View>
</View>
</View>
<View className={styles.payment_list_con}>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>预存款</View>
</View>
<View className={styles.payment_list_item_left_price}>金额不足，剩余 ¥0.00</View>
</View>
<MCheckbox status={true} onSelect={() => console.log()} onClose={() =>console.log()}/>
</View>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>x天账期</View>
</View>
<View className={styles.payment_list_item_left_price}>可用额度 ¥3,000.00</View>
</View>
<MCheckbox status={true} onSelect={() => console.log()} onClose={() =>console.log()}/>
</View>
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>线下汇款</View>
</View>
</View>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
</View>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>扫码支付</View>
</View>
</View>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
</View>
</View>
</View>
<View className={styles.btns}>确认交易</View>
</View>
</Popup>
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
<ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
</View>
)
})

54
src/pages/order/components/scanPay/index.module.scss Normal file
View File

@ -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;
}
}

38
src/pages/order/components/scanPay/index.tsx Normal file
View File

@ -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 (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>扫码支付</View>
<View className={styles.desc}>
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态
</View>
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={formatImgUrl('')}></Image>
</ScrollView>
<View className={styles.btns} onClick={() => {}}>保存电子确认单</View>
</View>
</Popup>
</View>
)
})

1
src/pages/order/components/submitOrderBtn/index.tsx
View File

@ -33,6 +33,7 @@ export default memo(({style, number = 0}:Param) => {
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
{priceDom()}
</View>
</View>
</>
)

10
src/pages/order/index.tsx
View File

@ -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 (
<View className={styles.order_main}>
<View className={styles.weight_memo_con}>
@ -172,11 +179,12 @@ import styles from './index.module.scss'
<View className={styles.order_btn}>申请退货</View>
<View className={styles.order_btn}>查看物流</View>
<View className={styles.order_btn}>确认收货</View>
<View className={styles.order_btn}>再次购买</View>
<View className={styles.order_btn} onClick={() => toPay()}>去支付</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment show={payMentShow} onClose={() => setPayMentShow(false)}/>
<View className="common_safe_area_y"></View>
</View>
)