merge

.eslintrc

@@ -2,6 +2,7 @@
   "extends": ["taro/react"],
   "rules": {
     "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "warn"
+  },
 }

.gitignore

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

src/app.config.js

@@ -10,7 +10,16 @@ export default {
     'pages/shopKeeper/shopKeeper',
     'pages/spread/spreadMoney',
     'pages/landlord/income/income',
-    'pages/landlord/houseManage/houseManage'
+    'pages/landlord/houseManage/houseManage',
+    'pages/PayOrder/index',
+    'pages/MineUserAll/ContactMe/index',
+    'pages/MineUserAll/HomeLogo/index',
+    'pages/MineUserAll/Collect/index',
+    'pages/MineUserAll/Rules/index',
+    'pages/MineUserAll/RefundMoney/index',
+    'pages/MineUserAll/RefundMoney/CheckRefund/index',
+    'pages/MineUserAll/AllOrder/index',//我的订单
+    // 'pages/Molded/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/components/CompoentsOrder/AlreadyExpired/index.jsx

@@ -0,0 +1,116 @@
+
+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: 90vh;'  >
+
+      <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) => {
+                  console.log(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) => {
+                  console.log(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

@@ -0,0 +1,255 @@
+@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

@@ -0,0 +1,115 @@
+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 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'
+
+
+const scoreList = new Array(5).fill(0)
+const score = '3.9'
+
+
+
+export default (props) => {
+
+  return (
+    <scroll-view scroll-y style='height: 90vh;'  >
+
+      <view className='AlreadyUsed-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) => {
+                  console.log(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>
+
+        {/* 已使用 */}
+        <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) => {
+                  console.log(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>
+        <view className='foot'>
+          已经到底了~
+        </view>
+      </view>
+    </scroll-view>
+
+  )
+}

src/components/CompoentsOrder/AlreadyUsed/style.less

@@ -0,0 +1,269 @@
+@whiteColor: #fff;
+
+.AlreadyUsed-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: 690px;
+      height: 88px;
+      line-height: 88px;
+      background: #274291;
+      border-radius: 12px;
+      color: @whiteColor;
+    }
+  }
+}

src/components/CompoentsOrder/TobePaid/index.jsx

@@ -0,0 +1,114 @@
+
+import { useState } from "react";
+import { Button, } 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 Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
+import './style.less'
+
+
+export default (props) => {
+
+  return (
+    <scroll-view scroll-y style='height: 90vh;'  >
+
+      <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'>全部支付</Button>
+        </view>
+      </view>
+    </scroll-view>
+
+  )
+}

src/components/CompoentsOrder/TobePaid/style.less

@@ -0,0 +1,268 @@
+@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: 690px;
+      height: 88px;
+      line-height: 88px;
+      background: #274291;
+      border-radius: 12px;
+      color: @whiteColor;
+    }
+  }
+}

src/components/CompoentsOrder/TobeWritten/index.jsx

@@ -0,0 +1,74 @@
+
+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 scroll-y style='height: 90vh;'  >
+
+      <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

@@ -0,0 +1,269 @@
+@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: 690px;
+      height: 88px;
+      line-height: 88px;
+      background: #274291;
+      border-radius: 12px;
+      color: @whiteColor;
+    }
+  }
+}

src/components/CompoentsOrder/complete/index.jsx

