feat(ID1000958): 【领取色卡】快速备注文案

【【领取色卡】快速备注文案】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000958
This commit is contained in:
xuan 2023-03-23 16:36:05 +08:00
parent ef0a52f658
commit 7afb11bc74
8 changed files with 194 additions and 107 deletions

View File

@ -142,6 +142,13 @@
"query": "", "query": "",
"launchMode": "default", "launchMode": "default",
"scene": null "scene": null
},
{
"name": "",
"pathName": "pages/submitOrder/index",
"query": "purchaser_id=1861&sale_mode=0&shopping_cart_product_color_list=%5B75615%5D&purchaser_name=%E5%93%88%E5%96%BD",
"launchMode": "default",
"scene": null
} }
] ]
} }

View File

@ -5,7 +5,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
import classnames from 'classnames' import classnames from 'classnames'
import Remark from '../orderDetails/components/remark' import Remark from '../orderDetails/components/remark'
import styles from './index.module.scss' import styles from './index.module.scss'
import Form from './components/form' import Form from './components/Form'
import Popup from '@/components/popup' import Popup from '@/components/popup'
import { debounce } from '@/common/util' import { debounce } from '@/common/util'
import { alert, goLink } from '@/common/common' import { alert, goLink } from '@/common/common'
@ -370,7 +370,9 @@ const CustomerEditor = () => {
<View className={classnames(remarkDesc === '' ? styles.remarkFontactive : styles.remarkFont)}>{remarkDesc === '' ? '尚未备注信息' : remarkDesc}</View> <View className={classnames(remarkDesc === '' ? styles.remarkFontactive : styles.remarkFont)}>{remarkDesc === '' ? '尚未备注信息' : remarkDesc}</View>
</DefaultBoxWithMemo> </DefaultBoxWithMemo>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}> <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={e => getRemark(e)} defaultValue={infoObj?.remark} showInput={!!showDesc} /> {
showDesc && <Remark onSave={e => getRemark(e)} defaultValue={infoObj?.remark} />
}
</Popup> </Popup>
<Address addressOnChange={val => handleSetSite(val)} defaultValue={addressArr} addressOnClose={() => onClose()} show={showSiteModal} /> <Address addressOnChange={val => handleSetSite(val)} defaultValue={addressArr} addressOnClose={() => onClose()} show={showSiteModal} />
<View className={styles.safeBox}></View> <View className={styles.safeBox}></View>

View File

@ -382,7 +382,9 @@ const AddColorCard = () => {
</View> </View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}> <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} /> {
showDesc && <Remark onSave={getRemark} defaultValue={remark} />
}
</Popup> </Popup>
</View> </View>
} }

View File

@ -1,48 +1,62 @@
.order_popup{ .order_popup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
.order_popup_title{ .order_popup_title {
color: $font_size_big; color: $font_size_big;
font-weight: 700; font-weight: 700;
color: #000000; color: #000000;
padding-bottom: 20px; padding-bottom: 20px;
} }
.order_popup_input{ .order_popup_input {
width: 100%; width: 100%;
padding: 0 25px; padding: 0 25px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 43px; margin-top: 43px;
position: relative; position: relative;
.descDataNum{ .descDataNum {
position: absolute; position: absolute;
right: 40px; right: 40px;
bottom: 10px; bottom: 10px;
height: 39px; height: 39px;
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_two; color: $color_font_two;
}
textarea{
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
height: 313px;
padding: 20px;
padding-bottom: 50px;
box-sizing: border-box;
font-size: $font_size;
border: 2px solid #e6e6e6;
}
} }
.order_save_address{
height: 82px; textarea {
background: #007aff; background-color: #f3f3f3;
border-radius: 40px; border-radius: 10px;
width: 668px; width: 100%;
text-align: center; height: 313px;
line-height: 82px; padding: 20px;
color: #fff; padding-bottom: 50px;
margin-top: 60px; box-sizing: border-box;
} font-size: $font_size;
} border: 2px solid #e6e6e6;
}
}
.recommend_remark {
margin: 10px 28px;
color: #808080;
font-size: 28px;
}
.recommend_remark_content {
margin: 0 20px;
.tag {
height: 50px;
margin: 0 8px;
margin-bottom: 10px;
}
}
.order_save_address {
height: 82px;
background: #007aff;
border-radius: 40px;
width: 668px;
text-align: center;
line-height: 82px;
color: #fff;
margin-top: 60px;
}
}

View File

