city-gather/src/subPack-film/choose-film/index.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import selectTime from '../components/choose-time.vue'
import { timeFormat } from '../utils/index'

interface brand {
  id: number
  brandId: string
  brandName: string
}
const router = useRouter()
definePage({
  name: 'film-choose-film',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的订单',
    backgroundColorBottom: '#fff',
  },
})

onLoad((options) => {
  console.log('onload', options)
})
const addressStore = useAddressStore()
const { Location } = storeToRefs(addressStore)
const query = ref({
  cityId: '103',
  showDates: timeFormat(new Date().getTime(), 'yyyy-MM-dd'),
  lat: Location.value.latitude,
  lng: Location.value.longitude,
  districtId: '',
  brandId: '',
  hall: '',
  movieId: '',
})
// const tab = ref(timeFormat(new Date().getTime(), 'yyyy-mm-dd'))
const dayList = ref([])
const active = ref<number | null>(null)

const filmList = ref<Api.filmList[]>([])
const cityList = ref<Api.filmCityList>([])
const brandList = ref<brand[]>()
const currentCity = ref(0)
const show = ref(false)
const info = ref<Api.filmMovieList>({})
watch(() => show.value, (val) => {
  if (!val) {
    active.value = null
  }
})
function handleChoose(index: number) {
  show.value = true
  active.value = index
}

function close() {
  show.value = false
}

function choose(cityId: string, index?: number, districtId?: string) {
  if (active.value === 0) {
    query.value.cityId = cityId
    query.value.districtId = districtId || ''
    if (index) {
      currentCity.value = index
    }
  }
  else if (active.value === 1) {
    query.value.brandId = cityId
  }
  // else if (active.value === 2) {

  // }
  show.value = false

  getData()
}

function handleFilm(title: string = '保利万和学府影城', cinemaId: string) {
  console.log(title)

  router.push({
    name: 'film-select-time',
    params: {
      cinemaId,
      movieId: query.value.movieId,
      title,
      time: query.value.showDates,
    },
  })
}

async function getData() {
  uni.showLoading({ title: '加载中' })
  console.log('qingind', query.value)

  const res = await Apis.film.getFilmList({ data: query.value })
  uni.hideLoading()
  if (res.data) {
    filmList.value = res.data
  }
}

async function getDate(movieId: string) {
  const res = await Apis.film.getFilmDateList({ data: { movieId } })
  dayList.value = res.data
}

function changeTime() {
  getData()
}
async function getCityList() {
  const res = await Apis.film.getCityList({})
  cityList.value = res.data
  res.data.forEach((item: any, index: number) => {
    if (item.name.includes('贵阳')) {
      currentCity.value = index
    }
  })
}
getCityList()
async function getFilmBrandList() {
  const res = await Apis.film.getFilmBrandList({})
  brandList.value = res.data
}
getFilmBrandList()

onLoad((options) => {
  query.value.movieId = options?.movieId
  info.value = JSON.parse(options?.info)
  getDate(options?.movieId)
  getData()
})
</script>

