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

✨ feat:售后模块100%

Browse Source
This commit is contained in:
Haiyi
2022-09-22 15:11:16 +08:00
parent ed77fdda0b
commit d2a1441810
15 changed files with 585 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/applyMoney/index.config.ts
+4
View File
@@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '申请退款',
enableShareAppMessage: true,
}
src/pages/applyMoney/index.module.scss
+284
View File
@@ -0,0 +1,284 @@
.main {}
.resonBig {
overflow: hidden;
margin: 24px;
background: #FFFFFF;
border-radius: 16px;
.reasonItem {
display: flex;
align-items: center;
margin: 32px;
padding-bottom: 32px;
justify-content: space-between;
.reasonLeft {
display: flex;
align-items: center;
.reasonFont {
font-size: 28px;
font-weight: 500;
color: #000000;
}
.xing {
font-size: 28px;
font-weight: 500;
color: #E42945;
}
.selectFont {
font-size: 28px;
font-weight: 400;
color: #000000;
margin-left: 40px;
}
}
.chakanquanbukehu {
font-size: 50px;
}
}
}
.descBox {
margin: 32px;
background: #FFFFFF;
border-radius: 16px 16px 0px 0px;
overflow: hidden;
.title {
font-size: 28px;
font-weight: 500;
color: #000000;
margin-top: 24px;
margin-left: 32px;
}
.textBox {
padding-top: 15px;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
margin-right: 32px;
margin-top: 24px;
margin-left: 32px;
height: 210px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-weight: 400;
color: #000000;
margin-bottom: 32px;
}
}
.bottomBox {
width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
padding-top: 16px;
justify-content: space-between;
.resetBox {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087EFF;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
text-align: center;
line-height: 80px;
}
.button {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.activeButton {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
.safeBox {
height: 160px;
width: 100%;
}
.popupBox {
padding-bottom: env(safe-area-inset-bottom);
.thirdBox {
margin-top: 20px;
padding-left: 48px;
.thirdTopfont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.timeBox2 {
margin-top: 24px;
background-color: #f6f6f6;
height: 68px;
background: #E9E9E9;
border-radius: 8px;
margin-right: 48px;
text-align: center;
line-height: 68px;
position: relative;
font-size: 28px;
font-weight: 400;
color: #000000;
.more {
position: absolute;
right: 30px;
top: 5px;
font-size: 40px;
}
}
.flexModebox {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
.activemodeBox {
margin-bottom: 16px;
margin-right: 16px;
// width: 152px;
// height: 68px;
padding: 17px 34px 17px 34px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
// line-height: 68px;
border: 1px solid #337FFF;
box-sizing: border-box;
}
.modeBox {
margin-bottom: 16px;
margin-right: 16px;
padding: 17px 34px 17px 34px;
// width: 152px;
// height: 68px;
background: #f6f6f6;
border-radius: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
border: 1px solid #f6f6f6;
text-align: center;
// line-height: 68px;
box-sizing: border-box;
// opacity: 0.4;
}
}
}
.bottomBox1 {
width: 750px;
height: 160px;
background: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
padding-top: 16px;
justify-content: space-between;
.resetBox1 {
margin-left: 48px;
width: 311px;
height: 80px;
border-radius: 44px;
border: 1px solid #087EFF;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
text-align: center;
line-height: 80px;
}
.button1 {
margin-right: 32px;
width: 311px;
height: 80px;
background: #68b4ff;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.activeButton1 {
margin-right: 32px;
width: 311px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
// .areaBox {
// height: calc($customTabBarHeight + env(safe-area-inset-bottom));
// width: 100%;
// }
}
src/pages/applyMoney/index.tsx
+206
View File
@@ -0,0 +1,206 @@
import { View, Input, Button, Image, Text, Textarea } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, ReactNode, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { faceVerifyForPay, useDidShow, useRouter } from '@tarojs/taro'
import { formatDateTime, formatHashTag, formatImgUrl, formatPriceDiv, formatWeightDiv } from '@/common/format'
import {
mpreturnApplyOrder,
mpenumrefundExplainone,
} from "@/api/order"
import Popup from '@/components/popup'
export default () => {
useEffect(() => {
getEnum()
}, [])
const Router = useRouter()
//获取枚举
const [List, setList] = useState<any[]>([])
const { fetchData: explanFetch } = mpenumrefundExplainone()
const getEnum = async () => {
const res = await explanFetch()
if (res.data) {
setList(res.data.list)
}
}
//选择退货原因
const handReasonOne = (item) => {
List.map(it => {
if (it.id === item.id) {
it.default = true
} else {
it.default = false
}
return it
})
setList([...List])
setQuery((val) => ({ ...val, reasonId: item.id }))
queryRef.current.reasonName = item.name
}
//筛选内容展示
const [showPopup, setshowPopup] = useState(false)
const queryRef = useRef({
reasonName: '请选择'
})
const [Query, setQuery] = useState<any>({
reasonId: '',
reasonName: '请选择'
})
//备注信息
const [TextareaValue, setTextareaValue] = useState('')
const getDesc = (e) => {
setTextareaValue(e)
}
//取消返回
const handCancl = () => {
Taro.navigateBack({
delta: 1
})
}
//确认选择
const handSlect = () => {
setQuery((val) => ({ ...val, reasonName: queryRef.current.reasonName }))
setshowPopup(false)
}
//重置
const handReset = () => {
setQuery(({ reasonId: '', reasonName: '请选择' }))
queryRef.current.reasonName = '请选择'
const arrOne = resetArr(List)
setList([...arrOne])
}
//判断是否允许提交
const isDisabled = useMemo(() => {
if (Query.reasonId !== '') {
return false
} else {
return true
}
}, [Query])
//数组重置
const resetArr = (arr) => {
arr.map(it => {
it.default = false
return it
})
return arr
}
//确认退款
const { fetchData: sureFetch } = mpreturnApplyOrder()
const handSure = () => {
const query = {
reason_describe: TextareaValue,
fabric_piece_accessory_url: [],
goods_status: 100,
return_explain: Query.reasonId,
roll: 0,
roll_list: [],
sale_order_id: Number(Router.params.orderId),
};
Taro.showModal({
content: "确认退款吗？",
confirmText: "确认",
cancelText: "取消",
success: async function (res) {
if (res.confirm) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await sureFetch(query)
if (res?.msg === 'success') {
Taro.showToast({
title: '成功'
})
Taro.hideLoading()
handCancl()
} else {
Taro.hideLoading()
Taro.showToast({
title: res?.msg,
icon: 'error'
})
}
}
}
})
}
return (
<View className={styles.main}>
<View className={styles.resonBig}>
<View className={styles.reasonItem} onClick={() => { setshowPopup(true) }}>
<View className={styles.reasonLeft}>
<View className={styles.reasonFont}>退货原因</View>
<Text className={styles.xing}>*</Text>
{
Query.reasonName === '请选择' && <View className={styles.selectFont}>请选择</View>
}
{
Query.reasonName !== '请选择' && <View className={styles.selectFont}>{Query.reasonName}</View>
}
</View>
<View className={classnames('iconfont', 'icon-chakanquanbukehu', styles.chakanquanbukehu)}></View>
</View>
</View>
<View className={styles.descBox}>
<View className={styles.title}>其他说明</View>
<View className={styles.textBox}>
<Textarea
onInput={(e) => getDesc(e.detail.value)}
value={TextareaValue}
// style='background:#f6f6f6;height:210px;padding:15rpx 24rpx 24rpx 24rpx;border-radius: 8rpx;'
placeholderStyle='font-size: 28rpx;font-weight: 400;'
autoFocus
placeholder={'选填/退货说明中选择时（其他问题）必填'}
></Textarea>
</View>
</View>
<View className={styles.safeBox}>
<View className={styles.bottomBox}>
<Button className={styles.resetBox} onClick={() => { handCancl() }}> 取消</Button >
<Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => handSure()}> 确认退款</Button >
</View>
</View>
<Popup title={'筛选情况'} show={showPopup} onClose={() => { setshowPopup?.(false) }}>
<View className={styles.popupBox}>
<View className={styles.thirdBox}>
<View className={styles.thirdTopfont}>退款原因</View>
<View className={styles.flexModebox}>
{
List.map((item, index) => {
return (
<View onClick={() => { handReasonOne(item) }} className={classnames(item.default ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
)
})
}
</View>
</View>
<View style={{ height: '100rpx' }}></View>
<View className={styles.bottomBox1}>
<Button className={styles.resetBox1} onClick={() => { handReset() }}> 重置</Button >
<Button className={classnames(isDisabled ? styles.button1 : styles.activeButton1)} disabled={isDisabled} onClick={() => handSlect()}> 确认</Button >
</View>
</View>
</Popup>
</View>
)
}