zbH5/src/views/ColumnDetail/index.vue

<template>
  <Nav :title="columnDetail.name">
    <div class="right-icon" @click="shareFn">
      <img src="@/assets/images/share-icon1.png" />
    </div>
  </Nav>
  <div class="cover">
    <img :src="columnDetail.imgUrl" />
    <button
      v-if="columnDetail.lastVideo"
      @click="goToPage(`/videoPlay?id=${columnDetail.lastVideo.id}`)"
    >
      点击进入直播间
    </button>
  </div>
  <div class="column-info">
    <div>
      <h3>{{ columnDetail.name }}</h3>
      <p>{{ subCount }}人订阅</p>
    </div>
    <button @click="sendLiveColumn">
      {{ columnDetail.isSub === 1 ? "取消订阅" : "订阅" }}
    </button>
  </div>

  <van-tabs v-model:active="active" shrink line-width="0.4rem">
    <van-tab
      title-class="tab"
      v-for="(item, index) in ['详情', '栏目直播', '栏目预告', '历史嘉宾']"
      :key="index"
      :title="item"
    >
      <Detail
        :list="list"
        v-if="index === 0"
        :introduce="columnDetail.introduce"
      />
      <LivePlay :list="list" v-else-if="index === 1" />
      <AdvanceNotice v-else-if="index === 2"></AdvanceNotice>
      <Guests v-else />
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import Nav from "@/components/NavBar.vue";
import Detail from "./components/Detail.vue";
import LivePlay from "./components/LivePlay.vue";
import AdvanceNotice from "./components/AdvanceNotice.vue";
import Guests from "./components/Guests.vue";
import { queryColumnDetail } from "@/api/column";
import { liveColumn } from "@/api/column";
import { showConfirmDialog } from "vant";
import { showToast } from "vant";
import { userLogin } from "@/utils/login";

const route = useRoute();
const router = useRouter();
const store = useStore();

const goToPage = (page) => {
  router.push(page);
};

const columnDetail = ref({});
const subCount = ref(0);
const getColumnDetail = async () => {
  let ret = await queryColumnDetail({ id: route.query.id });
  if (ret.code === 0) {
    columnDetail.value = ret.data;
    subCount.value = columnDetail.value.subCount;
  }
};
getColumnDetail();

const sendLiveColumn = async () => {
  if (!store.state.token) {
    return userLogin();
  }
  if (columnDetail.value.isSub === 1) {
    showConfirmDialog({
      message: "确定取消订阅当前专栏吗？",
      confirmButtonColor: "#F02E18",
    })
      .then(() => {
        liveColumnFn();
      })
      .catch(() => {});
  } else {
    liveColumnFn();
  }
};

const liveColumnFn = async () => {
  let ret = await liveColumn({
    option: columnDetail.value.isSub === 1 ? 2 : 1,
    columnId: route.query.id,
  });
  if (ret.code === 0) {
    columnDetail.value.isSub = columnDetail.value.isSub === 1 ? 2 : 1;
    subCount.value = ret.data;
  }
};

const shareFn = () => {
  showToast("Demo版本暂不支持");
};
</script>
<style scoped lang="scss">
.right-icon {
  img {
    width: 48px;
    height: 48px;
  }
}
.cover {
  position: relative;
  height: 422px;

  background: #f5f6f7;
  img {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
  button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 16px 32px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
  }
}
.column-info {
  display: flex;
  justify-content: space-between;
  padding: 32px;
  text-align: left;
  align-items: center;
  h3 {
    color: rgb(27, 35, 48);
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 56px;
    margin-bottom: 8px;
  }
  p {
    color: rgb(153, 153, 153);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
  }
  button {
    height: 56px;
    border-radius: 28px;
    border: 0.5px solid rgba(240, 46, 24, 0.5);
    color: rgb(240, 46, 24);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    background: none;
    padding: 0 20px;
  }
}
.van-tabs {
  padding: 0 32px;
}
::v-deep .van-tabs__line {
  background: #f02e18;
}
::v-deep .van-tabs__wrap {
  margin-bottom: 20px;
  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;
  }
  .tab {
    padding: 0 !important;
    margin-right: 48px;
  }
}
</style>