uniapp【新增】:个人中心新增直播入口,列表等

This commit is contained in:
花城
2025-08-12 17:06:08 +08:00
parent 921da15eeb
commit ea14690bdd
11 changed files with 282 additions and 5 deletions

View File

@@ -131,4 +131,11 @@ export const queryDelGoodsBrowsing = (data : any) : Promise<Response<any>> => {
return post('Api/User/DelGoodsBrowsing', {
data,
}, true);
}
/** 获取直播列表 */
export const queryLiveInfo = (data : any) : Promise<Response<any>> => {
return post('Api/LiveBroadCast/GetLiveInfo', {
data,
}, true);
}

View File

@@ -84,4 +84,39 @@ export enum RouteSwitchNameEnum {
cart = '/pages/cart/cart',
/** 个人中心 */
member = '/pages/member/member',
}
/** 直播状态 */
export enum LiveStatusEnum {
/** 直播中 */
liveStreaming = 101,
/** 未开始 */
notStarted = 102,
/** 已结束 */
end = 103,
/** 禁播 */
bannedBroadcasting = 104,
/** 暂停 */
pause = 105,
/** 异常 */
abnormal = 106,
/** 已过期 */
expired = 107,
}
export enum LiveStatusTitleEnum {
/** 直播中 */
liveStreaming = '直播中',
/** 未开始 */
notStarted = '未开始',
/** 已结束 */
end = '已结束',
/** 禁播 */
bannedBroadcasting = '禁播',
/** 暂停 */
pause = '暂停',
/** 异常 */
abnormal = '异常',
/** 已过期 */
expired = '已过期',
}

View File

@@ -40,7 +40,8 @@ export enum MemberPageNameEnum {
checkIn = 'checkIn',
/** 万能表单 */
form = 'form',
/** 直播 */
live = 'live',
/** 通知公告 */
notice = 'notice',

View File

@@ -33,7 +33,8 @@
"pages-config/subpackage-agency.json",
"pages-config/subpackage-merchant.json",
"pages-config/subpackage-custom.json",
"pages-config/subpackage-webview.json"
"pages-config/subpackage-webview.json",
"pages-config/subpackage-livebroadcast.json"
],
"preloadRule": "pages-config/preloadRule.json",

View File

