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

<template>
  <div class="af-container">
    <!--头部-->
    <div class="header">
      <div class="store-name">
        <p>
          <img src="./image/icon_music@2x.png" alt="">
          <span>星桥店</span>
        </p>
      </div>
      <div class="open-time">
        <p>
          <img src="./image/icon_time@2x.png" alt="">
          <span>11:00-01:00开放预订</span>
        </p>
      </div>
    </div>
    <!--预约日期-->
    <van-tabs
      class="af-van-tab"
      :background="'transparent'"
      :ellipsis="false"
      :sticky="true"
      v-model="active"
      @change="handleChange"
      ref="afTabs">
      <van-tab
        v-for="(item, index) in placeList"
        :key="index">
        <template #title>
          <p class="week">{{ item.week }}</p>
          <p class="date">{{ item.date }}</p>
        </template>
        <div class="place-list" v-for="i in 10" :key="i">
          <div class="left">
            <p class="name">12人卡座（舞台中间）</p>
            <p class="des">卡座台费2800元</p>
          </div>
          <div class="right" v-if="false">
            <p class="price">¥ 1000</p>
            <p class="btn-wrap">
              <span class="btn">立即预订</span>
              <van-icon name="arrow" size="12px"/>
            </p>
          </div>
          <!--座位被定完-->
          <div class="sell-out">
            <img src="./image/sell_out@2x.png" alt="">
            <div>
              <p class="price disabled">¥ 1000</p>
              <p class="sell-des">已订满</p>
            </div>
          </div>
        </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, Popup, Field } from 'vant'

export default {
  name: 'index',
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-icon': Icon,
    'van-popup': Popup,
    'van-field': Field
  },
  data () {
    return {
      placeList: [
        {
          id: 1,
          week: '今日',
          date: '04/27'
        },
        {
          id: 2,
          week: '周三',
          date: '04/28'
        },
        {
          id: 3,
          week: '周四',
          date: '04/29'
        },
        {
          id: 4,
          week: '周五',
          date: '04/30'
        },
        {
          id: 2,
          week: '周三',
          date: '04/28'
        },
        {
          id: 3,
          week: '周四',
          date: '04/29'
        },
        {
          id: 4,
          week: '周五',
          date: '04/30'
        }
      ],
      active: 0,
      listData: [],
      showPopup: false,
      tel: '13429176706',
      name: ''
    }
  },
  async mounted () {
    await this.$nextTick()
  },
  methods: {
    handleChange () {}
  }
}
</script>

<style lang="scss" scoped>
@import "./style/index";
</style>