1539 lines
53 KiB
Vue
1539 lines
53 KiB
Vue
<template>
|
||
<view class="whole">
|
||
<view id="video-content-box" preload="auto" playsinline webkit-playsinline>
|
||
<!-- <video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
|
||
</video> -->
|
||
</view>
|
||
|
||
<view class="topBox">
|
||
<view class="flex1">
|
||
<view class="backBox flex2">
|
||
<view class="back flex1" @click="toBack('back')"><up-icon name="arrow-left" size="18" color="#333" /></view>
|
||
<zb-popover placement="bottom-start" :options="actions" @select="selectPop">
|
||
<view class="home"><up-icon name="list-dot" size="20" color="#333" /></view>
|
||
</zb-popover>
|
||
</view>
|
||
|
||
<view class="cover">
|
||
<up-avatar :src="liveInfo.cover_img" size="22"></up-avatar>
|
||
<span> {{liveInfo.name}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="rank" @click="openRank">
|
||
<image style="width: 22px;height: 22px;" src="/static/image/rank.png" mode="aspectFit"></image>
|
||
<span> 邀请排行榜</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stbox" v-if="liveInfo.time_status == 1">
|
||
<video v-if="liveInfo.warm_img.indexOf('.mp4') >= 0" :src="liveInfo.warm_img" class="img" :autoplay="true" :muted="true" :loop="true" :controls="false" object-fit="fill"></video>
|
||
<img class="img" :src="liveInfo.warm_img" />
|
||
|
||
<view class="box">
|
||
<up-avatar size="100" :src="liveInfo.cover_img" />
|
||
<view class="tit">{{ liveInfo.name }}</view>
|
||
<view class="time">{{ parseTime(liveInfo.live_start_time) }}直播</view>
|
||
<!-- <up-button plain round @click="toOther">看看其他直播吧</up-button> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stbox" v-if="liveInfo.time_status == 2 && !isPlay">
|
||
<video v-if="liveInfo.warm_img.indexOf('.mp4') >= 0" :src="liveInfo.warm_img" class="img" :autoplay="true" :muted="true" :loop="true" :controls="false" object-fit="fill"></video>
|
||
<img class="img" :src="liveInfo.warm_img" />
|
||
|
||
<view class="box">
|
||
<image style="width: 80px;height: 80px;" src="/static/image/wait.png" mode="aspectFit"></image>
|
||
<view class="text">主播暂时离开，马上回来...</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stbox" v-else-if="liveInfo.time_status == 3">
|
||
<video v-if="liveInfo.warm_img.indexOf('.mp4') >= 0" :src="liveInfo.warm_img" class="img" :autoplay="true" :muted="true" :loop="true" :controls="false" object-fit="fill"></video>
|
||
<img class="img" :src="liveInfo.warm_img" />
|
||
|
||
<view class="box">
|
||
<up-avatar size="100" :src="liveInfo.cover_img" />
|
||
<view class="tit">直播已结束</view>
|
||
<!-- <up-button plain round @click="toOther">看看其他直播吧</up-button> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view :class="showGood ? 'fadeIn' : 'fadeOut'" class="spBox" @click="toGroup">
|
||
<view class="face_img">
|
||
<img :src="curGroup.face_img" class="img" />
|
||
<view class="close" @click.stop="showGood = false">
|
||
<up-icon name="close" size="12" color="#fff"></up-icon>
|
||
</view>
|
||
</view>
|
||
<view class="tit">{{curGroup.title}}</view>
|
||
<view class="price">
|
||
<view class="icon">￥</view>
|
||
<text v-if="curGroup.max_price === curGroup.min_price">{{curGroup.min_price}}</text>
|
||
<text v-else>{{curGroup.min_price * 1}}~{{curGroup.max_price * 1}}</text>
|
||
</view>
|
||
<view class="btn flex1" @click.stop="toPay(curGroup.id)">立即购买</view>
|
||
</view>
|
||
|
||
<view class="msgBox" id="msgBox">
|
||
<view class="scrollBox" id="scrollBox">
|
||
<view class="row" v-for="(it, i) in messageList" :key="i" :id="'item' + i">
|
||
<text v-if="it.name">{{it.name}}</text>{{it.text}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btmBox flex2">
|
||
<view class="inpBox">
|
||
<input v-model="keyValue" id="sendInput" :focus="sendFocus" type="text" class="inpt" placeholder="说点什么..." @confirm="sendBarrage" confirm-type="send" />
|
||
<view class="more flex1" @click="showMore = true">
|
||
<text class="iconfont icon-more"></text>
|
||
</view>
|
||
</view>
|
||
<view class="iconBox flex2">
|
||
<view class="icon flex1" @click="showGroups = true">
|
||
<image class="img" src="/static/image/cart.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="icon flex1" v-if="userId == 7280430 || userId == 7438380 || userId == 7280144 || userId == 242927" @click="showError = true">
|
||
<image class="img" src="/static/image/zan.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="icon flex1" @click="toShare">
|
||
<image class="img" src="/static/image/share.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<up-popup :show="showRank" :round="10" mode="bottom" @close="showRank = false" closeable>
|
||
<view class="topTitle">邀请榜单</view>
|
||
<view class="listbox">
|
||
<view class="rankbox">
|
||
<view v-if="rankloading" class="loadbox">
|
||
<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
|
||
</view>
|
||
<view class="row flex2" v-for="(item, index) in rankList" :key="item.id">
|
||
<view class="box" v-if="item.user">
|
||
<view class="sort flex1" :class="'sort' + index">{{index + 1}}</view>
|
||
<up-avatar shape="square" size="30" :src="item.user.avatar" />
|
||
<text> {{item.user.nickname}}</text>
|
||
</view>
|
||
<view class="num">{{item.invite_count}}位</view>
|
||
</view>
|
||
<view v-if="rankList.length === 0 && !rankloading">
|
||
<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="topname" @click="showInvite = true">
|
||
<up-avatar size="25" :src="myAvatar" />
|
||
<view class="box">
|
||
<view class="name">{{nickname}}</view>
|
||
<view class="desc">已邀请{{inviteList.length}}人</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showInvite" :round="10" mode="bottom" @close="showInvite = false" closeable>
|
||
<view class="topTitle">我的邀请</view>
|
||
<view class="listbox">
|
||
<up-list height="100%">
|
||
<up-list-item v-for="(item, index) in inviteList" :key="index">
|
||
<up-cell v-if="item.invitee_user" :title="item.invitee_user.nickname">
|
||
<template #icon>
|
||
<up-avatar shape="square" size="30" :src="item.invitee_user.avatar" customStyle="margin: -3px 5px -3px 0"></up-avatar>
|
||
</template>
|
||
</up-cell>
|
||
</up-list-item>
|
||
</up-list>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showCoupon" :round="10" mode="bottom" @close="showCoupon = false" closeable>
|
||
<view class="topTitle">我的优惠券</view>
|
||
<view class="listbox">
|
||
<view class="couponbox" v-if="myCoupon.length !== 0">
|
||
<view class="coupon-box" v-for="(item, index) in myCoupon" :key="index">
|
||
<view class="oneBox">
|
||
<view class="coupon-left" :class="item.status == 1 ? 'textColor1' : 'textColor2'">
|
||
<text class="sign">￥<text class="money">{{item.amount}}</text></text>
|
||
<view class="title" v-if="item.full_amount * 100 > 0">满{{item.full_amount}}元可用</view>
|
||
<view class="title" v-else-if="item.type == 51">抵扣金额</view>
|
||
<view class="title" v-else>无门槛</view>
|
||
<view class="vipTag" v-if="item.type == 12">会员优惠券</view>
|
||
</view>
|
||
<view class="coupon-right">
|
||
<view class="birth" v-if="item.source_type == 'birth'">生日优惠券</view>
|
||
<view v-if="item.use_type == 20 || item.use_type === 31" class="text chang" :class="item.status == 1 ? 'textColor' : 'textColor2'">仅该团购可用：{{item.extend.title}}</view>
|
||
<view v-else-if="item.use_type == 21 && item.type === 50" class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
|
||
{{item.extend && item.extend.title || '积分商品可用'}}
|
||
<view class="red_label">
|
||
<view class="red_col red_col1">积分实物兑换</view>
|
||
<view class="red_col red_col2">抵扣券</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="item.type === 51" class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
|
||
{{item.extend && item.extend.title || '实物商品可用'}}
|
||
<view class="red_label">
|
||
<view class="red_col red_col1">实物商品兑换</view>
|
||
<view class="red_col red_col2">抵扣券</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="item.use_type === 40 || item.use_type === 41" class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
|
||
<text>指定团购分类可用</text>
|
||
</view>
|
||
<view v-else class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
|
||
<text v-if="Number(item.amount) < 3">全场通用</text>
|
||
<text v-else>部分团可用</text>
|
||
</view>
|
||
<view v-if="item.shop_groups && (item.use_type === 40 || item.use_type === 41)">
|
||
<view class="solid" :class="item.status == 1 ? 'red' : ''" v-for="it in item.shop_groups" :key="it.id">{{it.name}}</view>
|
||
</view>
|
||
<text class="time">{{item.finish_time.substring(0, 16)}}前有效</text>
|
||
<view class="tips">福利款、活动产品、跨境产品不能使用且不能叠加</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="item.status == 2" class="cannot one" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
|
||
<view v-if="item.status == 3" class="cannot two" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
|
||
<view v-if="item.status == 4" class="cannot three"></view>
|
||
|
||
<view class="tag" v-if="item.is_transfer">
|
||
<up-tag size="mini" type="warning" text="好友赠送"></up-tag>
|
||
</view>
|
||
|
||
<view class="twoBox" v-if="item.status == 1">
|
||
<view class="coupon-btn" @click="gotoHome(item)">立即使用</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 1px;"></view>
|
||
</view>
|
||
<template v-if="!couponloading && !myCoupon.length">
|
||
<up-empty mode="coupon" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/coupon.png" text="暂无优惠券"></up-empty>
|
||
</template>
|
||
<view v-if="couponloading" class="loadbox">
|
||
<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showMore" :round="10" mode="bottom" @close="showMore = false" closeable>
|
||
<view class="topTitle">更多</view>
|
||
<view class="morebox">
|
||
<view class="row flex1" v-for="it in moreList" :key="it.id" @click="handleMore(it.id)">
|
||
<view class="icon"><up-icon :name="it.icon" size="28" :color="Color"></up-icon></view>
|
||
<text>{{it.name}}</text>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showGroups" :round="10" mode="bottom" @close="showGroups = false" closeable :z-index="190">
|
||
<view class="topTitle flex2">
|
||
<text>团购列表</text>
|
||
<view class="iconBox">
|
||
<view class="icon" @click="handleMore(3)"><up-icon name="shopping-cart-fill" size="20" color="#555"></up-icon>购物车</view>
|
||
<view class="icon" @click="handleMore(2)"><up-icon name="file-text-fill" size="20" color="#555"></up-icon>订单</view>
|
||
</view>
|
||
</view>
|
||
<view class="listbox">
|
||
<view class="groupBox">
|
||
<view class="item" v-for="(item, index) in groupsList" :key="item.id" @click="toGoods(item.id)">
|
||
<view class="faceImg">
|
||
<image :src="item.face_img" mode="aspectFill" class="image"></image>
|
||
<view class="out" v-if="item.sold_status === 2">
|
||
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
|
||
</view>
|
||
<view class="out" v-else-if="item.sold_status === 0">
|
||
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
|
||
</view>
|
||
<view class="out" v-else-if="item.total_stock === 0">
|
||
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" />
|
||
</view>
|
||
<view class="zhibo" v-if="item.id == curGroup.id">
|
||
<text class="iconfont icon-zhibozhong"></text>
|
||
<text> 讲解中</text>
|
||
</view>
|
||
</view>
|
||
<view class="info">
|
||
<view class="box">
|
||
<view class="name">{{item.title}}</view>
|
||
<view class="desc">{{item.characteristic}}</view>
|
||
</view>
|
||
|
||
<view class="price flex2">
|
||
<view>
|
||
<text v-if="parseFloat(item.min_price) == parseFloat(item.max_price)">￥{{item.min_price}}</text>
|
||
<text v-else>￥{{item.min_price * 1}}~{{item.max_price}}</text>
|
||
</view>
|
||
|
||
<view class="cart flex1" @click.stop="toPay(item.id)">
|
||
<up-icon name="shopping-cart" color="#fff" size="20" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="!groupsList.length">
|
||
<up-empty mode="coupon" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无团购"></up-empty>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
|
||
<view v-if="showCouGift" class="dialogbox">
|
||
<view class="rect">
|
||
<image class="img" src="/static/image/dialog.png" mode="widthFix"></image>
|
||
<view class="box">
|
||
<view class="coupon">
|
||
<view class="left">
|
||
<view class="sign"><text>￥</text>{{curCoupon.amount}}</view>
|
||
<view class="title" v-if="curCoupon.use_type === 30 || curCoupon.use_type === 31">满{{curCoupon.full_amount}}元可用</view>
|
||
<view class="title" v-else>无门槛</view>
|
||
</view>
|
||
<view class="right">
|
||
<text v-if="curCoupon.use_type == 20 || curCoupon.use_type === 31">指定团购可用</text>
|
||
<text v-if="curCoupon.use_type == 40 || curCoupon.use_type === 41">指定团购分类可用</text>
|
||
<text v-else>全场通用</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="desc">小象八宝粥团购可用</view> -->
|
||
<view class="btn flex1" @click="receiveCoupon">立即领取({{timeNum}})</view>
|
||
</view>
|
||
<view class="close" @click="closeCoupon">
|
||
<up-icon name="close-circle" color="#fff" size="26" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 客服 -->
|
||
<call-center :show="showService" @close="showService = false" :type="1" />
|
||
|
||
<!-- 客服 -->
|
||
<live-share :show="showShare" @close="showShare = false" :id="liveId" :userId="userId" :info="liveInfo"></live-share>
|
||
|
||
<!-- 商品详情 -->
|
||
<group-detail :show="showDetail" :id="groupId" @close="showDetail = false" :live_id="liveId" :streamer_id="streamerId" @back="showlivePay = true"></group-detail>
|
||
|
||
<direct-pay
|
||
:show="showMorePay"
|
||
@close="showMorePay = false"
|
||
:sourceId="source_id"
|
||
:sourceType="source_type"
|
||
:show_stock="show_stock"
|
||
:groupId="groupId"
|
||
:skus_1="skus_1"
|
||
:goodId="goodId"
|
||
:live_id="liveId"
|
||
:streamer_id="streamerId">
|
||
</direct-pay>
|
||
|
||
<view class="bagBox" @click="openBless()" v-if="showBag">
|
||
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/07/0wBdpTq2EEgLUZskqv0VPhIcJZJqxPPFffPGpMJ6.png" mode="aspectFill"></image>
|
||
<view class="box">
|
||
<up-count-down :time="downTime" format="mm:ss" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 福袋 -->
|
||
<up-popup :show="showBless" :round="10" mode="bottom" @close="showBless = false" closeable>
|
||
<view class="bleBox">
|
||
<view class="title"><up-count-down :time="downTime" format="mm:ss后开奖" /></view>
|
||
<view class="tit">{{blessInfo.name}}</view>
|
||
<view class="text">{{blessInfo.num}}个名额</view>
|
||
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/06/VeQDyrVh1hWLad6vISAzz1qWwz7Aqitc6P1oumcY.png" mode="aspectFill"></image>
|
||
<view class="txt" v-if="blessInfo.myLotteryLog">已参与</view>
|
||
<view class="txt" v-else>
|
||
<text v-if="blessInfo.config && blessInfo.config.conditionType == 2">输入指定评论参与抽奖：{{blessInfo.config.conditionData.join('|')}}</text>
|
||
<text v-else>输入任意评价参与抽奖</text>
|
||
</view>
|
||
<view class="btn flex1 hui" v-if="blessInfo.myLotteryLog">参与成功，等待主播开奖</view>
|
||
<view class="btn flex1" v-else @touchend.prevent="toComment"><up-icon name="edit-pen" color="#fff" size="28"></up-icon>发表评论后参与</view>
|
||
|
||
</view>
|
||
</up-popup>
|
||
|
||
<!-- 福袋中奖 -->
|
||
<up-popup :show="showLottery" :round="10" mode="bottom" @close="showLottery = false" closeable>
|
||
<view class="lotBox">
|
||
<image class="img" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/07/4F9fwjpL74jHcdFBE1jGJerkszR7VZyz8Q2sjJw0.png" mode="widthFix"></image>
|
||
<view class="title">恭喜中奖</view>
|
||
<view class="box flex1">
|
||
<view class="score" v-if="lottery.reward_type == 4">{{lottery.type_value}}<text>积分</text></view>
|
||
|
||
<view class="BBox" v-else-if="lottery.reward_type == 3">
|
||
<view class="itm">
|
||
<image :src="lottery.extend.face_img" mode="aspectFill"></image>
|
||
<view class="tit">{{lottery.extend.title}}</view>
|
||
</view>
|
||
<view class="dec">超高折扣商品</view>
|
||
</view>
|
||
|
||
<view class="couBox" v-else-if="lottery.reward_type == 2">
|
||
<view class="itm">
|
||
<view class="sign flex">
|
||
<view class="num">￥<text class="money">{{lottery.amount * 1}}</text></view>
|
||
<text v-if="lottery.full_amount * 1 > 0">满{{lottery.full_amount * 1}}可用</text>
|
||
<text v-else>无门槛</text>
|
||
</view>
|
||
<view class="mid">
|
||
<view v-if="(lottery.use_type == 20 || lottery.use_type === 31) && lottery.extend" class="text">指定团购可用：{{lottery.extend.title}}</view>
|
||
<view v-else-if="lottery.use_type === 40 || lottery.use_type === 41" class="text">指定团购分类可用</view>
|
||
<view v-else class="text">
|
||
<text v-if="Number(lottery.amount) < 3">全场通用</text>
|
||
<text v-else>部分团可用</text>
|
||
</view>
|
||
<view v-if="lottery.shop_groups && (lottery.use_type === 40 || lottery.use_type === 41)">
|
||
<view class="solid red" v-for="it in lottery.shop_groups" :key="it.id">{{it.name}}</view>
|
||
</view>
|
||
|
||
<text class="time" v-if="lottery.finish_time">{{lottery.finish_time.substring(0, 16)}}前有效</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn flex1" v-if="lottery.reward_type == 4">已发放至您账户<br />可在“我的-积分"查看</view>
|
||
<view class="btn flex1" v-else>已发放至您账户<br />可在“我的-优惠券"查看</view>
|
||
<view class="desc" @click="viewLotteryLogs">查看中奖记录 ></view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showFail" :round="10" mode="bottom" @close="showFail = false" closeable>
|
||
<view class="failBox">
|
||
<image class="img" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/07/4F9fwjpL74jHcdFBE1jGJerkszR7VZyz8Q2sjJw0.png" mode="widthFix"></image>
|
||
<view class="title">很遗憾未中奖</view>
|
||
|
||
<view class="btn flex1">下次再来</view>
|
||
<view class="desc" @click="viewLotteryLogs">查看中奖记录 ></view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showPlayer" :round="10" mode="bottom">
|
||
<view class="playBox">
|
||
<view class="title">
|
||
<view class="close flex1" @click="showPlayer = false"><up-icon name="arrow-left" color="#953315" size="20" /></view>
|
||
<text>{{lotteryLogs.length}}人中奖</text>
|
||
</view>
|
||
<view class="box">
|
||
<view class="row flex2" v-for="it in lotteryLogs" :key="it.id">
|
||
<view class="name" v-if="it.user">
|
||
<image class="img" :src="it.user.avatar" mode="aspectFill"></image>
|
||
<text> {{it.user.nickname}}</text>
|
||
</view>
|
||
<view v-if="it.reward_type == 2">
|
||
<text v-if="it.user_coupon.full_amount * 100 > 0">满{{it.user_coupon.full_amount * 1}}减{{it.user_coupon.amount * 1}}优惠券</text>
|
||
<text v-else>{{it.user_coupon.amount}}元无门槛优惠券</text>
|
||
</view>
|
||
<view v-else-if="it.reward_type == 3">实物商品抵扣券</view>
|
||
<view v-else-if="it.reward_type == 4">{{it.prize.type_value}}积分</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showMyPrize" :round="10" mode="bottom" @close="showMyPrize = false" closeable>
|
||
<view class="playBox">
|
||
<view class="topTitle">我的奖励</view>
|
||
<view class="box">
|
||
<view class="row flex2" v-for="it in lotteryLogs" :key="it.id">
|
||
<view class="name" v-if="it.user">
|
||
<image class="img" :src="it.user.avatar" mode="aspectFill"></image>
|
||
<view style="padding-left: 3px;text-align: left;">
|
||
<text>{{it.user.nickname}}</text>
|
||
<view v-if="(it.reward_type == 2 || it.reward_type == 3) && it.user_coupon && it.user_coupon.status != 1">
|
||
<text class="minitag">{{Status[it.user_coupon.status]}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right" @click="toCoupon(it)">
|
||
<view v-if="it.reward_type == 2">
|
||
<view style="display: flex;align-items: center;justify-content: flex-end;">
|
||
<text class="iconfont icon-youhuiquan"></text>
|
||
<view v-if="it.user_coupon.use_type == 20 || it.user_coupon.use_type === 31" class="text">仅该团购可用：{{it.user_coupon.extend.title}}</view>
|
||
<view v-else-if="it.user_coupon.type === 51" class="text">
|
||
{{it.user_coupon.extend && it.user_coupon.extend.title || '实物商品可用'}}
|
||
<view class="red_label">
|
||
<view class="red_col red_col1">实物商品兑换</view>
|
||
<view class="red_col red_col2">抵扣券</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="it.user_coupon.use_type === 40 || it.user_coupon.use_type === 41" class="text">
|
||
<text>指定团购分类可用</text>
|
||
</view>
|
||
<view v-else class="text">
|
||
<text v-if="Number(it.user_coupon.amount) < 3">全场通用券</text>
|
||
<text v-else>部分团可用</text>
|
||
</view>
|
||
<view v-if="it.user_coupon.shop_groups && (it.user_coupon.use_type === 40 || it.user_coupon.use_type === 41)">
|
||
<view class="solid red" v-for="itm in it.user_coupon.shop_groups" :key="itm.user_coupon.id">{{itm.name}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="it.reward_type == 3"><text class="iconfont icon-youhuiquan"></text>实物商品抵扣券</view>
|
||
<view v-else-if="it.reward_type == 4">{{it.prize.type_value}}积分</view>
|
||
<view class="time">{{it.created_at}}</view>
|
||
</view>
|
||
<view v-if="(it.reward_type == 2 || it.reward_type == 3) && it.user_coupon && it.user_coupon.status == 1">
|
||
<up-icon name="arrow-right" size="16" color="#888" />
|
||
</view>
|
||
</view>
|
||
<up-empty v-if="!lotteryLogs.length" mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<up-popup :show="showError" :round="10" mode="bottom" @close="showError = false" closeable>
|
||
<view style="height: 70vh;background-color: #fff;overflow: auto;">
|
||
<view v-for="(it, i) in errorList" :key="i">{{it.text}}</view>
|
||
<up-button @click="errorList = []">清空</up-button>
|
||
</view>
|
||
</up-popup>
|
||
|
||
<!-- 订单支付页 -->
|
||
<up-popup :show="showlivePay" :round="10" mode="bottom" @close="showlivePay = false" closeable>
|
||
<view style="padding: 24rpx 0;text-align: center;">订单支付</view>
|
||
<view style="height: 70vh;background-color: #f5f5f5;overflow: auto;">
|
||
<live-pay :show="showlivePay" :live_id="liveId" :streamer_id="streamerId" :address="addr"></live-pay>
|
||
</view>
|
||
</up-popup>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { reactive, toRefs, watch, ref, nextTick } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
// import TCPlayer from 'tcplayer.js';
|
||
// import 'tcplayer.js/dist/tcplayer.min.css';
|
||
import TencentCloudChat from '@tencentcloud/chat'
|
||
import TIMUploadPlugin from 'tim-upload-plugin'
|
||
import wx from 'weixin-js-sdk'
|
||
import { showToast, judgeShop, userBind } from '@/components/common.js'
|
||
import callCenter from '@/components/callCenter/index.vue'
|
||
import zbPopover from '@/components/Popover/index.vue'
|
||
import liveShare from '@/components/live/share.vue'
|
||
import groupDetail from '@/components/groups/detail.vue'
|
||
import directPay from '@/components/sku/directPay.vue'
|
||
import dayjs from 'dayjs'
|
||
import { sp2 } from '@/components/img.js'
|
||
import livePay from '../pay/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
callCenter, zbPopover, liveShare, groupDetail, directPay, livePay
|
||
},
|
||
setup() {
|
||
const data = reactive({
|
||
sp2: sp2,
|
||
liveId: 0,
|
||
Color: uni.getStorageSync('theme_color'),
|
||
player: null,
|
||
liveInfo: {},
|
||
curGroup: {},
|
||
showGood: false,
|
||
keyValue: '',
|
||
sendFocus: false,
|
||
userId: 0,
|
||
userSign: '',
|
||
chat: null,
|
||
messageList: [],
|
||
showRank: false,
|
||
rankList: [],
|
||
rankloading: [],
|
||
inviteList: [],
|
||
showInvite: false,
|
||
myAvatar: uni.getStorageSync('avatar'),
|
||
nickname: uni.getStorageSync('nickname'),
|
||
showCoupon: false,
|
||
myCoupon: [],
|
||
couponloading: false,
|
||
shop_id: uni.getStorageSync('shop_id'),
|
||
groupsMark: {},
|
||
groupsList: [],
|
||
couponMark: {},
|
||
couponList: [],
|
||
showMore: false,
|
||
moreList: [
|
||
{ id: 1, name: '优惠券', icon: 'red-packet-fill' },
|
||
{ id: 2, name: '订单', icon: 'file-text-fill' },
|
||
{ id: 3, name: '购物车', icon: 'shopping-cart-fill' },
|
||
{ id: 4, name: '奖励', icon: 'gift-fill' },
|
||
{ id: 5, name: '投诉', icon: 'info-circle-fill' }
|
||
],
|
||
actions: [
|
||
{ id: 0, text: '首页', icon: 'home-fill' },
|
||
{ id: 1, text: '联系团长', icon: 'chat-fill' },
|
||
{ id: 2, text: '搜索团购', icon: 'bag-fill' },
|
||
{ id: 3, text: '收藏与浏览', icon: 'heart-fill' },
|
||
{ id: 4, text: '购物车', icon: 'shopping-cart-fill' }
|
||
],
|
||
Status: {
|
||
'2': '已使用',
|
||
'3': '已过期',
|
||
'4': '已失效',
|
||
'5': '已转赠'
|
||
},
|
||
isPlay: false,
|
||
showGroups: false,
|
||
streamerId: '',
|
||
intoView: '',
|
||
showCouGift: false,
|
||
timeInterval: null,
|
||
curCoupon: {},
|
||
timeNum: 10,
|
||
showService: false,
|
||
showShare: false,
|
||
groupId: 0,
|
||
showDetail: false,
|
||
show_stock: 0,
|
||
source_id: 0,
|
||
source_type: 'normal',
|
||
showMorePay: false,
|
||
goodId: 0,
|
||
downTime: 60000,
|
||
showBless: false,
|
||
showLottery: false,
|
||
showPlayer: false,
|
||
blessId: 0,
|
||
blessInfo: {},
|
||
showBag: false,
|
||
showFail: false,
|
||
lottery: {},
|
||
lotteryLogs: [],
|
||
showMyPrize: false,
|
||
showError: false,
|
||
errorList: [],
|
||
is_paused: false,
|
||
showlivePay: false,
|
||
addr: {}
|
||
})
|
||
|
||
function creatVideoDom() {
|
||
const video = document.createElement("video")
|
||
video.setAttribute("id", "player-container-id");
|
||
video.setAttribute("style", "height: 100vh;width: 100%;");
|
||
video.setAttribute('playsinline', true);
|
||
video.setAttribute('webkit-playsinline', true) // video的属性
|
||
// video.setAttribute("preload", "auto");
|
||
// video.setAttribute("x5-video-player-type", "h5");
|
||
// video.setAttribute("x5-video-player-fullscreen", true);
|
||
// video.setAttribute("show-center-play-btn", false);
|
||
// video.setAttribute("x5-playsinline", '');
|
||
// video.setAttribute("x5-video-orientation", 'portrait');
|
||
document.getElementById("video-content-box").appendChild(video);
|
||
}
|
||
|
||
async function getLiveInfo(from) {
|
||
data.errorList.push({text: 'getLiveInfo:-----' + from})
|
||
await get('/api/v1/live/customer/liveDetail/' + data.liveId).then(async(res) => {
|
||
data.liveInfo = res
|
||
data.isPlay = false
|
||
// time_status 1 未开始 2进行中 3已结束
|
||
if(res.time_status == 2) {
|
||
for (let index = 0; index < res.streamers.length; index++) {
|
||
let item = res.streamers[index]
|
||
if(item.pivot.live_status == 1) {
|
||
data.isPlay = true
|
||
data.streamerId = item.id
|
||
getPullUrl('getLiveInfo')
|
||
break
|
||
}
|
||
}
|
||
}
|
||
|
||
uni.setNavigationBarTitle({
|
||
title: res.name
|
||
})
|
||
|
||
data.show_stock = res.shop.show_stock
|
||
|
||
// 直播团购
|
||
if(res.shop_group_goods && res.shop_group_goods.length) {
|
||
data.groupsList = []
|
||
data.curGroup = {}
|
||
res.shop_group_goods.forEach((it, i) => {
|
||
data.groupsMark[it.id] = i
|
||
if(it.pivot && it.pivot.status == 1) {
|
||
data.curGroup = it
|
||
data.showGood = true
|
||
} else {
|
||
data.groupsList.push(it)
|
||
}
|
||
})
|
||
if(data.curGroup.id) {
|
||
data.groupsList.unshift(data.curGroup)
|
||
}
|
||
}
|
||
|
||
// 优惠券
|
||
if(res.shop_coupons && res.shop_coupons.length) {
|
||
data.couponList = res.shop_coupons
|
||
res.shop_coupons.forEach((it, i) => {
|
||
data.couponMark[it.id] = i
|
||
})
|
||
}
|
||
|
||
if(res.live_bags && res.live_bags.length) {
|
||
for(let i = 0; i < res.live_bags.length; i++) {
|
||
if(res.live_bags[i].activity_status == 30 && res.live_bags[i].end_time && dayjs().isBefore(dayjs(res.live_bags[i].end_time))) {
|
||
data.blessId = res.live_bags[i].id
|
||
getBlessInfo()
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function regetPull() {
|
||
get('/api/v1/live/customer/liveDetail/' + data.liveId).then(async(res) => {
|
||
data.liveInfo = res
|
||
data.isPlay = false
|
||
// time_status 1 未开始 2进行中 3已结束
|
||
if(res.time_status == 2) {
|
||
for (let index = 0; index < res.streamers.length; index++) {
|
||
let item = res.streamers[index]
|
||
if(item.pivot.live_status == 1) {
|
||
data.isPlay = true
|
||
data.streamerId = item.id
|
||
getPullUrl('regetPull')
|
||
break
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
async function getPullUrl(from) {
|
||
data.errorList.push({text: 'getPullUrl11:-----' + from + '--id:' + data.liveId})
|
||
await get('/api/v1/live/customer/getPullUrl', {liveId: data.liveId}).then(async(res) => {
|
||
data.player = TCPlayer('player-container-id', {
|
||
sources: [{
|
||
src: res.pullUrl, // 播放地址
|
||
}],
|
||
playsinline: true,
|
||
'webkit-playsinline': true,
|
||
licenseUrl: res.licenseUrl, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
||
autoplay: true,
|
||
muted: false,
|
||
// bigPlayButton: false,
|
||
// controlBar: {
|
||
// progressControl: false,
|
||
// playToggle: false
|
||
// },
|
||
languages:{
|
||
"zh-cn":{
|
||
"A network error caused the media download to fail part-way.": "播放错误，请刷新页面重试"
|
||
}
|
||
}
|
||
})
|
||
data.is_paused = false
|
||
// data.player.play()
|
||
|
||
data.player.on('error', function(error) {
|
||
console.log('播放错误', error)
|
||
data.errorList.push({text: '播放错误:' + JSON.stringify(error)})
|
||
refreshPlayer()
|
||
})
|
||
|
||
data.player.on('pause', function(error) {
|
||
console.log('暂停时触发', error)
|
||
data.is_paused = true
|
||
})
|
||
})
|
||
}
|
||
|
||
function refreshPlayer() {
|
||
if(data.player) {
|
||
data.player.dispose()
|
||
data.player = null
|
||
}
|
||
const div = document.getElementById('video-content-box')
|
||
if(div) {
|
||
div.replaceChildren()
|
||
}
|
||
creatVideoDom()
|
||
getLiveInfo()
|
||
}
|
||
|
||
async function getUserSign() {
|
||
await get('/api/v1/live/liveIm/getUserSign').then((res) => {
|
||
data.userId = res.userId + ''
|
||
data.userSign = res.userSign
|
||
initIM()
|
||
})
|
||
}
|
||
|
||
function initIM() {
|
||
data.chat = TencentCloudChat.create({
|
||
SDKAppID: '1600089204'
|
||
})
|
||
|
||
data.chat.setLogLevel(1) // 普通级别，日志量较多，接入时建议使用
|
||
// data.chat.setLogLevel(1); // release级别，SDK 输出关键信息，生产环境时建议使用
|
||
data.chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin})
|
||
|
||
// 登录 Chat
|
||
let options = {
|
||
userID: data.userId,
|
||
userSig: data.userSign
|
||
}
|
||
let promise = data.chat.login(options)
|
||
promise.then(function(imResponse) {
|
||
console.log(imResponse.data) // 登录成功
|
||
if (imResponse.data.repeatLogin === true) {
|
||
// 标识账号已登录，本次登录操作为重复登录。
|
||
console.log(imResponse.data.errorInfo)
|
||
}
|
||
}).catch(function(imError) {
|
||
console.warn('login error:', imError) // 登录失败的相关信息
|
||
data.errorList.push({text: 'login error:' + JSON.stringify(imError)})
|
||
})
|
||
|
||
getHistoryMsg()
|
||
|
||
setInterval(() => {
|
||
// getOnLineNum()
|
||
}, 10000)
|
||
|
||
data.chat.on(TencentCloudChat.EVENT.SDK_READY, function(event) {
|
||
// 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
|
||
// event.name - TencentCloudChat.EVENT.SDK_READY
|
||
console.log('ready事件', event.name)
|
||
let promise1 = data.chat.joinGroup({
|
||
groupID: data.liveInfo.group_id,
|
||
applyMessage: data.nickname + ''
|
||
});
|
||
promise1.then(function(imResponse) {
|
||
switch (imResponse.data.status) {
|
||
case TencentCloudChat.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
|
||
console.log('等待管理员同意');
|
||
break;
|
||
case TencentCloudChat.TYPES.JOIN_STATUS_SUCCESS: //
|
||
console.log('加群成功', imResponse); // 加入的群组资料
|
||
data.messageList.push({
|
||
name: data.nickname,
|
||
text: '进入了直播间'
|
||
})
|
||
setTimeout(() => {
|
||
sendJoinGroup()
|
||
}, 500)
|
||
break;
|
||
case TencentCloudChat.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
|
||
console.log('已经在群中');
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}).catch(function(imError){
|
||
console.warn('加群失败', JSON.stringify(imError)); // 申请加群失败的相关信息
|
||
data.errorList.push({text: '加群失败' + JSON.stringify(imError)})
|
||
})
|
||
|
||
// 收到推送的单聊、群聊、群提示、群系统通知的新消息
|
||
data.chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, function(event) {
|
||
// event.name - TencentCloudChat.EVENT.MESSAGE_RECEIVED
|
||
// event.data - 存储 Message 对象的数组 - [Message]
|
||
console.log('新消息', event, event.data)
|
||
const List = event.data; // 数组类型，包含多个 Message 对象
|
||
List.forEach((item) => {
|
||
if(item.type === TencentCloudChat.TYPES.MSG_TEXT) { // 处理文本消息
|
||
console.log(item.payload.text)
|
||
if(item.payload && item.payload.text) {
|
||
data.messageList.push({
|
||
name: item.cloudCustomData || '',
|
||
text: item.payload.text
|
||
})
|
||
}
|
||
} else if(item.type === TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE) { // 群系统通知消息
|
||
|
||
} else if(item.type === TencentCloudChat.TYPES.MSG_GRP_TIP) { // 群提示消息
|
||
|
||
}
|
||
})
|
||
})
|
||
|
||
// 监听群属性更新，（更新界面讲解商品、发放的优惠券）
|
||
data.chat.on(TencentCloudChat.EVENT.GROUP_ATTRIBUTES_UPDATED, function(event) {
|
||
let groupID = event.data.groupID // 群组ID
|
||
let attr = event.data.groupAttributes // 更新后的群属性
|
||
console.log('群属性更新', groupID, attr)
|
||
data.errorList.push({text: '群属性更新:' + JSON.stringify(attr)})
|
||
// 监听讲解商品
|
||
if(attr.shopGroupGoodsId === '0') {
|
||
data.showGood = false
|
||
setTimeout(async() => {
|
||
data.curGroup = {}
|
||
}, 500)
|
||
} else if(attr.shopGroupGoodsId && attr.shopGroupGoodsId !== data.curGroup.id) {
|
||
data.showGood = false
|
||
setTimeout(async() => {
|
||
await reGetMarkInfo()
|
||
let i = data.groupsMark[attr.shopGroupGoodsId]
|
||
data.curGroup = data.groupsList[i]
|
||
data.showGood = true
|
||
}, 500)
|
||
}
|
||
|
||
// 监听发放优惠券
|
||
if(attr.shopCouponId) {
|
||
get('/api/v1/live/customer/liveDetail/' + data.liveId).then((ress) => {
|
||
data.couponList = ress.shop_coupons
|
||
ress.shop_coupons.forEach((it, i) => {
|
||
data.couponMark[it.id] = i
|
||
})
|
||
get('/api/v1/live/liveReward/liveCouponList', {live_id: data.liveId}).then((res) => {
|
||
let flag = true
|
||
for(let i = 0; i < res.data.length; i++) {
|
||
let item = res.data[i]
|
||
if(item.shop_coupon_id == attr.shopCouponId) {
|
||
flag = false
|
||
}
|
||
}
|
||
if(flag) {
|
||
let i = data.couponMark[attr.shopCouponId]
|
||
data.curCoupon = data.couponList[i]
|
||
console.log(data.curCoupon)
|
||
data.showCouGift = true
|
||
data.timeNum = 20
|
||
data.timeInterval = setInterval(() => {
|
||
data.timeNum -= 1
|
||
}, 1000)
|
||
} else {
|
||
console.log('已领取过当前优惠券')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 监听直播状态，1直播中，2已结束直播，3直播暂停
|
||
if(attr.liveStatus) {
|
||
if(attr.liveStatus == 1) {
|
||
if(data.player) {
|
||
data.player.dispose()
|
||
data.player = null
|
||
}
|
||
const div = document.getElementById('video-content-box')
|
||
if(div) {
|
||
div.replaceChildren()
|
||
}
|
||
creatVideoDom()
|
||
setTimeout(() => {
|
||
regetPull()
|
||
}, 200)
|
||
} else if(attr.liveStatus == 2) {
|
||
data.player.unload()
|
||
data.player = null
|
||
data.liveInfo.time_status = 3
|
||
} else if(attr.liveStatus == 3) {
|
||
data.player.pause()
|
||
data.isPlay = false
|
||
data.liveInfo.time_status = 2
|
||
}
|
||
}
|
||
|
||
// 监听福袋发放、开奖
|
||
if(attr.liveBag && attr.liveBag * 1 > 0) {
|
||
data.blessId = attr.liveBag
|
||
getBlessInfo()
|
||
}
|
||
|
||
if(attr.liveBag && attr.liveBag * 1 == 0) {
|
||
if(data.blessInfo.myLotteryLog) {
|
||
data.showBless = false
|
||
get('/api/v1/liveBag/lotteryLogs', {activity_id: data.blessId, is_my: 1, reward_type: '2,3,4'}).then((res) => {
|
||
if(res.data.length) {
|
||
if(res.data[0].reward_type == 2) {
|
||
data.lottery = {
|
||
reward_type: 2,
|
||
...res.data[0].user_coupon
|
||
}
|
||
} else if(res.data[0].reward_type == 3) {
|
||
data.lottery = {
|
||
reward_type: 3,
|
||
...res.data[0].user_coupon
|
||
}
|
||
} else if(res.data[0].reward_type == 4) {
|
||
data.lottery = {
|
||
reward_type: 4,
|
||
type_value: res.data[0].prize.type_value
|
||
}
|
||
}
|
||
data.showLottery = true
|
||
data.showBag = false
|
||
} else {
|
||
// 未中奖
|
||
data.showFail = true
|
||
data.showBag = false
|
||
}
|
||
})
|
||
} else {
|
||
// 未参与抽奖
|
||
data.showBag = false
|
||
}
|
||
}
|
||
})
|
||
|
||
// 监听群组列表更新
|
||
data.chat.on(TencentCloudChat.EVENT.GROUP_LIST_UPDATED, function(event) {
|
||
console.log('群组列表更新', event.data)
|
||
// event.data.forEach((item) => {
|
||
// if(item.lastMessage && item.lastMessage.cloudCustomData && item.lastMessage.cloudCustomData.indexOf('mark') != -1) {
|
||
// let nickname = item.lastMessage.cloudCustomData.replace('mark', '')
|
||
// data.messageList.push({
|
||
// name: nickname,
|
||
// text: item.lastMessage.payload.text
|
||
// })
|
||
// }
|
||
// })
|
||
})
|
||
})
|
||
}
|
||
|
||
function getOnLineNum() {
|
||
let promise = data.chat.getGroupOnlineMemberCount(data.liveInfo.group_id)
|
||
promise.then(function(imResponse) {
|
||
console.log('在线人数：' + data.liveInfo.group_id, imResponse.data.memberCount, )
|
||
}).catch(function(imError) {
|
||
console.warn('获取在线人数错误:', imError)
|
||
})
|
||
|
||
let promise1 = data.chat.getGroupMemberList({ groupID: data.liveInfo.group_id, count: 15, offset: 0 }); // 从 0 开始拉取 15 个群成员
|
||
promise1.then(function(imResponse) {
|
||
console.log(imResponse.data.memberList); // 群成员列表
|
||
}).catch(function(imError) {
|
||
console.warn('getGroupMemberList error:', imError);
|
||
})
|
||
}
|
||
|
||
async function reGetMarkInfo() {
|
||
await get('/api/v1/live/customer/liveDetail/' + data.liveId).then((res) => {
|
||
if(res.shop_group_goods && res.shop_group_goods.length) {
|
||
let obj = {}
|
||
data.groupsList = []
|
||
for (var i = 0; i < res.shop_group_goods.length; i++) {
|
||
let it = res.shop_group_goods[i]
|
||
if(it.pivot && it.pivot.status == 1) {
|
||
obj = it
|
||
} else {
|
||
data.groupsList.push(it)
|
||
}
|
||
}
|
||
if(obj.id) {
|
||
data.groupsList.unshift(obj)
|
||
}
|
||
data.groupsList.forEach((it, i) => {
|
||
data.groupsMark[it.id] = i
|
||
})
|
||
}
|
||
|
||
// 优惠券
|
||
if(res.shop_coupons && res.shop_coupons.length) {
|
||
data.couponList = res.shop_coupons
|
||
res.shop_coupons.forEach((it, i) => {
|
||
data.couponMark[it.id] = i
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
function sendJoinGroup() {
|
||
let message = data.chat.createTextMessage({
|
||
to: data.liveInfo.group_id,
|
||
conversationType: TencentCloudChat.TYPES.CONV_GROUP,
|
||
payload: {
|
||
text: '进入了直播间'
|
||
},
|
||
cloudCustomData: data.nickname
|
||
})
|
||
let promise2 = data.chat.sendMessage(message)
|
||
promise2.then(function(imResponse) {
|
||
console.log('进入了直播间', imResponse)
|
||
}).catch(function(imError) {
|
||
console.warn('发送失败', imError)
|
||
data.errorList.push({text: '进入直播间失败:' + JSON.stringify(imError)})
|
||
})
|
||
}
|
||
|
||
async function getBlessInfo() {
|
||
await get('/api/v1/liveBag/' + data.blessId).then((res) => {
|
||
data.blessInfo = res.data
|
||
data.blessInfo.num = res.data.activity_prizes && res.data.activity_prizes[0].remaining_quantity
|
||
if(res.data.activity_status == 30 && res.data.end_time && dayjs().isBefore(dayjs(res.data.end_time))) {
|
||
data.downTime = dayjs(res.data.end_time).diff(dayjs())
|
||
console.log(data.downTime)
|
||
data.showBag = true
|
||
}
|
||
})
|
||
}
|
||
|
||
function parseTime(time) {
|
||
let tt1 = time.split(' ')[0]
|
||
let tt2 = time.split(' ')[1]
|
||
let txt = tt1.split('-')[1] + '月' + tt1.split('-')[2] + '日 ' + tt2.slice(0, 5)
|
||
return txt
|
||
}
|
||
|
||
function toOther() {
|
||
uni.setStorageSync('msg_index', 3)
|
||
uni.switchTab({ url: '/pages/message/index' })
|
||
}
|
||
|
||
function toGroup() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/groups/index?id=' + data.curGroup.id + '&at=live&live_id=' + data.liveId + '&streamer_id=' + data.streamerId
|
||
// })
|
||
data.groupId = data.curGroup.id
|
||
data.showDetail = true
|
||
}
|
||
|
||
function toGoods(id) {
|
||
// uni.navigateTo({
|
||
// url: '/pages/groups/index?id=' + id + '&at=live&live_id=' + data.liveId + '&streamer_id=' + data.streamerId
|
||
// })
|
||
data.groupId = id
|
||
data.showDetail = true
|
||
}
|
||
|
||
function toPay(id) {
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
get(`/api/v1/goods/group/detail/${id}`).then((res) => {
|
||
if(res.data.group_goods.length == 1 && res.data.total_stock * 1 > 0 && res.data.sold_status == 1) {
|
||
data.goodId = res.data.group_goods[0].id
|
||
data.showMorePay = true
|
||
} else {
|
||
toGoods(id)
|
||
}
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
|
||
function sendBarrage() {
|
||
if(!data.keyValue) {
|
||
return
|
||
}
|
||
let message = data.chat.createTextMessage({
|
||
to: data.liveInfo.group_id,
|
||
conversationType: TencentCloudChat.TYPES.CONV_GROUP,
|
||
payload: {
|
||
text: data.keyValue
|
||
},
|
||
cloudCustomData: data.nickname + '：'
|
||
})
|
||
// 发送消息
|
||
let promise = data.chat.sendMessage(message)
|
||
promise.then(function(imResponse) {
|
||
data.messageList.push({
|
||
name: data.nickname + '：',
|
||
text: data.keyValue
|
||
})
|
||
// 未参与
|
||
if(!data.blessInfo.myLotteryLog) {
|
||
if(data.blessId && data.blessInfo.config && (data.blessInfo.config.conditionType == 1 || (data.blessInfo.config.conditionType == 2 && data.blessInfo.config.conditionData.indexOf(data.keyValue) >= 0))) {
|
||
post(`/api/v1/liveBag/join`, {activity_id: data.blessId}).then(async(res) => {
|
||
await getBlessInfo()
|
||
data.showBless = true
|
||
})
|
||
}
|
||
}
|
||
data.keyValue = ''
|
||
}).catch(function(imError) {
|
||
// 发送失败
|
||
console.warn('发送失败', imError)
|
||
data.errorList.push({text: '发送失败:' + JSON.stringify(imError)})
|
||
})
|
||
}
|
||
|
||
function openRank() {
|
||
data.showRank = true
|
||
getRankList()
|
||
}
|
||
|
||
function getRankList() {
|
||
data.rankloading = true
|
||
let params = {
|
||
page: 1,
|
||
pageSize: 100,
|
||
live_id: data.liveId,
|
||
with_user: 1
|
||
}
|
||
get('/api/v1/live/customer/inviteRecord', params).then((res) => {
|
||
data.rankList = res.data
|
||
data.inviteList = res.userRecord
|
||
data.rankloading = false
|
||
}).catch(() => {
|
||
data.rankloading = false
|
||
})
|
||
}
|
||
|
||
function bindInvite(user_id) {
|
||
let params = {
|
||
live_id: data.liveId,
|
||
user_id: user_id
|
||
}
|
||
post('/api/v1/live/customer/saveInviteRecord', params).then((res) => {
|
||
|
||
})
|
||
}
|
||
|
||
function updateShare() {
|
||
let shopId = uni.getStorageSync('shop_id')
|
||
let params = {
|
||
shop_id: uni.getStorageSync('shop_id'),
|
||
url: window.location.href.split('#')[0],
|
||
js_api_list: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
|
||
}
|
||
post('/api/v1/live/liveIm/config', params).then(res => {
|
||
let config = res.data
|
||
wx.config({
|
||
beta: true,
|
||
debug: false,
|
||
appId: config.appId,
|
||
timestamp: config.timestamp,
|
||
nonceStr: config.nonceStr,
|
||
signature: config.signature,
|
||
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
|
||
})
|
||
wx.ready(() => {
|
||
wx.updateAppMessageShareData({
|
||
title: data.liveInfo.name,
|
||
desc: data.liveInfo.brief || `快来看看我的直播吧`,
|
||
link: `${window.location.origin}/web#/pages/live/index?live_id=${data.liveId}&user_id=${data.userId}&shopId=${shopId}`,
|
||
imgUrl: data.liveInfo.cover_img,
|
||
success: function() {
|
||
console.log('分享成功');
|
||
},
|
||
fail: function(err) {
|
||
console.log('分享失败', JSON.stringify(err));
|
||
}
|
||
});
|
||
wx.updateTimelineShareData({
|
||
title: data.liveInfo.name,
|
||
link: `${window.location.origin}/web#/pages/live/index?live_id=${data.liveId}&user_id=${data.userId}&shopId=${shopId}`,
|
||
imgUrl: data.liveInfo.cover_img,
|
||
success: function(){
|
||
console.log('到朋友圈');
|
||
},
|
||
fail: function(err) {
|
||
console.log('分享朋友圈失败', JSON.stringify(err));
|
||
}
|
||
})
|
||
})
|
||
wx.error(function(res){
|
||
console.log('wx错误', res)
|
||
})
|
||
})
|
||
}
|
||
|
||
function toZan() {
|
||
|
||
}
|
||
|
||
function toShare() {
|
||
data.showShare = true
|
||
}
|
||
|
||
function openCoupon() {
|
||
data.showCoupon = true
|
||
getMyCoupon()
|
||
}
|
||
|
||
function getMyCoupon() {
|
||
data.couponloading = true
|
||
let params = {
|
||
live_id: data.liveId
|
||
}
|
||
get('/api/v1/live/liveReward/liveCouponList', params).then((res) => {
|
||
data.myCoupon = res.data
|
||
data.couponloading = false
|
||
}).catch(() => {
|
||
data.couponloading = false
|
||
})
|
||
}
|
||
|
||
function handleMore(id) {
|
||
if(id == 1) {
|
||
data.showMore = false
|
||
openCoupon()
|
||
} else if(id == 2) {
|
||
data.showMore = false
|
||
uni.navigateTo({
|
||
url: '/pages/order/list/index'
|
||
})
|
||
} else if(id == 3) {
|
||
data.showMore = false
|
||
uni.switchTab({
|
||
url: '/pages/cart/index'
|
||
})
|
||
} else if(id == 4) {
|
||
data.showMore = false
|
||
viewMyLottery()
|
||
} else if(id == 5) {
|
||
data.showMore = false
|
||
uni.navigateTo({
|
||
url: '/pages/mine/msg/select'
|
||
})
|
||
}
|
||
}
|
||
|
||
function viewMyLottery() {
|
||
get('/api/v1/liveBag/lotteryLogs', {live_id: data.liveId, is_my: 1, reward_type: '2,3,4'}).then((res) => {
|
||
data.lotteryLogs = res.data
|
||
data.showMyPrize = true
|
||
})
|
||
}
|
||
|
||
function closeCoupon() {
|
||
data.showCouGift = false
|
||
data.timeInterval = null
|
||
}
|
||
|
||
function receiveCoupon() {
|
||
post('/api/v1/userCoupon/normal/receive', {shop_coupon_id: data.curCoupon.id}).then((res) => {
|
||
showToast('领取成功', 'success')
|
||
closeCoupon()
|
||
}).catch((err) => {
|
||
showToast(err)
|
||
closeCoupon()
|
||
})
|
||
}
|
||
|
||
function selectPop(e) {
|
||
if(e.id == 0) {
|
||
toBack('home')
|
||
} else if(e.id == 1) {
|
||
data.showService = true
|
||
} else if(e.id == 2) {
|
||
toPage('/pages/search/index', 1)
|
||
} else if(e.id == 3) {
|
||
toPage('/pages/mine/collection/index', 1)
|
||
} else if(e.id == 4) {
|
||
toPage('/pages/cart/index')
|
||
}
|
||
}
|
||
|
||
const toBack = (val) => {
|
||
let pages = getCurrentPages()
|
||
let pagesLength = pages.length
|
||
if(val == 'back') {
|
||
if(pagesLength > 1) {
|
||
uni.navigateBack({ delta: 1 })
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
}
|
||
|
||
function getHistoryMsg() {
|
||
let params = {
|
||
group_id: data.liveInfo.group_id,
|
||
page: 1,
|
||
pageSize: 20
|
||
}
|
||
get('/api/v1/live/liveIm/messageList', params).then((res) => {
|
||
for (let i = res.data.length - 1; i >= 0; i--) {
|
||
let item = res.data[i]
|
||
if(item.msg_body && item.msg_body[0] && item.msg_body[0].MsgContent && item.msg_body[0].MsgContent.Text != '进入了直播间' && item.user) {
|
||
data.messageList.push({
|
||
name: item.user.nickname + '：',
|
||
text: item.msg_body[0].MsgContent.Text
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function openBless() {
|
||
if(data.blessInfo.activity_status == 30) {
|
||
if(data.blessInfo && data.blessInfo.activity_status == 30 && data.blessInfo.end_time && dayjs().isBefore(dayjs(data.blessInfo.end_time))) {
|
||
data.downTime = dayjs(data.blessInfo.end_time).diff(dayjs())
|
||
data.showBless = true
|
||
}
|
||
} else if(data.blessInfo.activity_status == 40) {
|
||
data.downTime = '00:00'
|
||
data.showBless = true
|
||
}
|
||
}
|
||
|
||
function viewLotteryLogs() {
|
||
get('/api/v1/liveBag/lotteryLogs', {activity_id: data.blessId, is_my: 0, reward_type: '2,3,4'}).then((res) => {
|
||
data.lotteryLogs = res.data
|
||
data.showPlayer = true
|
||
})
|
||
}
|
||
|
||
|
||
function toComment() {
|
||
if(data.blessInfo.config && data.blessInfo.config.conditionType == 2) {
|
||
data.keyValue = data.blessInfo.config.conditionData[0]
|
||
}
|
||
data.showBless = false
|
||
data.sendFocus = true
|
||
setTimeout(() => {
|
||
data.sendFocus = false
|
||
}, 1000)
|
||
|
||
}
|
||
|
||
function toCoupon(row) {
|
||
if((row.reward_type == 2 || row.reward_type == 3) && row.user_coupon && row.user_coupon.status == 1) {
|
||
let item = row.user_coupon
|
||
if((item.use_type === 20 || item.use_type === 31) && item.extend && item.extend.id) {
|
||
uni.navigateTo({
|
||
url: '/pages/groups/index?id=' + item.extend.id
|
||
})
|
||
} else if(item.use_type === 21 && item.type === 50) {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/scoreShop/good?id=' + item.shop_coupon_id
|
||
})
|
||
} else if(item.type === 51) {
|
||
uni.navigateTo({
|
||
url: '/pages/vip/wheel/good?id=' + item.id
|
||
})
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
watch(() => data.messageList, (val) => {
|
||
setTimeout(() => {
|
||
let msgDom = document.getElementById('msgBox')
|
||
let scrollDom = document.getElementById('scrollBox')
|
||
console.log(scrollDom.scrollHeight)
|
||
msgDom.scrollTop = scrollDom.scrollHeight + 30
|
||
}, 100)
|
||
|
||
}, {
|
||
deep: true
|
||
})
|
||
|
||
watch(() => data.timeNum, (val) => {
|
||
if(val == 0) {
|
||
closeCoupon()
|
||
}
|
||
}, {
|
||
deep: true
|
||
})
|
||
|
||
const address = ref(null)
|
||
watch(address, (newValue, oldValue) => {
|
||
console.log('0.0---live')
|
||
data.addr = newValue
|
||
})
|
||
|
||
return {
|
||
address,
|
||
judgeShop,
|
||
...toRefs(data),
|
||
creatVideoDom,
|
||
getLiveInfo,
|
||
getPullUrl,
|
||
parseTime,
|
||
toOther,
|
||
toGroup,
|
||
sendBarrage,
|
||
getUserSign,
|
||
initIM,
|
||
openRank,
|
||
getRankList,
|
||
bindInvite,
|
||
updateShare,
|
||
openCoupon,
|
||
handleMore,
|
||
toShare,
|
||
toZan,
|
||
toGoods,
|
||
closeCoupon,
|
||
receiveCoupon,
|
||
sendJoinGroup,
|
||
selectPop,
|
||
toBack,
|
||
regetPull,
|
||
getHistoryMsg,
|
||
toPay,
|
||
getBlessInfo,
|
||
openBless,
|
||
viewLotteryLogs,
|
||
viewMyLottery,
|
||
userBind,
|
||
toComment,
|
||
toCoupon,
|
||
reGetMarkInfo,
|
||
refreshPlayer,
|
||
getOnLineNum
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
// await this.judgeShop()
|
||
this.liveId = options.live_id
|
||
this.errorList.push({text: 'onLoad:进入了onLoad'})
|
||
setTimeout(async() => {
|
||
this.creatVideoDom()
|
||
await this.getLiveInfo('onLoad')
|
||
await this.getUserSign()
|
||
this.updateShare()
|
||
}, 200)
|
||
if(options.user_id) {
|
||
this.bindInvite(options.user_id)
|
||
this.userBind({from: options.user_id})
|
||
}
|
||
},
|
||
onShow() {
|
||
this.errorList.push({text: '触发onShow'})
|
||
const _this = this
|
||
if(this.is_paused) {
|
||
nextTick(() => {
|
||
_this.refreshPlayer()
|
||
})
|
||
}
|
||
},
|
||
onUnload() {
|
||
console.log('0.0')
|
||
this.errorList.push({text: 'onUnload:进入了onUnload'})
|
||
uni.setStorageSync('liveId', this.liveId)
|
||
if(this.player) {
|
||
this.player.dispose()
|
||
this.player = null
|
||
}
|
||
if(this.chat) {
|
||
this.chat.logout()
|
||
this.chat.destroy()
|
||
}
|
||
},
|
||
onHide() {
|
||
uni.setStorageSync('liveId', this.liveId)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./index.scss";
|
||
|
||
::v-deep .whole .vjs-control-bar {
|
||
display: none !important;
|
||
}
|
||
.payDialog{
|
||
position: fixed;
|
||
left: 0;
|
||
height: 0;
|
||
overflow: hidden;
|
||
bottom: 0;
|
||
z-index: 300;
|
||
&.show{
|
||
height: calc(70vh + 40px);
|
||
}
|
||
}
|
||
</style>
|