Using PHP and Vue to develop a tier system for membership points after payment

Using PHP and Vue to develop a grading system for membership points after payment

With the development of e-commerce, membership systems have become an important means for many companies to attract and retain customers. one. Among them, the points system plays a key role in improving customer loyalty and promoting consumption. This article will introduce how to use PHP and Vue to develop a membership points level system after payment, and provide specific code examples.

1. Demand Analysis

Before developing the membership points level system after payment, we need to clarify the specific needs. Assume that our system has the following requirements:

1. Customers receive corresponding points after paying the order;
2. Points can be accumulated and consumed according to certain rules;
3. According to The number of points divides customers into different levels and provides corresponding privileges;
4. Users can check their current points and levels on the front-end page.

2. Database design

In this system, we need two tables: membership table and points record table.

1. Member table (Member)

   • id: member ID, primary key
   • name: member name
   • level_id: Member level ID

2. Points record table (Points)

   • id: Points record ID, primary key
   • member_id: Member ID , foreign key
   • points: number of points
   • create_time: creation time

3. Back-end development

In In back-end development, we use PHP to build the back-end server and provide API interfaces for front-end calls.

1. Create membership level table (Level)

   CREATE TABLE `Level` (
     `id` int(11) NOT NULL AUTO_INCREMENT,
     `name` varchar(50) NOT NULL,
     `points` int(11) NOT NULL,
     PRIMARY KEY (`id`)
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Create points record table (Points)

   CREATE TABLE `Points` (
     `id` int(11) NOT NULL AUTO_INCREMENT,
     `member_id` int(11) NOT NULL,
     `points` int(11) NOT NULL,
     `create_time` datetime DEFAULT NULL,
     PRIMARY KEY (`id`),
     KEY `member_id` (`member_id`),
     CONSTRAINT `Points_ibfk_1` FOREIGN KEY (`member_id`) REFERENCES `Member` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3. Create API interface file (api.php)

<?php
// 连接数据库
$pdo = new PDO("mysql:host=localhost;dbname=your_database;charset=utf8", 'username', 'password');

// 获取用户的当前积分和等级
function getMemberInfo($member_id) {
    global $pdo;
    $sql = "SELECT m.id, m.name, l.name as level_name, l.points as level_points,
            (SELECT SUM(points) FROM Points WHERE member_id = m.id) as total_points
            FROM Member m
            LEFT JOIN Level l ON m.level_id = l.id
            WHERE m.id = :member_id";
    $stmt = $pdo->prepare($sql);
    $stmt->bindValue(':member_id', $member_id);
    $stmt->execute();
    return $stmt->fetch(PDO::FETCH_ASSOC);
}

// 处理支付成功后的积分增加
function addPoints($member_id, $points) {
    global $pdo;
    $sql = "INSERT INTO Points (member_id, points, create_time) VALUES (:member_id, :points, NOW())";
    $stmt = $pdo->prepare($sql);
    $stmt->bindValue(':member_id', $member_id);
    $stmt->bindValue(':points', $points);
    $stmt->execute();
    return $pdo->lastInsertId();
}

4. Front-end development

In front-end development, we use the Vue framework to build the user interface and call the API interface provided by the back-end .

1. Create member points display component (MemberPoints.vue)

   <template>
     <div>
    <h2>会员信息</h2>
    <p>姓名：{{ member.name }}</p>
    <p>当前等级：{{ member.level_name }}</p>
    <p>当前积分：{{ member.total_points }}</p>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
    return {
      member: {},
    };
     },
     created() {
    this.getMemberInfo();
     },
     methods: {
    getMemberInfo() {
      axios.get('/api/member-info')
        .then(response => {
          this.member = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
     },
   };
   </script>

2. Create points increase component after successful payment (AddPoints.vue)

   <template>
     <div>
    <h2>支付成功</h2>
    <p>获得积分：{{ points }}</p>
    <button @click="addPoints">确认</button>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     props: ['points'],
     methods: {
    addPoints() {
      axios.post('/api/add-points', { points: this.points })
        .then(() => {
          this.$emit('success');
        })
        .catch(error => {
          console.error(error);
        });
    },
     },
   };
   </script>

5. System testing

After completing the back-end and front-end development, we can conduct system testing. Simulate a customer to make a payment and earn points, and then the front end can display the customer's current points and level.

Through the above development, we successfully used PHP and Vue to develop a grading system for member points after payment. This system can help companies increase customer loyalty, promote consumption, and provide customers with privileges. At the same time, the details of the code examples can be further improved and optimized according to actual needs.

The above is the detailed content of Using PHP and Vue to develop a tier system for membership points after payment. For more information, please follow other related articles on the PHP Chinese website!