本文介绍了体育直播系统中主播端核心功能模块“我是主播”的实现思路与关键代码。该模块基于 Vue.js 构建前端页面,后端采用 ThinkPHP 提供 API 支持,同时兼容 Android(Java)和 iOS(Objective-C)移动端访问,确保多端一致体验。

前端(Vue.js)实现

直播收益页面

<template>
  <div class="earnings-container">
    <el-date-picker
      v-model="selectedDate"
      type="month"
      format="yyyy-MM"
      placeholder="选择日期"
      @change="fetchEarnings"
    ></el-date-picker>

    <el-table :data="earningsList" border style="width: 100%">
      <el-table-column prop="date" label="时间" width="180" />
      <el-table-column prop="gift_count" label="礼物数量" />
      <el-table-column prop="sender" label="赠送者" />
      <el-table-column prop="gift_value" label="礼物价值" />
    </el-table>
    <div class="total">收益总额:{{ totalIncome }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      earningsList: [],
      totalIncome: 0,
    };
  },
  methods: {
    fetchEarnings() {
      this.$axios
        .post('/api/anchor/earnings', { date: this.selectedDate })
        .then((res) => {
          this.earningsList = res.data.data;
          this.totalIncome = res.data.total;
        });
    },
  },
};
</script>

直播记录页面

<template>
  <div class="history-container">
    <el-select v-model="timeRange" placeholder="选择时间范围" @change="fetchHistory">
      <el-option label="本周" value="week" />
      <el-option label="本月" value="month" />
      <el-option label="近三月" value="three_months" />
    </el-select>

    <el-table :data="liveHistory" style="width: 100%">
      <el-table-column prop="start_time" label="直播时间" />
      <el-table-column prop="duration" label="直播时长" />
    </el-table>

    <div class="total-time">直播时长:{{ totalTime }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeRange: 'week',
      liveHistory: [],
      totalTime: '',
    };
  },
  methods: {
    fetchHistory() {
      this.$axios
        .post('/api/anchor/history', { range: this.timeRange })
        .then((res) => {
          this.liveHistory = res.data.records;
          this.totalTime = res.data.total_time;
        });
    },
  },
};
</script>

后端(PHP + ThinkPHP)

接口:获取直播收益

public function earnings()
{
    $anchorId = session('user_id');
    $date = input('post.date'); // yyyy-MM 格式

    $start = $date . '-01';
    $end = date("Y-m-t", strtotime($start));

    $list = Db::name('gift_log')
        ->where('anchor_id', $anchorId)
        ->whereBetweenTime('create_time', $start, $end)
        ->field('create_time as date, gift_name, gift_value, from_user_id as sender')
        ->select();

    $total = array_sum(array_column($list, 'gift_value'));

    return json(['code' => 1, 'data' => $list, 'total' => $total]);

接口:获取直播记录

public function history()
{
    $anchorId = session('user_id');
    $range = input('post.range'); // week / month / three_months

    switch ($range) {
        case 'week':
            $start = date("Y-m-d", strtotime("-7 days"));
            break;
        case 'month':
            $start = date("Y-m-01");
            break;
        case 'three_months':
            $start = date("Y-m-d", strtotime("-3 months"));
            break;
    }

    $list = Db::name('live_session')
        ->where('anchor_id', $anchorId)
        ->where('start_time', '>=', $start)
        ->field('start_time, duration')
        ->select();

    $total_seconds = array_sum(array_column($list, 'duration'));
    $total_time = gmdate("H小时i分s秒", $total_seconds);

    return json(['code' => 1, 'records' => $list, 'total_time' => $total_time]);
}

移动端逻辑(Java / Objective-C)

Android(Java)

@POST("api/anchor/earnings")
Call<EarningsResponse> getEarnings(@Body EarningsRequest request);

Call<EarningsResponse> call = api.getEarnings(new EarningsRequest("2021-09"));
call.enqueue(new Callback<EarningsResponse>() {
  @Override
  public void onResponse(Call<EarningsResponse> call, Response<EarningsResponse> response) {
    earningsList.setAdapter(new EarningsAdapter(response.body().data));
  }
});

iOS(Objective-C)

NSURL *url = [NSURL URLWithString:@"https://yourapi.com/api/anchor/earnings"];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
request.HTTPMethod = @"POST";
NSDictionary *params = @{@"date": @"2021-09"};
request.HTTPBody = [NSJSONSerialization dataWithJSONObject:params options:0 error:nil];

NSURLSessionDataTask *task = [[NSURLSession sharedSession]
  dataTaskWithRequest:request
    completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
        NSDictionary *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
        self.earningsData = json[@"data"];
        dispatch_async(dispatch_get_main_queue(), ^{
            [self.tableView reloadData];
        });
}];
[task resume];

数据库设计(MySQL)

CREATE TABLE `gift_log` (
  `id` int NOT NULL AUTO_INCREMENT,
  `anchor_id` int NOT NULL,
  `from_user_id` int NOT NULL,
  `gift_name` varchar(50),
  `gift_value` int,
  `create_time` datetime,
  PRIMARY KEY (`id`)
);

CREATE TABLE `live_session` (
  `id` int NOT NULL AUTO_INCREMENT,
  `anchor_id` int NOT NULL,
  `start_time` datetime,
  `duration` int COMMENT '单位为秒',
  PRIMARY KEY (`id`)
);



东莞梦幻网络科技
1 声望0 粉丝