tday

.gitignore

@@ -5,3 +5,4 @@ deploy_versions/
 node_modules/
 .DS_Store
 *.lock
+package-lock.json

package.json

@@ -41,9 +41,7 @@
     "@tarojs/react": "3.3.2",
     "@tarojs/runtime": "3.3.2",
     "@tarojs/taro": "3.3.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "taro-ui": "^2.3.4"
+    "react": "^17.0.0"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.13.6",

src/app.config.js

@@ -10,7 +10,7 @@ export default {
     'pages/MineUserAll/RefundMoney/index',
     'pages/MineUserAll/RefundMoney/CheckRefund/index',
     'pages/MineUserAll/AllOrder/index',//我的订单
-    // 'pages/Molded/index',
+    'pages/TobeShop/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/components/AlreadyUsedMolded/index.jsx

@@ -0,0 +1,35 @@
+
+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 Evaluation from '@/assets/icons/UserCenter/Evaluation.png'
+import starOn from '@/assets/icons/GuideCheck/starOn.png'
+import starOff from '@/assets/icons/GuideCheck/starOff.png'
+
+import './style.less'
+
+export default (props) => {
+
+  return (
+
+    <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/pages/Molded/style.less → src/components/AlreadyUsedMolded/style.less

@@ -1,11 +1,12 @@
 @whiteColor: #fff;
 
-.wrapper {
-  width: 74%;
+.wrapper-one-box {
   border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+
   .left-complete-one {
-    padding-top: 87px;
+    padding-top: 85px;
     padding-bottom: 21px;
+
     position: relative;
     display: flex;
     background: @whiteColor;
@@ -39,9 +40,8 @@
       position: absolute;
       left: 1px;
       top: 28px;
-      font-size: 24px;
+      font-size: 20px;
       color: @whiteColor;
-      font-weight: 600;
     }
     //图片
     .title-image {
@@ -72,85 +72,76 @@
           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 {
-        padding-top: 34px;
+        // padding-top: 34px;
         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 {
-        font-size: 18px;
-        color: #666;
-        padding-left: 10px;
-        text-decoration: line-through;
+        height: 19px;
+        font-size: 20px;
+        font-weight: 400;
+        color: #333333;
+        padding-left: 40px;
       }
 
       .title-time {
         font-size: 24px;
-        padding-top: 20px;
+        // padding-top: 20px;
         color: #c0c8d3;
       }
-    }
-  }
-}
-
-.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: 80px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    // border: 1px solid red;
-
-    .right-number {
-      width: 32px;
-      font-size: 20px;
-      border-radius: 4px;
-      border: 2px solid #999;
-      margin: auto;
-      text-align: center;
-    }
+      .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;
 
-    .right-title {
-      font-weight: 700;
-      font-size: 24px;
-      padding-top: 20px;
-      text-align: center;
+          font-size: 20px;
+          color: #333;
+        }
+      }
     }
   }
-}
-//线条
-.right-complete-two::after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  margin: 26px auto;
-  height: 70%;
-  border-left: 1px dashed #595959;
+  // .left-complete-one:nth-child(2) {
+  //   background: rgb(182, 0, 0);
+  //   padding-top: 10px;
+  // }
 }

src/components/CompoentsOrder/AlreadyUsed/index.jsx

@@ -1,14 +1,13 @@
-import { useState } from "react";
-
+import { useState, useEffect } from 'react'
+import { Button, Radio, Input } from '@tarojs/components'
 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 Evaluation from '@/assets/icons/UserCenter/Evaluation.png'
-
-
 import starOn from '@/assets/icons/GuideCheck/starOn.png'
 import starOff from '@/assets/icons/GuideCheck/starOff.png'
+import AlreadyUsedMolded from '@/components/AlreadyUsedMolded'
+import Popup from '@/components/Popup'
 import './style.less'
 
 
