✨ feat(支付优化):线下汇款UI优化
This commit is contained in:
Haiyi
parent
3401b77a03
commit
a79ffacf95
@ -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;
|
||||
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;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
&::before{
|
||||
content: "";
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
background-color: #F0F0F0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
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;
|
||||
input{
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.searchInput_con {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
input {
|
||||
font-size: 26px;
|
||||
}
|
||||
.icon_more_self{
|
||||
font-size: 28px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.icon_more_self {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ interface Params {
|
||||
height?: string
|
||||
titleStyle?: Object
|
||||
styleObj?: Object
|
||||
hasCopy?: boolean
|
||||
}
|
||||
const SearchInput = (props: Params) => {
|
||||
const {
|
||||
@ -29,6 +30,7 @@ const SearchInput = (props: Params) => {
|
||||
clickOnInput,
|
||||
height = '80rpx',
|
||||
titleStyle = {},
|
||||
hasCopy = false,
|
||||
} = props
|
||||
|
||||
const stylen = useMemo(() => {
|
||||
@ -38,7 +40,7 @@ const SearchInput = (props: Params) => {
|
||||
return {}
|
||||
}, [showBorder])
|
||||
return (
|
||||
<View className={styles.searchInput_main} style={{ height, ...stylen }}>
|
||||
<View className={!hasCopy ? styles.searchInput_main : styles.searchActive} style={{ height, ...stylen }}>
|
||||
{showTitle && (
|
||||
<View className={styles.searchInput_title} style={titleStyle}>
|
||||
{title}
|
||||
|
||||
@ -1,46 +1,96 @@
|
||||
$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;
|
||||
}
|
||||
$top: 170px;
|
||||
.offlinePay_main {
|
||||
.offlinePay_con {
|
||||
padding-top: 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;
|
||||
|
||||
}
|
||||
.title {
|
||||
font-size: $font_size_big;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
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;
|
||||
}
|
||||
|
||||
.offlinePay_list{
|
||||
border-radius: 10px;
|
||||
padding: 60px 0;
|
||||
.offlinePay_con_text{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cricleFont {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #f79b31;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.offlinePay_list {
|
||||
padding-left: 28px;
|
||||
border-radius: 10px;
|
||||
// padding: 60px 0 20px 0;
|
||||
|
||||
.offlinePay_con_text {
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<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.topTitle}>
|
||||
请您通过网银转账，或者自行到银行进行汇款
|
||||
</View>
|
||||
<View className={styles.secondTitle}>
|
||||
<View className={styles.cricle}>!</View>
|
||||
<View className={styles.cricleFont}> 温馨提示:受银行处理影响，采用线下汇款方式到账会有延迟</View>
|
||||
</View>
|
||||
<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>
|
||||
<View className={styles.copyBtn} onClick={() => handCopy(offlineInfo?.account_name)}>复制</View>
|
||||
</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>
|
||||
<View className={styles.copyBtn} onClick={() => handCopy(offlineInfo?.bank_of_deposit)}>复制</View>
|
||||
</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>
|
||||
<View className={styles.copyBtn} onClick={() => handCopy(offlineInfo?.transfer_remittance_account)}>复制</View>
|
||||
</SearchInput>
|
||||
</View>
|
||||
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user