Home > Backend Development > PHP Tutorial > Use PHP and Vue to implement the rebate function of member points after payment

Use PHP and Vue to implement the rebate function of member points after payment

PHPz
Release: 2023-09-25 17:46:01
Original
1562 people have browsed it

Use PHP and Vue to implement the rebate function of member points after payment

Use PHP and Vue to realize the rebate function of member points after payment

With the rapid development of e-commerce, membership systems are becoming more and more common. In order to attract more users to participate, many merchants will reward members through rebates. This article will introduce how to use PHP and Vue to implement the rebate function of member points after payment, and provide specific code examples.

1. The principle of points rebate

The realization of the points rebate function is mainly divided into the following steps:

  1. Users purchase goods and complete payment;
  2. The backend system calculates rebate points based on the amount of goods purchased by the user;
  3. Adds the rebate points to the user's points account;
  4. The front-end page displays the user's point balance.

2. Back-end code implementation

  1. Create database

First, we need to create a database to store the user's points information. You can use the following SQL statement to create a table named user_points:

CREATE TABLE `user_points` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL,
  `points` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Copy after login
  1. Write PHP code

Use PHP on the backend to handle business logic . First, we need to write a file named updatePoints.php to update the user's points information. The sample code is as follows:

<?php

// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);

// 获取用户ID和返利积分
$user_id = $_POST['user_id'];
$points = $_POST['points'];

// 查询用户当前的积分余额
$sql = "SELECT * FROM user_points WHERE user_id = $user_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  // 更新用户的积分信息
  $row = $result->fetch_assoc();
  $current_points = $row['points'];
  $new_points = $current_points + $points;
  $sql = "UPDATE user_points SET points = $new_points WHERE user_id = $user_id";
  if ($conn->query($sql) === TRUE) {
    echo "积分更新成功";
  } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
  }
} else {
  // 添加新的积分信息
  $sql = "INSERT INTO user_points (user_id, points) VALUES ($user_id, $points)";
  if ($conn->query($sql) === TRUE) {
    echo "积分添加成功";
  } else {
    echo "Error: " . $sql . "<br>" . $conn->error;
  }
}

$conn->close();

?>
Copy after login
  1. Set routing

Use a PHP framework (such as Laravel) to easily set routing and call the updatePoints.php file. The sample code is as follows:

use IlluminateSupportFacadesRoute;

Route::post('/updatePoints', function () {
    return view('updatePoints');
});
Copy after login
  1. Front-end call API

Use Vue to implement the front-end page, and update the user's points information by calling the API provided by the back-end. The sample code is as follows:

<template>
  <div>
    <button @click="updatePoints">购买商品并支付</button>
    <p>我的积分余额:{{ points }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user_id: 123, // 用户ID
        points: 0 // 积分余额
      }
    },
    methods: {
      updatePoints() {
        // 计算返利积分
        const orderAmount = 100; // 购买商品的金额
        const rebateRate = 0.1; // 返利比例
        const points = orderAmount * rebateRate;

        // 调用后端API更新积分
        axios.post('/updatePoints', {
          user_id: this.user_id,
          points: points
        })
        .then(response => {
          // 更新成功,刷新积分余额
          this.getPoints();
        })
        .catch(error => {
          console.log(error);
        });
      },
      getPoints() {
        // 调用后端API获取积分余额
        axios.get(`/getPoints?user_id=${this.user_id}`)
        .then(response => {
          this.points = response.data;
        })
        .catch(error => {
          console.log(error);
        });
      }
    },
    mounted() {
      // 页面加载时获取积分余额
      this.getPoints();
    }
  }
</script>
Copy after login

3. Summary

Through the above steps, we successfully implemented the rebate function of member points after payment. After the user purchases the product and completes the payment, the backend will calculate the rebate points based on the amount of the product and add them to the user's points account. The front-end page will display the user's points balance in a timely manner.

This sample code can be used as a basis to be modified and expanded according to actual needs. Hope this helps!

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template