|
@@ -1,109 +1,187 @@
|
1
|
|
-import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
|
2
|
|
-import Taro from '@tarojs/taro'
|
3
|
|
-import { Button, Icon, Text, Textarea } from '@tarojs/components'
|
|
1
|
+import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
|
|
2
|
+import Taro from "@tarojs/taro";
|
|
3
|
+import { Button, Icon, Text, Textarea } from "@tarojs/components";
|
4
|
4
|
|
5
|
|
-import { useState } from 'react'
|
6
|
|
-import withLayout from '@/layouts'
|
|
5
|
+import { useState,useEffect } from "react";
|
|
6
|
+import withLayout from "@/layouts";
|
|
7
|
+import { getOrderSub } from "@/services/payOrder";
|
|
8
|
+import image from "@/assets/icons/ProCard/8kb.jpg";
|
|
9
|
+import food from "@/assets/icons/ProCard/food.png";
|
|
10
|
+import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
|
|
11
|
+import CustomNav from "@/components/CustomNav";
|
|
12
|
+import "./style.less";
|
|
13
|
+import formatTime from "@/utils/formatTime";
|
7
|
14
|
|
8
|
|
-import image from '@/assets/icons/ProCard/8kb.jpg'
|
9
|
|
-import food from '@/assets/icons/ProCard/food.png'
|
10
|
|
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
|
11
|
|
-import CustomNav from '@/components/CustomNav'
|
12
|
|
-import './style.less'
|
13
|
15
|
|
14
|
16
|
export default withLayout((props) => {
|
15
|
|
- const [view, setView] = useState(true)
|
16
|
|
- const [view2, setView2] = useState(false)
|
17
|
|
- const [view3, setView3] = useState(false)
|
18
|
|
- const [view4, setView4] = useState(false)
|
19
|
|
- const [view5, setView5] = useState(false)
|
20
|
|
- const [view6, setView6] = useState(false)
|
21
|
|
- const { router, person } = props
|
22
|
|
-
|
23
|
|
- let value = view
|
24
|
|
- let list = [
|
25
|
|
- {
|
26
|
|
- className: `Refund-star-view4 ${!value ? 'bg2' : 'Refund-star-view2'}`,
|
27
|
|
- name: '预约不上',
|
28
|
|
- value: false,
|
29
|
|
- }
|
30
|
|
- ]
|
|
17
|
+ const { router, person } = props;
|
|
18
|
+ const { id } = props.router.params;
|
|
19
|
+ const [view, setView] = useState(true);
|
|
20
|
+ const [view2, setView2] = useState(false);
|
|
21
|
+ const [view3, setView3] = useState(false);
|
|
22
|
+ const [view4, setView4] = useState(false);
|
|
23
|
+ const [view5, setView5] = useState(false);
|
|
24
|
+ const [view6, setView6] = useState(false);
|
|
25
|
+
|
|
26
|
+ const [list, setList] = useState([]);
|
|
27
|
+ // 总价 totalPrice
|
|
28
|
+ const [totalPrice, setTotalPrice] = useState({});
|
|
29
|
+
|
|
30
|
+ const getData = (orderId) => {
|
|
31
|
+ Taro.showLoading();
|
|
32
|
+ getOrderSub({
|
|
33
|
+ pageNum: 1,
|
|
34
|
+ pageSize: 50,
|
|
35
|
+ orderId: orderId,
|
|
36
|
+ }).then((res) => {
|
|
37
|
+ setList(res.records);
|
|
38
|
+ Taro.hideLoading();
|
|
39
|
+ });
|
|
40
|
+ };
|
|
41
|
+
|
|
42
|
+ useEffect(() => {
|
|
43
|
+ getData(id);
|
|
44
|
+ }, []);
|
31
|
45
|
|
32
|
46
|
const viewOK = () => {
|
33
|
|
- setView(!view)
|
34
|
|
- }
|
|
47
|
+ setView(!view);
|
|
48
|
+ };
|
35
|
49
|
|
36
|
50
|
const view2OK = () => {
|
37
|
|
- setView2(!view2)
|
38
|
|
- }
|
|
51
|
+ setView2(!view2);
|
|
52
|
+ };
|
39
|
53
|
|
40
|
54
|
const view3OK = () => {
|
41
|
|
- setView3(!view3)
|
42
|
|
- }
|
|
55
|
+ setView3(!view3);
|
|
56
|
+ };
|
43
|
57
|
|
44
|
58
|
const view4OK = () => {
|
45
|
|
- setView4(!view4)
|
46
|
|
- }
|
|
59
|
+ setView4(!view4);
|
|
60
|
+ };
|
47
|
61
|
const view5OK = () => {
|
48
|
|
- setView5(!view5)
|
49
|
|
- }
|
|
62
|
+ setView5(!view5);
|
|
63
|
+ };
|
50
|
64
|
|
51
|
65
|
const view6OK = () => {
|
52
|
|
- setView6(!view6)
|
53
|
|
- }
|
54
|
|
-
|
55
|
|
-
|
|
66
|
+ setView6(!view6);
|
|
67
|
+ };
|
|
68
|
+
|
|
69
|
+ useEffect(() => {
|
|
70
|
+ let total = {
|
|
71
|
+ cashback: 0, //已获返现
|
|
72
|
+ charges: 0, //实付金额
|
|
73
|
+ refundPrice: 0, //退款金额
|
|
74
|
+ };
|
|
75
|
+ list.map((x) => {
|
|
76
|
+ total.cashback += x.cashback ;
|
|
77
|
+ total.charges += x.charges;
|
|
78
|
+ total.refundPrice += x.charges - x.cashback;
|
|
79
|
+ });
|
|
80
|
+ setTotalPrice(total);
|
|
81
|
+ }, [list]);
|
56
|
82
|
|
57
|
83
|
return (
|
58
|
|
-
|
59
|
|
- <view className='box-content'>
|
60
|
|
- <CustomNav title='售后退款' />
|
61
|
|
- <view className='Refund-Content-box'>
|
62
|
|
- <view className='title-image'>
|
63
|
|
- <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
|
64
|
|
- <text className='title-title-boss' >商品信息</text>
|
|
84
|
+ <view className="box-content">
|
|
85
|
+ <CustomNav title="售后退款" />
|
|
86
|
+ <view className="Refund-Content-box">
|
|
87
|
+ <view className="title-image">
|
|
88
|
+ <image
|
|
89
|
+ mode="scaleToFill"
|
|
90
|
+ className="title-image-cup"
|
|
91
|
+ src={BlackSpot}
|
|
92
|
+ />
|
|
93
|
+ <text className="title-title-boss">商品信息</text>
|
65
|
94
|
</view>
|
66
|
95
|
</view>
|
67
|
96
|
{/* 商品信息结束 */}
|
68
|
|
- <view class='wrapper'>
|
69
|
|
- <view class='left-complete-one'>
|
70
|
|
- <image className='left-image-1' src={ProCard_hot}></image>
|
71
|
|
- <view className='left-viewText'>
|
72
|
|
- 返现¥16.00
|
73
|
|
- </view>
|
74
|
|
- <view className='title-image'>
|
75
|
|
- <image className='image-1' mode='scaleToFill' src={image}></image>
|
76
|
|
- <image className='image-2' src={food}></image>
|
77
|
|
- </view>
|
78
|
|
- <view className='title-content'>
|
79
|
|
- <view className='Pro-title'>
|
80
|
|
- <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量:1张</text></view>
|
81
|
|
-
|
|
97
|
+ <view>
|
|
98
|
+ {list?.map((item) => {
|
|
99
|
+ return (
|
|
100
|
+ <view class="wrapper" key={item.orderId}>
|
|
101
|
+ <view class="left-complete-one">
|
|
102
|
+ <image className="left-image-1" src={ProCard_hot}></image>
|
|
103
|
+ <view className="left-viewText">返现¥{item.cashback/100}</view>
|
|
104
|
+ <view className="title-image">
|
|
105
|
+ <image
|
|
106
|
+ className="image-1"
|
|
107
|
+ mode="scaleToFill"
|
|
108
|
+ src={item.poster}
|
|
109
|
+ ></image>
|
|
110
|
+ <image className="image-2" src={food}></image>
|
|
111
|
+ </view>
|
|
112
|
+ <view className="title-content">
|
|
113
|
+ <view className="Pro-title">
|
|
114
|
+ <view className="title-text">
|
|
115
|
+ {item.packageDescription}
|
|
116
|
+ <text className="title-money-2">数量:{item.amount}张</text>
|
|
117
|
+ </view>
|
|
118
|
+ </view>
|
|
119
|
+ <text className="title-money">
|
|
120
|
+ ¥{item.unitPrice/100}元<text className="title-money-2">门市价{item.standardPrice/100}元</text>
|
|
121
|
+ </text>
|
|
122
|
+ <view className="title-time">
|
|
123
|
+ 有效期:{formatTime(item?.startTime, "yyyy/MM/dd")}-
|
|
124
|
+ {formatTime(item.endTime, "yyyy/MM/dd")}
|
|
125
|
+ </view>
|
|
126
|
+ </view>
|
|
127
|
+ </view>
|
|
128
|
+ <view class="right-complete-two">
|
|
129
|
+ <view className="right-content"></view>
|
|
130
|
+ </view>
|
82
|
131
|
</view>
|
83
|
|
- <text className='title-money' >¥6990元<text className='title-money-2'>门市价78元</text></text>
|
84
|
|
- <view className='title-time' >有效期:2021/06/21-2021/12/31</view>
|
85
|
|
- </view>
|
86
|
|
- </view>
|
87
|
|
- <view class='right-complete-two'>
|
88
|
|
- <view className='right-content'>
|
89
|
|
- </view>
|
90
|
|
- </view>
|
|
132
|
+ );
|
|
133
|
+ })}
|
91
|
134
|
</view>
|
|
135
|
+
|
92
|
136
|
{/* 卡片结束 */}
|
93
|
|
- <view className='Refund-Content-box'>
|
94
|
|
- <view className='title-image'>
|
95
|
|
- <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
|
96
|
|
- <text className='title-title-boss' >退款原因</text>
|
|
137
|
+ <view className="Refund-Content-box">
|
|
138
|
+ <view className="title-image">
|
|
139
|
+ <image
|
|
140
|
+ mode="scaleToFill"
|
|
141
|
+ className="title-image-cup"
|
|
142
|
+ src={BlackSpot}
|
|
143
|
+ />
|
|
144
|
+ <text className="title-title-boss">退款原因</text>
|
97
|
145
|
</view>
|
98
|
146
|
{/* 退款结束 */}
|
99
|
147
|
</view>
|
100
|
|
- <view className='Refund-content'>
|
101
|
|
- <text className={`Refund-star-view ${view ? 'bg2' : 'Refund-star-view'}`} onClick={() => viewOK()} >计划有变,没时间消费</text>
|
102
|
|
- <text className={`Refund-star-view2 ${view2 ? 'bg2' : 'Refund-star-view2'}`} onClick={() => view2OK()} >误认为是外卖</text>
|
103
|
|
- <text className={`Refund-star-view3 ${view3 ? 'bg2' : 'Refund-star-view3'}`} onClick={() => view3OK()} >没看清楚使用规则,要用时才发现限制很多</text>
|
104
|
|
- <text className={`Refund-star-view4 ${view4 ? 'bg2' : 'Refund-star-view4'}`} onClick={() => view4OK()} >预约不上</text>
|
105
|
|
- <text className={`Refund-star-view5 ${view5 ? 'bg2' : 'Refund-star-view5'}`} onClick={() => view5OK()} >店里更优惠</text>
|
106
|
|
- <text className={`Refund-star-view6 ${view6 ? 'bg2' : 'Refund-star-view6'}`} onClick={() => view6OK()} >网友/朋友评价不好</text>
|
|
148
|
+ <view className="Refund-content">
|
|
149
|
+ <text
|
|
150
|
+ className={`Refund-star-view ${view ? "bg2" : "Refund-star-view"}`}
|
|
151
|
+ onClick={() => viewOK()}
|
|
152
|
+ >
|
|
153
|
+ 计划有变,没时间消费
|
|
154
|
+ </text>
|
|
155
|
+ <text
|
|
156
|
+ className={`Refund-star-view2 ${view2 ? "bg2" : "Refund-star-view2"}`}
|
|
157
|
+ onClick={() => view2OK()}
|
|
158
|
+ >
|
|
159
|
+ 误认为是外卖
|
|
160
|
+ </text>
|
|
161
|
+ <text
|
|
162
|
+ className={`Refund-star-view3 ${view3 ? "bg2" : "Refund-star-view3"}`}
|
|
163
|
+ onClick={() => view3OK()}
|
|
164
|
+ >
|
|
165
|
+ 没看清楚使用规则,要用时才发现限制很多
|
|
166
|
+ </text>
|
|
167
|
+ <text
|
|
168
|
+ className={`Refund-star-view4 ${view4 ? "bg2" : "Refund-star-view4"}`}
|
|
169
|
+ onClick={() => view4OK()}
|
|
170
|
+ >
|
|
171
|
+ 预约不上
|
|
172
|
+ </text>
|
|
173
|
+ <text
|
|
174
|
+ className={`Refund-star-view5 ${view5 ? "bg2" : "Refund-star-view5"}`}
|
|
175
|
+ onClick={() => view5OK()}
|
|
176
|
+ >
|
|
177
|
+ 店里更优惠
|
|
178
|
+ </text>
|
|
179
|
+ <text
|
|
180
|
+ className={`Refund-star-view6 ${view6 ? "bg2" : "Refund-star-view6"}`}
|
|
181
|
+ onClick={() => view6OK()}
|
|
182
|
+ >
|
|
183
|
+ 网友/朋友评价不好
|
|
184
|
+ </text>
|
107
|
185
|
{/*
|
108
|
186
|
<view>
|
109
|
187
|
{
|
|
@@ -117,34 +195,46 @@ export default withLayout((props) => {
|
117
|
195
|
</view> */}
|
118
|
196
|
</view>
|
119
|
197
|
|
120
|
|
- <view className='Refund-Content-box'>
|
121
|
|
- <view className='title-image'>
|
122
|
|
- <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
|
123
|
|
- <text className='title-title-boss' >退款说明</text>
|
|
198
|
+ <view className="Refund-Content-box">
|
|
199
|
+ <view className="title-image">
|
|
200
|
+ <image
|
|
201
|
+ mode="scaleToFill"
|
|
202
|
+ className="title-image-cup"
|
|
203
|
+ src={BlackSpot}
|
|
204
|
+ />
|
|
205
|
+ <text className="title-title-boss">退款说明</text>
|
124
|
206
|
</view>
|
125
|
207
|
</view>
|
126
|
|
- <view class='section'>
|
127
|
|
- <Textarea placeholder='请补充退款说明(选填)!' confirm-type='done' />
|
|
208
|
+ <view class="section">
|
|
209
|
+ <Textarea placeholder="请补充退款说明(选填)!" confirm-type="done" />
|
|
210
|
+ </view>
|
|
211
|
+ <view className="money-title">
|
|
212
|
+ 实付金额: <text className="money-name">{totalPrice.charges/100}元</text>
|
|
213
|
+ </view>
|
|
214
|
+ <view className="money-title">
|
|
215
|
+ 已获返现: <text className="money-name">{totalPrice.cashback/100}元</text>
|
|
216
|
+ </view>
|
|
217
|
+ <view className="money-title">
|
|
218
|
+ 退款金额: <text className="money-name">{totalPrice.refundPrice/100}元</text>
|
128
|
219
|
</view>
|
129
|
|
- <view className='money-title' >实付金额: <text className='money-name' >58元</text></view>
|
130
|
|
- <view className='money-title' >已获返现: <text className='money-name' >1.88元</text></view>
|
131
|
|
- <view className='money-title' >退款金额: <text className='money-name' >56.12元</text></view>
|
132
|
|
- <view className='ul-li-text'>
|
133
|
|
- <view className='ul-li-view' ></view>
|
134
|
|
- <text className='ul-li-textname'>退款金额不可修改</text>
|
|
220
|
+ <view className="ul-li-text">
|
|
221
|
+ <view className="ul-li-view"></view>
|
|
222
|
+ <text className="ul-li-textname">退款金额不可修改</text>
|
135
|
223
|
</view>
|
136
|
|
- <view className='ul-li-text'>
|
137
|
|
- <view className='ul-li-view' ></view>
|
138
|
|
- <text className='ul-li-textname'>下单获得返现金额,会在退款时被扣除;</text>
|
|
224
|
+ <view className="ul-li-text">
|
|
225
|
+ <view className="ul-li-view"></view>
|
|
226
|
+ <text className="ul-li-textname">
|
|
227
|
+ 下单获得返现金额,会在退款时被扣除;
|
|
228
|
+ </text>
|
139
|
229
|
</view>
|
140
|
|
- <view className='ul-li-text'>
|
141
|
|
- <view className='ul-li-view' ></view>
|
142
|
|
- <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
|
|
230
|
+ <view className="ul-li-text">
|
|
231
|
+ <view className="ul-li-view"></view>
|
|
232
|
+ <text className="ul-li-textname">退款将在七个工作日内原路退还。</text>
|
143
|
233
|
</view>
|
144
|
234
|
|
145
|
|
- <view className='button-info'>
|
146
|
|
- <Button className='button-box'>提交申请</Button>
|
|
235
|
+ <view className="button-info">
|
|
236
|
+ <Button className="button-box">提交申请</Button>
|
147
|
237
|
</view>
|
148
|
238
|
</view>
|
149
|
|
- )
|
150
|
|
-})
|
|
239
|
+ );
|
|
240
|
+});
|