PHP and Vue: How to obtain member points after payment

PHP and Vue: How to obtain member points after payment

In e-commerce platforms, in order to attract users to participate in shopping, many merchants will set up a points system to allow Users can obtain certain points during the shopping process, and after accumulation, they can redeem corresponding discounts or gifts. For members, points can reflect their loyalty and spending power. This article will introduce how to use PHP and Vue to implement the function of automatically adding corresponding points to the member account after successful payment.

1. Database design

First, we need to design a database to store member information and points records. Suppose we have two tables: members (membership table) and points (points record table).

The structure of the members table can be as follows:

CREATE TABLE members (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50),
  email VARCHAR(100),
  points INT DEFAULT 0
);

The structure of the points table can be as follows:

CREATE TABLE points (
  id INT PRIMARY KEY AUTO_INCREMENT,
  member_id INT,
  points INT,
  created_at DATETIME,
  FOREIGN KEY (member_id) REFERENCES members(id)
);

2. Backend implementation

Connection Next, we need to write PHP code to handle the business logic after the payment is successful. Suppose our back-end interface is /api/payment/success, we can achieve it through the following code:

<?php
// 引入数据库连接文件
require_once 'db_connection.php';

// 获取前端传递的会员ID和支付金额
$memberId = $_POST['memberId'];
$paymentAmount = $_POST['paymentAmount'];

// 根据会员ID查询会员信息
$query = "SELECT * FROM members WHERE id = $memberId";
$result = $conn->query($query);
$member = $result->fetch_assoc();

// 计算积分并更新会员积分
$points = $paymentAmount * 0.1; // 假设每消费1元获得10积分
$newPoints = $member['points'] + $points;
$query = "UPDATE members SET points = $newPoints WHERE id = $memberId";
$conn->query($query);

// 添加积分记录
$query = "INSERT INTO points (member_id, points, created_at) VALUES ($memberId, $points, NOW())";
$conn->query($query);

// 返回更新后的会员积分信息
$query = "SELECT * FROM members WHERE id = $memberId";
$result = $conn->query($query);
$updatedMember = $result->fetch_assoc();

// 返回更新后的会员积分信息给前端
echo json_encode($updatedMember);

// 关闭数据库连接
$conn->close();
?>

3. Front-end implementation

In the front-end Use the Vue framework to handle the logic of obtaining member points after successful payment. First, we need to set up a button that triggers the payment operation when the user clicks the button. After the payment is successful, we need to send a request to the backend to update the member points and display the updated points.

<template>
  <div>
    <button @click="pay">支付</button>
    <div v-if="showPoints">
      <p>会员积分：{{ member.points }}</p>
      <p>获得积分：{{ addedPoints }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      member: {},
      addedPoints: 0,
      showPoints: false
    };
  },
  methods: {
    pay() {
      // 发送支付请求，支付成功后调用接口更新会员积分
      // 假设调用后端接口的方法为paymentSuccess
      this.paymentSuccess()
        .then(response => {
          // 更新会员积分和获得积分信息
          this.member = response.data;
          this.addedPoints = response.data.points - this.member.points;
          this.showPoints = true;
        })
        .catch(error => {
          console.log(error);
        });
    },
    paymentSuccess() {
      return new Promise((resolve, reject) => {
        // 这里假设使用axios来发送请求
        axios.post('/api/payment/success', {
          memberId: 1, // 替换为实际会员ID
          paymentAmount: 100 // 替换为实际支付金额
        })
        .then(response => {
          resolve(response);
        })
        .catch(error => {
          reject(error);
        });
      });
    }
  }
};
</script>

The above is a method to obtain member points after successful payment through PHP and Vue. Through the back-end interface and front-end interaction, the automatic addition and display of member points is completed. Specific code examples can be modified and optimized according to actual conditions. Hope this article helps you!

The above is the detailed content of PHP and Vue: How to obtain member points after payment. For more information, please follow other related articles on the PHP Chinese website!