@@ -0,0 +1,166 @@
+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 Evaluation from '@/assets/icons/UserCenter/Evaluation.png'
+import Null from '@/assets/icons/UserCenter/null_logo.png'
+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 AlreadyUsed from "../AlreadyUsed";
+import './style.less'
+
+
+const scoreList = new Array(5).fill(0)
+const score = '3.9'
+
+export default (props) => {
+  return (
+    <scroll-view scroll-y style='height: 90vh;'  >
+      <view className='complete-boxs' >
+        {/* 已使用 */}
+        <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) => {
+                  console.log(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>
+        {/* 待核销 */}
+        <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'>【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={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='card-box-star'>
+              {
+                scoreList.map((_, index) => {
+                  console.log(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/complete/style.less

@@ -0,0 +1,255 @@
+@whiteColor: #fff;
+
+.complete-boxs {
+  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/OrderMolded/index.jsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import image from '@/assets/icons/ProCard/8kb.jpg'
+import { Button, Radio } from '@tarojs/components'
+
+import food from '@/assets/icons/ProCard/food.png'
+import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
+import './style.less'
+
+export default (props) => {
+
+  return (
+    <view class='wrapper-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'>【橘里橘气咖啡店】新鲜出炉啦!</view>
+          </view>
+          <text className='title-money' >￥6990元</text>
+          <view className='title-time' >有效期：2021/06/21-2021/12/31</view>
+        </view>
+      </view>
+    </view>
+  )
+}

src/components/OrderMolded/style.less

@@ -0,0 +1,124 @@
+@whiteColor: #fff;
+
+.wrapper-box {
+  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;
+        position: relative;
+        right: 136px;
+        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;
+}
+//线条

src/components/Popup/index.jsx

@@ -0,0 +1,12 @@
+
+import './style.less'
+
+export default (props) => {
+  const { show, mask = true, maskClosable, onClose } = props
+
+  return (
+    <mp-dialog extClass='x-popup' buttons={[]} show={show} mask={mask} maskClosable={maskClosable} onClose={onClose}>
+      {props.children}
+    </mp-dialog>
+  )
+}

src/components/Popup/style.less

@@ -0,0 +1,6 @@
+.x-popup {
+  .weui-dialog__hd,
+  .weui-dialog__ft {
+    display: none;
+  }
+}

src/components/ProCard/index.jsx

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,166 @@
+@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/AllOrder/index.config.js

@@ -0,0 +1,9 @@
+export default {
+  navigationBarTitleText: '我的订单',
+  navigationStyle: 'custom',
+  "usingComponents": {
+    "mp-dialog": "weui-miniprogram/dialog/dialog",
+    "mp-tabs": "../../../components/tabs/index"
+  }
+
+}

src/pages/MineUserAll/AllOrder/index.jsx

@@ -0,0 +1,103 @@
+
+import { useState, useEffect, } from 'react'
+import { Taro, useRouter } from '@tarojs/taro'
+
+import CustomNav from '@/components/CustomNav'
+import AlreadyExpired from '@/components/CompoentsOrder/AlreadyExpired'
+import AlreadyUsed from '@/components/CompoentsOrder/AlreadyUsed'
+import Complete from '@/components/CompoentsOrder/complete'
+import TobePaid from '@/components/CompoentsOrder/TobePaid'
+import TobeWritten from '@/components/CompoentsOrder/TobeWritten'
+
+import './style.less'
+
+
+
+export default (props) => {
+  const [activeTab, setActiveTab] = useState(0)
+  const [swiperHeight, setSwiperHeight] = useState(0)
+
+
+  const { params } = useRouter()
+  const { tabJump } = params || {}
+
+
+  useEffect(() => {
+    if (tabJump) {
+      setActiveTab(tabJump - 0)
+    }
+    console.log('---------------------', tabJump);
+
+  }, [tabJump])
+
+
+
+  const tabs = [
+    {
+      title: '全部',
+    },
+    {
+      title: '待支付',
+
+    },
+    {
+      title: '待核销',
+
+    },
+    {
+      title: '已使用',
+
+    },
+    {
+      title: '已过期',
+
+    },
+  ]
+
+  const handleTabChange = (e) => {
+    const { index } = e.detail
+    setActiveTab(index)
+  }
+
+  const abccc = () => [
+    Taro.getSystemInfo({
+      success: function (res) {
+        let clientHeight = res.windowHeight;
+        let clientWidth = res.windowWidth;
+        let ratio = 750 / clientWidth;
+        let Height = ratio * clientHeight;
+        setSwiperHeight(`height:${Height}rpx;`)
+        console.log('------------->', swiperHeight);
+
+
+      }
+
+    })
+  ]
+
+
+  return (
+    <view className='box-content'>
+      <CustomNav title='我的订单' />
+      <view className='index-tabs'>
+        <mp-tabs
+          tabClass='tabs-Unselected'
+          swiperClass='tabs-swiper'
+          activeClass='tabs-Selected'
+          tabUnderlineColor='#000'
+          tabInactiveTextColor='#C0C8D3'
+          tabs={tabs}
+          current={activeTab}
+          onChange={handleTabChange}
+          activeTab={activeTab}
+        >
+        </mp-tabs>
+      </view>
+      {activeTab === 0 && <Complete />}
+      {activeTab === 1 && <TobePaid />}
+      {activeTab === 2 && <TobeWritten />}
+      {activeTab === 3 && <AlreadyUsed />}
+      {activeTab === 4 && <AlreadyExpired />}
+    </view>
+  )
+}

src/pages/MineUserAll/AllOrder/style.less

@@ -0,0 +1,27 @@
+.box-content {
+  width: 100%;
+  .index-tabs {
+    width: 100%;
+
+    .tabs-Unselected {
+      width: 20vw;
+      text-align: center;
+      height: 26px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #c0c8d3;
+    }
+    .tabs-swiper {
+      max-height: 0px;
+    }
+    .tabs-Selected {
+      height: 30px;
+      font-size: 32px;
+      font-weight: bold;
+      color: #4c4c4c;
+      padding-top: 33px;
+      padding-bottom: 28px;
+      border-bottom: 5px solid black;
+    }
+  }
+}

src/pages/MineUserAll/Collect/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '我的收藏',
+  navigationStyle: 'custom',
+}

src/pages/MineUserAll/Collect/index.jsx

@@ -0,0 +1,157 @@
+
+import CustomNav from '@/components/CustomNav'
+import { useState } from "react";
+
+import Taro from '@tarojs/taro'
+import image from '@/assets/icons/ProCard/8kb.jpg'
+import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
+import SeeDetails from '@/assets/icons/GuideCheck/SeeDetails.png'
+
+import Attractions from '@/assets/icons/GuideCheck/Attractions.png'
+import food from '@/assets/icons/ProCard/food.png'
+import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
+import position from '@/assets/icons/GuideCheck/position_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) => {
+
+  const [value, setVaule] = useState('已收藏')
+  const [imageSrc, setImageSrc] = useState(starOn)
+
+
+
+
+  const Ac = () => {
+    setImageSrc(starOff)
+    setVaule('加入收藏')
+    // console.log('------------', value);
+
+  }
+  return (
+    <view className='box-content'>
+      <CustomNav title='我的收藏' />
+      <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) => {
+                console.log(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'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+            </view>
+            <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
+            <view className='title-position-on'>
+              <image className='title-position' src={position} />
+              <text className='title-position-image'>南京市/秦淮区</text>
+              <image className='title-on' src={imageSrc} />
+              <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+            </view>
+          </view>
+        </view>
+        <view class='right-complete-two'>
+          <view className='right-content'>
+            <image className='right-image' src={SeeDetails} />
+            <view className='right-title'>查看详情</view>
+          </view>
+        </view>
+      </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) => {
+                console.log(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'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+            </view>
+            <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
+            <view className='title-position-on'>
+              <image className='title-position' src={position} />
+              <text className='title-position-image'>南京市/秦淮区</text>
+              <image className='title-on' src={imageSrc} />
+              <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+            </view>
+          </view>
+        </view>
+        <view class='right-complete-two'>
+          <view className='right-content'>
+            <image className='right-image' src={SeeDetails} />
+            <view className='right-title'>查看详情</view>
+          </view>
+        </view>
+      </view>
+      <view class='wrapper'>
+        <view class='left-complete-one' style='padding-top: 20px;'>
+          <view className='title-image'>
+            <image className='image-1' mode='scaleToFill' src={image}></image>
+            <image className='image-2' src={Attractions}></image>
+          </view>
+          <view className='title-content'>
+            <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-position-on'>
+              <image className='title-position' src={position} />
+              <text className='title-position-image'>南京市/秦淮区</text>
+              <image className='title-on' src={imageSrc} />
+              <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+            </view>
+          </view>
+        </view>
+        <view class='right-complete-two'>
+          <view className='right-content'>
+            <image className='right-image' src={SeeDetails} />
+            <view className='right-title'>查看详情</view>
+          </view>
+        </view>
+      </view>
+      <view className='foot'>
+        已经到底了~
+      </view>
+    </view>
+  )
+}

src/pages/MineUserAll/Collect/style.less

@@ -0,0 +1,244 @@
+@whiteColor: #fff;
+
+.box-content {
+  padding: 0 25px;
+
+  //卡片---------------
+
+  .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 {
+          font-size: 18px;
+          color: #666;
+          padding-left: 10px;
+          text-decoration: line-through;
+        }
+
+        .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-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/pages/MineUserAll/ContactMe/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '联系我们',
+  navigationStyle: 'custom',
+}

src/pages/MineUserAll/ContactMe/index.jsx

@@ -0,0 +1,26 @@
+
+import CustomNav from '@/components/CustomNav'
+// import { Button } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+
+import { Button, Text, Textarea } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  const back = () => {
+    Taro.navigateBack()
+  }
+
+  return (
+    <view className='box-content'>
+      <CustomNav title='联系我们' />
+      <view class='section'>
+        <Textarea placeholder='请输入您的建议或意见!' confirm-type='done' />
+      </view>
+      <view className='button-info'>
+        <Button className='button-box'>提交</Button>
+        <Button className='button-box-Cancel' onClick={back} >取消</Button>
+      </view>
+    </view>
+  )
+}

src/pages/MineUserAll/ContactMe/style.less

@@ -0,0 +1,38 @@
+.box-content {
+  .section {
+    width: 690px;
+    height: 254px;
+    background: #ffffff;
+    border: 1px solid #b5b5b5;
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+    padding: 0 20px 0 20px;
+    margin: auto;
+    textarea {
+      padding-top: 20px;
+      width: 100%;
+      font-size: 24px;
+      font-weight: 400;
+      color: #666666;
+    }
+  }
+  .button-info {
+    .button-box {
+      margin-top: 20%;
+      width: 690px;
+      height: 88px;
+      line-height: 88px;
+
+      background: #274291;
+      border-radius: 12px;
+    }
+    .button-box-Cancel {
+      width: 690px;
+      height: 88px;
+      line-height: 88px;
+      margin-top: 40px;
+      color: #274291;
+      border: 2px solid #274291;
+      border-radius: 12px;
+    }
+  }
+}

src/pages/MineUserAll/HomeLogo/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '入住指引',
+  navigationStyle: 'custom',
+}

src/pages/MineUserAll/HomeLogo/index.jsx

@@ -0,0 +1,11 @@
+
+import CustomNav from '@/components/CustomNav'
+import './style.less'
+
+export default (props) => {
+  return (
+    <view className='box-content'>
+      <CustomNav title='入住指引' />
+    </view>
+  )
+}

src/pages/MineUserAll/HomeLogo/style.less

@@ -0,0 +1,2 @@
+.box-content {
+}

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

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

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

@@ -0,0 +1,146 @@
+import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
+import Taro from '@tarojs/taro'
+import { Button, Icon, Text, Textarea } from '@tarojs/components'
+
+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 CustomNav from '@/components/CustomNav'
+import './style.less'
+
+export default (props) => {
+  const [view, setView] = useState(true)
+  const [view2, setView2] = useState(false)
+  const [view3, setView3] = useState(false)
+  const [view4, setView4] = useState(false)
+  const [view5, setView5] = useState(false)
+  const [view6, setView6] = useState(false)
+  let value = view
+  let list = [
+    {
+      className: `Refund-star-view4 ${!value ? 'bg2' : 'Refund-star-view2'}`,
+      name: '预约不上',
+      value: false,
+    }
+  ]
+
+  const viewOK = () => {
+    setView(!view)
+  }
+
+  const view2OK = () => {
+    setView2(!view2)
+  }
+
+  const view3OK = () => {
+    setView3(!view3)
+  }
+
+  const view4OK = () => {
+    setView4(!view4)
+  }
+  const view5OK = () => {
+    setView5(!view5)
+  }
+
+  const view6OK = () => {
+    setView6(!view6)
+  }
+
+
+
+  return (
+
+    <view className='box-content'>
+      <CustomNav title='售后退款2' />
+      <view className='Refund-Content-box'>
+        <view className='title-image'>
+          <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
+          <text className='title-title-boss' >商品信息</text>
+        </view>
+      </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 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='Refund-Content-box'>
+        <view className='title-image'>
+          <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
+          <text className='title-title-boss' >退款原因</text>
+        </view>
+        {/* 退款结束 */}
+      </view>
+      <view className='Refund-content'>
+        <text className={`Refund-star-view ${view ? 'bg2' : 'Refund-star-view'}`} onClick={() => viewOK()} >计划有变,没时间消费</text>
+        <text className={`Refund-star-view2 ${view2 ? 'bg2' : 'Refund-star-view2'}`} onClick={() => view2OK()}  >误认为是外卖</text>
+        <text className={`Refund-star-view3 ${view3 ? 'bg2' : 'Refund-star-view3'}`} onClick={() => view3OK()} >没看清楚使用规则,要用时才发现限制很多</text>
+        <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 => {
+              return <text onClick={() => view4OK()} key={item.value} className={item.className}>
+                {item.name}
+              </text>
+
+            })
+          }
+        </view>
+      </view>
+
+      <view className='Refund-Content-box'>
+        <view className='title-image'>
+          <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
+          <text className='title-title-boss' >退款说明</text>
+        </view>
+      </view>
+      <view class='section'>
+        <Textarea placeholder='请补充退款说明（选填）!' confirm-type='done' />
+      </view>
+      <view className='money-title' >实付金额: <text className='money-name' >58元</text></view>
+      <view className='money-title' >已获返现: <text className='money-name' >1.88元</text></view>
+      <view className='money-title' >退款金额: <text className='money-name' >56.12元</text></view>
+      <view className='ul-li-text'>
+        <view className='ul-li-view' ></view>
+        <text className='ul-li-textname'>退款金额不可修改</text>
+      </view>
+      <view className='ul-li-text'>
+        <view className='ul-li-view' ></view>
+        <text className='ul-li-textname'>下单获得返现金额，会在退款时被扣除；</text>
+      </view>
+      <view className='ul-li-text'>
+        <view className='ul-li-view' ></view>
+        <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
+      </view>
+
+      <view className='button-info'>
+        <Button className='button-box'>提交申请</Button>
+      </view>
+    </view>
+  )
+}

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

@@ -0,0 +1,426 @@
+@whiteColor: #fff;
+.page-index {
+  padding: 0 25px;
+}
+
+.box-content {
+  width: 100%;
+  margin: 0 35px;
+
+  .Refund-Content-box {
+    .title-image {
+      margin-top: 39px;
+      display: flex;
+      width: 270px;
+      height: 40px;
+      .title-image-cup {
+        width: 32px;
+        height: 32px;
+        margin-top: 10px;
+        padding-right: 10px;
+        align-items: center;
+      }
+      .title-title-boss {
+        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-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: 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;
+      }
+    }
+  }
+  .Refund-content {
+    width: 100%;
+    margin-top: 45px;
+    .Refund-star-view {
+      display: inline-block;
+      width: 295px;
+      height: 60px;
+      border: 1px solid #999999;
+
+      border-radius: 30px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #666666;
+
+      text-align: center;
+      line-height: 60px;
+    }
+    .Refund-star-view2 {
+      width: 198px;
+      height: 60px;
+      border: 1px solid #999999;
+
+      border-radius: 30px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #666666;
+
+      text-align: center;
+      line-height: 60px;
+      display: inline-block;
+      margin-left: 30px;
+    }
+    .Refund-star-view3 {
+      margin: 30px auto;
+      display: inline-block;
+      width: 507px;
+      height: 60px;
+      border: 1px solid #999999;
+
+      border-radius: 30px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #666666;
+
+      text-align: center;
+      line-height: 60px;
+    }
+    .Refund-star-view4 {
+      display: inline-block;
+      width: 146px;
+      height: 60px;
+      background: #ffffff;
+      border-radius: 30px;
+      border: 1px solid #999999;
+      font-size: 24px;
+      font-weight: bold;
+      color: #666666;
+      text-align: center;
+      line-height: 60px;
+      margin-left: 30px;
+    }
+    .Refund-star-view5 {
+      display: inline-block;
+
+      width: 220px;
+      height: 60px;
+      background: #ffffff;
+      border-radius: 30px;
+      border: 1px solid #999999;
+      font-size: 24px;
+      font-weight: bold;
+      color: #666666;
+      text-align: center;
+      line-height: 60px;
+    }
+    .Refund-star-view6 {
+      display: inline-block;
+
+      width: 257px;
+      height: 60px;
+      background: #ffffff;
+      border-radius: 30px;
+      border: 1px solid #999999;
+      font-size: 24px;
+      font-weight: bold;
+      color: #666666;
+      text-align: center;
+      line-height: 60px;
+      margin-left: 30px;
+    }
+
+    /* 点击以后的样式 */
+    .bg2 {
+      color: #274190;
+      border: 2px solid #274190;
+    }
+  }
+
+  .section {
+    width: 86%;
+    height: 254px;
+    background: #ffffff;
+    border: 1px solid #b5b5b5;
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+    padding: 0 20px 0 20px;
+    margin-top: 40px;
+    textarea {
+      padding-top: 20px;
+      font-size: 24px;
+      font-weight: 400;
+      color: #666666;
+    }
+  }
+
+  .money-title {
+    // display: inline-block;
+    margin: 40px 0;
+    width: 86%;
+    padding-bottom: 20px;
+    // height: 29px;
+    font-size: 30px;
+    font-weight: bold;
+    color: #202020;
+    // border-bottom: 1px solid ;
+    background: #ffffff;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .money-name {
+    font-size: 30px;
+    font-weight: bold;
+    color: #ff3434;
+  }
+  .ul-li-text {
+    .ul-li-view {
+      display: inline-block;
+      margin-bottom: 3px;
+      margin-right: 5px;
+      width: 10px;
+      height: 10px;
+      background: #999999;
+      border-radius: 50%;
+    }
+    .ul-li-textname {
+      // width: 177px;
+      display: inline-block;
+      height: 19px;
+      font-size: 20px;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+
+  .button-info {
+    margin-bottom: 70px;
+
+    .button-box {
+      margin: 60px 0;
+      width: 690px;
+      height: 88px;
+      line-height: 88px;
+      background: #274291;
+      border-radius: 12px;
+      color: @whiteColor;
+    }
+  }
+
+  //线条
+  // .right-complete-two::after {
+  //   content: "";
+  //   position: absolute;
+  //   top: 15px;
+  //   margin: 26px auto;
+  //   height: 70%;
+  //   border-left: 1px dashed #595959;
+  // }
+}

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

@@ -0,0 +1,8 @@
+export default {
+  navigationBarTitleText: '售后退款',
+  navigationStyle: 'custom',
+  "usingComponents": {
+    "mp-dialog": "weui-miniprogram/dialog/dialog",
+    "mp-tabs": "../../../components/tabs/index"
+  }
+}

src/pages/MineUserAll/RefundMoney/index.jsx

@@ -0,0 +1,116 @@
+
+import { useState } from "react";
+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 Null from '@/assets/icons/UserCenter/null_logo.png'
+import Refund from '@/assets/icons/UserCenter/Refund.png'
+
+import starOn from '@/assets/icons/GuideCheck/starOn.png'
+import starOff from '@/assets/icons/GuideCheck/starOff.png'
+
+
+
+
+import CustomNav from '@/components/CustomNav'
+import './style.less'
+
+
+const scoreList = new Array(5).fill(0)
+const score = '3.9'
+export default (props) => {
+
+  const handleRefund2 = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/RefundMoney/CheckRefund/index' })
+    console.log('------------------');
+  }
+  return (
+    <view className='box-content'>
+      <CustomNav title='售后退款' />
+      <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) => {
+                console.log(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  14:00</view>
+          </view>
+        </view>
+        <view class='right-complete-two' onClick={handleRefund2} >
+          <view className='right-content'>
+            <image className='right-image' src={Refund} />
+            <view className='right-title'>售后</view>
+          </view>
+        </view>
+      </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) => {
+                console.log(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  14:00</view>
+          </view>
+        </view>
+        <view class='right-complete-two' onClick={handleRefund2} >
+          <view className='right-content'>
+            {/* <image className='right-image-two' src={Null} /> */}
+            <image className='right-image' src={Refund} />
+            <view className='right-title'>售后</view>
+          </view>
+        </view>
+      </view>
+      <view className='foot'>
+        已经到底了~
+      </view>
+    </view>
+  )
+}

src/pages/MineUserAll/RefundMoney/style.less

@@ -0,0 +1,251 @@
+@whiteColor: #fff;
+.page-index {
+  padding: 0 25px;
+}
+
+.box-content {
+  width: 100%;
+  .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-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: 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: 10px 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;
+      }
+    }
+  }
+  //线条
+  .right-complete-two::after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    margin: 26px auto;
+    height: 70%;
+    border-left: 1px dashed #595959;
+  }
+  //已过期logo
+  .right-image-two {
+    margin-top: 30px;
+    width: 76px;
+    height: 66px;
+  }
+  .foot {
+    width: 100%;
+    height: 26px;
+    font-size: 28px;
+    font-weight: 400;
+    color: #c0c8d3;
+    line-height: 34px;
+    margin-top: 40px;
+    text-align: center;
+  }
+}

src/pages/MineUserAll/Rules/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '用户协议须知',
+  navigationStyle: 'custom',
+}

src/pages/MineUserAll/Rules/index.jsx

@@ -0,0 +1,29 @@
+
+import CustomNav from '@/components/CustomNav'
+import './style.less'
+
+export default (props) => {
+  return (
+    <view className='box-content'>
+      <CustomNav title='用户协议须知' />
+      <view className='aaa'>
+        以下是详细的用户须知：
+      </view>
+      <view className='content'>
+        Lorem ipsumdolorsitamet,consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Quisipsumsuspendisseultricesgravida. Risuscommodoviverramaecenasaccumsan lacus vel facilisis.
+      </view>
+      <view className='content'>
+        Lorem ipsumdolorsitamet,consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Quisipsumsuspendisseultricesgravida. Risuscommodoviverramaecenasaccumsan lacus vel facilisis.
+        Lorem ipsumdolorsitamet,consectetur adipiscing elit,
+      </view>
+      <view className='content'>
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Quisipsumsuspendisseultricesgravida. Risuscommodoviverramaecenasaccumsan lacus vel facilisis.
+      </view>
+    </view>
+  )
+}

src/pages/MineUserAll/Rules/style.less

@@ -0,0 +1,14 @@
+.box-content {
+  font-size: 32px;
+  font-weight: 400;
+  color: #333333;
+  width: 685px;
+  height: 1314px;
+  .aaa {
+    margin: 10px auto;
+  }
+
+  .content {
+    text-indent: 2em;
+  }
+}

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.config.js

@@ -0,0 +1,13 @@
+export default {
+  navigationBarTitleText: '测试页2',
+  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/PayOrder/index.jsx

@@ -0,0 +1,184 @@
+
+import image from '@/assets/icons/ProCard/8kb.jpg'
+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 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'>
+            <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'>【橘里橘气咖啡店】新鲜出炉啦!</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' onClick={ShowMoldeOn} >
+            <view className='right-content'>
+              <view className='right-number'>×{BuyNumber}</view>
+              <view className='right-title'>数量</view>
+            </view>
+          </view>
+        </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'>【橘里橘气咖啡店】新鲜出炉啦!</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 className='right-number'>×1</view>
+              <view className='right-title'>数量</view>
+            </view>
+          </view>
+        </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'>【橘里橘气咖啡店】新鲜出炉啦!</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 className='right-number'>×1</view>
+              <view className='right-title'>数量</view>
+            </view>
+          </view>
+        </view>
+
+      </view>
+      <view className='view-button'>
+        <view className='Card-number-box'>
+          <view className='Card-number'>
+            <text style='left:29px;position: absolute; padding-top:20px'>手机号码:</text>
+            <text style='right:29px;position: absolute;padding-top:20px'>16161312125</text>
+          </view>
+          <view className='Card-user'>
+            <Radio style='padding-left:20px; position: relative; top:24px;' value='我已阅读知晓并同意' >我已阅读知晓并同意 <text style='color:#274190;text-decoration:underline;font-weight:400'>《平台用户服务协议》</text></Radio>
+          </view>
+        </view>
+        <view className='button-box-button-box'>
+          <view className='button-text-image' >
+            <text className='button-text-money-hot'>返现￥2.18</text>
+            <image className='button-image' src={ProCard_hot}>123123</image>
+            <view className='button-text-money'>门店市面价：230元</view>
+          </view>
+          <Button className='button-box-one'>￥170元 <text className='button-text-one'>支付订单</text> </Button>
+        </view>
+
+      </view>
+    </view>
+
+
+  )
+}

src/pages/PayOrder/style.less

@@ -0,0 +1,273 @@
+@whiteColor: #fff;
+@Image-ProCard_hot: "../../assets/icons/ProCard/ProCard_hot.png";
+.container {
+  width: 100%;
+  .item-center-Number {
+    width: 100%;
+    margin-top: 30px;
+    .buy-num-minus {
+      display: inline-block;
+      width: 60px;
+      height: 60px;
+      background: #ffffff;
+      border: 1px solid #999999;
+      border-radius: 8px 0px 0px 8px;
+    }
+    .buy-num-input {
+      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;
+    }
+    .buy-num-add {
+      display: inline-block;
+
+      width: 60px;
+      height: 60px;
+      background: #ffffff;
+      border: 1px solid #999999;
+      border-radius: 0px 8px 8px 0px;
+    }
+  }
+  .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: 40px;
+        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;
+  }
+
+  .view-button {
+    // width: 100%;
+    // height: 150px;
+    position: relative;
+
+    .Card-number-box {
+      .Card-number {
+        width: 100%;
+        height: 96px;
+        background-color: @whiteColor;
+      }
+      .Card-user {
+        width: 100%;
+        height: 96px;
+        background-color: @whiteColor;
+      }
+    }
+    .button-box-button-box {
+      position: relative;
+      .button-text-image {
+        width: 144;
+        height: 45px;
+        position: absolute;
+        top: -35px;
+        left: 267px;
+        right: 305px;
+        z-index: 1;
+        .button-text-money-hot {
+          position: absolute;
+          width: 144px;
+          height: 43px;
+          line-height: 43px;
+          font-size: 24px;
+          font-weight: bold;
+          color: @whiteColor;
+        }
+        .button-image {
+          width: 143px;
+          height: 43px;
+        }
+        .button-text-money {
+          position: absolute;
+          margin-top: -8;
+          width: 157px;
+          font-size: 18px;
+          font-weight: 400;
+          text-decoration: line-through;
+          color: @whiteColor;
+        }
+      }
+      .button-box-one {
+        font-size: 30px;
+        line-height: 92px;
+        margin-top: 3em;
+        background-color: #274190;
+        border-radius: 12px;
+        width: 690px;
+        height: 92px;
+        color: @whiteColor;
+        // position: absolute;
+        bottom: 40px;
+        right: 0;
+        left: 0;
+        .button-text-one {
+          right: 133px;
+          font-size: 30px;
+          padding-left: 220px;
+        }
+      }
+    }
+  }
+}

