个人中心

package-lock.json

@@ -1416,6 +1416,11 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@miniprogram-component-plus/tabs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/@miniprogram-component-plus/tabs/download/@miniprogram-component-plus/tabs-1.0.0.tgz",
+      "integrity": "sha1-y/a04858SsiteQqES0BxVfB9ntc="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",

package.json

@@ -36,6 +36,7 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
+    "@miniprogram-component-plus/tabs": "^1.0.0",
     "@tarojs/components": "3.3.2",
     "@tarojs/react": "3.3.2",
     "@tarojs/runtime": "3.3.2",

src/app.config.js

@@ -3,6 +3,14 @@ export default {
     'pages/index/index',
     'pages/test/index',
     '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

@@ -7,7 +7,8 @@ export default (props) => {
   return (
     <view class='wrapper'>
       <view class='left-complete-one'>
-        <image className='left-image-1' src={ProCard_hot}></image>
+        <image className='left-image-1' src={ProCard_hot} />
+        {props.children}
         {/* <view className='left-viewText'>
               返现￥16.00
             </view> */}
@@ -16,6 +17,7 @@ export default (props) => {
           {/* <image className='image-2' src={food}></image> */}
         </view>
         <view className='title-content'>
+          {props.children}
           {/* <view className='Pro-title'>
                 <view className='title-text'>【橘里橘气咖啡店】新鲜出炉啦!</view>
               </view>
@@ -25,6 +27,7 @@ export default (props) => {
       </view>
       <view class='right-complete-two'>
         <view className='right-content'>
+          {props.children}
           {/* <view className='right-number'>×1</view> */}
           {/* <view className='right-title'>数量</view> */}
         </view>

src/components/tabs/index.js

@@ -0,0 +1,148 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 5:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Component({
+    options: {
+        addGlobalClass: true,
+        pureDataPattern: /^_/,
+        multipleSlots: true
+    },
+    properties: {
+        tabs: { type: Array, value: [] },
+        tabClass: { type: String, value: '' },
+        swiperClass: { type: String, value: '' },
+        activeClass: { type: String, value: '' },
+        tabUnderlineColor: { type: String, value: '#07c160' },
+        tabActiveTextColor: { type: String, value: '#000000' },
+        tabInactiveTextColor: { type: String, value: '#000000' },
+        tabBackgroundColor: { type: String, value: '#ffffff' },
+        activeTab: { type: Number, value: 0 },
+        swipeable: { type: Boolean, value: true },
+        animation: { type: Boolean, value: true },
+        duration: { type: Number, value: 500 }
+    },
+    data: {
+        currentView: 0
+    },
+    observers: {
+        activeTab: function activeTab(_activeTab) {
+            var len = this.data.tabs.length;
+            if (len === 0) return;
+            var currentView = _activeTab - 1;
+            if (currentView < 0) currentView = 0;
+            if (currentView > len - 1) currentView = len - 1;
+            this.setData({ currentView: currentView });
+        }
+    },
+    lifetimes: {
+        created: function created() {}
+    },
+    methods: {
+        handleTabClick: function handleTabClick(e) {
+            var index = e.currentTarget.dataset.index;
+            this.setData({ activeTab: index });
+            this.triggerEvent('tabclick', { index: index });
+        },
+        handleSwiperChange: function handleSwiperChange(e) {
+            var index = e.detail.current;
+            this.setData({ activeTab: index });
+            this.triggerEvent('change', { index: index });
+        }
+    }
+});
+
+/***/ })
+
+/******/ });

src/components/tabs/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

src/components/tabs/index.wxml

@@ -0,0 +1,20 @@
+<view class="weui-tabs">
+  <view class="weui-tabs-bar__wrp">
+    <scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
+      <view class="weui-tabs-bar__content">
+        <block wx:for="{{tabs}}" wx:key="title">
+          <view id="item_{{index}}" class="weui-tabs-bar__item" style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};" bindtap="handleTabClick" data-index="{{index}}">
+            <view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}" style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
+              <text class="">{{item.title}}</text>
+            </view>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+  <swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange">
+    <swiper-item wx:for="{{tabs}}" wx:key="title">
+      <slot name="tab-content-{{index}}"></slot>
+    </swiper-item>
+  </swiper>
+</view>

src/components/tabs/index.wxss

