shigongli
/
miniapp-v2
Tarkkaile 6
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

flx

吃个甘蔗嚼一年 3 vuotta sitten
vanhempi
76203049f7
commit
f87a987583
14 muutettua tiedostoa jossa 748 lisäystä ja 1856 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 51
    19
      src/components/AlreadyUsedMolded/index.jsx
  2. 51
    63
      src/components/AlreadyUsedMolded/style.less
  3. 9
    31
      src/components/BossCard/index.jsx
  4. 0
    116
      src/components/CompoentsOrder/AlreadyExpired/index.jsx
  5. 0
    255
      src/components/CompoentsOrder/AlreadyExpired/style.less
  6. 44
    139
      src/components/CompoentsOrder/AlreadyUsed/index.jsx
  7. 4
    246
      src/components/CompoentsOrder/AlreadyUsed/style.less
  8. 0
    117
      src/components/CompoentsOrder/TobePaid/index.jsx
  9. 0
    268
      src/components/CompoentsOrder/TobePaid/style.less
  10. 0
    75
      src/components/CompoentsOrder/TobeWritten/index.jsx
  11. 0
    269
      src/components/CompoentsOrder/TobeWritten/style.less
  12. 264
    256
      src/components/CompoentsOrder/complete/index.jsx
  13. 324
    0
      src/components/CompoentsOrder/complete/style.less
  14. 1
    2
      src/pages/index/tabs/Guide.jsx

+ 51
- 19
src/components/AlreadyUsedMolded/index.jsx Näytä tiedosto 

@@ -5,31 +5,63 @@ import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
5 5 
 import Evaluation from '@/assets/icons/UserCenter/Evaluation.png'
6 6 
 import starOn from '@/assets/icons/GuideCheck/starOn.png'
7 7 
 import starOff from '@/assets/icons/GuideCheck/starOff.png'
8 
-
8 
+import formatTime from '@/utils/formatTime'
9 
+import Star from '@/components/Star/Star.jsx'
10 
+import { useState } from 'react'
9 11 
 import './style.less'
10 12
13 
+
14 
+
15 
+
16 
+const scoreList = new Array(5).fill(0);
17 
+const score = "3.9";
18 
+
11 19 
 export default (props) => {
20 
+  const [detail, setDetail] = useState({})
21 
+
22 
+  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
23 
+
24 
+  const { list } = props
12 25
13 26 
   return (
27 
+    <view>
28 
+      {
29 
+        list.map((item, index) => {
30 
+          return (
31 
+            <view class='wrapper-box' key={index} >
32 
+              <view class='left-complete-one'  >
33 
+                <image className='left-image-1' src={ProCard_hot}></image>
34 
+                <view className='left-viewText'>
35 
+                  返现￥{(item.cashback / 100)?.toFixed(2)}
36 
+                </view>
37 
+                <view className='title-image' >
38 
+                  <image className='image-1' mode='scaleToFill' src={item.poster || image}></image>
39 
+                  <image className='image-2' src={food}></image>
40 
+                </view>
41 
+                <view className='title-content'>
42 
+                  <view className='Pro-title'  >
43 
+                    <view className='title-text'>
44 
+                      {item.packageDescription}
45 
+                      <text className='title-money-2'>
46 
+                        数量：{item.amount}张
47 
+                      </text>
48 
+                    </view>
49 
+                  </view>
50 
+                  <text className='title-money' >￥{(item.unitPrice / 100)?.toFixed(2)}元<text className='title-money-3'>订单编号：{item.orderId}</text></text>
51 
+                  <view className='title-time'>
52 
+                    核销时间：{" "}
53 
+                    {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
54 
+                  </view>
55 
+                </view>
56 
+              </view>
57 
+            </view>
58 
+          )
14 59
15 
-    <view class='wrapper-one-box'>
16 
-      <view class='left-complete-one'>
17 
-        <image className='left-image-1' src={ProCard_hot}></image>
18 
-        <view className='left-viewText'>
19 
-          返现￥16.00
20 
-        </view>
21 
-        <view className='title-image'>
22 
-          <image className='image-1' mode='scaleToFill' src={image}></image>
23 
-          <image className='image-2' src={food}></image>
24 
-        </view>
25 
-        <view className='title-content'>
26 
-          <view className='Pro-title'>
27 
-            <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</text></view>
28 
-          </view>
29 
-          <text className='title-money' >￥6990元<text className='OrderNumber'>订单编号：ABC123456789</text> </text>
30 
-          <view className='title-time' >核销时间：2021/06/21  12:00</view>
31 
-        </view>
32 
-      </view>
60 
+        })
61 
+      }
33 62 
     </view>
63 
+
64 
+
65 
+
34 66 
   )
35 67 
 }

+ 51
- 63
src/components/AlreadyUsedMolded/style.less Näytä tiedosto 

@@ -1,12 +1,17 @@
1 1 
 @whiteColor: #fff;
2 2
3 
-.wrapper-one-box {
4 
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
3 
+.wrapper-box {
4 
+  display: flex;
5 
+  position: relative;
6 
+  margin: 30px auto;
7 
+  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
8 
+  // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
9 
+  filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
5 10
6 11 
   .left-complete-one {
7 
-    padding-top: 85px;
8 
-    padding-bottom: 21px;
9 12
13 
+    padding-top: 87px;
14 
+    padding-bottom: 43px;
10 15 
     position: relative;
11 16 
     display: flex;
12 17 
     background: @whiteColor;
 
@@ -21,7 +26,7 @@
21 26 
     background-size: 100% 60%;
22 27 
     background-repeat: no-repeat;
23 28
24 
-    width: 573px;
29 
+    width: 100%;
25 30 
     border-radius: 15px 0px 0px 15px;
26 31 
     // border-radius: 12px;
27 32 
 
@@ -40,26 +45,27 @@
40 45 
       position: absolute;
41 46 
       left: 1px;
42 47 
       top: 28px;
43 
-      font-size: 20px;
48 
+      font-size: 24px;
44 49 
       color: @whiteColor;
50 
+      font-weight: 600;
45 51 
     }
46 52 
     //图片
47 53 
     .title-image {
48 
-      width: 145px;
54 
+      height: 144px;
49 55 
       margin-left: 20px;
50 56 
       border-radius: 24px;
51 57 
       overflow: hidden;
52 58 
       position: relative;
53 59 
       .image-1 {
54 
-        width: 100%;
55 
-        height: 145px;
60 
+        width: 144px;
61 
+        height: 144px;
62 
+        margin: 0;
56 63 
       }
57 64 
       .image-2 {
58 65 
         width: 89px;
59 66 
         height: 34px;
60 67 
         position: absolute;
61 68 
         left: 0;
62 
-        top: 0;
63 69 
       }
64 70 
     }
65 71 
     // 商品标题
 
@@ -72,76 +78,58 @@
72 78 
           width: 375px;
73 79 
           overflow: hidden;
74 80 
           text-overflow: ellipsis;
75 
-          // display: -webkit-box; //必须要
81 
+          display: -webkit-box; //必须要
76 82 
           -webkit-line-clamp: 1;
77 83 
           -webkit-box-orient: vertical;
78 
-          // word-break: break-all; /* 多出文本省略号代替 */
84 
+          word-break: break-all; /* 多出文本省略号代替 */
79 85 
           text-align: left;
80 86 
           font-size: 24px;
81 
-          // padding-bottom: 10px;
87 
+          padding-bottom: 10px;
88 
+          .title-money-2 {
89 
+            height: 19px;
90 
+            font-size: 20px;
91 
+            font-weight: 400;
92 
+            color: #333333;
93 
+            padding-left: 40px;
94 
+          }
82 95 
         }
83 96 
       }
84 97 
       .title-money {
85 
-        // padding-top: 34px;
98 
+        width: 58px;
99 
+        height: 21px;
86 100 
         font-size: 24px;
87 
-        // color: red;
88 
-        font-weight: 800;
89 
-      }
90 
-      .OrderNumber {
91 
-        width: 234px;
92 
-        height: 19px;
93 
-        font-size: 20px;
94 
-        font-weight: 400;
95 
-        color: #666666;
96 
-        line-height: 44px;
97 
-        margin-left: 21px;
98 
-      }
99 
-      .title-money-2 {
100 
-        height: 19px;
101 
-        font-size: 20px;
102 
-        font-weight: 400;
101 
+        font-weight: bold;
103 102 
         color: #333333;
104 
-        padding-left: 40px;
103 
+        font-weight: 800;
105 104 
       }
106 
-
107 105 
       .title-time {
108 106 
         font-size: 24px;
109 107 
         // padding-top: 20px;
110 108 
         color: #c0c8d3;
111 109 
       }
112 
-      .title-position-on {
113 
-        display: flex;
114 
-        font-size: 20px;
115 
-        .title-position {
116 
-          width: 18px;
117 
-          height: 24px;
118 
-          padding-right: 10px;
119 
-          padding-top: 5px;
120 
-        }
121 
-        .title-position-image {
122 
-          align-items: center;
123 
-          font-size: 20px;
124 
-          color: #333;
125 
-        }
126 
-        .title-on {
127 
-          // margin-bottom: 10px;
128 
-          padding-top: 5px;
129 
-          padding-left: 40px;
130 
-          width: 21px;
131 
-          height: 21px;
132 
-          padding-right: 10px;
133 
-        }
134 
-        .title-on-text {
135 
-          align-items: center;
110 
+      .title-money-3 {
111 
+        font-size: 18px;
112 
+        padding-left: 10px;
113 
+        color: rgba(102, 102, 102, 0.8);
136 114
137 
-          font-size: 20px;
138 
-          color: #333;
139 
-        }
115 
+      }
116 
+
117 
+      .title-time {
118 
+        font-size: 24px;
119 
+        padding-top: 20px;
120 
+        color: #c0c8d3;
140 121 
       }
141 122 
     }
142 123 
   }
143 
-  // .left-complete-one:nth-child(2) {
144 
-  //   background: rgb(182, 0, 0);
145 
-  //   padding-top: 10px;
146 
-  // }
147 124 
 }
125 
+
126 
+
127 
+//线条
128 
+.right-complete-two::after {
129 
+  content: "";
130 
+  position: absolute;
131 
+  top: 15px;
132 
+  margin: 26px auto;
133 
+  height: 70%;
134 
+  border-left: 1px dashed #595959;
135 
+}

+ 9
- 31
src/components/BossCard/index.jsx Näytä tiedosto 

@@ -10,7 +10,7 @@ import starOn from '@/assets/icons/housemantj/onlove.png'
10 10 
 import starOff from '@/assets/icons/housemantj/景点爆赞.png'
11 11 
 import food from '@/assets/icons/ProCard/food.png'
12 12 
 import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
13 
-import formatPrice from "@/utils/formatPrice";
13 
+
14 14 
 import { getQueryString } from '@/utils/index'
15 15 
 //入住指引--老板推荐
16 16 
 
@@ -19,22 +19,10 @@ import { getQueryString } from '@/utils/index'
19 19 
 import './style.less'
20 20
21 21 
 export default (props) => {
22 
-  const { item, cardNavigateTo, taRoomContent, trackClick } = props
22 
+
23 
+  const { item, st, taRoomContent, trackClick, det } = props
23 24 
   const { shopId, packageId } = props.item
24 25 
   const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.packageId)
25 
-  const [city, setCity] = useState({})
26 
-  const [detail, setDetail] = useState({})
27 
-
28 
-  const [handelareaName, setHandelareaName] = useState()
29 
-
30 
-  const lareaName = () => {
31 
-    if (city.areaPName == null) {
32 
-      setHandelareaName(city.areaPName / city.areaName)
33 
-    } else {
34 
-      setHandelareaName(city.areaName)
35 
-    }
36 
-  }
37 
-
38 26
39 27
40 28 
 