@ -2,14 +2,57 @@ import { Textarea, View } from '@tarojs/components'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
import Popup from '@/components/popup' import Popup from '@/components/popup'
import Tag from '@/components/tag'
interface Param { interface Param {
onBlur?: (val: any) => void onBlur?: (val: any) => void
onSave?: (val: string) => void onSave?: (val: string) => void
defaultValue?: string defaultValue?: string
showInput: boolean
} }
const Remark = ({ onBlur, onSave, defaultValue = '', showInput = false }: Param) => { const recommendReport = [
{
id: 1,
value: '拿色片',
},
{
id: 2,
value: '顺丰',
},
{
id: 3,
value: '客户自提',
},
{
id: 4,
value: '加急一下',
},
{
id: 5,
value: '物流到',
},
{
id: 6,
value: '中台秀银',
},
{
id: 7,
value: '中台晓茵',
},
{
id: 8,
value: '中台淑婷',
},
{
id: 9,
value: '中台结慧',
},
{
id: 10,
value: '辛苦了',
},
]
const Remark = ({ onBlur, onSave, defaultValue = '' }: Param) => {
const [descData, setDescData] = useState({ const [descData, setDescData] = useState({
number: 0, number: 0,
value: '', value: '',
@ -30,16 +73,31 @@ const Remark = ({ onBlur, onSave, defaultValue = '', showInput = false }: Param)
useEffect(() => { useEffect(() => {
getDesc(defaultValue) getDesc(defaultValue)
}, [defaultValue]) }, [defaultValue])
const onClickTag = (item) => {
setDescData(prev => ({
...prev,
value: prev.value + item.value,
}))
}
return ( return (
<View className={styles.order_popup}> <View className={styles.order_popup}>
<View className={styles.order_popup_title}></View> <View className={styles.order_popup_title}></View>
{ <View className={styles.order_popup_input}>
showInput && <View className={styles.order_popup_input}> <Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={e => getDesc(e.detail.value)} onBlur={e => onBlur?.(e)}></Textarea>
<Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={e => getDesc(e.detail.value)} onBlur={e => onBlur?.(e)}></Textarea> <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View> </View>
<View>
<View className={styles.recommend_remark}></View>
<View className={styles.recommend_remark_content}>
{
recommendReport.map((item) => {
return <Tag type="info" plain onClick={() => onClickTag(item)} circle customClassName={styles.tag} key={item.id}>{item.value}</Tag>
})
}
</View> </View>
} </View>
<View className={styles.order_save_address} onClick={() => setSave()}></View> <View className={styles.order_save_address} onClick={() => setSave()}></View>
</View> </View>
) )

View File

@ -450,7 +450,9 @@ const AddColorCard = () => {
</View> </View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}> <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} /> {
showDesc && <Remark onSave={getRemark} defaultValue={remark} />
}
</Popup> </Popup>
</View> </View>
} }

View File

@ -517,7 +517,9 @@ const SubmitOrder = () => {
</View> </View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}> <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={e => getRemark(e)} defaultValue={infoObj.remark} showInput={!!showDesc} /> {
showDesc && <Remark onSave={e => getRemark(e)} defaultValue={infoObj.remark} />
}
</Popup> </Popup>
</View> </View>
) )

View File

@ -1,48 +1,48 @@
.order_popup{ .order_popup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
.order_popup_title{ .order_popup_title {
color: $font_size_big; color: $font_size_big;
font-weight: 700; font-weight: 700;
color: #000000; color: #000000;
padding-bottom: 20px; padding-bottom: 20px;
} }
.order_popup_input{ .order_popup_input {
width: 100%; width: 100%;
padding: 0 25px; padding: 0 25px;
box-sizing: border-box; box-sizing: border-box;
margin-top: 43px; margin-top: 43px;
position: relative; position: relative;
.descDataNum{ .descDataNum {
position: absolute; position: absolute;
right: 40px; right: 40px;
bottom: 10px; bottom: 10px;
height: 39px; height: 39px;
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_two; color: $color_font_two;
}
textarea{
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
height: 313px;
padding: 20px;
padding-bottom: 50px;
box-sizing: border-box;
font-size: $font_size;
border: 2px solid #e6e6e6;
}
} }
.order_save_address{ textarea {
height: 82px; background-color: white;
background: #007aff; border-radius: 10px;
border-radius: 40px; width: 100%;
width: 668px; height: 313px;
text-align: center; padding: 20px;
line-height: 82px; padding-bottom: 50px;
color: #fff; box-sizing: border-box;
margin-top: 60px; font-size: $font_size;
} border: 2px solid #e6e6e6;
} }
}
.order_save_address {
height: 82px;
background: #007aff;
border-radius: 40px;
width: 668px;
text-align: center;
line-height: 82px;
color: #fff;
margin-top: 60px;
}
}