订座-我的订座

htmldev/dashboard/src/App.vue

@@ -55,6 +55,7 @@ export default {
   height: 100%;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
+  background: #F2F2F2;
 
   &-tabbar {
     .van-tabbar--fixed {

htmldev/dashboard/src/router/index.js

@@ -55,6 +55,17 @@ const routes = [
       keepAlive: false,
       isUseVanTabbar: true
     }
+  },
+  {
+    path: '/place/check',
+    name: 'PlaceCheck',
+    component: _import('views/place/check/index'),
+    meta: {
+      title: '我的订座二维码',
+      isUseCache: false,
+      keepAlive: false,
+      isUseVanTabbar: false
+    }
   }
 ]
 

htmldev/dashboard/src/views/place/check/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="check-container">
+    <div class="width-335">
+      <p class="status-wrap">
+        <span>04月19日 周一 19:45</span>
+        <span>已支付</span>
+      </p>
+      <p class="place-name">10人卡座（舞台左侧）</p>
+      <p class="outlet">AF House音乐现场(西子广场山姆会员店)</p>
+      <p class="count">订位人数：1</p>
+    </div>
+    <div class="line-wrap">
+      <div class="left-circle"></div>
+      <div class="line"></div>
+      <div class="right-circle"></div>
+    </div>
+    <div class="code">
+      <img src="" alt="">
+    </div>
+    <p class="tip">二维码编号:DZ-202104191945-001</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+.check-container {
+  width: 100%;
+  padding-top: 16px;
+  margin-top: 10px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+.width-335 {
+  padding: 0 20px;
+}
+
+.status-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  span {
+    font-size: 12px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    line-height: 17px;
+
+    &:nth-of-type(1) {
+      color: #1F1E1E;
+    }
+
+    &:nth-of-type(2) {
+      color: #CCC6C6;
+    }
+  }
+}
+
+.place-name {
+  margin-top: 16px;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #1F1E1E;
+  line-height: 25px;
+  letter-spacing: 1px;
+}
+
+.outlet {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #736F6F;
+  line-height: 20px;
+}
+
+.count {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #736F6F;
+  line-height: 20px;
+}
+
+.line {
+  width: 105%;
+  margin-top: 16px;
+  border-bottom: 8px dotted #F2F2F2;
+}
+
+.line-wrap {
+  position: relative;
+  left: 0;
+  top: 0;
+  margin-top: 12px;
+
+  .left-circle,
+  .right-circle {
+    position: absolute;
+    top: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #F2F2F2;
+  }
+
+  .left-circle {
+    left: -8px;
+  }
+
+  .right-circle {
+    right: -8px;
+  }
+
+  .line {
+    width: 335px;
+    padding-top: 4px;
+    margin: 0 auto;
+    border-bottom: 8px dotted #F2F2F2;
+  }
+}
+
+.code {
+  width: 260px;
+  height: 260px;
+  margin: 22px auto;
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+
+.tip {
+  padding-bottom: 42px;
+  font-size: 14px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #736F6F;
+  line-height: 20px;
+  text-align: center;
+}
+</style>

htmldev/dashboard/src/views/place/reserve/index.vue

@@ -26,7 +26,7 @@
             </div>
             <div class="btn-wrap">
               <van-button class="pay" type="danger">支付</van-button>
-              <van-button class="check-code" type="danger">我的订座二维码</van-button>
+              <van-button class="check-code" type="danger" :url="'/place/check'">我的订座二维码</van-button>
               <van-button class="cancel" type="default">取消</van-button>
               <van-button class="hide" type="default">隐藏订单</van-button>
             </div>
@@ -93,8 +93,6 @@ export default {
 
 <style scoped lang="scss">
 .af-reserve {
-  background: #F2F2F2;
-
   .content {
     min-height: 100vh;
     padding-bottom: 30px;