src/pages/index/index.config.js

@@ -4,5 +4,6 @@ export default {
   styleIsolation: 'shared',
   usingComponents: {
     "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
+
   }
 }

src/pages/index/index.jsx

@@ -1,17 +1,24 @@
-import React, { Suspense, useState, lazy } from 'react'
-import { View, Text } from '@tarojs/components'
+import React, { Suspense, useState, useEffect, lazy } from 'react'
+import { useRouter } from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
 import logo from '@/assets/icons/comm/logo_small.png'
 import tabList from './tabbar'
 import './index.less'
+import Guide from './tabs/Guide'
+import Mine from './tabs/Mine'
+import Recommend from './tabs/Recommend'
+import Strategy from './tabs/Strategy'
 
-const Recommend = lazy(() => import('./tabs/Recommend'))
-const Guide = lazy(() => import('./tabs/Guide'))
-const Strategy = lazy(() => import('./tabs/Strategy'))
-const Mine = lazy(() => import('./tabs/Mine'))
+// const Recommend = lazy(() => import('./tabs/Recommend'))
+// const Guide = lazy(() => import('./tabs/Guide'))
+// const Strategy = lazy(() => import('./tabs/Strategy'))
+// const Mine =  import'./tabs/Mine'
 
 
 export default (props) => {
+  const { params } = useRouter()
+  const { tab } = params || {}
+
   const [currentTab, setCurrentTab] = useState(0)
 
   const handleTabChange = (e) => {
@@ -19,22 +26,29 @@ export default (props) => {
     setCurrentTab(index)
   }
 
+  useEffect(() => {
+    if (tab) {
+      setCurrentTab(tab - 0)
+    }
+    console.log('---------------------', tab);
+
+  }, [tab])
   return (
     <view className='page-index'>
       <view className='index-navbar'>
         <CustomNav logo={logo} title='十公里' />
       </view>
       <view className='index-container'>
-        <Suspense fallback='loading...'>
-          {currentTab === 0 && <Recommend />}
-          {currentTab === 1 && <Guide />}
-          {currentTab === 2 && <Strategy />}
-          {currentTab === 3 && <Mine />}
-        </Suspense>
+        {currentTab === 0 && <Recommend />}
+        {currentTab === 1 && <Guide />}
+        {currentTab === 2 && <Strategy />}
+        {currentTab === 3 && <Mine />}
       </view>
       <view className='index-tabbar'>
         <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
       </view>
     </view>
+
   )
+
 }

src/pages/index/index.less

@@ -21,11 +21,11 @@
 }
 
 .custom-tabbar {
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
 
   .weui-tabbar__label {
-    color: #C0C8D3;
+    color: #c0c8d3;
   }
 
   .weui-bar__item_on {

src/pages/index/tabs/Guide.jsx

@@ -1,19 +1,284 @@
+import { useState } from "react";
 import Taro from '@tarojs/taro'
-import React from 'react'
-import Card from '@/components/Card'
+import image from '@/assets/icons/ProCard/8kb.jpg'
+import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
+import food from '@/assets/icons/ProCard/food.png'
+import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
+import sleep from '@/assets/icons/GuideCheck/sleep_logo.png'
+import Taxi from '@/assets/icons/GuideCheck/taxi.png'
+import WiFi from '@/assets/icons/GuideCheck/WiFi.png'
+import GoHere from '@/assets/icons/GuideCheck/GoHere.png'
+import position from '@/assets/icons/GuideCheck/position_logo.png'
+import Cup from '@/assets/icons/GuideCheck/Cup.png'
+import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
+import starOn from '@/assets/icons/GuideCheck/starOn.png'
+import starOff from '@/assets/icons/GuideCheck/starOff.png'
+import loveOn from '@/assets/icons/GuideCheck/loveOn.png'
+import Raiders from '@/assets/icons/GuideCheck/Raiders.png'
+import RaidersImage from '@/assets/icons/GuideCheck/RaidersImage.jpg'
+import AAAAAAAA from '@/assets/icons/GuideCheck/RaidersImage.jpg'
+
+import './GuideCss/style.less'
+
+
+const scoreList = new Array(5).fill(0)
+const score = '3.9'
+
 
 export default (props) => {
+  const [value, setVaule] = useState('已收藏')
+  const [imageSrc, setImageSrc] = useState(starOn)
+
+
+
+
+  const Ac = () => {
+    setImageSrc(starOff)
+    setVaule('加入收藏')
+    // console.log('------------', value);
+
+  }
 
   const handleClick = () => {
     Taro.navigateTo({ url: '/pages/test/index' })
   }
-
+  // onClick={handleClick}
   return (
-    <view onClick={handleClick}>
-      <Card>
+    <scroll-view scroll-y style='height: 77vh;' >
+
+      <view className='Guide-Home-box'>
+        {/* <view className='Guide-image-text-box'>
+          <image className='Guide-images' src={sleep} />
+          <view className='Guide-text'>休息一下，休息一下~</view>
+        </view> */}
+        {/* 图片结束 */}
+        {/* 有民宿的情况下 */}
+        <view className='MessageCard'>
+          <view className='MessageCard-title1'>
+            <text className='MessageCard-left'>----------</text>
+            名称
+            <text className='MessageCard-right'>----------</text>
+          </view>
+          <view className='MessageCard-content'>
+            <view className='MessageCard-name' >皇冠假日酒店-2507</view>
+            {/* <view className='MessageCard-info' >江苏省南京市秦淮区XXXXXX路</view> */}
+          </view>
+          {/* <view className='MessageCard-button'>
+            <image className='MessageCard-image' src={GoHere} />
+            <text className='MessageCard-text'>去这里</text>
+          </view> */}
+        </view>
+        {/* 有民宿的情况下 */}
+        <view className='MessageCard'>
+          <view className='MessageCard-title1'>
+            <text className='MessageCard-left'>----------</text>
+            民宿位置
+            <text className='MessageCard-right'>----------</text>
+          </view>
+          <view className='MessageCard-content'>
+            <view className='MessageCard-name' >精悦SHOS-北门</view>
+            <view className='MessageCard-info' >江苏省南京市秦淮区XXXXXX路</view>
+          </view>
+          <view className='MessageCard-button'>
+            <image className='MessageCard-image' src={GoHere} />
+            <text className='MessageCard-text'>去这里</text>
+          </view>
+        </view>
+        {/* 有民宿的情况下 */}
+        <view className='MessageCard'>
+          <view className='MessageCard-title1'>
+            <text className='MessageCard-left'>----------</text>
+            停车位置
+            <text className='MessageCard-right'>----------</text>
+          </view>
+          <view className='MessageCard-content'>
+            <view className='MessageCard-name' >江苏通讯大厦停车厂</view>
+            <view className='MessageCard-info' >江苏省南京市秦淮区集庆路</view>
+          </view>
+          <view className='MessageCard-button'>
+            <image className='MessageCard-image' src={Taxi} />
+            <text className='MessageCard-text'>去这里</text>
+          </view>
+        </view>
+        {/* 有民宿的情况下 */}
+        <view className='MessageCard'>
+          <view className='MessageCard-title1'>
+            <text className='MessageCard-left'>----------</text>
+            WiFi信息
+            <text className='MessageCard-right'>----------</text>
+          </view>
+          <view className='MessageCard-content'>
+            <view className='MessageCard-name' >名称：2507</view>
+            <view className='MessageCard-info' >密码：15s1x5s5</view>
+          </view>
+          <view className='MessageCard-button'>
+            <image className='MessageCard-image' src={WiFi} />
+            <text className='MessageCard-text'>复制</text>
+          </view>
+        </view>
+        {/* 更多指引开始 */}
+        <view className='Guide-Content-box'>
+          <view className='title-image'>
+            <image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
+            <text className='title-title-boss' >更多指引</text>
+          </view>
+        </view>
+        <view className='articleCard'>
+          <view className='articleCard-title'>
+            <text className='articleCard-left'>--------</text>
+            南京市·普通公寓里的独立房间
+            <text className='articleCard-right'>--------</text>
+          </view>
+          <view className='articleCard-content'>
+            <image className='articleCard-image' src={AAAAAAAA} />
+          </view>
+          <view className='articleCard-textarea'>
+            <view className='articleCard-textarea-title' >位置：<text className='articleCard-textarea-content'>地处繁华街区，餐饮、娱乐选择丰富
+              毗邻虹桥CBD，世贸商城展馆，百盛城市购物中心金虹桥购物中心，虹桥艺术中心，领馆聚集区，商务活动频繁，购物、聚会、聚餐、观看演出、表演电影，各项活动一应俱全。
+            </text></view>
+            <view className='articleCard-textarea-title' >出行信息：<text className='articleCard-textarea-content'>地处繁华街区，餐饮、娱乐选择丰富
+              地铁2号线娄山关路站下车3号口出步行5分钟可以到达。周边公交车众多，四通八达，叫车也非常便捷快速。2号线去虹桥机场、虹桥高铁站勻为直达，无需换乘，非常便捷快速，耗时在20分钟左右（4-5站即可抵达）.
+
+            </text></view>
+          </view>
+        </view>
+        {/* 更多指引结束 */}
+        <view className='Guide-Content-box'>
+          <view className='title-image'>
+            <image mode='scaleToFill' className='title-image-cup' src={Cup} />
+            <text className='title-title-boss' >老板推荐好吃的</text>
+          </view>
+        </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) => {
+                  console.log(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'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+              </view>
+              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
+              <view className='title-position-on'>
+                <image className='title-position' src={position} />
+                <text className='title-position-image'>南京市/秦淮区</text>
+                <image className='title-on' src={imageSrc} />
+                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+              </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 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) => {
+                  console.log(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'>【橘里橘啊换行啊啊啊气咖啡店】新鲜出炉啦!</view>
+              </view>
+              <text className='title-money' >￥6990元<text className='title-money-2'>门市价78元</text></text>
+              {/* ProCard区域定位 */}
+              <view className='title-position-on'>
+                <image className='title-position' src={position} />
+                <text className='title-position-image'>南京市/秦淮区</text>
+                <image className='title-on' src={imageSrc} />
+                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+              </view>
+            </view>
+          </view>
+          <view class='right-complete-two'>
+            <view className='right-content'>
+              {/* <view className='right-number'>×1</view> */}
+              <image className='right-image' src={Pay} />
+              <view className='right-title'>支付</view>
+            </view>
+          </view>
+        </view>
+        {/* 卡片------------- */}
+        <view className='Guide-Content-box-two'>
+          <view className='title-image-two'>
+            <image mode='scaleToFill' className='title-image-cup-two' src={Cup} />
+            <text className='title-title-boss-two' >老板推荐的攻略</text>
+          </view>
+        </view>
+        {/* 小标题结束 */}
+        {/* 攻略卡片 */}
+        <view className='Raiders-box-one'>
+          <view className='Raiders-imageLove'>
+            <image className='Raiders-image-Raiders' src={Raiders} />
+            <image className='Raiders-image-loveOn' src={loveOn} />
+          </view>
+          <view className='Raiders-box'>
+            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
+            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
+            <view className='Raiders-kilometer-on'>
+              <image className='Raiders-kilometer' src={position} />
+              <text className='Raiders-kilometer-image'>12.8公里</text>
+              <text className='Raiders-on-text'>￥8888/人</text>
+            </view>
+          </view>
+          <view className='Raiders-box' style='padding-lift:10px'>
+            <view className='Raiders-imageLove'>
+              <image className='Raiders-image-Raiders' src={Raiders} />
+              <image className='Raiders-image-loveOn' src={loveOn} />
+            </view>
+            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
+            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
+            <view className='Raiders-kilometer-on'>
+              <image className='Raiders-kilometer' src={position} />
+              <text className='Raiders-kilometer-image'>12.8公里</text>
+              <text className='Raiders-on-text'>￥8888/人</text>
+            </view>
+          </view>
+          {/* <view className='Raiders-box'></view> */}
+        </view>
+      </view>
+    </scroll-view>
 
-      入住指引
-      </Card>
-    </view>
   )
 }

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

@@ -0,0 +1,518 @@
+@whiteColor: #fff;
+
+.page-index {
+  padding: 0 25px;
+}
+.Guide-Home-box {
+  // width: 333333333333px;
+  .MessageCard {
+    width: 690px;
+    height: 175px;
+    background: @whiteColor;
+    border-radius: 12px;
+    margin: 30px auto;
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+
+    .MessageCard-title1 {
+      height: 26px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #666666;
+      line-height: 44px;
+      text-align: center;
+      .MessageCard-left {
+        width: 530px;
+        height: 2px;
+        padding-right: 50px;
+        // opacity: 0.5;
+      }
+      .MessageCard-right {
+        width: 530px;
+        height: 2px;
+        padding-left: 50px;
+      }
+    }
+    .MessageCard-content {
+      // background: @whiteColor;
+      width: 13em;
+      height: 2.5em;
+      margin-top: 45px;
+      display: inline-block;
+      margin-left: 30px;
+
+      .MessageCard-name {
+        height: 30px;
+        font-size: 32px;
+        font-weight: bold;
+        color: #202020;
+        line-height: 44px;
+      }
+      .MessageCard-info {
+        height: 23px;
+        font-size: 24px;
+        font-weight: 400;
+        color: #666666;
+        line-height: 44px;
+        padding-top: 19px;
+      }
+    }
+    .MessageCard-button {
+      width: 168px;
+      height: 60px;
+      border: 2px solid #000000;
+      border-radius: 12px;
+      position: relative;
+      text-align: center;
+      display: inline-block;
+      bottom: 10px;
+      left: 1.5em;
+      .MessageCard-image {
+        width: 30px;
+        height: 30px;
+        padding-top: 12px;
+        padding-right: 5px;
+      }
+      .MessageCard-text {
+        line-height: 30px;
+        width: 87px;
+        height: 28px;
+        font-size: 30px;
+        font-weight: bold;
+        color: #202020;
+      }
+    }
+  }
+
+  .articleCard {
+    margin-top: 60px;
+    width: 690px;
+    // height: 1066px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+    padding-bottom: 66px;
+    margin-bottom: 20px;
+
+    .articleCard-title {
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      line-height: 44px;
+      text-align: center;
+      padding: 30px auto;
+      padding-top: 30px;
+      .articleCard-left {
+      }
+      .articleCard-right {
+      }
+    }
+    .articleCard-content {
+      width: 100%;
+      text-align: center;
+      padding: 30px 0 20px 0;
+      .articleCard-image {
+        width: 630px;
+        height: 378px;
+      }
+    }
+    .articleCard-textarea {
+      width: 629px;
+      margin: 0 auto;
+      .articleCard-textarea-title {
+        font-size: 28px;
+        font-weight: bold;
+        color: #202020;
+        line-height: 54px;
+      }
+      .articleCard-textarea-content {
+        font-size: 28px;
+        font-weight: 400;
+        color: #202020;
+        line-height: 54px;
+        padding-bottom: 10px;
+      }
+    }
+  }
+
+  .Guide-image-text-box {
+    width: 472px;
+    height: 548px;
+    margin: auto;
+    margin-top: 102px;
+    margin-bottom: 103px;
+    .Guide-images {
+      width: 472px;
+      height: 482px;
+    }
+    .Guide-text {
+      width: 268px;
+      font-weight: 400;
+      color: #999;
+      margin: auto;
+      width: 268px;
+      height: 26px;
+      font-size: 26px;
+      padding-top: 20px;
+    }
+  }
+  .Guide-Content-box {
+    .title-image {
+      display: flex;
+      width: 270px;
+      height: 40px;
+      .title-image-cup {
+        width: 32px;
+        height: 32px;
+        margin-top: 10px;
+        padding-right: 10px;
+        align-items: center;
+      }
+
+      .title-title-boss {
+        align-items: center;
+
+        font-size: 32px;
+        font-weight: 800;
+        color: #202020;
+      }
+    }
+  }
+  //卡片---------------
+
+  .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: 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: 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 {
+          font-size: 18px;
+          color: #666;
+          padding-left: 10px;
+          text-decoration: line-through;
+        }
+
+        .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: 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;
+  }
+  .Guide-Content-box-two {
+    margin-top: 61px;
+    margin-bottom: 31px;
+    .title-image-two {
+      display: flex;
+      width: 270px;
+      height: 40px;
+      .title-image-cup-two {
+        width: 32px;
+        height: 32px;
+        margin-top: 10px;
+        padding-right: 10px;
+        align-items: center;
+      }
+
+      .title-title-boss-two {
+        align-items: center;
+
+        font-size: 32px;
+        font-weight: 800;
+        color: #202020;
+      }
+    }
+  }
+
+  //攻略卡片.
+  .Raiders-box-one {
+    // width: 100%;
+    // // background-color: black;
+    margin-bottom: 60px;
+    display: flex;
+
+    justify-content: space-around;
+    .Raiders-imageLove {
+      display: flex;
+      position: absolute;
+      width: 330px;
+
+      .Raiders-image-Raiders {
+        // position: absolute;
+        width: 99px;
+        height: 37px;
+      }
+      .Raiders-image-loveOn {
+        position: absolute;
+        top: 12px;
+        right: 21px;
+        width: 22px;
+        height: 20px;
+      }
+    }
+    .Raiders-box {
+      // display: inline;
+      // border: 1px solid RED;
+      width: 330px;
+      // height: 649px;
+      background: #ffffff;
+      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 24px;
+      // flex-grow: 1;
+      // padding-right: 30px;
+      // display: flex;
+      // flex-flow: row nowrap;
+      justify-content: space-between;
+      .Raiders-image {
+        width: 330px;
+        // width: 100%;
+        height: 439px !important;
+        border-radius: 24px 24px 0px 0px;
+      }
+      .Raiders-text {
+        margin: auto;
+        width: 287px;
+        font-size: 24px;
+        font-weight: 700;
+        color: #404040;
+        line-height: 46px;
+        padding-top: 28px;
+        margin-bottom: 42px;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        word-wrap: break-word;
+      }
+      .Raiders-kilometer-on {
+        text-align: center;
+        margin-bottom: 50px;
+
+        .Raiders-kilometer {
+          width: 18px;
+          height: 24px;
+          padding-right: 10px;
+        }
+        .Raiders-kilometer-image {
+          width: 90px;
+          height: 21px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #c0c8d3;
+        }
+        .Raiders-on-text {
+          padding-left: 75px;
+          width: 70px;
+          height: 21px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #ff3434;
+        }
+      }
+    }
+  }
+}

src/pages/index/tabs/Mine.jsx

@@ -1,10 +1,132 @@
 import React from 'react'
+import Taro from '@tarojs/taro'
+
+import girl from '@/assets/icons/UserCenter/girl.png'
+import boy from '@/assets/icons/UserCenter/boy.png'
+import awaitPay from '@/assets/icons/UserCenter/awaitPay.png'
+import AllOrder from '@/assets/icons/UserCenter/AllOrder.png'
+import Refund from '@/assets/icons/UserCenter/Refund.png'
+import ToShop from '@/assets/icons/UserCenter/ToShop.png'
+import HomeLogo from '@/assets/icons/UserCenter/HomeLogo.png'
+import ContactMe from '@/assets/icons/UserCenter/ContactMe.png'
+import collect from '@/assets/icons/UserCenter/collect.png'
+import MyTravel from '@/assets/icons/UserCenter/MyTravel.png'
+import Rules from '@/assets/icons/UserCenter/Rules.png'
+import Userrrrrrr from '@/assets/icons/ProCard/8kb.jpg'
+// import Tbas2 from '@/pages/index/tabs/Guide'
+import './MineCss/style.less'
+
+
 
 export default (props) => {
+  // // 我的行程 
+  // const HomeLogo = () => {
+  //   Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
+  // }
+
+  // 待支付
+  const handleTobePaid = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=1' })
+  }
+  // 待核销
+  const handleTobeWritten = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=2' })
+  }
+  // 我的订单全部
+  const handleAllOrder = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=0' })
+  }
+
+  //退款
+  const handleRefund = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/RefundMoney/index' })
+  }
+  //入住指引
+  const handleHomeLogo = () => {
+    Taro.navigateTo({ url: '/pages/index/index?tab=1' })
+  }
+  //收藏
+  const handleCollect = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/Collect/index' })
+  }
+  //联系我们
+  const handleContactMe = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/ContactMe/index' })
+  }
+
+  //条款
+  const handleRules = () => {
+    Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
+  }
+
+
+
+
+
   return (
-    <view>
-      <button openType='getPhoneNumber'>个人中心</button>
+    <scroll-view scroll-y style='height: 77vh;' >
+      <view className='User-box'>
+        <view className='User-info'>
+          <view className='User-photos-box'>
+            <image src={Userrrrrrr} className='User-photos' />
+          </view>
+          <view className='User-info-all'>
+            <view className='User-name'>福西西<image className='User-sex' src={boy} /></view>
+            <view className='User-phone'>136****9434</view>
+          </view>
+        </view>
+        {/* 用户信息结束 */}
+        <view className='buy-list-box'>
+          <view className='buy-list-Paybox' onClick={handleTobePaid} >
+            <image className='buy-list-PayLogo' src={awaitPay} />
+            <view className='buy-list-goPay'>待支付</view>
+            <view className='buy-list-OrderNumber'>2笔订单</view>
+          </view>
+          <view className='buy-list-Paybox ' onClick={handleTobeWritten} >
+            <image className='buy-list-PayLogo' src={ToShop} />
+            <view className='buy-list-goPay'>待核销</view>
+            <view className='buy-list-OrderNumber'>1个订单</view>
+          </view>
+          <view className='buy-list-Paybox ' onClick={handleAllOrder} >
+            <image className='buy-list-PayLogo' src={AllOrder} />
+            <view className='buy-list-goPay'>全部订单</view>
+            <view className='buy-list-OrderNumber'>查看详情</view>
+          </view>
+          <view className='buy-list-Paybox ' onClick={handleRefund} >
+            <image className='buy-list-PayLogo' src={Refund} />
+            <view className='buy-list-goPay'>退款/售后</view>
+            <view className='buy-list-OrderNumber'>2笔订单</view>
+          </view>
+        </view>
+        <view className='Badge-box'>
+          <view className='Badge-list' onClick={handleHomeLogo}>
+            <image className='Badge-list-logo' src={HomeLogo} />
+            <text className='Badge-list-titme'> 入住指引</text>
+            <text className='Badge-list-gt'>&gt;</text>
+          </view>
+          {/* <view className='Badge-list' onClick={handleRules}>
+            <image className='Badge-list-logo' src={MyTravel} />
+            <text className='Badge-list-titme'> 我的行程</text>
+            <text className='Badge-list-gt'>&gt;</text>
+          </view> */}
+          <view className='Badge-list' onClick={handleCollect}>
+            <image className='Badge-list-logo' src={collect} />
+            <text className='Badge-list-titme'> 我的收藏</text>
+            <text className='Badge-list-gt'>&gt;</text>
+          </view>
+          <view className='Badge-list' onClick={handleContactMe}>
+            <image className='Badge-list-logo' src={ContactMe} />
+            <text className='Badge-list-titme'> 联系我们</text>
+            <text className='Badge-list-gt'>&gt;</text>
+          </view>
+          <view className='Badge-list' onClick={handleRules}>
+            <image className='Badge-list-logo' src={Rules} />
+            <text className='Badge-list-titme'> 协议声明</text>
+            <text className='Badge-list-gt'>&gt;</text>
+          </view>
+        </view>
 
-    </view>
+      </view>
+    </scroll-view>
   )
