✨ feat(收款):收款完成70%
This commit is contained in:
Haiyi
@@ -0,0 +1,97 @@
|
||||
.itemBox {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.itemLeft {
|
||||
|
||||
// align-items: center;
|
||||
.finkFlex {
|
||||
display: flex;
|
||||
|
||||
.itemTitle {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.xing {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #E42945;
|
||||
margin-right: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.finkFont {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bigPic {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.itemRight {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
width: 70%;
|
||||
// position: relative;
|
||||
|
||||
.assginFont {
|
||||
// position: absolute;
|
||||
// bottom: 10px;
|
||||
// left: 0px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.rightFlex {
|
||||
.placeholderStyle {
|
||||
color: #f7f7f7;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.inputStyle {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.iconFlex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.chakanquanbukehu2 {
|
||||
font-size: 50px !important;
|
||||
}
|
||||
|
||||
.shu {
|
||||
width: 2px;
|
||||
height: 36px;
|
||||
background: #000000;
|
||||
opacity: 0.2;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.saomiao {
|
||||
margin-left: 24px;
|
||||
color: #087EFF;
|
||||
font-size: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { ScrollView, View, Text, Input } from '@tarojs/components'
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
// import BottomBtns from '@/components/BottomBtns'
|
||||
import { formatPriceDiv, formatDateTime } from '@/common/format'
|
||||
import Taro from '@tarojs/taro'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import UploadImage from '@/components/uploadImage'
|
||||
|
||||
interface Params {
|
||||
title?: string, //传入的名称
|
||||
require?: boolean, //是否显示必须选填的内容图标
|
||||
isInput?: boolean, //是否显示输入框
|
||||
inputValue?: string, //输入框的值
|
||||
inputType?: any, //输入框类型
|
||||
getInput?: (any) => void //输入框回调
|
||||
showScan?: boolean, //是否显示扫描图标
|
||||
placeholderFont?: string, //输入框默认文本
|
||||
showMore?: boolean, // 是否显示更多图标
|
||||
disabled?: boolean, // 是否输入框禁止
|
||||
onlyRead?: boolean, //图片是否只读
|
||||
showPic?: boolean, // 是否显示图片组件
|
||||
getImageList?: (any) => void //上传图片回调
|
||||
PicList?: [], //默认图片列表
|
||||
styleNone?: boolean, //根据不同的栏目调整样式
|
||||
getScan?: (any) => void, // 扫描
|
||||
navTo?: () => void, //跳转选择
|
||||
showSizeFont?: boolean, //展示金额的大写
|
||||
bigMoney?: any //展示的大写金额
|
||||
}
|
||||
|
||||
export default memo((pros: Params) => {
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.itemBox}
|
||||
style={{ justifyContent: `${pros.styleNone ? 'space-between' : ''}`, alignItems: `${pros.styleNone ? 'center' : ''}` }}>
|
||||
<View className={styles.itemLeft}
|
||||
|
||||
>
|
||||
<View className={styles.finkFlex}>
|
||||
<View className={styles.itemTitle}>{pros.title}</View>
|
||||
{
|
||||
pros.require && <Text className={styles.xing}>*</Text>
|
||||
}
|
||||
</View>
|
||||
{
|
||||
pros.showSizeFont && <View className={styles.finkFont}>展示大小写</View>
|
||||
}
|
||||
</View>
|
||||
{
|
||||
pros.showPic &&
|
||||
<View className={styles.bigPic}>
|
||||
<UploadImage onChange={pros.getImageList} defaultList={pros.PicList} onlyRead={pros.onlyRead} />
|
||||
</View>
|
||||
}
|
||||
{
|
||||
!pros.showPic && <View className={styles.itemRight} onClick={() => pros.navTo?.()}
|
||||
style={{
|
||||
justifyContent: `${!pros.showSizeFont ? 'space-between' : ''}`, alignItems: `${!pros.showSizeFont ? 'center' : ''}`,
|
||||
display: `${!pros.showSizeFont ? 'flex' : ''}`
|
||||
}}
|
||||
>
|
||||
<View className={styles.rightFlex}>
|
||||
{
|
||||
pros.isInput && <Input
|
||||
disabled={pros.disabled}
|
||||
placeholder={pros.placeholderFont}
|
||||
value={pros.inputValue}
|
||||
className={styles.inputStyle}
|
||||
type={pros.inputType}
|
||||
placeholderStyle={styles.placeholderStyle}
|
||||
onBlur={(e) => pros.getInput?.(e.detail.value)}
|
||||
></Input>
|
||||
}
|
||||
</View>
|
||||
|
||||
<View className={styles.iconFlex}></View>
|
||||
{
|
||||
pros.showMore && <IconFont name={'icon-chakanquanbukehu'} size={50} color={'#000000'}></IconFont>
|
||||
|
||||
|
||||
}
|
||||
{
|
||||
pros.showScan && <View className={styles.shu}></View>
|
||||
|
||||
}
|
||||
{
|
||||
pros.showScan && <View onClick={(e) => pros.getScan?.(e)}><IconFont name={'icon-saomiao'} size={50} color={'#337FFF'}></IconFont></View>
|
||||
|
||||
}
|
||||
{
|
||||
pros.showSizeFont && <View className={styles.assginFont}>{pros.bigMoney}</View>
|
||||
}
|
||||
</View>
|
||||
}
|
||||
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '新建收款单',
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.addBox {
|
||||
margin: 24px;
|
||||
padding: 0px 32px 40px 32px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px 16px 0px 0px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.textAreaBox {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.textAreaLeft {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.textAreaRight {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.numsTotal {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
width: 750px;
|
||||
height: 160px;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
padding-top: 16px;
|
||||
justify-content: space-between;
|
||||
|
||||
.resetBox {
|
||||
margin-left: 48px;
|
||||
width: 311px;
|
||||
height: 80px;
|
||||
border-radius: 44px;
|
||||
border: 1px solid #087EFF;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #337FFF;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-right: 32px;
|
||||
width: 311px;
|
||||
height: 80px;
|
||||
background: #68b4ff;
|
||||
border-radius: 44px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.activeButton {
|
||||
margin-right: 32px;
|
||||
width: 311px;
|
||||
height: 80px;
|
||||
background: #337FFF;
|
||||
border-radius: 44px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.safeBox {
|
||||
height: 160px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
import { View, Input, Button, Textarea } from '@tarojs/components'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
|
||||
import Search from '@/components/search'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Popup from '@/components/popup'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import Taro, { faceVerifyForPay, useDidShow } from '@tarojs/taro'
|
||||
import Form from './components/form'
|
||||
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
|
||||
import {
|
||||
mpreturnApplyOrderlist
|
||||
} from "@/api/newCollection"
|
||||
import TimePicker from "@/components/timePicker"
|
||||
import dayjs from 'dayjs'
|
||||
import { alert } from "@/common/common"
|
||||
import smallToBig from '@/common/money'
|
||||
|
||||
export default () => {
|
||||
|
||||
useDidShow(() => {
|
||||
|
||||
//获取选择的客户
|
||||
let pages = Taro.getCurrentPages();
|
||||
let currPage = pages[pages.length - 1]; // 获取当前页面
|
||||
console.log(currPage.data, '8888')
|
||||
|
||||
setQuery((e) => ({
|
||||
...e,
|
||||
purchaser_id: currPage.data?.clientId ? currPage.data?.clientId : '',
|
||||
clientName: currPage.data?.clientName ? currPage.data?.clientName : '',
|
||||
// sale_user_id: currPage.data?.saleuserId ? currPage.data?.saleuserId : '',
|
||||
// saleuserName: currPage.data?.saleuserName ? currPage.data?.saleuserName : '',
|
||||
}))
|
||||
})
|
||||
|
||||
const [Query, setQuery] = useState<any>({})
|
||||
|
||||
//获取图片列表
|
||||
const picUrl = useRef([])
|
||||
const getImageList = useCallback((list) => {
|
||||
picUrl.current = list
|
||||
console.log(picUrl.current, 'picUrl.current')
|
||||
}, [])
|
||||
|
||||
|
||||
//扫描
|
||||
const handScan = (e) => {
|
||||
e.stopPropagation()
|
||||
Taro.scanCode({
|
||||
success(res) {
|
||||
// setsearchObj((e) => ({ ...e, orderNo: res.result }))
|
||||
},
|
||||
fail(res) {
|
||||
console.log(res);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//选择内容跳转
|
||||
const navTo = (val) => {
|
||||
if (val === 1) {
|
||||
|
||||
} else {
|
||||
if (Query.purchaser_id == '') {
|
||||
return alert.error('请先选择客户')
|
||||
} else {
|
||||
Taro.navigateTo({
|
||||
url: '/pages/accountPage/id?' + Query.bankId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//判断是否可以提交
|
||||
const isDisabled = useMemo(() => {
|
||||
if (Query.clientName == '' ||
|
||||
Query.money == '' ||
|
||||
Query.bankNum == '' ||
|
||||
picUrl.current.length == 0
|
||||
) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}, [])
|
||||
|
||||
//收款金额回调
|
||||
const getInput = (e) => {
|
||||
setQuery({ ...Query, money: e })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setQuery(Query)
|
||||
}, [Query])
|
||||
|
||||
|
||||
//备注信息
|
||||
const [TextareaValue, setTextareaValue] = useState('')
|
||||
const getDesc = (e) => {
|
||||
setQuery({ ...Query, nums: e.length })
|
||||
setTextareaValue(e)
|
||||
}
|
||||
|
||||
//取消返回
|
||||
const handCancl = () => {
|
||||
Taro.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.addBox}>
|
||||
<Form
|
||||
title={'客户名称'}
|
||||
require={true}
|
||||
isInput={true}
|
||||
disabled={true}
|
||||
placeholderFont={'请选择客户信息'}
|
||||
inputValue={Query.clientName}
|
||||
showMore={true}
|
||||
showScan={true}
|
||||
styleNone={true}
|
||||
showPic={false}
|
||||
getScan={(e) => handScan(e)}
|
||||
navTo={() => navTo(1)}
|
||||
showSizeFont={false}
|
||||
></Form>
|
||||
<Form
|
||||
title={'收款金额'}
|
||||
require={true}
|
||||
isInput={true}
|
||||
disabled={false}
|
||||
placeholderFont={'请输入金额'}
|
||||
inputType={'digit'}
|
||||
showMore={false}
|
||||
inputValue={Query.money}
|
||||
showScan={false}
|
||||
styleNone={true}
|
||||
showPic={false}
|
||||
getInput={(e) => getInput(e)}
|
||||
showSizeFont={true}
|
||||
bigMoney={smallToBig(typeof (Query.money) == 'undefined' ? 0 : Query.money)}
|
||||
></Form>
|
||||
<Form
|
||||
styleNone={false}
|
||||
title={'收款凭证'}
|
||||
require={true}
|
||||
isInput={false}
|
||||
showMore={false}
|
||||
showScan={false}
|
||||
showPic={true}
|
||||
getImageList={(list) => getImageList(list)}
|
||||
showSizeFont={false}
|
||||
></Form>
|
||||
<Form
|
||||
title={'收款账户'}
|
||||
require={false}
|
||||
isInput={true}
|
||||
disabled={true}
|
||||
placeholderFont={'请选择银行账号'}
|
||||
inputValue={Query.bankNum}
|
||||
showMore={true}
|
||||
showScan={false}
|
||||
styleNone={true}
|
||||
showPic={false}
|
||||
navTo={() => navTo(2)}
|
||||
showSizeFont={false}
|
||||
></Form>
|
||||
<View className={styles.textAreaBox}>
|
||||
<View className={styles.textAreaLeft}>备注信息</View>
|
||||
<View className={styles.textAreaRight}>
|
||||
<Textarea
|
||||
style={{ width: '70%' }}
|
||||
onInput={(e) => getDesc(e.detail.value)}
|
||||
value={TextareaValue}
|
||||
placeholderStyle='font-size: 28rpx;font-weight: 400;'
|
||||
autoFocus
|
||||
maxlength={64}
|
||||
placeholder={'请填写备注信息'}
|
||||
></Textarea>
|
||||
<View className={styles.numsTotal}>{`${typeof (Query.nums) == 'undefined' ? 0 : Query.nums}/64`}</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
</View >
|
||||
<View className={styles.safeBox}> </View>
|
||||
<View className={styles.bottomBox}>
|
||||
<Button className={styles.resetBox} onClick={() => { handCancl() }}> 取消</Button >
|
||||
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 提交</Button >
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user