H5演出计划

htmldev/dashboard/src/router/index.js

@@ -83,6 +83,21 @@ const routes = [
       alipayForm: route.query.alipayForm,
       wxpayHref: route.query.wxpayHref
     })
+  },
+  {
+    path: '/showPlan',
+    name: 'ShowPlan',
+    component: _import('views/show/plan/index'),
+    meta: {
+      title: '演出计划',
+      isUseCache: false,
+      keepAlive: true,
+      isUseVanTabbar: false
+    },
+    props: route => ({
+      alipayForm: route.query.alipayForm,
+      wxpayHref: route.query.wxpayHref
+    })
   }
 ]
 

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

@@ -108,9 +108,12 @@
     line-height: 17px;
   }
 
+  ::v-deep .van-sticky--fixed {
+    background: linear-gradient(45deg, #000000, #525050);
+  }
+
   ::v-deep .van-tabs__wrap {
     height: 60px;
-    background: url("./image/tabbar@2x.png") center top/100% 17px repeat-y;
 
     .van-tabs__nav--complete {
       padding-left: 0;

htmldev/dashboard/src/views/show/plan/api/index.js

@@ -0,0 +1,21 @@
+import request from '@/api/request'
+
+/**
+ * 获取酒吧列表
+ */
+export const apiBarList = () => request({
+  method: 'GET',
+  url: '/api/v1/bar/list'
+})
+
+/**
+ * 酒吧所有演出计划
+ * @param id 酒吧ID
+ */
+export const apiShowPlanList = (id) => request({
+  method: 'GET',
+  url: '/api/v1/bar/show/plan/list/all',
+  params: {
+    id
+  }
+})

htmldev/dashboard/src/views/show/plan/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="af-place-list-container">
+    <!--头部-->
+    <div class="header">
+      <div class="store-name">
+        <p>
+          <img src="./image/icon_music@2x.png" alt="">
+          <span>{{ objCurrentBarInfo.bar_name }}</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 showPlanList"
+        :key="index">
+        <template #title>
+          <p class="week">{{ item.week }}</p>
+          <p class="date">{{ item.time }}</p>
+        </template>
+        <div class="place-list"
+             v-for="(place, idx) in item.list"
+             :key="idx">
+        </div>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+import { Tabs, Tab, Toast } from 'vant'
+import { apiBarList, apiShowPlanList } from './api'
+import { getCookieValue } from '../../../utils'
+
+export default {
+  name: 'index',
+  components: {
+    'van-tabs': Tabs,
+    'van-tab': Tab
+  },
+  data () {
+    return {
+      BarList: [], // 门店列表
+      objCurrentBarInfo: {}, // 当前门店信息
+      showPlanList: [],
+      active: 0,
+      listData: [],
+      bar_id: ''
+    }
+  },
+  computed: {
+    phone () {
+      return this.$store.getters['common/phone'] || getCookieValue('afhousephone')
+    },
+    token () {
+      return this.$store.getters['common/token'] || getCookieValue('afhousetoken')
+    }
+  },
+  created () {
+    this.fetchBarList()
+  },
+  async mounted () {
+    await this.$nextTick()
+  },
+  methods: {
+    handleChange () {},
+    // 获取门店列表
+    async fetchBarList () {
+      try {
+        const { data, status, msg } = await apiBarList()
+        if (status) {
+          this.BarList = data
+          if (this.BarList.length) {
+            // 暂时只有一家门店
+            const { id } = this.BarList[0]
+            this.bar_id = id
+            this.objCurrentBarInfo = this.BarList[0]
+            this.fetchPlaceList()
+          } else {
+            Toast('门店不存在')
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {
+
+      }
+    },
+    // 获取订座列表
+    async fetchPlaceList () {
+      try {
+        const { data, status, msg } = await apiShowPlanList(this.bar_id)
+        if (status) {
+          this.showPlanList = data
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./style/index";
+</style>

htmldev/dashboard/src/views/show/plan/style/index.scss

@@ -0,0 +1,247 @@
+@charset "utf-8";
+.af-place-list-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: 210px;
+    background: url("./image/header_show_plan@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;
+    }
+  }
+
+  .open-time {
+    margin-top: 13px;
+
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-right: 3px;
+    }
+
+    span {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 20px;
+    }
+  }
+}
+
+.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;
+  }
+
+  .date {
+    margin-top: 4px;
+    font-size: 12px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 17px;
+  }
+
+  ::v-deep .van-sticky--fixed {
+    background: linear-gradient(45deg, #000000, #525050);
+  }
+
+  ::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;
+
+  .left {
+    width: 60%;
+  }
+
+  .right {
+    width: 40%;
+    text-align: right;
+  }
+
+  .sell-out {
+    width: 40%;
+    text-align: right;
+  }
+
+  .name {
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 700;
+    color: #1F1E1E;
+    line-height: 25px;
+  }
+
+  .des {
+    max-width: 100%;
+    margin-top: 6px;
+    font-size: 12px;
+    color: #736F6F;
+    line-height: 17px;
+    word-break: break-all;
+  }
+
+  .price {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    color: #D32323;
+
+    span {
+      &:nth-of-type(1) {
+        font-size: 24px;
+        font-weight: bold;
+        line-height: 28px;
+      }
+
+      &:nth-of-type(2) {
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 26px;
+      }
+    }
+
+    &.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;
+    margin-right: 4px;
+  }
+
+  .sell-out {
+    position: absolute;
+    top: 8px;
+    right: 20px;
+    z-index: 1;
+
+    img {
+      width: 80px;
+      height: 74px;
+    }
+
+    div {
+      position: absolute;
+      right: 0;
+      top: 13px;
+      z-index: 1;
+
+      p {
+        white-space: nowrap;
+      }
+    }
+
+    .sell-des {
+      margin-top: 3px;
+      font-size: 12px;
+      color: #D32323;
+      line-height: 17px;
+      text-align: right;
+    }
+  }
+}