-}
+}

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

@@ -0,0 +1,131 @@
+.page-index {
+  padding: 0 25px;
+}
+
+.User-box {
+  width: 100%;
+  .User-info {
+    width: 90%;
+    align-items: center;
+    display: -webkit-flex;
+    margin: 60px auto;
+    .User-photos-box {
+      display: inline-block;
+      .User-photos {
+        width: 128px;
+        height: 128px;
+        border-radius: 50%;
+      }
+    }
+    .User-info-all {
+      padding-left: 30px;
+      width: 200px;
+      display: inline-block;
+      .User-name {
+        // height: 34px;
+        font-size: 38px;
+        font-weight: bold;
+        color: #202020;
+        line-height: 48px;
+      }
+      .User-sex {
+        padding-left: 10px;
+        width: 33px;
+        height: 32px;
+      }
+      .User-phone {
+        // height: 20px;
+        font-size: 30px;
+        font-weight: 400;
+        color: #202020;
+        line-height: 48px;
+      }
+    }
+  }
+
+  .buy-list-box {
+    width: 100%;
+    // margin-right: 5px;
+    display: flex;
+    margin-top: 40px;
+    justify-content: space-around;
+    flex-wrap: wrap;
+
+    .buy-list-Paybox {
+      width: 47%;
+      height: 216px;
+      background: #ffffff;
+      box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 24px;
+      display: inline-block;
+      // margin-right: 16px;
+      margin-top: 40px;
+
+      .buy-list-PayLogo {
+        padding-top: 35px;
+        width: 44px;
+        height: 44px;
+        display: block;
+        margin: auto;
+      }
+      .buy-list-goPay {
+        padding-top: 28px;
+        width: 100%;
+        font-size: 30px;
+        font-weight: bold;
+        color: #202020;
+        text-align: center;
+      }
+      .buy-list-OrderNumber {
+        width: 100%;
+        padding-top: 20px 0 39px 0;
+        font-size: 22px;
+        color: #999;
+        font-weight: 400;
+        text-align: center;
+      }
+    }
+  }
+  .Badge-box {
+    margin-top: 30px;
+    .Badge-list {
+      width: 690px;
+      height: 102px;
+      background: #ffffff;
+      box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 24px;
+      display: flex;
+      align-items: center;
+      margin: 20px auto;
+
+      .Badge-list-logo {
+        width: 39px;
+        height: 33px;
+        padding: 0 30px;
+      }
+      .Badge-list-titme {
+        display: inline-block;
+        width: 160px;
+        font-size: 32px;
+        font-weight: normal;
+        color: #333333;
+        line-height: 70px;
+      }
+      .Badge-list-gt {
+        display: inline-block;
+        position: absolute;
+        right: 1.5em;
+        font-size: 35px;
+        font-weight: bold;
+        color: #999;
+      }
+    }
+    // .Badge-list:nth-child(3) {
+    //   margin-top: 20px;
+    //   border-radius: 24px 24px 0px 0px;
+    // }
+    // .Badge-list:nth-child(4) {
+    //   border-radius: 0px 0px 24px 24px;
+    // }
+  }
+}