@@ -19,10 +18,76 @@ const score = '3.9'
 
 export default (props) => {
 
+  const [showDialog, setShowDialog] = useState(false)
+  const [CollectNub, setCollectNub] = useState(1)
+
+  const ShowMoldeOn = () => {
+    setShowDialog(true)
+  }
+  const ButtonCancel = () => {
+    setShowDialog(false)
+  }
+  const ButtonOK = (e) => {
+    setShowDialog(false)
+
+  }
+
+  const Nuberr = () => {
+    setCollectNub(+1)
+  }
+
   return (
-    <scroll-view scroll-y style='height: 90vh;'  >
 
+    <scroll-view scroll-y style='height: 90vh;'  >
       <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) => {
+                  console.log(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) => {
+                  console.log(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) => {
+                  console.log(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'>
@@ -56,7 +121,7 @@ export default (props) => {
               <view className='title-time' >核销时间：2021/06/21  12:00</view>
             </view>
           </view>
-          <view class='right-complete-two'>
+          <view class='right-complete-two' onClick={ShowMoldeOn} >
             <view className='right-content'>
               <image className='right-image' src={Evaluation} />
               <view className='right-title'>评价</view>
@@ -64,7 +129,6 @@ export default (props) => {
             </view>
           </view>
         </view>
-
         {/* 已使用 */}
         <view className='OrderNumber'>订单编号：ABC123456789</view>
         <view class='wrapper'>

src/components/CompoentsOrder/AlreadyUsed/style.less

@@ -3,6 +3,62 @@
 .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;

src/components/CompoentsOrder/TobePaid/index.jsx

@@ -1,7 +1,7 @@
 
 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'
@@ -13,9 +13,11 @@ import './style.less'
 
 export default (props) => {
 
+  const handleGoPay = () => {
+    Taro.navigateTo({ url: '/pages/PayOrder/index' })
+  }
   return (
     <scroll-view scroll-y style='height: 90vh;'  >
-
       <view className='TobePaid-box'>
         <view className='OrderNumber'>订单编号：ABC123456789</view>
         {/* 待支付 */}
@@ -105,7 +107,7 @@ export default (props) => {
           已经到底了~
         </view>
         <view className='button-info'>
-          <Button className='button-box'>全部支付</Button>
+          <Button className='button-box' onClick={handleGoPay}>全部支付</Button>
         </view>
       </view>
     </scroll-view>

src/components/Popup/style.less

@@ -1,4 +1,7 @@
 .x-popup {
+  .weui-dialog {
+    width: auto;
+  }
   .weui-dialog__hd,
   .weui-dialog__ft {
     display: none;

src/components/ProCard/index.jsx

@@ -1,41 +0,0 @@
-import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
-
-import './style.less'
-
-export default (props) => {
-
-  return (
-    <view class='wrapper'>
-      <view class='left-complete-one'>
-        <image className='left-image-1' src={ProCard_hot} />
-        {props.children}
-        {/* <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'>
-          {props.children}
-          {/* <view className='Pro-title'>
-                <view className='title-text'>【橘里橘气咖啡店】新鲜出炉啦!</view>
-              </view>
-              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
-              <view className='title-time' >有效期：2021/06/21-2021/12/31</view> */}
-        </view>
-      </view>
-      <view class='right-complete-two'>
-        <view className='right-content'>
-          {props.children}
-          {/* <view className='right-number'>×1</view> */}
-          {/* <view className='right-title'>数量</view> */}
-        </view>
-      </view>
-    </view>
-
-
-  )
-
-
-}

src/components/ProCard/style.less

@@ -1,166 +0,0 @@
-@whiteColor: #fff;
-@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
-
-.wrapper {
-  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));
-
-  .left-complete-one {
-    padding-top: 87px;
-    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: 24px;
-      color: @whiteColor;
-      font-weight: 600;
-    }
-    //图片
-    .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 {
-        font-size: 18px;
-        color: #666;
-        padding-left: 10px;
-        text-decoration: line-through;
-      }
-
-      .title-time {
-        font-size: 24px;
-        padding-top: 20px;
-        color: #c0c8d3;
-      }
-    }
-  }
-}
-
-.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: 80px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    // border: 1px solid red;
-
-    .right-number {
-      width: 32px;
-      font-size: 20px;
-      border-radius: 4px;
-      border: 2px solid #999;
-      margin: auto;
-      text-align: center;
-    }
-
-    .right-title {
-      font-weight: 700;
-      font-size: 24px;
-      padding-top: 20px;
-      text-align: center;
-    }
-  }
-}
-//线条
-.right-complete-two::after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  margin: 26px auto;
-  height: 70%;
-  border-left: 1px dashed #595959;
-}

src/pages/MineUserAll/RefundMoney/CheckRefund/index.config.js

@@ -1,4 +1,4 @@
 export default {
-  navigationBarTitleText: '售后退款2',
+  navigationBarTitleText: '售后退款',
   navigationStyle: 'custom',
 }

src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

@@ -53,7 +53,7 @@ export default (props) => {
   return (
 
     <view className='box-content'>
-      <CustomNav title='售后退款2' />
+      <CustomNav title='售后退款' />
       <view className='Refund-Content-box'>
         <view className='title-image'>
           <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
@@ -100,7 +100,7 @@ export default (props) => {
         <text className={`Refund-star-view4 ${view4 ? 'bg2' : 'Refund-star-view4'}`} onClick={() => view4OK()} >预约不上</text>
         <text className={`Refund-star-view5 ${view5 ? 'bg2' : 'Refund-star-view5'}`} onClick={() => view5OK()} >店里更优惠</text>
         <text className={`Refund-star-view6 ${view6 ? 'bg2' : 'Refund-star-view6'}`} onClick={() => view6OK()} >网友/朋友评价不好</text>
-
+        {/* 
         <view>
           {
             list.map(item => {
@@ -110,7 +110,7 @@ export default (props) => {
 
             })
           }
-        </view>
+        </view> */}
       </view>
 
       <view className='Refund-Content-box'>

src/pages/MineUserAll/RefundMoney/CheckRefund/style.less

@@ -1,7 +1,4 @@
 @whiteColor: #fff;
-.page-index {
-  padding: 0 25px;
-}
 
 .box-content {
   width: 100%;

src/pages/MineUserAll/RefundMoney/index.jsx

@@ -24,7 +24,6 @@ export default (props) => {
 
   const handleRefund2 = () => {
     Taro.navigateTo({ url: '/pages/MineUserAll/RefundMoney/CheckRefund/index' })
-    console.log('------------------');
   }
   return (
     <view className='box-content'>

src/pages/MineUserAll/RefundMoney/style.less

@@ -1,7 +1,4 @@
 @whiteColor: #fff;
-.page-index {
-  padding: 0 25px;
-}
 
 .box-content {
   width: 100%;

src/pages/PayOrder/index.jsx

@@ -17,20 +17,13 @@ export default () => {
   const ShowMoldeOn = () => {
     setShowDialog(true)
   }
-  const ShowMoldeOff = () => {
+  const ButtonCancel = () => {
     setShowDialog(false)
   }
+  const ButtonOK = (e) => {
+    setShowDialog(false)
 
-  const buttons = [
-
-    {
-      text: '取消'
-    },
-    {
-      text: '确定'
-    },
-
-  ]
+  }
 
   const [BuyNumber, setBuyNumber] = useState(1)
   const [DisabledBool, setDisabledBool] = useState(false)
@@ -48,12 +41,14 @@ export default () => {
 
   }
 
-  const onChange = (value, event) => {
-    console.log('----------------->', value, event);
+  const onInput = (e) => {
+    let values = e.detail.value
+    setBuyNumber(values - 0)
+
+
   }
 
   useEffect(() => {
-    onChange()
     if (BuyNumber < 2) {
       setDisabledBool(true)
 
@@ -71,11 +66,12 @@ export default () => {
         <OrderMolded />
         <view className='item-center-Number' >
           <view className='buy-num-minus' disabled={DisabledBool} onClick={NumberCut} >-</view>
-          <Input className='buy-num-input' type='number' min={1} onChange={onChange} value={BuyNumber} />
+          <Input className='buy-num-input' type="number" min="1" onInput={onInput} value={BuyNumber} />
           <view className='buy-num-add' onClick={NumberAdd} >+</view>
         </view>
-        <view className='buy' >
-
+        <view className='buy-button-box' >
+          <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
+          <button className='button-OK' onClick={ButtonOK} >确定</button>
         </view>
       </Popup>
       <view class='coupon-list'>

src/pages/PayOrder/style.less

@@ -17,14 +17,13 @@
       display: inline-block;
       width: 90px;
       height: 60px;
-
       font-size: 28px;
       font-weight: 400;
       color: #202020;
       background: #ffffff;
       border: 1px solid #999999;
       position: relative;
-      top: 26px;
+      top: 30px;
     }
     .buy-num-add {
       display: inline-block;
@@ -36,6 +35,33 @@
       border-radius: 0px 8px 8px 0px;
     }
   }
+  .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;
+    }
+  }
   .wrapper {
     display: flex;
     position: relative;

src/pages/TobeShop/index.config.js

@@ -0,0 +1,13 @@
+export default {
+  navigationBarTitleText: '到店核销',
+  navigationStyle: 'custom',
+
+  usingComponents: {
+    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
+    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
+    "mp-cells": "weui-miniprogram/cells/cells",
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
+  }
+
+
+}

src/pages/TobeShop/index.jsx

@@ -0,0 +1,137 @@
+import CustomNav from "@/components/CustomNav"
+import Popup from '@/components/Popup'
+import { useState, useEffect } from 'react'
+import LocationBig from '@/assets/icons/UserCenter/LocationBig.png'
+import Perfection from '@/assets/icons/UserCenter/Perfection.png'
+import Check_OK from '@/assets/icons/UserCenter/Check_OK.png'
+import Check_NO from '@/assets/icons/UserCenter/Check_NO.png'
+import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
+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 { Button, Icon, Text, Textarea } from '@tarojs/components'
+
+
+
+import './style.less'
+
+
+export default (props) => {
+
+  const [showDialog, setShowDialog] = useState(false)
+  //核销
+  const [Consumption, setConsumption] = useState(false)
+
+  const ShowMoldeOn = () => {
+    setShowDialog(true)
+  }
+  const ButtonCancel = () => {
+    setShowDialog(false)
+  }
+  const ButtonOK = (e) => {
+    // setShowDialog(false)
+    if (showDialog === true) {
+      setShowDialog(false)
+      setConsumption(true)
+    }
+
+  }
+
+  const PerfectionOK = () => {
+    setConsumption(false)
+  }
+
+
+  return (
+    <view className='shop-Eat' >
+      <CustomNav title='到店核销' />
+      <Popup show={showDialog} maskClosable={false}>
+        <view className='Consumption-Now' >您即将核销1张套餐券！</view>
+        <text className='Consumption-text' >核销后套餐券不退不换</text>
+        <text className='Consumption-text' >请核对无误后再点击确认！</text>
+        <view className='buy-button-box' >
+          <button className='button-Cancel' onClick={ButtonCancel} >取消</button>
+          <button className='button-OK' onClick={ButtonOK} >确定</button>
+        </view>
+      </Popup>
+      <Popup show={Consumption} maskClosable={false}>
+        <view className='Perfection-image-view' >
+          <image src={Perfection} className='Perfection-image' />
+
+        </view>
+        <text>核销完成！请与店铺确认！</text>
+        <view className='buy-button-box' >
+          <button className='button-OK' onClick={PerfectionOK} >完成</button>
+        </view>
+      </Popup>
+      <view className='position-header' >
+        <image className='position-LocationBig' src={LocationBig} />
+        <text cla='position-LocationBig-text'>当前所在店铺：SEOUL·创意韩国料理</text>
+      </view>
+      <view className='shop-image'>
+        <image mode='scaleToFill' className='shop-title-image-cup' src={BlackSpot} />
+        <text className='shop-title-title' >请选择你要核销的套餐</text>
+      </view>
+
+      {/* 卡片 */}
+      <view class='wrapper'>
+        <view class='left-complete-one'>
+          <view className='Check_OK-box' >
+            <image className='Check_OK-image' src={Check_OK} />
+          </view>
+          <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='title-money-2'>门市价78元</text></text>
+            <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+          </view>
+        </view>
+        <view class='right-complete-two'>
+          <view className='right-content'>
+          </view>
+        </view>
+      </view>
+
+      <view class='wrapper'>
+        <view class='left-complete-one'>
+          <view className='Check_OK-box' >
+            <image className='Check_OK-image' src={Check_NO} />
+          </view>
+          <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='title-money-2'>门市价78元</text></text>
+            <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+          </view>
+        </view>
+        <view class='right-complete-two'>
+          <view className='right-content'>
+          </view>
+        </view>
+      </view>
+
+      <view className='button-info'>
+        <Button className='button-box' onClick={ShowMoldeOn} >确定核销</Button>
+      </view>
+
+    </view>
+  )
+}

src/pages/TobeShop/style.less

@@ -0,0 +1,342 @@
+@whiteColor: #fff;
+
+.shop-Eat {
+  width: 100%;
+  padding: 0 30px;
+  .Consumption-Now {
+    height: 33px;
+    font-size: 34px;
+    font-weight: bold;
+    color: #ff3434;
+    text-align: center;
+    margin: 60px 0 42px 0;
+  }
+  .Consumption-text {
+    display: inline-block;
+    width: 309px;
+    height: 33px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333333;
+    text-align: center;
+    margin: auto;
+  }
+  .Perfection-image-view {
+    width: 150px;
+    margin: auto;
+
+    .Perfection-image {
+      width: 54px;
+      height: 43px;
+      margin: 70px 0 40px 0;
+    }
+  }
+
+  .position-header {
+    background-color: rgba(0, 0, 0, 0);
+    display: flex;
+    align-items: center;
+    .position-LocationBig {
+      width: 35px;
+      height: 42px;
+      padding-right: 21px;
+    }
+    .position-LocationBig-text {
+      display: inline-block;
+      height: 26px;
+      font-size: 28px;
+      font-weight: 400;
+      color: #202020;
+    }
+  }
+  .shop-image {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-top: 71px;
+    margin-bottom: 41px;
+    .shop-title-image-cup {
+      width: 32px;
+      height: 32px;
+      // margin-top: 10px;
+      padding-right: 15px;
+      align-items: center;
+    }
+    .shop-title-title {
+      align-items: center;
+
+      font-size: 32px;
+      font-weight: 800;
+      color: #202020;
+    }
+  }
+
+  .wrapper {
+    margin: auto;
+
+    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-left: 64px;
+      padding-top: 87px;
+      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;
+
+      border-radius: 15px 0px 0px 15px;
+      // border-radius: 12px;
+
+      align-items: center;
+
+      .Check_OK-box {
+        padding-left: 20px;
+        .Check_OK-image {
+          width: 34px;
+          height: 34px;
+        }
+      }
+      .left-image-1 {
+        width: 145px;
+        height: 44px;
+        position: absolute;
+        margin-left: 75px;
+        top: 22px;
+      }
+      .left-viewText {
+        // background-image: url(@Image-ProCard_hot);
+        // width: 287px;
+        width: auto;
+        height: 44.3px;
+        position: absolute;
+        left: 85px;
+        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;
+          display: inline-block;
+          font-weight: 800;
+          margin: 15px auto;
+        }
+        .title-money-2 {
+          height: 19px;
+          font-size: 20px;
+          font-weight: 400;
+          color: #333333;
+          padding-left: 50px;
+        }
+
+        .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;
+          }
+        }
+      }
+    }
+  }
+  .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-number {
+        // width: 32px;
+        // font-size: 20px;
+        // border-radius: 4px;
+        // border: 2px solid #999;
+        // margin: auto;
+        // text-align: center;
+      }
+      .right-image {
+        // float: convert();
+        width: 36px;
+        height: 36px;
+        margin: 0 auto;
+        align-items: center;
+        margin: auto;
+        padding-left: 8px;
+        // text-align: center;
+      }
+
+      .right-title {
+        font-weight: 700;
+        font-size: 24px;
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+  .button-info {
+    margin-bottom: 70px;
+
+    .button-box {
+      margin: 60px 0;
+      width: 690px;
+      height: 88px;
+      line-height: 88px;
+      background: #274291;
+      border-radius: 12px;
+      color: @whiteColor;
+    }
+  }
+  //弹窗确认核销按钮
+  .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;
+    }
+  }
+}

src/pages/index/tabs/GuideCss/style.less

@@ -1,10 +1,9 @@
 @whiteColor: #fff;
 
-.page-index {
-  padding: 0 25px;
-}
 .Guide-Home-box {
   // width: 333333333333px;
+  width: 94%;
+  margin: auto;
   .MessageCard {
     width: 690px;
     height: 175px;

src/pages/index/tabs/MineCss/style.less

@@ -1,7 +1,3 @@
-.page-index {
-  padding: 0 25px;
-}
-
 .User-box {
   width: 100%;
   .User-info {