flx

src/components/AlreadyUsedMolded/index.jsx

@@ -5,31 +5,63 @@ import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
 import Evaluation from '@/assets/icons/UserCenter/Evaluation.png'
 import starOn from '@/assets/icons/GuideCheck/starOn.png'
 import starOff from '@/assets/icons/GuideCheck/starOff.png'
-
+import formatTime from '@/utils/formatTime'
+import Star from '@/components/Star/Star.jsx'
+import { useState } from 'react'
 import './style.less'
 
+
+
+
+const scoreList = new Array(5).fill(0);
+const score = "3.9";
+
 export default (props) => {
+  const [detail, setDetail] = useState({})
+
+  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
+
+  const { list } = props
 
   return (
+    <view>
+      {
+        list.map((item, index) => {
+          return (
+            <view class='wrapper-box' key={index} >
+              <view class='left-complete-one'  >
+                <image className='left-image-1' src={ProCard_hot}></image>
+                <view className='left-viewText'>
+                  返现￥{(item.cashback / 100)?.toFixed(2)}
+                </view>
+                <view className='title-image' >
+                  <image className='image-1' mode='scaleToFill' src={item.poster || image}></image>
+                  <image className='image-2' src={food}></image>
+                </view>
+                <view className='title-content'>
+                  <view className='Pro-title'  >
+                    <view className='title-text'>
+                      {item.packageDescription}
+                      <text className='title-money-2'>
+                        数量：{item.amount}张
+                      </text>
+                    </view>
+                  </view>
+                  <text className='title-money' >￥{(item.unitPrice / 100)?.toFixed(2)}元<text className='title-money-3'>订单编号：{item.orderId}</text></text>
+                  <view className='title-time'>
+                    核销时间：{" "}
+                    {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
+                  </view>
+                </view>
+              </view>
+            </view>
+          )
 
-    <view class='wrapper-one-box'>
-      <view class='left-complete-one'>
-        <image className='left-image-1' src={ProCard_hot}></image>
-        <view className='left-viewText'>
-          返现￥16.00
-        </view>
-        <view className='title-image'>
-          <image className='image-1' mode='scaleToFill' src={image}></image>
-          <image className='image-2' src={food}></image>
-        </view>
-        <view className='title-content'>
-          <view className='Pro-title'>
-            <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</text></view>
-          </view>
-          <text className='title-money' >￥6990元<text className='OrderNumber'>订单编号：ABC123456789</text> </text>
-          <view className='title-time' >核销时间：2021/06/21  12:00</view>
-        </view>
-      </view>
+        })
+      }
     </view>
+
+
+
   )
 }

src/components/AlreadyUsedMolded/style.less

@@ -1,12 +1,17 @@
 @whiteColor: #fff;
 
-.wrapper-one-box {
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+.wrapper-box {
+  display: flex;
+  position: relative;
+  margin: 30px auto;
+  // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
+  filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
 
   .left-complete-one {
-    padding-top: 85px;
-    padding-bottom: 21px;
 
+    padding-top: 87px;
+    padding-bottom: 43px;
     position: relative;
     display: flex;
     background: @whiteColor;
@@ -21,7 +26,7 @@
     background-size: 100% 60%;
     background-repeat: no-repeat;
 
-    width: 573px;
+    width: 100%;
     border-radius: 15px 0px 0px 15px;
     // border-radius: 12px;
 
@@ -40,26 +45,27 @@
       position: absolute;
       left: 1px;
       top: 28px;
-      font-size: 20px;
+      font-size: 24px;
       color: @whiteColor;
+      font-weight: 600;
     }
     //图片
     .title-image {
-      width: 145px;
+      height: 144px;
       margin-left: 20px;
       border-radius: 24px;
       overflow: hidden;
       position: relative;
       .image-1 {
-        width: 100%;
-        height: 145px;
+        width: 144px;
+        height: 144px;
+        margin: 0;
       }
       .image-2 {
         width: 89px;
         height: 34px;
         position: absolute;
         left: 0;
-        top: 0;
       }
     }
     // 商品标题
@@ -72,76 +78,58 @@
           width: 375px;
           overflow: hidden;
           text-overflow: ellipsis;
-          // display: -webkit-box; //必须要
+          display: -webkit-box; //必须要
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
-          // word-break: break-all; /* 多出文本省略号代替 */
+          word-break: break-all; /* 多出文本省略号代替 */
           text-align: left;
           font-size: 24px;
-          // padding-bottom: 10px;
+          padding-bottom: 10px;
+          .title-money-2 {
+            height: 19px;
+            font-size: 20px;
+            font-weight: 400;
+            color: #333333;
+            padding-left: 40px;
+          }
         }
       }
       .title-money {
-        // padding-top: 34px;
+        width: 58px;
+        height: 21px;
         font-size: 24px;
-        // color: red;
-        font-weight: 800;
-      }
-      .OrderNumber {
-        width: 234px;
-        height: 19px;
-        font-size: 20px;
-        font-weight: 400;
-        color: #666666;
-        line-height: 44px;
-        margin-left: 21px;
-      }
-      .title-money-2 {
-        height: 19px;
-        font-size: 20px;
-        font-weight: 400;
+        font-weight: bold;
         color: #333333;
-        padding-left: 40px;
+        font-weight: 800;
       }
-
       .title-time {
         font-size: 24px;
         // padding-top: 20px;
         color: #c0c8d3;
       }
-      .title-position-on {
-        display: flex;
-        font-size: 20px;
-        .title-position {
-          width: 18px;
-          height: 24px;
-          padding-right: 10px;
-          padding-top: 5px;
-        }
-        .title-position-image {
-          align-items: center;
-          font-size: 20px;
-          color: #333;
-        }
-        .title-on {
-          // margin-bottom: 10px;
-          padding-top: 5px;
-          padding-left: 40px;
-          width: 21px;
-          height: 21px;
-          padding-right: 10px;
-        }
-        .title-on-text {
-          align-items: center;
+      .title-money-3 {
+        font-size: 18px;
+        padding-left: 10px;
+        color: rgba(102, 102, 102, 0.8);
 
-          font-size: 20px;
-          color: #333;
-        }
+      }
+
+      .title-time {
+        font-size: 24px;
+        padding-top: 20px;
+        color: #c0c8d3;
       }
     }
   }
-  // .left-complete-one:nth-child(2) {
-  //   background: rgb(182, 0, 0);
-  //   padding-top: 10px;
-  // }
 }
+
+
+//线条
+.right-complete-two::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  margin: 26px auto;
+  height: 70%;
+  border-left: 1px dashed #595959;
+}

src/components/BossCard/index.jsx

@@ -10,7 +10,7 @@ import starOn from '@/assets/icons/housemantj/onlove.png'
 import starOff from '@/assets/icons/housemantj/景点爆赞.png'
 import food from '@/assets/icons/ProCard/food.png'
 import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
-import formatPrice from "@/utils/formatPrice";
+
 import { getQueryString } from '@/utils/index'
 //入住指引--老板推荐
 
@@ -19,22 +19,10 @@ import { getQueryString } from '@/utils/index'
 import './style.less'
 
 export default (props) => {
-  const { item, cardNavigateTo, taRoomContent, trackClick } = props
+
+  const { item, st, taRoomContent, trackClick, det } = props
   const { shopId, packageId } = props.item
   const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.packageId)
-  const [city, setCity] = useState({})
-  const [detail, setDetail] = useState({})
-
-  const [handelareaName, setHandelareaName] = useState()
-
-  const lareaName = () => {
-    if (city.areaPName == null) {
-      setHandelareaName(city.areaPName / city.areaName)
-    } else {
-      setHandelareaName(city.areaName)
-    }
-  }
-
 
 
 