@@ -0,0 +1,19 @@
{
"subPackages": [{
"root": "pages/subpackage/livebroadcast",
"pages": [{
"path": "index",
"style": {
"navigationBarTitleText": "直播列表",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}],
"plugins": {
"live-player-plugin": {
"version": "1.3.5", // 注意该直播组件最新版本号
"provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid不是小程序的appid
}
}
}]
}

View File

@@ -805,7 +805,23 @@
"navigationStyle": "custom"
}
}]
}],
},{
"root": "pages/subpackage/livebroadcast",
"pages": [{
"path": "index",
"style": {
"navigationBarTitleText": "直播列表",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}],
"plugins": {
"live-player-plugin": {
"version": "1.3.5", // 注意该直播组件最新版本号
"provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid不是小程序的appid
}
}
}],
"preloadRule": {
"pages/member/member": {
"network": "all",

View File

@@ -303,7 +303,7 @@
/** 分类服务跳转页面 */
const handleClassifyServiceJumpPage = (item : MemberServiceType) => {
/** 判断签到,系统设置 */
if (item.name == MemberPageNameEnum.checkIn || item.name == MemberPageNameEnum.setting) {
if (item.name == MemberPageNameEnum.checkIn || item.name == MemberPageNameEnum.setting ) {
_useLoginStore.checkLogin(() => {
handleRouteNavigateTo(item.url);
})

View File

@@ -4,7 +4,7 @@ import {
ShowAgentPortalEnum, ShowInviterEnum, ShowStoresSwitchEnum,
ShowServicePackageEnum, ShowCouponEnum, ShowPinTuanEnum, ShowSeckillEnum,
ShowGroupBuyingEnum, ShowSolitaireEnum, ShowCalendarEnum, ShowCustomFormEnum,
ShowInvoiceEnum,
ShowInvoiceEnum,ShowLiveBroadCastEnum,
OrderTabStatusEnum
} from '@/core/enum';
import { useShopConfigStore } from '@/core/store';
@@ -171,6 +171,12 @@ export const useNavHook = () => {
name: MemberPageNameEnum.form,
isShow: config?.showCustomForm === ShowCustomFormEnum.yes,
url: "/pages/subpackage/form/list/list"
}, {
title: '直播',
img: "/static/images/member/icon-live.png",
name: MemberPageNameEnum.live,
isShow: config?.showCustomForm === ShowLiveBroadCastEnum.yes,
url: "/pages/subpackage/livebroadcast/index"
}
];
}

View File

@@ -0,0 +1,58 @@
.navbar-box{
position: fixed;
left: 0;
padding: 0 30rpx;
width: calc(100% - 60rpx);
display: flex;
align-items: center;
background-color: #eef2f6;
z-index: 99;
.item{
padding: 20rpx 0;
width: 200rpx;
font-size: 30rpx;
text-align: center;
border-bottom: 5rpx solid #fff;
}
.on{
color: #d33123;
border-color: #d33123;
}
}
.layout-box{
padding-top: 90rpx;
.box{
.item-box{
position: relative;
margin: 30rpx;
padding: 20rpx;
border-radius: 15rpx;
background-color: #fff;
.img{
display: block;
width: 100%;
height: 250rpx;
}
.tag{
position: absolute;
right: 40rpx;
top: 40rpx;
}
.title{
font-size: 32rpx;
margin: 20rpx 0;
}
.subtitle{
margin: 20rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 27rpx;
}
.time{
font-size: 24rpx;
color: gray;
}
}
}
}

View File

@@ -0,0 +1,134 @@
<template>
<coreshop-page title="直播列表" mode="left" >
<view class="layout-box">
<view class="navbar-box" :style="{ 'top': `${statusBarHeight}px` }">
<view :class="['item',{'on':state.navIndex == index}]" v-for="item,index in state.navList" :key="index" @click="handleChangeNav(index)">{{item}}</view>
</view>
<view class="box" v-if="state.list.length > 0">
<view class="item-box" v-for="item in state.list" :key="item.id" @click="handleGoRoom(item)">
<image class="img" :src="item.share_img" mode="widthFix"></image>
<view class="tag" v-if="item.live_status == LiveStatusEnum.liveStreaming">
<uv-tags :text="LiveStatusTitleEnum.liveStreaming" size="mini" type="success"></uv-tags>
</view>
<view class="tag" v-if="item.live_status == LiveStatusEnum.notStarted">
<uv-tags :text="LiveStatusTitleEnum.notStarted" size="mini"></uv-tags>
</view>
<view class="tag" v-if="item.live_status == LiveStatusEnum.end">
<uv-tags :text="LiveStatusTitleEnum.end" size="mini" type="warning"></uv-tags>
</view>
<view class="tag" v-if="item.live_status == LiveStatusEnum.bannedBroadcasting">
<uv-tags :text="LiveStatusTitleEnum.bannedBroadcasting" size="mini" type="warning"></uv-tags>
</view>
<view class="tag" v-if="item.live_status == LiveStatusEnum.pause">
<uv-tags :text="LiveStatusTitleEnum.pause" size="mini" type="error"></uv-tags>
</view>
<view class="tag" v-if="item.live_status == LiveStatusEnum.abnormal">
<uv-tags :text="LiveStatusTitleEnum.abnormal" size="mini" type="error"></uv-tags>
</view>
<view class="tag" v-if="item.live_status == LiveStatusEnum.expired">
<uv-tags :text="LiveStatusTitleEnum.expired" size="mini" type="error"></uv-tags>
</view>
<view class="title">{{ item.name }}</view>
<view class="subtitle">
<view class="">主播{{ item.anchor_name }} </view>
<view class="">直播商品{{ item.goods.length }}</view>
</view>
<view class="time">
直播时间{{timeFormat(item.start_time, 'yyyy-mm-dd hh:MM:ss')}} {{timeFormat(item.end_time, 'yyyy-mm-dd hh:MM:ss')}}
</view>
</view>
<view class="no-data" v-if="state.noData">没有更多了</view>
</view>
<view v-else class="layout-empty-box">
<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
</view>
</view>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { queryLiveInfo } from '@/core/api';
import type { Response } from '@/core/models';
import { EmptyEnum , LiveStatusEnum , LiveStatusTitleEnum } from '@/core/enum';
import { handleRouteNavigateTo } from '@/core/utils';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { useSystemInfo } from '@/core/hooks';
import { useUserInfoStore } from '@/core/store';
// 获取自定义导航栏高度
const { statusBarHeight } = useSystemInfo();
/** 用户数据store */
const userInfoStore = useUserInfoStore();
const state = reactive<{
navList:Array<string>;
navIndex:number;
list : Array<any>;
page : number;
limit : number;
noData : boolean;
}>({
navList:['直播计划', '历史直播'],
navIndex:0,
list: [],
page: 1,
limit: 10,
noData: false,
})
onMounted(() => {
getLiveInfo()
});
const getLiveInfo = async () => {
uni.showLoading({
title: "加载中..."
})
const res : Response<any> = await queryLiveInfo({
page: state.page,
limit: 10,
where: state.navIndex == 0 ? '':'get_replay'
});
if (res.data?.room_info?.length > 0) {
state.list = state.list.concat(res.data?.room_info);
}
if (res.data?.total <= state.list.length) {
state.noData = true;
}
uni.hideLoading();
}
onReachBottom(() => {
if (!state.noData) {
state.page++;
getLiveInfo();
}
});
const handleChangeNav = (index:number)=>{
if(state.navIndex != index){
state.navIndex = index;
state.noData = false;
state.page = 1;
state.list = [];
getLiveInfo();
}
}
const handleGoRoom = (item:any)=>{
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/subpackage/livebroadcast/index', userId: userInfoStore.userInfo.id })) // 开发者在直播间页面路径上携带自定义参数(如示例中的 path 和pid参数
uni.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}&custom_params=${customParams}`
});
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB