本文介绍了体育直播系统中主播端核心功能模块“我是主播”的实现思路与关键代码。该模块基于 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`)
);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。