@@ -44,29 +32,19 @@ export default (props) => {
     Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${shopId}` })
   }
 
-  useEffect(() => {
-    lareaName()
-
-    getShopDetail(item.shopId).then((res) => {
-      setDetail(res)
-      getShopcity(res.cityId).then((x) => {
-        setCity(x)
-      })
-    })
-  }, [])
-  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
+
   return (
     <view class='container'>
       <view class='wrapper'>
         <view class='left-complete-one'  >
           <image className='left-image-1' src={ProCard_hot}></image>
           <view className='left-viewText'>
-            返现￥{formatPrice(item.cashback)}
+            返现￥{(item.cashback / 100)?.toFixed(2)}
           </view>
           {/* 评分 */}
           <view className='card-box-star'>
-            <Star star={star} />
-            <text className='card-star-text' >{star}</text>
+            <Star star={st} />
+            <text className='card-star-text' >{st}</text>
           </view>
           <view className='title-image' onClick={() => { goFood() }}>
             <image className='image-1' mode='scaleToFill' src={item.poster}></image>
@@ -76,10 +54,10 @@ export default (props) => {
             <view className='Pro-title' onClick={() => { goFood() }} >
               <view className='title-text'>{(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}</view>
             </view>
-            <text className='title-money' >￥{formatPrice(item.actualPrice)}元<text className='title-money-2'>门市价{formatPrice(item.standardPrice)}元</text></text>
+            <text className='title-money' >￥{(item.actualPrice / 100)?.toFixed(2)}元<text className='title-money-2'>门市价{(item.standardPrice / 100)?.toFixed(2)}元</text></text>
             <view className='title-position-on'>
               <image className='title-position' src={position} />
-              <text className='title-position-image'>{city.areaName=='南京市'?city.areaName:city.areaPName+'/'+city.areaName}</text>
+              <text className='title-position-image'>{det.areaName == '南京市' ? det.areaName : det.areaPName + '/' + det.areaName}</text>
               <view style={{ display: 'inline-block' }} onClick={toggleSave}>
 
                 <image className='title-on' src={isSaved > 0 ? starOn : starOff} />

src/components/CompoentsOrder/AlreadyExpired/index.jsx

@@ -1,116 +0,0 @@
-
-import { useState } from "react";
-
-import image from '@/assets/icons/ProCard/8kb.jpg'
-
-
-import food from '@/assets/icons/ProCard/food.png'
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
-
-import Null from '@/assets/icons/UserCenter/null_logo.png'
-
-
-import starOn from '@/assets/icons/GuideCheck/starOn.png'
-import starOff from '@/assets/icons/GuideCheck/starOff.png'
-import './style.less'
-
-
-
-const scoreList = new Array(5).fill(0)
-const score = '3.9'
-
-
-export default (props) => {
-
-  return (
-    <scroll-view scroll-y style='height:100%;'  >
-
-      <view className='AlreadyExpired-box' >
-
-        {/* 已过期 */}
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            {/* 评分 */}
-            <view className='card-box-star'>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + '0.1') < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} />
-                  )
-                })
-              }
-              <text className='card-star-text' >{score}</text>
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【SEOUL·创意韩国料理】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image-2' src={Null} />
-            </view>
-          </view>
-        </view>
-        {/* 已过期 */}
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            {/* 评分 */}
-            <view className='card-box-star'>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + '0.1') < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} />
-                  )
-                })
-              }
-              <text className='card-star-text' >{score}</text>
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【SEOUL·创意韩国料理】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image-2' src={Null} />
-            </view>
-          </view>
-        </view>
-
-        <view className='foot'>
-          已经到底了~
-        </view>
-      </view>
-    </scroll-view>
-
-  )
-}

src/components/CompoentsOrder/AlreadyExpired/style.less

@@ -1,255 +0,0 @@
-@whiteColor: #fff;
-
-.AlreadyExpired-box {
-  margin: 40px auto;
-  padding: 0 30px;
-  .OrderNumber {
-    // width: 234px;
-    height: 19px;
-    font-size: 20px;
-    font-weight: 400;
-    color: #666666;
-    line-height: 44px;
-  }
-  .wrapper {
-    margin-top: 40px;
-    display: flex;
-    position: relative;
-    // margin-top: 600px;
-    margin: 30px auto;
-    width: 700px;
-
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-    .card-box-star {
-      position: absolute;
-      width: auto;
-      height: 44.3px;
-      position: absolute;
-      left: 200px;
-      top: 28px;
-      font-size: 20px;
-      color: @whiteColor;
-      .card-star-image {
-        padding-left: 6px;
-        width: 21px;
-        height: 21px;
-      }
-      .card-star-text {
-        padding-left: 10px;
-        font-size: 20px;
-        color: #333;
-        font-weight: 700;
-      }
-    }
-
-    .left-complete-one {
-      padding-top: 85px;
-      padding-bottom: 43px;
-      position: relative;
-      display: flex;
-      background: @whiteColor;
-      background: radial-gradient(
-            circle at top right,
-            transparent 15px,
-            @whiteColor 0
-          )
-          top right,
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
-          bottom right;
-      background-size: 100% 60%;
-      background-repeat: no-repeat;
-
-      width: 573px;
-      border-radius: 15px 0px 0px 15px;
-      // border-radius: 12px;
-
-      align-items: center;
-      .left-image-1 {
-        width: 145px;
-        height: 44px;
-        position: absolute;
-        top: 22px;
-      }
-      .left-viewText {
-        // background-image: url(@Image-ProCard_hot);
-        // width: 287px;
-        width: auto;
-        height: 44.3px;
-        position: absolute;
-        left: 1px;
-        top: 28px;
-        font-size: 20px;
-        color: @whiteColor;
-      }
-      //图片
-      .title-image {
-        width: 145px;
-        margin-left: 20px;
-        border-radius: 24px;
-        overflow: hidden;
-        position: relative;
-        .image-1 {
-          width: 100%;
-          height: 145px;
-        }
-        .image-2 {
-          width: 89px;
-          height: 34px;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
-      // 商品标题
-      .title-content {
-        // padding: 84px 0 56px 20px;
-        padding-left: 18px;
-
-        .Pro-title {
-          .title-text {
-            width: 375px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            // display: -webkit-box; //必须要
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            // word-break: break-all; /* 多出文本省略号代替 */
-            text-align: left;
-            font-size: 24px;
-            // padding-bottom: 10px;
-          }
-        }
-        .title-money {
-          // padding-top: 34px;
-          font-size: 24px;
-          // color: red;
-          font-weight: 800;
-        }
-        .title-money-2 {
-          height: 19px;
-          font-size: 20px;
-          font-weight: 400;
-          color: #333333;
-          padding-left: 40px;
-        }
-
-        .title-time {
-          font-size: 24px;
-          // padding-top: 20px;
-          color: #c0c8d3;
-        }
-        .title-position-on {
-          display: flex;
-          font-size: 20px;
-          .title-position {
-            width: 18px;
-            height: 24px;
-            padding-right: 10px;
-            padding-top: 5px;
-          }
-          .title-position-image {
-            align-items: center;
-            font-size: 20px;
-            color: #333;
-          }
-          .title-on {
-            // margin-bottom: 10px;
-            padding-top: 5px;
-            padding-left: 40px;
-            width: 21px;
-            height: 21px;
-            padding-right: 10px;
-          }
-          .title-on-text {
-            align-items: center;
-
-            font-size: 20px;
-            color: #333;
-          }
-        }
-      }
-    }
-    // .left-complete-one:nth-child(2) {
-    //   background: rgb(182, 0, 0);
-    //   padding-top: 10px;
-    // }
-  }
-
-  .right-complete-two {
-    background: @whiteColor;
-    background: radial-gradient(
-          circle at top left,
-          transparent 15px,
-          @whiteColor 0
-        )
-        top left,
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
-        bottom left;
-    background-size: 100% 60%;
-    background-repeat: no-repeat;
-    width: 129px;
-    border-radius: 0 15px 15px 0;
-    position: relative;
-    //右面部分
-    .right-content {
-      // width: 100px;
-      height: 120px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      // border: 1px solid red;
-      .right-image-2 {
-        width: 76px;
-        height: 66px;
-        margin-top: 1em;
-      }
-      .right-number {
-        // width: 32px;
-        // font-size: 20px;
-        // border-radius: 4px;
-        // border: 2px solid #999;
-        // margin: auto;
-        // text-align: center;
-      }
-      .right-image {
-        // float: convert();
-        width: 35px;
-        height: 34px;
-        margin: 0 auto;
-        align-items: center;
-        margin: auto;
-        padding-left: 8px;
-        // text-align: center;
-      }
-
-      .right-title {
-        font-weight: 700;
-        font-size: 24px;
-        padding-top: 15px;
-        text-align: center;
-      }
-    }
-  }
-  //线条
-  .right-complete-two::after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    margin: 26px auto;
-    height: 70%;
-    border-left: 1px dashed #595959;
-  }
-  .foot {
-    width: 100%;
-    height: 26px;
-    font-size: 28px;
-    font-weight: 400;
-    color: #c0c8d3;
-    line-height: 34px;
-    margin-top: 40px;
-    text-align: center;
-  }
-}

src/components/CompoentsOrder/AlreadyUsed/index.jsx

@@ -17,18 +17,14 @@ const score = '3.9'
 
 
 export default (props) => {
+  const { show, maskClosable, list } = props
 
   const [showDialog, setShowDialog] = useState(false)
   const [CollectNub, setCollectNub] = useState(1)
 
-  const ShowMoldeOn = () => {
-    setShowDialog(true)
-  }
   const ButtonCancel = () => {
-    setShowDialog(false)
   }
   const ButtonOK = (e) => {
-    setShowDialog(false)
 
   }
 
@@ -37,144 +33,53 @@ export default (props) => {
   }
 
   return (
-
-    <scroll-view scroll-y style='height:100%;'  >
-
-      <view className='AlreadyUsed-box' >
-        <Popup show={showDialog} maskClosable={false}>
-          <AlreadyUsedMolded />
-          <view className='item-center-Number' >
-            {/* 评分 */}
-            <view className='card-box-star'>
-              <text className='card-box-star-text' onClick={Nuberr} >口味：</text>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
-                  )
-                })
-              }
-            </view>
-            <view className='card-box-star'>
-              <text className='card-box-star-text' onClick={Nuberr} >环境：</text>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
-                  )
-                })
-              }
-            </view>
-            <view className='card-box-star'>
-              <text className='card-box-star-text' onClick={Nuberr} >服务：</text>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + `${CollectNub}`) < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
-                  )
-                })
-              }
-            </view>
-
-
-          </view>
-          <view className='buy-button-box' >
-            <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
-            <button className='button-OK' onClick={ButtonOK} >确定</button>
-          </view>
-        </Popup>
-        {/* 已使用 */}
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            {/* 评分 */}
-            <view className='card-box-star'>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + '0.1') < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} />
-                  )
-                })
-              }
-              <text className='card-star-text' >{score}</text>
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >核销时间：2021/06/21  12:00</view>
-            </view>
-          </view>
-          <view class='right-complete-two' onClick={ShowMoldeOn} >
-            <view className='right-content'>
-              <image className='right-image' src={Evaluation} />
-              <view className='right-title'>评价</view>
-
-            </view>
-          </view>
+    <Popup show={show} maskClosable={show} onClose={ButtonCancel} className='box-content' >
+      <AlreadyUsedMolded list={list} />
+      <view className='item-center-Number' >
+        {/* 评分 */}
+        <view className='card-box-star'>
+          <text className='card-box-star-text' onClick={Nuberr} >口味：</text>
+          {
+            scoreList.map((_, index) => {
+
+              const src = (index + `${CollectNub}`) < score ? starOn : starOff
+              return (
+                <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
+              )
+            })
+          }
         </view>
-        {/* 已使用 */}
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            {/* 评分 */}
-            <view className='card-box-star'>
-              {
-                scoreList.map((_, index) => {
-
-                  const src = (index + '0.1') < score ? starOn : starOff
-                  return (
-                    <image className='card-star-image' key={index} src={src} />
-                  )
-                })
-              }
-              <text className='card-star-text' >{score}</text>
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【米啊糯】新街口店 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >核销时间：2021/06/21  12:00</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image' src={Evaluation} />
-              <view className='right-title'>评价</view>
-            </view>
-          </view>
+        <view className='card-box-star'>
+          <text className='card-box-star-text' onClick={Nuberr} >环境：</text>
+          {
+            scoreList.map((_, index) => {
+
+              const src = (index + `${CollectNub}`) < score ? starOn : starOff
+              return (
+                <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
+              )
+            })
+          }
         </view>
-        <view className='foot'>
-          已经到底了~
+        <view className='card-box-star'>
+          <text className='card-box-star-text' onClick={Nuberr} >服务：</text>
+          {
+            scoreList.map((_, index) => {
+
+              const src = (index + `${CollectNub}`) < score ? starOn : starOff
+              return (
+                <image className='card-star-image' key={index} src={src} onClick={Nuberr} />
+              )
+            })
+          }
         </view>
       </view>
-    </scroll-view>
+      <view className='buy-button-box' >
+        <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
+        <button className='button-OK' onClick={ButtonOK} >确定</button>
+      </view>
+    </Popup>
+
 
   )
 }

src/components/CompoentsOrder/AlreadyUsed/style.less

@@ -1,8 +1,7 @@
 @whiteColor: #fff;
 
-.AlreadyUsed-box {
-  margin: 40px auto;
-  padding: 0 30px;
+// .box-content {
+
 
   .item-center-Number {
     .card-box-star {
@@ -67,248 +66,7 @@
     color: #666666;
     line-height: 44px;
   }
-  .wrapper {
-    margin-top: 40px;
-    display: flex;
-    position: relative;
-    // margin-top: 600px;
-    margin: 30px auto;
-    width: 700px;
-
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-    .card-box-star {
-      position: absolute;
-      width: auto;
-      height: 44.3px;
-      position: absolute;
-      left: 200px;
-      top: 28px;
-      font-size: 20px;
-      color: @whiteColor;
-      .card-star-image {
-        padding-left: 6px;
-        width: 21px;
-        height: 21px;
-      }
-      .card-star-text {
-        padding-left: 10px;
-        font-size: 20px;
-        color: #333;
-        font-weight: 700;
-      }
-    }
-
-    .left-complete-one {
-      padding-top: 85px;
-      padding-bottom: 43px;
-      position: relative;
-      display: flex;
-      background: @whiteColor;
-      background: radial-gradient(
-            circle at top right,
-            transparent 15px,
-            @whiteColor 0
-          )
-          top right,
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
-          bottom right;
-      background-size: 100% 60%;
-      background-repeat: no-repeat;
-
-      width: 573px;
-      border-radius: 15px 0px 0px 15px;
-      // border-radius: 12px;
-
-      align-items: center;
-      .left-image-1 {
-        width: 145px;
-        height: 44px;
-        position: absolute;
-        top: 22px;
-      }
-      .left-viewText {
-        // background-image: url(@Image-ProCard_hot);
-        // width: 287px;
-        width: auto;
-        height: 44.3px;
-        position: absolute;
-        left: 1px;
-        top: 28px;
-        font-size: 20px;
-        color: @whiteColor;
-      }
-      //图片
-      .title-image {
-        width: 145px;
-        margin-left: 20px;
-        border-radius: 24px;
-        overflow: hidden;
-        position: relative;
-        .image-1 {
-          width: 100%;
-          height: 145px;
-        }
-        .image-2 {
-          width: 89px;
-          height: 34px;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
-      // 商品标题
-      .title-content {
-        // padding: 84px 0 56px 20px;
-        padding-left: 18px;
-
-        .Pro-title {
-          .title-text {
-            width: 375px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            // display: -webkit-box; //必须要
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            // word-break: break-all; /* 多出文本省略号代替 */
-            text-align: left;
-            font-size: 24px;
-            // padding-bottom: 10px;
-          }
-        }
-        .title-money {
-          // padding-top: 34px;
-          font-size: 24px;
-          // color: red;
-          font-weight: 800;
-        }
-        .title-money-2 {
-          height: 19px;
-          font-size: 20px;
-          font-weight: 400;
-          color: #333333;
-          padding-left: 40px;
-        }
-
-        .title-time {
-          font-size: 24px;
-          // padding-top: 20px;
-          color: #c0c8d3;
-        }
-        .title-position-on {
-          display: flex;
-          font-size: 20px;
-          .title-position {
-            width: 18px;
-            height: 24px;
-            padding-right: 10px;
-            padding-top: 5px;
-          }
-          .title-position-image {
-            align-items: center;
-            font-size: 20px;
-            color: #333;
-          }
-          .title-on {
-            // margin-bottom: 10px;
-            padding-top: 5px;
-            padding-left: 40px;
-            width: 21px;
-            height: 21px;
-            padding-right: 10px;
-          }
-          .title-on-text {
-            align-items: center;
-
-            font-size: 20px;
-            color: #333;
-          }
-        }
-      }
-    }
-    // .left-complete-one:nth-child(2) {
-    //   background: rgb(182, 0, 0);
-    //   padding-top: 10px;
-    // }
-  }
-
-  .right-complete-two {
-    background: @whiteColor;
-    background: radial-gradient(
-          circle at top left,
-          transparent 15px,
-          @whiteColor 0
-        )
-        top left,
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
-        bottom left;
-    background-size: 100% 60%;
-    background-repeat: no-repeat;
-    width: 129px;
-    border-radius: 0 15px 15px 0;
-    position: relative;
-    //右面部分
-    .right-content {
-      // width: 100px;
-      height: 120px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      // border: 1px solid red;
-      .right-image-2 {
-        width: 76px;
-        height: 66px;
-        margin-top: 1em;
-      }
-      .right-number {
-        // width: 32px;
-        // font-size: 20px;
-        // border-radius: 4px;
-        // border: 2px solid #999;
-        // margin: auto;
-        // text-align: center;
-      }
-      .right-image {
-        // float: convert();
-        width: 35px;
-        height: 34px;
-        margin: 0 auto;
-        align-items: center;
-        margin: auto;
-        padding-left: 8px;
-        // text-align: center;
-      }
-
-      .right-title {
-        font-weight: 700;
-        font-size: 24px;
-        padding-top: 15px;
-        text-align: center;
-      }
-    }
-  }
-  //线条
-  .right-complete-two::after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    margin: 26px auto;
-    height: 70%;
-    border-left: 1px dashed #595959;
-  }
-  .foot {
-    width: 100%;
-    height: 26px;
-    font-size: 28px;
-    font-weight: 400;
-    color: #c0c8d3;
-    line-height: 34px;
-    margin-top: 40px;
-    text-align: center;
-  }
-
+ 
   .button-info {
     margin-bottom: 70px;
 
@@ -322,4 +80,4 @@
       color: @whiteColor;
     }
   }
-}
+// }

src/components/CompoentsOrder/TobePaid/index.jsx

@@ -1,117 +0,0 @@
-
-import { useState } from "react";
-import { Button, } from '@tarojs/components'
-import Taro from "@tarojs/taro";
-import image from '@/assets/icons/ProCard/8kb.jpg'
-
-import food from '@/assets/icons/ProCard/food.png'
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
-
-import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
-import './style.less'
-
-
-export default (props) => {
-
-  const handleGoPay = () => {
-    Taro.navigateTo({ url: '/pages/PayOrder/index' })
-  }
-  return (
-    <scroll-view scrollY style='height:100%;'  >
-
-      <view className='TobePaid-box'>
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        {/* 待支付 */}
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image' src={Pay} />
-              <view className='right-title'>支付</view>
-            </view>
-          </view>
-        </view>
-        {/* 待支付 */}
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image' src={Pay} />
-              <view className='right-title'>支付</view>
-            </view>
-          </view>
-        </view>
-        {/* 待支付 */}
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-
-        <view class='wrapper'>
-
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image' src={Pay} />
-              <view className='right-title'>支付</view>
-            </view>
-          </view>
-        </view>
-        <view className='foot'>
-          已经到底了~
-        </view>
-        <view className='button-info'>
-          <Button className='button-box' onClick={handleGoPay}>全部支付</Button>
-        </view>
-      </view>
-    </scroll-view>
-
-  )
-}

src/components/CompoentsOrder/TobePaid/style.less

@@ -1,268 +0,0 @@
-@whiteColor: #fff;
-.TobePaid-box {
-  margin: 40px auto;
-  padding: 0 30px;
-  .OrderNumber {
-    // width: 234px;
-    height: 19px;
-    font-size: 20px;
-    font-weight: 400;
-    color: #666666;
-    line-height: 44px;
-  }
-  .wrapper {
-    margin-top: 40px;
-    display: flex;
-    position: relative;
-    // margin-top: 600px;
-    margin: 30px auto;
-    width: 700px;
-
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-    .card-box-star {
-      position: absolute;
-      width: auto;
-      height: 44.3px;
-      position: absolute;
-      left: 200px;
-      top: 28px;
-      font-size: 20px;
-      color: @whiteColor;
-      .card-star-image {
-        padding-left: 6px;
-        width: 21px;
-        height: 21px;
-      }
-      .card-star-text {
-        padding-left: 10px;
-        font-size: 20px;
-        color: #333;
-        font-weight: 700;
-      }
-    }
-
-    .left-complete-one {
-      padding-top: 85px;
-      padding-bottom: 43px;
-      position: relative;
-      display: flex;
-      background: @whiteColor;
-      background: radial-gradient(
-            circle at top right,
-            transparent 15px,
-            @whiteColor 0
-          )
-          top right,
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
-          bottom right;
-      background-size: 100% 60%;
-      background-repeat: no-repeat;
-
-      width: 573px;
-      border-radius: 15px 0px 0px 15px;
-      // border-radius: 12px;
-
-      align-items: center;
-      .left-image-1 {
-        width: 145px;
-        height: 44px;
-        position: absolute;
-        top: 22px;
-      }
-      .left-viewText {
-        // background-image: url(@Image-ProCard_hot);
-        // width: 287px;
-        width: auto;
-        height: 44.3px;
-        position: absolute;
-        left: 1px;
-        top: 28px;
-        font-size: 20px;
-        color: @whiteColor;
-      }
-      //图片
-      .title-image {
-        width: 145px;
-        margin-left: 20px;
-        border-radius: 24px;
-        overflow: hidden;
-        position: relative;
-        .image-1 {
-          width: 100%;
-          height: 145px;
-        }
-        .image-2 {
-          width: 89px;
-          height: 34px;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
-      // 商品标题
-      .title-content {
-        // padding: 84px 0 56px 20px;
-        padding-left: 18px;
-
-        .Pro-title {
-          .title-text {
-            width: 375px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            // display: -webkit-box; //必须要
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            // word-break: break-all; /* 多出文本省略号代替 */
-            text-align: left;
-            font-size: 24px;
-            // padding-bottom: 10px;
-          }
-        }
-        .title-money {
-          // padding-top: 34px;
-          font-size: 24px;
-          // color: red;
-          font-weight: 800;
-        }
-        .title-money-2 {
-          height: 19px;
-          font-size: 20px;
-          font-weight: 400;
-          color: #333333;
-          padding-left: 40px;
-        }
-
-        .title-time {
-          font-size: 24px;
-          // padding-top: 20px;
-          color: #c0c8d3;
-        }
-        .title-position-on {
-          display: flex;
-          font-size: 20px;
-          .title-position {
-            width: 18px;
-            height: 24px;
-            padding-right: 10px;
-            padding-top: 5px;
-          }
-          .title-position-image {
-            align-items: center;
-            font-size: 20px;
-            color: #333;
-          }
-          .title-on {
-            // margin-bottom: 10px;
-            padding-top: 5px;
-            padding-left: 40px;
-            width: 21px;
-            height: 21px;
-            padding-right: 10px;
-          }
-          .title-on-text {
-            align-items: center;
-
-            font-size: 20px;
-            color: #333;
-          }
-        }
-      }
-    }
-    // .left-complete-one:nth-child(2) {
-    //   background: rgb(182, 0, 0);
-    //   padding-top: 10px;
-    // }
-  }
-
-  .right-complete-two {
-    background: @whiteColor;
-    background: radial-gradient(
-          circle at top left,
-          transparent 15px,
-          @whiteColor 0
-        )
-        top left,
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
-        bottom left;
-    background-size: 100% 60%;
-    background-repeat: no-repeat;
-    width: 129px;
-    border-radius: 0 15px 15px 0;
-    position: relative;
-    //右面部分
-    .right-content {
-      // width: 100px;
-      height: 120px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      // border: 1px solid red;
-      .right-image-2 {
-        width: 76px;
-        height: 66px;
-        margin-top: 1em;
-      }
-      .right-number {
-        // width: 32px;
-        // font-size: 20px;
-        // border-radius: 4px;
-        // border: 2px solid #999;
-        // margin: auto;
-        // text-align: center;
-      }
-      .right-image {
-        // float: convert();
-        width: 35px;
-        height: 34px;
-        margin: 0 auto;
-        align-items: center;
-        margin: auto;
-        padding-left: 8px;
-        // text-align: center;
-      }
-
-      .right-title {
-        font-weight: 700;
-        font-size: 24px;
-        padding-top: 15px;
-        text-align: center;
-      }
-    }
-  }
-  //线条
-  .right-complete-two::after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    margin: 26px auto;
-    height: 70%;
-    border-left: 1px dashed #595959;
-  }
-  .foot {
-    width: 100%;
-    height: 26px;
-    font-size: 28px;
-    font-weight: 400;
-    color: #c0c8d3;
-    line-height: 34px;
-    margin-top: 40px;
-    text-align: center;
-  }
-
-  .button-info {
-    margin-bottom: 70px;
-
-    .button-box {
-      margin: 60px 0;
-      width: calc(100% - 60px);
-      height: 88px;
-      line-height: 88px;
-      background: #274291;
-      border-radius: 12px;
-      color: @whiteColor;
-    }
-  }
-}

src/components/CompoentsOrder/TobeWritten/index.jsx

@@ -1,75 +0,0 @@
-
-import image from '@/assets/icons/ProCard/8kb.jpg'
-import food from '@/assets/icons/ProCard/food.png'
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
-import QRcode from '@/assets/icons/UserCenter/QRcode.png'
-import './style.less'
-
-
-export default (props) => {
-
-  return (
-    <scroll-view scrollY style='height:100%;'  >
-
-
-      <view className='TobeWritten-box'>
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【SEOUL·创意韩国料理】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image' src={QRcode} />
-              <view className='right-title'>扫码核销</view>
-            </view>
-          </view>
-        </view>
-        <view className='OrderNumber'>订单编号：ABC123456789</view>
-        <view class='wrapper'>
-          <view class='left-complete-one'>
-            <image className='left-image-1' src={ProCard_hot}></image>
-            <view className='left-viewText'>
-              返现￥16.00
-            </view>
-            <view className='title-image'>
-              <image className='image-1' mode='scaleToFill' src={image}></image>
-              <image className='image-2' src={food}></image>
-            </view>
-            <view className='title-content'>
-              <view className='Pro-title'>
-                <view className='title-text'>【大巴山火锅】 <text className='title-money-2' >数量：1张</text></view>
-              </view>
-              <text className='title-money' >￥6990元</text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
-            </view>
-          </view>
-          <view class='right-complete-two'>
-            <view className='right-content'>
-              <image className='right-image' src={QRcode} />
-              <view className='right-title'>扫码核销</view>
-            </view>
-          </view>
-        </view>
-
-        <view className='foot'>
-          已经到底了~
-        </view>
-      </view>
-    </scroll-view>
-  )
-}

src/components/CompoentsOrder/TobeWritten/style.less

@@ -1,269 +0,0 @@
-@whiteColor: #fff;
-
-.TobeWritten-box {
-  margin: 40px auto;
-  padding: 0 30px;
-  .OrderNumber {
-    // width: 234px;
-    height: 19px;
-    font-size: 20px;
-    font-weight: 400;
-    color: #666666;
-    line-height: 44px;
-  }
-  .wrapper {
-    margin-top: 40px;
-    display: flex;
-    position: relative;
-    // margin-top: 600px;
-    margin: 30px auto;
-    width: 700px;
-
-    // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
-    // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
-    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
-    .card-box-star {
-      position: absolute;
-      width: auto;
-      height: 44.3px;
-      position: absolute;
-      left: 200px;
-      top: 28px;
-      font-size: 20px;
-      color: @whiteColor;
-      .card-star-image {
-        padding-left: 6px;
-        width: 21px;
-        height: 21px;
-      }
-      .card-star-text {
-        padding-left: 10px;
-        font-size: 20px;
-        color: #333;
-        font-weight: 700;
-      }
-    }
-
-    .left-complete-one {
-      padding-top: 85px;
-      padding-bottom: 43px;
-      position: relative;
-      display: flex;
-      background: @whiteColor;
-      background: radial-gradient(
-            circle at top right,
-            transparent 15px,
-            @whiteColor 0
-          )
-          top right,
-        radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
-          bottom right;
-      background-size: 100% 60%;
-      background-repeat: no-repeat;
-
-      width: 573px;
-      border-radius: 15px 0px 0px 15px;
-      // border-radius: 12px;
-
-      align-items: center;
-      .left-image-1 {
-        width: 145px;
-        height: 44px;
-        position: absolute;
-        top: 22px;
-      }
-      .left-viewText {
-        // background-image: url(@Image-ProCard_hot);
-        // width: 287px;
-        width: auto;
-        height: 44.3px;
-        position: absolute;
-        left: 1px;
-        top: 28px;
-        font-size: 20px;
-        color: @whiteColor;
-      }
-      //图片
-      .title-image {
-        width: 145px;
-        margin-left: 20px;
-        border-radius: 24px;
-        overflow: hidden;
-        position: relative;
-        .image-1 {
-          width: 100%;
-          height: 145px;
-        }
-        .image-2 {
-          width: 89px;
-          height: 34px;
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-      }
-      // 商品标题
-      .title-content {
-        // padding: 84px 0 56px 20px;
-        padding-left: 18px;
-
-        .Pro-title {
-          .title-text {
-            width: 375px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            // display: -webkit-box; //必须要
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            // word-break: break-all; /* 多出文本省略号代替 */
-            text-align: left;
-            font-size: 24px;
-            // padding-bottom: 10px;
-          }
-        }
-        .title-money {
-          // padding-top: 34px;
-          font-size: 24px;
-          // color: red;
-          font-weight: 800;
-        }
-        .title-money-2 {
-          height: 19px;
-          font-size: 20px;
-          font-weight: 400;
-          color: #333333;
-          padding-left: 40px;
-        }
-
-        .title-time {
-          font-size: 24px;
-          // padding-top: 20px;
-          color: #c0c8d3;
-        }
-        .title-position-on {
-          display: flex;
-          font-size: 20px;
-          .title-position {
-            width: 18px;
-            height: 24px;
-            padding-right: 10px;
-            padding-top: 5px;
-          }
-          .title-position-image {
-            align-items: center;
-            font-size: 20px;
-            color: #333;
-          }
-          .title-on {
-            // margin-bottom: 10px;
-            padding-top: 5px;
-            padding-left: 40px;
-            width: 21px;
-            height: 21px;
-            padding-right: 10px;
-          }
-          .title-on-text {
-            align-items: center;
-
-            font-size: 20px;
-            color: #333;
-          }
-        }
-      }
-    }
-    // .left-complete-one:nth-child(2) {
-    //   background: rgb(182, 0, 0);
-    //   padding-top: 10px;
-    // }
-  }
-
-  .right-complete-two {
-    background: @whiteColor;
-    background: radial-gradient(
-          circle at top left,
-          transparent 15px,
-          @whiteColor 0
-        )
-        top left,
-      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
-        bottom left;
-    background-size: 100% 60%;
-    background-repeat: no-repeat;
-    width: 129px;
-    border-radius: 0 15px 15px 0;
-    position: relative;
-    //右面部分
-    .right-content {
-      // width: 100px;
-      height: 120px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      // border: 1px solid red;
-      .right-image-2 {
-        width: 76px;
-        height: 66px;
-        margin-top: 1em;
-      }
-      .right-number {
-        // width: 32px;
-        // font-size: 20px;
-        // border-radius: 4px;
-        // border: 2px solid #999;
-        // margin: auto;
-        // text-align: center;
-      }
-      .right-image {
-        // float: convert();
-        width: 35px;
-        height: 34px;
-        margin: 0 auto;
-        align-items: center;
-        margin: auto;
-        padding-left: 15px;
-        // text-align: center;
-      }
-
-      .right-title {
-        font-weight: 700;
-        font-size: 24px;
-        padding-top: 15px;
-        text-align: center;
-      }
-    }
-  }
-  //线条
-  .right-complete-two::after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    margin: 26px auto;
-    height: 70%;
-    border-left: 1px dashed #595959;
-  }
-  .foot {
-    width: 100%;
-    height: 26px;
-    font-size: 28px;
-    font-weight: 400;
-    color: #c0c8d3;
-    line-height: 34px;
-    margin-top: 40px;
-    text-align: center;
-  }
-
-  .button-info {
-    margin-bottom: 70px;
-
-    .button-box {
-      margin: 60px 0;
-      width: calc(100% - 60px);
-      height: 88px;
-      line-height: 88px;
-      background: #274291;
-      border-radius: 12px;
-      color: @whiteColor;
-    }
-  }
-}

src/components/CompoentsOrder/complete/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Taro from "@tarojs/taro";
+import Taro, { useDidShow } from "@tarojs/taro";
 import { getOrderSub, getQrcode } from "@/services/payOrder";
 import formatTime from "@/utils/formatTime";
 import image from "@/assets/icons/ProCard/8kb.jpg";
@@ -13,17 +13,17 @@ import QRcode from "@/assets/icons/UserCenter/QRcode.png";
 import Pay from "@/assets/icons/GuideCheck/Pay_logo.png";
 import starOn from "@/assets/icons/GuideCheck/starOn.png";
 import starOff from "@/assets/icons/GuideCheck/starOff.png";
-import { useDidShow } from "@tarojs/taro";
+import AlreadyUsed from "../AlreadyUsed";
 import "./style.less";
 
 const scoreList = new Array(5).fill(0);
 const score = "3.9";
 
 const dict = {
-  0: { status: 0,isVerified: 0  },
-  1: { status: 1,isVerified: 0 },
+  0: { status: 0, isVerified: 0 },
+  1: { status: 1, isVerified: 0 },
   2: { isVerified: 1 },
-  3: { status: 9,isVerified: 0 },
+  3: { status: 9, isVerified: 0 },
 };
 export default (props) => {
   const { type } = props;
@@ -32,15 +32,15 @@ export default (props) => {
   const [pageNum, setNumber] = useState(1);
   const [HasNextPage, setHasNextPage] = useState(true);
 
-  useDidShow(()=>{
+  useDidShow(() => {
     setNumber(1)
   })
 
   useEffect(() => {
-    if(pageNum){
+    if (pageNum) {
       getList();
     }
-    
+
   }, [pageNum]);
 
   const pageRefresh = () => {
@@ -71,6 +71,13 @@ export default (props) => {
     }
   };
 
+  const [show, setShow] = useState(false)
+
+  //评价
+  const evaluation = () => {
+    setShow(true)
+  }
+
   useEffect(() => {
     // 下拉刷新触发
     if (IsPull) {
@@ -111,295 +118,296 @@ export default (props) => {
   return (
     <scroll-view
       scrollY
-      style="height: 90vh;"
+      style='height: 90vh;'
       refresher-enabled
       refresher-triggered={IsPull}
       onrefresherrefresh={pageRefresh}
-      refresher-background="#fff"
+      refresher-background='#fff'
       onscrolltolower={pageLoadMore}
     >
       {
         list.length == 0 ?
-          <NoData />:
-      <view className="complete-boxs">
-        {list.map((item, index) => {
-          /* 待支付 */
-          if (item.status === 0) {
-            return (
-              <view key={`${type}-${item.orderId}`}>
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
+          <NoData /> :
+          <view className='complete-boxs'>
+            <AlreadyUsed show={show} maskClosable={show} list={list} />
+            {list.map((item, index) => {
+              /* 待支付 */
+              if (item.status === 0) {
+                return (
+                  <view key={`${type}-${item.orderId}`}>
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
 
-                <view class="wrapper">
-                  <view class="left-complete-one">
-                    <image className="left-image-1" src={ProCard_hot}></image>
-                    <view className="left-viewText">
-                      返现￥{(item.cashback / 100).toFixed(2)}
-                    </view>
-                    <view className="title-image">
-                      <image
-                        className="image-1"
-                        mode="scaleToFill"
-                        src={item.poster || image}
-                      ></image>
-                      <image className="image-2" src={food}></image>
-                    </view>
-                    <view className="title-content">
-                      <view className="Pro-title">
-                        <view className="title-text">
-                          {item.packageDescription}
-                          <text className="title-money-2">
-                            数量：{item.amount}张
+                    <view class='wrapper'>
+                      <view class='left-complete-one'>
+                        <image className='left-image-1' src={ProCard_hot}></image>
+                        <view className='left-viewText'>
+                          返现￥{(item.cashback / 100).toFixed(2)}
+                        </view>
+                        <view className='title-image'>
+                          <image
+                            className='image-1'
+                            mode='scaleToFill'
+                            src={item.poster || image}
+                          ></image>
+                          <image className='image-2' src={food}></image>
+                        </view>
+                        <view className='title-content'>
+                          <view className='Pro-title'>
+                            <view className='title-text'>
+                              {item.packageDescription}
+                              <text className='title-money-2'>
+                                数量：{item.amount}张
+                              </text>
+                            </view>
+                          </view>
+                          <text className='title-money'>
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
                           </text>
+                          <view className='title-time'>
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
+                          </view>
                         </view>
                       </view>
-                      <text className="title-money">
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
-                      </text>
-                      <view className="title-time">
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
+                      <view class='right-complete-two'>
+                        <view
+                          className='right-content'
+                          onClick={() => {
+                            Taro.navigateTo({
+                              url: `/pages/PayOrder/index?orderId=${item.orderId}`,
+                            });
+                          }}
+                        >
+                          <image className='right-image' src={Pay} />
+                          <view className='right-title'>支付</view>
+                        </view>
                       </view>
                     </view>
                   </view>
-                  <view class="right-complete-two">
-                    <view
-                      className="right-content"
-                      onClick={() => {
-                        Taro.navigateTo({
-                          url: `/pages/PayOrder/index?orderId=${item.orderId}`,
-                        });
-                      }}
-                    >
-                      <image className="right-image" src={Pay} />
-                      <view className="right-title">支付</view>
-                    </view>
-                  </view>
-                </view>
-              </view>
-            );
-          }
-          /* 待核销 */
-          if (item.status === 1 && item.isVerified == 0) {
-            return (
-              <view key={`${type}-${item.orderId}`}>
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
-                <view class="wrapper">
-                  <view class="left-complete-one">
-                    <image className="left-image-1" src={ProCard_hot}></image>
-                    <view className="left-viewText">
-                      返现￥{(item.cashback / 100).toFixed(2)}
-                    </view>
-                    <view className="title-image">
-                      <image
-                        className="image-1"
-                        mode="scaleToFill"
-                        src={item.poster || image}
-                      ></image>
-                      <image className="image-2" src={food}></image>
-                    </view>
-                    <view className="title-content">
-                      <view className="Pro-title">
-                        <view className="title-text">
-                          {item.packageDescription}
-                          <text className="title-money-2">
-                            数量：{item.amount}张
+                );
+              }
+              /* 待核销 */
+              if (item.status === 1 && item.isVerified == 0) {
+                return (
+                  <view key={`${type}-${item.orderId}`}>
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
+                    <view class='wrapper'>
+                      <view class='left-complete-one'>
+                        <image className='left-image-1' src={ProCard_hot}></image>
+                        <view className='left-viewText'>
+                          返现￥{(item.cashback / 100).toFixed(2)}
+                        </view>
+                        <view className='title-image'>
+                          <image
+                            className='image-1'
+                            mode='scaleToFill'
+                            src={item.poster || image}
+                          ></image>
+                          <image className='image-2' src={food}></image>
+                        </view>
+                        <view className='title-content'>
+                          <view className='Pro-title'>
+                            <view className='title-text'>
+                              {item.packageDescription}
+                              <text className='title-money-2'>
+                                数量：{item.amount}张
+                              </text>
+                            </view>
+                          </view>
+                          <text className='title-money'>
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
                           </text>
+                          <view className='title-time'>
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
+                          </view>
                         </view>
                       </view>
-                      <text className="title-money">
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
-                      </text>
-                      <view className="title-time">
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
+                      <view class='right-complete-two'>
+                        <view
+                          className='right-content'
+                          onClick={() => onWriteOff(item)}
+                        >
+                          <image className='right-image' src={QRcode} />
+                          <view className='right-title'>扫码核销</view>
+                        </view>
                       </view>
                     </view>
                   </view>
-                  <view class="right-complete-two">
-                    <view
-                      className="right-content"
-                      onClick={() => onWriteOff(item)}
-                    >
-                      <image className="right-image" src={QRcode} />
-                      <view className="right-title">扫码核销</view>
-                    </view>
-                  </view>
-                </view>
-              </view>
-            );
-          }
-           /* 已退费 */
-           if (item.status === 2 && item.isVerified == 0) {
-            return (
-              <view key={`${type}-${item.orderId}`}>
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
-                <view class="wrapper">
-                  <view class="left-complete-one">
-                    <image className="left-image-1" src={ProCard_hot}></image>
-                    <view className="left-viewText">
-                      返现￥{(item.cashback / 100).toFixed(2)}
-                    </view>
-                    <view className="title-image">
-                      <image
-                        className="image-1"
-                        mode="scaleToFill"
-                        src={item.poster || image}
-                      ></image>
-                      <image className="image-2" src={food}></image>
-                    </view>
-                    <view className="title-content">
-                      <view className="Pro-title">
-                        <view className="title-text">
-                          {item.packageDescription}
-                          <text className="title-money-2">
-                            数量：{item.amount}张
+                );
+              }
+              /* 已退费 */
+              if (item.status === 2 && item.isVerified == 0) {
+                return (
+                  <view key={`${type}-${item.orderId}`}>
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
+                    <view class='wrapper'>
+                      <view class='left-complete-one'>
+                        <image className='left-image-1' src={ProCard_hot}></image>
+                        <view className='left-viewText'>
+                          返现￥{(item.cashback / 100).toFixed(2)}
+                        </view>
+                        <view className='title-image'>
+                          <image
+                            className='image-1'
+                            mode='scaleToFill'
+                            src={item.poster || image}
+                          ></image>
+                          <image className='image-2' src={food}></image>
+                        </view>
+                        <view className='title-content'>
+                          <view className='Pro-title'>
+                            <view className='title-text'>
+                              {item.packageDescription}
+                              <text className='title-money-2'>
+                                数量：{item.amount}张
+                              </text>
+                            </view>
+                          </view>
+                          <text className='title-money'>
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
                           </text>
+                          <view className='title-time'>
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
+                          </view>
                         </view>
                       </view>
-                      <text className="title-money">
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
-                      </text>
-                      <view className="title-time">
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
+                      <view class='right-complete-two'>
+                        <view className='right-content'>
+                          <image className='right-image-2' src={refund} />
+                        </view>
                       </view>
                     </view>
                   </view>
-                  <view class="right-complete-two">
-                    <view className="right-content">
-                      <image className="right-image-2" src={refund} />
-                    </view>
-                  </view>
-                </view>
-              </view>
-            );
-          }
-          /* 已过期 */
-          if (item.status === 9) {
-            return (
-              <view key={`${type}-${item.orderId}`}>
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
-                <view class="wrapper">
-                  <view class="left-complete-one">
-                    <image className="left-image-1" src={ProCard_hot}></image>
-                    <view className="left-viewText">
-                      返现￥{(item.cashback / 100).toFixed(2)}
-                    </view>
-                    {/* 评分 */}
-                    <view className="card-box-star">
-                      {scoreList.map((_, index) => {
-                        const src = index + 1 <= item.score ? starOn : starOff;
-                        return (
+                );
+              }
+              /* 已过期 */
+              if (item.status === 9) {
+                return (
+                  <view key={`${type}-${item.orderId}`}>
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
+                    <view class='wrapper'>
+                      <view class='left-complete-one'>
+                        <image className='left-image-1' src={ProCard_hot}></image>
+                        <view className='left-viewText'>
+                          返现￥{(item.cashback / 100).toFixed(2)}
+                        </view>
+                        {/* 评分 */}
+                        <view className='card-box-star'>
+                          {scoreList.map((_, index) => {
+                            const src = index + 1 <= item.score ? starOn : starOff;
+                            return (
+                              <image
+                                className='card-star-image'
+                                key={index}
+                                src={src}
+                              />
+                            );
+                          })}
+                          <text className='card-star-text'>{item.score}</text>
+                        </view>
+                        <view className='title-image'>
                           <image
-                            className="card-star-image"
-                            key={index}
-                            src={src}
-                          />
-                        );
-                      })}
-                      <text className="card-star-text">{item.score}</text>
-                    </view>
-                    <view className="title-image">
-                      <image
-                        className="image-1"
-                        mode="scaleToFill"
-                        src={item.poster || image}
-                      ></image>
-                      <image className="image-2" src={food}></image>
-                    </view>
-                    <view className="title-content">
-                      <view className="Pro-title">
-                        <view className="title-text">
-                          {item.packageDescription}
-                          <text className="title-money-2">
-                            数量：{item.amount}张
+                            className='image-1'
+                            mode='scaleToFill'
+                            src={item.poster || image}
+                          ></image>
+                          <image className='image-2' src={food}></image>
+                        </view>
+                        <view className='title-content'>
+                          <view className='Pro-title'>
+                            <view className='title-text'>
+                              {item.packageDescription}
+                              <text className='title-money-2'>
+                                数量：{item.amount}张
+                              </text>
+                            </view>
+                          </view>
+                          <text className='title-money'>
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
                           </text>
+                          <view className='title-time'>
+                            有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
+                            {formatTime(item.endTime, "yyyy/MM/dd")}
+                          </view>
                         </view>
                       </view>
-                      <text className="title-money">
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
-                      </text>
-                      <view className="title-time">
-                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                        {formatTime(item.endTime, "yyyy/MM/dd")}
+                      <view class='right-complete-two'>
+                        <view className='right-content'>
+                          <image className='right-image-2' src={Null} />
+                        </view>
                       </view>
                     </view>
                   </view>
-                  <view class="right-complete-two">
-                    <view className="right-content">
-                      <image className="right-image-2" src={Null} />
-                    </view>
-                  </view>
-                </view>
-              </view>
-            );
-          }
-          /* 已使用 */
-          if (item.isVerified == 1) {
-            return (
-              <view key={`${type}-${item.orderId}`}>
-                <view className="OrderNumber">订单编号：{item.orderId}</view>
-                <view class="wrapper">
-                  <view class="left-complete-one">
-                    <image className="left-image-1" src={ProCard_hot}></image>
-                    <view className="left-viewText">
-                      返现￥{(item.cashback / 100).toFixed(2)}
-                    </view>
-                    {/* 评分 */}
-                    <view className="card-box-star">
-                      {scoreList.map((_, index) => {
-                        const src = index + 1 <= item.score ? starOn : starOff;
-                        return (
+                );
+              }
+              /* 已使用 */
+              if (item.isVerified == 1) {
+                return (
+                  <view key={`${type}-${item.orderId}`}>
+                    <view className='OrderNumber'>订单编号：{item.orderId}</view>
+                    <view class='wrapper'>
+                      <view class='left-complete-one'>
+                        <image className='left-image-1' src={ProCard_hot}></image>
+                        <view className='left-viewText'>
+                          返现￥{(item.cashback / 100).toFixed(2)}
+                        </view>
+                        {/* 评分 */}
+                        <view className='card-box-star'>
+                          {scoreList.map((_, index) => {
+                            const src = index + 1 <= item.score ? starOn : starOff;
+                            return (
+                              <image
+                                className='card-star-image'
+                                key={index}
+                                src={src}
+                              />
+                            );
+                          })}
+                          <text className='card-star-text'>{item.score}</text>
+                        </view>
+                        <view className='title-image'>
                           <image
-                            className="card-star-image"
-                            key={index}
-                            src={src}
-                          />
-                        );
-                      })}
-                      <text className="card-star-text">{item.score}</text>
-                    </view>
-                    <view className="title-image">
-                      <image
-                        className="image-1"
-                        mode="scaleToFill"
-                        src={item.poster || image}
-                      ></image>
-                      <image className="image-2" src={food}></image>
-                    </view>
-                    <view className="title-content">
-                      <view className="Pro-title">
-                        <view className="title-text">
-                          {item.packageDescription}
-                          <text className="title-money-2">
-                            数量：{item.amount}张
+                            className='image-1'
+                            mode='scaleToFill'
+                            src={item.poster || image}
+                          ></image>
+                          <image className='image-2' src={food}></image>
+                        </view>
+                        <view className='title-content'>
+                          <view className='Pro-title'>
+                            <view className='title-text'>
+                              {item.packageDescription}
+                              <text className='title-money-2'>
+                                数量：{item.amount}张
+                              </text>
+                            </view>
+                          </view>
+                          <text className='title-money'>
+                            ￥{(item.unitPrice / 100).toFixed(2)}元
                           </text>
+                          <view className='title-time'>
+                            核销时间：{" "}
+                            {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
+                          </view>
                         </view>
                       </view>
-                      <text className="title-money">
-                        ￥{(item.unitPrice / 100).toFixed(2)}元
-                      </text>
-                      <view className="title-time">
-                        核销时间：{" "}
-                        {formatTime(item.verifiedDate, "yyyy/MM/dd hh:mm")}
+                      <view class='right-complete-two' onClick={() => evaluation()} >
+                        <view className='right-content'>
+                          <image className='right-image' src={Evaluation} />
+                          <view className='right-title'>评价</view>
+                        </view>
                       </view>
                     </view>
                   </view>
-                  <view class="right-complete-two">
-                    <view className="right-content">
-                      <image className="right-image" src={Evaluation} />
-                      <view className="right-title">评价</view>
-                    </view>
-                  </view>
-                </view>
-              </view>
-            );
-          }
-        })}
+                );
+              }
+            })}
 
-        <view className="foot">已经到底了~</view>
-      </view>
-        }
+            <view className='foot'>已经到底了~</view>
+          </view>
+      }
     </scroll-view>
   );
 };

src/components/CompoentsOrder/complete/style.less

@@ -3,6 +3,7 @@
 .complete-boxs {
   margin: 40px auto;
   padding: 0 30px;
+  
   .OrderNumber {
     height: 19px;
     font-size: 20px;
@@ -228,4 +229,327 @@
     margin-top: 40px;
     text-align: center;
   }
+  .AlreadyUsed-box {
+    margin: 40px auto;
+    padding: 0 30px;
+  
+    .item-center-Number {
+      .card-box-star {
+        margin-top: 23px;
+        width: auto;
+        height: 44.3px;
+        font-size: 20px;
+        color: @whiteColor;
+        .card-box-star-text {
+          display: inline-block;
+          height: 22px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #666666;
+        }
+        .card-star-image {
+          padding-left: 30px;
+          width: 21px;
+          height: 21px;
+        }
+        .card-star-text {
+          padding-left: 10px;
+          font-size: 20px;
+          color: #333;
+          font-weight: 700;
+        }
+      }
+    }
+  
+    .buy-button-box {
+      width: 100%;
+      margin: 40px 0 0 0;
+  
+      .button-Cancel {
+        display: inline-block;
+        width: 236px;
+        height: 78px;
+        border: 2px solid #274291;
+        font-size: 30px;
+        font-weight: bold;
+        color: #274291;
+        border-radius: 12px;
+        margin-right: 80px;
+      }
+      .button-OK {
+        display: inline-block;
+  
+        width: 236px;
+        height: 78px;
+        background: #274291;
+        border-radius: 12px;
+        font-size: 30px;
+        font-weight: bold;
+        color: #ffffff;
+      }
+    }
+    .OrderNumber {
+      // width: 234px;
+      height: 19px;
+      font-size: 20px;
+      font-weight: 400;
+      color: #666666;
+      line-height: 44px;
+    }
+    .wrapper {
+      margin-top: 40px;
+      display: flex;
+      position: relative;
+      // margin-top: 600px;
+      margin: 30px auto;
+      width: 700px;
+  
+      // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+      // filter: drop-shadow(5px 8px 6px rgb(202, 202, 202));
+      filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.12));
+      .card-box-star {
+        position: absolute;
+        width: auto;
+        height: 44.3px;
+        position: absolute;
+        left: 200px;
+        top: 28px;
+        font-size: 20px;
+        color: @whiteColor;
+        .card-star-image {
+          padding-left: 6px;
+          width: 21px;
+          height: 21px;
+        }
+        .card-star-text {
+          padding-left: 10px;
+          font-size: 20px;
+          color: #333;
+          font-weight: 700;
+        }
+      }
+  
+      .left-complete-one {
+        padding-top: 85px;
+        padding-bottom: 43px;
+        position: relative;
+        display: flex;
+        background: @whiteColor;
+        background: radial-gradient(
+              circle at top right,
+              transparent 15px,
+              @whiteColor 0
+            )
+            top right,
+          radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
+            bottom right;
+        background-size: 100% 60%;
+        background-repeat: no-repeat;
+  
+        width: 573px;
+        border-radius: 15px 0px 0px 15px;
+        // border-radius: 12px;
+  
+        align-items: center;
+        .left-image-1 {
+          width: 145px;
+          height: 44px;
+          position: absolute;
+          top: 22px;
+        }
+        .left-viewText {
+          // background-image: url(@Image-ProCard_hot);
+          // width: 287px;
+          width: auto;
+          height: 44.3px;
+          position: absolute;
+          left: 1px;
+          top: 28px;
+          font-size: 20px;
+          color: @whiteColor;
+        }
+        //图片
+        .title-image {
+          width: 145px;
+          margin-left: 20px;
+          border-radius: 24px;
+          overflow: hidden;
+          position: relative;
+          .image-1 {
+            width: 100%;
+            height: 145px;
+          }
+          .image-2 {
+            width: 89px;
+            height: 34px;
+            position: absolute;
+            left: 0;
+            top: 0;
+          }
+        }
+        // 商品标题
+        .title-content {
+          // padding: 84px 0 56px 20px;
+          padding-left: 18px;
+  
+          .Pro-title {
+            .title-text {
+              width: 375px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              // display: -webkit-box; //必须要
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              // word-break: break-all; /* 多出文本省略号代替 */
+              text-align: left;
+              font-size: 24px;
+              // padding-bottom: 10px;
+            }
+          }
+          .title-money {
+            // padding-top: 34px;
+            font-size: 24px;
+            // color: red;
+            font-weight: 800;
+          }
+          .title-money-2 {
+            height: 19px;
+            font-size: 20px;
+            font-weight: 400;
+            color: #333333;
+            padding-left: 40px;
+          }
+  
+          .title-time {
+            font-size: 24px;
+            // padding-top: 20px;
+            color: #c0c8d3;
+          }
+          .title-position-on {
+            display: flex;
+            font-size: 20px;
+            .title-position {
+              width: 18px;
+              height: 24px;
+              padding-right: 10px;
+              padding-top: 5px;
+            }
+            .title-position-image {
+              align-items: center;
+              font-size: 20px;
+              color: #333;
+            }
+            .title-on {
+              // margin-bottom: 10px;
+              padding-top: 5px;
+              padding-left: 40px;
+              width: 21px;
+              height: 21px;
+              padding-right: 10px;
+            }
+            .title-on-text {
+              align-items: center;
+  
+              font-size: 20px;
+              color: #333;
+            }
+          }
+        }
+      }
+      // .left-complete-one:nth-child(2) {
+      //   background: rgb(182, 0, 0);
+      //   padding-top: 10px;
+      // }
+    }
+  
+    .right-complete-two {
+      background: @whiteColor;
+      background: radial-gradient(
+            circle at top left,
+            transparent 15px,
+            @whiteColor 0
+          )
+          top left,
+        radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
+          bottom left;
+      background-size: 100% 60%;
+      background-repeat: no-repeat;
+      width: 129px;
+      border-radius: 0 15px 15px 0;
+      position: relative;
+      //右面部分
+      .right-content {
+        // width: 100px;
+        height: 120px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // border: 1px solid red;
+        .right-image-2 {
+          width: 76px;
+          height: 66px;
+          margin-top: 1em;
+        }
+        .right-number {
+          // width: 32px;
+          // font-size: 20px;
+          // border-radius: 4px;
+          // border: 2px solid #999;
+          // margin: auto;
+          // text-align: center;
+        }
+        .right-image {
+          // float: convert();
+          width: 35px;
+          height: 34px;
+          margin: 0 auto;
+          align-items: center;
+          margin: auto;
+          padding-left: 8px;
+          // text-align: center;
+        }
+  
+        .right-title {
+          font-weight: 700;
+          font-size: 24px;
+          padding-top: 15px;
+          text-align: center;
+        }
+      }
+    }
+    //线条
+    .right-complete-two::after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      margin: 26px auto;
+      height: 70%;
+      border-left: 1px dashed #595959;
+    }
+    .foot {
+      width: 100%;
+      height: 26px;
+      font-size: 28px;
+      font-weight: 400;
+      color: #c0c8d3;
+      line-height: 34px;
+      margin-top: 40px;
+      text-align: center;
+    }
+  
+    .button-info {
+      margin-bottom: 70px;
+  
+      .button-box {
+        margin: 60px 0;
+        width: calc(100% - 60px);
+        height: 88px;
+        line-height: 88px;
+        background: #274291;
+        border-radius: 12px;
+        color: @whiteColor;
+      }
+    }
+  }
 }

src/pages/index/tabs/Guide.jsx

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