订座-座位选择信息填写

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

@@ -53,18 +53,123 @@
         </div>
       </van-tab>
     </van-tabs>
+    <!--选择-->
+    <van-popup
+      v-model="showPopup"
+      position="bottom"
+      style="background: transparent;height: 90%;">
+      <div class="af-popup-main">
+        <van-icon
+          class="af-van-icon"
+          name="clear"
+          size="28"/>
+        <div class="af-popup-header">
+          <div class="date-wrap">
+            <p class="date">04月27日（今日）</p>
+            <p class="title">AF HOUSE 音乐空间</p>
+          </div>
+          <p class="outlet-name">星桥店</p>
+          <p class="place-name">12人卡座（舞台中间）</p>
+        </div>
+        <div class="af-popup-body">
+          <p class="tip">
+            <span>最晚到店时间</span>
+            <span>（最晚为您保留15分钟，可提前入场）</span>
+          </p>
+          <div class="width-335">
+            <p class="time">21:15</p>
+            <p class="people-label">到店人数</p>
+            <div class="people-options">
+          <span
+            v-for="i in 12"
+            :key="i">{{ i }}人</span>
+            </div>
+            <van-field
+              class="af-van-cell"
+              v-model="tel"
+              type="tel"
+              label="联系方式"/>
+            <div class="name-wrap">
+              <van-field
+                class="af-van-cell"
+                v-model="name"
+                label="您的称呼"/>
+              <p class="gender">
+                <span
+                  v-for="(item, index) in ['先生', '女士']"
+                  :key="index">{{ item }}</span>
+              </p>
+            </div>
+            <p class="explain">可抵扣到店消费，支付后需等待商家确认</p>
+            <p class="explain">预定不成功自动退款，</p>
+            <p class="explain">
+              <span
+                style="color: #D32323;"
+                v-for="(str, index) in '预定到店时间已不足8小时'"
+                :key="'a' + index">{{ str }}</span>
+              <span
+                v-for="(str, index) in '，下单后不可退订，不可转让'"
+                :key="'b' + index">{{ str }}</span>
+            </p>
+            <div class="payment-type">
+              <p class="active">
+                <img
+                  class="icon"
+                  src="./image/ic_select@2x.png"
+                  alt="">
+                <img
+                  class="alipay"
+                  src="./image/ic_Alipay_sel@2x.png"
+                  alt="" v-if="true">
+                <img
+                  class="alipay"
+                  src="./image/ic_Alipay_nor@2x.png"
+                  alt="" v-else>
+                <span>支付宝支付</span>
+              </p>
+              <p>
+                <img
+                  class="icon"
+                  src="./image/ic_select@2x.png"
+                  alt="">
+                <img
+                  class="wechat"
+                  src="./image/ic_WeChat_sel@2x.png"
+                  alt=""
+                  v-if="true">
+                <img
+                  class="wechat"
+                  src="./image/ic_WeChat_nor@2x.png"
+                  alt=""
+                  v-else>
+                <span>微信支付</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="af-popup-footer">
+          <p class="count">
+            <span>预付：</span>
+            <span>￥1000</span>
+          </p>
+          <p class="btn">确认支付</p>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { Tabs, Tab, Icon } from 'vant'
+import { Tabs, Tab, Icon, Popup, Field } from 'vant'
 
 export default {
   name: 'index',
   components: {
     'van-tabs': Tabs,
     'van-tab': Tab,
-    'van-icon': Icon
+    'van-icon': Icon,
+    'van-popup': Popup,
+    'van-field': Field
   },
   data () {
     return {
@@ -106,7 +211,10 @@ export default {
         }
       ],
       active: 0,
-      listData: []
+      listData: [],
+      showPopup: true,
+      tel: '13429176706',
+      name: ''
     }
   },
   async mounted () {
@@ -119,224 +227,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.af-container {
-  position: relative;
-  left: 0;
-  top: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  &:before {
-    position: absolute;
-    left: 0;
-    top: 0;
-    content: '';
-    display: block;
-    width: 100%;
-    height: 240px;
-    background: url("./image/header@2x.png") center top/100% 100% no-repeat;
-  }
-
-  .header {
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    padding: 59px 0 25px 0;
-  }
-
-  .store-name, .open-time {
-    display: flex;
-    padding-left: 20px;
-  }
-
-  .store-name {
-    p {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 118px;
-      height: 36px;
-      background: linear-gradient(86deg, #F0E1E2 0%, #DDC5C0 100%);
-      border-radius: 18px;
-    }
-
-    img {
-      width: 20px;
-      height: 20px;
-    }
-
-    span {
-      margin-left: 8px;
-      font-size: 18px;
-      font-family: PingFangSC-Semibold, PingFang SC;
-      font-weight: 600;
-      color: #1F1E1E;
-      line-height: 25px;
-      letter-spacing: 1px;
-    }
-  }
-
-  .open-time {
-    margin-top: 13px;
-
-    p {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    img {
-      width: 14px;
-      height: 14px;
-    }
-
-    span {
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #FFFFFF;
-      line-height: 20px;
-      letter-spacing: 1px;
-    }
-  }
-}
-
-.af-van-tab {
-  position: relative;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-  margin-top: 28px;
-
-  .week {
-    font-size: 18px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #FFFFFF;
-    line-height: 25px;
-    letter-spacing: 1px;
-  }
-
-  .date {
-    margin-top: 4px;
-    font-size: 12px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #FFFFFF;
-    line-height: 17px;
-    letter-spacing: 1px;
-  }
-
-  ::v-deep .van-tabs__wrap {
-    height: 60px;
-
-    .van-tabs__nav--complete {
-      padding-left: 0;
-      padding-right: 0;
-
-      .van-tab {
-        width: 93px;
-      }
-
-      .van-tabs__line {
-        width: 93px;
-      }
-    }
-  }
-
-  ::v-deep .van-tabs__content {
-    padding-bottom: 60px;
-  }
-}
-
-.place-list {
-  position: relative;
-  left: 0;
-  top: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 22px 20px;
-  border-bottom: 1px solid #EBEBEB;
-
-  .name {
-    font-size: 18px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #1F1E1E;
-    line-height: 25px;
-    letter-spacing: 1px;
-  }
-
-  .des {
-    margin-top: 6px;
-    font-size: 12px;
-    color: #736F6F;
-    line-height: 17px;
-    letter-spacing: 1px;
-  }
-
-  .price {
-    font-size: 24px;
-    font-weight: bold;
-    color: #D32323;
-    line-height: 28px;
-    letter-spacing: 1px;
-
-    &.disabled {
-      color: #CCC6C6;
-    }
-  }
-
-  .btn-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 3px;
-  }
-
-  .btn {
-    font-size: 12px;
-    color: #1F1E1E;
-    line-height: 17px;
-    letter-spacing: 1px;
-    margin-right: 4px;
-  }
-
-  .sell-out {
-    position: absolute;
-    top: 8px;
-    right: 20px;
-    z-index: 1;
-
-    img {
-      width: 80px;
-      height: 74px;
-    }
-
-    div {
-      position: absolute;
-      left: 0;
-      top: 13px;
-      z-index: 1;
-
-      p {
-        white-space: nowrap;
-      }
-    }
-
-    .sell-des {
-      margin-top: 3px;
-      font-size: 12px;
-      color: #D32323;
-      line-height: 17px;
-      letter-spacing: 1px;
-      text-align: right;
-    }
-  }
-}
+@import "./style/index";
 </style>

htmldev/dashboard/src/views/place/list/style/index.scss

@@ -0,0 +1,570 @@
+@charset "utf-8";
+.af-container {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 240px;
+    background: url("./image/header@2x.png") center top/100% 100% no-repeat;
+  }
+
+  .header {
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    padding: 59px 0 25px 0;
+  }
+
+  .store-name, .open-time {
+    display: flex;
+    padding-left: 20px;
+  }
+
+  .store-name {
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 118px;
+      height: 36px;
+      background: linear-gradient(86deg, #F0E1E2 0%, #DDC5C0 100%);
+      border-radius: 18px;
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+
+    span {
+      margin-left: 8px;
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #1F1E1E;
+      line-height: 25px;
+      letter-spacing: 1px;
+    }
+  }
+
+  .open-time {
+    margin-top: 13px;
+
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    img {
+      width: 14px;
+      height: 14px;
+    }
+
+    span {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 20px;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+.af-van-tab {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  margin-top: 28px;
+
+  .week {
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 25px;
+    letter-spacing: 1px;
+  }
+
+  .date {
+    margin-top: 4px;
+    font-size: 12px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 17px;
+    letter-spacing: 1px;
+  }
+
+  ::v-deep .van-tabs__wrap {
+    height: 60px;
+
+    .van-tabs__nav--complete {
+      padding-left: 0;
+      padding-right: 0;
+
+      .van-tab {
+        width: 93px;
+      }
+
+      .van-tabs__line {
+        width: 93px;
+      }
+    }
+  }
+
+  ::v-deep .van-tabs__content {
+    padding-bottom: 60px;
+  }
+}
+
+.place-list {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 22px 20px;
+  border-bottom: 1px solid #EBEBEB;
+
+  .name {
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1F1E1E;
+    line-height: 25px;
+    letter-spacing: 1px;
+  }
+
+  .des {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #736F6F;
+    line-height: 17px;
+    letter-spacing: 1px;
+  }
+
+  .price {
+    font-size: 24px;
+    font-weight: bold;
+    color: #D32323;
+    line-height: 28px;
+    letter-spacing: 1px;
+
+    &.disabled {
+      color: #CCC6C6;
+    }
+  }
+
+  .btn-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+  }
+
+  .btn {
+    font-size: 12px;
+    color: #1F1E1E;
+    line-height: 17px;
+    letter-spacing: 1px;
+    margin-right: 4px;
+  }
+
+  .sell-out {
+    position: absolute;
+    top: 8px;
+    right: 20px;
+    z-index: 1;
+
+    img {
+      width: 80px;
+      height: 74px;
+    }
+
+    div {
+      position: absolute;
+      left: 0;
+      top: 13px;
+      z-index: 1;
+
+      p {
+        white-space: nowrap;
+      }
+    }
+
+    .sell-des {
+      margin-top: 3px;
+      font-size: 12px;
+      color: #D32323;
+      line-height: 17px;
+      letter-spacing: 1px;
+      text-align: right;
+    }
+  }
+}
+
+.af-popup-main {
+  position: relative;
+  left: 0;
+  top: 0;
+  height: 100%;
+
+  .af-van-icon {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 1;
+    color: #CCC6C6;
+  }
+}
+
+.af-popup-header {
+  width: 100%;
+  background: linear-gradient(90deg, #000000 0%, #525050 100%);
+  border-radius: 16px 16px 0 0;
+
+  .date-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .date {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 174px;
+    height: 36px;
+    font-size: 14px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1F1E1E;
+    line-height: 20px;
+    letter-spacing: 1px;
+    background: url("./image/icon_juxing@2x.png") center center/100% 100% no-repeat;
+  }
+
+  .title {
+    margin-left: 28px;
+    font-size: 12px;
+    color: #FFFFFF;
+    line-height: 17px;
+  }
+
+  .outlet-name {
+    margin: 10px 0 4px 20px;
+    font-size: 24px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 33px;
+    letter-spacing: 1px;
+  }
+
+  .place-name {
+    width: 234px;
+    height: 35px;
+    margin-left: 20px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    letter-spacing: 1px;
+    background: url("./image/logo_0@2x.png") left top/100% 100% no-repeat;
+  }
+}
+
+.af-popup-body {
+  height: calc(100% - 118px);
+  padding: 16px 0 100px;
+  background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+
+  .tip {
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+
+    span {
+      &:nth-of-type(1) {
+        font-size: 14px;
+        color: #736F6F;
+        line-height: 20px;
+        letter-spacing: 1px;
+      }
+
+      &:nth-of-type(2) {
+        font-size: 14px;
+        color: #CCC6C6;
+        line-height: 20px;
+        letter-spacing: 1px;
+      }
+    }
+  }
+
+  .time {
+    margin-top: 4px;
+    font-size: 24px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1F1E1E;
+    line-height: 33px;
+    letter-spacing: 1px;
+  }
+}
+
+.width-335 {
+  width: 335px;
+  margin: 0 auto;
+}
+
+.people-label {
+  margin-top: 14px;
+  font-size: 14px;
+  color: #736F6F;
+  line-height: 20px;
+  letter-spacing: 1px;
+}
+
+.people-options {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 8px;
+
+  span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 64px;
+    height: 32px;
+    margin-left: 26px;
+    margin-bottom: 16px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    border: 1px solid #F2F2F2;
+    font-size: 16px;
+    color: #736F6F;
+    line-height: 22px;
+    letter-spacing: 1px;
+
+    &:nth-of-type(4n+1) {
+      margin-left: 0;
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #000000 0%, #525050 100%);
+      box-shadow: 0 2px 4px 0 rgba(210, 199, 199, 0.31);
+    }
+  }
+}
+
+.af-van-cell {
+  padding-top: 20px;
+
+  ::v-deep .van-field__label {
+    span {
+      font-size: 16px;
+      color: #736F6F;
+      line-height: 22px;
+      letter-spacing: 1px;
+    }
+  }
+
+  .van-field__value {
+    text-align: left;
+
+    input {
+      height: 22px;
+      font-size: 16px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #1F1E1E;
+      -webkit-text-fill-color: #1F1E1E;
+      opacity: 1;
+      background: transparent;
+      box-shadow: inset 0 0 0 1000px #F7F7F7 !important;
+      letter-spacing: 1px;
+
+      &::-webkit-input-placeholder {
+        -webkit-text-fill-color: #ccc;
+        opacity: 1;
+        color: #ccc;
+      }
+    }
+  }
+}
+
+.name-wrap {
+  position: relative;
+  left: 0;
+  top: 0;
+  margin-bottom: 16px;
+
+  .gender {
+    position: absolute;
+    right: 0;
+    top: 20px;
+    z-index: 1;
+    display: flex;
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 54px;
+      height: 24px;
+      background: #FFFFFF;
+      border-radius: 3px;
+      border: 1px solid #F2F2F2;
+      font-size: 12px;
+      color: #1F1E1E;
+      line-height: 17px;
+
+      &:nth-of-type(2) {
+        margin-left: 12px;
+      }
+
+      &.active {
+        background: linear-gradient(90deg, #000000 0%, #525050 100%);
+        box-shadow: 0 2px 4px 0 rgba(210, 199, 199, 0.31);
+      }
+    }
+  }
+}
+
+.explain {
+  font-size: 12px;
+  color: #736F6F;
+  line-height: 18px;
+  letter-spacing: 1px;
+}
+
+.payment-type {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 16px;
+
+  p {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    width: 164px;
+    height: 60px;
+    border-radius: 4px;
+    border: 1px solid #F2F2F2;
+    padding-left: 25px;
+
+    &:nth-of-type(2) {
+      margin-left: 7px;
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #000000 0%, #525050 100%);
+      border-radius: 4px;
+
+      span {
+        color: #FFFFFF;
+      }
+    }
+
+    .alipay {
+      width: 28px;
+      height: 28px;
+    }
+
+    span {
+      margin-left: 8px;
+      font-size: 14px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #231916;
+      line-height: 20px;
+    }
+
+    .wechat {
+      width: 26px;
+      height: 25px;
+    }
+
+    .icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1;
+      width: 20px;
+      height: 19px;
+    }
+  }
+}
+
+.af-popup-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 375px;
+  height: 68px;
+  padding: 0 20px;
+  background: #FFFFFF;
+  box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);
+
+  .count {
+    display: flex;
+    align-items: center;
+
+    span {
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      letter-spacing: 1px;
+
+      &:nth-of-type(1) {
+        font-size: 16px;
+        color: #231916;
+        line-height: 22px;
+      }
+
+      &:nth-of-type(2) {
+        font-size: 24px;
+
+        color: #D32323;
+        line-height: 33px;
+      }
+    }
+  }
+
+  .btn {
+    width: 124px;
+    height: 50px;
+    background: #D32323;
+    border-radius: 25px;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 50px;
+    letter-spacing: 1px;
+    text-align: center;
+  }
+}