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

<template>
  <div class="af-reserve">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="content">
        <ul>
          <li>
            <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>
            <div class="payment">
              <p class="number">订位人数：1</p>
              <p class="amount">
                <span>合计：100</span>
                <img src="./image/ic_Alipay_nor@2x.png" alt="">
              </p>
            </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="cancel" type="default">取消</van-button>
              <van-button class="hide" type="default">隐藏订单</van-button>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import { PullRefresh, List, Button } from 'vant'

export default {
  components: {
    'van-pull-refresh': PullRefresh,
    'van-list': List,
    'van-button': Button
  },
  data () {
    return {
      saleDataList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  methods: {
    onRefresh () {
      // this.getList()
    },
    onLoad () {
      // this.getList()
    },
    /**
     *  请求数据方法
     */
    async getList () {
      try {
        const { data } = await axios.post('/Journalism/lst', qs.stringify({
          Page: 1,
          PageSize: 15,
          mode: 'web'
        }))

        this.list = data.Data.articles
        this.saleDataList = this.saleDataList.concat(data.Data.articles)
        // 加载状态结束
        this.loading = false
        this.isLoading = false
        // 数据全部加载完成
        if (this.saleDataList.length >= 40) {
          this.finished = true
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.af-reserve {
  background: #F2F2F2;

  .content {
    min-height: 100vh;
    padding-bottom: 30px;
  }
}

ul {
  li {
    width: 100%;
    padding: 16px 20px 10px;
    margin: 6px auto;
    background: #fff;

    &:nth-of-type(1) {
      margin-top: 0;
    }
  }
}

.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: #D32323;
    }
  }
}

.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;
}

.number {
  font-size: 14px;
  color: #736F6F;
  line-height: 20px;
}

.payment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.amount {
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    color: #736F6F;
    line-height: 20px;
  }

  img {
    width: 21px;
    height: 21px;
    margin-left: 10px;
  }
}

.btn-wrap {
  ::v-deep .van-button {
    .van-button__text {
      font-size: 12px;
      color: #FFFFFF;
      line-height: 24px;
    }
  }

  .pay {
    width: 64px;
    height: 24px;
    background: #D32323;
    border-radius: 12px;
    border: none;
  }

  .check-code {
    width: 118px;
    height: 24px;
    background: #D32323;
    border-radius: 20px;
  }

  .cancel {
    width: 64px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #F2F2F2;

    .van-button__text {
      color: #736F6F;
    }
  }

  .hide {
    width: 82px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #F2F2F2;

    .van-button__text {
      color: #736F6F;
    }
  }
}
</style>