@@ -0,0 +1 @@
+.weui-tabs{width:100%}.weui-tabs-bar__wrp{width:100%;background:#fff}.weui-tabs-bar__content{width:100%;white-space:nowrap}.weui-tabs-bar__item{display:inline-block}.weui-tabs-bar__title{display:inline-block;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:transparent}

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/PayOrder/index.config.js

@@ -5,7 +5,8 @@ export default {
   usingComponents: {
     "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
     "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
-    "mp-cells": "weui-miniprogram/cells/cells"
+    "mp-cells": "weui-miniprogram/cells/cells",
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
   }
 
 

src/pages/PayOrder/style.less

@@ -1,237 +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;
 
-.view-button {
-  // width: 100%;
-  // height: 150px;
-  position: relative;
-
-  .Card-number-box {
-    .Card-number {
-      width: 100%;
-      height: 96px;
-      background-color: @whiteColor;
+      font-size: 28px;
+      font-weight: 400;
+      color: #202020;
+      background: #ffffff;
+      border: 1px solid #999999;
+      position: relative;
+      top: 26px;
     }
-    .Card-user {
-      width: 100%;
-      height: 96px;
-      background-color: @whiteColor;
+    .buy-num-add {
+      display: inline-block;
+
+      width: 60px;
+      height: 60px;
+      background: #ffffff;
+      border: 1px solid #999999;
+      border-radius: 0px 8px 8px 0px;
     }
   }
-  .button-box-button-box {
+  .wrapper {
+    display: flex;
     position: relative;
-    .button-text-image {
-      width: 144;
-      height: 45px;
-      position: absolute;
-      top: -35px;
-      left: 267px;
-      right: 305px;
-      z-index: 1;
-      .button-text-money-hot {
+    // 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;
-        width: 144px;
-        height: 43px;
-        line-height: 43px;
-        font-size: 24px;
-        font-weight: bold;
-        color: @whiteColor;
+        top: 22px;
       }
-      .button-image {
-        width: 143px;
-        height: 43px;
-      }
-      .button-text-money {
+      .left-viewText {
+        // background-image: url(@Image-ProCard_hot);
+        // width: 287px;
+        width: auto;
+        height: 44.3px;
         position: absolute;
-        margin-top: -8;
-        width: 157px;
-        font-size: 18px;
-        font-weight: 400;
-        text-decoration: line-through;
+        left: 1px;
+        top: 28px;
+        font-size: 24px;
         color: @whiteColor;
+        font-weight: 600;
       }
-    }
-    .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;
+      //图片
+      .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;
 
-.wrapper {
-  display: flex;
-  position: relative;
-  // margin-top: 600px;
-  margin: 30px auto;
-  width: 700px;
+        .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;
+        }
 
-  // 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));
+        .title-time {
+          font-size: 24px;
+          padding-top: 20px;
+          color: #c0c8d3;
+        }
+      }
+    }
+  }
 
-  .left-complete-one {
-    padding-top: 87px;
-    padding-bottom: 43px;
-    position: relative;
-    display: flex;
+  .right-complete-two {
     background: @whiteColor;
     background: radial-gradient(
-          circle at top right,
+          circle at top left,
           transparent 15px,
           @whiteColor 0
         )
-        top right,
-      radial-gradient(circle at bottom right, transparent 15px, @whiteColor 0)
-        bottom right;
+        top left,
+      radial-gradient(circle at bottom left, transparent 15px, @whiteColor 0)
+        bottom left;
     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;
+    width: 129px;
+    border-radius: 0 15px 15px 0;
+    position: relative;
+    //右面部分
+    .right-content {
+      // width: 100px;
+      // height: 80px;
       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;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      // border: 1px solid red;
 
-      .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;
+      .right-number {
+        width: 40px;
+        font-size: 20px;
+        border-radius: 4px;
+        border: 2px solid #999;
+        margin: auto;
+        text-align: center;
       }
 
-      .title-time {
+      .right-title {
+        font-weight: 700;
         font-size: 24px;
         padding-top: 20px;
-        color: #c0c8d3;
+        text-align: center;
       }
     }
   }
-}
-
-.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;
+  //线条
+  .right-complete-two::after {
+    content: "";
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    // border: 1px solid red;
+    top: 15px;
+    margin: 26px auto;
+    height: 70%;
+    border-left: 1px dashed #595959;
+  }
 
-    .right-number {
-      width: 32px;
-      font-size: 20px;
-      border-radius: 4px;
-      border: 2px solid #999;
-      margin: auto;
-      text-align: center;
-    }
+  .view-button {
+    // width: 100%;
+    // height: 150px;
+    position: relative;
 
-    .right-title {
-      font-weight: 700;
-      font-size: 24px;
-      padding-top: 20px;
-      text-align: center;
+    .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;
+        }
+      }
     }
   }
 }
-//线条
-.right-complete-two::after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  margin: 26px auto;
-  height: 70%;
-  border-left: 1px dashed #595959;
-}

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,16 +1,23 @@
-import React, { Suspense, useState, lazy } from 'react'
-
+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 =  import'./tabs/Mine'
 
-const Recommend = lazy(() => import('./tabs/Recommend'))
-const Guide = lazy(() => import('./tabs/Guide'))
-const Strategy = lazy(() => import('./tabs/Strategy'))
-const Mine = lazy(() => import('./tabs/Mine'))
+export default (props) => {
+  const { params } = useRouter()
+  const { tab } = params || {}
 
-export default () => {
   const [currentTab, setCurrentTab] = useState(0)
 
   const handleTabChange = (e) => {
@@ -18,22 +25,29 @@ export default () => {
     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/tabs/Guide.jsx

@@ -5,13 +5,19 @@ 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'
 
 
@@ -47,6 +53,38 @@ export default (props) => {
         </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>
@@ -58,11 +96,53 @@ export default (props) => {
             <view className='MessageCard-info' >江苏省南京市秦淮区集庆路</view>
           </view>
           <view className='MessageCard-button'>
-            <image className='MessageCard-image' />
+            <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} />
@@ -98,7 +178,6 @@ export default (props) => {
                 <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 className='title-position-on'>
                 <image className='title-position' src={position} />
                 <text className='title-position-image'>南京市/秦淮区</text>

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

@@ -8,40 +8,128 @@
   .MessageCard {
     width: 690px;
     height: 175px;
-    background: #ffffff;
+    background: @whiteColor;
     border-radius: 12px;
     margin: 30px auto;
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+
     .MessageCard-title1 {
-      width: 55px;
       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;
+        // opacity: 0.5;
       }
       .MessageCard-right {
         width: 530px;
         height: 2px;
         padding-left: 50px;
-        opacity: 0.5;
       }
     }
     .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;
       }
     }
   }
@@ -344,9 +432,8 @@
     // // background-color: black;
     margin-bottom: 60px;
     display: flex;
-    flex: 2;
-    flex-flow: row wrap;
-    align-content: flex-start;
+
+    justify-content: space-around;
     .Raiders-imageLove {
       display: flex;
       position: absolute;
@@ -373,13 +460,14 @@
       background: #ffffff;
       box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
       border-radius: 24px;
-      flex-grow: 1;
+      // 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;
       }

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;
+    // }
+  }
+}

yarn-error.log

@@ -1,87 +0,0 @@
-Arguments: 
-  C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
-
-PATH: 
-  C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Users\Administrator\AppData\Local\Microsoft\WindowsApps;C:\Users\Administrator\AppData\Roaming\npm;F:\Microsoft VS Code\bin
-
-Yarn version: 
-  1.22.11
-
-Node version: 
-  14.17.3
-
-Platform: 
-  win32 x64
-
-Trace: 
-  Error: getaddrinfo ENOTFOUND registry.npm.taobao.org
-      at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:26)
-
-npm manifest: 
-  {
-    "name": "miniapp",
-    "version": "1.0.0",
-    "private": true,
-    "description": "十公里",
-    "templateInfo": {
-      "name": "default",
-      "typescript": false,
-      "css": "less"
-    },
-    "scripts": {
-      "build:weapp": "taro build --type weapp",
-      "build:swan": "taro build --type swan",
-      "build:alipay": "taro build --type alipay",
-      "build:tt": "taro build --type tt",
-      "build:h5": "taro build --type h5",
-      "build:rn": "taro build --type rn",
-      "build:qq": "taro build --type qq",
-      "build:jd": "taro build --type jd",
-      "build:quickapp": "taro build --type quickapp",
-      "dev:weapp": "npm run build:weapp -- --watch",
-      "dev:swan": "npm run build:swan -- --watch",
-      "dev:alipay": "npm run build:alipay -- --watch",
-      "dev:tt": "npm run build:tt -- --watch",
-      "dev:h5": "npm run build:h5 -- --watch",
-      "dev:rn": "npm run build:rn -- --watch",
-      "dev:qq": "npm run build:qq -- --watch",
-      "dev:jd": "npm run build:jd -- --watch",
-      "dev:quickapp": "npm run build:quickapp -- --watch"
-    },
-    "browserslist": [
-      "last 3 versions",
-      "Android >= 4.1",
-      "ios >= 8"
-    ],
-    "author": "",
-    "dependencies": {
-      "@babel/runtime": "^7.7.7",
-      "@tarojs/components": "3.3.2",
-      "@tarojs/react": "3.3.2",
-      "@tarojs/runtime": "3.3.2",
-      "@tarojs/taro": "3.3.2",
-      "react": "^17.0.0",
-      "react-dom": "^17.0.0",
-      "taro-ui": "^2.3.4"
-    },
-    "devDependencies": {
-      "@types/webpack-env": "^1.13.6",
-      "@types/react": "^17.0.2",
-      "@tarojs/mini-runner": "3.3.2",
-      "@babel/core": "^7.8.0",
-      "@tarojs/webpack-runner": "3.3.2",
-      "babel-preset-taro": "3.3.2",
-      "eslint-config-taro": "3.3.2",
-      "eslint": "^6.8.0",
-      "eslint-plugin-react": "^7.8.2",
-      "eslint-plugin-import": "^2.12.0",
-      "eslint-plugin-react-hooks": "^4.2.0",
-      "stylelint": "9.3.0"
-    }
-  }
-
-yarn manifest: 
-  No manifest
-
-Lockfile: 
-  No lockfile