订单售后
This commit is contained in:
@@ -116,6 +116,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
|
||||
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||
<AddressList onSelect={getAddress}/>
|
||||
</View>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -22,55 +22,155 @@
|
||||
}
|
||||
}
|
||||
.apply_after_sales_con{
|
||||
padding: 0 20px;
|
||||
.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;
|
||||
}
|
||||
height: 80vh;
|
||||
.scroll{
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.color_list {
|
||||
.color_item{
|
||||
.returnSaleInput{
|
||||
margin: 0 20px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid #F6F6F6;
|
||||
.returnSaleInput_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.image{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
padding-bottom: 20px;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
.miconfont{
|
||||
font-size: 50px;
|
||||
}
|
||||
.uploadText{
|
||||
font-size: 26px;
|
||||
color: $color_font_three;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.other_desc{
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.uploadImg{
|
||||
position: relative;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Image, Text, View } from "@tarojs/components";
|
||||
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
|
||||
import { memo, useState } from "react";
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
@@ -10,32 +10,98 @@ export default memo(() => {
|
||||
const [showDesc, setShowDesc] = useState(true)
|
||||
return (
|
||||
<View className={styles.apply_after_sales_main}>
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||
<View className={styles.apply_after_sales_head}>申请退货</View>
|
||||
<View className={styles.kind_number}><Text>2种面料,3种颜色,共6条</Text></View>
|
||||
<Popup showIconButton={true} show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||
<View className={styles.apply_after_sales_con}>
|
||||
<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.count}>
|
||||
<Counter/>
|
||||
<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.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.count}>
|
||||
<Counter/>
|
||||
<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>
|
||||
<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.uploadImg}>
|
||||
<Textarea placeholder="一般情况下选填,当退货说明=“其它问题”时,必填" cursorSpacing={100}></Textarea>
|
||||
<View className={styles.descDataNum}>0/100</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -226,7 +226,7 @@ import styles from './index.module.scss'
|
||||
<Remark onSave={(e) => getRemark(e)}/>
|
||||
</Popup>
|
||||
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
|
||||
{/* <ApplyAfterSales/> */}
|
||||
<ApplyAfterSales/>
|
||||
<View className="common_safe_area_y"></View>
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user