<template>
  <view class="choose-film">
    <wd-navbar
      title="" custom-style="background-color: transparent;" :bordered="false" :z-index="99"
      safe-area-inset-top left-arrow fixed @click-left="router.back()"
    />
    <view class="bg-box">
      <image class="img" :src="info.posterUrl" mode="scaleToFill" />
    </view>
    <view class="info-box">
      <view class="info">
        <image class="icon" :src="info.posterUrl" />
        <view class="box">
          <view class="name">
            {{ info.name }}
          </view>
          <view class="score-box">
            <view class="score">
              评分 <view class="num">
                {{ info.score }}
              </view>
            </view>
            <view class="want-num">
              {{ info.wish }}人想看
            </view>
          </view>

          <view class="type-box">
            {{ info.category }}
            <view class="tag">
              {{ info.version }}
            </view>
          </view>
          <view class="publish-info">
            时长: {{ info.duration }}分钟
          </view>
          <view class="publish-info">
            上映：{{ info.releaseTime }}
          </view>
          <view class="publish-info">
            导演：{{ info.director }}
          </view>
          <view class="publish-info">
            演员：{{ info.star }}
          </view>
        </view>
      </view>
    </view>
    <view class="px-24rpx">
      <!-- 影院时间 -->
      <selectTime v-model="query.showDates" :data="dayList" @change="changeTime" />
      <view class="choose-list">
        <view class="choose-item" :class="[active == 0 ? 'active' : '']" @click="handleChoose(0)">
          <view class="choose-item-title">
            全城
          </view>
          <view class="iconfont ml10rpx text-30rpx" :class="[active == 0 ? 'text-[var(--them-color)]' : '']">
            &#xe656;
          </view>
        </view>
        <view class="choose-item" :class="[active == 1 ? 'active' : '']" @click="handleChoose(1)">
          <view class="choose-item-title">
            品牌
          </view>
          <view class="iconfont ml10rpx text-30rpx" :class="[active == 1 ? 'text-[var(--them-color)]' : '']">
            &#xe656;
          </view>
        </view>
        <view class="choose-item" :class="[active == 2 ? 'active' : '']" @click="handleChoose(2)">
          <view class="choose-item-title">
            特色
          </view>
          <view class="iconfont ml10rpx text-30rpx" :class="[active == 2 ? 'text-[var(--them-color)]' : '']">
            &#xe656;
          </view>
        </view>
      </view>
    </view>

    <view class="film-list">
      <view
        v-for="(item, index) in filmList" :key="index" class="film-item"
        @click="handleFilm(item.name, item.cinemaId)"
      >
        <view class="name-box">
          <view class="name w-450rpx overflow-hidden text-ellipsis whitespace-nowrap">
            {{ item.name }}
          </view>
          <view class="price-box">
            <view class="num">
              ￥{{ item.sellPrice }}
            </view>
            <div class="label">
              起
            </div>
          </view>
        </view>
        <view class="address-box">
          <view class="address overflow-hidden text-ellipsis whitespace-nowrap">
            {{ item.address }}
          </view>
          <view class="distance">
            {{ item.distance }}km
          </view>
        </view>
        <div class="cantact">
          {{ item.phone || '暂无联系方式' }}
        </div>
        <div class="time-box">
          近期场次：{{ item.showInfo }}
        </div>
      </view>
    </view>

    <wd-loadmore state="finished" :loading-props="{ color: '#9ED605', size: 20 }" />

    <!-- 弹窗 -->
    <wd-action-sheet v-if="show" v-model="show" @close="close">
      <view class="content">
        <!-- 影院时间 -->
        <selectTime v-model="query.showDates" :data="dayList" @change="changeTime" />
        <view class="choose-list">
          <view class="choose-item" :class="[active == 0 ? 'active' : '']" @click="handleChoose(0)">
            <view class="choose-item-title">
              全城
            </view>
            <view class="iconfont ml10rpx text-30rpx" :class="[active == 0 ? 'text-[var(--them-color)]' : '']">
              &#xe656;
            </view>
          </view>
          <view class="choose-item" :class="[active == 1 ? 'active' : '']" @click="handleChoose(1)">
            <view class="choose-item-title">
              品牌
            </view>
            <view class="iconfont ml10rpx text-30rpx" :class="[active == 1 ? 'text-[var(--them-color)]' : '']">
              &#xe656;
            </view>
          </view>
          <view class="choose-item" :class="[active == 2 ? 'active' : '']" @click="handleChoose(2)">
            <view class="choose-item-title">
              特色
            </view>
            <view class="iconfont ml10rpx text-30rpx" :class="[active == 2 ? 'text-[var(--them-color)]' : '']">
              &#xe656;
            </view>
          </view>
        </view>
        <view v-if="active == 0" class="choose-box">
          <view class="city-content">
            <view
              v-for="(item, index) in cityList" :key="index" class="name"
              :class="[query.cityId == item.cityId ? 'active' : '']" @click="choose(item.cityId, index as number)"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="choose-content">
            <view class="choose-item" @click="choose(query.cityId)">
              <view class="name">
                全城
              </view>
              <!-- <image
                v-if="query.districtId === ''" class="icon" :src="`${StaticUrl}/film-choose-icon.png`"
                mode="scaleToFill"
              /> -->
              <view v-if="query.districtId === ''" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
                &#xe657;
              </view>
            </view>
            <view
              v-for="(item, index) in cityList[currentCity].districts" :key="index" class="choose-item"
              @click="choose(item.cityId, currentCity, item.districtId)"
            >
              <view class="name" :class="[query.districtId == item.districtId ? 'active' : '']">
                {{ item.districtName }}
              </view>
              <!-- <image
                v-if="query.districtId == item.districtId" class="icon" :src="`${StaticUrl}/film-choose-icon.png`"
                mode="scaleToFill"
              /> -->
              <view v-if="query.districtId == item.districtId" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
                &#xe657;
              </view>
            </view>
          </view>
        </view>
        <view v-if="active == 1" class="choose-box">
          <view class="choose-content">
            <view class="choose-item" @click="choose('')">
              <view class="name">
                全部
              </view>
              <view v-if="query.brandId === ''" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
                &#xe657;
              </view>
            </view>
            <view v-for="(item, index) in brandList" :key="index" class="choose-item" @click="choose(item.brandId)">
              <view class="name" :class="[query.brandId == item.brandId ? 'active' : '']">
                {{ item.brandName }}
              </view>
              <view v-if="query.brandId == item.brandId" class="iconfont ml10rpx text-30rpx text-[var(--them-color)]">
                &#xe657;
              </view>
            </view>
          </view>
        </view>
      </view>
    </wd-action-sheet>
  </view>
