个人中心 入住指引 支付订单

src/pages/Molded/style.less

@@ -0,0 +1,156 @@
+@whiteColor: #fff;
+
+.wrapper {
+  width: 74%;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+  .left-complete-one {
+    padding-top: 87px;
+    padding-bottom: 21px;
+    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/PayOrder/index.jsx

@@ -1,22 +1,83 @@
 
 import image from '@/assets/icons/ProCard/8kb.jpg'
-import { Button, Radio } from '@tarojs/components'
+import { useState, useEffect } from 'react'
+import { Button, Radio, Input } from '@tarojs/components'
 
 import food from '@/assets/icons/ProCard/food.png'
 import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
 import CustomNav from '@/components/CustomNav'
-import PPP from '@/components/ProCard'
+import OrderMolded from '@/components/OrderMolded'
+import Popup from '@/components/Popup'
+
 import './style.less'
 
 export default () => {
+  const [showDialog, setShowDialog] = useState(false)
+
+  const ShowMoldeOn = () => {
+    setShowDialog(true)
+  }
+  const ShowMoldeOff = () => {
+    setShowDialog(false)
+  }
+
+  const buttons = [
+
+    {
+      text: '取消'
+    },
+    {
+      text: '确定'
+    },
+
+  ]
+
+  const [BuyNumber, setBuyNumber] = useState(1)
+  const [DisabledBool, setDisabledBool] = useState(false)
+
+
+  const NumberAdd = () => {
+    setBuyNumber(BuyNumber + 1)
+    console.log(BuyNumber);
+
+  }
 
+  const NumberCut = () => {
+    setBuyNumber(BuyNumber - 1)
+    console.log(BuyNumber);
 
+  }
 
+  const onChange = (value, event) => {
+    console.log('----------------->', value, event);
+  }
+
+  useEffect(() => {
+    onChange()
+    if (BuyNumber < 2) {
+      setDisabledBool(true)
+
+    } else {
+      setDisabledBool(false)
+
+    }
+  }, [BuyNumber])
 
   return (
 
     <view class='container'>
       <CustomNav title='订单' />
+      <Popup show={showDialog} maskClosable={false}>
+        <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} />
+          <view className='buy-num-add' onClick={NumberAdd} >+</view>
+        </view>
+        <view className='buy' >
+
+        </view>
+      </Popup>
       <view class='coupon-list'>
         <view class='wrapper'>
           <view class='left-complete-one'>
@@ -36,9 +97,9 @@ export default () => {
               <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
             </view>
           </view>
-          <view class='right-complete-two'>
+          <view class='right-complete-two' onClick={ShowMoldeOn} >
             <view className='right-content'>
-              <view className='right-number'>×1</view>
+              <view className='right-number'>×{BuyNumber}</view>
               <view className='right-title'>数量</view>
             </view>
           </view>