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

✨ feat(支付优化):线下汇款UI优化

Browse Source
This commit is contained in:
Haiyi 2022-12-09 11:23:09 +08:00 committed by czm
parent 3401b77a03
commit a79ffacf95
4 changed files with 197 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/searchInput/index.module.scss
View File

@ -1,40 +1,81 @@
.searchInput_main {
.searchInput_main{ display: flex;
min-height: 62px;
align-items: center;
border-bottom: 1px solid #f0f0f0;
.searchInput_title {
min-width: 145px;
min-height: 50px;
font-size: 28px;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex; display: flex;
min-height: 62px;
align-items: center; align-items: center;
border-bottom: 1px solid #F0F0F0; position: relative;
.searchInput_title { &::before {
min-width: 145px; content: '';
min-height: 50px; height: 30px;
font-size: 28px; width: 1px;
color: $color_font_two; background-color: #f0f0f0;
margin-right: 20px; position: absolute;
padding-left: 20px; right: 0;
display: flex;
align-items: center;
position: relative;
&::before{
content: "";
height: 30px;
width: 1px;
background-color: #F0F0F0;
position: absolute;
right: 0;
}
} }
.searchInput_con{ }
flex:1; .searchInput_con {
width: 100%; flex: 1;
display: flex; width: 100%;
width: 100%; display: flex;
align-items: center; width: 100%;
input{ align-items: center;
font-size: 26px; input {
} font-size: 26px;
} }
.icon_more_self{ }
font-size: 28px; .icon_more_self {
color: $color_font_two; font-size: 28px;
color: $color_font_two;
}
}
.searchActive {
display: flex;
min-height: 62px;
align-items: center;
border-bottom: 1px solid #f0f0f0;
justify-content: space-between;
.searchInput_title {
min-width: 145px;
min-height: 50px;
font-size: 28px;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex;
align-items: center;
position: relative;
&::before {
content: '';
height: 30px;
width: 1px;
background-color: #f0f0f0;
position: absolute;
right: 0;
} }
} }
.searchInput_con {
// flex: 1;
// width: 100%;
display: flex;
// width: 100%;
// align-items: center;
padding-right: 48px;
input {
font-size: 26px;
}
}
.icon_more_self {
font-size: 28px;
color: $color_font_two;
}
}

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

