李志伟 3 years ago
parent
commit
64418bb719
3 changed files with 49 additions and 89 deletions
  1. 1
    0
      src/pages/PayOrder/Card/style.less
  2. 15
    26
      src/pages/PayOrder/index.jsx
  3. 33
    63
      src/pages/PayOrder/style.less

+ 1
- 0
src/pages/PayOrder/Card/style.less View File

18
     background-repeat: no-repeat;
18
     background-repeat: no-repeat;
19
     border-radius: 15px 0px 0px 15px;
19
     border-radius: 15px 0px 0px 15px;
20
     align-items: center;
20
     align-items: center;
21
+    width: 100%;
21
     .left-image-1-payOrder {
22
     .left-image-1-payOrder {
22
       width: 145px;
23
       width: 145px;
23
       height: 44px;
24
       height: 44px;

+ 15
- 26
src/pages/PayOrder/index.jsx View File

4
 import { saveOrder, getOrderSub, payOrder } from "@/services/payOrder";
4
 import { saveOrder, getOrderSub, payOrder } from "@/services/payOrder";
5
 import { useState, useEffect } from "react";
5
 import { useState, useEffect } from "react";
6
 import formatPrice from "@/utils/formatPrice";
6
 import formatPrice from "@/utils/formatPrice";
7
-
8
-import { Button, Checkbox, Input, RadioGroup, Radio } from "@tarojs/components";
7
+import { Button, Input, Radio, Text, View } from "@tarojs/components";
9
 import AuthPage from '@/components/AuthPage'
8
 import AuthPage from '@/components/AuthPage'
10
-import food from "@/assets/icons/ProCard/food.png";
11
-import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
12
 import CustomNav from "@/components/CustomNav";
9
 import CustomNav from "@/components/CustomNav";
13
 import OrderMolded from "@/components/OrderMolded";
10
 import OrderMolded from "@/components/OrderMolded";
14
 import Popup from "@/components/Popup";
11
 import Popup from "@/components/Popup";
12
+import Card from "./Card";
15
 import "./style.less";
13
 import "./style.less";
16
 
14
 
17
-import Card from "./Card";
18
 
15
 
19
 export default withLayout((props) => {
16
 export default withLayout((props) => {
20
   //#region 
17
   //#region 
188
     setTotalPrice(total);
185
     setTotalPrice(total);
189
   }, [list]);
186
   }, [list]);
190
 
187
 
191
-  //#endregion
192
   return (
188
   return (
193
     !person.phone ? <AuthPage /> :
189
     !person.phone ? <AuthPage /> :
194
       <view class='container'>
190
       <view class='container'>
195
-        <CustomNav title='订单' />
191
+        <view className='index-navbar'>
192
+          <CustomNav title='订单' />
193
+        </view>
196
         <Popup show={showDialog} maskClosable={false}>
194
         <Popup show={showDialog} maskClosable={false}>
197
           <OrderMolded item={detail} />
195
           <OrderMolded item={detail} />
198
           <view className='item-center-Number'>
196
           <view className='item-center-Number'>
234
           {/* 协议条款 */}
232
           {/* 协议条款 */}
235
           <view className='Card-number-box'>
233
           <view className='Card-number-box'>
236
             <view className='Card-number'>
234
             <view className='Card-number'>
237
-              <text style='left:29px;position: absolute; padding-top:20px'>
235
+              <text>
238
                 手机号码:
236
                 手机号码:
239
               </text>
237
               </text>
240
-              <text style='right:29px;position: absolute;padding-top:20px'>
238
+              <text style='right:0;position: absolute;'>
241
                 {person.phone}
239
                 {person.phone}
242
               </text>
240
               </text>
243
             </view>
241
             </view>
263
 
261
 
264
           </view>
262
           </view>
265
           {/* 支付按钮 */}
263
           {/* 支付按钮 */}
266
-          <view className='button-box-button-box'>
267
-            <view className='button-text-image'>
268
-              <text className='button-text-money-hot'>
269
-                返现¥{formatPrice(totalPrice?.cashback || 0)}
270
-              </text>
271
-              <image className='button-image' src={ProCard_hot}>
272
-                123123
273
-              </image>
274
-              <view className='button-text-money'>
275
-                门店市面价:{formatPrice(totalPrice?.standardPrice || 0)}元
276
-              </view>
277
-            </view>
278
-            <Button className='button-box-one' onClick={() => onShowPay()}>
279
-              ¥{formatPrice(totalPrice?.actualPrice || 0)}元
280
-              <text className='button-text-one'>支付订单</text>
281
-            </Button>
282
-          </view>
264
+          <Button className='payorder' onClick={() => onShowPay()}>
265
+            <View className='paytext'>¥{formatPrice(totalPrice?.actualPrice || 0)}元</View>
266
+            <View className='paycontent'>
267
+              <View className='paybuttontop'>返现¥{formatPrice(totalPrice?.cashback || 0)}</View>
268
+              <View className='paybuttonbottom'>门店市面价:{formatPrice(totalPrice?.standardPrice || 0)}元</View>
269
+            </View>
270
+            <View className='paytext'>支付订单</View>
271
+          </Button>
283
         </view>
272
         </view>
284
       </view>
273
       </view>
285
   );
274
   );

+ 33
- 63
src/pages/PayOrder/style.less View File

1
 @whiteColor: #fff;
1
 @whiteColor: #fff;
2
-@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
3
 .container {
2
 .container {
4
   width: 100%;
3
   width: 100%;
5
   //商品数量
4
   //商品数量
29
     }
28
     }
30
     .buy-num-add {
29
     .buy-num-add {
31
       display: inline-block;
30
       display: inline-block;
32
-
33
       width: 60px;
31
       width: 60px;
34
       height: 60px;
32
       height: 60px;
35
       background: #ffffff;
33
       background: #ffffff;
40
   //确定按钮
38
   //确定按钮
41
   .buy-button-box {
39
   .buy-button-box {
42
     width: 100%;
40
     width: 100%;
43
-    margin: 40px 0 0 0;
44
-
41
+    margin-top: 40px;
45
     .button-Cancel {
42
     .button-Cancel {
46
       display: inline-block;
43
       display: inline-block;
47
       width: 236px;
44
       width: 236px;
55
     }
52
     }
56
     .button-OK {
53
     .button-OK {
57
       display: inline-block;
54
       display: inline-block;
58
-
59
       width: 236px;
55
       width: 236px;
60
       height: 78px;
56
       height: 78px;
61
       background: #274291;
57
       background: #274291;
67
   }
63
   }
68
   //协议条款 + 支付按钮
64
   //协议条款 + 支付按钮
69
   .view-button {
65
   .view-button {
70
-    position: fixed;
66
+    position: absolute;
71
     bottom: 0;
67
     bottom: 0;
72
-    left: 0;
73
-    right: 0;
68
+    width: 100%;
74
     .Card-number-box {
69
     .Card-number-box {
75
-      width: calc(100% - 60px);
76
-      margin: auto;
77
       box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
70
       box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
71
+      padding: 40px 30px 0;
72
+      margin: 0 30px;
78
       .Card-number {
73
       .Card-number {
79
-        width: 100%;
80
-        height: 96px;
81
-        background-color: @whiteColor;
74
+        position: relative;
75
+        font-size: 30px;
82
       }
76
       }
83
       .Card-user {
77
       .Card-user {
84
-        height: 96px;
85
-        padding-bottom: 30px;
86
-        line-height: 96px;
87
-        background-color: @whiteColor;
78
+        margin: 20px 0 40px 0;
88
         .Radio-text {
79
         .Radio-text {
89
-          padding-left: 40px;
90
           position: relative;
80
           position: relative;
91
           bottom: 6px;
81
           bottom: 6px;
92
           color: #666666;
82
           color: #666666;
100
         font-size: 25px;
90
         font-size: 25px;
101
       }
91
       }
102
       .ul-li-text {
92
       .ul-li-text {
103
-        padding-left: 30px;
104
-        /* padding-bottom: 10px; */
105
         position: relative;
93
         position: relative;
106
         top: -1em;
94
         top: -1em;
107
-
108
         .ul-li-view {
95
         .ul-li-view {
109
           display: inline-block;
96
           display: inline-block;
110
           margin-bottom: 3px;
97
           margin-bottom: 3px;
120
         }
107
         }
121
       }
108
       }
122
     }
109
     }
123
-    .button-box-button-box {
124
-      position: relative;
125
-      .button-text-image {
126
-        width: 144px;
127
-        height: 45px;
128
-        position: absolute;
129
-        top: -35px;
130
-        left: calc(50% - 72px);
131
-        z-index: 1;
132
-        .button-text-money-hot {
133
-          position: absolute;
134
-          width: 144px;
135
-          height: 43px;
136
-          line-height: 43px;
110
+    .payorder{
111
+      margin: 40px 30px;
112
+      color: #fff;
113
+      background-color: #274190;
114
+      border-radius: 12px;
115
+      height: 92px;
116
+      display: flex;
117
+      align-items: center;
118
+      justify-content: center;
119
+      .paytext{
120
+        font-size: 30px;
121
+      }
122
+      .paycontent{
123
+        margin:0 15px;
124
+        .paybuttontop{
125
+          background: url(../../assets/icons/ProCard/ProCard_hot.png) no-repeat;
126
+          background-size: 100% 100%;
127
+          padding: 5px 25px 8px 6px;
137
           font-size: 24px;
128
           font-size: 24px;
138
-          font-weight: bold;
129
+          height: 44.3px;
130
+          line-height: 44.3px;
131
+          box-sizing: border-box;
139
           color: @whiteColor;
132
           color: @whiteColor;
133
+          font-weight: 600;
140
         }
134
         }
141
-        .button-image {
142
-          width: 143px;
143
-          height: 43px;
144
-        }
145
-        .button-text-money {
146
-          position: absolute;
147
-          margin-top: -8;
148
-          width: 157px;
135
+        .paybuttonbottom{          
149
           font-size: 18px;
136
           font-size: 18px;
150
-          font-weight: 400;
151
           text-decoration: line-through;
137
           text-decoration: line-through;
152
-          color: @whiteColor;
153
-        }
154
-      }
155
-      .button-box-one {
156
-        font-size: 30px;
157
-        line-height: 92px;
158
-        margin-top: 3em;
159
-        background-color: #274190;
160
-        border-radius: 12px;
161
-        width: calc(100% - 60px);
162
-        height: 92px;
163
-        color: @whiteColor;
164
-        bottom: 40px;
165
-        .button-text-one {
166
-          right: 133px;
167
-          font-size: 30px;
168
-          padding-left: 220px;
138
+          line-height: 17px;
169
         }
139
         }
170
       }
140
       }
171
     }
141
     }
172
   }
142
   }
173
-}
143
+}