153 lines
8.2 KiB
TypeScript
153 lines
8.2 KiB
TypeScript
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
|
||
import { memo, useCallback, useMemo, useState } from "react";
|
||
import classnames from "classnames";
|
||
import styles from './index.module.scss'
|
||
import { formatImgUrl } from "@/common/fotmat";
|
||
import Counter from "@/components/counter";
|
||
import ReasonPopup from "./components/reasonPopup";
|
||
import OtherReason from "./components/otherReason";
|
||
import Taro from "@tarojs/taro";
|
||
import useUploadCDNImg from "@/use/useUploadImage";
|
||
|
||
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
|
||
export default () => {
|
||
const [showDesc, setShowDesc] = useState(true)
|
||
|
||
//退货选择弹窗
|
||
const [showReason, setShowReason] = useState<{show:true|false, status:ReasonParam}>({show:false, status:1})
|
||
const closeReason = useCallback(() => setShowReason({...showReason, show:false}), [])
|
||
const onShowReason = (status) => setShowReason({...showReason, status, show:true})
|
||
|
||
|
||
|
||
//底部按钮
|
||
const onSubmit = (val) => {
|
||
|
||
}
|
||
|
||
return (
|
||
<View className={styles.apply_after_sales_main}>
|
||
<View className={styles.apply_after_sales_con}>
|
||
<View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
|
||
<ScrollView scrollY className={styles.scroll}>
|
||
<View className={styles.scroll_con}>
|
||
<View className={styles.apply_after_sales_list}>
|
||
<View className={styles.apply_after_sales_item}>
|
||
<View className={styles.apply_after_sales_title}>
|
||
<View className={styles.tag}>大货</View>
|
||
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
|
||
</View>
|
||
<View className={styles.color_list}>
|
||
<View className={styles.color_item}>
|
||
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
|
||
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
|
||
<View className={styles.btn_count}>
|
||
<Counter/>
|
||
</View>
|
||
</View>
|
||
<View className={styles.color_item}>
|
||
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
|
||
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
|
||
<View className={styles.btn_count}>
|
||
<Counter/>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles.apply_after_sales_item}>
|
||
<View className={styles.apply_after_sales_title}>
|
||
<View className={styles.tag}>大货</View>
|
||
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
|
||
</View>
|
||
<View className={styles.color_list}>
|
||
<View className={styles.color_item}>
|
||
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
|
||
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
|
||
<View className={styles.btn_count}>
|
||
<Counter/>
|
||
</View>
|
||
</View>
|
||
<View className={styles.color_item}>
|
||
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
|
||
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
|
||
<View className={styles.btn_count}>
|
||
<Counter/>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className={styles.returnSaleInput}>
|
||
<View className={styles.returnSaleInput_item}>
|
||
<View className={styles.title}>退货原因</View>
|
||
<View className={styles.select} onClick={() => onShowReason(1)}>
|
||
<Text>请选择</Text>
|
||
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
|
||
</View>
|
||
</View>
|
||
<View className={styles.returnSaleInput_item}>
|
||
<View className={styles.title}>货物状况</View>
|
||
<View className={styles.select} onClick={() => onShowReason(2)}>
|
||
<Text>请选择</Text>
|
||
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
|
||
</View>
|
||
</View>
|
||
<View className={styles.returnSaleInput_item}>
|
||
<View className={styles.title}>退货说明</View>
|
||
<View className={styles.select} onClick={() => onShowReason(3)}>
|
||
<Text>请选择</Text>
|
||
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
|
||
</View>
|
||
</View>
|
||
<View className={styles.returnSaleInput_item}>
|
||
<View className={styles.title}>拍照上传</View>
|
||
<PictureItem/>
|
||
|
||
</View>
|
||
</View>
|
||
<OtherReason/>
|
||
</View>
|
||
</ScrollView>
|
||
<View className="common_safe_area_y"></View>
|
||
</View>
|
||
<View className={styles.btns_con}>
|
||
<View className={styles.btns_two}>
|
||
<View className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
|
||
<View className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
|
||
</View >
|
||
</View >
|
||
<ReasonPopup show={showReason.show} onClose={closeReason} status={showReason.status}/>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
//图片列表
|
||
const PictureItem = memo(() => {
|
||
const {uploadCDNImg} = useUploadCDNImg()
|
||
|
||
//图片
|
||
const uploadImage = () => {
|
||
Taro.chooseImage({
|
||
count: 1, // 默认9
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: function (res) {
|
||
const file = res.tempFiles[0]
|
||
uploadCDNImg(file, 'product', 'product')
|
||
}
|
||
})
|
||
}
|
||
return (
|
||
<>
|
||
<View className={styles.ImgItem}>
|
||
<Image mode="aspectFill" src={formatImgUrl('')} ></Image>
|
||
<View 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>
|
||
</>
|
||
)
|
||
})
|