@ -16,6 +16,7 @@ interface Params {
height?: string height?: string
titleStyle?: Object titleStyle?: Object
styleObj?: Object styleObj?: Object
hasCopy?: boolean
} }
const SearchInput = (props: Params) => { const SearchInput = (props: Params) => {
const { const {
@ -29,6 +30,7 @@ const SearchInput = (props: Params) => {
clickOnInput, clickOnInput,
height = '80rpx', height = '80rpx',
titleStyle = {}, titleStyle = {},
hasCopy = false,
} = props } = props
const stylen = useMemo(() => { const stylen = useMemo(() => {
@ -38,7 +40,7 @@ const SearchInput = (props: Params) => {
return {} return {}
}, [showBorder]) }, [showBorder])
return ( return (
<View className={styles.searchInput_main} style={{ height, ...stylen }}> <View className={!hasCopy ? styles.searchInput_main : styles.searchActive} style={{ height, ...stylen }}>
{showTitle && ( {showTitle && (
<View className={styles.searchInput_title} style={titleStyle}> <View className={styles.searchInput_title} style={titleStyle}>
{title} {title}

134
src/pages/order/components/offlinePay/index.module.scss
View File

@ -1,46 +1,96 @@
$top:170px; $top: 170px;
.offlinePay_main{ .offlinePay_main {
.offlinePay_con{ .offlinePay_con {
padding: 20px; padding-top: 20px;
background-color: #F6F6F6; background-color: #f6f6f6;
border-radius: 20px; border-radius: 20px;
.miconfont_title{ .miconfont_title {
transform: rotate(-180deg); transform: rotate(-180deg);
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 27px; top: 27px;
font-size: 37px; font-size: 37px;
color: $color_font_three; color: $color_font_three;
z-index: 99; z-index: 99;
}
} }
.title{ }
font-size: $font_size_big; .title {
color: #000000; font-size: $font_size_big;
text-align: center; color: #000000;
font-weight: 700; text-align: center;
position: relative; font-weight: 700;
position: relative;
}
.topTitle {
margin-top: 20px;
display: flex;
justify-content: center;
color: #a5a5a5;
font-size: $font_size;
font-weight: 400;
}
.secondTitle {
display: flex;
align-items: center;
margin-top: 30px;
width: 750px;
height: 74px;
background: #fef9f4;
padding-left: 30px;
.cricle {
width: 34px;
height: 34px;
background: #f79b31;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
font-size: 24px;
margin-right: 14px;
} }
.cricleFont {
.offlinePay_list{ font-size: 24px;
border-radius: 10px; font-weight: 500;
padding: 60px 0; color: #f79b31;
.offlinePay_con_text{
font-size: $font_size;
font-weight: 700;
}
} }
.btns{ }
background: #007aff; .offlinePay_list {
border-radius: 40px; padding-left: 28px;
width: 668px; border-radius: 10px;
height: 82px; // padding: 60px 0 20px 0;
text-align: center;
line-height: 80px; .offlinePay_con_text {
width: 100%; font-size: $font_size;
color: #fff; font-weight: 700;
font-size: 32px; text-align: right;
margin-top: 30px;
} }
} .copyBtn {
min-width: 65px;
height: 32px;
border-radius: 8px;
border: 1px solid #337fff;
margin-left: 16px;
font-size: 24px;
font-weight: 400;
color: #337fff;
text-align: center;
line-height: 32px;
}
}
.btns {
background: #007aff;
border-radius: 40px;
width: 702px;
height: 82px;
text-align: center;
line-height: 80px;
// width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
margin-left: 24px;
// margin-right: 24px;
}
}

29
src/pages/order/components/offlinePay/index.tsx
View File

@ -30,21 +30,44 @@ const OfflinePay = ({ show = true, onClose, offlineInfo }: Param) => {
}, },
}) })
} }
const handCopy = (val) => {
Taro.setClipboardData({
data: val,
success(res) {
Taro.showToast({
icon: 'none',
title: '复制成功',
})
},
})
}
return ( return (
<View className={styles.offlinePay_main}> <View className={styles.offlinePay_main}>
<Popup show={show} showTitle={false} onClose={onClose} > <Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.offlinePay_con}> <View className={styles.offlinePay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View> <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>线下汇款</View> <View className={styles.title}>线下汇款</View>
<View className={styles.topTitle}>
请您通过网银转账，或者自行到银行进行汇款
</View>
<View className={styles.secondTitle}>
<View className={styles.cricle}>!</View>
<View className={styles.cricleFont}> 温馨提示:受银行处理影响，采用线下汇款方式到账会有延迟</View>
</View>
<View className={styles.offlinePay_list}> <View className={styles.offlinePay_list}>
<SearchInput showBorder={false} title="开户名称" titleStyle={{ fontSize: '23rpx' }}> <SearchInput showBorder={false} title="开户名称" titleStyle={{ fontSize: '23rpx' }} hasCopy>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.account_name}</Text> <Text className={styles.offlinePay_con_text}>{offlineInfo?.account_name}</Text>
<View className={styles.copyBtn} onClick={() => handCopy(offlineInfo?.account_name)}>复制</View>
</SearchInput> </SearchInput>
<SearchInput showBorder={false} title="开户银行" titleStyle={{ fontSize: '23rpx' }}> <SearchInput showBorder={false} title="开户银行" titleStyle={{ fontSize: '23rpx' }} hasCopy>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text> <Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text>
<View className={styles.copyBtn} onClick={() => handCopy(offlineInfo?.bank_of_deposit)}>复制</View>
</SearchInput> </SearchInput>
<SearchInput showBorder={false} title="转账汇款账号" titleStyle={{ fontSize: '23rpx' }}> <SearchInput showBorder={false} title="转账汇款账号" titleStyle={{ fontSize: '23rpx' }} hasCopy>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text> <Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text>
<View className={styles.copyBtn} onClick={() => handCopy(offlineInfo?.transfer_remittance_account)}>复制</View>
</SearchInput> </SearchInput>
</View> </View>
<View className={styles.btns} onClick={clipboardData}>复制信息</View> <View className={styles.btns} onClick={clipboardData}>复制信息</View>