@@ -44,29 +32,19 @@ export default (props) => {
44 32 
     Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${shopId}` })
45 33 
   }
46 34
47 
-  useEffect(() => {
48 
-    lareaName()
49 
-
50 
-    getShopDetail(item.shopId).then((res) => {
51 
-      setDetail(res)
52 
-      getShopcity(res.cityId).then((x) => {
53 
-        setCity(x)
54 
-      })
55 
-    })
56 
-  }, [])
57 
-  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
35 
+
58 36 
   return (
59 37 
     <view class='container'>
60 38 
       <view class='wrapper'>
61 39 
         <view class='left-complete-one'  >
62 40 
           <image className='left-image-1' src={ProCard_hot}></image>
63 41 
           <view className='left-viewText'>
64 
-            返现￥{formatPrice(item.cashback)}
42 
+            返现￥{(item.cashback / 100)?.toFixed(2)}
65 43 
           </view>
66 44 
           {/* 评分 */}
67 45 
           <view className='card-box-star'>
68 
-            <Star star={star} />
69 
-            <text className='card-star-text' >{star}</text>
46 
+            <Star star={st} />
47 
+            <text className='card-star-text' >{st}</text>
70 48 
           </view>
71 49 
           <view className='title-image' onClick={() => { goFood() }}>
72 50 
             <image className='image-1' mode='scaleToFill' src={item.poster}></image>
 
@@ -76,10 +54,10 @@ export default (props) => {
76 54 
             <view className='Pro-title' onClick={() => { goFood() }} >
77 55 
               <view className='title-text'>{(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}</view>
78 56 
             </view>
79 
-            <text className='title-money' >￥{formatPrice(item.actualPrice)}元<text className='title-money-2'>门市价{formatPrice(item.standardPrice)}元</text></text>
57 
+            <text className='title-money' >￥{(item.actualPrice / 100)?.toFixed(2)}元<text className='title-money-2'>门市价{(item.standardPrice / 100)?.toFixed(2)}元</text></text>
80 58 
             <view className='title-position-on'>
81 59 
               <image className='title-position' src={position} />
82 
-              <text className='title-position-image'>{city.areaName=='南京市'?city.areaName:city.areaPName+'/'+city.areaName}</text>
60 
+              <text className='title-position-image'>{det.areaName == '南京市' ? det.areaName : det.areaPName + '/' + det.areaName}</text>
83 61 
               <view style={{ display: 'inline-block' }} onClick={toggleSave}>
84 62
85 63 
                 <image className='title-on' src={isSaved > 0 ? starOn : starOff} />

+ 0
- 116
src/components/CompoentsOrder/AlreadyExpired/index.jsx Näytä tiedosto 

@@ -1,116 +0,0 @@
1 
-
2 
-import { useState } from "react";
3 
-
4 
-import image from '@/assets/icons/ProCard/8kb.jpg'
5 
-
6 
-
7 
-import food from '@/assets/icons/ProCard/food.png'
8 
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
9 
-
10 
-import Null from '@/assets/icons/UserCenter/null_logo.png'
11 
-
12 
-
13 
-import starOn from '@/assets/icons/GuideCheck/starOn.png'
14 
-import starOff from '@/assets/icons/GuideCheck/starOff.png'
15 
-import './style.less'
16 
-
17 
-
18 
-
19 
-const scoreList = new Array(5).fill(0)
20 
-const score = '3.9'
21 
-
22 
-
23 
-export default (props) => {
24 
-
25 
-  return (
26 
-    <scroll-view scroll-y style='height:100%;'  >
27 
-
28 
-      <view className='AlreadyExpired-box' >
29 
-
30 
-        {/* 已过期 */}
31 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
32 
-        <view class='wrapper'>
33 
-          <view class='left-complete-one'>
34 
-            <image className='left-image-1' src={ProCard_hot}></image>
35 
-            <view className='left-viewText'>
36 
-              返现￥16.00
37 
-            </view>
38 
-            {/* 评分 */}
39 
-            <view className='card-box-star'>
40 
-              {
41 
-                scoreList.map((_, index) => {
42 
-
43 
-                  const src = (index + '0.1') < score ? starOn : starOff
44 
-                  return (
45 
-                    <image className='card-star-image' key={index} src={src} />
46 
-                  )
47 
-                })
48 
-              }
49 
-              <text className='card-star-text' >{score}</text>
50 
-            </view>
51 
-            <view className='title-image'>
52 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
53 
-              <image className='image-2' src={food}></image>
54 
-            </view>
55 
-            <view className='title-content'>
56 
-              <view className='Pro-title'>
57 
-                <view className='title-text'>【SEOUL·创意韩国料理】 <text className='title-money-2' >数量：1张</text></view>
58 
-              </view>
59 
-              <text className='title-money' >￥6990元</text>
60 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
61 
-            </view>
62 
-          </view>
63 
-          <view class='right-complete-two'>
64 
-            <view className='right-content'>
65 
-              <image className='right-image-2' src={Null} />
66 
-            </view>
67 
-          </view>
68 
-        </view>
69 
-        {/* 已过期 */}
70 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
71 
-        <view class='wrapper'>
72 
-          <view class='left-complete-one'>
73 
-            <image className='left-image-1' src={ProCard_hot}></image>
74 
-            <view className='left-viewText'>
75 
-              返现￥16.00
76 
-            </view>
77 
-            {/* 评分 */}
78 
-            <view className='card-box-star'>
79 
-              {
80 
-                scoreList.map((_, index) => {
81 
-
82 
-                  const src = (index + '0.1') < score ? starOn : starOff
83 
-                  return (
84 
-                    <image className='card-star-image' key={index} src={src} />
85 
-                  )
86 
-                })
87 
-              }
88 
-              <text className='card-star-text' >{score}</text>
89 
-            </view>
90 
-            <view className='title-image'>
91 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
92 
-              <image className='image-2' src={food}></image>
93 
-            </view>
94 
-            <view className='title-content'>
95 
-              <view className='Pro-title'>
96 
-                <view className='title-text'>【SEOUL·创意韩国料理】 <text className='title-money-2' >数量：1张</text></view>
97 
-              </view>
98 
-              <text className='title-money' >￥6990元</text>
99 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
100 
-            </view>
101 
-          </view>
102 
-          <view class='right-complete-two'>
103 
-            <view className='right-content'>
104 
-              <image className='right-image-2' src={Null} />
105 
-            </view>
106 
-          </view>
107 
-        </view>
108 
-
109 
-        <view className='foot'>
110 
-          已经到底了~
111 
-        </view>
112 
-      </view>
113 
-    </scroll-view>
114 
-
115 
-  )
116 
-}

+ 0
- 255
src/components/CompoentsOrder/AlreadyExpired/style.less Näytä tiedosto 

@@ -1,255 +0,0 @@
1 
-@whiteColor: #fff;
2 
-
3 
-.AlreadyExpired-box {
4 
-  margin: 40px auto;
5 
-  padding: 0 30px;
6 
-  .OrderNumber {
7 
-    // width: 234px;
8 
-    height: 19px;
9 
-    font-size: 20px;
10 
-    font-weight: 400;
11 
-    color: #666666;
12 
-    line-height: 44px;
13 
-  }
14 
-  .wrapper {
15 
-    margin-top: 40px;
16 
-    display: flex;
17 
-    position: relative;
18 
-    // margin-top: 600px;
19 
-    margin: 30px auto;
20 
-    width: 700px;
21 
-
22 
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
23 
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
24 
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
25 
-    .card-box-star {
26 
-      position: absolute;
27 
-      width: auto;
28 
-      height: 44.3px;
29 
-      position: absolute;
30 
-      left: 200px;
31 
-      top: 28px;
32 
-      font-size: 20px;
33 
-      color: @whiteColor;
34 
-      .card-star-image {
35 
-        padding-left: 6px;
36 
-        width: 21px;
37 
-        height: 21px;
38 
-      }
39 
-      .card-star-text {
40 
-        padding-left: 10px;
41 
-        font-size: 20px;
42 
-        color: #333;
43 
-        font-weight: 700;
44 
-      }
45 
-    }
46 
-
47 
-    .left-complete-one {
48 
-      padding-top: 85px;
49 
-      padding-bottom: 43px;
50 
-      position: relative;
51 
-      display: flex;
52 
-      background: @whiteColor;
53 
-      background: radial-gradient(
54 
-            circle at top right,
55 
-            transparent 15px,
56 
-            @whiteColor 0
57 
-          )
58 
-          top right,
59 
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
60 
-          bottom right;
61 
-      background-size: 100% 60%;
62 
-      background-repeat: no-repeat;
63 
-
64 
-      width: 573px;
65 
-      border-radius: 15px 0px 0px 15px;
66 
-      // border-radius: 12px;
67 
-
68 
-      align-items: center;
69 
-      .left-image-1 {
70 
-        width: 145px;
71 
-        height: 44px;
72 
-        position: absolute;
73 
-        top: 22px;
74 
-      }
75 
-      .left-viewText {
76 
-        // background-image: url(@Image-ProCard_hot);
77 
-        // width: 287px;
78 
-        width: auto;
79 
-        height: 44.3px;
80 
-        position: absolute;
81 
-        left: 1px;
82 
-        top: 28px;
83 
-        font-size: 20px;
84 
-        color: @whiteColor;
85 
-      }
86 
-      //图片
87 
-      .title-image {
88 
-        width: 145px;
89 
-        margin-left: 20px;
90 
-        border-radius: 24px;
91 
-        overflow: hidden;
92 
-        position: relative;
93 
-        .image-1 {
94 
-          width: 100%;
95 
-          height: 145px;
96 
-        }
97 
-        .image-2 {
98 
-          width: 89px;
99 
-          height: 34px;
100 
-          position: absolute;
101 
-          left: 0;
102 
-          top: 0;
103 
-        }
104 
-      }
105 
-      // 商品标题
106 
-      .title-content {
107 
-        // padding: 84px 0 56px 20px;
108 
-        padding-left: 18px;
109 
-
110 
-        .Pro-title {
111 
-          .title-text {
112 
-            width: 375px;
113 
-            overflow: hidden;
114 
-            text-overflow: ellipsis;
115 
-            // display: -webkit-box; //必须要
116 
-            -webkit-line-clamp: 1;
117 
-            -webkit-box-orient: vertical;
118 
-            // word-break: break-all; /* 多出文本省略号代替 */
119 
-            text-align: left;
120 
-            font-size: 24px;
121 
-            // padding-bottom: 10px;
122 
-          }
123 
-        }
124 
-        .title-money {
125 
-          // padding-top: 34px;
126 
-          font-size: 24px;
127 
-          // color: red;
128 
-          font-weight: 800;
129 
-        }
130 
-        .title-money-2 {
131 
-          height: 19px;
132 
-          font-size: 20px;
133 
-          font-weight: 400;
134 
-          color: #333333;
135 
-          padding-left: 40px;
136 
-        }
137 
-
138 
-        .title-time {
139 
-          font-size: 24px;
140 
-          // padding-top: 20px;
141 
-          color: #c0c8d3;
142 
-        }
143 
-        .title-position-on {
144 
-          display: flex;
145 
-          font-size: 20px;
146 
-          .title-position {
147 
-            width: 18px;
148 
-            height: 24px;
149 
-            padding-right: 10px;
150 
-            padding-top: 5px;
151 
-          }
152 
-          .title-position-image {
153 
-            align-items: center;
154 
-            font-size: 20px;
155 
-            color: #333;
156 
-          }
157 
-          .title-on {
158 
-            // margin-bottom: 10px;
159 
-            padding-top: 5px;
160 
-            padding-left: 40px;
161 
-            width: 21px;
162 
-            height: 21px;
163 
-            padding-right: 10px;
164 
-          }
165 
-          .title-on-text {
166 
-            align-items: center;
167 
-
168 
-            font-size: 20px;
169 
-            color: #333;
170 
-          }
171 
-        }
172 
-      }
173 
-    }
174 
-    // .left-complete-one:nth-child(2) {
175 
-    //   background: rgb(182, 0, 0);
176 
-    //   padding-top: 10px;
177 
-    // }
178 
-  }
179 
-
180 
-  .right-complete-two {
181 
-    background: @whiteColor;
182 
-    background: radial-gradient(
183 
-          circle at top left,
184 
-          transparent 15px,
185 
-          @whiteColor 0
186 
-        )
187 
-        top left,
188 
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
189 
-        bottom left;
190 
-    background-size: 100% 60%;
191 
-    background-repeat: no-repeat;
192 
-    width: 129px;
193 
-    border-radius: 0 15px 15px 0;
194 
-    position: relative;
195 
-    //右面部分
196 
-    .right-content {
197 
-      // width: 100px;
198 
-      height: 120px;
199 
-      position: absolute;
200 
-      top: 50%;
201 
-      left: 50%;
202 
-      transform: translate(-50%, -50%);
203 
-      // border: 1px solid red;
204 
-      .right-image-2 {
205 
-        width: 76px;
206 
-        height: 66px;
207 
-        margin-top: 1em;
208 
-      }
209 
-      .right-number {
210 
-        // width: 32px;
211 
-        // font-size: 20px;
212 
-        // border-radius: 4px;
213 
-        // border: 2px solid #999;
214 
-        // margin: auto;
215 
-        // text-align: center;
216 
-      }
217 
-      .right-image {
218 
-        // float: convert();
219 
-        width: 35px;
220 
-        height: 34px;
221 
-        margin: 0 auto;
222 
-        align-items: center;
223 
-        margin: auto;
224 
-        padding-left: 8px;
225 
-        // text-align: center;
226 
-      }
227 
-
228 
-      .right-title {
229 
-        font-weight: 700;
230 
-        font-size: 24px;
231 
-        padding-top: 15px;
232 
-        text-align: center;
233 
-      }
234 
-    }
235 
-  }
236 
-  //线条
237 
-  .right-complete-two::after {
238 
-    content: "";
239 
-    position: absolute;
240 
-    top: 15px;
241 
-    margin: 26px auto;
242 
-    height: 70%;
243 
-    border-left: 1px dashed #595959;
244 
-  }
245 
-  .foot {
246 
-    width: 100%;
247 
-    height: 26px;
248 
-    font-size: 28px;
249 
-    font-weight: 400;
250 
-    color: #c0c8d3;
251 
-    line-height: 34px;
252 
-    margin-top: 40px;
253 
-    text-align: center;
254 
-  }
255 
-}

+ 44
- 139
src/components/CompoentsOrder/AlreadyUsed/index.jsx Näytä tiedosto 

@@ -17,18 +17,14 @@ const score = '3.9'
17 17
18 18
19 19 
 export default (props) => {
20 
+  const { show, maskClosable, list } = props
20 21
21 22 
   const [showDialog, setShowDialog] = useState(false)
22 23 
   const [CollectNub, setCollectNub] = useState(1)
23 24
24 
-  const ShowMoldeOn = () => {
25 
-    setShowDialog(true)
26 
-  }
27 25 
   const ButtonCancel = () => {
28 
-    setShowDialog(false)
29 26 
   }
30 27 
   const ButtonOK = (e) => {
31 
-    setShowDialog(false)
32 28
33 29 
   }
34 30 
 
@@ -37,144 +33,53 @@ export default (props) => {
37 33 
   }
38 34
39 35 
   return (
40 
-
41 
-    <scroll-view scroll-y style='height:100%;'  >
42 
-
43 
-      <view className='AlreadyUsed-box' >
44 
-        <Popup show={showDialog} maskClosable={false}>
45 
-          <AlreadyUsedMolded />
46 
-          <view className='item-center-Number' >
47 
-            {/* 评分 */}
48 
-            <view className='card-box-star'>
49 
-              <text className='card-box-star-text' onClick={Nuberr} >口味：</text>
50 
-              {
51 
-                scoreList.map((_, index) => {
52 
-
53 
-                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
54 
-                  return (
55 
-                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
56 
-                  )
57 
-                })
58 
-              }
59 
-            </view>
60 
-            <view className='card-box-star'>
61 
-              <text className='card-box-star-text' onClick={Nuberr} >环境：</text>
62 
-              {
63 
-                scoreList.map((_, index) => {
64 
-
65 
-                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
66 
-                  return (
67 
-                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
68 
-                  )
69 
-                })
70 
-              }
71 
-            </view>
72 
-            <view className='card-box-star'>
73 
-              <text className='card-box-star-text' onClick={Nuberr} >服务：</text>
74 
-              {
75 
-                scoreList.map((_, index) => {
76 
-
77 
-                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
78 
-                  return (
79 
-                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
80 
-                  )
81 
-                })
82 
-              }
83 
-            </view>
84 
-
85 
-
86 
-          </view>
87 
-          <view className='buy-button-box' >
88 
-            <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
89 
-            <button className='button-OK' onClick={ButtonOK} >确定</button>
90 
-          </view>
91 
-        </Popup>
92 
-        {/* 已使用 */}
93 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
94 
-        <view class='wrapper'>
95 
-          <view class='left-complete-one'>
96 
-            <image className='left-image-1' src={ProCard_hot}></image>
97 
-            <view className='left-viewText'>
98 
-              返现￥16.00
99 
-            </view>
100 
-            {/* 评分 */}
101 
-            <view className='card-box-star'>
102 
-              {
103 
-                scoreList.map((_, index) => {
104 
-
105 
-                  const src = (index + '0.1') < score ? starOn : starOff
106 
-                  return (
107 
-                    <image className='card-star-image' key={index} src={src} />
108 
-                  )
109 
-                })
110 
-              }
111 
-              <text className='card-star-text' >{score}</text>
112 
-            </view>
113 
-            <view className='title-image'>
114 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
115 
-              <image className='image-2' src={food}></image>
116 
-            </view>
117 
-            <view className='title-content'>
118 
-              <view className='Pro-title'>
119 
-                <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</text></view>
120 
-              </view>
121 
-              <text className='title-money' >￥6990元</text>
122 
-              <view className='title-time' >核销时间：2021/06/21  12:00</view>
123 
-            </view>
124 
-          </view>
125 
-          <view class='right-complete-two' onClick={ShowMoldeOn} >
126 
-            <view className='right-content'>
127 
-              <image className='right-image' src={Evaluation} />
128 
-              <view className='right-title'>评价</view>
129 
-
130 
-            </view>
131 
-          </view>
36 
+    <Popup show={show} maskClosable={show} onClose={ButtonCancel} className='box-content' >
37 
+      <AlreadyUsedMolded list={list} />
38 
+      <view className='item-center-Number' >
39 
+        {/* 评分 */}
40 
+        <view className='card-box-star'>
41 
+          <text className='card-box-star-text' onClick={Nuberr} >口味：</text>
42 
+          {
43 
+            scoreList.map((_, index) => {
44 
+
45 
+              const src = (index + `${CollectNub}`) < score ? starOn : starOff
46 
+              return (
47 
+                <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
48 
+              )
49 
+            })
50 
+          }
132 51 
         </view>
133 
-        {/* 已使用 */}
134 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
135 
-        <view class='wrapper'>
136 
-          <view class='left-complete-one'>
137 
-            <image className='left-image-1' src={ProCard_hot}></image>
138 
-            <view className='left-viewText'>
139 
-              返现￥16.00
140 
-            </view>
141 
-            {/* 评分 */}
142 
-            <view className='card-box-star'>
143 
-              {
144 
-                scoreList.map((_, index) => {
145 
-
146 
-                  const src = (index + '0.1') < score ? starOn : starOff
147 
-                  return (
148 
-                    <image className='card-star-image' key={index} src={src} />
149 
-                  )
150 
-                })
151 
-              }
152 
-              <text className='card-star-text' >{score}</text>
153 
-            </view>
154 
-            <view className='title-image'>
155 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
156 
-              <image className='image-2' src={food}></image>
157 
-            </view>
158 
-            <view className='title-content'>
159 
-              <view className='Pro-title'>
160 
-                <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</text></view>
161 
-              </view>
162 
-              <text className='title-money' >￥6990元</text>
163 
-              <view className='title-time' >核销时间：2021/06/21  12:00</view>
164 
-            </view>
165 
-          </view>
166 
-          <view class='right-complete-two'>
167 
-            <view className='right-content'>
168 
-              <image className='right-image' src={Evaluation} />
169 
-              <view className='right-title'>评价</view>
170 
-            </view>
171 
-          </view>
52 
+        <view className='card-box-star'>
53 
+          <text className='card-box-star-text' onClick={Nuberr} >环境：</text>
54 
+          {
55 
+            scoreList.map((_, index) => {
56 
+
57 
+              const src = (index + `${CollectNub}`) < score ? starOn : starOff
58 
+              return (
59 
+                <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
60 
+              )
61 
+            })
62 
+          }
172 63 
         </view>
173 
-        <view className='foot'>
174 
-          已经到底了~
64 
+        <view className='card-box-star'>
65 
+          <text className='card-box-star-text' onClick={Nuberr} >服务：</text>
66 
+          {
67 
+            scoreList.map((_, index) => {
68 
+
69 
+              const src = (index + `${CollectNub}`) < score ? starOn : starOff
70 
+              return (
71 
+                <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
72 
+              )
73 
+            })
74 
+          }
175 75 
         </view>
176 76 
       </view>
177 
-    </scroll-view>
77 
+      <view className='buy-button-box' >
78 
+        <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
79 
+        <button className='button-OK' onClick={ButtonOK} >确定</button>
80 
+      </view>
81 
+    </Popup>
82 
+
178 83
179 84 
   )
180 85 
 }

+ 4
- 246
src/components/CompoentsOrder/AlreadyUsed/style.less Näytä tiedosto 

@@ -1,8 +1,7 @@
1 1 
 @whiteColor: #fff;
2 2
3 
-.AlreadyUsed-box {
4 
-  margin: 40px auto;
5 
-  padding: 0 30px;
3 
+// .box-content {
4 
+
6 5
7 6 
   .item-center-Number {
8 7 
     .card-box-star {
 
@@ -67,248 +66,7 @@
67 66 
     color: #666666;
68 67 
     line-height: 44px;
69 68 
   }
70 
-  .wrapper {
71 
-    margin-top: 40px;
72 
-    display: flex;
73 
-    position: relative;
74 
-    // margin-top: 600px;
75 
-    margin: 30px auto;
76 
-    width: 700px;
77 
-
78 
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
79 
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
80 
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
81 
-    .card-box-star {
82 
-      position: absolute;
83 
-      width: auto;
84 
-      height: 44.3px;
85 
-      position: absolute;
86 
-      left: 200px;
87 
-      top: 28px;
88 
-      font-size: 20px;
89 
-      color: @whiteColor;
90 
-      .card-star-image {
91 
-        padding-left: 6px;
92 
-        width: 21px;
93 
-        height: 21px;
94 
-      }
95 
-      .card-star-text {
96 
-        padding-left: 10px;
97 
-        font-size: 20px;
98 
-        color: #333;
99 
-        font-weight: 700;
100 
-      }
101 
-    }
102 
-
103 
-    .left-complete-one {
104 
-      padding-top: 85px;
105 
-      padding-bottom: 43px;
106 
-      position: relative;
107 
-      display: flex;
108 
-      background: @whiteColor;
109 
-      background: radial-gradient(
110 
-            circle at top right,
111 
-            transparent 15px,
112 
-            @whiteColor 0
113 
-          )
114 
-          top right,
115 
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
116 
-          bottom right;
117 
-      background-size: 100% 60%;
118 
-      background-repeat: no-repeat;
119 
-
120 
-      width: 573px;
121 
-      border-radius: 15px 0px 0px 15px;
122 
-      // border-radius: 12px;
123 
-
124 
-      align-items: center;
125 
-      .left-image-1 {
126 
-        width: 145px;
127 
-        height: 44px;
128 
-        position: absolute;
129 
-        top: 22px;
130 
-      }
131 
-      .left-viewText {
132 
-        // background-image: url(@Image-ProCard_hot);
133 
-        // width: 287px;
134 
-        width: auto;
135 
-        height: 44.3px;
136 
-        position: absolute;
137 
-        left: 1px;
138 
-        top: 28px;
139 
-        font-size: 20px;
140 
-        color: @whiteColor;
141 
-      }
142 
-      //图片
143 
-      .title-image {
144 
-        width: 145px;
145 
-        margin-left: 20px;
146 
-        border-radius: 24px;
147 
-        overflow: hidden;
148 
-        position: relative;
149 
-        .image-1 {
150 
-          width: 100%;
151 
-          height: 145px;
152 
-        }
153 
-        .image-2 {
154 
-          width: 89px;
155 
-          height: 34px;
156 
-          position: absolute;
157 
-          left: 0;
158 
-          top: 0;
159 
-        }
160 
-      }
161 
-      // 商品标题
162 
-      .title-content {
163 
-        // padding: 84px 0 56px 20px;
164 
-        padding-left: 18px;
165 
-
166 
-        .Pro-title {
167 
-          .title-text {
168 
-            width: 375px;
169 
-            overflow: hidden;
170 
-            text-overflow: ellipsis;
171 
-            // display: -webkit-box; //必须要
172 
-            -webkit-line-clamp: 1;
173 
-            -webkit-box-orient: vertical;
174 
-            // word-break: break-all; /* 多出文本省略号代替 */
175 
-            text-align: left;
176 
-            font-size: 24px;
177 
-            // padding-bottom: 10px;
178 
-          }
179 
-        }
180 
-        .title-money {
181 
-          // padding-top: 34px;
182 
-          font-size: 24px;
183 
-          // color: red;
184 
-          font-weight: 800;
185 
-        }
186 
-        .title-money-2 {
187 
-          height: 19px;
188 
-          font-size: 20px;
189 
-          font-weight: 400;
190 
-          color: #333333;
191 
-          padding-left: 40px;
192 
-        }
193 
-
194 
-        .title-time {
195 
-          font-size: 24px;
196 
-          // padding-top: 20px;
197 
-          color: #c0c8d3;
198 
-        }
199 
-        .title-position-on {
200 
-          display: flex;
201 
-          font-size: 20px;
202 
-          .title-position {
203 
-            width: 18px;
204 
-            height: 24px;
205 
-            padding-right: 10px;
206 
-            padding-top: 5px;
207 
-          }
208 
-          .title-position-image {
209 
-            align-items: center;
210 
-            font-size: 20px;
211 
-            color: #333;
212 
-          }
213 
-          .title-on {
214 
-            // margin-bottom: 10px;
215 
-            padding-top: 5px;
216 
-            padding-left: 40px;
217 
-            width: 21px;
218 
-            height: 21px;
219 
-            padding-right: 10px;
220 
-          }
221 
-          .title-on-text {
222 
-            align-items: center;
223 
-
224 
-            font-size: 20px;
225 
-            color: #333;
226 
-          }
227 
-        }
228 
-      }
229 
-    }
230 
-    // .left-complete-one:nth-child(2) {
231 
-    //   background: rgb(182, 0, 0);
232 
-    //   padding-top: 10px;
233 
-    // }
234 
-  }
235 
-
236 
-  .right-complete-two {
237 
-    background: @whiteColor;
238 
-    background: radial-gradient(
239 
-          circle at top left,
240 
-          transparent 15px,
241 
-          @whiteColor 0
242 
-        )
243 
-        top left,
244 
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
245 
-        bottom left;
246 
-    background-size: 100% 60%;
247 
-    background-repeat: no-repeat;
248 
-    width: 129px;
249 
-    border-radius: 0 15px 15px 0;
250 
-    position: relative;
251 
-    //右面部分
252 
-    .right-content {
253 
-      // width: 100px;
254 
-      height: 120px;
255 
-      position: absolute;
256 
-      top: 50%;
257 
-      left: 50%;
258 
-      transform: translate(-50%, -50%);
259 
-      // border: 1px solid red;
260 
-      .right-image-2 {
261 
-        width: 76px;
262 
-        height: 66px;
263 
-        margin-top: 1em;
264 
-      }
265 
-      .right-number {
266 
-        // width: 32px;
267 
-        // font-size: 20px;
268 
-        // border-radius: 4px;
269 
-        // border: 2px solid #999;
270 
-        // margin: auto;
271 
-        // text-align: center;
272 
-      }
273 
-      .right-image {
274 
-        // float: convert();
275 
-        width: 35px;
276 
-        height: 34px;
277 
-        margin: 0 auto;
278 
-        align-items: center;
279 
-        margin: auto;
280 
-        padding-left: 8px;
281 
-        // text-align: center;
282 
-      }
283 
-
284 
-      .right-title {
285 
-        font-weight: 700;
286 
-        font-size: 24px;
287 
-        padding-top: 15px;
288 
-        text-align: center;
289 
-      }
290 
-    }
291 
-  }
292 
-  //线条
293 
-  .right-complete-two::after {
294 
-    content: "";
295 
-    position: absolute;
296 
-    top: 15px;
297 
-    margin: 26px auto;
298 
-    height: 70%;
299 
-    border-left: 1px dashed #595959;
300 
-  }
301 
-  .foot {
302 
-    width: 100%;
303 
-    height: 26px;
304 
-    font-size: 28px;
305 
-    font-weight: 400;
306 
-    color: #c0c8d3;
307 
-    line-height: 34px;
308 
-    margin-top: 40px;
309 
-    text-align: center;
310 
-  }
311 
-
69 
+
312 70 
   .button-info {
313 71 
     margin-bottom: 70px;
314 72 
 
@@ -322,4 +80,4 @@
322 80 
       color: @whiteColor;
323 81 
     }
324 82 
   }
325 
-}
83 
+// }

+ 0
- 117
src/components/CompoentsOrder/TobePaid/index.jsx Näytä tiedosto 

@@ -1,117 +0,0 @@
1 
-
2 
-import { useState } from "react";
3 
-import { Button, } from '@tarojs/components'
4 
-import Taro from "@tarojs/taro";
5 
-import image from '@/assets/icons/ProCard/8kb.jpg'
6 
-
7 
-import food from '@/assets/icons/ProCard/food.png'
8 
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
9 
-
10 
-import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
11 
-import './style.less'
12 
-
13 
-
14 
-export default (props) => {
15 
-
16 
-  const handleGoPay = () => {
17 
-    Taro.navigateTo({ url: '/pages/PayOrder/index' })
18 
-  }
19 
-  return (
20 
-    <scroll-view scrollY style='height:100%;'  >
21 
-
22 
-      <view className='TobePaid-box'>
23 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
24 
-        {/* 待支付 */}
25 
-        <view class='wrapper'>
26 
-          <view class='left-complete-one'>
27 
-            <image className='left-image-1' src={ProCard_hot}></image>
28 
-            <view className='left-viewText'>
29 
-              返现￥16.00
30 
-            </view>
31 
-            <view className='title-image'>
32 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
33 
-              <image className='image-2' src={food}></image>
34 
-            </view>
35 
-            <view className='title-content'>
36 
-              <view className='Pro-title'>
37 
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
38 
-              </view>
39 
-              <text className='title-money' >￥6990元</text>
40 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
41 
-            </view>
42 
-          </view>
43 
-          <view class='right-complete-two'>
44 
-            <view className='right-content'>
45 
-              <image className='right-image' src={Pay} />
46 
-              <view className='right-title'>支付</view>
47 
-            </view>
48 
-          </view>
49 
-        </view>
50 
-        {/* 待支付 */}
51 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
52 
-
53 
-        <view class='wrapper'>
54 
-          <view class='left-complete-one'>
55 
-            <image className='left-image-1' src={ProCard_hot}></image>
56 
-            <view className='left-viewText'>
57 
-              返现￥16.00
58 
-            </view>
59 
-            <view className='title-image'>
60 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
61 
-              <image className='image-2' src={food}></image>
62 
-            </view>
63 
-            <view className='title-content'>
64 
-              <view className='Pro-title'>
65 
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
66 
-              </view>
67 
-              <text className='title-money' >￥6990元</text>
68 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
69 
-            </view>
70 
-          </view>
71 
-          <view class='right-complete-two'>
72 
-            <view className='right-content'>
73 
-              <image className='right-image' src={Pay} />
74 
-              <view className='right-title'>支付</view>
75 
-            </view>
76 
-          </view>
77 
-        </view>
78 
-        {/* 待支付 */}
79 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
80 
-
81 
-        <view class='wrapper'>
82 
-
83 
-          <view class='left-complete-one'>
84 
-            <image className='left-image-1' src={ProCard_hot}></image>
85 
-            <view className='left-viewText'>
86 
-              返现￥16.00
87 
-            </view>
88 
-            <view className='title-image'>
89 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
90 
-              <image className='image-2' src={food}></image>
91 
-            </view>
92 
-            <view className='title-content'>
93 
-              <view className='Pro-title'>
94 
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
95 
-              </view>
96 
-              <text className='title-money' >￥6990元</text>
97 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
98 
-            </view>
99 
-          </view>
100 
-          <view class='right-complete-two'>
101 
-            <view className='right-content'>
102 
-              <image className='right-image' src={Pay} />
103 
-              <view className='right-title'>支付</view>
104 
-            </view>
105 
-          </view>
106 
-        </view>
107 
-        <view className='foot'>
108 
-          已经到底了~
109 
-        </view>
110 
-        <view className='button-info'>
111 
-          <Button className='button-box' onClick={handleGoPay}>全部支付</Button>
112 
-        </view>
113 
-      </view>
114 
-    </scroll-view>
115 
-
116 
-  )
117 
-}

+ 0
- 268
src/components/CompoentsOrder/TobePaid/style.less Näytä tiedosto 

@@ -1,268 +0,0 @@
1 
-@whiteColor: #fff;
2 
-.TobePaid-box {
3 
-  margin: 40px auto;
4 
-  padding: 0 30px;
5 
-  .OrderNumber {
6 
-    // width: 234px;
7 
-    height: 19px;
8 
-    font-size: 20px;
9 
-    font-weight: 400;
10 
-    color: #666666;
11 
-    line-height: 44px;
12 
-  }
13 
-  .wrapper {
14 
-    margin-top: 40px;
15 
-    display: flex;
16 
-    position: relative;
17 
-    // margin-top: 600px;
18 
-    margin: 30px auto;
19 
-    width: 700px;
20 
-
21 
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
22 
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
23 
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
24 
-    .card-box-star {
25 
-      position: absolute;
26 
-      width: auto;
27 
-      height: 44.3px;
28 
-      position: absolute;
29 
-      left: 200px;
30 
-      top: 28px;
31 
-      font-size: 20px;
32 
-      color: @whiteColor;
33 
-      .card-star-image {
34 
-        padding-left: 6px;
35 
-        width: 21px;
36 
-        height: 21px;
37 
-      }
38 
-      .card-star-text {
39 
-        padding-left: 10px;
40 
-        font-size: 20px;
41 
-        color: #333;
42 
-        font-weight: 700;
43 
-      }
44 
-    }
45 
-
46 
-    .left-complete-one {
47 
-      padding-top: 85px;
48 
-      padding-bottom: 43px;
49 
-      position: relative;
50 
-      display: flex;
51 
-      background: @whiteColor;
52 
-      background: radial-gradient(
53 
-            circle at top right,
54 
-            transparent 15px,
55 
-            @whiteColor 0
56 
-          )
57 
-          top right,
58 
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
59 
-          bottom right;
60 
-      background-size: 100% 60%;
61 
-      background-repeat: no-repeat;
62 
-
63 
-      width: 573px;
64 
-      border-radius: 15px 0px 0px 15px;
65 
-      // border-radius: 12px;
66 
-
67 
-      align-items: center;
68 
-      .left-image-1 {
69 
-        width: 145px;
70 
-        height: 44px;
71 
-        position: absolute;
72 
-        top: 22px;
73 
-      }
74 
-      .left-viewText {
75 
-        // background-image: url(@Image-ProCard_hot);
76 
-        // width: 287px;
77 
-        width: auto;
78 
-        height: 44.3px;
79 
-        position: absolute;
80 
-        left: 1px;
81 
-        top: 28px;
82 
-        font-size: 20px;
83 
-        color: @whiteColor;
84 
-      }
85 
-      //图片
86 
-      .title-image {
87 
-        width: 145px;
88 
-        margin-left: 20px;
89 
-        border-radius: 24px;
90 
-        overflow: hidden;
91 
-        position: relative;
92 
-        .image-1 {
93 
-          width: 100%;
94 
-          height: 145px;
95 
-        }
96 
-        .image-2 {
97 
-          width: 89px;
98 
-          height: 34px;
99 
-          position: absolute;
100 
-          left: 0;
101 
-          top: 0;
102 
-        }
103 
-      }
104 
-      // 商品标题
105 
-      .title-content {
106 
-        // padding: 84px 0 56px 20px;
107 
-        padding-left: 18px;
108 
-
109 
-        .Pro-title {
110 
-          .title-text {
111 
-            width: 375px;
112 
-            overflow: hidden;
113 
-            text-overflow: ellipsis;
114 
-            // display: -webkit-box; //必须要
115 
-            -webkit-line-clamp: 1;
116 
-            -webkit-box-orient: vertical;
117 
-            // word-break: break-all; /* 多出文本省略号代替 */
118 
-            text-align: left;
119 
-            font-size: 24px;
120 
-            // padding-bottom: 10px;
121 
-          }
122 
-        }
123 
-        .title-money {
124 
-          // padding-top: 34px;
125 
-          font-size: 24px;
126 
-          // color: red;
127 
-          font-weight: 800;
128 
-        }
129 
-        .title-money-2 {
130 
-          height: 19px;
131 
-          font-size: 20px;
132 
-          font-weight: 400;
133 
-          color: #333333;
134 
-          padding-left: 40px;
135 
-        }
136 
-
137 
-        .title-time {
138 
-          font-size: 24px;
139 
-          // padding-top: 20px;
140 
-          color: #c0c8d3;
141 
-        }
142 
-        .title-position-on {
143 
-          display: flex;
144 
-          font-size: 20px;
145 
-          .title-position {
146 
-            width: 18px;
147 
-            height: 24px;
148 
-            padding-right: 10px;
149 
-            padding-top: 5px;
150 
-          }
151 
-          .title-position-image {
152 
-            align-items: center;
153 
-            font-size: 20px;
154 
-            color: #333;
155 
-          }
156 
-          .title-on {
157 
-            // margin-bottom: 10px;
158 
-            padding-top: 5px;
159 
-            padding-left: 40px;
160 
-            width: 21px;
161 
-            height: 21px;
162 
-            padding-right: 10px;
163 
-          }
164 
-          .title-on-text {
165 
-            align-items: center;
166 
-
167 
-            font-size: 20px;
168 
-            color: #333;
169 
-          }
170 
-        }
171 
-      }
172 
-    }
173 
-    // .left-complete-one:nth-child(2) {
174 
-    //   background: rgb(182, 0, 0);
175 
-    //   padding-top: 10px;
176 
-    // }
177 
-  }
178 
-
179 
-  .right-complete-two {
180 
-    background: @whiteColor;
181 
-    background: radial-gradient(
182 
-          circle at top left,
183 
-          transparent 15px,
184 
-          @whiteColor 0
185 
-        )
186 
-        top left,
187 
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
188 
-        bottom left;
189 
-    background-size: 100% 60%;
190 
-    background-repeat: no-repeat;
191 
-    width: 129px;
192 
-    border-radius: 0 15px 15px 0;
193 
-    position: relative;
194 
-    //右面部分
195 
-    .right-content {
196 
-      // width: 100px;
197 
-      height: 120px;
198 
-      position: absolute;
199 
-      top: 50%;
200 
-      left: 50%;
201 
-      transform: translate(-50%, -50%);
202 
-      // border: 1px solid red;
203 
-      .right-image-2 {
204 
-        width: 76px;
205 
-        height: 66px;
206 
-        margin-top: 1em;
207 
-      }
208 
-      .right-number {
209 
-        // width: 32px;
210 
-        // font-size: 20px;
211 
-        // border-radius: 4px;
212 
-        // border: 2px solid #999;
213 
-        // margin: auto;
214 
-        // text-align: center;
215 
-      }
216 
-      .right-image {
217 
-        // float: convert();
218 
-        width: 35px;
219 
-        height: 34px;
220 
-        margin: 0 auto;
221 
-        align-items: center;
222 
-        margin: auto;
223 
-        padding-left: 8px;
224 
-        // text-align: center;
225 
-      }
226 
-
227 
-      .right-title {
228 
-        font-weight: 700;
229 
-        font-size: 24px;
230 
-        padding-top: 15px;
231 
-        text-align: center;
232 
-      }
233 
-    }
234 
-  }
235 
-  //线条
236 
-  .right-complete-two::after {
237 
-    content: "";
238 
-    position: absolute;
239 
-    top: 15px;
240 
-    margin: 26px auto;
241 
-    height: 70%;
242 
-    border-left: 1px dashed #595959;
243 
-  }
244 
-  .foot {
245 
-    width: 100%;
246 
-    height: 26px;
247 
-    font-size: 28px;
248 
-    font-weight: 400;
249 
-    color: #c0c8d3;
250 
-    line-height: 34px;
251 
-    margin-top: 40px;
252 
-    text-align: center;
253 
-  }
254 
-
255 
-  .button-info {
256 
-    margin-bottom: 70px;
257 
-
258 
-    .button-box {
259 
-      margin: 60px 0;
260 
-      width: calc(100% - 60px);
261 
-      height: 88px;
262 
-      line-height: 88px;
263 
-      background: #274291;
264 
-      border-radius: 12px;
265 
-      color: @whiteColor;
266 
-    }
267 
-  }
268 
-}

+ 0
- 75
src/components/CompoentsOrder/TobeWritten/index.jsx Näytä tiedosto 

@@ -1,75 +0,0 @@
1 
-
2 
-import image from '@/assets/icons/ProCard/8kb.jpg'
3 
-import food from '@/assets/icons/ProCard/food.png'
4 
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
5 
-import QRcode from '@/assets/icons/UserCenter/QRcode.png'
6 
-import './style.less'
7 
-
8 
-
9 
-export default (props) => {
10 
-
11 
-  return (
12 
-    <scroll-view scrollY style='height:100%;'  >
13 
-
14 
-
15 
-      <view className='TobeWritten-box'>
16 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
17 
-        <view class='wrapper'>
18 
-          <view class='left-complete-one'>
19 
-            <image className='left-image-1' src={ProCard_hot}></image>
20 
-            <view className='left-viewText'>
21 
-              返现￥16.00
22 
-            </view>
23 
-            <view className='title-image'>
24 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
25 
-              <image className='image-2' src={food}></image>
26 
-            </view>
27 
-            <view className='title-content'>
28 
-              <view className='Pro-title'>
29 
-                <view className='title-text'>【SEOUL·创意韩国料理】 <text className='title-money-2' >数量：1张</text></view>
30 
-              </view>
31 
-              <text className='title-money' >￥6990元</text>
32 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
33 
-            </view>
34 
-          </view>
35 
-          <view class='right-complete-two'>
36 
-            <view className='right-content'>
37 
-              <image className='right-image' src={QRcode} />
38 
-              <view className='right-title'>扫码核销</view>
39 
-            </view>
40 
-          </view>
41 
-        </view>
42 
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
43 
-        <view class='wrapper'>
44 
-          <view class='left-complete-one'>
45 
-            <image className='left-image-1' src={ProCard_hot}></image>
46 
-            <view className='left-viewText'>
47 
-              返现￥16.00
48 
-            </view>
49 
-            <view className='title-image'>
50 
-              <image className='image-1' mode='scaleToFill' src={image}></image>
51 
-              <image className='image-2' src={food}></image>
52 
-            </view>
53 
-            <view className='title-content'>
54 
-              <view className='Pro-title'>
55 
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
56 
-              </view>
57 
-              <text className='title-money' >￥6990元</text>
58 
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
59 
-            </view>
60 
-          </view>
61 
-          <view class='right-complete-two'>
62 
-            <view className='right-content'>
63 
-              <image className='right-image' src={QRcode} />
64 
-              <view className='right-title'>扫码核销</view>
65 
-            </view>
66 
-          </view>
67 
-        </view>
68 
-
69 
-        <view className='foot'>
70 
-          已经到底了~
71 
-        </view>
72 
-      </view>
73 
-    </scroll-view>
74 
-  )
75 
-}

+ 0
- 269
src/components/CompoentsOrder/TobeWritten/style.less Näytä tiedosto 

@@ -1,269 +0,0 @@
1 
-@whiteColor: #fff;
2 
-
3 
-.TobeWritten-box {
4 
-  margin: 40px auto;
5 
-  padding: 0 30px;
6 
-  .OrderNumber {
7 
-    // width: 234px;
8 
-    height: 19px;
9 
-    font-size: 20px;
10 
-    font-weight: 400;
11 
-    color: #666666;
12 
-    line-height: 44px;
13 
-  }
14 
-  .wrapper {
15 
-    margin-top: 40px;
16 
-    display: flex;
17 
-    position: relative;
18 
-    // margin-top: 600px;
19 
-    margin: 30px auto;
20 
-    width: 700px;
21 
-
22 
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
23 
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
24 
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
25 
-    .card-box-star {
26 
-      position: absolute;
27 
-      width: auto;
28 
-      height: 44.3px;
29 
-      position: absolute;
30 
-      left: 200px;
31 
-      top: 28px;
32 
-      font-size: 20px;
33 
-      color: @whiteColor;
34 
-      .card-star-image {
35 
-        padding-left: 6px;
36 
-        width: 21px;
37 
-        height: 21px;
38 
-      }
39 
-      .card-star-text {
40 
-        padding-left: 10px;
41 
-        font-size: 20px;
42 
-        color: #333;
43 
-        font-weight: 700;
44 
-      }
45 
-    }
46 
-
47 
-    .left-complete-one {
48 
-      padding-top: 85px;
49 
-      padding-bottom: 43px;
50 
-      position: relative;
51 
-      display: flex;
52 
-      background: @whiteColor;
53 
-      background: radial-gradient(
54 
-            circle at top right,
55 
-            transparent 15px,
56 
-            @whiteColor 0
57 
-          )
58 
-          top right,
59 
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
60 
-          bottom right;
61 
-      background-size: 100% 60%;
62 
-      background-repeat: no-repeat;
63 
-
64 
-      width: 573px;
65 
-      border-radius: 15px 0px 0px 15px;
66 
-      // border-radius: 12px;
67 
-
68 
-      align-items: center;
69 
-      .left-image-1 {
70 
-        width: 145px;
71 
-        height: 44px;
72 
-        position: absolute;
73 
-        top: 22px;
74 
-      }
75 
-      .left-viewText {
76 
-        // background-image: url(@Image-ProCard_hot);
77 
-        // width: 287px;
78 
-        width: auto;
79 
-        height: 44.3px;
80 
-        position: absolute;
81 
-        left: 1px;
82 
-        top: 28px;
83 
-        font-size: 20px;
84 
-        color: @whiteColor;
85 
-      }
86 
-      //图片
87 
-      .title-image {
88 
-        width: 145px;
89 
-        margin-left: 20px;
90 
-        border-radius: 24px;
91 
-        overflow: hidden;
92 
-        position: relative;
93 
-        .image-1 {
94 
-          width: 100%;
95 
-          height: 145px;
96 
-        }
97 
-        .image-2 {
98 
-          width: 89px;
99 
-          height: 34px;
100 
-          position: absolute;
101 
-          left: 0;
102 
-          top: 0;
103 
-        }
104 
-      }
105 
-      // 商品标题
106 
-      .title-content {
107 
-        // padding: 84px 0 56px 20px;
108 
-        padding-left: 18px;
109 
-
110 
-        .Pro-title {
111 
-          .title-text {
112 
-            width: 375px;
113 
-            overflow: hidden;
114 
-            text-overflow: ellipsis;
115 
-            // display: -webkit-box; //必须要
116 
-            -webkit-line-clamp: 1;
117 
-            -webkit-box-orient: vertical;
118 
-            // word-break: break-all; /* 多出文本省略号代替 */
119 
-            text-align: left;
120 
-            font-size: 24px;
121 
-            // padding-bottom: 10px;
122 
-          }
123 
-        }
124 
-        .title-money {
125 
-          // padding-top: 34px;
126 
-          font-size: 24px;
127 
-          // color: red;
128 
-          font-weight: 800;
129 
-        }
130 
-        .title-money-2 {
131 
-          height: 19px;
132 
-          font-size: 20px;
133 
-          font-weight: 400;
134 
-          color: #333333;
135 
-          padding-left: 40px;
136 
-        }
137 
-
138 
-        .title-time {
139 
-          font-size: 24px;
140 
-          // padding-top: 20px;
141 
-          color: #c0c8d3;
142 
-        }
143 
-        .title-position-on {
144 
-          display: flex;
145 
-          font-size: 20px;
146 
-          .title-position {
147 
-            width: 18px;
148 
-            height: 24px;
149 
-            padding-right: 10px;
150 
-            padding-top: 5px;
151 
-          }
152 
-          .title-position-image {
153 
-            align-items: center;
154 
-            font-size: 20px;
155 
-            color: #333;
156 
-          }
157 
-          .title-on {
158 
-            // margin-bottom: 10px;
159 
-            padding-top: 5px;
160 
-            padding-left: 40px;
161 
-            width: 21px;
162 
-            height: 21px;
163 
-            padding-right: 10px;
164 
-          }
165 
-          .title-on-text {
166 
-            align-items: center;
167 
-
168 
-            font-size: 20px;
169 
-            color: #333;
170 
-          }
171 
-        }
172 
-      }
173 
-    }
174 
-    // .left-complete-one:nth-child(2) {
175 
-    //   background: rgb(182, 0, 0);
176 
-    //   padding-top: 10px;
177 
-    // }
178 
-  }
179 
-
180 
-  .right-complete-two {
181 
-    background: @whiteColor;
182 
-    background: radial-gradient(
183 
-          circle at top left,
184 
-          transparent 15px,
185 
-          @whiteColor 0
186 
-        )
187 
-        top left,
188 
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
189 
-        bottom left;
190 
-    background-size: 100% 60%;
191 
-    background-repeat: no-repeat;
192 
-    width: 129px;
193 
-    border-radius: 0 15px 15px 0;
194 
-    position: relative;
195 
-    //右面部分
196 
-    .right-content {
197 
-      // width: 100px;
198 
-      height: 120px;
199 
-      position: absolute;
200 
-      top: 50%;
201 
-      left: 50%;
202 
-      transform: translate(-50%, -50%);
203 
-      // border: 1px solid red;
204 
-      .right-image-2 {
205 
-        width: 76px;
206 
-        height: 66px;
207 
-        margin-top: 1em;
208 
-      }
209 
-      .right-number {
210 
-        // width: 32px;
211 
-        // font-size: 20px;
212 
-        // border-radius: 4px;
213 
-        // border: 2px solid #999;
214 
-        // margin: auto;
215 
-        // text-align: center;
216 
-      }
217 
-      .right-image {
218 
-        // float: convert();
219 
-        width: 35px;
220 
-        height: 34px;
221 
-        margin: 0 auto;
222 
-        align-items: center;
223 
-        margin: auto;
224 
-        padding-left: 15px;
225 
-        // text-align: center;
226 
-      }
227 
-
228 
-      .right-title {
229 
-        font-weight: 700;
230 
-        font-size: 24px;
231 
-        padding-top: 15px;
232 
-        text-align: center;
233 
-      }
234 
-    }
235 
-  }
236 
-  //线条
237 
-  .right-complete-two::after {
238 
-    content: "";
239 
-    position: absolute;
240 
-    top: 15px;
241 
-    margin: 26px auto;
242 
-    height: 70%;
243 
-    border-left: 1px dashed #595959;
244 
-  }
245 
-  .foot {
246 
-    width: 100%;
247 
-    height: 26px;
248 
-    font-size: 28px;
249 
-    font-weight: 400;
250 
-    color: #c0c8d3;
251 
-    line-height: 34px;
252 
-    margin-top: 40px;
253 
-    text-align: center;
254 
-  }
255 
-
256 
-  .button-info {
257 
-    margin-bottom: 70px;
258 
-
259 
-    .button-box {
260 
-      margin: 60px 0;
261 
-      width: calc(100% - 60px);
262 
-      height: 88px;
263 
-      line-height: 88px;
264 
-      background: #274291;
265 
-      border-radius: 12px;
266 
-      color: @whiteColor;
267 
-    }
268 
-  }
269 
-}

+ 264
- 256
src/components/CompoentsOrder/complete/index.jsx Näytä tiedosto 

@@ -1,5 +1,5 @@
1 1 
 import React, { useState, useEffect } from "react";
2 
-import Taro from "@tarojs/taro";
2 
+import Taro, { useDidShow } from "@tarojs/taro";
3 3 
 import { getOrderSub, getQrcode } from "@/services/payOrder";
4 4 
 import formatTime from "@/utils/formatTime";
5 5 
 import image from "@/assets/icons/ProCard/8kb.jpg";
 
@@ -13,17 +13,17 @@ import QRcode from "@/assets/icons/UserCenter/QRcode.png";
13 13 
 import Pay from "@/assets/icons/GuideCheck/Pay_logo.png";
14 14 
 import starOn from "@/assets/icons/GuideCheck/starOn.png";
15 15 
 import starOff from "@/assets/icons/GuideCheck/starOff.png";
16 
-import { useDidShow } from "@tarojs/taro";
16 
+import AlreadyUsed from "../AlreadyUsed";
17 17 
 import "./style.less";
18 18
19 19 
 const scoreList = new Array(5).fill(0);
20 20 
 const score = "3.9";
21 21
22 22 
 const dict = {
23 
-  0: { status: 0,isVerified: 0  },
24 
-  1: { status: 1,isVerified: 0 },
23 
+  0: { status: 0, isVerified: 0 },
24 
+  1: { status: 1, isVerified: 0 },
25 25 
   2: { isVerified: 1 },
26 
-  3: { status: 9,isVerified: 0 },
26 
+  3: { status: 9, isVerified: 0 },
27 27 
 };
28 28 
 export default (props) => {
29 29 
   const { type } = props;
 
@@ -32,15 +32,15 @@ export default (props) => {
32 32 
   const [pageNum, setNumber] = useState(1);
33 33 
   const [HasNextPage, setHasNextPage] = useState(true);
34 34
35 
-  useDidShow(()=>{
35 
+  useDidShow(() => {
36 36 
     setNumber(1)
37 37 
   })
38 38
39 39 
   useEffect(() => {
40 
-    if(pageNum){
40 
+    if (pageNum) {
41 41 
       getList();
42 42 
     }
43 
-
43 
+
44 44 
   }, [pageNum]);
45 45
46 46 
   const pageRefresh = () => {
 
@@ -71,6 +71,13 @@ export default (props) => {
71 71 
     }
72 72 
   };
73 73
74 
+  const [show, setShow] = useState(false)
75 
+
76 
+  //评价
77 
+  const evaluation = () => {
78 
+    setShow(true)
79 
+  }
80 
+
74 81 
   useEffect(() => {
75 82 
     // 下拉刷新触发
76 83 
     if (IsPull) {
 
@@ -111,295 +118,296 @@ export default (props) => {
111 118 
   return (
112 119 
     <scroll-view
113 120 
       scrollY
114 
-      style="height: 90vh;"
121 
+      style='height: 90vh;'
115 122 
       refresher-enabled
116 123 
       refresher-triggered={IsPull}
117 124 
       onrefresherrefresh={pageRefresh}
118 
-      refresher-background="#fff"
125 
+      refresher-background='#fff'
119 126 
       onscrolltolower={pageLoadMore}
120 127 
     >
121 128 
       {
122 129 
         list.length == 0 ?
123 
-          <NoData />:
124 
-      <view className="complete-boxs">
125 
-        {list.map((item, index) => {
126 
-          /* 待支付 */
127 
-          if (item.status === 0) {
128 
-            return (
129 
-              <view key={`${type}-${item.orderId}`}>
130 
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
130 
+          <NoData /> :
131 
+          <view className='complete-boxs'>
132 
+            <AlreadyUsed show={show} maskClosable={show} list={list} />
133 
+            {list.map((item, index) => {
134 
+              /* 待支付 */
135 
+              if (item.status === 0) {
136 
+                return (
137 
+                  <view key={`${type}-${item.orderId}`}>
138 
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
131 139
132 
-                <view class="wrapper">
133 
-                  <view class="left-complete-one">
134 
-                    <image className="left-image-1" src={ProCard_hot}></image>
135 
-                    <view className="left-viewText">
136 
-                      返现￥{(item.cashback / 100).toFixed(2)}
137 
-                    </view>
138 
-                    <view className="title-image">
139 
-                      <image
140 
-                        className="image-1"
141 
-                        mode="scaleToFill"
142 
-                        src={item.poster || image}
143 
-                      ></image>
144 
-                      <image className="image-2" src={food}></image>
145 
-                    </view>
146 
-                    <view className="title-content">
147 
-                      <view className="Pro-title">
148 
-                        <view className="title-text">
149 
-                          {item.packageDescription}
150 
-                          <text className="title-money-2">
151 
-                            数量：{item.amount}张
140 
+                    <view class='wrapper'>
141 
+                      <view class='left-complete-one'>
142 
+                        <image className='left-image-1' src={ProCard_hot}></image>
143 
+                        <view className='left-viewText'>
144 
+                          返现￥{(item.cashback / 100).toFixed(2)}
145 
+                        </view>
146 
+                        <view className='title-image'>
147 
+                          <image
148 
+                            className='image-1'
149 
+                            mode='scaleToFill'
150 
+                            src={item.poster || image}
151 
+                          ></image>
152 
+                          <image className='image-2' src={food}></image>
153 
+                        </view>
154 
+                        <view className='title-content'>
155 
+                          <view className='Pro-title'>
156 
+                            <view className='title-text'>
157 
+                              {item.packageDescription}
158 
+                              <text className='title-money-2'>
159 
+                                数量：{item.amount}张
160 
+                              </text>
161 
+                            </view>
162 
+                          </view>
163 
+                          <text className='title-money'>
164 
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
152 165 
                           </text>
166 
+                          <view className='title-time'>
167 
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
168 
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
169 
+                          </view>
153 170 
                         </view>
154 171 
                       </view>
155 
-                      <text className="title-money">
156 
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
157 
-                      </text>
158 
-                      <view className="title-time">
159 
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
160 
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
172 
+                      <view class='right-complete-two'>
173 
+                        <view
174 
+                          className='right-content'
175 
+                          onClick={() => {
176 
+                            Taro.navigateTo({
177 
+                              url: `/pages/PayOrder/index?orderId=${item.orderId}`,
178 
+                            });
179 
+                          }}
180 
+                        >
181 
+                          <image className='right-image' src={Pay} />
182 
+                          <view className='right-title'>支付</view>
183 
+                        </view>
161 184 
                       </view>
162 185 
                     </view>
163 186 
                   </view>
164 
-                  <view class="right-complete-two">
165 
-                    <view
166 
-                      className="right-content"
167 
-                      onClick={() => {
168 
-                        Taro.navigateTo({
169 
-                          url: `/pages/PayOrder/index?orderId=${item.orderId}`,
170 
-                        });
171 
-                      }}
172 
-                    >
173 
-                      <image className="right-image" src={Pay} />
174 
-                      <view className="right-title">支付</view>
175 
-                    </view>
176 
-                  </view>
177 
-                </view>
178 
-              </view>
179 
-            );
180 
-          }
181 
-          /* 待核销 */
182 
-          if (item.status === 1 && item.isVerified == 0) {
183 
-            return (
184 
-              <view key={`${type}-${item.orderId}`}>
185 
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
186 
-                <view class="wrapper">
187 
-                  <view class="left-complete-one">
188 
-                    <image className="left-image-1" src={ProCard_hot}></image>
189 
-                    <view className="left-viewText">
190 
-                      返现￥{(item.cashback / 100).toFixed(2)}
191 
-                    </view>
192 
-                    <view className="title-image">
193 
-                      <image
194 
-                        className="image-1"
195 
-                        mode="scaleToFill"
196 
-                        src={item.poster || image}
197 
-                      ></image>
198 
-                      <image className="image-2" src={food}></image>
199 
-                    </view>
200 
-                    <view className="title-content">
201 
-                      <view className="Pro-title">
202 
-                        <view className="title-text">
203 
-                          {item.packageDescription}
204 
-                          <text className="title-money-2">
205 
-                            数量：{item.amount}张
187 
+                );
188 
+              }
189 
+              /* 待核销 */
190 
+              if (item.status === 1 && item.isVerified == 0) {
191 
+                return (
192 
+                  <view key={`${type}-${item.orderId}`}>
193 
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
194 
+                    <view class='wrapper'>
195 
+                      <view class='left-complete-one'>
196 
+                        <image className='left-image-1' src={ProCard_hot}></image>
197 
+                        <view className='left-viewText'>
198 
+                          返现￥{(item.cashback / 100).toFixed(2)}
199 
+                        </view>
200 
+                        <view className='title-image'>
201 
+                          <image
202 
+                            className='image-1'
203 
+                            mode='scaleToFill'
204 
+                            src={item.poster || image}
205 
+                          ></image>
206 
+                          <image className='image-2' src={food}></image>
207 
+                        </view>
208 
+                        <view className='title-content'>
209 
+                          <view className='Pro-title'>
210 
+                            <view className='title-text'>
211 
+                              {item.packageDescription}
212 
+                              <text className='title-money-2'>
213 
+                                数量：{item.amount}张
214 
+                              </text>
215 
+                            </view>
216 
+                          </view>
217 
+                          <text className='title-money'>
218 
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
206 219 
                           </text>
220 
+                          <view className='title-time'>
221 
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
222 
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
223 
+                          </view>
207 224 
                         </view>
208 225 
                       </view>
209 
-                      <text className="title-money">
210 
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
211 
-                      </text>
212 
-                      <view className="title-time">
213 
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
214 
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
226 
+                      <view class='right-complete-two'>
227 
+                        <view
228 
+                          className='right-content'
229 
+                          onClick={() => onWriteOff(item)}
230 
+                        >
231 
+                          <image className='right-image' src={QRcode} />
232 
+                          <view className='right-title'>扫码核销</view>
233 
+                        </view>
215 234 
                       </view>
216 235 
                     </view>
217 236 
                   </view>
218 
-                  <view class="right-complete-two">
219 
-                    <view
220 
-                      className="right-content"
221 
-                      onClick={() => onWriteOff(item)}
222 
-                    >
223 
-                      <image className="right-image" src={QRcode} />
224 
-                      <view className="right-title">扫码核销</view>
225 
-                    </view>
226 
-                  </view>
227 
-                </view>
228 
-              </view>
229 
-            );
230 
-          }
231 
-           /* 已退费 */
232 
-           if (item.status === 2 && item.isVerified == 0) {
233 
-            return (
234 
-              <view key={`${type}-${item.orderId}`}>
235 
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
236 
-                <view class="wrapper">
237 
-                  <view class="left-complete-one">
238 
-                    <image className="left-image-1" src={ProCard_hot}></image>
239 
-                    <view className="left-viewText">
240 
-                      返现￥{(item.cashback / 100).toFixed(2)}
241 
-                    </view>
242 
-                    <view className="title-image">
243 
-                      <image
244 
-                        className="image-1"
245 
-                        mode="scaleToFill"
246 
-                        src={item.poster || image}
247 
-                      ></image>
248 
-                      <image className="image-2" src={food}></image>
249 
-                    </view>
250 
-                    <view className="title-content">
251 
-                      <view className="Pro-title">
252 
-                        <view className="title-text">
253 
-                          {item.packageDescription}
254 
-                          <text className="title-money-2">
255 
-                            数量：{item.amount}张
237 
+                );
238 
+              }
239 
+              /* 已退费 */
240 
+              if (item.status === 2 && item.isVerified == 0) {
241 
+                return (
242 
+                  <view key={`${type}-${item.orderId}`}>
243 
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
244 
+                    <view class='wrapper'>
245 
+                      <view class='left-complete-one'>
246 
+                        <image className='left-image-1' src={ProCard_hot}></image>
247 
+                        <view className='left-viewText'>
248 
+                          返现￥{(item.cashback / 100).toFixed(2)}
249 
+                        </view>
250 
+                        <view className='title-image'>
251 
+                          <image
252 
+                            className='image-1'
253 
+                            mode='scaleToFill'
254 
+                            src={item.poster || image}
255 
+                          ></image>
256 
+                          <image className='image-2' src={food}></image>
257 
+                        </view>
258 
+                        <view className='title-content'>
259 
+                          <view className='Pro-title'>
260 
+                            <view className='title-text'>
261 
+                              {item.packageDescription}
262 
+                              <text className='title-money-2'>
263 
+                                数量：{item.amount}张
264 
+                              </text>
265 
+                            </view>
266 
+                          </view>
267 
+                          <text className='title-money'>
268 
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
256 269 
                           </text>
270 
+                          <view className='title-time'>
271 
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
272 
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
273 
+                          </view>
257 274 
                         </view>
258 275 
                       </view>
259 
-                      <text className="title-money">
260 
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
261 
-                      </text>
262 
-                      <view className="title-time">
263 
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
264 
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
276 
+                      <view class='right-complete-two'>
277 
+                        <view className='right-content'>
278 
+                          <image className='right-image-2' src={refund} />
279 
+                        </view>
265 280 
                       </view>
266 281 
                     </view>
267 282 
                   </view>
268 
-                  <view class="right-complete-two">
269 
-                    <view className="right-content">
270 
-                      <image className="right-image-2" src={refund} />
271 
-                    </view>
272 
-                  </view>
273 
-                </view>
274 
-              </view>
275 
-            );
276 
-          }
277 
-          /* 已过期 */
278 
-          if (item.status === 9) {
279 
-            return (
280 
-              <view key={`${type}-${item.orderId}`}>
281 
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
282 
-                <view class="wrapper">
283 
-                  <view class="left-complete-one">
284 
-                    <image className="left-image-1" src={ProCard_hot}></image>
285 
-                    <view className="left-viewText">
286 
-                      返现￥{(item.cashback / 100).toFixed(2)}
287 
-                    </view>
288 
-                    {/* 评分 */}
289 
-                    <view className="card-box-star">
290 
-                      {scoreList.map((_, index) => {
291 
-                        const src = index + 1 <= item.score ? starOn : starOff;
292 
-                        return (
283 
+                );
284 
+              }
285 
+              /* 已过期 */
286 
+              if (item.status === 9) {
287 
+                return (
288 
+                  <view key={`${type}-${item.orderId}`}>
289 
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
290 
+                    <view class='wrapper'>
291 
+                      <view class='left-complete-one'>
292 
+                        <image className='left-image-1' src={ProCard_hot}></image>
293 
+                        <view className='left-viewText'>
294 
+                          返现￥{(item.cashback / 100).toFixed(2)}
295 
+                        </view>
296 
+                        {/* 评分 */}
297 
+                        <view className='card-box-star'>
298 
+                          {scoreList.map((_, index) => {
299 
+                            const src = index + 1 <= item.score ? starOn : starOff;
300 
+                            return (
301 
+                              <image
302 
+                                className='card-star-image'
303 
+                                key={index}
304 
+                                src={src}
305 
+                              />
306 
+                            );
307 
+                          })}
308 
+                          <text className='card-star-text'>{item.score}</text>
309 
+                        </view>
310 
+                        <view className='title-image'>
293 311 
                           <image
294 
-                            className="card-star-image"
295 
-                            key={index}
296 
-                            src={src}
297 
-                          />
298 
-                        );
299 
-                      })}
300 
-                      <text className="card-star-text">{item.score}</text>
301 
-                    </view>
302 
-                    <view className="title-image">
303 
-                      <image
304 
-                        className="image-1"
305 
-                        mode="scaleToFill"
306 
-                        src={item.poster || image}
307 
-                      ></image>
308 
-                      <image className="image-2" src={food}></image>
309 
-                    </view>
310 
-                    <view className="title-content">
311 
-                      <view className="Pro-title">
312 
-                        <view className="title-text">
313 
-                          {item.packageDescription}
314 
-                          <text className="title-money-2">
315 
-                            数量：{item.amount}张
312 
+                            className='image-1'
313 
+                            mode='scaleToFill'
314 
+                            src={item.poster || image}
315 
+                          ></image>
316 
+                          <image className='image-2' src={food}></image>
317 
+                        </view>
318 
+                        <view className='title-content'>
319 
+                          <view className='Pro-title'>
320 
+                            <view className='title-text'>
321 
+                              {item.packageDescription}
322 
+                              <text className='title-money-2'>
323 
+                                数量：{item.amount}张
324 
+                              </text>
325 
+                            </view>
326 
+                          </view>
327 
+                          <text className='title-money'>
328 
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
316 329 
                           </text>
330 
+                          <view className='title-time'>
331 
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
332 
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
333 
+                          </view>
317 334 
                         </view>
318 335 
                       </view>
319 
-                      <text className="title-money">
320 
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
321 
-                      </text>
322 
-                      <view className="title-time">
323 
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
324 
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
336 
+                      <view class='right-complete-two'>
337 
+                        <view className='right-content'>
338 
+                          <image className='right-image-2' src={Null} />
339 
+                        </view>
325 340 
                       </view>
326 341 
                     </view>
327 342 
                   </view>
328 
-                  <view class="right-complete-two">
329 
-                    <view className="right-content">
330 
-                      <image className="right-image-2" src={Null} />
331 
-                    </view>
332 
-                  </view>
333 
-                </view>
334 
-              </view>
335 
-            );
336 
-          }
337 
-          /* 已使用 */
338 
-          if (item.isVerified == 1) {
339 
-            return (
340 
-              <view key={`${type}-${item.orderId}`}>
341 
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
342 
-                <view class="wrapper">
343 
-                  <view class="left-complete-one">
344 
-                    <image className="left-image-1" src={ProCard_hot}></image>
345 
-                    <view className="left-viewText">
346 
-                      返现￥{(item.cashback / 100).toFixed(2)}
347 
-                    </view>
348 
-                    {/* 评分 */}
349 
-                    <view className="card-box-star">
350 
-                      {scoreList.map((_, index) => {
351 
-                        const src = index + 1 <= item.score ? starOn : starOff;
352 
-                        return (
343 
+                );
344 
+              }
345 
+              /* 已使用 */
346 
+              if (item.isVerified == 1) {
347 
+                return (
348 
+                  <view key={`${type}-${item.orderId}`}>
349 
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
350 
+                    <view class='wrapper'>
351 
+                      <view class='left-complete-one'>
352 
+                        <image className='left-image-1' src={ProCard_hot}></image>
353 
+                        <view className='left-viewText'>
354 
+                          返现￥{(item.cashback / 100).toFixed(2)}
355 
+                        </view>
356 
+                        {/* 评分 */}
357 
+                        <view className='card-box-star'>
358 
+                          {scoreList.map((_, index) => {
359 
+                            const src = index + 1 <= item.score ? starOn : starOff;
360 
+                            return (
361 
+                              <image
362 
+                                className='card-star-image'
363 
+                                key={index}
364 
+                                src={src}
365 
+                              />
366 
+                            );
367 
+                          })}
368 
+                          <text className='card-star-text'>{item.score}</text>
369 
+                        </view>
370 
+                        <view className='title-image'>
353 371 
                           <image
354 
-                            className="card-star-image"
355 
-                            key={index}
356 
-                            src={src}
357 
-                          />
358 
-                        );
359 
-                      })}
360 
-                      <text className="card-star-text">{item.score}</text>
361 
-                    </view>
362 
-                    <view className="title-image">
363 
-                      <image
364 
-                        className="image-1"
365 
-                        mode="scaleToFill"
366 
-                        src={item.poster || image}
367 
-                      ></image>
368 
-                      <image className="image-2" src={food}></image>
369 
-                    </view>
370 
-                    <view className="title-content">
371 
-                      <view className="Pro-title">
372 
-                        <view className="title-text">
373 
-                          {item.packageDescription}
374 
-                          <text className="title-money-2">
375 
-                            数量：{item.amount}张
372 
+                            className='image-1'
373 
+                            mode='scaleToFill'
374 
+                            src={item.poster || image}
375 
+                          ></image>
376 
+                          <image className='image-2' src={food}></image>
377 
+                        </view>
378 
+                        <view className='title-content'>
379 
+                          <view className='Pro-title'>
380 
+                            <view className='title-text'>
381 
+                              {item.packageDescription}
382 
+                              <text className='title-money-2'>
383 
+                                数量：{item.amount}张
384 
+                              </text>
385 
+                            </view>
386 
+                          </view>
387 
+                          <text className='title-money'>
388 
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
376 389 
                           </text>
390 
+                          <view className='title-time'>
391 
+                            核销时间：{" "}
392 
+                            {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
393 
+                          </view>
377 394 
                         </view>
378 395 
                       </view>
379 
-                      <text className="title-money">
380 
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
381 
-                      </text>
382 
-                      <view className="title-time">
383 
-                        核销时间：{" "}
384 
-                        {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
396 
+                      <view class='right-complete-two' onClick={() => evaluation()} >
397 
+                        <view className='right-content'>
398 
+                          <image className='right-image' src={Evaluation} />
399 
+                          <view className='right-title'>评价</view>
400 
+                        </view>
385 401 
                       </view>
386 402 
                     </view>
387 403 
                   </view>
388 
-                  <view class="right-complete-two">
389 
-                    <view className="right-content">
390 
-                      <image className="right-image" src={Evaluation} />
391 
-                      <view className="right-title">评价</view>
392 
-                    </view>
393 
-                  </view>
394 
-                </view>
395 
-              </view>
396 
-            );
397 
-          }
398 
-        })}
404 
+                );
405 
+              }
406 
+            })}
399 407
400 
-        <view className="foot">已经到底了~</view>
401 
-      </view>
402 
-        }
408 
+            <view className='foot'>已经到底了~</view>
409 
+          </view>
410 
+      }
403 411 
     </scroll-view>
404 412 
   );
405 413 
 };

+ 324
- 0
src/components/CompoentsOrder/complete/style.less Näytä tiedosto 

@@ -3,6 +3,7 @@
3 3 
 .complete-boxs {
4 4 
   margin: 40px auto;
5 5 
   padding: 0 30px;
6 
+
6 7 
   .OrderNumber {
7 8 
     height: 19px;
8 9 
     font-size: 20px;
 
@@ -228,4 +229,327 @@
228 229 
     margin-top: 40px;
229 230 
     text-align: center;
230 231 
   }
232 
+  .AlreadyUsed-box {
233 
+    margin: 40px auto;
234 
+    padding: 0 30px;
235 
+
236 
+    .item-center-Number {
237 
+      .card-box-star {
238 
+        margin-top: 23px;
239 
+        width: auto;
240 
+        height: 44.3px;
241 
+        font-size: 20px;
242 
+        color: @whiteColor;
243 
+        .card-box-star-text {
244 
+          display: inline-block;
245 
+          height: 22px;
246 
+          font-size: 24px;
247 
+          font-weight: 400;
248 
+          color: #666666;
249 
+        }
250 
+        .card-star-image {
251 
+          padding-left: 30px;
252 
+          width: 21px;
253 
+          height: 21px;
254 
+        }
255 
+        .card-star-text {
256 
+          padding-left: 10px;
257 
+          font-size: 20px;
258 
+          color: #333;
259 
+          font-weight: 700;
260 
+        }
261 
+      }
262 
+    }
263 
+
264 
+    .buy-button-box {
265 
+      width: 100%;
266 
+      margin: 40px 0 0 0;
267 
+
268 
+      .button-Cancel {
269 
+        display: inline-block;
270 
+        width: 236px;
271 
+        height: 78px;
272 
+        border: 2px solid #274291;
273 
+        font-size: 30px;
274 
+        font-weight: bold;
275 
+        color: #274291;
276 
+        border-radius: 12px;
277 
+        margin-right: 80px;
278 
+      }
279 
+      .button-OK {
280 
+        display: inline-block;
281 
+
282 
+        width: 236px;
283 
+        height: 78px;
284 
+        background: #274291;
285 
+        border-radius: 12px;
286 
+        font-size: 30px;
287 
+        font-weight: bold;
288 
+        color: #ffffff;
289 
+      }
290 
+    }
291 
+    .OrderNumber {
292 
+      // width: 234px;
293 
+      height: 19px;
294 
+      font-size: 20px;
295 
+      font-weight: 400;
296 
+      color: #666666;
297 
+      line-height: 44px;
298 
+    }
299 
+    .wrapper {
300 
+      margin-top: 40px;
301 
+      display: flex;
302 
+      position: relative;
303 
+      // margin-top: 600px;
304 
+      margin: 30px auto;
305 
+      width: 700px;
306 
+
307 
+      // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
308 
+      // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
309 
+      filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
310 
+      .card-box-star {
311 
+        position: absolute;
312 
+        width: auto;
313 
+        height: 44.3px;
314 
+        position: absolute;
315 
+        left: 200px;
316 
+        top: 28px;
317 
+        font-size: 20px;
318 
+        color: @whiteColor;
319 
+        .card-star-image {
320 
+          padding-left: 6px;
321 
+          width: 21px;
322 
+          height: 21px;
323 
+        }
324 
+        .card-star-text {
325 
+          padding-left: 10px;
326 
+          font-size: 20px;
327 
+          color: #333;
328 
+          font-weight: 700;
329 
+        }
330 
+      }
331 
+
332 
+      .left-complete-one {
333 
+        padding-top: 85px;
334 
+        padding-bottom: 43px;
335 
+        position: relative;
336 
+        display: flex;
337 
+        background: @whiteColor;
338 
+        background: radial-gradient(
339 
+              circle at top right,
340 
+              transparent 15px,
341 
+              @whiteColor 0
342 
+            )
343 
+            top right,
344 
+          radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
345 
+            bottom right;
346 
+        background-size: 100% 60%;
347 
+        background-repeat: no-repeat;
348 
+
349 
+        width: 573px;
350 
+        border-radius: 15px 0px 0px 15px;
351 
+        // border-radius: 12px;
352 
+
353 
+        align-items: center;
354 
+        .left-image-1 {
355 
+          width: 145px;
356 
+          height: 44px;
357 
+          position: absolute;
358 
+          top: 22px;
359 
+        }
360 
+        .left-viewText {
361 
+          // background-image: url(@Image-ProCard_hot);
362 
+          // width: 287px;
363 
+          width: auto;
364 
+          height: 44.3px;
365 
+          position: absolute;
366 
+          left: 1px;
367 
+          top: 28px;
368 
+          font-size: 20px;
369 
+          color: @whiteColor;
370 
+        }
371 
+        //图片
372 
+        .title-image {
373 
+          width: 145px;
374 
+          margin-left: 20px;
375 
+          border-radius: 24px;
376 
+          overflow: hidden;
377 
+          position: relative;
378 
+          .image-1 {
379 
+            width: 100%;
380 
+            height: 145px;
381 
+          }
382 
+          .image-2 {
383 
+            width: 89px;
384 
+            height: 34px;
385 
+            position: absolute;
386 
+            left: 0;
387 
+            top: 0;
388 
+          }
389 
+        }
390 
+        // 商品标题
391 
+        .title-content {
392 
+          // padding: 84px 0 56px 20px;
393 
+          padding-left: 18px;
394 
+
395 
+          .Pro-title {
396 
+            .title-text {
397 
+              width: 375px;
398 
+              overflow: hidden;
399 
+              text-overflow: ellipsis;
400 
+              // display: -webkit-box; //必须要
401 
+              -webkit-line-clamp: 1;
402 
+              -webkit-box-orient: vertical;
403 
+              // word-break: break-all; /* 多出文本省略号代替 */
404 
+              text-align: left;
405 
+              font-size: 24px;
406 
+              // padding-bottom: 10px;
407 
+            }
408 
+          }
409 
+          .title-money {
410 
+            // padding-top: 34px;
411 
+            font-size: 24px;
412 
+            // color: red;
413 
+            font-weight: 800;
414 
+          }
415 
+          .title-money-2 {
416 
+            height: 19px;
417 
+            font-size: 20px;
418 
+            font-weight: 400;
419 
+            color: #333333;
420 
+            padding-left: 40px;
421 
+          }
422 
+
423 
+          .title-time {
424 
+            font-size: 24px;
425 
+            // padding-top: 20px;
426 
+            color: #c0c8d3;
427 
+          }
428 
+          .title-position-on {
429 
+            display: flex;
430 
+            font-size: 20px;
431 
+            .title-position {
432 
+              width: 18px;
433 
+              height: 24px;
434 
+              padding-right: 10px;
435 
+              padding-top: 5px;
436 
+            }
437 
+            .title-position-image {
438 
+              align-items: center;
439 
+              font-size: 20px;
440 
+              color: #333;
441 
+            }
442 
+            .title-on {
443 
+              // margin-bottom: 10px;
444 
+              padding-top: 5px;
445 
+              padding-left: 40px;
446 
+              width: 21px;
447 
+              height: 21px;
448 
+              padding-right: 10px;
449 
+            }
450 
+            .title-on-text {
451 
+              align-items: center;
452 
+
453 
+              font-size: 20px;
454 
+              color: #333;
455 
+            }
456 
+          }
457 
+        }
458 
+      }
459 
+      // .left-complete-one:nth-child(2) {
460 
+      //   background: rgb(182, 0, 0);
461 
+      //   padding-top: 10px;
462 
+      // }
463 
+    }
464 
+
465 
+    .right-complete-two {
466 
+      background: @whiteColor;
467 
+      background: radial-gradient(
468 
+            circle at top left,
469 
+            transparent 15px,
470 
+            @whiteColor 0
471 
+          )
472 
+          top left,
473 
+        radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
474 
+          bottom left;
475 
+      background-size: 100% 60%;
476 
+      background-repeat: no-repeat;
477 
+      width: 129px;
478 
+      border-radius: 0 15px 15px 0;
479 
+      position: relative;
480 
+      //右面部分
481 
+      .right-content {
482 
+        // width: 100px;
483 
+        height: 120px;
484 
+        position: absolute;
485 
+        top: 50%;
486 
+        left: 50%;
487 
+        transform: translate(-50%, -50%);
488 
+        // border: 1px solid red;
489 
+        .right-image-2 {
490 
+          width: 76px;
491 
+          height: 66px;
492 
+          margin-top: 1em;
493 
+        }
494 
+        .right-number {
495 
+          // width: 32px;
496 
+          // font-size: 20px;
497 
+          // border-radius: 4px;
498 
+          // border: 2px solid #999;
499 
+          // margin: auto;
500 
+          // text-align: center;
501 
+        }
502 
+        .right-image {
503 
+          // float: convert();
504 
+          width: 35px;
505 
+          height: 34px;
506 
+          margin: 0 auto;
507 
+          align-items: center;
508 
+          margin: auto;
509 
+          padding-left: 8px;
510 
+          // text-align: center;
511 
+        }
512 
+
513 
+        .right-title {
514 
+          font-weight: 700;
515 
+          font-size: 24px;
516 
+          padding-top: 15px;
517 
+          text-align: center;
518 
+        }
519 
+      }
520 
+    }
521 
+    //线条
522 
+    .right-complete-two::after {
523 
+      content: "";
524 
+      position: absolute;
525 
+      top: 15px;
526 
+      margin: 26px auto;
527 
+      height: 70%;
528 
+      border-left: 1px dashed #595959;
529 
+    }
530 
+    .foot {
531 
+      width: 100%;
532 
+      height: 26px;
533 
+      font-size: 28px;
534 
+      font-weight: 400;
535 
+      color: #c0c8d3;
536 
+      line-height: 34px;
537 
+      margin-top: 40px;
538 
+      text-align: center;
539 
+    }
540 
+
541 
+    .button-info {
542 
+      margin-bottom: 70px;
543 
+
544 
+      .button-box {
545 
+        margin: 60px 0;
546 
+        width: calc(100% - 60px);
547 
+        height: 88px;
548 
+        line-height: 88px;
549 
+        background: #274291;
550 
+        border-radius: 12px;
551 
+        color: @whiteColor;
552 
+      }
553 
+    }
554 
+  }
231 555 
 }

+ 1
- 2
src/pages/index/tabs/Guide.jsx Näytä tiedosto 

@@ -28,7 +28,6 @@ export default (props) => {
28 28 
   const [ifroomId, setIfroomId] = useState('havenot')
29 29 
   const [spackage, setPackage] = useState([])
30 30
31 
-  const cardNavigateTo = undefined
32 31
33 32 
   const trackClick = useTrackClick(router)
34 33 
 
@@ -254,7 +253,7 @@ export default (props) => {
254 253 
             <text className='title-title-boss' >老板推荐好吃的</text>
255 254 
           </view>
256 255 
         </view>
257 
-        {(spackage || []).map((item, index) => <BossCard cardNavigateTo={cardNavigateTo} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
256 
+        {(spackage || []).map((item, index) => <BossCard det={item} st={parseFloat(item.score.toFixed(1))} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
258 257 
       </view>
259 258 
     </scroll-view>
260 259 
   )