当前位置：首页 > VUE

vue实现付费看书

2026-02-20 12:44:29VUE

Vue实现付费看书功能

要实现一个付费看书的Vue应用，需要结合前端交互、后端支付接口和权限验证。以下是关键实现步骤：

搭建基础Vue项目结构

使用Vue CLI创建项目并安装必要依赖：

vue create book-payment-app
cd book-payment-app
npm install vue-router axios vuex

项目目录建议：

src/
├── components/
│   ├── BookList.vue
│   ├── PaymentModal.vue
│   └── ReadingPage.vue
├── store/
│   └── index.js
├── router/
│   └── index.js
└── views/
    ├── Home.vue
    └── Library.vue

实现书籍数据管理

在Vuex中管理书籍状态和用户购买记录：

// store/index.js
export default new Vuex.Store({
  state: {
    books: [
      { id: 1, title: 'Vue高级编程', price: 29.9, previewLength: 2000 },
      { id: 2, title: 'JavaScript设计模式', price: 39.9, previewLength: 1500 }
    ],
    purchasedBooks: []
  },
  mutations: {
    ADD_PURCHASE(state, bookId) {
      state.purchasedBooks.push(bookId)
    }
  }
})

支付流程集成

创建支付弹窗组件：


<!-- components/PaymentModal.vue -->
<template>
<div class="payment-modal">
 <h3>购买《{{ book.title }}》</h3>
 <p>价格: ¥{{ book.price }}</p>
 <button @click="handlePayment">确认支付</button>
</div>
</template>

export default { props: ['book'], methods: { async handlePayment() { try { const res = await axios.post('/api/payment', { bookId: this.book.id, amount: this.book.price }) this.$store.commit('ADD_PURCHASE', this.book.id) this.$emit('payment-success') } catch (error) { console.error('支付失败', error) } } } } ```

对接支付API（示例为支付宝）：

// 在支付处理方法中
handlePayment() {
// 调用后端接口获取支付参数
axios.post('/api/create-payment', {
 bookId: this.book.id,
 price: this.book.price
}).then(response => {
 // 跳转支付页面或唤起支付SDK
 window.location.href = response.data.paymentUrl
})
}

阅读权限控制

在路由守卫中验证购买状态：

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresPurchase) {
    const bookId = parseInt(to.params.id)
    const hasPurchased = store.state.purchasedBooks.includes(bookId)
    hasPurchased ? next() : next('/payment/' + bookId)
  } else {
    next()
  }
})

阅读页面内容分段控制：

<!-- components/ReadingPage.vue -->
<template>
  <div>
    <div v-html="previewContent"></div>
    <div v-if="!hasPurchased" class="paywall">
      <p>预览结束，购买后可阅读全文</p>
      <button @click="showPayment = true">立即购买</button>
    </div>
    <div v-else v-html="fullContent"></div>

    <PaymentModal 
      v-if="showPayment"
      :book="currentBook"
      @payment-success="showPayment = false"
    />
  </div>
</template>

后端API集成要点

需要实现的API端点示例：

GET /api/books - 获取书籍列表
POST /api/payment - 创建支付订单
GET /api/verify-purchase/:bookId - 验证购买状态

示例验证中间件：

// 后端中间件示例
function checkPurchaseStatus(req, res, next) {
  const bookId = req.params.id
  const userId = req.user.id

  PurchaseRecord.findOne({ userId, bookId })
    .then(record => {
      if(record) return next()
      else res.status(403).json({ error: '未购买该书籍' })
    })
}

附加功能实现

阅读进度保存：

// 在阅读组件中
watch: {
scrollPosition(newVal) {
 if(this.hasPurchased) {
   localStorage.setItem(`book_${this.bookId}_progress`, newVal)
 }
}
}

优惠券系统：

// 支付组件中添加优惠券验证
applyCoupon() {
axios.post('/api/validate-coupon', {
 code: this.couponCode,
 bookId: this.book.id
}).then(response => {
 this.discount = response.data.discount
})
}