Update

src/components/CinemaList.vue

@@ -20,6 +20,9 @@
  </div>
  </li>
  </div>
+ <div v-if="isInclude !== null &&!isInclude.cinemaList.length">
+ 暂无影院
+ </div>
  </ul>
  </div>
 </template>

src/router/index.js

@@ -7,7 +7,7 @@ Vue.use(VueRouter)
 const routes = [
  {
  path: '/schedule/:scheduleId',
- component: () => import('@/views/schedule'),
+ component: () => import('@/views/Schedule/Schedule.vue'),
  name: 'schedule'
  },
  {

src/views/Login.vue

@@ -1,9 +1,7 @@
 <template>
  <div class="main">
  <div class="logo">
- <img
- src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png"
- alt="" />
+ <img src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png" alt="" />
  </div>
  <div class="login-form">
  <div class="form-group">
@@ -12,73 +10,67 @@
  @input="phoneNumber($event)"
  placeholder="手机号"
  v-model="phone"
- maxlength="13" />
+ maxlength="13"
+ />
  <div class="tip">验证码随机6位</div>
  </div>
  <div class="form-group">
  <input type="Number" placeholder="验证码" v-model="Verification" />
  </div>
- <div
- class="submit"
- @click="submit"
- :class="{ canSubmit: phone && Verification }">
- 登录
- </div>
+ <div class="submit" @click="submit" :class="{ canSubmit: phone && Verification }">登录</div>
  </div>
  <!-- <input type="submit" @click="sub"> -->
  </div>
 </template>
 <script>
-import { Toast } from "vant"
+import { Toast } from 'vant'
 export default {
  data() {
  return {
- phone: "",
- Verification: "",
+ phone: '',
+ Verification: ''
  }
  },
  methods: {
  submit() {
  // let test = this.phone.replace(/\s*/g,"")*1
- if (
- !/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone.replace(/\s*/g, ""))
- ) {
- Toast.fail("请输入正确的号码")
+ if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone.replace(/\s*/g, ''))) {
+ Toast.fail('请输入正确的号码')
  return false
  } else if (this.Verification.length != 6) {
- Toast.fail("验证码为6位")
+ Toast.fail('验证码为6位')
  return false
  }
- localStorage.setItem("userPhone", this.phone.replace(/\s*/g, ""))
+ localStorage.setItem('userPhone', this.phone.replace(/\s*/g, ''))
  Toast.success({
- message: "登录成功",
+ message: '登录成功',
 
  onClose: () => {
  this.$router.push(this.$route.query.redirect)
 
  // this.$router.back()
- },
+ }
  })
  },
  phoneNumber() {
  this.phone = this.phone.trim()
  let len = this.phone.length
  if (len == 5 || len == 10) {
  let arr = [...this.phone]
- arr.splice(this.phone.length - 2, 0, " ")
- this.phone = arr.join("")
+ arr.splice(this.phone.length - 2, 0, ' ')
+ this.phone = arr.join('')
  }
  },
  sub() {
- localStorage.setItem("token", "hello")
+ localStorage.setItem('token', 'hello')
  // this.$router.push('/center')
  // this.$router.back() 返回
 
  console.log(this.$route)
- this.$router.push(this.$route.query.redirect || "/center")
+ this.$router.push(this.$route.query.redirect || '/center')
  // this.$router.push(this.$route.query.redirect)
- },
- },
+ }
+ }
 }
 </script>
 <style scoped lang="scss">

src/views/schedule.vue → src/views/Schedule/Schedule.vue

@@ -1,9 +1,7 @@
 <template>
  <div v-if="schedule" class="main">
  <header ref="header">
- <span
- ><van-icon name="arrow-left" size="24" @click="$router.back()"
- /></span>
+ <span><van-icon name="arrow-left" size="24" @click="$router.back()" /></span>
  {{ schedule.cinema.name }}
  </header>
 
@@ -16,31 +14,28 @@
 
  <footer v-if="sessions" ref="footer">
  <tag-explain v-show="!$store.state.chosen.length" />
- <film-detail
- :schedule="schedule"
- :sessions="sessions"
- :currentSession="currentSession" />
+ <film-detail :schedule="schedule" :sessions="sessions" :currentSession="currentSession" />
  <submit :session="sessions[currentSession]" />
  </footer>
  </div>
 </template>
 <script>