</template>

<style lang="scss" scoped>
.choose-film{
  background: #fff;
  min-height: 100vh;

  .bg-box {
      width: 100%;
      height: 596rpx;
      position: relative;

      .img {
        width: 100%;
        height: 596rpx;
        vertical-align: top;
      }
    }

    .info-box {
      padding: 24rpx;
      padding-top: 300rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-top: -400rpx;
      position: relative;
      background: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 29.54%, #FFFFFF 46.99%, #FFFFFF 100%);

      .info {
        display: flex;
        position: relative;

        .icon {
          width: 218rpx;
          height: 298rpx;
          background: #aaa;
          border-radius: 16rpx;
          flex-shrink: 0;
        }

        .box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;

          .name {
            font-weight: 600;
            font-size: 28rpx;
            color: #222222;
            width: 400rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .score-box {
            font-size: 24rpx;
            color: #AAAAAA;
            position: absolute;
            top: 0;
            right: 0;
            text-align: right;

            .score {
              display: flex;
              align-items: center;
              justify-content: flex-end;

              .num {
                font-size: 28rpx;
                color: #FF4D3A;
                padding: 0 12rpx;
              }
            }

            .want-num {
              padding: 0 12rpx;
              align-self: flex-end;
              margin-top: 24rpx;
              // font-size: 24rpx;
              // color: #AAAAAA;
            }
          }

          .type-box {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #AAAAAA;

            .tag {
              padding: 6rpx 10rpx;
              background: #F0F0F0;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              font-size: 24rpx;
              color: #AAAAAA;
              margin-left: 10rpx;
            }
          }

          .publish-info {
            font-size: 24rpx;
            color: #AAAAAA;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 460rpx;
          }
        }
      }

      .title-box {
        display: flex;
        justify-content: space-between;
        margin-top: 28rpx;

        .title {
          font-weight: 600;
          font-size: 28rpx;
          color: #222222;
        }

        .open {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #AAAAAA;

          .icon {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }

      .desc {
        font-size: 24rpx;
        color: #222222;
        font-weight: 300;
        margin-top: 20rpx;
        line-height: 40rpx;
      }
    }

  .choose-list{
    display: flex;
    padding: 24rpx 0;
    background: #fff;
    .choose-item{
      display: flex;
      align-items: center;
      margin-right: 80rpx;
      .choose-item-title{
        font-weight: bold;
          font-size: 32rpx;
          color: #222222;
      }
      .icon{
        width: 30rpx;
        height: 30rpx;
        margin-left: 12rpx;
      }
      &.active{
        .choose-item-title{
          color: var(--them-color);
        }
      }
    }

  }

  .film-list{
    padding: 0 24rpx;
    .film-item{
      background: #F9F9F9;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;
      .name-box{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .name{
          font-weight: bold;
            font-size: 28rpx;
            color: #222222;
        }
        .price-box{
          display: flex;
          align-items: center;
          .num{
            font-weight: bold;
              font-size: 36rpx;
              color: #FF4D3A;
          }
          .label{
            font-size: 24rpx;
            color: #AAAAAA;
          }
        }
      }
      .address-box{
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #AAAAAA;
        margin-bottom: 16rpx;

          .address {
          font-size: 24rpx;
          color: #AAAAAA;
        }
        .distance{

        }
      }
      .cantact{
        font-size: 24rpx;
        color: #AAAAAA;
        margin-bottom: 16rpx;
      }
      .time-box{
        font-size: 24rpx;
        color: #222222;
      }
    }
  }
  .content{
    padding: 0 24rpx;
    .choose-box{
      min-height: 500rpx;
      display: flex;
      .city-content{
        width: 30%;
        .name{
          font-size: 28rpx;
          color: #222222;
          padding: 14rpx 0;
        }
      }
      .choose-content{
        flex: 1;
        .choose-item{
          display: flex;
          justify-content: space-between;
          padding: 14rpx 0;
          .name{
            font-size: 28rpx;
              color: #222222;
          }
          .icon{
            width: 30rpx;
              height: 30rpx;
          }
        }
      }
      .name.active{
          color: var(--them-color);
      }
    }
  }
}
</style>