李志伟 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,6 +18,7 @@
18 18
     background-repeat: no-repeat;
19 19
     border-radius: 15px 0px 0px 15px;
20 20
     align-items: center;
21
+    width: 100%;
21 22
     .left-image-1-payOrder {
22 23
       width: 145px;
23 24
       height: 44px;

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

@@ -4,17 +4,14 @@ import { getPackageDetail } from "@/services/home";
4 4
 import { saveOrder, getOrderSub, payOrder } from "@/services/payOrder";
5 5
 import { useState, useEffect } from "react";
6 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 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 9
 import CustomNav from "@/components/CustomNav";
13 10
 import OrderMolded from "@/components/OrderMolded";
14 11
 import Popup from "@/components/Popup";
12
+import Card from "./Card";
15 13
 import "./style.less";
16 14
 
17
-import Card from "./Card";
18 15
 
19 16
 export default withLayout((props) => {
20 17
   //#region 
@@ -188,11 +185,12 @@ export default withLayout((props) => {
188 185
     setTotalPrice(total);
189 186
   }, [list]);
190 187
 
191
-  //#endregion
192 188
   return (
193 189
     !person.phone ? <AuthPage /> :
194 190
       <view class='container'>
195
-        <CustomNav title='订单' />
191
+        <view className='index-navbar'>
192
+          <CustomNav title='订单' />
193
+        </view>
196 194
         <Popup show={showDialog} maskClosable={false}>
197 195
           <OrderMolded item={detail} />
198 196
           <view className='item-center-Number'>
@@ -234,10 +232,10 @@ export default withLayout((props) => {
234 232
           {/* 协议条款 */}
235 233
           <view className='Card-number-box'>
236 234
             <view className='Card-number'>
237
-              <text style='left:29px;position: absolute; padding-top:20px'>
235
+              <text>
238 236
                 手机号码:
239 237
               </text>
240
-              <text style='right:29px;position: absolute;padding-top:20px'>
238
+              <text style='right:0;position: absolute;'>
241 239
                 {person.phone}
242 240
               </text>
243 241
             </view>
@@ -263,23 +261,14 @@ export default withLayout((props) => {
263 261
 
264 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 272
         </view>
284 273
       </view>
285 274
   );

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

@@ -1,5 +1,4 @@
1 1
 @whiteColor: #fff;
2
-@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
3 2
 .container {
4 3
   width: 100%;
5 4
   //商品数量
@@ -29,7 +28,6 @@
29 28
     }
30 29
     .buy-num-add {
31 30
       display: inline-block;
32
-
33 31
       width: 60px;
34 32
       height: 60px;
35 33
       background: #ffffff;
@@ -40,8 +38,7 @@
40 38
   //确定按钮
41 39
   .buy-button-box {
42 40
     width: 100%;
43
-    margin: 40px 0 0 0;
44
-
41
+    margin-top: 40px;
45 42
     .button-Cancel {
46 43
       display: inline-block;
47 44
       width: 236px;
@@ -55,7 +52,6 @@
55 52
     }
56 53
     .button-OK {
57 54
       display: inline-block;
58
-
59 55
       width: 236px;
60 56
       height: 78px;
61 57
       background: #274291;
@@ -67,26 +63,20 @@
67 63
   }
68 64
   //协议条款 + 支付按钮
69 65
   .view-button {
70
-    position: fixed;
66
+    position: absolute;
71 67
     bottom: 0;
72
-    left: 0;
73
-    right: 0;
68
+    width: 100%;
74 69
     .Card-number-box {
75
-      width: calc(100% - 60px);
76
-      margin: auto;
77 70
       box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
71
+      padding: 40px 30px 0;
72
+      margin: 0 30px;
78 73
       .Card-number {
79
-        width: 100%;
80
-        height: 96px;
81
-        background-color: @whiteColor;
74
+        position: relative;
75
+        font-size: 30px;
82 76
       }
83 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 79
         .Radio-text {
89
-          padding-left: 40px;
90 80
           position: relative;
91 81
           bottom: 6px;
92 82
           color: #666666;
@@ -100,11 +90,8 @@
100 90
         font-size: 25px;
101 91
       }
102 92
       .ul-li-text {
103
-        padding-left: 30px;
104
-        /* padding-bottom: 10px; */
105 93
         position: relative;
106 94
         top: -1em;
107
-
108 95
         .ul-li-view {
109 96
           display: inline-block;
110 97
           margin-bottom: 3px;
@@ -120,54 +107,37 @@
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 128
           font-size: 24px;
138
-          font-weight: bold;
129
+          height: 44.3px;
130
+          line-height: 44.3px;
131
+          box-sizing: border-box;
139 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 136
           font-size: 18px;
150
-          font-weight: 400;
151 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
+}