支付页面开发
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
.order_address{
|
||||
height: 178px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
.order_address_icon{
|
||||
font-size: 50px;
|
||||
color: $color_main;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 20px;
|
||||
}
|
||||
.order_address_text_con{
|
||||
flex:1;
|
||||
padding-left: 50px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.order_address_text_title{
|
||||
font-size: $font_size_medium;
|
||||
margin-top: 10px;
|
||||
@include common_ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.moreIconfont{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.order_address_text_name{
|
||||
|
||||
align-items: center;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $color_font_one;
|
||||
margin-right: 40px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: $color_font_one;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateBtn{
|
||||
width:200px;
|
||||
font-size: $font_size_min;
|
||||
background-color: #F0F0F0;
|
||||
height: 64px;
|
||||
border-radius: 24px;
|
||||
color: $color_font_two;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
.updateBtn_list{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
.updateBtn_item_select{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.updateBtn_item{
|
||||
flex:1;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
}
|
||||
.updateBtn_select{
|
||||
color: #fff;
|
||||
background-color: $color_main;
|
||||
border-radius: 24px;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 61px;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
.order_address_text_no{
|
||||
flex: 1;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.order_address_more_icon{
|
||||
color: $color_font_three;
|
||||
font-size: $font_size;
|
||||
}
|
||||
|
||||
}
|
||||
.order_address_list {
|
||||
height: 900px;
|
||||
.order_address_title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px 0 30px 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import AddressList from "@/components/AddressList";
|
||||
import Popup from "@/components/popup";
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import classnames from "classnames";
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export type AddressInfoParam = {
|
||||
province_name: string,
|
||||
city_name: string,
|
||||
district_name: string,
|
||||
address_detail: string,
|
||||
id?: number,
|
||||
name: string,
|
||||
phone: string
|
||||
}
|
||||
type Param = {
|
||||
onSelect?: (val:any) => void, //选择
|
||||
defaultValue?: AddressInfoParam|null //默认值
|
||||
disabled?: false|true //true禁用后只用于展示
|
||||
shipment_mode?: 1|2 //1自提 2物流
|
||||
}
|
||||
|
||||
export default memo(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param) => {
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setUserInfo(() => defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
//选择地址
|
||||
const [userInfo, setUserInfo] = useState<any>()
|
||||
const getAddress = useCallback((val) => {
|
||||
setShowAddressList(() => false)
|
||||
setUserInfo(() => val)
|
||||
onSelect?.(val)
|
||||
}, [])
|
||||
|
||||
//地址格式
|
||||
const formatAddress = useMemo(() => {
|
||||
if(userInfo)
|
||||
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
|
||||
}, [userInfo])
|
||||
|
||||
const changeShow = () => {
|
||||
if(receivingStatus == 2)
|
||||
setShowAddressList(() => true)
|
||||
}
|
||||
//收货方法,1:自提，2物流
|
||||
const [receivingStatus, setReceivingStatus] = useState(1)
|
||||
const onReceivingStatus = (val) => {
|
||||
setReceivingStatus(val)
|
||||
}
|
||||
useEffect(() => {
|
||||
setReceivingStatus(() => shipment_mode)
|
||||
}, [shipment_mode])
|
||||
return (
|
||||
<View>
|
||||
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_title}>
|
||||
<Text>{formatAddress}</Text>
|
||||
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
|
||||
</View>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>{userInfo?.name}</Text>
|
||||
<Text>{userInfo?.phone}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.updateBtn}>
|
||||
<View className={styles.updateBtn_list}>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={() => onReceivingStatus(1)}>自提</View>
|
||||
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={() => onReceivingStatus(2)}>物流</View>
|
||||
</View>
|
||||
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
|
||||
</View>
|
||||
</View>
|
||||
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||
<View className={styles.order_address_list}>
|
||||
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||
<AddressList onSelect={(item) => getAddress(item)}/>
|
||||
</View>
|
||||
</Popup>}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -6,13 +6,13 @@ import styles from './index.module.scss'
|
||||
|
||||
type OrderParam = {
|
||||
estimate_amount: number,
|
||||
estimate_weight: number,
|
||||
list: any[],
|
||||
sale_mode: number,
|
||||
sale_mode_name: string
|
||||
sale_mode_name: string,
|
||||
unit: string,
|
||||
colo_count: number,
|
||||
num_count: number
|
||||
total_colors: number,
|
||||
total_fabrics: number,
|
||||
total_number: number
|
||||
}
|
||||
|
||||
|
||||
@@ -22,14 +22,14 @@ export default memo(({value}:{value:OrderParam|null}) => {
|
||||
return value?.sale_mode == 0? item.roll : Number(item.length / 100)
|
||||
}, [value])
|
||||
//对应单价
|
||||
const standardPrice = useCallback(item => {
|
||||
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
|
||||
const standardPrice = useCallback(price => {
|
||||
return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
|
||||
}, [value])
|
||||
|
||||
//数量格式
|
||||
const numText = useMemo(() => {
|
||||
if(value)
|
||||
return `${value?.list.length}种面料，${value?.colo_count}种颜色，共${value?.num_count }${value?.unit}`
|
||||
return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}`
|
||||
}, [value])
|
||||
return (
|
||||
<>
|
||||
@@ -39,18 +39,18 @@ export default memo(({value}:{value:OrderParam|null}) => {
|
||||
value?.list.map(item => {
|
||||
return <View key={item.product_code} className={styles.order_list}>
|
||||
<View className={styles.order_list_title}>
|
||||
<View className={styles.tag}>{item.sale_mode_name}</View>
|
||||
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
|
||||
<View className={styles.num}>共{item.color_list.length}种</View>
|
||||
<View className={styles.tag}>{value.sale_mode_name}</View>
|
||||
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||
<View className={styles.num}>共{item?.product_colors.length}种</View>
|
||||
</View>
|
||||
<View className={styles.order_list_scroll}>
|
||||
{item.color_list?.map(colorItem => {
|
||||
return <View className={styles.order_list_item}>
|
||||
{item?.product_colors?.map(colorItem => {
|
||||
return <View key={colorItem.id} className={styles.order_list_item}>
|
||||
<View className={styles.order_list_item_img}></View>
|
||||
<View className={styles.order_list_item_con}>
|
||||
<View className={styles.order_list_item_des}>
|
||||
<View className={styles.order_list_item_title}>{colorItem.product_color_code + ' ' + colorItem.product_color_name}</View>
|
||||
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem)}</View>
|
||||
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
|
||||
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
|
||||
</View>
|
||||
<View className={styles.order_list_item_count}>
|
||||
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
.order_status_item{
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
min-height: 120px;
|
||||
.order_status_tail_end, .order_status_tail{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@@ -44,7 +43,7 @@
|
||||
align-items: center;
|
||||
.order_status_title{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_big;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_status_time{
|
||||
|
||||
@@ -4,7 +4,7 @@ import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { formatImgUrl } from "@/common/fotmat";
|
||||
type Param = {
|
||||
title: string,
|
||||
status: string,
|
||||
time: string,
|
||||
tag: string,
|
||||
desc: string
|
||||
@@ -14,33 +14,30 @@ export default memo(({list = []}:{list?:Param[]}) => {
|
||||
const changeMore = () => {
|
||||
setShowMore(() => !showMore)
|
||||
}
|
||||
list = [
|
||||
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
|
||||
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
|
||||
{title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
|
||||
]
|
||||
|
||||
return (
|
||||
<View className={styles.order_flow_state}>
|
||||
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
|
||||
{list.map((item, index) => <View className={styles.order_status_item}>
|
||||
{(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
|
||||
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.title}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
|
||||
<View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
|
||||
</View>)}
|
||||
</View>
|
||||
{(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
|
||||
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
|
||||
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
|
||||
<>
|
||||
{(list.length > 0)&&<View className={styles.order_flow_state}>
|
||||
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
|
||||
{list.map((item, index) => <View className={styles.order_status_item}>
|
||||
{(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
|
||||
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
|
||||
<View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
|
||||
</View>)}
|
||||
</View>
|
||||
{(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
|
||||
<Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
|
||||
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
|
||||
</View>}
|
||||
<View className={styles.image_tag}>
|
||||
<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
|
||||
</View>
|
||||
</View>}
|
||||
<View className={styles.image_tag}>
|
||||
<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -82,7 +82,7 @@ export default memo(({show = false, onClose}:Param) => {
|
||||
</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} onClick={onShowScanPay}>
|
||||
<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>
|
||||
|
||||
@@ -1,24 +1,96 @@
|
||||
import { Image, ScrollView, Text, View } from "@tarojs/components";
|
||||
import { memo } from "react";
|
||||
import AmountShow from "../amountShow";
|
||||
import { memo, useEffect } from "react";
|
||||
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 { alert } from "@/common/common";
|
||||
import { formatImgUrl } from "@/common/fotmat";
|
||||
import useCheckAuthorize from "@/use/useCheckAuthorize";
|
||||
import { GetPayCode } from "@/api/onlinePay";
|
||||
|
||||
|
||||
type Param = {
|
||||
show?: true|false,
|
||||
onClose?: () => void
|
||||
}
|
||||
export default memo(({show = true, onClose}:Param) => {
|
||||
const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEX///8AAABVwtN+AAACFElEQVR42uyaMbKzMAyExVC8kiNwFI5GjsZRcgRKCgb9I69sY+Ik7R+8O/OKF/N1Gnklr1AURVEURf2sBnUd+P9PZdxFpFddRaZ4uhEhAiR+euBznM2q+hCRacXpROSuiJ0vjphG1YfVkRXM2lm5ECFSR/QpYn+hw+hBhMgnRCScCxA0JSJE3t1i4XdrTPa5e5gvFx+R9pBseqdN9AnTO6+9Pobjq08m8ttIKUP02ZdT0GcRaQuxDhOKyWvMTK/VmMi8droMBxEiNUw6Xawhaagxm5LipGRe+KUpEWkVifMz2hDOXcHwHqV/IdI6IvH3U41JaEqhV6HGLhiRuyBhRj7yyIMrKXnhNYw7L0t7Is0i0mF7snW5w+xp17/4w8+1wxBpF4G79ZEIhbWn2yqY3ortIdIu0mHhYrcYxuqwhRvwkhi88HULR6R5xBd3mmwPmlIaqdGciBBJyKmQjEeNddH2VGuMyO8jeaGCeyfnlAzxLVwlp0SkUeTsbv0dedxlNh8TN7qVRyEizSJlFg4exn7Oo/Xy9zEJSaQt5KS0hzmnaWuml0jDSJm1LqakwbNw28X0ErkPUuaUxg0F40mV+FooRIjUs9Y4n31S8ljTS40RIYLgW1yoxAQkPMzbtC2RlpF0i0mekrwpESFSn5IUq9vYkJba2pbIfZBT1trfkUNSpc/BNiJEKIqiKIqi/gv9CwAA//9IKiY1VjApygAAAABJRU5ErkJggg=='
|
||||
|
||||
|
||||
|
||||
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
|
||||
const saveImageCheck = async () => {
|
||||
const res = await check()
|
||||
res&&saveImage()
|
||||
}
|
||||
//保存图片
|
||||
const saveImage = () => {
|
||||
const save = Taro.getFileSystemManager()
|
||||
const number = Math.random();
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
let filePath = Taro.env.USER_DATA_PATH +'/pic.'+ format
|
||||
alert.loading('正在保存图片')
|
||||
save.writeFile({
|
||||
filePath: filePath,
|
||||
data: base64,
|
||||
encoding: 'base64',
|
||||
success: function (res) {
|
||||
console.log('aa::',res)
|
||||
console.log('aa2::',filePath)
|
||||
Taro.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: function (res) {
|
||||
alert.success('图片保存成功')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log('err::', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
Taro.previewImage({
|
||||
current: formatImgUrl(''), // 当前显示图片的http链接
|
||||
urls: [formatImgUrl('')] // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
|
||||
// const {fetchData} = GetPayCode()
|
||||
// useEffect(() => {
|
||||
// fetchData({
|
||||
// title: "面料销售电子确认单",
|
||||
// company: "什么什么公司123",
|
||||
// order_type: "散剪",
|
||||
// sale_user: "小崔",
|
||||
// order_created_time:"2022/02/01 12:32:13",
|
||||
// order_no:"XS-211005888",
|
||||
// department:"嘻嘻嘻",
|
||||
// shipment_mode:"自提",
|
||||
// target_user_name:"大崔",
|
||||
// target_address:"阿斯顿发斯蒂芬",
|
||||
// target_description:"无",
|
||||
// pay_account:"1234567890123450001",
|
||||
// bank_account_name:"佛山市浩川长盛科技有限公司",
|
||||
// bank_name:"招商银行佛山分行禅城支行",
|
||||
// pay_type:"现结",
|
||||
// client:"客户名称",
|
||||
// phone:"15818085802",
|
||||
// order_total_length:"12",
|
||||
// order_total_price:"23000",
|
||||
// qrcode:"www.zzfzyc.com/checkorder/XS-211005888",
|
||||
// order_total_weight:"300.00",
|
||||
// list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
|
||||
// })
|
||||
// }, [])
|
||||
|
||||
|
||||
//复制功能
|
||||
return (
|
||||
<View className={styles.scanPay_main}>
|
||||
<Popup show={show} showTitle={false} onClose={onClose} >
|
||||
<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>
|
||||
@@ -27,9 +99,9 @@ export default memo(({show = true, onClose}:Param) => {
|
||||
扫码支付成功后，自动更新状态
|
||||
</View>
|
||||
<ScrollView scrollY className={styles.scanPay_list}>
|
||||
<Image mode="widthFix" src={formatImgUrl('')}></Image>
|
||||
<Image mode="widthFix" src={base64} onClick={showImage}></Image>
|
||||
</ScrollView>
|
||||
<View className={styles.btns} onClick={() => {}}>保存电子确认单</View>
|
||||
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user