订单售后v3
This commit is contained in:
@@ -55,7 +55,7 @@ export default memo(({orderInfo, onClick}:Param) => {
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货
|
||||
value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中
|
||||
label: '申请退款'
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
.other_desc{
|
||||
// padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.textarea{
|
||||
position: relative;
|
||||
height: 165.4px;
|
||||
.descDataNum{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
font-size: 22px;
|
||||
color: #ABABAB;
|
||||
}
|
||||
}
|
||||
.textarea_con, .textarea_con_pretend{
|
||||
background-color: #f3f3f3;
|
||||
border: 2px solid #e6e6e6;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
height: 165.4px;
|
||||
padding: 20px 20px 30px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.textarea_con_pretend{
|
||||
color: $color_font_two;
|
||||
}
|
||||
.textarea_con_pretend_ed{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import {Textarea, View } from "@tarojs/components";
|
||||
import { memo, useMemo, useState } from "react";
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
//其他说明
|
||||
type Param = {
|
||||
title?: string,
|
||||
onChange?: (val: string) => void,
|
||||
placeholder?: string
|
||||
}
|
||||
export default memo(({onChange, title = '', placeholder = '请输入'}:Param) => {
|
||||
const [descData, setDescData] = useState({
|
||||
number: 0,
|
||||
value: '',
|
||||
count: 200,
|
||||
show: false
|
||||
})
|
||||
const getDesc = (e) => {
|
||||
let value = e.detail.value
|
||||
let res = value
|
||||
if(value.length > descData.count) {
|
||||
res = value.slice(0, descData.count)
|
||||
}
|
||||
setDescData({...descData, number:res.length, value: res})
|
||||
onChange?.(res)
|
||||
}
|
||||
|
||||
const toggleShowRealTextarea = (show) => {
|
||||
setDescData({...descData, show:show})
|
||||
}
|
||||
return (
|
||||
<View className={styles.other_desc}>
|
||||
<View className={styles.title}>{title}</View>
|
||||
<View className={styles.textarea}>
|
||||
{descData.show&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>||
|
||||
<View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||placeholder}</View>
|
||||
}
|
||||
<View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,55 @@
|
||||
.image_main{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.uploadImg{
|
||||
width: 202px;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
border: 2px dashed #cccccc;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 0 20px 20px;
|
||||
position: relative;
|
||||
.miconfont{
|
||||
font-size: 50px;
|
||||
}
|
||||
.uploadText{
|
||||
font-size: 26px;
|
||||
color: $color_font_three;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.ImgItem{
|
||||
width: 202px;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.miconfont_close{
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import Taro, { FC } from "@tarojs/taro"
|
||||
import { memo, useEffect, useState } from "react"
|
||||
import useUploadCDNImg from "@/use/useUploadImage";
|
||||
import { Image, Text, View } from "@tarojs/components";
|
||||
import { formatImgUrl } from "@/common/fotmat";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
//图片列表
|
||||
type ImageParam = {
|
||||
onChange?:(val: string[]) => void
|
||||
}
|
||||
const PictureItem:FC<ImageParam> = memo(({onChange}) => {
|
||||
const {getWxPhoto} = useUploadCDNImg()
|
||||
const [imageList, setImageLise] = useState<string[]>([])
|
||||
//上传图片
|
||||
const uploadImage = async () => {
|
||||
let res:any = await getWxPhoto('after-sale')
|
||||
if(res.code == 200) {
|
||||
setImageLise([...imageList, res.url])
|
||||
}
|
||||
}
|
||||
//删除图片
|
||||
const delImage = (index) => {
|
||||
imageList.splice(index,1)
|
||||
setImageLise(() => [...imageList])
|
||||
}
|
||||
//监听上传的图片变化
|
||||
useEffect(() => {
|
||||
onChange?.(imageList||[])
|
||||
}, [imageList])
|
||||
|
||||
//预览图片
|
||||
const showImage = () => {
|
||||
let list = imageList.map(item => {
|
||||
return formatImgUrl(item)
|
||||
})
|
||||
Taro.previewImage({
|
||||
current: list[0], // 当前显示
|
||||
urls: list // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.image_main}>
|
||||
{imageList.map((item, index) =>
|
||||
<View className={styles.ImgItem}>
|
||||
<Image mode="aspectFill" src={formatImgUrl(item)} onClick={showImage}></Image>
|
||||
<View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
|
||||
</View>)}
|
||||
<View className={styles.uploadImg } onClick={uploadImage}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
|
||||
<Text className={styles.uploadText}>上传照片</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
export default PictureItem
|
||||
Reference in New Issue
Block a user