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

🦄 refactor:订单详情对接

Browse Source
This commit is contained in:
Haiyi
2022-09-14 18:45:00 +08:00
parent fb8e93445b
commit c07ba11595
19 changed files with 1166 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/PayPopup/index.module.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.popupBox {
position: relative;
z-index: 99999;
z-index: 99;
background: #f7f7f7;
bottom: 0;
src/pages/order/components/PayPopup/index.tsx
+13 -2
View File
@@ -80,6 +80,17 @@ export default memo((props: Props) => {
//保存图片
const saveImage = () => {
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(picUrl) || []
let filePath = Taro.env.USER_DATA_PATH + '/img' + time + '.' + format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
@@ -136,13 +147,13 @@ export default memo((props: Props) => {
</View>
</View>
{
item.name !== '扫码支付' &&
item.name !== '扫码支付' && item.name !== '线下汇款' &&
<View className={item.checked ? styles.activeChecked : styles.checkYuan}>
<View className={classnames('iconfont', 'icon-lujing', styles.gou)}></View>
</View>
}
{
item.name === '扫码支付' &&
(item.name === '扫码支付' || item.name === '线下汇款') &&
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
}
</View>
src/pages/order/components/offlinePay/index.module.scss
+94
View File
@@ -0,0 +1,94 @@
$top: 170px;
.offlinePay_main {
.offlinePay_con {
padding: 20px;
background-color: #fff;
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;
.flexBox {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 56px;
.title {
margin-left: 48px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.leftFlex {
margin-right: 48px;
display: flex;
align-items: center;
.btn {
margin-left: 16px;
width: 65px;
height: 32px;
border-radius: 8px;
border: 1px solid #337FFF;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
line-height: 32px;
}
}
}
.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;
}
.kongBox {
height: calc($customTabBarHeight + env(safe-area-inset-bottom));
}
}
src/pages/order/components/offlinePay/index.tsx
+100
View File
@@ -0,0 +1,100 @@
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,
offlineInfo?: {
account_name: string,
bank_of_deposit: string,
transfer_remittance_account: string
},
showKong?: true | false,
}
export default memo(({ show = true, onClose, offlineInfo, showKong = true }: Param) => {
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: `开户名称：${offlineInfo?.account_name};\n\r 开户银行：${offlineInfo?.bank_of_deposit};\n\r 转账汇款账号：${offlineInfo?.transfer_remittance_account};`,
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
// //复制功能
const copy = (index) => {
let res: any = ''
if (index === 1) {
res = offlineInfo?.account_name
} else if (index === 2) {
res = offlineInfo?.bank_of_deposit
} else if (index === 3) {
res = offlineInfo?.transfer_remittance_account
}
Taro.setClipboardData({
data: res || '',
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}>
<View className={styles.flexBox}>
<View className={styles.title}>开户名称</View>
<View className={styles.leftFlex}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.account_name}</Text>
<View className={styles.btn} onClick={() => { copy(1) }}>复制</View>
</View>
</View>
<View className={styles.flexBox}>
<View className={styles.title}>开户银行</View>
<View className={styles.leftFlex}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text>
<View className={styles.btn} onClick={() => { copy(2) }}>复制</View>
</View>
</View>
<View className={styles.flexBox}>
<View className={styles.title}>转账汇款账号</View>
<View className={styles.leftFlex}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text>
<View className={styles.btn} onClick={() => { copy(3) }}>复制</View>
</View>
</View>
{/* <SearchInput showBorder={false} title='开户银行' titleStyle={{ fontSize: '23rpx' }}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.bank_of_deposit}</Text>
</SearchInput>
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{ fontSize: '23rpx' }}>
<Text className={styles.offlinePay_con_text}>{offlineInfo?.transfer_remittance_account}</Text>
</SearchInput> */}
</View>
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
</View>
{
showKong && <View className={styles.kongBox}></View>
}
</Popup>
</View>
)
})
src/pages/order/index.tsx
+19 -4
View File
@@ -10,6 +10,7 @@ import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
import ItemList from './components/itemList'
import OfflinePay from './components/offlinePay'
import {
mpsaleOrdercancel,
mpshoppingCartproductColorlist,
@@ -336,6 +337,10 @@ export default () => {
money: "",
isCheck: false,
},
{
iconfont: "icon-xianxiahuizong",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
@@ -393,10 +398,15 @@ export default () => {
money: "",
isCheck: false,
},
{
iconfont: "icon-xianxiahuizong",
name: "线下汇款",
},
{
iconfont: "icon-saomiao",
name: "扫码支付",
}
},
);
if (item.is_shipper_picks_up) {
const obj = arr.filter((item) => {
@@ -416,12 +426,14 @@ export default () => {
setPayList([...arr])
}
setShowSide(true)
setTitle('待支付款项')
setShowPay(true)
}
//选择支付方式
const clickItem = (item) => {
if (item.name === '扫码支付') { handScanpay() }
if (item.name === '线下汇款') { setShowOffine(true) }
payList.map(it => {
if (item.id === it.id) {
it.checked = true
@@ -452,8 +464,8 @@ export default () => {
weight: formatWeightDiv(it.actual_weight).toString(),
sale_price: (it.sale_price / 100).toString(),
total_price:
it.actual_amount !== 0
? (it.actual_amount / 100).toString()
it.total_sale_price !== 0
? (it.total_sale_price / 100).toString()
: (it.estimate_amount / 100).toString(),
length: (it.length / 100).toString(),
weight_error: formatWeightDiv(it.weight_error).toString(),
@@ -495,7 +507,7 @@ export default () => {
total_sale_price: (itemObj.total_sale_price / 100).toString(),
show_total_sale_price: true,
show_total_weight_error_discount: true,
actual_amount: (itemObj.payment_amount / 100).toString(),
actual_amount: (itemObj.actual_amount / 100).toString(),
wait_pay_amount: (itemObj.wait_pay_amount / 100).toString(),
order_total_weight_error: (
itemObj.total_weight_error / 1000
@@ -563,6 +575,8 @@ export default () => {
//显示支付
const [showPay, setShowPay] = useState(false)
//显示线下汇款
const [showOffline, setShowOffine] = useState(false)
return (
<View>
<View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
@@ -670,6 +684,7 @@ export default () => {
title={title}
picUrl={picUrl}
></PayPopup>
<OfflinePay show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={itemObj}></OfflinePay>
</View >
)
}