xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

售后申请页面完成

Browse Source
This commit is contained in:
cheng
2022-06-09 17:07:00 +08:00
parent a52c73a95d
commit 30efe70995
16 changed files with 302 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/applyAfterSales/index.module.scss
-227
View File
@@ -1,227 +0,0 @@
.apply_after_sales_main{
.apply_after_sales_head{
font-size: 30px;
text-align: center;
padding: 20px 0;
font-weight: 700;
}
.kind_number{
width: 100%;
padding: 20px;
box-sizing: border-box;
text{
background-color: #F6F6F6;
border-radius: 10px;
font-size: $font_size_medium;
padding: 5px 0;
text-align: center;
width: 100%;
display: block;
color: $color_font_three;
}
}
.apply_after_sales_con{
height: 80vh;
.scroll{
height: calc(100% - 170px);
}
.returnSaleInput{
margin: 0 20px;
padding-top: 30px;
border-top: 1px solid #F6F6F6;
.returnSaleInput_item{
display: flex;
align-items: center;
padding-bottom: 20px;
flex-wrap: wrap;
.title{
font-size: $font_size;
font-weight: 700;
width: 119px;
}
.select{
flex:1;
height: 60px;
border: 2px solid #e6e6e6;
border-radius: 10px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 26px;
color: $color_font_two;
.miconfont{
font-size: 30px;
}
}
.uploadImg{
width: 202px;
height: 150px;
background: #f0f0f0;
border: 2px dashed #cccccc;
margin-left: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin-bottom: 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: 30px;
height: 30px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
right: -10px;
top: -10px;
text-align: center;
line-height: 30px;
color: #fff;
}
}
}
}
.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{
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;
}
}
}
.apply_after_sales_list{
padding: 0 20px;
.apply_after_sales_item{
margin-bottom: 30px;
.apply_after_sales_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
}
.color_list {
.color_item{
display: flex;
align-items: center;
margin: 20px 0;
}
.image{
width: 70px;
height: 70px;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.name_and_number{
padding-left: 30px;
flex:1;
text{
&:nth-child(1) {
font-weight: 700;
font-size: $font_size;
}
&:nth-child(2) {
color: $color_font_two;
font-size: $font_size;
margin-left: 20px;
}
}
}
.btn_count{
width: 235px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
}
}
.reason_return_con{
.reason_title{
padding: 10px 20px 0 20px;
height: 60px;
border-bottom: 1PX solid #F3F3F3;
box-sizing: border-box;
Text{
font-size: 26px;
border-bottom: 3px solid #000;
padding: 10px;
font-weight: 400;
}
}
.reason_scroll{
}
}
}
src/pages/order/components/applyAfterSales/index.tsx
-159
View File
@@ -1,159 +0,0 @@
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
import { memo, useCallback, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import Popup from "@/components/popup";
import { formatImgUrl } from "@/common/fotmat";
import Counter from "@/components/counter";
export default memo(() => {
const [showDesc, setShowDesc] = useState(true)
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200
})
const getDesc = useCallback((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})
},[])
return (
<View className={styles.apply_after_sales_main}>
<Popup showIconButton={true} show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<View className={styles.apply_after_sales_con}>
<View className={styles.apply_after_sales_head}>申请退货</View>
<View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
<ScrollView scrollY className={styles.scroll}>
<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}>
<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}>
<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}>
<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 className={styles.uploadImg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
<Text className={styles.uploadText}>上传照片</Text>
</View>
</View>
</View>
<View className={styles.other_desc}>
<View className={styles.title}>其他说明</View>
<View className={styles.textarea}>
<Textarea placeholder="一般情况下选填，当退货说明=“其它问题”时，必填" cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
</View>
</View>
<View className="common_safe_area_y"></View>
</ScrollView>
</View>
</Popup>
<Popup showIconButton={false} show={showDesc} title="申请退货" onClose={() => setShowDesc(false)} >
<View className={styles.reason_return_con}>
<View className={styles.reason_title}><Text>货物状况</Text></View>
<ScrollView scrollY className={styles.reason_scroll}>
<View className={styles.reason_list}>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
</View>
</ScrollView>
</View>
</Popup>
</View>
)
})
//图片列表
const PictureItem = memo(() => {
return (
<>
<View className={styles.ImgItem}>
<Image mode="aspectFill" src={formatImgUrl('')} ></Image>
<View className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
</View>
</>
)
})
//其他说明
src/pages/order/index.tsx
-2
View File
@@ -16,7 +16,6 @@ import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import order from "../orderList/components/order";
import AddressInfoDetail from "./components/addressInfoDetail";
import ApplyAfterSales from "./components/applyAfterSales";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Payment from "./components/payment";
@@ -226,7 +225,6 @@ import styles from './index.module.scss'
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
<ApplyAfterSales/>
<View className="common_safe_area_y"></View>
</View>
)