-import { Icon } from "vant"
-import http from "@/util/http.js"
-import SeatingChart from "@/components/schedule/seatMap/map.vue"
-import TagExplain from "@/components/schedule/Others/TagExplain"
-import Notice from "../components/schedule/Others/Notice"
-import FilmDetail from "../components/schedule/filmDetail/filmDetail"
-import Submit from "@/components/schedule/Others/Submit"
-import EventBus from "@/util/eventBus"
+import { Icon } from 'vant'
+import http from '@/util/http.js'
+import SeatingChart from './SeatingChart.vue'
+import TagExplain from './TagExplain.vue'
+import Notice from './Notice.vue'
+import FilmDetail from './filmDetail/FilmDetail'
+import Submit from './Submit.vue'
+import EventBus from '@/util/eventBus'
 export default {
  beforeRouteEnter(to, from, next) {
- if (localStorage.getItem("userPhone")) {
+ if (localStorage.getItem('userPhone')) {
  next()
  } else {
  next({
- path: "/Login",
- query: { redirect: to.fullPath },
+ path: '/Login',
+ query: { redirect: to.fullPath }
  })
  }
  },
@@ -50,7 +45,7 @@ export default {
  sessions: null,
  currentSession: 0,
  maxSeat: 5,
- ob: null,
+ ob: null
  }
  },
  components: {
@@ -60,18 +55,17 @@ export default {
  Notice,
  FilmDetail,
  Submit
-},
+ },
  mounted() {
- EventBus.$on("update:currentSession", this.updateSession)
+ EventBus.$on('update:currentSession', this.updateSession)
  this.getSchedule(this.$route.params.scheduleId)
  },
  beforeDestroy() {
- EventBus.$off("update:currentSession")
- this.$store.commit("emptyChoices")
+ EventBus.$off('update:currentSession')
+ this.$store.commit('emptyChoices')
  this.ob.unobserve(this.$refs.footer)
  },
  methods: {
- 
  updateSession(index) {
  this.currentSession = index
  this.$refs.map.getSeatingChart(this.sessions[index].scheduleId)
@@ -81,8 +75,8 @@ export default {
  http({
  url: `/gateway/?scheduleId=${scheduleId}&k=4878872`,
  headers: {
- "X-Host": "mall.film-ticket.schedule.info",
- },
+ 'X-Host': 'mall.film-ticket.schedule.info'
+ }
  }).then((res) => {
  res = res.data.data.schedule
  this.schedule = res
@@ -93,28 +87,23 @@ export default {
  http({
  url: `/gateway/?filmId=${filmId}&cinemaId=${cinemaId}&date=${date}&k=1024902`,
  headers: {
- "X-Host": "mall.film-ticket.schedule.list",
- "X-Token":
- "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZ2VudElkIjoiMzAwMCIsInRpbWVzdGFtcCI6MTY2NDM0NzU3NCwidXNlcklkIjozMTkyMDU5N30.25T6y93Pt5RFo5U-Z5jJBtkKIo4RATWrY-vcHHmXSD4",
- },
+ 'X-Host': 'mall.film-ticket.schedule.list',
+ }
  }).then((res) => {
  this.sessions = res.data.data.schedules
- this.currentSession = this.sessions.findIndex(
- (index) => index.showAt === date
- )
+ this.currentSession = this.sessions.findIndex((index) => index.showAt === date)
  this.$nextTick(() => {
  let headerHeight = this.$refs.header.clientHeight
  this.ob = new ResizeObserver((entries) => {
  // entries是所有被观察的元素的数组
  const { height } = entries[0].contentRect
- this.$refs.section.style.height =
- window.innerHeight - headerHeight - height + "px"
+ this.$refs.section.style.height = window.innerHeight - headerHeight - height + 'px'
  })
  this.ob.observe(this.$refs.footer)
  })
  })
- },
- },
+ }
+ }
 }
 </script>
 <style lang="scss" scoped>

src/views/Schedule/SeatIcon.js

@@ -0,0 +1,37 @@
+import img1 from '@/assets/座位图标_可选择座位.png'
+import img2 from '@/assets/座位锁定.png'
+import img3 from '@/assets/座位图标_已售座位.png'
+import img4 from '@/assets/座位图标_已选择座位.png'
+
+export default {
+ functional: true,
+ render(h, { props }) {
+ const getSeatIcon = (item) =>
+ item.isBroken ? img2 :
+ item.isOccupied ? img3 :
+ item.isChoose ? img4 :
+ img1
+
+ const { item, index, seatInterval, size } = props
+
+ return h(
+ 'img',
+ {
+ style: {
+ position: 'absolute',
+ left: `${size * (+item.columnNum + seatInterval / 2 - 1)}px`,
+ top: `${size * (+item.rowNum - 1)}px`,
+ width: size + 'px',
+ height: size + 'px',
+ transition: 'all 0.5s cubic-bezier(1, 0, 0, 1)',
+ padding: '1px',
+ 'touch-action': 'none'
+ },
+ attrs: {
+ src: getSeatIcon(item),
+ 'data-index': index
+ }
+ }
+ )
+ }
+}