会员卡页面实现

准备好后端接口以后，我们将学习如何在前台页面中展示会员卡信息，并实现跳转到会员卡页面的功能。

添加前台路由

首先，我们需要在前台路由中添加一个会员卡页面的路由。

在src目录下找到router.js文件，添加以下代码：

frontend/src/router/index.js

import MemberCard from '../views/MemberCard.vue'

  {
    path: "/member_card",
    name: "MemberCard",
    component: MemberCard,
  },

这样就定义了一个名为MemberCard的路由，对应的组件是MemberCard.vue。

创建会员卡页面组件

在src/views目录下创建一个名为MemberCard.vue的文件，并添加以下代码：

frontend/src/views/MemberCard.vue

<template>
  <div>
    <h1>会员卡页面</h1>
    <table>
      <thead>
        <tr>
          <th>会员卡名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="card in cards" :key="card.id">
          <td>{{ card.name }}</td>
          <td>{{ card.price }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="goToPayment">购买</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: []
    }
  },
  mounted() {
    this.getCardInfo()
  },
  methods: {
    getCardInfo() {
      // 假设我们从后台接口获取会员卡信息
      const response = await axios.get('API地址')
      this.cards = response.data
    },
  }
}
</script>

在这个组件中，我们依赖axios库发送请求，获取会员卡信息，并在页面上展示。

跳转到会员卡页面

在电影详情页面中，我们需要判断当前用户是否是会员，如果不是会员则跳转到会员卡页面。

在你的代码中，找到电影详情页面相关的代码，确保以下逻辑的实现：

frontend/src/views/MovieDetail.vue

   // 判断用户状态
    check_member_status() {
      if (!this.$store.state.isLogin) {
        showMessage("请先登录！");
        return;
      }
      axios.get("/api/users/me").then((response) => {
        this.userInfo = response.data;
        if (this.userInfo.profile.is_upgrade) {
          this.downloadInfo = true;
        } else {
          this.$router.push({
            name: "MemberCard",
          });
        }
      });
    },

如果用户没有登录，点击"查看网盘地址"，则会执行this.$router.push跳转到MemberCard，也就是会员页面。

首先确认一下当前用户是否为非会员卡用户。可以查看profile表，如下图所示。

如果已经登录，并且是非会员账号，则跳转到会员卡列表页面，效果如下图所示。

这样就实现了跳转到会员卡页面的功能。

以上就是实现会员卡页面的基本步骤，接下来我们将在下一节课中学习如何实现支付功能。