|
|
@@ -0,0 +1,2741 @@
|
|
|
+<template>
|
|
|
+ <view class="swiper-wrapper">
|
|
|
+ <view class="container">
|
|
|
+ <view class="content">
|
|
|
+ <view style="position: fixed;top: 0;z-index: 5;" class="content-top">
|
|
|
+ <view class="x-f">
|
|
|
+ <image v-if="!scene" @click="goBack" class="w60 h64 mr26" src="/static/images/return3.png" />
|
|
|
+ <view class="align-center"
|
|
|
+ style="padding: 6rpx 8rpx;height: 64rpx;background: rgba(0,0,0,0.5);border-radius: 32rpx;">
|
|
|
+ <u-avatar :src="liveItem.liveImgUrl||'/static/images/logo.png'" :size="32"></u-avatar>
|
|
|
+ <view class="colorf ml10 mr6">
|
|
|
+ <view>{{liveItem.liveName?truncateString(liveItem.liveName,8):"未命名"}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="Array.isArray(filteredViewers)" class=" align-center" @click="toggleViewerList"
|
|
|
+ style="margin-top: 120rpx;">
|
|
|
+ <image class="w52 h52 mr4" v-for="(item,viewerIndex) in filteredViewers" :key="viewerIndex"
|
|
|
+ style="border-radius: 26rpx;" :src="item.avatar||'/static/images/logo.png'" />
|
|
|
+ <view class="sum">{{liveUserTotal||0}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 右边的side -->
|
|
|
+ <view class="side-group">
|
|
|
+ <view class="side-item" @click="onLike">
|
|
|
+ <LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
|
+ <view>{{liveViewData && liveViewData.like||0}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="side-item">
|
|
|
+ <button open-type="share" class="button">
|
|
|
+ <image class="image" src="/static/images/wechat.png" mode="widthFix" />
|
|
|
+ </button>
|
|
|
+ <view>分享</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="activity-box">
|
|
|
+ <view class="item-box" @click="onRed()" v-if="isShowRed">
|
|
|
+ <view class="x-f">
|
|
|
+ <view class="tip">领红包</view>
|
|
|
+ <view class="item">
|
|
|
+ <image class="w70 img" src="/static/images/redbag.png" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-box" @click="onLottery()" v-if="isShowLottery">
|
|
|
+ <view class="x-f">
|
|
|
+ <view class="tip">抽奖</view>
|
|
|
+ <view class="item">
|
|
|
+ <image class="w60" src="/static/images/lottery.png" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="shop-prompt f30 x-f"
|
|
|
+ v-if="showPurchasePrompt&&orderUser&&orderUser.count&&liveItem.status==2">
|
|
|
+ <image class="w32 h32 mr8" src="/static/images/shopping.png" />
|
|
|
+ <text>{{ orderUser.count || 0 }}人正在去购买</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="videolist" v-if="liveItem.status==2">
|
|
|
+ <view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
|
|
|
+ <!-- 视频组件 -->
|
|
|
+ <live-player v-if="liveItem.livingUrl && liveItem.liveType == 1" :id="'myLivePlayer_' + liveId"
|
|
|
+ :src="liveItem.livingUrl" autoplay mode="live" object-fit="contain" :muted="false"
|
|
|
+ orientation="vertical" :enable-play-gesture="true" min-cache="1" max-cache="3"
|
|
|
+ @statechange="onLiveStateChange($event, liveItem)" @error="onLiveError($event, liveItem)"
|
|
|
+ class="item"></live-player>
|
|
|
+ <!-- 录播 -->
|
|
|
+ <video v-if="liveItem.videoUrl&&liveItem.liveType==2" :id="`myVideo_${liveId}`" class="item"
|
|
|
+ :src="liveItem.videoUrl" :autoplay="true" :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"
|
|
|
+ @timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
|
|
|
+ @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay">
|
|
|
+ </video>
|
|
|
+
|
|
|
+ <!-- 直播回放 -->
|
|
|
+ <!-- :enable-progress-gesture="true" -->
|
|
|
+ <video v-if="liveItem.videoUrl&&liveItem.liveType==3" :id="`myVideo_${liveId}`" class="item"
|
|
|
+ :src="liveItem.videoUrl" :autoplay="true" :controls="true" object-fit="contain"
|
|
|
+ :custom-cache="false" :enable-progress-gesture="liveItem.isSpeedAllowed"
|
|
|
+ vslide-gesture-in-fullscreen="true" :show-center-play-btn="true" :http-cache="false" loop
|
|
|
+ @error="videoError" @timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
|
|
|
+ @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay"
|
|
|
+ @seek="onVideoSeek">
|
|
|
+ </video>
|
|
|
+ <view v-if="liveItem.videoUrl&&liveItem.liveType==2" class="time">{{liveItem.totalTime}}</view>
|
|
|
+ <view v-if="liveItem.videoUrl&&liveItem.liveType==3" class="lable">直播回放</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="trailer-box">
|
|
|
+
|
|
|
+ <!-- <video v-if="liveItem.videoUrl&&liveItem.liveType==1" :id="`myVideo_${liveId}`" class="item"
|
|
|
+ :src="liveItem.videoUrl" :autoplay="true" :controls="true" object-fit="contain"
|
|
|
+ :custom-cache="false" :enable-progress-gesture="liveItem.isSpeedAllowed"
|
|
|
+ vslide-gesture-in-fullscreen="true" :show-center-play-btn="true" :http-cache="false" loop
|
|
|
+ @error="videoError" @timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
|
|
|
+ @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay"
|
|
|
+ @seek="onVideoSeek">
|
|
|
+ </video> -->
|
|
|
+ <video v-if="liveItem.status==1" :id="`myVideo_${liveId}`" class="item" :src="liveItem.previewUrl"
|
|
|
+ :autoplay="true" :controls="false" object-fit="contain" :custom-cache="false"
|
|
|
+ :enable-progress-gesture="false" vslide-gesture-in-fullscreen="false"
|
|
|
+ :show-center-play-btn="false" :http-cache="false" loop @error="videoError"
|
|
|
+ @loadeddata="onVideoLoaded" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
|
|
|
+ @play="onVideoPlay" :disable-progress="true">
|
|
|
+ </video>
|
|
|
+
|
|
|
+ <image v-if="liveItem.status==1" class="img" src="/static/images/no_live.png">
|
|
|
+ </image>
|
|
|
+ <view class="countdown-item mt30 mb30">
|
|
|
+ 开播倒计时
|
|
|
+ <view class="x-f">
|
|
|
+ <view class="white">
|
|
|
+ {{liveCountdown.hours||"00"}}
|
|
|
+ </view>
|
|
|
+ <view class="white">
|
|
|
+ {{ liveCountdown.minutes||"00"}}
|
|
|
+ </view>
|
|
|
+ <view class="white">
|
|
|
+ {{ liveCountdown.seconds||"00" }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="name"> {{liveItem.liveName}}</view>
|
|
|
+ <view class="title"> 暂未开播</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部聊天区域 -->
|
|
|
+ <view :style="{position: 'fixed',width: '100%',bottom: chatHeight + 'rpx',zIndex:999}">
|
|
|
+ <!-- height: 30vh; -->
|
|
|
+ <view class="mt20" :style="{ height: chatHeight ? '64rpx' : '30vh' }">
|
|
|
+ <scroll-view v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
|
|
|
+ class=" pl20 scrolly flex-1 column" style="width: calc(100% - 20rpx); height: 100%;"
|
|
|
+ :scroll-into-view="scrollIntoView">
|
|
|
+
|
|
|
+ <view class="list justify-start" v-for="(item,talkIndex) in (talklist||[])" :key="talkIndex"
|
|
|
+ :id="`list_${talkIndex}`" v-show="item.cmd!='red'&&item.cmd!='out'&&item.cmd!='entry'">
|
|
|
+ <view class="talk-list justify-start">
|
|
|
+ <view class="fs30">
|
|
|
+ <text style="color: #FFDA73;">{{item.nickName||"未命名"}}:</text>
|
|
|
+ <text class='colorf'>{{item.msg}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showWelcomeMessage" class="welcome-message">
|
|
|
+ <view class="list justify-start" v-show="inAndOut.cmd=='entry'||inAndOut.cmd=='out'">
|
|
|
+ <view class="talk-list justify-start">
|
|
|
+ <view class="fs30">
|
|
|
+ <text style="color: #ff89d6;">{{inAndOut.nickName||"未命名"}} </text>
|
|
|
+ <text class='colorf'>
|
|
|
+ {{inAndOut.msg}}直播间</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部输入框和操作按钮 -->
|
|
|
+ <view class="justify-between p24 ">
|
|
|
+ <view class="x-f w580"
|
|
|
+ style="background:rgba(57, 57, 57, 1);padding:10rpx 14rpx 10rpx 32rpx;box-sizing:border-box;border-radius:36rpx;">
|
|
|
+ <u-input :placeholder="placeholderText" border="none" customStyle='font-size:24rpx;'
|
|
|
+ v-model="value" shape='circle' color='#fff' placeholderStyle='color:#e7e7e7'
|
|
|
+ :adjust-position="false" :scroll-with-animation="false" class="ml20" @focus="inputFocus"
|
|
|
+ @blur="inputBlur">
|
|
|
+ </u-input>
|
|
|
+ <view class="send" @click="sendMsg()">发送</view>
|
|
|
+ </view>
|
|
|
+ <view class="justify-between mr15 align-center">
|
|
|
+ <view class="icon-bg ml20" @click="openCart()">
|
|
|
+ <image src="/static/images/shopping.png" class="w58 h58" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="goods" v-if="isShowGoods">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ <image class="w30 h30 mr8" src="/static/images/signal.png" />讲解中
|
|
|
+ </view>
|
|
|
+ <image @click="isShowGoods=false" class="w40 h40 " src="/static/images/del2.png" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <image class="photo" :src="goodsCard.imgUrl" />
|
|
|
+ <view class="item">
|
|
|
+ <view class="price"><text class="red">¥{{goodsCard.price}} </text><text
|
|
|
+ class="del">¥{{goodsCard.otPrice}}</text></view>
|
|
|
+ <view class="title oneline-hide">{{goodsCard.productName}}</view>
|
|
|
+ <view class="button" @click="goShop(goodsCard.productId,goodsCard.goodsId)">
|
|
|
+ 立即抢购
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup :show="isShowLotteryPop" round='40rpx'>
|
|
|
+ <view class="prize-box" style="border-radius: 40rpx;height: fit-content;">
|
|
|
+ <image class="nav-img " src="/static/images/red_head.png" mode="widthFix" />
|
|
|
+ <image class="bg-img " src="/static/images/red_bg.png" />
|
|
|
+ <view class="prize-content">
|
|
|
+ <view class=" mr20">
|
|
|
+ <u-icon class="x-end" name="close" color="#fff" size="20"
|
|
|
+ @click="isShowLotteryPop=false"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="column align-center ">
|
|
|
+ <image class="w446 h80" src="/static/images/red_title.png" />
|
|
|
+ <view class="fs24 colorf x-f mt30 mb30">
|
|
|
+ 开奖倒计时
|
|
|
+ <view class="x-f">
|
|
|
+ <view class="white-item">
|
|
|
+ {{countdown.hours||"00"}}
|
|
|
+ </view>
|
|
|
+ <view class="white-item">
|
|
|
+ {{ countdown.minutes||"00" }}
|
|
|
+ </view>
|
|
|
+ <view class="white-item">
|
|
|
+ {{ countdown.seconds||"00" }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-group">
|
|
|
+ <ThreeItemSwiper :products="lotteryProducts"></ThreeItemSwiper>
|
|
|
+ </view>
|
|
|
+ <view class="point-group" v-for="(item,index) in lotteryProducts" :key="index">
|
|
|
+ </view>
|
|
|
+ <view class="colorf fs28">
|
|
|
+ 观看直播参与抽奖
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="onClaim">参与抽奖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-popup :show="!!integral.status" round='20rpx' mode="center" bgColor='#ffffff' zIndex='10076'>
|
|
|
+ <view class="integral-box">
|
|
|
+ <view class="top">
|
|
|
+ <view class="title">观看视频领芳华币</view>
|
|
|
+ <image class="photo" src="/static/images/integral_bg.png" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title ">{{integral.msg}}</view>
|
|
|
+ <view class="button" @click="integral.status=false">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-popup :show="isShowRedCard" round='20rpx' mode="center" bgColor='transparent' zIndex='10076'>
|
|
|
+ <view class="red-card">
|
|
|
+ <image class="img" src="/static/images/red_card.png" />
|
|
|
+ <view class="red-content">
|
|
|
+ <view class="title">{{redCard.msg}}</view>
|
|
|
+ <view class="txt ">直播惊喜芳华币</view>
|
|
|
+ <view class="button" @click="isShowRedCard=false">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-popup :show="isShowPrize" round='20rpx' mode="center" bgColor='#fff' zIndex='10076'>
|
|
|
+ <view class="prize-card">
|
|
|
+ <image class="nav-img " src="/static/images/red_head.png" mode="widthFix" />
|
|
|
+ <view class="title">{{prizeInfo.length}}位幸运观众</view>
|
|
|
+ <view class="prize-content" v-for="(item,index) in (prizeInfo||[])" :key="index">
|
|
|
+ <view>{{item.userName}}</view>
|
|
|
+ <view>{{item.userId}}</view>
|
|
|
+ <view class="txt">{{item.prizeLevel}}等奖</view>
|
|
|
+ </view>
|
|
|
+ <view class="tip">请联系管理员领取</view>
|
|
|
+ <view class="button" @click="isShowPrize=false">确认</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <!-- 观众列表弹窗 -->
|
|
|
+ <u-popup :show="showadd" @close="close" @open="openViews" round='20rpx' bgColor='#ffffff' zIndex='10077'>
|
|
|
+ <view class="view-box">
|
|
|
+ <view class="fs32" style="text-align: center;">在线观众</view>
|
|
|
+ <scroll-view v-if="Array.isArray(liveViewers)" scroll-y class="scroll-content"
|
|
|
+ :style="{height: scrollHeight + 'px'}" @scrolltolower="handleScrollToLower">
|
|
|
+ <view class="fs28 x-f mb20 mt20" 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||'/static/images/logo.png'" :size="36"></u-avatar>
|
|
|
+ <text class="ml16 f30">{{item.nickName||"未命名"}}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 商品弹窗 -->
|
|
|
+ <u-popup :show="shopping" @close="closeShop" round='20rpx' bgColor='#f3f5f9' zIndex='10075'>
|
|
|
+ <view class="shoppop">
|
|
|
+ <view class="shoppop-top">
|
|
|
+ <view class="search-input x-f">
|
|
|
+ <image class="w24 mr16" src="/static/images/search.png" mode="widthFix" />
|
|
|
+ <input placeholder="请搜索商品" v-model="inputInfo" @input="handleSearchInput" />
|
|
|
+ </view>
|
|
|
+ <view class=" search-top" @click="goOrderList()">
|
|
|
+ <image class="w48 h48" src="/static/images/order.png" />
|
|
|
+ <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 class="img" :src="item.imgUrl" mode="widthFix" />
|
|
|
+ <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 x-f">
|
|
|
+ <view class="collect-btn">
|
|
|
+ <image v-if="item.isFavorite" @click="onGoodsCollect(item)"
|
|
|
+ class="w36 h36 mt10" src="/static/images/collect_select.png" />
|
|
|
+ <image v-else @click="onGoodsCollect(item)" class="w36 h36 mt10"
|
|
|
+ src="/static/images/collect.png" />
|
|
|
+ </view>
|
|
|
+ <view v-if="item.status==1" class="shop-btn"
|
|
|
+ @click="goShop(item.productId,item.goodsId)">去购买 </view>
|
|
|
+ <view v-else-if="item.status==0" class="shop-btn">
|
|
|
+ 已下架</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import LikeButton from '@/pages_course/components/like.vue'
|
|
|
+ import ThreeItemSwiper from '@/pages_course/components/ThreeItemSwiper.vue'
|
|
|
+ import CryptoJS from 'crypto-js'
|
|
|
+ import {
|
|
|
+ liveLottery, // 抽奖查询
|
|
|
+ claim, //抽奖
|
|
|
+
|
|
|
+ liveRed, // 点击领红包
|
|
|
+ liveDataLike, // 点赞
|
|
|
+ collectStore, // 店铺收藏/取消收藏
|
|
|
+ collectGoods, // 商品收藏/取消收藏
|
|
|
+ // store, // 查询店铺
|
|
|
+ // follow, // 关注/取消关注
|
|
|
+ watchUserList, //获取直播间用户(展示在线用户)
|
|
|
+ liveMsg, //获取最近聊天记录
|
|
|
+ // 小黄车
|
|
|
+ liveStore, //店铺展示,
|
|
|
+ liveOrderUser, //正在购买
|
|
|
+ getLiveInfo, //获取直播间信息接口
|
|
|
+ getLiveViewData, //直播间点赞、关注、在线人数数据
|
|
|
+ currentActivities, //红包 卡片 抽奖
|
|
|
+ getlive
|
|
|
+ } from '@/api/living.js'
|
|
|
+
|
|
|
+
|
|
|
+ // var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
|
|
|
+ var pingpangTimes = null;
|
|
|
+ var initTimes = null;
|
|
|
+ var isSocketOpen = false;
|
|
|
+ var socket = null;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ ThreeItemSwiper,
|
|
|
+ LikeButton
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ socket: null, // WebSocket 实例
|
|
|
+ isSocketOpen: false, // 连接是否已打开
|
|
|
+ heartBeatTimer: null, // 心跳定时器
|
|
|
+ heartBeatInterval: 15000, // 心跳发送间隔(15秒)
|
|
|
+ reconnectTimer: null, // 重连定时器
|
|
|
+ reconnectCount: 0, // 当前重连次数
|
|
|
+ maxReconnectAttempts: 3, // 最大重连次数
|
|
|
+ isManualClose: false, // 是否手动关闭(用于区分主动关闭和异常断开)
|
|
|
+ pingTimeout: 10000, // 心跳响应超时时间(10秒)
|
|
|
+ pingTimeoutTimer: null, // 心跳超时定时器
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // wsNewUrl: 'ws://192.168.10.126:7014/app/webSocket',
|
|
|
+ wsNewUrl: 'wss://api.fhhx.runtzh.com/app/webSocket',
|
|
|
+ // wsNewUrl:'ws://192.168.10.166:7014/app/webSocket',
|
|
|
+ qrFrom: null,
|
|
|
+ scene: '',
|
|
|
+
|
|
|
+ liveCountdown: {},
|
|
|
+ countdown: {},
|
|
|
+
|
|
|
+ liveViewData: {},
|
|
|
+
|
|
|
+ chatHeight: 0,
|
|
|
+
|
|
|
+ keyboardHeight: 0,
|
|
|
+ // inputHeight: null,
|
|
|
+ videoCurrentTime: 0, // 当前视频播放时间
|
|
|
+ isVideoPlaying: false, // 视频是否正在播放
|
|
|
+ videoProgressKey: '', // 存储进度的key
|
|
|
+ inAndOut: {},
|
|
|
+
|
|
|
+ isShowPrize: false,
|
|
|
+ prizeInfo: [],
|
|
|
+ timeData: {},
|
|
|
+ countDownKey: 0,
|
|
|
+ lotteryProducts: [],
|
|
|
+ lotteryList: [],
|
|
|
+ talklist: [],
|
|
|
+ isShowLotteryPop: false,
|
|
|
+ liveItem: {},
|
|
|
+ isSending: false,
|
|
|
+
|
|
|
+ welcomeTimer: null,
|
|
|
+ redTimer: null,
|
|
|
+ lotteryTimer: null,
|
|
|
+
|
|
|
+ isShowLottery: false,
|
|
|
+ isShowRedCard: false,
|
|
|
+ redCard: null, //点击红包出现弹窗
|
|
|
+ integral: {},
|
|
|
+ lotteryInfo: {},
|
|
|
+ goodsCard: {},
|
|
|
+ redInfo: {},
|
|
|
+ storeId: null,
|
|
|
+ isFocus: false,
|
|
|
+ shopping: false,
|
|
|
+
|
|
|
+ inputInfo: '',
|
|
|
+ showWelcomeMessage: false,
|
|
|
+ scrollIntoView: '',
|
|
|
+
|
|
|
+ isShowGoods: false,
|
|
|
+ isShowRed: false,
|
|
|
+
|
|
|
+ lastClickTime: 0,
|
|
|
+ clickDelay: 300, // 300ms内只响应一次点击
|
|
|
+
|
|
|
+ videoRetryCounts: {}, // 记录每个直播间的视频重试次数,格式: { liveId: 次数 }
|
|
|
+
|
|
|
+ placeholderText: '说点什么...',
|
|
|
+
|
|
|
+ liveUserTotal: null,
|
|
|
+ viewPageSize: 10, // 每页数量
|
|
|
+ viewPageNum: 1, // 当前页码
|
|
|
+ viewLoading: false, // 是否正在加载
|
|
|
+ scrollHeight: 0,
|
|
|
+ scrollTimer: null, // 滚动防抖定时器
|
|
|
+
|
|
|
+
|
|
|
+ socketInstance: null, // 统一管理 socket 实例
|
|
|
+ maxReconnectAttempts: 3,
|
|
|
+ isManualClose: false, // 标记是否手动关闭
|
|
|
+
|
|
|
+ showRed: true,
|
|
|
+ searchTimer: null,
|
|
|
+ reconnectTimer: null,
|
|
|
+ isCollect: false,
|
|
|
+ showPurchasePrompt: false,
|
|
|
+ purchasePromptTimer: null,
|
|
|
+ prevOrderCount: 0, // 用于记录上一次的购买人数
|
|
|
+ videoUrl: null,
|
|
|
+ showType: 1, //横屏1 竖屏2
|
|
|
+ boxHeight: 300, //小黄车高度
|
|
|
+ liveViewers: [], //观众
|
|
|
+ likeName: 0,
|
|
|
+ hlsPlayer: null, // HLS播放器实例,
|
|
|
+ livingUrl: "",
|
|
|
+ products: [],
|
|
|
+ store: {},
|
|
|
+ orderUser: {}, //正在购买
|
|
|
+ userType: 0,
|
|
|
+ timestamp: '',
|
|
|
+ liveId: null,
|
|
|
+ userinfo: '', //用户信息
|
|
|
+ // path: 'http://192.168.10.166/dev-api', //余红奇
|
|
|
+ // path: 'http://v56c9b8e.natappfree.cc', //余红奇
|
|
|
+ // path: 'live.test.ylrztop.com/prod-api', //余红奇
|
|
|
+ value: '',
|
|
|
+ talkdisabled: false, //输入框是否禁用
|
|
|
+ autoplay: false, //视频自动播放
|
|
|
+ showadd: false,
|
|
|
+ videoContext: '',
|
|
|
+ livedata: {}, //直播间点赞、关注、在线人数数据
|
|
|
+ userData: {}
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ onLoad(options) {
|
|
|
+ console.log("全部参数", options)
|
|
|
+ //获取键盘高度
|
|
|
+ this.keyboardListener = uni.onKeyboardHeightChange(res => {
|
|
|
+ console.log('键盘高度', res.height);
|
|
|
+ this.keyboardHeight = res.height * 2;
|
|
|
+ });
|
|
|
+ this.initTime();
|
|
|
+
|
|
|
+ if (options.liveId) {
|
|
|
+ this.liveId = options.liveId; // 仅当 liveId 变化时更新
|
|
|
+ console.log("option.liveId", options.liveId)
|
|
|
+ }
|
|
|
+ // 扫码传来的参数
|
|
|
+ if (options.scene) {
|
|
|
+ this.scene = options.scene;
|
|
|
+ const decodedScene = decodeURIComponent(this.scene);
|
|
|
+ const params = {};
|
|
|
+ decodedScene.split('&').forEach(item => {
|
|
|
+ const [key, value] = item.split('=');
|
|
|
+ params[key] = value;
|
|
|
+ this.liveId = params.a;
|
|
|
+ })
|
|
|
+
|
|
|
+ if (params.b && params.c) {
|
|
|
+ this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (options.companyId && options.companyUserId) {
|
|
|
+ this.qrFrom = `&companyId=${options.companyId}&companyUserId=${options.companyUserId}`;
|
|
|
+ console.log("这个", this.qrFrom)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.userinfo = JSON.parse(uni.getStorageSync("userInfo"))
|
|
|
+ this.userData = uni.getStorageSync("userData")
|
|
|
+ // 初始化直播间列表
|
|
|
+ this.getliving(this.liveId);
|
|
|
+ this.initSocket();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.startTimeTimer(this.liveItem);
|
|
|
+ this.setVideoCurrentTime(this.liveItem.totalTime);
|
|
|
+
|
|
|
+ // 新增:页面显示时,若连接未打开则重新初始化
|
|
|
+ if (!this.isSocketAvailable()) {
|
|
|
+ this.initSocket();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //分享给好友
|
|
|
+ onShareAppMessage() {
|
|
|
+ return {
|
|
|
+ title: '邀请你来观看直播:' + this.liveItem.liveName,
|
|
|
+ path: '/pages_course/living?companyId=-2&companyUserId=' + this.userinfo.userId + '&liveId=' + this.liveId,
|
|
|
+ imageUrl: '/static/images/logo.png',
|
|
|
+ success(res) {
|
|
|
+ console.log("分享成功", res);
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.error("分享失败", err);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ filteredViewers() {
|
|
|
+ // 1. 强制兜底:若 liveViewers 不是数组(如 null/undefined),直接返回空数组
|
|
|
+ const safeLiveViewers = Array.isArray(this.liveViewers) ? this.liveViewers : [];
|
|
|
+ // 2. 截取前3项(空数组 slice 不会报错)
|
|
|
+ return safeLiveViewers.slice(0, 3);
|
|
|
+ }
|
|
|
+ // payLimitTime() {
|
|
|
+ // return this.order?.updateTime ?
|
|
|
+ // dayjs(this.order.updateTime).add(2, 'day').format('YYYY-MM-DD HH:mm:ss') :
|
|
|
+ // '';
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.saveVideoProgress();
|
|
|
+ this.stopHeartBeat();
|
|
|
+ // 页面隐藏时保存视频进度
|
|
|
+ this.saveVideoProgress();
|
|
|
+ // this.closeWebSocket(false); // 页面隐藏时非手动关闭(可按需改为true)
|
|
|
+ const currentLive = this.liveItem;
|
|
|
+ if (currentLive) {
|
|
|
+ this.pauseVideo(currentLive);
|
|
|
+ this.clearTimeTimer(currentLive); // 隐藏时清除当前直播间定时器
|
|
|
+ } // 隐藏时关闭所有连接
|
|
|
+ this.closeAllWebSockets();
|
|
|
+
|
|
|
+ // 抽奖
|
|
|
+ if (this.lotteryList) {
|
|
|
+ this.clearTimeTimer(this.lotteryList)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.getCurrentActivities();
|
|
|
+ this.getliveOrder()
|
|
|
+
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ if (this.socket) {
|
|
|
+ this.socket.close({
|
|
|
+ code: 1000,
|
|
|
+ reason: "页面卸载"
|
|
|
+ });
|
|
|
+ this.socket = null;
|
|
|
+ }
|
|
|
+ this.closeWebSocket(true); // 页面卸载时手动关闭,不触发重连
|
|
|
+ // 页面卸载时保存视频进度
|
|
|
+ this.saveVideoProgress();
|
|
|
+
|
|
|
+ // 清除定时器
|
|
|
+ if (this.redTimer) {
|
|
|
+ clearInterval(this.redTimer);
|
|
|
+ this.redTimer = null;
|
|
|
+ }
|
|
|
+ if (this.lotteryTimer) {
|
|
|
+ clearInterval(this.lotteryTimer);
|
|
|
+ this.lotteryTimer = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.lotteryTime = 0; // 重置时间
|
|
|
+ if (this.welcomeTimer) {
|
|
|
+ clearInterval(this.welcomeTimer);
|
|
|
+ this.welcomeTimer = null;
|
|
|
+ }
|
|
|
+ // 移除所有全局事件监听
|
|
|
+ this.removeAllEventListeners();
|
|
|
+
|
|
|
+ // 清理定时器
|
|
|
+ this.clearAllTimers();
|
|
|
+ // 移除所有全局事件监听
|
|
|
+ this.removeAllEventListeners();
|
|
|
+
|
|
|
+ // 清理定时器
|
|
|
+ this.clearAllTimers();
|
|
|
+ // 暂停视频
|
|
|
+ const videoId = `myVideo_${this.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: {
|
|
|
+ sendHeartBeat() {
|
|
|
+ if (!this.isSocketAvailable()) return; // 替换原校验逻辑
|
|
|
+ try {
|
|
|
+ // 心跳包内容(根据服务端协议调整,此处为示例)
|
|
|
+ const heartBeatMsg = JSON.stringify({
|
|
|
+ cmd: "heartbeat",
|
|
|
+ msg: "ping",
|
|
|
+ userId: this.userinfo?.userId,
|
|
|
+ liveId: this.liveId
|
|
|
+ // timestamp: Date.now()
|
|
|
+ });
|
|
|
+ this.socket.send({
|
|
|
+ data: heartBeatMsg,
|
|
|
+ success: () => {
|
|
|
+ console.log("心跳包发送成功");
|
|
|
+ // 发送心跳后启动超时检测
|
|
|
+ this.startPingTimeout();
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error("心跳包发送失败:", err);
|
|
|
+ // 心跳发送失败,触发重连
|
|
|
+ this.handleReconnect();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } catch (err) {
|
|
|
+ console.error("心跳发送异常:", err);
|
|
|
+ this.handleReconnect();
|
|
|
+ }
|
|
|
+ }, // 启动心跳超时检测
|
|
|
+ startPingTimeout() {
|
|
|
+ // 清除之前的超时定时器
|
|
|
+ if (this.pingTimeoutTimer) {
|
|
|
+ clearTimeout(this.pingTimeoutTimer);
|
|
|
+ this.pingTimeoutTimer = null;
|
|
|
+ }
|
|
|
+ // 超时后触发重连
|
|
|
+ this.pingTimeoutTimer = setTimeout(() => {
|
|
|
+ console.error("心跳响应超时,连接异常");
|
|
|
+ this.handleReconnect();
|
|
|
+ }, this.pingTimeout);
|
|
|
+ },
|
|
|
+ stopHeartBeat() {
|
|
|
+ if (this.heartBeatTimer) {
|
|
|
+ clearInterval(this.heartBeatTimer);
|
|
|
+ this.heartBeatTimer = null;
|
|
|
+ }
|
|
|
+ if (this.pingTimeoutTimer) {
|
|
|
+ clearTimeout(this.pingTimeoutTimer);
|
|
|
+ this.pingTimeoutTimer = null;
|
|
|
+ }
|
|
|
+ }, // 封装通用的连接状态校验方法
|
|
|
+ isSocketAvailable() {
|
|
|
+ // WebSocket readyState:0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED
|
|
|
+ return this.socket && this.isSocketOpen && this.socket.readyState === 1;
|
|
|
+ },
|
|
|
+ // 处理重连逻辑
|
|
|
+ handleReconnect() {
|
|
|
+ if (this.isManualClose || this.reconnectCount >= this.maxReconnectAttempts) {
|
|
|
+ console.log(`停止重连(手动关闭/已达最大次数)`);
|
|
|
+ this.resetReconnectState();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.closeWebSocket(false);
|
|
|
+ this.stopHeartBeat();
|
|
|
+ this.reconnectCount++;
|
|
|
+
|
|
|
+ // 优化:固定短延迟(如1秒),而非指数退避(避免延迟过长)
|
|
|
+ const delay = 1000;
|
|
|
+ console.log(`第${this.reconnectCount}次重连,延迟${delay}ms`);
|
|
|
+
|
|
|
+ this.reconnectTimer = setTimeout(() => {
|
|
|
+ this.initSocket();
|
|
|
+ }, delay);
|
|
|
+ },
|
|
|
+ // 重置重连状态
|
|
|
+ resetReconnectState() {
|
|
|
+ this.reconnectCount = 0;
|
|
|
+ if (this.reconnectTimer) {
|
|
|
+ clearTimeout(this.reconnectTimer);
|
|
|
+ this.reconnectTimer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //输入框
|
|
|
+ inputFocus() {
|
|
|
+ this.chatHeight = this.keyboardHeight;
|
|
|
+ this.isFocus = true;
|
|
|
+ },
|
|
|
+ inputBlur() {
|
|
|
+ this.chatHeight = 0;
|
|
|
+ this.isFocus = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // resetCountdown() {
|
|
|
+ // // 先停止
|
|
|
+ // this.$refs.countDownRef && this.$refs.countDownRef.stop();
|
|
|
+
|
|
|
+ // // 重新设置时间并启动
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.countDownRef && this.$refs.countDownRef.start();
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // 录播时间点
|
|
|
+ onVideoMetaLoaded(e) {
|
|
|
+ // 设置存储key
|
|
|
+ this.videoProgressKey = `videoProgress_${this.liveId}`;
|
|
|
+
|
|
|
+ // 尝试从存储中获取保存的播放进度
|
|
|
+ uni.getStorage({
|
|
|
+ key: this.videoProgressKey,
|
|
|
+ success: (res) => {
|
|
|
+ this.videoCurrentTime = res.data;
|
|
|
+
|
|
|
+ // 设置视频播放位置
|
|
|
+ this.setVideoCurrentTime(this.videoCurrentTime);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log('没有找到保存的播放进度或获取失败', err);
|
|
|
+ this.videoCurrentTime = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频数据加载完成
|
|
|
+ onVideoLoaded(e) {
|
|
|
+ console.log('视频数据加载完成');
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频时间更新
|
|
|
+ onVideoTimeUpdate(e) {
|
|
|
+ // 获取当前播放时间
|
|
|
+ this.videoCurrentTime = e.detail.currentTime;
|
|
|
+
|
|
|
+ // 每隔5秒保存一次进度(避免频繁存储)
|
|
|
+ if (Math.floor(this.videoCurrentTime) % 5 === 0) {
|
|
|
+ this.saveVideoProgress();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频暂停
|
|
|
+ onVideoPause(e) {
|
|
|
+ this.isVideoPlaying = false;
|
|
|
+ // 暂停时保存进度
|
|
|
+ this.saveVideoProgress();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 视频播放
|
|
|
+ onVideoPlay(e) {
|
|
|
+ this.isVideoPlaying = true;
|
|
|
+ },
|
|
|
+ // 设置视频当前时间
|
|
|
+ setVideoCurrentTime(time) {
|
|
|
+ const videoId = `myVideo_${this.liveId}`;
|
|
|
+ const videoContext = uni.createVideoContext(videoId, this);
|
|
|
+
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.seek(time);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存视频进度
|
|
|
+ saveVideoProgress() {
|
|
|
+ if (this.videoProgressKey) {
|
|
|
+ uni.setStorage({
|
|
|
+ key: this.videoProgressKey,
|
|
|
+ data: this.videoCurrentTime,
|
|
|
+ success: () => {},
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('保存视频进度失败:', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 参与抽奖
|
|
|
+ onClaim() {
|
|
|
+ let data = {
|
|
|
+ liveId: this.liveId,
|
|
|
+ lotteryId: this.lotteryInfo.lotteryId,
|
|
|
+ }
|
|
|
+
|
|
|
+ claim(data).then(res => {
|
|
|
+
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.isShowLotteryPop = false
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 点击抽奖图标
|
|
|
+ // onLottery() {
|
|
|
+ // if (!this.lotteryInfo) return;
|
|
|
+
|
|
|
+ // let data = {
|
|
|
+ // lotteryId: this.lotteryInfo.lotteryId
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 抽奖查询
|
|
|
+ // liveLottery(data).then(res => {
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // this.lotteryList = Array.isArray(res.data) ? res.data : []; // 额外补全lotteryList的校验
|
|
|
+ // this.lotteryProducts = Array.isArray(res.data.products) ? res.data.products : [];
|
|
|
+
|
|
|
+ // if (res.data.duration) {
|
|
|
+ // this.isShowLotteryPop = true
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: res.msg,
|
|
|
+ // icon: 'none'
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // rej => {}
|
|
|
+ // );
|
|
|
+ // },
|
|
|
+ onLottery() {
|
|
|
+ if (!this.lotteryInfo) return;
|
|
|
+
|
|
|
+ let data = {
|
|
|
+ lotteryId: this.lotteryInfo.lotteryId
|
|
|
+ };
|
|
|
+
|
|
|
+ liveLottery(data)
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ const resData = res.data || {}; // 兜底 res.data 为对象,避免访问 res.data.products 报错
|
|
|
+ this.lotteryList = Array.isArray(resData) ? resData : [];
|
|
|
+ // 兜底 products 为数组
|
|
|
+ this.lotteryProducts = Array.isArray(resData.products) ? resData.products : [];
|
|
|
+ if (resData.duration) {
|
|
|
+ this.isShowLotteryPop = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ // 非 200 状态时兜底
|
|
|
+ this.lotteryList = [];
|
|
|
+ this.lotteryProducts = [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(rej => { // 捕获接口请求失败(如网络错误)
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取抽奖信息失败',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ // 失败时强制重置为数组
|
|
|
+ this.lotteryList = [];
|
|
|
+ this.lotteryProducts = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 商品收藏
|
|
|
+ onGoodsCollect(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 => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ //正在购买
|
|
|
+ getliveOrder(item) {
|
|
|
+ if (!this.liveId) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ liveOrderUser(this.liveId).then(res => {
|
|
|
+ console.log("正在购买", res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.orderUser = res;
|
|
|
+ } else {
|
|
|
+ console.log('获取正在购买用户失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ onLiveStateChange(e, liveItem) {
|
|
|
+ // console.log('直播状态变化:', e.detail.code, e.detail);
|
|
|
+ // 可以根据状态码处理不同的直播状态
|
|
|
+ const stateCode = e.detail.code;
|
|
|
+ // 2001: 已经连接服务器
|
|
|
+ // 2002: 已经连接服务器,开始拉流
|
|
|
+ // 2003: 网络接收到首个视频数据包(IDR)
|
|
|
+ // 2004: 视频播放开始
|
|
|
+ // 2005: 视频播放进度
|
|
|
+ // 2006: 视频播放结束
|
|
|
+ // 2007: 视频播放Loading
|
|
|
+ // 2008: 解码器启动
|
|
|
+ // -2301: 网络断连,且经多次重连抢救无效,更多重试请自行重启播放
|
|
|
+ // -2302: 获取加速拉流地址失败
|
|
|
+ }, // 直播错误事件
|
|
|
+ onLiveError(e, liveItem) {
|
|
|
+ this.videoError(e, liveItem);
|
|
|
+ },
|
|
|
+ // 红包 卡片 抽奖
|
|
|
+ getCurrentActivities() {
|
|
|
+ if (!this.liveId) return;
|
|
|
+ currentActivities(this.liveId).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 提取数据(默认空数组/对象避免报错)
|
|
|
+ this.redInfo = (res.red || [])[0];
|
|
|
+ this.lotteryInfo = (res.lottery || [])[0];
|
|
|
+ this.goodsCard = res.goods || {};
|
|
|
+
|
|
|
+
|
|
|
+ this.isShowGoods = this.goodsCard && this.goodsCard.status == 1;
|
|
|
+ this.isShowRed = this.redInfo && this.redInfo.redStatus == 1;
|
|
|
+ this.isShowLottery = this.lotteryInfo && this.lotteryInfo.lotteryStatus == 1;
|
|
|
+ if (this.isShowRed) {
|
|
|
+ this.redTimer = setInterval(() => {
|
|
|
+ const redCountdown = this.handleTime(this.redInfo.updateTime, this.redInfo
|
|
|
+ .duration)
|
|
|
+ if (!redCountdown) {
|
|
|
+ this.isShowRed = false
|
|
|
+ clearInterval(this.redTimer)
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ // 处理抽奖定时器
|
|
|
+ if (this.isShowLottery) {
|
|
|
+ this.lotteryTimer = setInterval(() => {
|
|
|
+ this.countdown = this.handleTime(this.lotteryInfo.updateTime, this
|
|
|
+ .lotteryInfo
|
|
|
+ .duration)
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, rej => {});
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 计算当前时间与 liveItem.startTime 的差值,并更新 totalTime
|
|
|
+ calculateTimeDiff(item) {
|
|
|
+ // 防御1:item 不存在直接返回
|
|
|
+ if (!item.startTime) return;
|
|
|
+ // 步骤1:提取对应场景的时间字符串(直播用startTime,抽奖用updateTime)
|
|
|
+ let timeStr = item.startTime;
|
|
|
+
|
|
|
+ // 转换时间格式(适配iOS,将 "-" 替换为 "/")
|
|
|
+ const iosCompatibleTime = timeStr.replace(/-/g, "/");
|
|
|
+ const time = new Date(iosCompatibleTime);
|
|
|
+
|
|
|
+ if (isNaN(time.getTime())) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const now = new Date();
|
|
|
+ let diffMs = Math.max(0, now - time); // 直播:已播放时长(现在-开始时间)
|
|
|
+ // 步骤4:转换为 时:分:秒(补零处理)
|
|
|
+ const totalSeconds = Math.floor(diffMs / 1000);
|
|
|
+ const hours = this.padZero(Math.floor(totalSeconds / 3600));
|
|
|
+ const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
|
|
|
+ const seconds = this.padZero(totalSeconds % 60);
|
|
|
+ this.$set(this.liveItem, "totalTime", `${hours}:${minutes}:${seconds}`);
|
|
|
+ },
|
|
|
+
|
|
|
+ padZero(num) {
|
|
|
+ return num < 10 ? `0${num}` : num;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 启动当前直播间的时间差值定时器
|
|
|
+ startTimeTimer(item) {
|
|
|
+ // 防御:若 item 不存在,直接返回
|
|
|
+ if (!item) return;
|
|
|
+ // 立即计算一次(避免等待1秒才显示)
|
|
|
+ const totalTime = this.calculateTimeDiff(item);
|
|
|
+ item.timeTimer = setInterval(() => {
|
|
|
+ const totalTime = this.calculateTimeDiff(item);
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ },
|
|
|
+ // 清除指定直播间的时间定时器
|
|
|
+ clearTimeTimer(item) {
|
|
|
+ if (item.timeTimer) {
|
|
|
+ clearInterval(item.timeTimer);
|
|
|
+ item.timeTimer = null; // 清空定时器标识
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ toggleViewerList() {
|
|
|
+ const now = Date.now();
|
|
|
+ if (now - this.lastClickTime > this.clickDelay) {
|
|
|
+ this.showadd = !this.showadd;
|
|
|
+ // 打开弹窗时,若观众列表为空,主动加载第一页
|
|
|
+ if (this.showadd && this.liveViewers.length === 0) {
|
|
|
+ this.getliveUser(false); // 加载第一页观众
|
|
|
+ }
|
|
|
+ this.lastClickTime = now;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeAllWebSockets() {
|
|
|
+ this.isManualClose = true;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 播放视频
|
|
|
+ playVideo(liveItem) {
|
|
|
+ if (!liveItem) return;
|
|
|
+ console.log("直播的状态", liveItem)
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 直播流使用live-player
|
|
|
+ if (liveItem.liveType === 1 && liveItem.livingUrl) {
|
|
|
+ const livePlayerId = `myLivePlayer_${this.liveId}`;
|
|
|
+ const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
|
|
|
+ if (livePlayerContext) {
|
|
|
+ livePlayerContext.play();
|
|
|
+ }
|
|
|
+ } else if (liveItem.liveType === 1 && liveItem.status == 1 && liveItem.videoUrl) {
|
|
|
+ console.log("直播预告")
|
|
|
+ const videoId = `myVideo_${this.liveId}`;
|
|
|
+ const videoContext = uni.createVideoContext(videoId, this);
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.pause(() => {
|
|
|
+ videoContext.play();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 回放视频使用video
|
|
|
+ else if (liveItem.liveType === 2 && liveItem.videoUrl) {
|
|
|
+ const videoId = `myVideo_${this.liveId}`;
|
|
|
+ const videoContext = uni.createVideoContext(videoId, this);
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.pause(() => {
|
|
|
+ videoContext.play();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (liveItem.liveType === 3 && liveItem.videoUrl) {
|
|
|
+ const videoId = `myVideo_${this.liveId}`;
|
|
|
+ const videoContext = uni.createVideoContext(videoId, this);
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.pause(() => {
|
|
|
+ videoContext.play();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("播放视频失败:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ pauseVideo(liveItem) {
|
|
|
+ if (!liveItem) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 直播流使用live-player
|
|
|
+ if (liveItem.liveType === 1) {
|
|
|
+ const livePlayerId = `myLivePlayer_${this.liveId}`;
|
|
|
+ const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
|
|
|
+ if (livePlayerContext) {
|
|
|
+ livePlayerContext.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 回放视频使用video
|
|
|
+ else if (liveItem.liveType === 2) {
|
|
|
+ const videoId = `myVideo_${this.liveId}`;
|
|
|
+ const videoContext = uni.createVideoContext(videoId, this);
|
|
|
+ if (videoContext) {
|
|
|
+ videoContext.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("暂停视频失败:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取直播间用户
|
|
|
+ async getliveUser(isLoadMore = false) {
|
|
|
+ this.viewLoading = true;
|
|
|
+ try {
|
|
|
+ const res = await watchUserList(this.liveId, this.viewPageSize, this.viewPageNum, false);
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.liveUserTotal = res.total || 0;
|
|
|
+ // 兜底 newRows:接口返回的 rows 必须是数组,否则为空数组
|
|
|
+ const newRows = Array.isArray(res.rows) ? res.rows : [];
|
|
|
+ // 兜底 currentViewers:确保是数组(即使初始被意外修改)
|
|
|
+ const currentViewers = Array.isArray(this.liveViewers) ? this.liveViewers : [];
|
|
|
+ // 合并数组(此时两者均为数组,扩展运算符不会报错)
|
|
|
+ this.liveViewers = isLoadMore ? [...currentViewers, ...newRows] : newRows;
|
|
|
+ this.viewPageNum++;
|
|
|
+ } else {
|
|
|
+ this.liveViewers = []; // 接口失败时强制置空数组
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取观众列表失败:', error);
|
|
|
+ this.liveViewers = []; // 捕获异常时强制置空数组
|
|
|
+ } 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 || !this.liveId) {
|
|
|
+ console.error('getLiveMsg 错误:无效的 liveItem', {
|
|
|
+ liveItem: liveItem,
|
|
|
+ currentIndex: this.currentSwiperIndex,
|
|
|
+ });
|
|
|
+ return; // 直接返回,不执行后续逻辑
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const res = await liveMsg(this.liveId, 30, 1);
|
|
|
+ if (res.code == 200) {
|
|
|
+ const rows = Array.isArray(res.rows) ? res.rows : [];
|
|
|
+ const reversedTalkList = [...rows];
|
|
|
+ // .reverse();
|
|
|
+ this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : [];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.scrollIntoView = `list_${reversedTalkList.length - 1}`;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.talklist = [];
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.talklist = [];
|
|
|
+ console.error("获取聊天记录失败:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击红包
|
|
|
+ onRed() {
|
|
|
+
|
|
|
+ if (!this.liveId) return;
|
|
|
+ if (!this.redInfo?.redId) return;
|
|
|
+ if (this.redTimer) {
|
|
|
+ clearInterval(this.redTimer);
|
|
|
+ this.redTimer = null;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ liveId: this.liveId,
|
|
|
+ userId: this.userinfo.userId,
|
|
|
+ redId: this.redInfo.redId,
|
|
|
+ }
|
|
|
+ liveRed(data).then(res => {
|
|
|
+ this.isShowRed = false
|
|
|
+ this.redCard = res
|
|
|
+ this.isShowRedCard = true
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ if (typeof str !== 'string' || str.length <= maxLength) {
|
|
|
+ return str;
|
|
|
+ }
|
|
|
+ return str.slice(0, maxLength) + '...'; // 截断后加省略号
|
|
|
+ },
|
|
|
+
|
|
|
+ // 去订单列表
|
|
|
+ goOrderList() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages_shopping/live/order"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 视频错误处理
|
|
|
+ videoError(e, liveItem) {
|
|
|
+ if (!liveItem || !this.liveId) return;
|
|
|
+
|
|
|
+ // 初始化重试计数
|
|
|
+ if (this.videoRetryCounts[liveItem.liveId] === undefined) {
|
|
|
+ this.videoRetryCounts[liveItem.liveId] = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 限制重试次数
|
|
|
+ if (this.videoRetryCounts[liveItem.liveId] >= 3) {
|
|
|
+ console.error(`直播间 ${this.liveId} 视频加载失败,停止重试`);
|
|
|
+ // 显示错误提示
|
|
|
+ uni.showToast({
|
|
|
+ title: "视频加载失败,请检查网络",
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.videoRetryCounts[this.liveId]++;
|
|
|
+
|
|
|
+ // 延迟重试
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.liveId === this.liveId) {
|
|
|
+ console.log(`第${this.videoRetryCounts[this.liveId]}次重试播放视频`);
|
|
|
+ this.playVideo(liveItem);
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 修改获取直播信息方法
|
|
|
+ async getliving(liveId) {
|
|
|
+ if (!liveId) return;
|
|
|
+ const param = {
|
|
|
+ id: liveId
|
|
|
+ };
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await getlive(param);
|
|
|
+ if (res.code !== 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.liveItem = res.data;
|
|
|
+ this.talklist = Array.isArray((res.data || {}).talklist) ? res.data.talklist : [];
|
|
|
+ if (res.data.status == 1) {
|
|
|
+ // 直播预告
|
|
|
+ this.liveCountdown = this.handleTime(this.liveItem.startTime, 0)
|
|
|
+ this.$set(this.liveItem, 'previewUrl', res.data.previewUrl);
|
|
|
+ this.$set(this.liveItem, 'livingUrl', ''); // 清空直播流
|
|
|
+ this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
|
|
|
+ } else if (res.data.status == 2) {
|
|
|
+ if (res.data.liveType == 1) {
|
|
|
+ // 直播流
|
|
|
+ let cTime = Math.floor(Math.random() * 10000) + 1;
|
|
|
+ let livingUrl = res.data.flvHlsUrl + "&t=" + cTime;
|
|
|
+ console.log("地址在", this.liveItem.livingUrl)
|
|
|
+ this.$set(this.liveItem, 'livingUrl', livingUrl);
|
|
|
+ this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
|
|
|
+ } else if (res.data.liveType === 2 || res.data.liveType === 3) {
|
|
|
+ // 回放视频 2录播 3直播回放
|
|
|
+ this.$set(this.liveItem, 'videoUrl', res.data.videoUrl);
|
|
|
+ this.$set(this.liveItem, 'livingUrl', ''); // 清空直播流
|
|
|
+ } else {
|
|
|
+ // 未开播
|
|
|
+ this.$set(this.liveItem, 'livingUrl', '');
|
|
|
+ this.$set(this.liveItem, 'videoUrl', '');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.startTimeTimer(this.liveItem);
|
|
|
+ await this.getLiveMsg(this.liveItem);
|
|
|
+ await this.getliveViewData(this.liveItem);
|
|
|
+
|
|
|
+ this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
|
|
|
+ this.$set(this.liveItem, 'showType', res.data.showType);
|
|
|
+ this.storeId = res.storeId;
|
|
|
+ } catch (err) {
|
|
|
+ console.error("获取直播信息失败:", err);
|
|
|
+ uni.showToast({
|
|
|
+ title: "获取直播信息失败",
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, // 设置视频播放
|
|
|
+ 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.liveItem;
|
|
|
+ if (currentLive) {
|
|
|
+ this.pauseVideo(currentLive);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关闭所有WebSocket连接
|
|
|
+ this.closeWebSocket();
|
|
|
+
|
|
|
+ // 导航返回
|
|
|
+ const pages = getCurrentPages();
|
|
|
+ if (pages.length > 1) {
|
|
|
+ uni.navigateBack();
|
|
|
+ } else {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages_course/livingList'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点赞
|
|
|
+ async onLike() {
|
|
|
+ if (!this.liveId) return;
|
|
|
+ try {
|
|
|
+ const res = await liveDataLike(this.liveId);
|
|
|
+ if (res?.like) {
|
|
|
+ this.liveViewData.like++; // 只更新当前直播间的点赞数
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('点赞失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //直播间点赞、关注、在线人数数据
|
|
|
+ async getliveViewData(liveItem) {
|
|
|
+ if (!liveItem || !this.liveId) return;
|
|
|
+ try {
|
|
|
+ const res = await getLiveViewData(this.liveId);
|
|
|
+ if (res.code == 200) {
|
|
|
+ // 强制响应式更新,确保数据实时显示
|
|
|
+ this.liveViewData = res;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取直播间数据失败:", error);
|
|
|
+ // 失败时兜底,避免显示异常
|
|
|
+ this.liveViewData = {
|
|
|
+ like: 0,
|
|
|
+ watchCount: 0
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 去购买,跳商品详情
|
|
|
+ goShop(productId, goodsId) {
|
|
|
+ if (!this.liveId) return;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_shopping/live/goods?productId=' + productId + '&liveId=' + this.liveId +
|
|
|
+ '&goodsId=' +
|
|
|
+ goodsId + '&storeId=' + this.storeId
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查询店铺
|
|
|
+ async queryCollect() {
|
|
|
+ if (!this.liveId) return;
|
|
|
+ if (this.inputInfo == null) this.inputInfo = ''
|
|
|
+ try {
|
|
|
+ const res = await liveStore(this.liveId, this.inputInfo);
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 数据绑定到当前 liveItem,避免全局污染
|
|
|
+ this.products = Array.isArray(res.data) ? res.data : [];
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取小黄车商品失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 时间戳
|
|
|
+ initTime() {
|
|
|
+ const now = new Date();
|
|
|
+ this.timestamp = now.getTime(); // 例如:'2023-04-01 12:00:00'
|
|
|
+ },
|
|
|
+
|
|
|
+ openCart() {
|
|
|
+ this.queryCollect()
|
|
|
+ this.shopping = true
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.showadd = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭小黄车
|
|
|
+ closeShop() {
|
|
|
+ this.shopping = false;
|
|
|
+ },
|
|
|
+ // 修改关闭WebSocket方法
|
|
|
+ // closeWebSocket() {
|
|
|
+ // this.socket?.close();
|
|
|
+ // },
|
|
|
+ // 关闭WebSocket连接(isManual:是否手动关闭)
|
|
|
+ closeWebSocket(isManual = true) {
|
|
|
+ this.isManualClose = isManual;
|
|
|
+ this.stopHeartBeat(); // 停止心跳
|
|
|
+ this.resetReconnectState(); // 重置重连状态
|
|
|
+
|
|
|
+ if (this.socket && this.isSocketOpen) {
|
|
|
+ try {
|
|
|
+ this.socket.close({
|
|
|
+ code: 1000, // 正常关闭状态码
|
|
|
+ reason: isManual ? "主动关闭" : "异常关闭"
|
|
|
+ });
|
|
|
+ console.log("WebSocket连接已关闭");
|
|
|
+ } catch (err) {
|
|
|
+ console.error("关闭WebSocket失败:", err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置连接状态
|
|
|
+ this.socket = null;
|
|
|
+ this.isSocketOpen = false;
|
|
|
+ },
|
|
|
+ startHeartBeat() {
|
|
|
+ this.stopHeartBeat(); // 先停止现有心跳,防止重复
|
|
|
+ this.sendHeartBeat(); // 立即发送一次心跳
|
|
|
+ // 按间隔循环发送心跳
|
|
|
+ this.heartBeatTimer = setInterval(() => {
|
|
|
+ this.sendHeartBeat();
|
|
|
+ }, this.heartBeatInterval);
|
|
|
+ },
|
|
|
+ initSocket() {
|
|
|
+ // 校验必要参数
|
|
|
+ if (!this.liveId) return;
|
|
|
+ if (!this.userinfo || !this.userinfo.userId) {
|
|
|
+ console.error("用户信息缺失,无法初始化WebSocket");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除之前的重连定时器
|
|
|
+ if (this.reconnectTimer) {
|
|
|
+ clearTimeout(this.reconnectTimer);
|
|
|
+ this.reconnectTimer = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成签名(原有逻辑保留)
|
|
|
+ const signature = CryptoJS.HmacSHA256(
|
|
|
+ `${this.liveId}${this.userinfo.userId}${this.userType}${this.timestamp}`,
|
|
|
+ this.timestamp.toString()
|
|
|
+ ).toString(CryptoJS.enc.Hex);
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 【关键修复】使用临时变量存储基础地址,避免修改实例的 wsNewUrl
|
|
|
+ const baseWsUrl = 'wss://api.fhhx.runtzh.com/app/webSocket'; // 基础地址(固定)
|
|
|
+ // 首次拼接用 ?,后续用 &
|
|
|
+ let wsUrl =
|
|
|
+ `${baseWsUrl}?userId=${this.userinfo.userId}&liveId=${this.liveId}&userType=${this.userType}×tamp=${this.timestamp}&signature=${signature}`;
|
|
|
+ if (this.qrFrom) wsUrl += this.qrFrom; // 追加 qrFrom(如果有)
|
|
|
+ console.log("WebSocket连接地址:", wsUrl); // 此时URL格式正确
|
|
|
+
|
|
|
+ // 创建Socket任务(使用临时变量 wsUrl,而非 this.wsNewUrl)
|
|
|
+ const socketTask = uni.connectSocket({
|
|
|
+ url: wsUrl, // 用临时变量
|
|
|
+ success: () => console.log("Socket连接请求发送成功"),
|
|
|
+ fail: (err) => {
|
|
|
+ console.error("Socket连接请求失败:", err);
|
|
|
+ this.handleReconnect();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 连接打开事件
|
|
|
+ socketTask.onOpen((res) => {
|
|
|
+ console.log("WebSocket连接已打开");
|
|
|
+ this.socket = socketTask;
|
|
|
+ this.isSocketOpen = true;
|
|
|
+ this.resetReconnectState(); // 重连成功,重置状态
|
|
|
+
|
|
|
+ // 启动心跳检测
|
|
|
+ this.startHeartBeat();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 消息接收事件
|
|
|
+ socketTask.onMessage((res) => {
|
|
|
+ try {
|
|
|
+ const data = JSON.parse(res.data);
|
|
|
+ // 处理服务端心跳响应(根据服务端协议调整cmd字段)
|
|
|
+ if (data.cmd === "heartBeatAck") {
|
|
|
+ console.log("收到心跳响应");
|
|
|
+ this.stopHeartBeat(); // 清除当前超时检测
|
|
|
+ this.startHeartBeat(); // 重新启动心跳周期
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 原有消息处理逻辑(保留)
|
|
|
+ const targetLive = this.liveItem;
|
|
|
+ if (targetLive) {
|
|
|
+ this.handleSocketMessage(res, targetLive);
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error("消息解析异常:", err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 连接关闭事件
|
|
|
+ socketTask.onClose((res) => {
|
|
|
+ console.log("WebSocket连接关闭:", res);
|
|
|
+ this.isSocketOpen = false;
|
|
|
+ this.stopHeartBeat();
|
|
|
+
|
|
|
+ // 非手动关闭且未达最大重连次数,触发重连
|
|
|
+ if (!this.isManualClose && this.reconnectCount < this.maxReconnectAttempts) {
|
|
|
+ this.handleReconnect();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 连接错误事件
|
|
|
+ socketTask.onError((err) => {
|
|
|
+ console.error("WebSocket连接错误:", err);
|
|
|
+ this.isSocketOpen = false;
|
|
|
+ this.handleReconnect(); // 错误直接触发重连
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.error("创建WebSocket异常:", e);
|
|
|
+ this.handleReconnect();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleTime(time, duration) {
|
|
|
+ const targetTimestamp = time + duration * 60 * 1000;
|
|
|
+ // 获取当前时间的时间戳(毫秒级)
|
|
|
+ const currentTimestamp = new Date().getTime();
|
|
|
+
|
|
|
+ // 计算时间差(目标时间 - 当前时间):若为负,说明目标时间已过
|
|
|
+ const timeDiffMs = targetTimestamp - currentTimestamp;
|
|
|
+ if (timeDiffMs <= 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 4. 毫秒转时分秒(核心运算)
|
|
|
+ const hours = Math.floor(timeDiffMs / (1000 * 60 * 60)); // 1小时 = 3600000毫秒
|
|
|
+ const minutes = Math.floor((timeDiffMs % (1000 * 60 * 60)) / (1000 * 60)); // 剩余毫秒转分钟
|
|
|
+ const seconds = Math.floor((timeDiffMs % (1000 * 60)) / 1000); // 剩余毫秒转秒
|
|
|
+
|
|
|
+ // 5. 补零处理(单位数转两位数,如 5 → 05)
|
|
|
+ const formatNum = (num) => num.toString().padStart(2, "0");
|
|
|
+ return {
|
|
|
+ hours: formatNum(hours),
|
|
|
+ minutes: formatNum(minutes),
|
|
|
+ seconds: formatNum(seconds)
|
|
|
+ };
|
|
|
+
|
|
|
+ },
|
|
|
+ // 处理Socket消息
|
|
|
+ handleSocketMessage(message, liveItem) {
|
|
|
+ let data = JSON.parse(message.data)
|
|
|
+ const socketMessage = data.data // 服务端返回的消息体
|
|
|
+ if (data.code == 200) {
|
|
|
+ const messageData = {
|
|
|
+ ...socketMessage,
|
|
|
+ cmd: socketMessage.cmd || '', // 确保cmd字段存在
|
|
|
+ ts: Date.now() // 新增时间戳,用于排序(可选)
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理服务端返回的sendMsg消息,加入本地列表
|
|
|
+ if (socketMessage.cmd == 'sendMsg') {
|
|
|
+ if (!this.isSocketAvailable()) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '连接已断开,正在重试...',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.handleReconnect(); // 主动触发重连
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log("聊天", messageData)
|
|
|
+ const oldList = Array.isArray(this.talklist) ? this.talklist : [];
|
|
|
+ const newList = [...oldList, messageData];
|
|
|
+ this.talklist = newList;
|
|
|
+ // 1. 将消息追加到当前直播间的talklist中(响应式更新)
|
|
|
+ this.talklist = newList;
|
|
|
+ // 2. 延迟下一帧滚动到最新消息(确保DOM已更新)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const lastIndex = this.talklist.length - 1;
|
|
|
+ this.scrollIntoView = `list_${lastIndex}`;
|
|
|
+ });
|
|
|
+ } else if (socketMessage.cmd == 'red') {
|
|
|
+ this.redInfo = JSON.parse(socketMessage.data);
|
|
|
+ this.isShowRed = socketMessage.status === 1;
|
|
|
+ if (this.isShowRed) {
|
|
|
+ this.redTimer = setInterval(() => {
|
|
|
+ const redCountdown = this.handleTime(this.redInfo.updateTime, this.redInfo
|
|
|
+ .duration)
|
|
|
+ if (!redCountdown) {
|
|
|
+ this.isShowRed = false
|
|
|
+ clearInterval(this.redTimer)
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (socketMessage.cmd == 'goods') {
|
|
|
+ this.goodsCard = JSON.parse(socketMessage.data);
|
|
|
+ this.isShowGoods = socketMessage.status == 1;
|
|
|
+
|
|
|
+ } else if (socketMessage.cmd == 'lottery') {
|
|
|
+
|
|
|
+ const parsedData = JSON.parse(socketMessage.data || '{}'); // 默认为空对象
|
|
|
+ this.lotteryInfo = parsedData || {}; // 确保是对象,避免 null
|
|
|
+ this.isShowLottery = socketMessage.status === 1;
|
|
|
+ if (socketMessage.status != 1) {
|
|
|
+ this.isShowLotteryPop = false
|
|
|
+ }
|
|
|
+ // 清除已有定时器(无论状态是否为1,先清掉旧的)
|
|
|
+ clearTimeout(this.lotteryTimer);
|
|
|
+
|
|
|
+ if (this.isShowLottery) {
|
|
|
+ this.lotteryTimer = setInterval(() => {
|
|
|
+ this.countdown = this.handleTime(this.lotteryInfo.updateTime, this.lotteryInfo
|
|
|
+ .duration)
|
|
|
+ if (!this.countdown) {
|
|
|
+ console.log("倒计时", this.countdown)
|
|
|
+ this.isShowLottery = false;
|
|
|
+ this.isShowLotteryPop = false;
|
|
|
+ clearInterval(this.lotteryTimer)
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.isShowLottery = false
|
|
|
+ }
|
|
|
+ } else if (socketMessage.cmd == 'entry' || socketMessage.cmd ==
|
|
|
+ 'out') {
|
|
|
+ // 1. 将消息追加到当前直播间的talklist中(响应式更新)
|
|
|
+ this.inAndOut = socketMessage;
|
|
|
+ this.showWelcomeMessage = false;
|
|
|
+ this.showWelcomeMessage = true;
|
|
|
+ this.getliveUser(false);
|
|
|
+ if (this.welcomeTimer) clearTimeout(this.welcomeTimer);
|
|
|
+ this.welcomeTimer = setTimeout(() => {
|
|
|
+ this.showWelcomeMessage = false;
|
|
|
+ }, 1000);
|
|
|
+ } else if (socketMessage.cmd == 'Integral') {
|
|
|
+ this.integral = {
|
|
|
+ msg: socketMessage.msg,
|
|
|
+ status: true
|
|
|
+ }
|
|
|
+ } else if (socketMessage.cmd == 'LotteryDetail') {
|
|
|
+ try {
|
|
|
+ // 1. 兜底空数据为 "[]",避免 JSON.parse(undefined) 报错
|
|
|
+ const parseData = socketMessage.data || '[]';
|
|
|
+ // 2. 解析 JSON 并捕获异常
|
|
|
+ const prizeData = JSON.parse(parseData);
|
|
|
+ // 3. 强制转为数组
|
|
|
+ this.prizeInfo = Array.isArray(prizeData) ? prizeData : [];
|
|
|
+ } catch (err) {
|
|
|
+ console.error('解析抽奖结果失败:', err);
|
|
|
+ // 4. 异常时兜底为数组
|
|
|
+ this.prizeInfo = [];
|
|
|
+ }
|
|
|
+ this.isShowPrize = true;
|
|
|
+ this.isShowLottery = false;
|
|
|
+ this.isShowLotteryPop = false;
|
|
|
+ } else if (socketMessage.cmd == 'blockUser') {
|
|
|
+ uni.removeStorage({
|
|
|
+ key: 'AppToken',
|
|
|
+ success: () => {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/auth/login'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: data.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sendMsg(retries = 1) {
|
|
|
+ // 防止连续点击发送两次(短时锁定)
|
|
|
+ if (this.isSending) return;
|
|
|
+ this.isSending = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isSending = false;
|
|
|
+ }, 800); // 800ms 内禁止再次发送
|
|
|
+
|
|
|
+ const text = (this.value || '').trim();
|
|
|
+ if (!text) {
|
|
|
+ uni.showToast({ title: "不能发送空消息", icon: 'none' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 1. 连接状态校验:使用定义后的 retries
|
|
|
+ if (!this.isSocketAvailable()) {
|
|
|
+ if (retries > 0) {
|
|
|
+ uni.showToast({ title: `连接不稳定,正在重试(${retries}次)...`, icon: 'none' });
|
|
|
+ // 延迟500ms重试,重试次数减1
|
|
|
+ setTimeout(() => this.sendMsg(retries - 1), 500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: '连接已断开,发送失败', icon: 'none' });
|
|
|
+ this.value = text; // 恢复输入框内容
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const liveId = this.liveId;
|
|
|
+ this.value = ''; // 立即清空输入框,提升体验
|
|
|
+
|
|
|
+ // 构造发送给服务端的消息数据
|
|
|
+ const data = {
|
|
|
+ liveId,
|
|
|
+ userId: this.userinfo.userId,
|
|
|
+ userType: 0,
|
|
|
+ cmd: "sendMsg",
|
|
|
+ msg: text,
|
|
|
+ nickName: this.userinfo.nickName || this.userData.nickname,
|
|
|
+ avatar: this.userinfo.avatar
|
|
|
+ };
|
|
|
+
|
|
|
+ // 发送socket消息
|
|
|
+ try {
|
|
|
+ this.socket.send({
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ success: () => {
|
|
|
+ console.log("发送成功");
|
|
|
+ this.value = '';
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error("消息发送失败:", err);
|
|
|
+ // 2. 发送失败重试:使用定义后的 retries
|
|
|
+ if (retries > 0) {
|
|
|
+ uni.showToast({ title: `发送失败,正在重试(${retries}次)...`, icon: 'none' });
|
|
|
+ setTimeout(() => this.sendMsg(retries - 1), 500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: '发送失败,请稍后再试', icon: 'none' });
|
|
|
+ this.value = text; // 恢复输入框内容
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } catch (err) {
|
|
|
+ console.error("发送消息异常:", err);
|
|
|
+ if (retries > 0) {
|
|
|
+ setTimeout(() => this.sendMsg(retries - 1), 500);
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: '发送失败,请稍后再试', icon: 'none' });
|
|
|
+ this.value = text;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .swiper-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #000000;
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ transform: translateZ(0); // 开启GPU加速
|
|
|
+ will-change: opacity; // 告诉浏览器提前优化该属性
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /* button自带样式清除 */
|
|
|
+ button::after {
|
|
|
+ border: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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: 38vh;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ color: white;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeOut {
|
|
|
+ from {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .send {
|
|
|
+ background-color: #fafafa;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ padding: 14rpx 16rpx;
|
|
|
+ color: #181818;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .talk-list {
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background-color: rgba(33, 33, 33, 0.5);
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .activity-box {
|
|
|
+ position: fixed;
|
|
|
+ top: 188rpx;
|
|
|
+ left: 30rpx;
|
|
|
+ z-index: 5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: rgba(77, 77, 77, 0.5);
|
|
|
+ width: 90rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ color: #fafcff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background-color: rgba(15, 15, 15, 0.8);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10rpx 0;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .side-group {
|
|
|
+ position: absolute;
|
|
|
+ top: 65%;
|
|
|
+ right: 30rpx;
|
|
|
+ z-index: 1000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .side-item {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-top {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .trailer-box {
|
|
|
+ position: relative;
|
|
|
+ top: 15%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .countdown-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .white {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin: 30rpx 10rpx 0;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .videolist {
|
|
|
+ position: relative;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .video {
|
|
|
+ height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(57, 57, 57, 0.4);
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lable {
|
|
|
+ position: absolute;
|
|
|
+ top: 50rpx;
|
|
|
+ right: 16rpx;
|
|
|
+ background-color: rgba(57, 57, 57, 0.6);
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_row {
|
|
|
+ position: absolute;
|
|
|
+ top: 23%;
|
|
|
+ max-height: 450rpx;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .prize-card {
|
|
|
+ width: 504rpx;
|
|
|
+ padding: 40rpx 40rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ // overflow: hidden;
|
|
|
+ align-items: center;
|
|
|
+ background: linear-gradient(180deg, #f76446 0%, #ffd7d5 27%, #ffffff 100%);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .nav-img {
|
|
|
+ width: 311rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -122rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #C32008;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 20rpx 0 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prize-content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #414141;
|
|
|
+ margin: 40rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ background: linear-gradient(180deg, #ff7c30 0%, #FF3A1E 100%);
|
|
|
+ border-radius: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .red-card {
|
|
|
+ width: 550rpx;
|
|
|
+ height: 636rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #FF3A1E;
|
|
|
+ margin: 180rpx 0 90rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFECC3;
|
|
|
+ margin: 80rpx 0 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 392rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ background: linear-gradient(180deg, #FFF4D5 0%, #FFE5B1 100%);
|
|
|
+ border-radius: 48rpx 48rpx 48rpx 48rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #C32008;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .integral-box {
|
|
|
+ min-width: 400rpx;
|
|
|
+ max-width: 600rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-shadow: 0px 4px 8px rgba(255, 89, 2, 0.8);
|
|
|
+ position: absolute;
|
|
|
+ top: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 18rpx 60rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 140rpx;
|
|
|
+ right: 100rpx;
|
|
|
+ z-index: 5;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 280rpx;
|
|
|
+ padding: 4rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ position: absolute;
|
|
|
+ top: 4rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ padding: 12rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 100%;
|
|
|
+ height: 180rpx;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 4rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #FF5701;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del {
|
|
|
+ color: #828282;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-decoration: line-through
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 10rpx 0 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-bg {
|
|
|
+ background-color: rgba(57, 57, 57, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ 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: 750rpx;
|
|
|
+ left: 24rpx;
|
|
|
+ padding: 6rpx 20rpx;
|
|
|
+ background: rgba(230, 154, 34, 0.7);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ z-index: 9;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 抽奖
|
|
|
+ .prize-box {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .nav-img {
|
|
|
+ width: 311rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -122rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .prize-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ padding: 24rpx 0 68rpx;
|
|
|
+
|
|
|
+ .white-item {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: inset 0rpx 2rpx 8rpx 0rpx #FFEBB2;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin: 4rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #F85D22;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-group {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .point-group {
|
|
|
+ margin: 20rpx 0 50rpx;
|
|
|
+ display: flex;
|
|
|
+ gap: 6rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected {
|
|
|
+ background: #FFEB66;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ width: 520rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ background: linear-gradient(180deg, #FFF4D6 0%, #FFEB66 100%);
|
|
|
+ box-shadow: 0rpx 10rpx 8rpx 4rpx rgba(246, 82, 25, 0.5);
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #F4410B;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ 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: 30rpx;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|