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

<script setup lang="ts">
import Tabbar from '../components/tabbar.vue'
import router from '@/router'

definePage({
  name: 'film-index',
  islogin: false,
  style: {
    navigationBarTitleText: '电影演出',
    backgroundColorBottom: '#fff',
  },
})

const hotList = ref<Api.filmMovieList>([

])

const comingSoonList = ref<Api.filmMovieList>([

])

function jump(active: any) {
  router.push({ name: 'film-movie', params: { active } })
}

function handleBuy(item: Api.filmMovieList) {
  console.log('goumai')
  router.push({ name: 'film-movie-detail', params: { id: item.id as string, movieId: item.movieId as string } })
}

async function getList(showSt: number) {
  uni.showLoading({ title: '加载中' })
  const res = await Apis.film.getMovieList({ data: { showSt, pageNum: 1, pageSize: 8 } })
  console.log(res, '请求')
  if (!res.data) {
    useGlobalToast().show('暂无该商品查看权限！')
  }
  if (showSt === 1) {
    hotList.value = res.data?.records
  }
  else {
    comingSoonList.value = res.data?.records
  }
  uni.hideLoading()
}
getList(1)
getList(2)
onMounted(() => {

})
</script>

<template>
  <view class="film-page px-24rpx pb-300rpx pt-20rpx">
    <view class="mb-20rpx rounded-16rpx bg-[#fff] px-24rpx pt-24rpx">
      <view class="flex justify-between">
        <view class="text-[#222] font-bold">
          热映电影
        </view>
        <view class="flex items-center text-center text-24rpx text-[#AAAAAA]" @click="jump(0)">
          查看全部
          <wd-icon name="chevron-right" size="24rpx" color="#AAA" />
        </view>
      </view>
      <view class="p-0r gap-y-10r grid grid-cols-4 w-full gap-x-20rpx">
        <view
          v-for="(item, index) in hotList" :key="index" class="item relative aspect-square w-152rpx"
          @click="handleBuy(item)"
        >
          <view class="tag absolute rounded-8rpx bg-[rgba(34,34,34,0.7)] px-10rpx text-18rpx text-[#fff] leading-26rpx">
            {{ item.version }}
          </view>
          <image class="h-208rpx w-152rpx rounded-16rpx" :src="item.posterUrl" />
          <view class="w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-24rpx">
            {{ item.name }}
          </view>
          <view class="btn" @click.stop="handleBuy(item)">
            购票
          </view>
        </view>
      </view>
    </view>

    <view class="mb-20rpx rounded-16rpx bg-[#fff] px-24rpx pt-24rpx">
      <view class="flex justify-between">
        <view class="text-[#222] font-bold">
          即将上映
        </view>
        <view class="flex items-center text-center text-24rpx text-[#AAAAAA]" @click="jump(2)">
          查看全部
          <wd-icon name="chevron-right" size="24rpx" color="#AAA" />
        </view>
      </view>
      <view class="gap-y-10r p-0r grid grid-cols-4 w-full gap-x-20rpx">
        <view
          v-for="(item, index) in comingSoonList" :key="index" class="item relative aspect-square w-152rpx"
          @click="handleBuy(item)"
        >
          <view class="tag absolute rounded-8rpx bg-[rgba(34,34,34,0.7)] px-10rpx text-18rpx text-[#fff] leading-26rpx">
            {{ item.version }}
          </view>
          <image class="h-208rpx w-152rpx rounded-16rpx" :src="item.posterUrl" />
          <view class="w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-24rpx">
            {{ item.name }}
          </view>
          <!-- <view class="btn" @click.stop="handleBuy(item)">
            购票
          </view> -->
        </view>
      </view>
    </view>

    <Tabbar :active="0" />
  </view>
</template>

<style lang="scss" scoped>
.film-page {

    .item {
        padding-bottom: 24rpx;
        margin-top: 26rpx;
        .tag {
            top: 4rpx;
            right: 10rpx;
            background: rgba(34, 34, 34, 0.7);
            text-align: center;
            font-size: 18rpx;
        }

        .btn {
            width: 96rpx;
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            background: #9ED605;
            border-radius: 26rpx 26rpx 26rpx 26rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            margin: 16rpx auto 0;
        }
    }
}
</style>