|
|
@@ -1,2251 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="swiper-wrapper">
|
|
|
- <swiper class="swiper-container" :current="currentSwiperIndex" :circular="false" vertical
|
|
|
- @change="onSwiperChange" :style="{height: '100vh'}" :duration="swiperDuration">
|
|
|
- <swiper-item v-for="(liveItem, index) in list" :key="liveItem.liveId">
|
|
|
- <view class="container" :class="{active: currentSwiperIndex === index}">
|
|
|
- <view class="blackbg"></view>
|
|
|
- <view class="content">
|
|
|
- <!-- 页面内容 -->
|
|
|
- <view style=" position: fixed;top: 0;z-index: 5;" class="content-top">
|
|
|
- <view class="u-flex-y-center">
|
|
|
- <image @click="goBack" style="width: 60rpx;height: 64rpx;margin-right: 26rpx;"
|
|
|
- src="@/static/images/live/return.png"></image>
|
|
|
- <view class=" align-center"
|
|
|
- style="padding: 6rpx 4rpx;height: 64rpx;background: rgba(0,0,0,0.5);border-radius: 32rpx;">
|
|
|
- <u-avatar :src="liveItem.liveImgUrl||$img.logo" size="32"></u-avatar>
|
|
|
- <view class="colorf ml10 mr6">
|
|
|
- <view>{{liveItem.liveName?truncateString(liveItem.liveName,5):"未命名"}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="u-flex-end align-center" @click="showadd=!showadd" style="margin-top: 100rpx;">
|
|
|
- <image class="w52 h52 mr4" v-for="(item,viewerIndex) in filteredViewers"
|
|
|
- :key="viewerIndex" style="border-radius: 26rpx;" :src="item.avatar||$img.logo">
|
|
|
- </image>
|
|
|
- <view class="sum">{{liveUserTotal||0}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 页面内容 -->
|
|
|
- <view style=" position: fixed;top:120rpx;left: 0rpx; z-index: 5;" class="content-top">
|
|
|
- <view class="u-flex-y-center">
|
|
|
- <image @click="onRed(liveItem)" v-if="liveItem.redInfo?.redStatus==1"
|
|
|
- style="width: 70rpx;height: 70rpx;" src="@/static/images/hongbao.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 右边的 -->
|
|
|
- <view :class=" liveItem.showType==1 ? 'siderow-group' : 'side-group'">
|
|
|
- <view class="side-item">
|
|
|
- <image @click="onLike(liveItem)" src="/static/images/live/like.png"></image>
|
|
|
- <view>{{liveItem.liveViewData?.like||0}}</view>
|
|
|
- </view>
|
|
|
- <view class="side-item">
|
|
|
- <image @click="goStore(liveItem)" src="/static/images/live/shop.png"></image>
|
|
|
- <view>店铺</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="side-item">
|
|
|
- <button open-type="share">
|
|
|
- <image src="/static/images/live/share.png" mode="widthFix"></image>
|
|
|
- </button>
|
|
|
- <view>分享</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="shop-prompt u-flex-y-center" v-if="showPurchasePrompt&&orderUser?.count">
|
|
|
- <image class="w32 h32 mr8" src="/static/images/live/shopping.png"></image>
|
|
|
- <text> {{orderUser.userName ? maskString(orderUser.userName) : ''}} 等
|
|
|
- {{orderUser.count || 0}}
|
|
|
- 人正在去购买</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="videolist " style="margin: auto 0">
|
|
|
- <view class="video" style="height:100vh">
|
|
|
- <!-- 修改video组件以支持HLS -->
|
|
|
- <!-- showType 1 横屏 2 竖屏 -->
|
|
|
- <video v-if="liveItem.livingUrl" :id="'myVideo_' + liveItem.liveId"
|
|
|
- :class="liveItem.showType == 1 ? 'video_row' : 'videotop'" :src="liveItem.livingUrl"
|
|
|
- :autoplay="currentSwiperIndex === index" :controls='false' object-fit='contain'
|
|
|
- :custom-cache="false" :enable-progress-gesture="false"
|
|
|
- vslide-gesture-in-fullscreen='true' :show-center-play-btn="false"
|
|
|
- :http-cache="false" @error="videoError">
|
|
|
- </video>
|
|
|
-
|
|
|
- <video v-if="liveItem.videoUrl"
|
|
|
- :class="liveItem.showType == 1 ? 'video_row' : 'videotop'" :src="liveItem.videoUrl"
|
|
|
- :autoplay="currentSwiperIndex === index" :controls='false' object-fit='contain'
|
|
|
- :custom-cache="false" :enable-progress-gesture="false"
|
|
|
- vslide-gesture-in-fullscreen='true' :show-center-play-btn="false"
|
|
|
- :http-cache="false" loop @error="videoError">
|
|
|
- </video>
|
|
|
-
|
|
|
- <!-- 加载提示 -->
|
|
|
- <view v-if="liveItem.loading" class="loading-tip">
|
|
|
- <u-loading mode="circle" color="#ffffff" size="36"></u-loading>
|
|
|
- <text class="loading-text">加载中...</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="pb40 mt90" style="position: fixed;bottom: 0;width: 100%;">
|
|
|
- <view class="w100 h300 mt20">
|
|
|
- <scroll-view enable-flex scroll-y="true" class="talk p20 scrolly flex-1 column"
|
|
|
- style="width: calc(100% - 40rpx);height: calc(100% - 40rpx);"
|
|
|
- :scroll-into-view="liveItem.scrollIntoView">
|
|
|
- <view>
|
|
|
- <view class="list justify-start" v-for="(item,talkIndex) in liveItem.talklist"
|
|
|
- :key="talkIndex" v-show="item.cmd=='announcement'">
|
|
|
- <view class="talk-list ml16 justify-start">
|
|
|
- <view class="fs24">
|
|
|
- <text class='fs24 colorf'>
|
|
|
- {{item.msg}}直播间{{liveItem.messageContent}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="list justify-start" v-for="(item,talkIndex) in liveItem.talklist"
|
|
|
- :key="talkIndex" :id="`list_${talkIndex}`"
|
|
|
- v-show="item.cmd!='red'&&item.cmd!='out'&&item.cmd!='entry'">
|
|
|
- <view class="talk-list ml16 justify-start">
|
|
|
- <view class="fs24">
|
|
|
- <text style="color: #FFDA73;">{{item.nickName}}:</text>
|
|
|
- <text class='fs24 colorf'>{{item.msg}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="liveItem.showWelcomeMessage" class="welcome-message">
|
|
|
- <view class="list justify-start" v-for="(item,talkIndex) in liveItem.talklist"
|
|
|
- :key="talkIndex" v-show="item.cmd=='entry'||item.cmd=='out'">
|
|
|
- <view class="talk-list ml16 justify-start">
|
|
|
- <view class="fs24">
|
|
|
- <text style="color: #ff89d6;">{{item.nickName}} </text>
|
|
|
- <!-- <text class='fs24 colorf'>
|
|
|
- {{item.msg}}直播间{{liveItem.messageContent}}</text> -->
|
|
|
- <text class='fs24 colorf'>
|
|
|
- {{item.msg}}直播间{{liveItem.messageContent}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="justify-between p24">
|
|
|
- <view class="u-flex-y-center"
|
|
|
- style="background:rgba(157, 157, 157, 0.8);padding:10rpx 14rpx 10rpx 32rpx;width: 566rpx;box-sizing:border-box;border-radius:36rpx;">
|
|
|
- <u-input :placeholder="liveItem.placeholderText" border="none"
|
|
|
- customStyle='font-size:24rpx;' v-model="liveItem.value" shape='circle'
|
|
|
- color='#fff' placeholderStyle='color:#e7e7e7' class="ml20"
|
|
|
- >
|
|
|
- <!-- @confirm="sendMsg(liveItem)" -->
|
|
|
- </u-input>
|
|
|
- <view class="send" @click="sendMsg(liveItem)">发送</view>
|
|
|
- </view>
|
|
|
- <view class="justify-between mr15 align-center">
|
|
|
- <view class="icon-bg ml20" @click="openCart(liveItem)">
|
|
|
- <image src="/static/images/shopping.png" class="w48 h48"></image>
|
|
|
- </view>
|
|
|
- <!-- <view class="icon-bg ml20" @click="liveItem.showziliao=!liveItem.showziliao">
|
|
|
- <image src="/static/images/more-icon.png" class="w48 h48"></image>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 弹窗组件保持不变 -->
|
|
|
- <u-popup :show="showadd" @close="close" @open="openViews" round='20rpx' bgColor='#ffffff'>
|
|
|
- <view class="view-box">
|
|
|
- <view class="t-c fs30">在线观众</view>
|
|
|
- <scroll-view scroll-y class="scroll-content" :style="{height: scrollHeight + 'px'}"
|
|
|
- @scrolltolower="handleScrollToLower">
|
|
|
- <view class="fs24 u-flex-y-center mb20" v-for="(item,index) in liveViewers"
|
|
|
- :key="index">
|
|
|
- <view
|
|
|
- :style="{color: index === 0 ? '#FF3B30' : index === 1 ? '#FF9500' : index === 2 ? '#FFCC00' : '#8E8E93',fontWeight: index < 3 ? 'bold' : 'normal',width: '50rpx'}"
|
|
|
- class="mr10">{{index+1}}</view>
|
|
|
- <u-avatar :src="item.avatar||$img.logo" size="32"></u-avatar>
|
|
|
- <text class="ml16">{{item.nickName||"未命名"}}</text>
|
|
|
- </view>
|
|
|
- <view class="no-more" v-if="viewNoMoreData && liveViewers.length > 0">
|
|
|
- <text>没有更多了</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <!-- <view class="fs24 u-flex-y-center bottom">
|
|
|
- <view class="mr10" style="width:50rpx">我</view>
|
|
|
- <u-avatar :src="livedata.liveImgUrl||$img.logo" size="32"></u-avatar>
|
|
|
- <text class="ml16">{{livedata.liveName||"未命名"}}</text>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <u-popup :show="liveItem.shopping" @close="closeShop" @open="openShop" round='20rpx'
|
|
|
- bgColor='f3f5f9'>
|
|
|
- <view class="shoppop">
|
|
|
- <view class="shoppop-top">
|
|
|
- <u-avatar :src="store.logoUrl" size="36" class="ml16"></u-avatar>
|
|
|
- <view class="search-input u-flex-y-center">
|
|
|
- <image style="width: 24rpx;margin-right: 16rpx;" src="@/static/images/search.png"
|
|
|
- mode="widthFix">
|
|
|
- </image>
|
|
|
- <input placeholder="请搜索商品" v-model="liveItem.inputInfo"
|
|
|
- @input="handleSearchInput" />
|
|
|
- </view>
|
|
|
- <view class="t-c search-top" style="margin-right: 48rpx;">
|
|
|
- <image @click="onStoreCollect(liveItem)" v-if="store.isFavorite"
|
|
|
- style="width:40rpx;height: 40rpx;" src="@/static/images/collect_select.png">
|
|
|
- </image>
|
|
|
- <image v-else @click="onStoreCollect(liveItem)" style="width: 32rpx;height: 32rpx;"
|
|
|
- src="@/static/images/collect.png"></image>
|
|
|
- <view>收藏</view>
|
|
|
- </view>
|
|
|
- <view class="t-c search-top" @click="goOrderList(liveItem)">
|
|
|
- <image style="width: 40rpx;height: 40rpx;" src="@/static/images/order.png"></image>
|
|
|
- <view>订单</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <scroll-view enable-flex scroll-y class="shop-list" :style="{ height: boxHeight + 'px' }">
|
|
|
- <view class="list-item " v-for="(item,index) in products" :key="index">
|
|
|
- <view class="goods-img">
|
|
|
- <image :src="item.imgUrl" mode="widthFix"></image>
|
|
|
- <view class="goods-label">{{index+1}}</view>
|
|
|
- </view>
|
|
|
- <view class="goods-right">
|
|
|
- <view class="goods-title">{{item.productName}}</view>
|
|
|
- <view class="goods-people">{{item.sales}} 人已购</view>
|
|
|
- <view class="goods-shop">
|
|
|
- <text class="nummber"><text
|
|
|
- style="font-size: 20rpx;font-weight: 600;">¥</text><text
|
|
|
- style="font-size: 36rpx;font-weight: bold;">{{Math.trunc(item.price)}}</text>.{{getPureDecimal(item.price)?getPureDecimal(item.price):'00'}}/日</text>
|
|
|
- <view class="btn-group u-flex-y-center">
|
|
|
- <view class="collect-btn">
|
|
|
- <image v-if="item.isFavorite" @click="onGoodsCollect(item)"
|
|
|
- style="width: 32rpx;height: 32rpx;"
|
|
|
- src="/static/images/collect_select.png">
|
|
|
- </image>
|
|
|
- <image v-else @click="onGoodsCollect(item)"
|
|
|
- style="width: 32rpx;height: 32rpx;"
|
|
|
- src="/static/images/collect.png">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- <view v-if="item.status==1" class="shop-btn"
|
|
|
- @click="goShop(item.productId,item.goodsId)">去购买
|
|
|
- </view>
|
|
|
- <view v-else-if="item.status==0" @click="goShop(item.productId)"
|
|
|
- class="shop-btn">
|
|
|
- 已下架</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import Hls from 'hls.js';
|
|
|
- import CryptoJS from 'crypto-js'
|
|
|
- import {
|
|
|
- liveList
|
|
|
- } from '@/api/list'
|
|
|
- import {
|
|
|
- liveRed, // 点击领红包
|
|
|
- liveDataLike, // 点赞
|
|
|
- collectStore, // 店铺收藏/取消收藏
|
|
|
- collectGoods, // 商品收藏/取消收藏
|
|
|
- store, // 查询店铺
|
|
|
- // follow, // 关注/取消关注
|
|
|
- watchUserList, //获取直播间用户(展示在线用户)
|
|
|
- liveMsg, //获取最近聊天记录
|
|
|
- // 小黄车
|
|
|
- liveStore, //店铺展示,
|
|
|
- // liveGoodsDetail, //商品详情,
|
|
|
- liveOrderUser, //正在购买
|
|
|
- getLiveInfo, //获取直播间信息接口
|
|
|
- getLiveViewData //直播间点赞、关注、在线人数数据
|
|
|
- } from '@/api/live'
|
|
|
- import {
|
|
|
- liveOrderList, // 订单列表
|
|
|
- } from '@/api/order'
|
|
|
-
|
|
|
- import parse from '/uni_modules/uview-plus/libs/config/props/parse';
|
|
|
- import {
|
|
|
- LiveWS
|
|
|
- } from '@/utils/liveWS.js'
|
|
|
- import {
|
|
|
- getlive,
|
|
|
- // gettextlist,
|
|
|
- getAnswerlist,
|
|
|
- submitAnswer
|
|
|
- } from '@/api/home'
|
|
|
-
|
|
|
- // var wsUrl = "ws://192.168.10.166:7114/app/webSocket"; //余红奇
|
|
|
- // var wsUrl = "ws://192.168.10.125:7114/app/webSocket"; //涂小龙
|
|
|
- var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
|
|
|
- // var wsUrl = "ws://live.test.ylrztop.com/prod-api/app/webSocket"; //余红奇
|
|
|
- // var wsUrl = "ws://nd383294.natappfree.cc/app/webSocket"; //余红奇
|
|
|
- // var wsUrl = "ws://v56c9b8e.natappfree.cc/app/webSocket"; //余红奇
|
|
|
- // var wsUrl = "ws://192.168.10.170:7114/app/webSocket"; //陈果
|
|
|
- // var wsUrl = "ws://live.ylrzcloud.com/socket/app/webSocket";
|
|
|
- var pingpangTimes = null;
|
|
|
- var initTimes = null;
|
|
|
- var isSocketOpen = false;
|
|
|
- var socket = null;
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- connectingLiveId: null, // 记录正在连接的直播间ID
|
|
|
- swiperDuration: 0, // 初始化为0,首次加载无动画
|
|
|
- videoRetryCounts: {}, // 记录每个直播间的视频重试次数,格式: { liveId: 次数 }
|
|
|
-
|
|
|
-
|
|
|
- socketInstances: {}, // 改为对象存储多个socket实例
|
|
|
- currentSwiperIndex: 0, // 当前swiper索引
|
|
|
- list: [], // 直播间列表
|
|
|
- preloading: false, // 预加载状态
|
|
|
-
|
|
|
-
|
|
|
- liveUserTotal: null,
|
|
|
- viewPageSize: 10, // 每页数量
|
|
|
- viewPageNum: 1, // 当前页码
|
|
|
- viewLoading: false, // 是否正在加载
|
|
|
- viewNoMoreData: false, // 是否没有更多数据
|
|
|
- scrollHeight: 0,
|
|
|
- scrollTimer: null, // 滚动防抖定时器
|
|
|
-
|
|
|
-
|
|
|
- socketInstance: null, // 统一管理 socket 实例
|
|
|
- reconnectCount: 0,
|
|
|
- maxReconnectAttempts: 3,
|
|
|
- isManualClose: false, // 标记是否手动关闭
|
|
|
-
|
|
|
- showRed: true,
|
|
|
- // redInfo: {},
|
|
|
- // inputInfo: '',
|
|
|
- searchTimer: null,
|
|
|
- // storeId: null,
|
|
|
- reconnectTimer: null,
|
|
|
- isCollect: false,
|
|
|
- showPurchasePrompt: false,
|
|
|
- purchasePromptTimer: null,
|
|
|
- prevOrderCount: 0, // 用于记录上一次的购买人数
|
|
|
- videoUrl: null,
|
|
|
- showType: 1, //横屏1 竖屏2
|
|
|
- boxHeight: 300, //小黄车高度
|
|
|
- // isFollow: false,
|
|
|
- // liveViewData: {},
|
|
|
- liveViewers: [], //观众
|
|
|
- likeName: 0,
|
|
|
- hlsPlayer: null, // HLS播放器实例,
|
|
|
- livingUrl: "",
|
|
|
- products: {},
|
|
|
- store: {},
|
|
|
- orderUser: {}, //正在购买
|
|
|
- userType: 0,
|
|
|
- timestamp: '',
|
|
|
- liveId: null,
|
|
|
- // userId: uni.getStorageSync("userInfo.userId"),
|
|
|
-
|
|
|
- isZoom: false, //点赞按钮控制是否放大
|
|
|
- userinfo: '', //用户信息
|
|
|
- // path: 'http://192.168.10.166/dev-api', //余红奇
|
|
|
- // path: 'http://v56c9b8e.natappfree.cc', //余红奇
|
|
|
- // path: 'live.test.ylrztop.com/prod-api', //余红奇
|
|
|
- // path: 'http://192.168.10.170/dev-api', //陈果
|
|
|
- // value: '',
|
|
|
- talkdisabled: false, //输入框是否禁用
|
|
|
- autoplay: false, //视频自动播放
|
|
|
- showadd: false,
|
|
|
- // talklist: [],
|
|
|
- scrollIntoView: '',
|
|
|
- videoContext: '',
|
|
|
- thistime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
|
|
- // showWelcomeMessage: false,
|
|
|
- isSubmit: false,
|
|
|
- messageContent: "",
|
|
|
- showziliao: false,
|
|
|
- isScreen: true,
|
|
|
- // shopping: false, //小黄车弹窗
|
|
|
- scrollTop: 0, //弹幕
|
|
|
- old: {
|
|
|
- scrollTop: 0
|
|
|
- },
|
|
|
- livedata: {}, //直播间点赞、关注、在线人数数据
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- onLoad(options) {
|
|
|
- this.initTime();
|
|
|
- if (options.liveId) {
|
|
|
- this.liveId = options.liveId; // 仅当 liveId 变化时更新
|
|
|
- }
|
|
|
- this.userinfo = JSON.parse(uni.getStorageSync("userInfo"))
|
|
|
- // 初始化直播间列表
|
|
|
- this.initLiveList(options);
|
|
|
- this.getliveUser(false); // 调用获取在线用户接口
|
|
|
- const platform = uni.getWindowInfo().platform;
|
|
|
- // 初始化直播间列表
|
|
|
-
|
|
|
- if (['mp-weixin', 'mp-alipay', 'mp-baidu', 'mp-toutiao'].includes(platform)) {
|
|
|
- // 确保 API 存在再调用
|
|
|
- if (uni.showShareMenu) {
|
|
|
- uni.showShareMenu({
|
|
|
- withShareTicket: true, // 可选参数,根据需求配置
|
|
|
- success: () => {
|
|
|
- console.log('分享菜单显示成功');
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.error('分享菜单显示失败:', err);
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- console.warn('当前平台不支持 uni.showShareMenu');
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.log('当前平台无需显示分享菜单');
|
|
|
- }
|
|
|
- },
|
|
|
- onReady() {},
|
|
|
- onShareAppMessage() {
|
|
|
- return {
|
|
|
- // title: this.product.title,
|
|
|
- title: this.livedata.liveName,
|
|
|
- path: '/pages/home/living',
|
|
|
- imageUrl: this.products.image,
|
|
|
- success(res) {
|
|
|
- console.log("分享成功", res);
|
|
|
- },
|
|
|
- fail(err) {
|
|
|
- console.error("分享失败", err);
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- filteredViewers() {
|
|
|
- if (!this.liveViewers) {
|
|
|
- return
|
|
|
- } else {
|
|
|
- return this.liveViewers.slice(0, 3);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (currentLive) {
|
|
|
- this.pauseVideo(currentLive);
|
|
|
- }
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- // 关闭所有WebSocket连接
|
|
|
- this.closeAllWebSockets();
|
|
|
-
|
|
|
- // 移除所有全局事件监听
|
|
|
- this.removeAllEventListeners();
|
|
|
-
|
|
|
- // 清理定时器
|
|
|
- this.clearAllTimers();
|
|
|
-
|
|
|
- // 销毁HLS播放器(如果使用了hls.js)
|
|
|
- if (this.hlsPlayer) {
|
|
|
- this.hlsPlayer.destroy();
|
|
|
- this.hlsPlayer = null;
|
|
|
- }
|
|
|
-
|
|
|
- this.list.forEach(liveItem => {
|
|
|
- const videoId = `myVideo_${liveItem.liveId}`;
|
|
|
- const videoContext = uni.createVideoContext(videoId, this);
|
|
|
- if (videoContext) {
|
|
|
- videoContext.pause(); // 仅暂停视频即可
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 监听orderUser.count的变化
|
|
|
- 'orderUser.count': {
|
|
|
- handler(newVal, oldVal) {
|
|
|
- if (newVal !== this.prevOrderCount) {
|
|
|
- this.prevOrderCount = newVal;
|
|
|
- this.showPurchaseMessage();
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 重置在线用户列表的分页参数
|
|
|
- resetUserListParams() {
|
|
|
- this.viewPageNum = 1; // 重置页码为第一页
|
|
|
- this.viewNoMoreData = false; // 重置“没有更多数据”状态
|
|
|
- this.liveViewers = []; // 清空现有列表
|
|
|
- },
|
|
|
- closeAllWebSockets() {
|
|
|
- this.isManualClose = true;
|
|
|
-
|
|
|
- // 关闭所有连接
|
|
|
- Object.keys(this.socketInstances).forEach(liveId => {
|
|
|
- try {
|
|
|
- if (this.socketInstances[liveId] && this.socketInstances[liveId].instance) {
|
|
|
- this.socketInstances[liveId].instance.close({
|
|
|
- code: 1000,
|
|
|
- reason: '页面关闭'
|
|
|
- });
|
|
|
- console.log(`直播间 ${liveId} WebSocket 已关闭`);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.error(`关闭直播间 ${liveId} WebSocket 时出错:`, e);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.socketInstances = {};
|
|
|
- isSocketOpen = false;
|
|
|
- }, // 移除所有全局事件监听器
|
|
|
- removeAllEventListeners() {
|
|
|
- uni.$off('initSocket');
|
|
|
- uni.$off('sendMsg');
|
|
|
- uni.$off('closeWebSocket');
|
|
|
- uni.$off('refreshOrder');
|
|
|
- // 可以根据实际情况添加其他需要移除的事件
|
|
|
- }, // 清理所有定时器
|
|
|
- clearAllTimers() {
|
|
|
- if (this.intervalId) {
|
|
|
- clearInterval(this.intervalId);
|
|
|
- this.intervalId = null;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.pingpangTimes) {
|
|
|
- clearInterval(this.pingpangTimes);
|
|
|
- this.pingpangTimes = null;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.reconnectTimer) {
|
|
|
- clearInterval(this.reconnectTimer);
|
|
|
- this.reconnectTimer = null;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.scrollTimer) {
|
|
|
- clearTimeout(this.scrollTimer);
|
|
|
- this.scrollTimer = null;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.searchTimer) {
|
|
|
- clearTimeout(this.searchTimer);
|
|
|
- this.searchTimer = null;
|
|
|
- }
|
|
|
-
|
|
|
- if (this.purchasePromptTimer) {
|
|
|
- clearTimeout(this.purchasePromptTimer);
|
|
|
- this.purchasePromptTimer = null;
|
|
|
- }
|
|
|
- },
|
|
|
- // 初始化当前直播间数据
|
|
|
- async initCurrentLiveData() {
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (!currentLive) return;
|
|
|
-
|
|
|
- // 设置加载状态
|
|
|
- currentLive.loading = true;
|
|
|
-
|
|
|
- try {
|
|
|
- // 先初始化WebSocket连接
|
|
|
- await this.initSocket(currentLive);
|
|
|
-
|
|
|
- // 然后并行加载其他数据
|
|
|
- await Promise.allSettled([
|
|
|
- this.getLiveMsg(currentLive),
|
|
|
- this.getliveViewData(currentLive),
|
|
|
- this.getliving(currentLive)
|
|
|
- ]);
|
|
|
-
|
|
|
- currentLive.loaded = true;
|
|
|
- } catch (error) {
|
|
|
- console.error("初始化直播间数据失败:", error);
|
|
|
- } finally {
|
|
|
- currentLive.loading = false;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- // 初始化直播间列表
|
|
|
- async initLiveList(options) {
|
|
|
- try {
|
|
|
- await this.getList(); // 先加载直播间列表
|
|
|
- if (this.list.length === 0) {
|
|
|
- console.error("直播间列表为空,无法初始化");
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 设置初始直播间索引(原逻辑保留)
|
|
|
- if (options.liveId) {
|
|
|
- const index = this.list.findIndex(item => item.liveId == options.liveId);
|
|
|
- this.currentSwiperIndex = index !== -1 ? index : 0;
|
|
|
- } else {
|
|
|
- this.currentSwiperIndex = 0;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 延迟设置动画时间(原逻辑保留)
|
|
|
- setTimeout(() => {
|
|
|
- this.swiperDuration = 300;
|
|
|
- }, 100);
|
|
|
-
|
|
|
- // 获取当前直播间的liveItem
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (currentLive) {
|
|
|
- this.liveId = currentLive.liveId;
|
|
|
-
|
|
|
- // 重置用户列表参数
|
|
|
- this.resetUserListParams();
|
|
|
-
|
|
|
- // 预加载相邻直播间(不初始化WebSocket)
|
|
|
- this.preloadNearbyLives(false);
|
|
|
-
|
|
|
- // 初始化当前直播间数据(包含WebSocket连接)
|
|
|
- await this.initCurrentLiveData();
|
|
|
-
|
|
|
- // 获取在线用户
|
|
|
- this.getliveUser(true);
|
|
|
-
|
|
|
- // 延迟播放视频
|
|
|
- setTimeout(() => {
|
|
|
- this.playVideo(currentLive);
|
|
|
- }, 500);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("初始化失败:", error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // Swiper切换事件
|
|
|
- async onSwiperChange(e) {
|
|
|
- const newIndex = e.detail.current;
|
|
|
- const oldIndex = this.currentSwiperIndex;
|
|
|
-
|
|
|
- // 如果索引没有变化,直接返回
|
|
|
- if (newIndex === oldIndex) return;
|
|
|
-
|
|
|
- // 暂停旧视频
|
|
|
- const oldLive = this.list[oldIndex];
|
|
|
- if (oldLive) {
|
|
|
- this.pauseVideo(oldLive);
|
|
|
- this.closeWebSocket(oldLive.liveId);
|
|
|
- }
|
|
|
-
|
|
|
- // 更新当前索引
|
|
|
- this.currentSwiperIndex = newIndex;
|
|
|
- const newLive = this.list[newIndex];
|
|
|
- if (!newLive) return;
|
|
|
-
|
|
|
- // 更新当前直播ID
|
|
|
- this.liveId = newLive.liveId;
|
|
|
-
|
|
|
- try {
|
|
|
- // 重置用户列表参数
|
|
|
- this.resetUserListParams();
|
|
|
-
|
|
|
- // 初始化新直播间数据(包含WebSocket连接)
|
|
|
- await this.initCurrentLiveData();
|
|
|
-
|
|
|
- // 获取新直播间的在线用户
|
|
|
- this.getliveUser(false);
|
|
|
-
|
|
|
- // 播放新视频
|
|
|
- setTimeout(() => {
|
|
|
- this.playVideo(newLive);
|
|
|
- }, 100);
|
|
|
- } catch (error) {
|
|
|
- console.error('切换直播间失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取直播间列表
|
|
|
- async getList() {
|
|
|
- const data = {
|
|
|
- page: 1,
|
|
|
- page_size: 20
|
|
|
- };
|
|
|
- try {
|
|
|
- const res = await liveList(data);
|
|
|
- if (res.code === 200) {
|
|
|
- this.list = res.rows.map(item => ({
|
|
|
- ...item,
|
|
|
- talklist: [],
|
|
|
- loading: false,
|
|
|
- loaded: false,
|
|
|
- shopping: false,
|
|
|
- inputInfo: '',
|
|
|
- showWelcomeMessage: false,
|
|
|
- redInfo: {}
|
|
|
- // 其他初始化字段...
|
|
|
- }));
|
|
|
- console.log("直播间列表加载成功,数量:", this.list.length); // 确认数量是否 > 0
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- this.list = []; // 接口失败时清空列表,避免后续错误
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("获取直播间列表失败:", error);
|
|
|
- this.list = []; // 异常时清空列表
|
|
|
- }
|
|
|
- },
|
|
|
- // 播放视频
|
|
|
- playVideo(liveItem) {
|
|
|
- if (!liveItem) return;
|
|
|
-
|
|
|
- try {
|
|
|
- const videoId = `myVideo_${liveItem.liveId}`;
|
|
|
- const videoContext = uni.createVideoContext(videoId, this);
|
|
|
- if (videoContext) {
|
|
|
- videoContext.pause(() => {
|
|
|
- // 暂停完成后再播放
|
|
|
- videoContext.play();
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("播放视频失败:", error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- pauseVideo(liveItem) {
|
|
|
- if (!liveItem) return;
|
|
|
-
|
|
|
- try {
|
|
|
- const videoId = `myVideo_${liveItem.liveId}`;
|
|
|
- const videoContext = uni.createVideoContext(videoId, this);
|
|
|
- if (videoContext) {
|
|
|
- videoContext.pause();
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("暂停视频失败:", error);
|
|
|
- }
|
|
|
- },
|
|
|
- // 预加载相邻直播间
|
|
|
- async preloadNearbyLives(includeWebSocket = false) {
|
|
|
- this.preloading = true;
|
|
|
- const currentIndex = this.currentSwiperIndex;
|
|
|
- const preloadIndexes = [];
|
|
|
-
|
|
|
- if (currentIndex > 0) preloadIndexes.push(currentIndex - 1);
|
|
|
- if (currentIndex > 1) preloadIndexes.push(currentIndex - 2);
|
|
|
- if (currentIndex < this.list.length - 1) preloadIndexes.push(currentIndex + 1);
|
|
|
- if (currentIndex < this.list.length - 2) preloadIndexes.push(currentIndex + 2);
|
|
|
-
|
|
|
- for (const index of preloadIndexes) {
|
|
|
- const liveItem = this.list[index];
|
|
|
- if (!liveItem || liveItem.loaded || liveItem.loading) continue;
|
|
|
-
|
|
|
- liveItem.loading = true;
|
|
|
- try {
|
|
|
- // 只加载视频和基本信息,不初始化WebSocket
|
|
|
- await Promise.all([
|
|
|
- this.getliving(liveItem),
|
|
|
- this.getLiveMsg(liveItem),
|
|
|
- this.getliveViewData(liveItem)
|
|
|
- ]);
|
|
|
-
|
|
|
- // 只有当明确要求时才初始化WebSocket
|
|
|
- if (includeWebSocket) {
|
|
|
- await this.initSocket(liveItem);
|
|
|
- }
|
|
|
-
|
|
|
- liveItem.loaded = true;
|
|
|
- } catch (error) {
|
|
|
- console.error(`预加载直播间 ${index} 失败:`, error);
|
|
|
- liveItem.loaded = false;
|
|
|
- } finally {
|
|
|
- liveItem.loading = false;
|
|
|
- }
|
|
|
- }
|
|
|
- this.preloading = false;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- openViews() {
|
|
|
- // 计算scroll-view高度
|
|
|
- this.$nextTick(() => {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.view-box').boundingClientRect(data => {
|
|
|
- if (data) {
|
|
|
- // 减去标题和底部固定区域的高度
|
|
|
- this.scrollHeight = data.height - 80 - 120; // 80是标题高度,120是底部高度
|
|
|
- }
|
|
|
- }).exec();
|
|
|
- });
|
|
|
- },
|
|
|
- // 重置直播间数据
|
|
|
- resetLiveData() {
|
|
|
- // 保留不需要重置的数据(如用户信息等)
|
|
|
- const keepData = {
|
|
|
- userinfo: this.userinfo,
|
|
|
- list: this.list,
|
|
|
- currentSwiperIndex: this.currentSwiperIndex
|
|
|
- };
|
|
|
-
|
|
|
- // 重置其他直播间特定数据
|
|
|
- this.liveUserTotal = null;
|
|
|
- // this.liveViewData = {};
|
|
|
- this.liveViewers = [];
|
|
|
- this.livingUrl = "";
|
|
|
- this.videoUrl = null;
|
|
|
- this.products = {};
|
|
|
- this.store = {};
|
|
|
- this.orderUser = {};
|
|
|
- this.talklist = [];
|
|
|
- this.livedata = {};
|
|
|
- // this.isFollow = false;
|
|
|
- this.shopping = false;
|
|
|
- this.inputInfo = ''
|
|
|
-
|
|
|
- // 恢复需要保留的数据
|
|
|
- Object.assign(this, keepData);
|
|
|
- },
|
|
|
-
|
|
|
- // 获取直播间用户
|
|
|
- async getliveUser(isLoadMore = false) {
|
|
|
- // 强制使用当前 liveId,避免使用旧值
|
|
|
- const currentLiveId = this.liveId;
|
|
|
- if (!currentLiveId) return;
|
|
|
- // if (this.viewLoading || this.viewNoMoreData) return;
|
|
|
- this.viewLoading = true;
|
|
|
- try {
|
|
|
- const res = await watchUserList(currentLiveId, this.viewPageSize, this.viewPageNum, false);
|
|
|
- if (res.code === 200) {
|
|
|
- // 若请求期间已切换直播间,忽略旧数据
|
|
|
- if (this.liveId !== currentLiveId) return;
|
|
|
- this.liveUserTotal = res.total;
|
|
|
- if (res.rows.length === 0) {
|
|
|
- this.viewNoMoreData = true;
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.liveViewers = isLoadMore ? [...this.liveViewers, ...res.rows] :
|
|
|
- res.rows; // 首次加载/切换直播间时重置数据
|
|
|
- this.viewPageNum++;
|
|
|
- // console.log("在线观众", this.liveViewers)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('获取观众列表失败:', error);
|
|
|
- } finally {
|
|
|
- this.viewLoading = false;
|
|
|
- }
|
|
|
- },
|
|
|
- // 滚动到底部触发
|
|
|
- handleScrollToLower() {
|
|
|
- // 清除上一次未执行的定时器,避免重复请求
|
|
|
- if (this.scrollTimer) {
|
|
|
- clearTimeout(this.scrollTimer);
|
|
|
- }
|
|
|
-
|
|
|
- // 延迟0.5秒(500毫秒)执行接口请求
|
|
|
- this.scrollTimer = setTimeout(() => {
|
|
|
- this.getliveUser(true); // 加载更多数据
|
|
|
- }, 1000); // 延迟时间:500毫秒
|
|
|
- },
|
|
|
- async getLiveMsg(liveItem) {
|
|
|
- // 强化校验:确保 liveItem 存在且包含 liveId
|
|
|
- if (!liveItem || !liveItem.liveId) {
|
|
|
- console.error('getLiveMsg 错误:无效的 liveItem', {
|
|
|
- liveItem: liveItem,
|
|
|
- currentIndex: this.currentSwiperIndex,
|
|
|
- listLength: this.list.length
|
|
|
- });
|
|
|
- return; // 直接返回,不执行后续逻辑
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await liveMsg(liveItem.liveId, 30, 1);
|
|
|
- if (res.code == 200) {
|
|
|
- // 确保使用响应式更新
|
|
|
- this.$set(liveItem, 'talklist', [...res.rows]);
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$set(liveItem, 'scrollIntoView', `list_${liveItem.talklist.length-1}`);
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("获取聊天记录失败:", error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 点击红包
|
|
|
- onRed(item) {
|
|
|
- // console.log("点了this.liveId", item)
|
|
|
- if (!item.liveId) return;
|
|
|
- // console.log("点了this.liveId", this.liveId)
|
|
|
- if (!item.redInfo?.redId) return;
|
|
|
- // console.log("点了this.redInfo?.redId", this.redInfo.redId)
|
|
|
- // console.log("点了this.userinfo.userId", this.userinfo.userId)
|
|
|
- let data = {
|
|
|
- liveId: item.liveId,
|
|
|
- userId: this.userinfo.userId,
|
|
|
- redId: item.redInfo.redId,
|
|
|
- }
|
|
|
- console.log("点了this.liveId", data)
|
|
|
- liveRed(data).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- handleSearchInput() {
|
|
|
- // 使用防抖优化性能,避免频繁请求
|
|
|
- clearTimeout(this.searchTimer);
|
|
|
- this.searchTimer = setTimeout(() => {
|
|
|
- this.queryCollect();
|
|
|
- }, 500); // 500毫秒延迟
|
|
|
- },
|
|
|
- // 显示购买提示信息
|
|
|
- showPurchaseMessage() {
|
|
|
- // 清除之前的定时器
|
|
|
- if (this.purchasePromptTimer) {
|
|
|
- clearTimeout(this.purchasePromptTimer);
|
|
|
- }
|
|
|
-
|
|
|
- // 显示提示
|
|
|
- this.showPurchasePrompt = true;
|
|
|
-
|
|
|
- // 2秒后自动隐藏
|
|
|
- this.purchasePromptTimer = setTimeout(() => {
|
|
|
- this.showPurchasePrompt = false;
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- truncateString(str, maxLength) {
|
|
|
- return str.length > maxLength ? str.slice(0, maxLength) + '...' : str;
|
|
|
- },
|
|
|
- goStore(item) {
|
|
|
- console.log("带过去storeId", item)
|
|
|
- if (!item.storeId) {
|
|
|
- uni.showToast({
|
|
|
- title: "当前直播间暂未开通店铺",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_shop/store?liveId=' + item.liveId + "&storeId=" + item.storeId
|
|
|
- })
|
|
|
- },
|
|
|
- // 去订单列表
|
|
|
- goOrderList() {
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages_shop/order"
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 初始化HLS播放器
|
|
|
- initHlsPlayer() {
|
|
|
- if (Hls.isSupported() && this.livingUrl) {
|
|
|
- const video = document.getElementById('myVideo');
|
|
|
- if (video) {
|
|
|
- this.hlsPlayer = new Hls();
|
|
|
- this.hlsPlayer.loadSource(this.livingUrl);
|
|
|
- this.hlsPlayer.attachMedia(video);
|
|
|
- this.hlsPlayer.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
|
- video.play();
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 视频错误处理
|
|
|
- videoError(e, liveItem) {
|
|
|
- // 检查是否是当前直播间,避免处理非活跃直播间的错误
|
|
|
- if (!liveItem || liveItem.liveId !== this.liveId) return;
|
|
|
-
|
|
|
- // 限制重试次数
|
|
|
- if (this.videoRetryCounts[liveItem.liveId] >= 3) {
|
|
|
- console.error(`直播间 ${liveItem.liveId} 视频加载失败`);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.videoRetryCounts[liveItem.liveId]++;
|
|
|
-
|
|
|
- // 延迟重试,避免与切换操作冲突
|
|
|
- setTimeout(() => {
|
|
|
- if (liveItem.liveId === this.liveId) {
|
|
|
- this.playVideo(liveItem);
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
-
|
|
|
- // 修改获取直播信息方法
|
|
|
- async getliving(liveItem) {
|
|
|
- if (!liveItem || !liveItem.liveId) return;
|
|
|
- // console.log("获取直播信息:", liveItem.liveId);
|
|
|
- const param = {
|
|
|
- id: liveItem.liveId
|
|
|
- };
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await getlive({
|
|
|
- id: liveItem.liveId
|
|
|
- });
|
|
|
- if (res.code !== 200) {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 强制更新视频源(覆盖旧值)
|
|
|
- if (res.data.liveType === 2) {
|
|
|
- // 回放视频
|
|
|
- this.$set(liveItem, 'videoUrl', res.data.videoUrl);
|
|
|
- this.$set(liveItem, 'livingUrl', ''); // 清空直播流
|
|
|
- this.$set(liveItem, 'placeholderText', "说点什么...");
|
|
|
-
|
|
|
- } else if (res.data.liveType === 1) {
|
|
|
- // 直播流
|
|
|
- this.$set(liveItem, 'livingUrl', res.data.flvHlsUrl);
|
|
|
- console.log("排查中1》》",res.data.flvHlsUrl)
|
|
|
- console.log("排查中2》》",liveItem.livingUrl)
|
|
|
- this.$set(liveItem, 'videoUrl', ''); // 清空回放视频
|
|
|
- this.$set(liveItem, 'placeholderText', "说点什么...");
|
|
|
- } else {
|
|
|
- // 未开播
|
|
|
- this.$set(liveItem, 'livingUrl', '');
|
|
|
- this.$set(liveItem, 'videoUrl', '');
|
|
|
- }
|
|
|
-
|
|
|
- // 更新其他直播信息
|
|
|
- // 仅当是当前激活的直播间时,才允许自动播放
|
|
|
- const isCurrentLive = this.currentSwiperIndex === this.list.findIndex(item => item.liveId ===
|
|
|
- liveItem.liveId);
|
|
|
- this.$set(liveItem, 'autoplay', isCurrentLive && res.data.liveType !== 0);
|
|
|
- this.$set(liveItem, 'showType', res.data.showType);
|
|
|
- this.$set(liveItem, 'storeId', res.storeId);
|
|
|
- this.queryCollect();
|
|
|
- } catch (err) {
|
|
|
- console.error("获取直播信息失败:", err);
|
|
|
- uni.showToast({
|
|
|
- title: "获取直播信息失败",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- }, // 设置视频播放
|
|
|
- setupVideoPlayback(liveItem, liveData) {
|
|
|
- if (!liveItem.livingUrl) return;
|
|
|
-
|
|
|
- // H5 平台:使用 HLS.js 处理 .m3u8 流
|
|
|
- // #ifdef H5
|
|
|
- if (liveItem.livingUrl.includes('.m3u8')) {
|
|
|
- this.initHlsPlayer(liveItem);
|
|
|
- return;
|
|
|
- }
|
|
|
- // #endif
|
|
|
-
|
|
|
- // 小程序/App 平台:直接使用 video 组件
|
|
|
- const videoId = `myVideo_${liveItem.liveId}`;
|
|
|
- const videoContext = uni.createVideoContext(videoId, this);
|
|
|
-
|
|
|
- if (liveData.liveType === 1) {
|
|
|
- // 回放:跳转到指定位置
|
|
|
- videoContext.seek(liveData.nowDuration || 0);
|
|
|
- } else {
|
|
|
- // 直播:直接播放
|
|
|
- videoContext.play();
|
|
|
- }
|
|
|
- },
|
|
|
- maskString(str, maskChar = '*') {
|
|
|
- // 如果str是undefined或null,直接返回空字符串
|
|
|
- if (!str) return '';
|
|
|
- // 确保str是字符串(如果是数字等类型,先转为字符串)
|
|
|
- const strVal = String(str);
|
|
|
- return strVal.split('').map((char, index) => (index === 0 ? char : maskChar)).join('');
|
|
|
- },
|
|
|
-
|
|
|
- getPureDecimal(num, precision = 6) {
|
|
|
- const decimalPart = Math.abs(num).toFixed(precision).split('.')[1];
|
|
|
- return decimalPart?.replace(/0+$/, '') || ''; // 移除末尾多余的0
|
|
|
- },
|
|
|
-
|
|
|
- // 返回上一个页面并关闭WebSocket
|
|
|
- goBack() {
|
|
|
- // 暂停当前视频
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (currentLive) {
|
|
|
- this.pauseVideo(currentLive);
|
|
|
- }
|
|
|
-
|
|
|
- // 关闭所有WebSocket连接
|
|
|
- this.closeWebSocket();
|
|
|
-
|
|
|
- // 导航返回
|
|
|
- const pages = getCurrentPages();
|
|
|
- if (pages.length > 1) {
|
|
|
- uni.navigateBack();
|
|
|
- } else {
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/list/index'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //正在购买
|
|
|
- async getliveOrder() {
|
|
|
- const currentLiveId = this.liveId;
|
|
|
- if (!currentLiveId) return;
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await liveOrderUser(currentLiveId);
|
|
|
- if (res.code === 200) {
|
|
|
- // 绑定到当前 liveItem
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (currentLive) {
|
|
|
- this.$set(currentLive, 'orderUser', res);
|
|
|
- this.orderUser = res; // 同步全局变量
|
|
|
- }
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('获取正在购买用户失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 获取直播间信息接口
|
|
|
- getLiveinformation() {
|
|
|
- if (!this.liveId) return;
|
|
|
- getLiveInfo(this.liveId).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- console.log("获取直播间信息接口>>>>", res)
|
|
|
- this.livingUrl = res.livingUrl
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- // 点赞
|
|
|
- async onLike(liveItem) {
|
|
|
- if (!liveItem || !liveItem.liveId) return;
|
|
|
- if (!liveItem.liveViewData) {
|
|
|
- await this.getliveViewData(liveItem); // 强制加载数据
|
|
|
- if (!liveItem.liveViewData) { // 仍未加载成功
|
|
|
- uni.showToast({
|
|
|
- title: "数据加载中,请稍后再试",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await liveDataLike(liveItem.liveId);
|
|
|
- if (res.code === 200) {
|
|
|
- if (res.like) {
|
|
|
- liveItem.liveViewData.like=res.like;
|
|
|
- }
|
|
|
- else{
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('点赞失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
- //直播间点赞、关注、在线人数数据
|
|
|
- async getliveViewData(liveItem) {
|
|
|
- if (!liveItem || !liveItem.liveId) return;
|
|
|
- try {
|
|
|
- const res = await getLiveViewData(liveItem.liveId);
|
|
|
- if (res.code == 200) {
|
|
|
- // 强制响应式更新,确保数据实时显示
|
|
|
- this.$set(liveItem, 'liveViewData', res);
|
|
|
- // 打印日志确认数据已加载
|
|
|
- console.log(`直播间 ${liveItem.liveId} 数据加载完成:`, res);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("获取直播间数据失败:", error);
|
|
|
- // 失败时兜底,避免显示异常
|
|
|
- this.$set(liveItem, 'liveViewData', {
|
|
|
- like: 0,
|
|
|
- watchCount: 0
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 去购买,跳商品详情
|
|
|
- goShop(productId, goodsId) {
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (!currentLive || !currentLive.liveId) return;
|
|
|
- // console.log("拿现在的item", currentLive)
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_shop/goods?productId=' + productId + '&liveId=' + currentLive.liveId +
|
|
|
- '&goodsId=' +
|
|
|
- goodsId + '&storeId=' + currentLive.storeId
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 查询店铺
|
|
|
- async queryCollect() {
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (!currentLive || !currentLive.liveId) return;
|
|
|
-
|
|
|
- const {
|
|
|
- storeId
|
|
|
- } = currentLive;
|
|
|
- // console.log("小黄车数据>>>", currentLive)
|
|
|
- if (!storeId) return;
|
|
|
- try {
|
|
|
- const res = await store(currentLive.storeId, currentLive.inputInfo, currentLive.liveId);
|
|
|
- if (res.code === 200) {
|
|
|
- // 数据绑定到当前 liveItem,避免全局污染
|
|
|
- this.$set(currentLive, 'products', res.data.goodsList);
|
|
|
- this.$set(currentLive, 'store', res.data);
|
|
|
- // 同步更新全局变量(供弹窗使用)
|
|
|
- this.products = res.data.goodsList;
|
|
|
- this.store = res.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('获取小黄车商品失败:', error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 店铺收藏
|
|
|
- onStoreCollect(liveItem) {
|
|
|
- console.log("店铺收藏", liveItem)
|
|
|
- if (!liveItem.storeId) return;
|
|
|
- collectStore(liveItem.storeId).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- liveItem.store.isFavorite = !liveItem.store.isFavorite
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- // 商品收藏
|
|
|
- onGoodsCollect(item) {
|
|
|
- console.log("商品收藏", item)
|
|
|
- if (!item || item.length === 0 || !item.goodsId) {
|
|
|
- return;
|
|
|
- }
|
|
|
- collectGoods(item.goodsId).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- item.isFavorite = !item.isFavorite
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- // 关注
|
|
|
- // async onFollow(liveItem) {
|
|
|
- // if (!liveItem || !liveItem.liveId) return;
|
|
|
-
|
|
|
- // try {
|
|
|
- // const res = await follow(liveItem.liveId);
|
|
|
- // liveItem.isFollow = !liveItem.isFollow;
|
|
|
- // uni.showToast({
|
|
|
- // title: res.msg,
|
|
|
- // icon: 'none'
|
|
|
- // });
|
|
|
- // } catch (error) {
|
|
|
- // console.error("关注操作失败:", error);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // 时间戳
|
|
|
- initTime() {
|
|
|
- const now = new Date();
|
|
|
- this.timestamp = now.getTime(); // 例如:'2023-04-01 12:00:00'
|
|
|
- },
|
|
|
- // initWebSocket() {
|
|
|
- // const liveWS = new LiveWS('ws://your-server.com', 123, 456);
|
|
|
-
|
|
|
- // // 从 URL 中解析 timestamp
|
|
|
- // const urlParams = new URL(liveWS.url).searchParams;
|
|
|
- // this.timestamp = urlParams.get('timestamp');
|
|
|
- // // console.log('Timestamp:', timestamp);
|
|
|
- // },
|
|
|
-
|
|
|
- // 弹幕滚动
|
|
|
- lowerChat: function(e) {
|
|
|
- console.log(e)
|
|
|
- },
|
|
|
- scroll: function(e) {
|
|
|
- console.log(e)
|
|
|
- this.old.scrollTop = e.detail.scrollTop
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- loadmore() {
|
|
|
- // for (let i = 0; i < 30; i++) {
|
|
|
- // this.indexList.push({
|
|
|
- // url: this.shopList[uni.$u.random(0, this.shopList.length - 1)],
|
|
|
- // });
|
|
|
- // }
|
|
|
- },
|
|
|
-
|
|
|
- openShop() {
|
|
|
-
|
|
|
- },
|
|
|
- openViews() {
|
|
|
- this.$nextTick(() => {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.view-box').boundingClientRect(data => {
|
|
|
- if (data) {
|
|
|
- this.scrollHeight = data.height - 80 - 120;
|
|
|
- }
|
|
|
- }).exec();
|
|
|
- });
|
|
|
- },
|
|
|
- openCart(liveItem) {
|
|
|
- if (!liveItem.storeId) {
|
|
|
- uni.showToast({
|
|
|
- title: "当前直播间暂未开通店铺",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- liveItem.shopping = !liveItem.shopping
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.showadd = !this.showadd
|
|
|
- },
|
|
|
- closes() {
|
|
|
- this.showziliao = !this.showziliao
|
|
|
- },
|
|
|
- closest() {
|
|
|
- this.showAnswer = !this.showAnswer
|
|
|
- },
|
|
|
- closestred() {
|
|
|
- this.showAnswerred = !this.showAnswerred
|
|
|
- },
|
|
|
- closeanswer() {
|
|
|
- this.answerbtn = !this.answerbtn
|
|
|
- },
|
|
|
- // 关闭小黄车
|
|
|
- closeShop() {
|
|
|
- // 通过当前swiper索引获取当前直播间实例
|
|
|
- const currentLive = this.list[this.currentSwiperIndex];
|
|
|
- if (currentLive) {
|
|
|
- // 使用响应式更新修改shopping属性
|
|
|
- this.$set(currentLive, 'shopping', !currentLive.shopping);
|
|
|
- }
|
|
|
- },
|
|
|
- // 关闭红包
|
|
|
- closeRed() {
|
|
|
- this.showRed = !this.showRed
|
|
|
- },
|
|
|
- // 触摸结束
|
|
|
- handleTouchEnd() {
|
|
|
- this.isZoom = false; // 恢复原状
|
|
|
- },
|
|
|
- getEWechatSdk() {
|
|
|
- // 只在H5平台执行
|
|
|
- // #ifdef H5
|
|
|
- let eWechatSdk = '';
|
|
|
- if (/(Android)/i.test(navigator.userAgent)) {
|
|
|
- eWechatSdk = 'jWeixin';
|
|
|
- } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
|
|
|
- eWechatSdk = 'wx';
|
|
|
- } else {
|
|
|
- eWechatSdk = 'jWeixin';
|
|
|
- }
|
|
|
- uni.setStorageSync("wxSdk", eWechatSdk);
|
|
|
- // #endif
|
|
|
- },
|
|
|
- // 修改关闭WebSocket方法
|
|
|
- closeWebSocket(liveId = null) {
|
|
|
- this.isManualClose = true;
|
|
|
-
|
|
|
- // 清除所有定时器
|
|
|
- clearInterval(this.pingpangTimes);
|
|
|
- clearInterval(this.reconnectTimer);
|
|
|
-
|
|
|
- // 关闭指定或所有WebSocket连接
|
|
|
- if (liveId) {
|
|
|
- // 关闭指定直播间的连接
|
|
|
- if (this.socketInstances[liveId] && this.socketInstances[liveId].instance) {
|
|
|
- try {
|
|
|
- this.socketInstances[liveId].instance.close(); // socketTask.close()
|
|
|
- console.log(`直播间 ${liveId} WebSocket 已安全关闭`);
|
|
|
- } catch (e) { console.error('关闭失败', e); }
|
|
|
- delete this.socketInstances[liveId];
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 关闭所有连接
|
|
|
- Object.keys(this.socketInstances).forEach(liveId => {
|
|
|
- try {
|
|
|
- uni.closeSocket({
|
|
|
- instance: this.socketInstances[liveId]
|
|
|
- });
|
|
|
- console.log(`直播间 ${liveId} WebSocket 已安全关闭`);
|
|
|
- } catch (e) {
|
|
|
- console.error('关闭 WebSocket 时出错:', e);
|
|
|
- }
|
|
|
- });
|
|
|
- this.socketInstances = {};
|
|
|
- }
|
|
|
-
|
|
|
- isSocketOpen = false;
|
|
|
- },
|
|
|
- reConnect() {
|
|
|
- var that = this;
|
|
|
- try {
|
|
|
- uni.closeSocket();
|
|
|
- } catch (e) {
|
|
|
-
|
|
|
- }
|
|
|
- setTimeout(function() {
|
|
|
- that.initSocket();
|
|
|
- }, 10000);
|
|
|
-
|
|
|
- },
|
|
|
- startHeartbeat(liveId) {
|
|
|
- clearInterval(this.pingpangTimes);
|
|
|
- this.pingpangTimes = setInterval(() => {
|
|
|
- const inst = this.socketInstances[liveId];
|
|
|
- if (!inst || !inst.isOpen || !inst.instance) return;
|
|
|
- const pingData = { cmd: 'ping', timestamp: Date.now() };
|
|
|
- try {
|
|
|
- inst.instance.send({ data: JSON.stringify(pingData) });
|
|
|
- } catch (err) {
|
|
|
- console.error('心跳发送失败:', err);
|
|
|
- this.scheduleReconnect(liveId);
|
|
|
- }
|
|
|
- }, 30000);
|
|
|
- },
|
|
|
- async initSocket(liveItem) {
|
|
|
- if (!liveItem || !liveItem.liveId) return;
|
|
|
-
|
|
|
- const liveId = liveItem.liveId;
|
|
|
-
|
|
|
- // 检查是否已经是当前连接或正在连接
|
|
|
- if (this.connectingLiveId === liveId ||
|
|
|
- (this.socketInstances[liveId] && this.socketInstances[liveId].isOpen)) {
|
|
|
- console.log(`直播间 ${liveId} 的WebSocket已经连接或正在连接,跳过初始化`);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 检查是否是当前活跃的直播间
|
|
|
- if (this.currentSwiperIndex !== this.list.findIndex(item => item.liveId === liveId)) {
|
|
|
- console.log(`不初始化非当前直播间 ${liveId} 的WebSocket`);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 关闭之前的连接(如果存在)
|
|
|
- if (this.socketInstances[liveId]) {
|
|
|
- this.closeWebSocket(liveId);
|
|
|
- }
|
|
|
-
|
|
|
- // 设置正在连接的直播间ID
|
|
|
- this.connectingLiveId = liveId;
|
|
|
-
|
|
|
- // 防止重复创建
|
|
|
- if (this.reconnectCount >= this.maxReconnectAttempts) {
|
|
|
- this.connectingLiveId = null;
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.isManualClose = false;
|
|
|
-
|
|
|
- // 生成签名
|
|
|
- const signature = CryptoJS.HmacSHA256(
|
|
|
- `${liveId}${this.userinfo.userId}${this.userType}${this.timestamp}`,
|
|
|
- this.timestamp.toString()
|
|
|
- ).toString(CryptoJS.enc.Hex);
|
|
|
-
|
|
|
- // 初始化实例状态
|
|
|
- this.socketInstances[liveId] = {
|
|
|
- instance: null,
|
|
|
- isOpen: false
|
|
|
- };
|
|
|
-
|
|
|
- try {
|
|
|
- const socketTask = uni.connectSocket({
|
|
|
- url: `${wsUrl}?userId=${this.userinfo.userId}&liveId=${liveId}&userType=${this.userType}×tamp=${this.timestamp}&signature=${signature}`,
|
|
|
- success: () => {
|
|
|
- console.log('WebSocket API 调用成功,正在建立连接...');
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.error('WebSocket 连接失败:', err);
|
|
|
- this.connectingLiveId = null;
|
|
|
- this.scheduleReconnect(liveId);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- socketTask.onOpen((res) => {
|
|
|
- console.log('WebSocket 连接已成功建立', res);
|
|
|
- this.socketInstances[liveId].instance = socketTask;
|
|
|
- this.socketInstances[liveId].isOpen = true;
|
|
|
-
|
|
|
- isSocketOpen = true;
|
|
|
- this.connectingLiveId = null;
|
|
|
- this.reconnectCount = 0;
|
|
|
- // 改用 socketTask 的 send 作为心跳
|
|
|
- this.startHeartbeat(liveId); // 修改 startHeartbeat 以接受 liveId 并使用 socketTask.send
|
|
|
- });
|
|
|
-
|
|
|
- socketTask.onMessage((res) => {
|
|
|
- // 找到对应的直播间并更新数据
|
|
|
- const targetLive = this.list.find(item => item.liveId === liveId);
|
|
|
- if (targetLive) {
|
|
|
- this.handleSocketMessage(res, targetLive);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- socketTask.onError((err) => {
|
|
|
- console.error('WebSocket 连接错误:', err);
|
|
|
- this.connectingLiveId = null;
|
|
|
- this.scheduleReconnect(liveId);
|
|
|
- });
|
|
|
-
|
|
|
- socketTask.onClose(() => {
|
|
|
- console.log(`WebSocket 连接已关闭: ${liveId}`);
|
|
|
- this.connectingLiveId = null;
|
|
|
- });
|
|
|
- } catch (e) {
|
|
|
- console.error('创建 WebSocket 异常:', e);
|
|
|
- this.connectingLiveId = null;
|
|
|
- this.scheduleReconnect(liveId);
|
|
|
- }
|
|
|
- },
|
|
|
- // 处理Socket消息
|
|
|
- handleSocketMessage(message, liveItem) {
|
|
|
- let data = JSON.parse(message.data)
|
|
|
- const socketMessage = data.data
|
|
|
- // console.log("处理",data)
|
|
|
- if (data.code == 200) {
|
|
|
- const messageData = {
|
|
|
- ...socketMessage, // 原数据(可能包含部分字段)
|
|
|
- cmd: socketMessage.cmd || '' // 强制添加cmd,确保存在(默认空字符串)
|
|
|
- };
|
|
|
- // console.log("messageData是",messageData)
|
|
|
- if (socketMessage.cmd == 'sendMsg') {
|
|
|
- // this.$set(liveItem, 'talklist', [...liveItem.talklist, messageData]);
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$set(liveItem, 'scrollIntoView', `list_${liveItem.talklist.length-1}`);
|
|
|
- });
|
|
|
- } else if (socketMessage.cmd == 'red') {
|
|
|
- // 领红包
|
|
|
- this.$set(liveItem, 'redInfo', JSON.parse(socketMessage.data));
|
|
|
- console.log("红包是liveItem.redInfo", liveItem)
|
|
|
- // liveItem.redInfo = JSON.parse(message.data.data);
|
|
|
-
|
|
|
- } else if (socketMessage.cmd == 'sendRedPacketQuestion') {
|
|
|
- const list = JSON.parse(message.data.data);
|
|
|
- // 处理红包答题逻辑
|
|
|
- } else if (socketMessage.cmd == 'entry') {
|
|
|
- // console.log("进入:", liveItem);
|
|
|
- console.log("在线人数进入:");
|
|
|
- this.$set(liveItem, 'talklist', [...liveItem.talklist, messageData]);
|
|
|
- // 先重置为 false(避免残留状态)
|
|
|
- this.$set(liveItem, 'showWelcomeMessage', false);
|
|
|
- // 立即设为 true(触发 DOM 更新)
|
|
|
- this.$set(liveItem, 'showWelcomeMessage', true);
|
|
|
- this.getliveUser(false); // 调用获取在线用户接口
|
|
|
- console.log("开启欢迎消息:", liveItem.showWelcomeMessage);
|
|
|
- if (liveItem.welcomeTimer) {
|
|
|
- clearTimeout(liveItem.welcomeTimer);
|
|
|
- }
|
|
|
- // 存储定时器到 liveItem 中(避免引用丢失)
|
|
|
- liveItem.welcomeTimer = setTimeout(() => {
|
|
|
- this.$set(liveItem, 'showWelcomeMessage', false);
|
|
|
- console.log("关闭欢迎消息:", liveItem.showWelcomeMessage);
|
|
|
- }, 1000); // 1秒后隐藏
|
|
|
- } else if (socketMessage.cmd == 'live_start') {
|
|
|
- // 直播开始
|
|
|
- } else if (socketMessage.cmd == 'live_end') {
|
|
|
- // 直播结束
|
|
|
- } else if (socketMessage.data.cmd == 'deleteId') {
|
|
|
- uni.$emit('deleteId');
|
|
|
- } else if (socketMessage.data.cmd == 'sendRedPacketQuestion') {
|
|
|
- // const list = JSON.parse(socketMessage)
|
|
|
- // liveItem.redanswerAll = [...liveItem.redanswerAll, ...list]
|
|
|
- // if (liveItem.redanswerAll[1].randomAmount !== null) {
|
|
|
- // liveItem.redanswertips = JSON.parse(liveItem.redanswerAll[0]
|
|
|
- // .randomAmount)
|
|
|
- // }
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: data.msg,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- scheduleReconnect() {
|
|
|
- if (this.isManualClose || this.reconnectCount >= this.maxReconnectAttempts) return;
|
|
|
- this.reconnectCount++;
|
|
|
- const delay = Math.min(3000 * this.reconnectCount, 30000);
|
|
|
- clearInterval(this.reconnectTimer);
|
|
|
- this.reconnectTimer = setTimeout(() => {
|
|
|
- this.initSocket(this.list.find(item => item.liveId === liveId) || { liveId });
|
|
|
- }, delay);
|
|
|
- },
|
|
|
- sendMsg(liveItem) {
|
|
|
- if (!liveItem || !liveItem.liveId) return;
|
|
|
-
|
|
|
- // 防止连续点击发送两次(短时锁定)
|
|
|
- if (liveItem.isSending) return;
|
|
|
- liveItem.isSending = true;
|
|
|
- setTimeout(() => { liveItem.isSending = false; }, 800); // 800ms 内禁止再次发送
|
|
|
-
|
|
|
- const text = (liveItem.value || '').trim();
|
|
|
- if (!text) {
|
|
|
- uni.showToast({ title: "不能发送空消息", icon: 'none' });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const liveId = liveItem.liveId;
|
|
|
- const socketItem = this.socketInstances[liveId];
|
|
|
-
|
|
|
- // 乐观更新:立即把消息加入到本地聊天列表并清空输入(更好的体验)
|
|
|
- const localMsg = {
|
|
|
- cmd: 'sendMsg',
|
|
|
- msg: text,
|
|
|
- nickName: this.userinfo.nickName,
|
|
|
- avatar: this.userinfo.avatar,
|
|
|
- userId: this.userinfo.userId,
|
|
|
- local: true, // 标记为本地消息(可用于样式或后续差异处理)
|
|
|
- ts: Date.now()
|
|
|
- };
|
|
|
- this.$set(liveItem, 'talklist', [...(liveItem.talklist || []), localMsg]);
|
|
|
- this.$set(liveItem, 'value', ''); // 立即清空输入
|
|
|
-
|
|
|
- if (!socketItem || !socketItem.instance || !socketItem.isOpen) {
|
|
|
- // 如果 socket 未连接,尝试建立连接(但不要阻塞用户)
|
|
|
- this.initSocket(liveItem);
|
|
|
- uni.showToast({ title: "连接未建立,正在重连", icon: 'none' });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const data = {
|
|
|
- liveId,
|
|
|
- userId: this.userinfo.userId,
|
|
|
- userType: 0,
|
|
|
- cmd: "sendMsg",
|
|
|
- msg: text,
|
|
|
- nickName: this.userinfo.nickName,
|
|
|
- avatar: this.userinfo.avatar
|
|
|
- };
|
|
|
-
|
|
|
- try {
|
|
|
- socketItem.instance.send({
|
|
|
- data: JSON.stringify(data),
|
|
|
- success: () => {
|
|
|
- // 成功后可以移除 local 标记(可选)
|
|
|
- // 比如找到最后一条 local 消息并标记为 sent
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.error("发送失败:", err);
|
|
|
- uni.showToast({ title: "发送失败,请重试", icon: 'none' });
|
|
|
- // 可选择回滚本地显示(此处简单提示即可)
|
|
|
- }
|
|
|
- });
|
|
|
- } catch (err) {
|
|
|
- console.error('socket send 异常', err);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .swiper-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #000000;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-container {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- }
|
|
|
-
|
|
|
- .container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- // 添加渐变过渡效果
|
|
|
- transition: opacity 0.3s ease;
|
|
|
-
|
|
|
- &.active {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- // 非活动项半透明显示
|
|
|
- // &:not(.active) {
|
|
|
- // opacity: 0.7;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- .loading-tip {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .loading-text {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 28rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .loading-more,
|
|
|
- .no-more {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx 0;
|
|
|
- color: #999;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .loading-more {
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .preload-indicator {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 30rpx;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 100;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 50%;
|
|
|
- padding: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- /* button自带样式清除 */
|
|
|
- .student-orther-icon button::after {
|
|
|
- border: none !important;
|
|
|
- padding: 0 !important;
|
|
|
- margin: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .student-orther-icon button {
|
|
|
- background-color: transparent !important;
|
|
|
- padding: 0 !important;
|
|
|
- line-height: inherit !important;
|
|
|
- margin: 0 !important;
|
|
|
- width: auto !important;
|
|
|
- font-weight: 500 !important;
|
|
|
- border-radius: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- .welcome-message {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- bottom: 460rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- color: white;
|
|
|
- padding: 10px 20px;
|
|
|
- border-radius: 20px;
|
|
|
- // animation: fadeOut 1s ease 1s forwards;
|
|
|
- z-index: 1000;
|
|
|
- transition: opacity 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes fadeOut {
|
|
|
- from {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- to {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-.send{
|
|
|
- background-color: #4b4b4b;
|
|
|
- border-radius:28rpx;
|
|
|
- padding: 14rpx 16rpx;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
- // .container {
|
|
|
- // position: relative;
|
|
|
- // width: 100%;
|
|
|
- // height: 100vh;
|
|
|
- // overflow: hidden;
|
|
|
- // }
|
|
|
-
|
|
|
- // .talktext {
|
|
|
- // border-radius: 8rpx;
|
|
|
- // background-color: rgba(255, 255, 255, 0.1);
|
|
|
-
|
|
|
- // view {
|
|
|
- // width: 100%;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- .talk-list {
|
|
|
- border-radius: 30rpx;
|
|
|
- background-color: rgba(33, 33, 33, 0.5);
|
|
|
- padding: 10rpx 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- // .zoom-button-active {
|
|
|
- // transform: scale(1.5);
|
|
|
- // }
|
|
|
-
|
|
|
- // .background-image {
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // left: -40rpx;
|
|
|
- // width: 110%;
|
|
|
- // height: 110%;
|
|
|
- // object-fit: cover;
|
|
|
- // filter: blur(20px);
|
|
|
- // z-index: 0;
|
|
|
- // }
|
|
|
-
|
|
|
- // .background-images {
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // left: -40rpx;
|
|
|
- // width: 110%;
|
|
|
- // height: 110%;
|
|
|
- // object-fit: cover;
|
|
|
- // filter: blur(20px);
|
|
|
- // z-index: 6;
|
|
|
- // }
|
|
|
-
|
|
|
- // .blackbg {
|
|
|
- // position: absolute;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // width: 100%;
|
|
|
- // height: 100%;
|
|
|
- // background: rgba(0, 0, 0, 0.7);
|
|
|
- // object-fit: cover;
|
|
|
- // filter: blur(10px);
|
|
|
- // z-index: 1;
|
|
|
- // }
|
|
|
-
|
|
|
- .content {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .content-top {
|
|
|
- width: 100%;
|
|
|
- margin-top: 68rpx;
|
|
|
- display: flex;
|
|
|
- // align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .sum {
|
|
|
- width: 80rpx;
|
|
|
- height: 52rpx;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 52rpx;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .follow-btn {
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
|
|
|
- border-radius: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .videolist {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .video {
|
|
|
- height: 100vh;
|
|
|
- /* 占屏幕高度的80% */
|
|
|
- width: 100%;
|
|
|
- background-color: rgba(57, 57, 57, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .videotop {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .video_row {
|
|
|
- width: 100%;
|
|
|
- max-height: 500rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 360rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .popup-video {
|
|
|
- position: absolute;
|
|
|
- top: 30%;
|
|
|
- height: 500rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- color: #fff;
|
|
|
- z-index: 9;
|
|
|
-
|
|
|
- .more {
|
|
|
- background-color: #3280fe;
|
|
|
- border-radius: 80rpx;
|
|
|
- width: 280rpx;
|
|
|
- text-align: center;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon-bg {
|
|
|
- background-color: rgba(157, 157, 157, 0.8);
|
|
|
- border-radius: 50%;
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .list {
|
|
|
- width: 80%;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- animation: xxxawdawd .2s;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes xxxawdawd {
|
|
|
- from {
|
|
|
- margin-top: 0rpx;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- to {
|
|
|
- margin-top: 20rpx;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shop-prompt {
|
|
|
- position: absolute;
|
|
|
- bottom: 600rpx;
|
|
|
- left: 24rpx;
|
|
|
- padding: 6rpx 20rpx;
|
|
|
- background: rgba(230, 154, 34, 0.7);
|
|
|
- border-radius: 24rpx;
|
|
|
- z-index: 9;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- transition: opacity 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .siderow-group {
|
|
|
- position: absolute;
|
|
|
- top: 65%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 9;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .side-item {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- button {
|
|
|
- background-color: transparent;
|
|
|
- margin: 0;
|
|
|
- line-height: 1;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .side-group {
|
|
|
- position: absolute;
|
|
|
- // top: 30%;
|
|
|
- top: 65%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 9;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .side-item {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- button {
|
|
|
- background-color: transparent;
|
|
|
- margin: 0;
|
|
|
- line-height: 1;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .red-box {
|
|
|
- .button {
|
|
|
- margin: 0 auto;
|
|
|
- width: 80%;
|
|
|
- line-height: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
- background: linear-gradient(90deg, #FF5701 0%, #FFB501 100%);
|
|
|
- box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238, 124, 80, 0.2);
|
|
|
- border-radius: 44rpx 44rpx 44rpx 44rpx;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .view-box {
|
|
|
- position: relative;
|
|
|
- height: 40vh;
|
|
|
- /* 设置弹出层高度为视窗高度的70% */
|
|
|
- padding: 40rpx 0rpx 120rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .scroll-content {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 0 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(195, 195, 195, 0.3);
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shoppop {
|
|
|
- padding: 22rpx 16rpx;
|
|
|
-
|
|
|
- .shoppop-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 16rpx 22rpx;
|
|
|
-
|
|
|
- .search-input {
|
|
|
- width: 414rpx;
|
|
|
- height: 76rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 36rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- padding: 0 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-right: 24rpx;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .search-top {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .shop-list {
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .list-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx 16rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin-bottom: 16rpx;
|
|
|
-
|
|
|
- .goods-img {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- margin-right: 24rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .goods-label {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 64rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 16rpx 0rpx 16rpx 0rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .goods-right {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .goods-title {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #000000;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .goods-details {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- margin: 10rpx 0 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .goods-people {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #E69A22;
|
|
|
- height: 56rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .goods-shop {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .nummber {
|
|
|
- color: #FF5C03;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-group {
|
|
|
- text-align: center;
|
|
|
- line-height: 56rpx;
|
|
|
-
|
|
|
- .collect-btn {
|
|
|
- width: 72rpx;
|
|
|
- background: #F5F7FA;
|
|
|
- border-radius: 8rpx 0rpx 0rpx 8rpx;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .shop-btn {
|
|
|
- width: 152rpx;
|
|
|
- background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
|
|
|
- border-radius: 0rpx 8rpx 8rpx 0rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #FFFFFF;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.u-list-item) {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.u-safe-area-inset-bottom) {
|
|
|
- padding-bottom: 0
|
|
|
- }
|
|
|
-</style>
|